The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
The word on the tablecloth
In the minimal style, with real friction: the tablecloth trick. A serif word stands on a vermilion cloth, a thin line hanging over the edge of a table drawn in hairlines. Pulled slowly, the cloth takes the word with it; whipped away, it slips out from under it and the letters stay nearly still, slide a few pixels, rock and gain weight as it passes. The hem can be pulled with the mouse or a finger, and whoever insists drags the word off the table.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mise</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole room is the button: a click whips the cloth away, or lays it again; the hem can be pulled by hand -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="A word standing on a tablecloth. Press to whip the cloth away from under it.">
<header class="top">
<span class="top__brand">Mise</span>
<span class="top__note">Dinner club, Thursdays at eight</span>
</header>
<svg class="room" data-svg aria-hidden="true">
<path class="table" data-table d="" />
<path class="cloth" data-cloth d="" />
<path class="hem" data-hem d="" />
</svg>
<!-- the word: the script splits it, and every letter slides, leans and falls on its own -->
<h1 class="word" data-word>dinner</h1>
<p class="hint" data-hint>Pull the hem down slowly, or click to whip the cloth away.</p>
<p class="read" data-readout><span class="read__label">The word moved</span> <b class="read__value" data-read>0 px</b></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.
17 values to change
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 on the tablecloth” from Animorio and fit it into my siteWhat it does
A warm white room, at the top the name of an invented dinner club, Mise. A table drawn with three thin lines, the top drawing itself from the middle and two legs; a vermilion tablecloth, a single line, is laid on the top from the right edge and hangs down with a small hem. On it the letters of dinner are set down one at a time, each with a beat of weight. The cloth is pulled slowly: static friction holds the letters and the word goes with it, all together, by seventy pixels. Then a whip: the cloth shoots out from under faster than friction can follow and is gone over the edge. The letters feel only a small tug at their feet: they lean back by a few degrees, slide a few pixels on the bare wood (the last ones a little more, because the cloth was under them longer), straighten up with a rock and gain weight the moment the cloth's end passes beneath them. Bottom right you read how far the word moved: seventy pixels with the cloth pulled slowly, six with the whip. After a breath the cloth rises back over the edge and runs under the word: the letters hop as it passes and go back to their places. The hem can be taken with the mouse or a finger and pulled down: slowly, the word comes with the cloth and, if you insist, the letters reach the edge and fall off the table, turning; a click whips the cloth away, or lays it again.
How it works
Every letter is a body with friction
The word is split into letters, each a span with its own position and speed. At every physics step (a twelve-hundredth of a second inside gsap.ticker, with the frame never over a thirtieth of a second) the script checks whether the letter is still on the cloth. On the cloth: if the difference in speed can be cancelled by static friction (GRIP times gravity times the step), the letter goes with the cloth; otherwise kinetic friction (SLIDE) only tugs it a little. On the bare wood friction stops it. Gravity in pixels follows the size of the type: a letter is about six centimetres tall.
The cloth driven by the hand
The cloth is a single number, how far it has been pulled: the line lies on the top from its end to the edge and hangs from there, and pulled far enough it only hangs and slides down out of the room. GSAP moves the target (a slow pull on sine.inOut, a whip that reaches its speed in two hundredths of a second and keeps it), and inside every frame the physics interpolates the cloth step by step, so its speed is continuous.
The tug at the feet
The acceleration of each letter's feet, over gravity, is the angle the letter wants to lean to: back when the cloth pulls it, forward when the wood brakes it. A stiff damped spring chases that angle, so on a slow pull the letters stay upright (a third of a degree) and on the whip they rock by a few degrees and settle. The letter gains weight on Newsreader's wght axis the instant the cloth's end passes beneath it.
Laying the cloth again
A GSAP timeline brings the cloth back: the line rises over the edge and runs along the top to the left; as its head passes under a letter, the letter hops (half a sine) and meanwhile goes home on power2.inOut. Letters that fell off the table fade back in at their places. Every pull starts with the physics clock reset, so the loop on its own always comes back the same.
The hem to pull
Near the hem the pointer becomes a hand: pulling down (or to the right) draws the cloth over the edge as far as the finger moves, and it never goes back, because a cloth cannot be pushed. Slowly, the word follows; letters that pass the table's edge fall with gravity, turning the way they were going. Once the hem is let go, the whip comes a few seconds later.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
GRIP | script.js | 0.45 | Static friction between cloth and letters: more and a slow pull carries them more firmly. |
SLIDE | script.js | 0.15 | The friction while the cloth slips underneath: more and the letters are dragged further. |
WHIP | script.js | 0.08 | How many seconds the whipped cloth takes to slip out from under the word: less is a cleaner trick. |
DRIFT | script.js | 70 | How many pixels the slow pull carries the word before the whip. |
LEAN | script.js | 1 | How much a letter leans when the cloth tugs at its feet (0 = not at all). |
HOLD | script.js | 1.6 | How many seconds the word stands on the bare table before the cloth comes back. |
--accent | style.css | #e5432a | The colour of the tablecloth. |
--weight | style.css | 380 | The weight of the word’s typeface, from 200 to 700. |
When to use it
For the opening of a restaurant, a dinner club, a bistro or a caterer, for the booking or menu page, for a magician or a show. It works with any short word, best without letters that drop below the line (dinner, menu, table), because the letters stand on the table top.
On phones
The same physics, with gravity measured on the size of the type, so the whip leaves the word nearly still on a narrow screen too. The table takes almost the whole width, the hem is pulled with a finger (with a larger area), a tap gives the whip.
With reduced motion
Nothing moves before your eyes: a click fades the cloth out and shows the word again where the whip leaves it, worked out silently to the end, with the pixels it moved; another click puts the cloth back and the word home, again with fades.
Pitfalls
- With a whip that reached its speed in a fifth of a second (power2.in) the cloth stayed under the letters too long and friction dragged them a hundred and fifty pixels, to the table's edge: no trick. Now the hand gives a jerk, two hundredths of a second, and the cloth leaves from under the word in eight hundredths; with sliding friction at 0.15 the word moves six pixels.
- The test word was supper and the two p's went below the table top: the letters stand on the line, so the right word has no letters that drop below it.
- The cloth's end passing under a letter was checked twice and the second check found it already cleared by the first: the letter never gained weight. Now the physics raises a flag and the drawing consumes it.
- In reduced motion the number of pixels was written by hand: now the whip is really worked out, silently, and the word reappears where it stops.
Libraries
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.4 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
