The gelato shop logo

Intro, TextGSAPAdvancedCompressed weight: Demo 11 KBGSAP 28 KBFreeDownload the zip

An intro for the logo of a made-up artisan gelato shop, Cremo, in the rich style: a waffle cone rises into its brass holder, a scoop drops on it and a striped piping bag writes the name in glossy, creamy gelato, letter by letter, with a row of curls underneath. Then the flavours rise through the name in layers, chocolate, strawberry, pistachio and mango under the fiordilatte, sprinkles rain down, a cherry drops on top with its stem wobbling, and a drop melts down the side and is pulled back up.

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 shop logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-stage>
    <!-- the shop awning along the top -->
    <div class="tenda" aria-hidden="true"></div>
    <p class="marca"><span data-brand>Cremo</span> <span class="marca__dida">Small batch gelato</span></p>

    <h1 class="sr" data-title>Cremo</h1>
    <!-- everything is drawn in this svg by script.js: the cone in its holder, the scoop, the piped name, the curls,
         the sprinkles, the cherry, the drip and the piping bag -->
    <svg class="disegno" data-svg aria-hidden="true"></svg>

    <p class="motto" data-tagline>Churned every morning, scooped till late.</p>

    <button class="pillola" type="button" data-replay data-autoclic>
      <span class="pillola__scritta" data-testo="Replay">Replay</span>
    </button>
  </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.

37 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 shop logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The peach pink wall of a gelato shop, under a mint and cream striped awning. A waffle cone rises from the counter, with its diamond grid and the light from the left, and slots into its brass holder; a scoop of gelato drops on it and settles with its wavy skirt. A pink striped piping bag with a chrome star nozzle swings in and writes the name of the shop, Cremo, along a waving line: the gelato comes out glossy and creamy, each letter lands tall and thin and settles on a spring. Underneath, a row of curls. The bag lifts away and the flavours rise through the name in layers, from the bottom: chocolate, strawberry, pistachio and mango, with fiordilatte left on top. Everything sinks a pixel onto the cone, coloured sprinkles rain down and stick to the top of the letters, the cherry drops in the middle, squashes, hops and its stem and leaf wobble. A drop melts down the side of the scoop and is then pulled back up. The line and Replay arrive; move the pointer over the letters and they wobble like gelato.

How it works

One svg, drawn in pixels

Everything is drawn by script.js in an svg as big as the page: the counter, the cone holder, the cone with its waffle grid clipped to its shape, the scoop, the curls, the letters, the sprinkles, the cherry and the piping bag. The sizes come from the font size, worked out from the width and height of the page, and on resize everything is drawn again and the timeline jumps back to where it was.

Gelato out of the nozzle

Each letter is its own text, under a mask: a very thick white line waving along the name, drawn with stroke-dashoffset. The tip of the piping bag follows the point of the line with getPointAtLength, so the gelato appears right under the nozzle; when the tip passes over a letter, the letter lands tall and thin and settles with elastic.out.

Glossy and creamy with a filter

The gelato group has an svg filter: a little feTurbulence and feDisplacementMap softens the edges, a feGaussianBlur makes the relief, feSpecularLighting with a light at the top left makes the shine and feDiffuseLighting the shade on the sides; underneath, a warm shadow moved down.

Layered flavours and sprinkles that stick

Letters, curls, scoop and drop share one vertical gradient: the timeline moves its stops and the flavours rise from the bottom one after another. The letters are also drawn in a hidden canvas: from there the top of every column of pixels is read, and that is where the sprinkles and the cherry land, so they stay on the gelato.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Cremo'`	The name of the shop: short, with no letters hanging below the line.
`SPEED`	script.js	`1`	2 is twice as fast, 0.5 half as fast.
`PIPE_TIME`	script.js	`2.2`	How many seconds the piping bag takes to write the name.
`LAYER_TIME`	script.js	`0.55`	How many seconds each flavour takes to rise.
`SPRINKLES`	script.js	`46`	How many sprinkles on a computer (two thirds on a phone).
`GLOSS`	script.js	`0.8`	How glossy the gelato is.
`WAVE`	script.js	`0.12`	How much the piping line waves, as a share of the letters’ height.
`DRIP`	script.js	`1`	1 makes the drop run, 0 does not.

Try them in the Playground

When to use it

For the opening of the site of a gelato shop, a pastry shop, a frozen yogurt bar or a dessert café, the loader of a food brand, the launch of a new flavour.

On phones

The same intro: the name, the cone and the piping bag are smaller, there are a few fewer sprinkles, and everything fits between the awning and the Replay button.

With reduced motion

Nothing falls and nothing moves: the finished logo appears with its flavours, sprinkles and cherry, in a fade; then the Replay button.

Pitfalls

The sprinkles and the cherry must sit on the gelato: their places are read from the letters drawn in a hidden canvas, with the same font and sizes, after the font has loaded.
The mask that reveals the name has flat ends (stroke-linecap butt): with round ones the gelato would appear before the nozzle gets there.
The gelato filter has a pixel region around the logo: as big as the whole page it would slow every frame on a phone.
Replay only shows up at the end of the entrance: a click halfway, the preview autopilot’s too, would start it all over.

Libraries

GSAP 3.15.0, Fredoka (font variabile) 5.3.0.

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

Testing

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