The word in the sequins

Hover, TextGSAP, CanvasMediumCompressed weight: Demo 9.1 KBGSAP 28 KBFreeDownload the zip

In the minimal style: a cloth of very thin square sequins, pale on one side and dark on the other. The pointer brushes over it like a hand: the sequins turn in 3D in the direction of the stroke and fall back on a spring, but the ones of a hidden word stay on their dark side, so the hand leaves Hush written behind it. After a while the word turns itself back, one sequin at a time.

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>Hush</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a cloth of thin square sequins, pale on one side and ink on the other: a hand brushing over it turns them, and
       a hidden word stays written on the dark side for a while -->
  <main class="stage" data-stage>
    <canvas class="cloth" data-cloth aria-hidden="true"></canvas>
    <h1 class="sr" data-word>Hush.</h1>
    <p class="note note--top" data-top aria-hidden="true">
      <span class="note__l">Sequin cloth</span>
      <span class="note__r" data-size></span>
    </p>
    <p class="note note--bottom" data-bottom>
      <span class="note__l" data-hint>Brush over the sequins.</span>
      <span class="note__r" aria-hidden="true"><span class="note__label">Written</span> <b class="note__value" data-read>0%</b></span>
    </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.

21 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 in the sequins” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a paper-coloured ground there is a rectangle of small square sequins, all white and parted by a hair of empty space, with two lines of small print above (the name of the cloth and its size in sequins) and two below. At the start the sequins arrive side on, as thin lines, and open flat from left to right like a blind, with a small bounce. Then an invisible hand brushes once along the cloth: the sequins under it turn in 3D, the others fall straight back with a little tremble, and the ones of a hidden word land on their black side and stay there: Hush. appears, with a vermilion full stop. Brushing with the pointer does the same: the sequins near the stroke turn in its direction (horizontally, vertically or on the diagonal), the ones in the middle of the stroke first and those on its sides a moment later; while they turn they catch the light from the top left and the black side gives a grey glint. The sequins of the word stay dark for a few seconds after the hand has passed, then slowly turn back, one at a time, and the cloth is white again. Brushing over a part already written only gives those sequins a small shiver in place. Bottom right, small print says how much of the word is written, the figure getting heavier as it grows. If the cloth stays clean and nobody touches it, the invisible hand brushes it again, from the other side each time.

How it works

The word as a map of sequins

The word is written once on a hidden canvas, ten pixels per sequin, one character at a time and with one sequin of air between characters (so the letters never touch). A sequin belongs to a character when a little less than half of its square is ink: a few points of the square are read with getImageData and averaged. The sequins of punctuation marks get the accent colour on their back. The height of the capitals in sequins is LETTER: more sequins, finer letters and smaller sequins.

A turning sequin, drawn by hand

Every sequin is an object with an angle and an axis lying in the plane of the cloth. To draw it, its four corners are turned in 3D around the axis and seen in perspective from in front of the sequin; the sign of the cosine says which side shows. The normal of the visible side, compared with a light from the top left, brightens or darkens the white and lights the glint on the black. When the sequin is almost side on its thin edge is drawn too, so it never disappears. The sequins at rest are drawn in three batches, one per colour, with a single fill each; the turning ones one by one on top.

The hand: a stroke and an axis

On every pointer move the segment from the previous point to the new one is taken, and every sequin whose centre lies within BRUSH sequins of it is touched. The axis of the turn is square to the stroke, but rounded to one of the eight directions in which a square turned by half a turn lands back on its grid (horizontal, vertical and the two diagonals): with any other axis the black sequins would have stayed askew. The axis changes only while the sequin lies flat, and a sequin just touched ignores the hand for a moment, so it does not restart on every frame.

Writing, ruffling, turning back

Every touch is a small GSAP timeline on the sequin. Outside the word: it lifts up to RUFFLE of half a turn and falls back with elastic.out, a measured tremble. In the word: it goes over to the dark side with back.out (BOUNCE is the overshoot), then, after HOLD seconds plus a small delay different for each one, it comes back in RETURN seconds with back.inOut, so the word comes apart one sequin at a time. A written sequin brushed again only shivers with elastic.out and its return starts over. The delay of every touch grows with the distance from the middle of the stroke: the middle first, then the sides.

Directing: the opening and the invisible hand

The opening is a GSAP timeline: all the sequins start side on around the horizontal axis and open with back.out, staggered by column, like a blind; then the small print comes in. The invisible hand is a tween that carries a point from one end of the word to the other on a light arc, with a reach as tall as the word, and calls the same function as the pointer: the word is written in a single pass. It comes back IDLE seconds after the cloth is clean again, from the other side; a real pointer sends it away. The canvas is redrawn only when something moves.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Hush.'`	The word hidden in the cloth (up to 10 characters; a short one stays big). Punctuation has an accent-coloured back.
`LETTER`	script.js	`13`	How tall the capitals are, in sequins: more means finer letters and smaller sequins (a little fewer on a phone).
`BRUSH`	script.js	`2.8`	The width of the hand, in sequins from the middle of the stroke.
`RUFFLE`	script.js	`0.62`	How far the sequins outside the word tip over: 0.3 a ripple, 0.9 almost a full turn (0 = they stay still).
`BOUNCE`	script.js	`1.9`	How far a sequin landing on its dark side overshoots before it settles (0 = not at all).
`HOLD`	script.js	`2.4`	How many seconds the word stays written after the hand has passed.
`RETURN`	script.js	`1.5`	How many seconds a sequin of the word takes to turn back.
`IDLE`	script.js	`3`	After how many seconds of clean cloth the invisible hand brushes it again (0 = never).
`--back`	style.css	`#161514`	The dark side of the sequins, where the word is written.
`--accent`	style.css	`#e0462a`	The back of the full stop (and of every punctuation mark).

Try them in the Playground

When to use it

For a name or a word to uncover: the cover of a fashion or eveningwear label, the invitation to a party or a night out, the page of a venue, the 404 of a portfolio. It works with any short word, even with an exclamation or a question mark.

On phones

The same sequins and the same turns: the word uses a few fewer sequins in height, so each one stays big enough to see it turn, and the cloth gets taller to fill the screen. You write by dragging a finger, which does not scroll the page; the hint becomes «Drag a finger over the sequins.». If only the height changes (the browser bar coming and going) the cloth moves and keeps what is written.

With reduced motion

Nothing turns: every sequin is a flat square that fades from white to black and back, with the same timings. The cloth and the small print fade in, the invisible hand writes the word by fading it in, and the sequins outside the word do not ruffle.

Pitfalls

With the axis of the turn taken exactly square to the stroke, a slanted stroke left the black sequins rotated against the grid: half a turn around any line is a mirror, and a square mirrored on a slanted line comes out askew. The axis is rounded to the eight symmetry directions of the square.
The invisible hand is as wide as the word and a sequin stays under it for almost a second: with the pointer's short lock it restarted several times and at the end of the writing some sequins were still askew. For the invisible hand the lock lasts as long as the sequin stays under it.
Changing the axis of a sequin half way through its turn made it jump: the new axis only applies when it lies flat.
With the word written eleven sequins tall the s was hard to read: at thirteen, with one sequin of air between the letters, it reads; on a phone it goes down a little so the sequins are not too small.
Redrawing nine hundred sequins on every frame even when they are still is wasted work: the canvas is redrawn only when a timeline marks it, and the still sequins go in just three fills.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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