The cut-out title

Text, SVGGSAP, CSS onlyMediumCompressed weight: Demo 12 KBGSAP 28 KBFreeDownload the zip

A collage title, like a ransom note: every letter is a different cutting from a newspaper or magazine, flutters in like a slip of paper, lands crooked and a strip of sticky tape snaps on to hold it. The pointer lifts a letter; a click unsticks them all and pastes them back from new cuttings.

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 cut-out title</title>
  <!-- the typefaces of the cuttings: every letter is cut from a different paper, set in a different face -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/standard-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/league-gothic@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/courier-prime@5.3.0/400.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/courier-prime@5.3.0/700.css">
  <link rel="stylesheet" href="style.css">
</head>
<body class="js-attesa">
  <!-- the cover of a fanzine: a photocopied sheet, two typed strips and the title pasted on letter by letter.
       Click or tap anywhere (or press Enter) and the letters come unstuck and are pasted back from new cuttings -->
  <main class="scena" data-scena data-autoclic>
    <p class="striscia striscia--sopra" data-striscia>
      <span class="striscia__carta" data-striscia-carta>Independent press weekend</span>
      <span class="nastro nastro--striscia" data-striscia-nastro><span class="nastro__velo"></span></span>
    </p>

    <!-- the script cuts every letter out: a paper, a face, a crooked scissor cut, a shadow and a strip of tape -->
    <h1 class="titolo" data-titolo></h1>

    <p class="striscia striscia--sotto" data-striscia>
      <span class="striscia__carta" data-striscia-carta>Zines, riso &amp; small presses. Old Tram Depot, 14 to 16 May</span>
      <span class="nastro nastro--striscia" data-striscia-nastro><span class="nastro__velo"></span></span>
      <span class="nastro nastro--striscia" data-striscia-nastro><span class="nastro__velo"></span></span>
    </p>

    <p class="nota" data-nota>Click or tap to cut it up again</p>
    <button class="sr" type="button" data-di-nuovo>Cut the title up again</button>
  </main>

  <!-- an invisible SVG to measure the letters in their faces before cutting them out -->
  <svg class="misura" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><text data-misura>M</text></svg>

  <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.

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

Connect Animorio to Claude Code

What it does

It is the cover of an invented fanzine, Paper Riot, for a small-press weekend: a photocopied sheet with toner grain, a typed strip at the top and one at the bottom. The title arrives letter by letter: each letter is a different cutting (newsprint with a scrap of article at the edge, a glossy red or blue page with its shine, yellow or orange halftone, ruled card, black, pink, green, violet paper), in a different face and colour, upper or lower case, with a crooked scissor cut, sometimes with a corner chopped off. It comes down from above swaying and turning like a slip of paper, its shadow drawing closer as it drops; it lands crooked, squashes for a moment and a strip of see-through sticky tape snaps across it, along the edge or diagonally over a corner, with a little bounce. Then the two strips arrive, taped on too. With the pointer over a letter the tape lets go at one end and the cutting lifts off the sheet, its shadow moving away; take the pointer off and it drops back with an elastic. A click sends the tape flying, every letter jumps and spins, turns over halfway into a new cutting, and they are pasted back one at a time in a different order.

How it works

A fixed place for every letter

Every letter has a place as wide as its capital in the widest faces, measured once: whatever cutting comes later, the title never shifts. Every size is in letter heights (the CSS variable --l), so changing --l is all it takes to fit the title to the window.

The scissor cut

A cutting is a div with its paper drawn in CSS (a tint, a halftone from radial-gradient, ruled lines from repeating-linear-gradient, a glossy shine) and a clip-path polygon: four corners pulled in a little, a few straight snips along each side and sometimes a corner chopped off. The shadow is the same shape, dark and blurred, in an element of its own that GSAP moves.

The letter in its face

The letter is SVG text: its width comes from getComputedTextLength (which knows the width and axes of the variable face), its ink above and below the baseline from a canvas measureText. With those numbers the letter fills the cutting and is truly centred, even a lower-case letter or an outlined one.

The flight of a slip

The drop is a timeline: y comes down over the whole time while x, rotation, rotationX and rotationY make three swings, each smaller, with transformPerspective for the 3D turn. The shadow starts wide and faint and tightens as the letter touches down; then a squash and an elastic.

The tape and the click

The tape comes in with scaleX from 0 at one end, overshoots and springs back, nudging the cutting sideways. On a click the tape flies off and the letters jump and spin on rotationY: at 90 degrees, when the paper is edge-on, the cutting is swapped and it carries on from minus 90. Then they go back to their places in a shuffled order.

Values to change

Name	File	Default	What it changes
`TITLE`	script.js	`'Paper Riot'`	The title: every letter becomes a cutting, a space starts a new word.
`TILT`	script.js	`8`	How crooked the cuttings sit, in degrees either way.
`FLUTTER`	script.js	`1`	How much the cuttings sway and turn on their way down (0 = they drop straight).
`GAP`	script.js	`0.13`	The seconds between one cutting and the next.
`LIFT`	script.js	`14`	How far a cutting lifts with the pointer over it, in pixels.
`TAPE`	script.js	`0.55`	How see-through the tape is: 0 clear, 1 opaque.
`SPEED`	script.js	`1`	2 = twice as fast, 0.5 = half as fast.

Try them in the Playground

When to use it

For the title of something handmade or rebellious: a fanzine cover, the page of an independent festival, a punk gig, a graphic design show, a collage magazine, a record launch, a social post. It works best with short titles of one or two words.

On phones

The same animation with the sizes adapted: the letters get smaller so the longest word fits the width, the words wrap and the typed strips break into two lines. Without a pointer there is no lift: a tap shuffles the cuttings.

With reduced motion

Nothing flies or spins: the cuttings fade in already in place, crooked, with their tape, then the strips. On a click they fade out and back in with new cuttings. They do not lift under the pointer.

Pitfalls

With the paper cut by clip-path, a box-shadow or a drop-shadow on the paper itself gets cut off too: the shadow is a separate element with the same shape and the blur on its parent, because filter comes before clipping.
If a letter's width depended on its cutting, every shuffle would make the title jump: the place is measured once, with the widest faces, and every new cutting fits inside it.
A canvas knows nothing of the axes of variable faces (Archivo at width 62 or 125): the width comes from the SVG text, which applies them, and only the ink above and below the baseline comes from the canvas.
On a phone the tape on the strips, sticking out a little past the edge, widened the page and the window grew wider than the screen: overflow hidden on the root and the width taken from clientWidth.
Swapping the cutting face-on would show: the swap happens at rotationY 90, when the paper is edge-on, and the turn carries on from minus 90 so the letter is never seen mirrored.

Libraries

GSAP 3.15.0, Bodoni Moda, Fraunces, Archivo, Big Shoulders Display, Unbounded, League Gothic (font variabili) 5.3.0, Courier Prime 5.3.0.

Compressed with gzip, the three demo files weigh 12 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.