Skip to content

No.299 · Text Animations

Loose Letters

A shop sign whose letter tiles hang from a rail on little strings. Brush past and they swing as damped pendulums, nudging their neighbours; a fast swipe spins one right round its pin. Click and they come off their hooks, fall, bounce and tumble — then climb back up and settle.

The prompt

The design brief behind this component — reuse it to regenerate, remix, or explain it.

Build a hanging shop sign ("OPEN LATE") of letter tiles: each tile (0.86em × 1.06em, rounded, a subtle inset edge and two-step shadow, Newsreader 500) hangs 0.3em below a rail on a 1px string with a pin dot; transform-origin is the pin, so rotating a tile swings it on its string. Hanging physics (one rAF loop that sleeps when everything is still): each tile is a damped pendulum, ω' = −38·sin θ − 2.4·ω + 6·(neighbour angles − θ), integrated in two substeps; angles wrap past ±π so a hard push spins a tile all the way round. Pointer moves within an ellipse around a tile add its horizontal pointer speed (px/s ÷ 120) to ω, scaled by how low on the tile the pointer is (more lever) and by proximity. Click (or the Drop button): every tile leaves its hook with its current swing turned into velocity plus random scatter, falls under 2400px/s² gravity, bounces off the floor (restitution 0.32, friction 0.82), topples toward the nearest flat orientation, and is kept inside the walls; strings fade out. When everything is still for 1.3s (or on a second click), tiles climb back to their pins on staggered eased arcs (1.1s), unwinding whole turns the short way, then rehang with a small alternating swing. A Shake button gives keyboard users the push. Themes: paper (cream tiles, ink letters) and night (dark tiles, glowing amber). Reduced motion: a still sign with no controls. The h2 carries the text; tiles are aria-hidden.

Notes

Interaction
Brush across the letters to swing them; click to drop them; click again to hang them back up. Shake and Drop buttons do the same from the keyboard.
Motion
Pendulum spring (ω² 38, damping 2.4, coupling 6); fall at 2400px/s², restitution 0.32; climb 1.1s staggered.
Accessibility
The heading carries the words; the tiles are aria-hidden. Shake and Drop are real buttons. Reduced motion shows a still sign.
Responsive
Words wrap onto separate rows on narrow screens; pins are re-measured on resize.
On touch
Dragging a finger across the letters swings them; tap drops them.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components