Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The ice title that melts
A big liquid title freezes: frost grows from the edges in branching crystals and the letters turn into blocks of ice with glints and air bubbles. Then the sun comes up, the letters round off and drip, the drops fall with a splash and make puddles that mirror the sky; at sunset the water climbs back and the title pours itself together again. The pointer warms a letter and melts it first.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The ice title that melts</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures the title, builds every letter (liquid, ice, frost, drops, puddle) and the sky -->
<svg class="palco" data-stage role="img" aria-label="Stay Cool" xmlns="http://www.w3.org/2000/svg"></svg>
<p class="nota" data-hint></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
22 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The ice title that melts” from Animorio and fit it into my siteWhat it does
On a night-blue sky, above a glossy counter that mirrors it, stands the title of a made-up ice-cream shop, Brina Gelato: «Stay Cool», in liquid light-blue letters, glossy and a little soft, gently swaying. From left to right the letters freeze: frost crystals branch out from the edges like ferns, the outline gets a grainy crust, the liquid turns into clear ice that swells a touch, with a lit bevel at the top, a shade at the bottom, two streaks of light and a few air bubbles caught inside. Each letter, once frozen, stiffens with a little jolt and sends out a sparkle; then a glint runs across the whole title. After a while the sun rises behind the counter: the sky warms up to apricot and a pool of light and the sun's trail appear on the counter. The letters melt one at a time, in a scattered order: the frost pulls back, a wisp of steam comes out, the ice turns back into water, the corners round off, the letter slumps and spreads downwards. Underneath, drops swell and stretch a neck, let go, stretch as they fall and land on the counter with a small splash and a ripple; the drops make a puddle that spreads with a wobble, mirrors the sky and catches the glint of the sun. The last piece falls all at once. When the sun sets, a column of water rises from every puddle, the letter springs back up with an elastic bounce and the puddle is sucked away: the title is liquid again and it all starts over. Resting the pointer on a frozen letter warms it (it turns orange, the frost gets shorter, it steams) and melts it before the others; on a liquid letter it makes it wobble like jelly. On a phone a tap does it.
How it works
Letters measured on their pixels
The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. Every letter is a text of its own, placed at its x with measureText on pieces of the title (so the typeface's kerning stays). To know where the frost grows and where the drops fall from, the script draws the letter on a canvas and reads its pixels: the points of the edge with the direction pointing outwards (the difference in alpha from one side to the other), the inside points far from the edge for the bubbles, and for every column the lowest point, where the drops hang. On a tall screen the title goes on two lines, each with its own shelf.
A filter that makes water
Every letter has its own filter, which holds the letter, the drops, the column and the puddle together: feDisplacementMap with a feTurbulence squeezed horizontally (the runs), then the classic «goo», a feGaussianBlur followed by a feColorMatrix that raises the alpha contrast, so shapes close together merge and corners round off; feComposite atop puts the sharp colours back on top. At the end a feSpecularLighting on the blurred alpha gives the liquid its shine. Melting is just the blur and the displacement growing, plus a scale that squashes the letter towards the baseline.
Ice and frost
The ice is a copy of the letter with a light gradient and an outline in the same gradient, which makes it swell a little. On top, clipped by a clipPath made of the letter, are the bevel (two outlines moved diagonally, one white and one dark: moved by more than half their width, only one side shows), the streaks of light, the running glint and the bubbles. The frost sits outside the filter, so it stays sharp: an outline with a grain filter and about thirty crystals, each a path with a stem and branches at sixty degrees, growing from the edge with scale and vector-effect non-scaling-stroke for a constant width.
Drops and puddles
A drop is an ellipse inside the letter's filter: first it swells under the lowest point of its column (which follows the letter as it slumps) and the filter gives it a neck, then it lets go and falls with power2.in, stretching. When it touches the counter it disappears, four or five droplets jump out on a real parabola, a ripple spreads and the puddle grows with elastic.out; its centre moves towards where the drops land. On the puddle sits an ellipse with the sky's gradient upside down and the glint of the sun. On the way back a rounded rectangle rises from the puddle, the letter springs up with elastic.out and the rectangle retracts upwards.
Direction and warmth
The round is a timeline with repeat -1 that calls, at staggered times, freeze, melt and reform for each letter, and moves the sun and the sky colours; every letter has its own timeline, so the pointer can melt one before the others without breaking the round. The state of everything (frost, ice, rounding, slump, puddle, warmth) lives in numbers, and a single function on GSAP's ticker writes them as attributes, only when they change. The warmth grows while the pointer rests on a frozen letter; at one it melts. With reduced motion only fades are left.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TITLE | script.js | 'Stay Cool' | The title that freezes, melts and comes back together. On a tall screen it goes on two lines, split between words. |
BRAND | script.js | 'Brina Gelato' | The small line above the title (empty = none). |
FROST | script.js | 1 | How much frost grows from the edges: more crystals and longer branches (0 = no frost). |
MELT_SPEED | script.js | 1 | How fast the sun melts the letters: 2 is twice as fast, 0.5 half as fast. |
DRIPS | script.js | 1 | How many drops run off each letter as it melts (0 = it falls in a single drop). |
HOLD | script.js | 2 | How many seconds the frozen title stays on show before the sun rises. |
When to use it
For the opening title of an ice-cream shop, a winter festival, a cold drink, an end-of-season sale or anything about cold and heat; also as the intro of a video or a post. It works best with short titles, one or two words.
On phones
The same animation with the sizes adapted: on a tall screen the title goes on two lines, the first resting on a glass shelf, so the letters stay big. A tap on a frozen letter melts it at once.
With reduced motion
Nothing moves: the frost and the ice fade in, the sun fades in already high up, each letter fades out while its puddle fades in, and on the way back the opposite happens. No drops, splashes, steam or swaying.
Pitfalls
- The edge is found on the pixels of a canvas: if the typeface has not loaded yet, the fallback font is measured and the frost grows in thin air. The script waits for document.fonts.load before building.
- The «goo» filter wipes out shapes smaller than its blur: a drop with a radius smaller than the blur never passes the alpha threshold. The largest blur is 4.8% of the letter height and the drops are at least 5.5%.
- With a feColorMatrix raising the contrast, the letter turns opaque even if the ice is semi-transparent: the ice's transparency is faked, with the gradient and the bubbles.
- A drop added from a call to the same timeline that was making it grow sometimes never started, because the timeline had already finished: the fall is a tween of its own, created when the growth ends.
- The sun, just below the horizon, let the tips of its rays and its glow peep out: it starts almost three radii lower and the glow comes on as it rises.
- On a phone, the first line's reflection ended up behind the second: only the last line is mirrored, in the counter.
- To make the round come back identical, which is needed to record the full video, the randomness restarts from the same seed every round and the swaying of the letters follows the timeline's time, not the clock.
Libraries
GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Testing
Tested on 10 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
