The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
The fridge magnet letters
A fridge door covered in coloured plastic magnet letters, with their thickness, their gloss and a few scratches: you pick them up and throw them with the mouse or a finger, they lean as they travel and clack back on. Every so often they gather by themselves to spell a sentence, then wander off; a click on the door makes them all jump.
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>The fridge magnet letters</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="kitchen">
<!-- the door of a family fridge, covered in chunky plastic letters, two fruit magnets and a couple of notes.
Every magnet can be picked up and thrown: it lifts off the door, leans as it travels and clacks back on.
Every so often the letters gather by themselves to spell a sentence, then wander off again; a click on the
door makes them all jump and rearrange -->
<section class="door" data-door tabindex="0" aria-label="A fridge door covered in magnet letters. Press enter to make them jump and rearrange." aria-describedby="door-help">
<div class="door__shine" aria-hidden="true"></div>
<div class="door__handle" aria-hidden="true"><span class="door__grip"></span></div>
<div class="door__badge" aria-hidden="true"><span>Frostline</span></div>
<div class="door__magnets" data-magnets aria-hidden="true"></div>
</section>
<p class="sr" id="door-help">Drag a magnet to move it, or click the door to make every magnet jump.</p>
<p class="sr" aria-live="polite" data-live></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.
24 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 fridge magnet letters” from Animorio and fit it into my siteWhat it does
The whole screen is the enamel door of a pale mint fridge, with the long reflection of a window, a chrome handle on the left and a Frostline badge at the bottom. On it sit big rounded magnet letters, red, yellow, blue, green, orange and purple: you can see their plastic thickness, darker, a gloss at the top and a few signs of age, light specks, a scratch, a duller patch, every letter different. There are also a lemon, a strawberry and a slice of watermelon, a note from the Little Acorns nursery and a coupon from the Pip and Pine gelato shop, held up by a round magnet. When the page opens the magnets are pressed onto the door one after the other, each with its clack. After a moment the letters gather in the middle to spell HELLO LITTLE ACORNS: the other magnets in the way move aside, the letters come in reading order, come off the door, travel leaning towards where they are going, swing when they stop and stick with a little elastic squash; the finished sentence does a wave, letter after letter. A few seconds later everybody goes back home, then the next sentence comes, TWO SCOOPS PLEASE. Every magnet can be picked up with the mouse or a finger: it comes towards you, its shadow spreading, follows the hand on a spring and leans like a pendulum; let go, it glides on a little with the speed of the hand, turns a bit if thrown sideways and clacks on, and it stays where you put it. A click on the door makes every magnet jump towards you, with a crouch before the jump and a few spins, and drop into the next arrangement: the sentence, or scattered again.
How it works
A plastic letter
Every letter is two copies of the same character, one on top of the other. Underneath is the side: the colour darkened with color-mix and four text-shadows stacked downwards, which make the thickness. On top is the face: a transparent colour and a background clipped to the letter with background-clip: text, made of a light-to-dark gradient, an elliptical gloss at the top and a few tiny radial-gradients placed at random (light specks, a dark mark, a dull patch) plus a thin scratch. Where the marks go is a set of CSS variables, different for every letter, from a seeded random number, so the door always looks the same.
Measuring the letters
To line the letters up and keep them from touching you need their true size. A canvas in the same typeface gives, for every letter, measureText with actualBoundingBox (how wide and tall the drawn letter is) and fontBoundingBox (where the baseline falls): from that comes the magnet's box, in em, and how far the letter is shifted inside it. All in em: the size is the font-size of the door, chosen so that every sentence fits, breaking lines between words.
The pendulum and the clack
GSAP moves the outer element (place, rotation, how close to you, with the --lift variable spreading the drop-shadow); the body inside leans and squashes. A single gsap.ticker measures every magnet's sideways speed on every frame and pushes its angle towards that speed on a damped spring: while it travels it leans, when it stops it swings and straightens, even when the direction moves it. The clack is the last stretch with power3.in (the magnet pulling), then scaleX up and scaleY down for five hundredths of a second and the return with elastic.out.
Picking up and throwing
On pointerdown the magnet stops its animations, captures the pointer and comes towards you with back.out; the ticker pulls it to the finger with a soft chase (1 minus e to the minus 26 times the time). Let go, the speed measured by the ticker decides where it glides, how much it turns and how long the glide lasts, with power3.out, then the clack; where it lands becomes its new home. A click on the door without dragging, or Enter, makes everybody jump: a crouch, a jump up with power2.out, a fall with power2.in, sometimes a full turn.
The direction
The letters to keep are, for every character, as many as the hungriest sentence asks for, plus the spares. To spell a sentence every place takes the nearest free letter of the right kind; magnets whose home falls on the sentence look for the nearest free spot outside its rectangle. Every change is one timeline per magnet with a delay in reading order, and a gsap.delayedCall sets up the next step (scattered, sentence, scattered, next sentence): when you touch a magnet the direction waits a few seconds before starting again.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PHRASES | script.js | ['HELLO LITTLE ACORNS', 'TWO SCOOPS PLEASE'] | The sentences the letters spell, one after the other. The letters they need are added by themselves. |
EXTRA | script.js | 'KMYBZ' | Spare letters that only lie about on the door. |
SIZE | script.js | 1 | How big the letters are (they shrink by themselves if a sentence does not fit). |
TILT | script.js | 1 | How far a magnet leans as it travels (0 = it stays upright). |
SNAP | script.js | 1 | How hard a magnet clacks onto the door. |
THROW | script.js | 1 | How far a thrown magnet glides before it sticks. |
HOLD | script.js | 3.4 | The seconds a sentence stays up. |
REST | script.js | 1.8 | The seconds the letters lie about before the next sentence. |
FRUIT | script.js | true | The fruit magnets and the notes; with false only the letters stay. |
When to use it
For the page of a nursery, a gelato shop, a language school, a toy shop or a family kitchen; for a 404 page or a welcome message you can play with; for a headline that writes itself and that the visitor can take apart.
On phones
The same animations with the sizes adapted: the door stands upright, the letters are a little smaller and the sentence breaks between words, even over three lines. The magnets are dragged and thrown with a finger without scrolling the page; a tap on the door makes them jump.
With reduced motion
Nothing travels: the magnets fade in and, when the sentence is spelled or they scatter, they fade out and fade back in at their new place. Dragged, they follow the finger without leaning or gliding, and stay where you leave them.
Pitfalls
- A text-shadow under a face with background-clip: text and a transparent colour shows through the face: that is why the thickness sits on a second copy of the letter, underneath, and not on the same one.
- The round magnet on the notes covered the first written line: the note has a top margin as tall as the magnet, and the ruled lines start below it.
- On a phone the door is narrow and the sentence takes three lines: the magnets that had to make room for it could not find a free gap and the lemon ended up on the gelato coupon. Now they try many more spots, with a tighter margin, and the letters are a little smaller.
- A lean written into the timeline (turn one way, then back) follows neither the finger nor a magnet that changes course: it comes from the real speed, measured on every frame, on a damped spring, so it works for the direction, the dragging and the jumps, and swings by itself when the magnet stops.
- The poster falls in the middle of the still sentence: the direction starts when the typeface has loaded, so a slow load shifts everything by a few tenths of a second.
Libraries
GSAP 3.15.0, Fredoka (font variabile) 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.
