Text Animations
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.
Install
# Neon needs no npm packagesThen copy 2 files into your project:
- components/registry/neon/neon.tsx
- hooks/use-animation-loop.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "loop" | "hover" | "steady" | "loop" | What drives the ignition. Loop runs the sign as a shopfront does — lit, cut, struck again. Hover strikes it under the pointer and kills it a quarter of a second after the pointer leaves, because a sign does not fade out. Steady skips the start-up entirely and leaves only the hum and the failing tube. |
| tubeColor | string (hex) | "#a855f7" | The gas. |
| glow | number | 18 | Halo spread, and also the layout room reserved for it — the root pads itself by twice this, because a halo that leaves its box gets painted over by whatever the page put beside it. Changing this rebakes every sprite, so it is a setting rather than something to animate. |
| core | number | 0.85 | How white-hot the centre of the tube runs against the saturated halo around it. It never reaches pure white on purpose: a white centre reads as a lightbulb behind a coloured filter rather than as excited gas. |
| ignition | number | 1.6 | Seconds from cold to steady. Each letter picks its own settle point inside this window and its chance of holding climbs as it warms, so the stutter thins out by itself instead of stopping on a timer. |
| cycle | number | 7 | Seconds lit before the power cuts and the sign strikes again. The dark between is fixed and short — long enough to register as off, short enough that nobody walks away during it. |
| hum | number | 0.18 | Depth of the mains hum once a tube is lit. Two frequencies rather than one, because a single sine reads as a pulse effect; the beat between them is what reads as electricity. |
| flicker | number | 0.3 | How often a tube gives up for a moment. One roll every one and a bit seconds decides whether a letter fails and which one, so failures are occasional and specific rather than a permanent shimmer across the whole word. |
| offGlass | boolean | true | Show the dark glass where a tube is unlit. It carries no glow at all — a dark tube that still glows is the tell that the sign was never really off. |
What It Demonstrates
- Loop
- An animation that repeats, a set number of times or infinitely.
- Hover effect
- Visual change when the cursor moves over an element.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Stepped animation
- An animation that is divided into discrete steps, like a countdown timer.
- Idle animation
- Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
Related Components
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words — a decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Split Flap
A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed — it is arrived at, with a real hinged half falling away as the next one seats behind it.
Teletype
A line of type arriving one character at a time, at a rate that varies and with a beat at every mark.
Molten
Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch — because the glyphs are a coverage field cut by a threshold rather than shapes being moved, so two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time: selectable, searchable, and read correctly aloud while it runs.
Rime
Hoarfrost taking a word — Molten's opposite number, the same idea of type as a coverage field run cold. Crystal tips seeded on the glyph edges creep across the letters, fork at a fixed lattice angle, and die where they run out of glyph or hit ice already there, so the cost tracks the growing edge rather than the area. The text underneath is never redrawn: it stays a real span at its real colour the whole time, which makes the thaw nothing more than fading the ice off type that was always there.
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.