The gelato title

Text, SVGGSAPAdvancedCompressed weight: Demo 17 KBGSAP 28 KBFreeDownload the zip

A gelato shop's name made of cones: the letters rise out of the marble counter as batter and bake into waffle, then the scoops fall one on top of the other, squash as they land and make the pile wobble. In the heat the gelato sags and slowly drips down the waffle; the pointer is a little spoon that takes a taste.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The gelato title</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/titan-one@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/wght-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the title, for screen readers: the waffle letters and the gelato are drawn in the SVG -->
    <h1 class="leggibile" data-reader>Gelato, Gelateria Bruno</h1>
    <!-- the stage: the script fills it with the awning, the marble counter, the waffle letters, the scoops and the spoon -->
    <svg class="palco" data-stage aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <defs data-defs>
        <!-- soft shadows on the marble -->
        <filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6" data-soft />
        </filter>
      </defs>
      <g data-world></g>
    </svg>
    <p class="marca" hidden>
      <span data-brand>Gelateria Bruno</span>
      <span data-tagline>Churned every morning</span>
    </p>
    <p class="nota" data-hint>Run the spoon over a scoop to take a taste</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.

42 values to change

Open the Playground

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 gelato title” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

Under a pink striped awning a made-up gelato shop, Gelateria Bruno, builds its title, GELATO, on a marble counter. The letters pop up out of the counter one after the other, still pale like batter, overshoot and come back down with a bounce; then they bake: the waffle grid appears inside every letter, which squashes for a moment as if under the iron. Every letter is a cone. The scoops fall from above, one on top of the other: strawberry, pistachio, chocolate, stracciatella, mango, mint and blueberry, each with its frilly edge, the ridges left by the scoop and what is mixed in (seeds, nuts, chocolate flakes). They stretch as they fall, squash as they land and settle with a springy wobble, the scoop below gives a little, the pile sways and three drops fly off. Then a wafer fan is pushed into the tallest pile, a cherry drops on another and bounces with its stem swinging, coloured sprinkles rain on the others, and the shop's name appears below. It is a hot day: the scoops slowly sag and drip down the waffle, in trickles that end in a fat drop; one reaches the counter and spreads into a puddle. A spoon comes by twice and takes a taste: it leaves a hollow in the scoop, which slowly fills back in, and goes off with a curl of gelato. In the end the scoops are taken away upwards, the letters sink back into the counter and the take starts over. With a mouse the pointer becomes the spoon: run quickly over a scoop, it takes a curl and eats it.

How it works

Letters measured on a canvas

Every letter is drawn once on a hidden canvas, in the same face as the title, and its pixels are read: the first row with ink is the top, the widest stroke just below says where the scoop is centred and how big it can be, and column by column we count how far the waffle goes on downwards. There, and only there, a drip can run: a trickle never falls through the air, into the hole of the A or beside the stem of the L.

Waffle and batter

The letter is an SVG text repeated five times: a dark one moved down for the thickness, one in batter colour, one filled with a pattern of raised little squares turned 45 degrees, a light gradient from above and the outline. Baking it just means fading the pattern in over the batter; at the same moment the letter squashes and springs back up.

A scoop, a soft outline

The scoop is a closed outline through some twenty points, smoothed with Catmull-Rom curves: a dome above and a six-wave frill below, with a hair of disorder that is different for every scoop. On top, a radial gradient for the volume, the shadow of the frill, the ridges, the bits and a highlight; all with the origin at the bottom of the scoop, so squashing it just means changing its vertical scale.

The pile and the story

Every scoop has a state (how high it still is, how wide and how tall) and at every frame the scoops are stacked: the bottom of each one is the top of the one below, already squashed. So a scoop that lands makes the one below give way and the whole pile follows, with no separate maths. The story is a repeating GSAP timeline with random numbers that always come out the same: falls, squashes, bounces, drips and the spoon are all tweens on those states.

The spoon

The spoon follows the pointer with a quickTo and tilts with its speed. At every frame its tip is brought into the coordinates of each scoop with the getCTM matrix: if it is inside the dome and the spoon is moving, a hollow is born (three ellipses and a thread of light, clipped to the scoop's outline) that opens with a bounce and closes again in REFILL seconds, and a curl of the right flavour grows on the spoon, to be eaten a moment later.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'GELATO'`	The word made of cones: one letter per character, twelve at most (spaces leave a little room).
`TOWER`	script.js	`3`	The tallest pile of scoops on a letter: 1 is one scoop per letter, 4 wobbly towers.
`SQUASH`	script.js	`1`	How much a scoop squashes as it lands, and how much the pile sways (0 = it lands stiff).
`HEAT`	script.js	`1`	How hot it is: how much the gelato sags and drips (0 = it never melts).
`REFILL`	script.js	`5`	How many seconds the hollow left by the spoon takes to fill back in.
`SPEED`	script.js	`1`	The speed of the whole story: 2 is twice as fast, 0.5 half as fast.
`HOLD`	script.js	`7`	How many seconds the finished title stays melting before the cones are taken back.

Try them in the Playground

When to use it

For the opening of a gelato shop's site, a pastry shop, a summer kiosk, a beach bar or a sweet shop, for a loading screen, a video intro or a summer post. It works with short words, three to seven letters: a brand, GELATO, SUMMER, YUM.

On phones

The same story with the sizes adapted: the word takes almost the whole width and the name sits below, on the counter. Dragging a finger, the spoon appears under it and tastes the scoops it crosses; lift the finger and it goes away.

With reduced motion

Nothing falls, nothing squashes and nothing drips: the letters appear already made of waffle with their scoops, fading in one after the other, with the drips already halfway down, then the name. The spoon follows the pointer without tilting; the hollows fade in and fade out.

Pitfalls

Drips placed at random under the scoop also ran where the letter is not, into the hole of the A or beside the stem of the L, and hung in the air: the good columns are found on the letter's pixels, and a drip never goes past the waffle below it.
The drips live in the letter's group and follow the scoop; while the letter was popping out of the counter, squashed vertically, the scoop still off screen dragged them in, small, above the title: they stay hidden until the scoop below has landed.
The three drops that fly off on landing were fromTo tweens: GSAP draws them straight away at their starting value, and they showed still above the letters from the first frame. They need immediateRender: false.
Squashing a scoop with a tween on its scale moved the one above, which was left in mid-air: the scoops have no fixed position, at every frame the bottom of each one is worked out from the top of the one below, already squashed.
The point where the story's spoon digs in must be read when the tween starts, not when the timeline is written: at that moment the scoop is still off screen. Function values do it, read by GSAP on the tween's first frame.

Libraries

GSAP 3.15.0, Titan One 5.3.0, Fraunces (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 17 KB; the libraries: GSAP 28 KB.

Testing

Tested on 13 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.