Text Animations
Teletype
A line of type arriving one character at a time, at a rate that varies and with a beat at every mark.
Install
bun add motion clsx tailwind-mergeThen copy 3 files into your project:
- components/registry/teletype/teletype.tsx
- hooks/use-animation-loop.ts
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| charsPerSecond | number | 22 | Typing rate before jitter. Above roughly 40 the reader stops perceiving individual keystrokes and starts seeing a wipe. |
| deleteRate | number | 2.4 | Erase rate as a multiple of the typing rate — deleting is never as deliberate as writing. At 0 the line is not erased at all: it is cut, and the next one starts clean. |
| hold | number | 1500 | Dwell on a finished line before it is taken away. This is the only window the reader has to actually read it. |
| gap | number | 420 | Empty beat between one line clearing and the next starting. |
| jitter | number | 0.45 | Spread on the per-line rate. At 0 the machine is a metronome, which reads as a progress bar rendered in letters rather than as typing. |
| punctuationPause | number | 220 | Extra beat after a comma, period, dash or colon. The pause a reader hears at a mark is the silence that follows it, so it lands after the glyph, never before. |
| caret | "block" | "bar" | "underscore" | "none" | "block" | Shape of the cursor trailing the text. |
| caretBlink | number | 1.05 | Seconds per blink cycle. The caret holds steady while characters are arriving and only blinks once the line is at rest — a terminal does the same, and the contrast is what makes the typing read as live. |
| loop | boolean | true | Wrap to the first line when the list runs out. |
| reserveSpace | boolean | true | Hold the box at the size of the longest line. Turn it off to watch everything below the type walk up and down the page — which is the reason it is on. |
| accentColor | string (hex) | "#a855f7" | The caret. |
What It Demonstrates
- Typewriter
- Text appearing one character at a time, as if being typed.
- Stepped animation
- An animation that is divided into discrete steps, like a countdown timer.
- Loop
- An animation that repeats, a set number of times or infinitely.
- Idle animation
- Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
Related Components
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.
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
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.
Metallic Text
Chrome poured into a headline — a metal ramp clipped to real glyphs, a specular travelling across them, and a tinted wake following a beat behind.
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.