The word made of clay

Text, HoverGSAP, CanvasMediumCompressed weight: Demo 9.3 KBGSAP 28 KBFreeDownload the zip

A minimal-style animation: a large word made of soft grey clay on a warm white table. A finger presses into it leaving prints with the ridges of the fingertip, dragging draws a groove, the raking light follows the hand; now and then a clay cutting wire, the only terracotta accent, sweeps across and smooths it all.

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>Kiln</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a word made of soft grey clay on a warm white table: a finger presses prints into it, a drag draws a groove,
       the raking light follows the hand, and a cutting wire sweeps across and smooths the clay again -->
  <main class="pagina" data-pagina>
    <canvas class="tela" aria-hidden="true" data-tela></canvas>

    <header class="testa">
      <p class="marchio" data-entra>Kiln</p>
      <p class="testa__nota" data-entra>Pottery studio · open Sundays</p>
    </header>

    <h1 class="parola" data-parola>Kiln</h1>

    <footer class="piede">
      <p class="nota" data-entra data-nota>Press the clay, drag to draw a groove</p>
      <p class="stato" data-entra><span class="stato__nome">Clay</span> <span class="stato__valore" data-stato>soft</span></p>
    </footer>
  </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.

20 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 word made of clay” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page with a few small words in Fraunces: top left the name of an invented pottery studio, Kiln, on the right ‘Pottery studio · open Sundays’, bottom left an invitation to press the clay and on the right the state of the clay. In the middle the word ‘Kiln’ is a block of soft grey clay, with rounded shoulders and the grain of the hand that shaped it, casting a short shadow on the table. At the start the letters rise from the table one at a time, overshoot by a hair and settle. Then, if nobody touches, a finger arrives as a soft shadow and leaves three prints: each sinks in an instant, overshoots slightly and comes back up a touch, with the ridges of the fingertip at the bottom and a rim of clay pushed out at the sides; the state counts the prints. Finally a clay cutting wire, a terracotta line stretched between two dark handles, passes from left to right bending a little: behind it the clay is smooth again and shines for two seconds, as if wet, and the state reads ‘smooth’. Pressing with the mouse or a finger leaves a print wherever you like, dragging draws a groove; the raking light turns a little towards the hand, so the shadows of the prints change as you move it.

How it works

The word as a height map

The word is written in a hidden canvas at half resolution (640 by 520 px at most), in WEIGHT, across 72% of the width (84% on a phone). The pixels’ opacity, blurred with three passes of a box blur, gives the height: full in the middle of the stems, rounded on the shoulders like a flattened coil of clay (SOFTNESS). A grain is added: a slow noise, the strokes of the thumb, and a fine one, the sand in the clay (GRAIN).

Light, pixel by pixel

On every frame where something changes, the slope of the map is worked out for each pixel and from it the normal; the light comes from the top left, as raking as RAKE says, and gives light and shade. The Laplacian darkens the hollows and lightens the ridges, a very narrow highlight makes wet clay shine, and the table takes the shadow by looking three steps towards the light. The result goes into an ImageData and is drawn large, with smoothing.

The print and the groove

A print is a slightly oval Gaussian hollow, turned at random, with a rim pushed out at the sides and, at the bottom, the ridges of the fingertip: a sine of the radius. It is linear in depth, so a GSAP tween sinks it little by little, overshoots by 5% and comes back. Dragging, small light prints every 0.3 of a finger make the groove. The hollows live in a separate, clamped map and only count where there is clay.

The wire that smooths

The wire is a terracotta line drawn over the map, bent with a quadratic curve, with two dark handles. As GSAP carries it from left to right in WIRE seconds, the columns behind it go back to zero and are marked as wet, and just ahead the clay swells a little. The wet dries in two seconds and meanwhile strengthens the highlight.

The loop on its own and the hand

A GSAP timeline raises the letters one at a time, then a loop that repeats every CYCLE seconds: three prints with the finger’s shadow arriving and leaving, and the wire. When a real finger touches, the loop stops; it starts again after 3.5 seconds with nobody. The pointer slowly shifts the direction of the light.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Kiln'`	The word made of clay: short, it fits on one line.
`WEIGHT`	script.js	`820`	The weight of the word (Fraunces goes from 100 to 900).
`SOFTNESS`	script.js	`1`	How rounded the letters’ shoulders are.
`DENT`	script.js	`1`	How deep the finger sinks.
`FINGER`	script.js	`22`	The size of the fingertip, in px.
`GRAIN`	script.js	`1`	How visible the grain of the clay is.
`RAKE`	script.js	`1`	How raking the light is: higher means longer shadows.
`WIRE`	script.js	`1.6`	How many seconds the wire takes to cross the word.
`CYCLE`	script.js	`11`	How often, with nobody around, the prints and the wire come back, in seconds.

Try them in the Playground

When to use it

As the opening of a pottery studio, a potter, a modelling course, a handmade goods shop or a design studio that works with materials; anywhere a single word should feel made by hand and invite touch.

On phones

The same with a finger: tapping leaves a print, dragging a groove. The word fits 84% of the width and the map stays at half resolution. Over the demo the finger presses the clay instead of scrolling the page.

With reduced motion

The word of clay is already raised, with a single print, and fades in; no automatic finger and no wire. Touching makes a print appear straight away, without sinking.

Pitfalls

The lighting is only worked out when something changes (the light, a print, the wire, the wet): pixel by pixel on every frame, on a big screen, would be too much.
The hollows must be clamped (down to 85% of the height and up to 45%), or dragging for a long time in one spot digs through the table.
A print must only count where there is clay: on the table the finger leaves nothing, and at the edge of the letters the print fades with the height.
canvas.filter for the blur is not available in every browser: a hand-made box blur gives the same rounded shoulders everywhere.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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

Testing

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