The plasticine title

Text, PhysicsGSAP, CanvasAdvancedCompressed weight: Demo 13 KBGSAP 28 KBFreeDownload the zip

A title of coloured plasticine shot in stop-motion, at twelve frames a second: the balls drop, squash, roll into sausages and bend into the letters, which then breathe. The pointer leaves a thumbprint that slowly fills back in; a click balls a letter up and models it again.

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 plasticine title</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the title, for screen readers: the clay letters are painted on the canvas -->
    <h1 class="leggibile" data-reader>LUMPY</h1>
    <!-- the table, the balls of clay and the letters: all painted on this canvas -->
    <canvas class="tavolo" data-stage aria-hidden="true"></canvas>
    <p class="marca" data-brand>
      <span class="marca__nome">Pictures</span>
      <span class="marca__riga">A stop-motion studio. Every frame made by hand.</span>
    </p>
    <p class="nota" data-hint>Press a letter with the pointer, click to squash it</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.

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

Connect Animorio to Claude Code

What it does

Five balls of plasticine, red, yellow, blue, green and pink, drop from above onto a cream modelling board (the Y has two, one per stroke). As they fall their soft shadow waits for them on the board, blurred and pale, and grows darker as they arrive; as they hit the board they squash, bounce once and settle with a little wobble. Then, one after the other, they are rolled into a sausage that rocks under an invisible palm, and the sausage bends into its letter, from the middle out to the ends, with a last springy settle: the word LUMPY is born, and underneath appears the name of a made-up animation studio, Lumpy Pictures. Everything moves in steps, at twelve frames a second, like a film shot frame by frame: at every frame the letters are put back by hand a hair off. The clay is matt, with fingerprints, a few small pits, specks of other colours and a soft light from the left. The letters breathe: they stretch up and thin, then squat and widen, and the sausages ripple slightly. An invisible thumb presses twice and leaves its print, with the ridges of the fingertip, which slowly fills back in; then the M is balled up, hops, lands as a ball and is modelled again. In the end every letter turns back into a ball and is lifted away, and the take starts over. Moving the pointer over the letters leaves prints; a click balls the letter up and models it again.

How it works

An alphabet of sausages

Every letter is the centre line of one or more sausages, in a box one unit tall: straight strokes and elliptical arcs written by hand, from A to Z. Each stroke is resampled at a fixed step and softened with a moving average (clay never has sharp corners), so it always has the same number of points. For the same stroke a straight sausage is prepared, with those points in a row, and a ball holding the same clay: its radius is the cube root of the sausage's volume.

Ball, sausage, letter

A single number per letter, f, says the shape: 0 is the ball, 1 the straight sausage, 2 the letter. Between 0 and 1 the points move away from the centre and the thickness goes from the ball's to the sausage's, which rocks sideways meanwhile; between 1 and 2 each point travels from its place in the sausage to its place in the letter, the middle points first and the ends last. Balling up is another number, crush: the points twist and shrink towards the centre until the shape is the ball, and there f goes back to 0 without a jump.

Painting the clay

Each letter is drawn on a canvas of its own: first the full shape (a round-capped line, plus a circle wherever the clay is fatter), then, inside the shape with source-atop, a darker colour covered by the shape itself moved up to the left and blurred, which leaves the edge in shadow; then a pale blurred strip along the top, the fingerprint texture and the flaws. Blurs are costly: they are done on a canvas four times smaller, with the shadow of a copy drawn off screen, and stretched back up.

Twelve frames a second

The story is a repeating GSAP timeline; the tweens run smoothly, but the canvas is redrawn only when the frame changes, Math.floor of time times FPS. At every frame the letters move and turn a hair, with random numbers that depend only on the frame number: the next take has the same jitter. The breathing is a sine that stretches up and narrows sideways, plus a wave along the normal of every point.

The print and the click

The pointer looks for the nearest point of the letter; if it is on the clay a print is born, with a depth that a tween takes to 1 in an instant and back to 0 in REFILL seconds. There the clay widens a little, and on top a dish is drawn: a dark gradient on the side of the light, a pale one on the other and the broken arcs of the fingertip. The click uses a second set of numbers for the letter, combined with the story's (the minimum for the shape, the maximum for the crush), so the letter is remade even while the take goes on.

Values to change

Name	File	Default	What it changes
`TITLE`	script.js	`'LUMPY'`	The word modelled in clay: letters from A to Z, one ball for every stroke (spaces leave a little room).
`FPS`	script.js	`12`	The frames per second of the stop-motion: 12 is the classic, 24 is smooth, 6 very jerky.
`SQUISH`	script.js	`1`	How deep the pointer's print goes (0 = no prints).
`REFILL`	script.js	`4`	How many seconds a print takes to fill back in.
`BREATHE`	script.js	`1`	How much the finished letters breathe and ripple (0 = they keep still, apart from the frame jitter).
`THICKNESS`	script.js	`1`	How fat the sausages are: 0.7 thin, 1.4 chunky.
`SPEED`	script.js	`1`	The speed of the whole take: 2 is twice as fast, 0.5 half as fast.
`HOLD`	script.js	`6`	How many seconds the finished title stays on the board before it turns back into balls.

Try them in the Playground

When to use it

For the opening of an animation studio's site, a nursery, a play centre, a toy shop or a modelling class, for a long loading screen, for a video intro or a social post. It works with short words, three to seven letters: a brand, PLAY, HELLO, MAKE.

On phones

The same take with the sizes adapted: the word takes almost the whole width. Dragging a finger across a letter leaves prints, a tap balls it up and models it again.

With reduced motion

Nothing drops, nothing is rolled and there is no jitter: the letters appear already modelled, fading in one after the other, then the studio's name. Prints appear and fade without the clay moving; a click fades the letter out and back in.

Pitfalls

A sausage drawn as a single polygon, with its edges moved along the normals, turned inside out in tight curves (the O, the S) and left holes: the shape is a round-capped line plus a circle wherever the clay is fatter, all in the same colour on a canvas of its own.
Drawing the shadow stroke by stroke, with shadowBlur, made it darker where the pieces overlapped: the full shape is drawn on a canvas first, then the whole canvas is blurred in one go.
Blurs on a canvas as big as the screen, at Retina density, cost too much for every frame: they are done on a canvas four times smaller and stretched back up; the clay is soft and the difference does not show.
A ball still off the screen has no shadow, because drawImage copies nothing from outside the canvas: the shadow is drawn from the shape already brought down to the board, under the spot where the ball will land.
The balls lifted away at the end left a huge blurred shadow on the board: the shadow disappears as the ball climbs past a certain height.
With a truly random jitter the preview video never found an identical loop and did not stop: the random numbers depend only on the frame number of the take, so every take is identical to the one before.

Libraries

GSAP 3.15.0, Fredoka (font variabile) 5.3.0.

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

Testing

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