TextReveal
Fade-up, blur, slide, or scale reveal — per char, per word, or as a single block.
Example — every component installs the same way
npx shadcn add https://tricklekit.dev/r/typewriter.json→ writes components/trickle/typewriter.tsx + merges globals.css
Why
Every keyframe runs natively in the browser. No motion library, no animation engine, no extra bundle weight. 42 of 47 components are pure server components — they ship zero client JS.
How
The server renders the final HTML with animation classes applied. The browser starts the animation immediately on first paint — no flash, no hydration mismatch, no JS required.
Distribution
Shadcn-style. Run one CLI command and the component file lives in your repo. No version lock-in, no upgrade churn, customize freely.
tweak appears on configurable · code & replay on every strip
Fade-up, blur, slide, or scale reveal — per char, per word, or as a single block.
Character-by-character typing with caret. Multi-string cycling.
Words slide in from below, staggered. Reads like a careful sentence.
Per-char fade or slide reveal with tighter rhythm.
Random characters scramble into the target text. Configurable charset.
Letters fly in misspelled, then correct themselves character-by-character.
Reveals via clip-path circle from origin + blur unmask.
Sequential word highlight reveal driven by a CSS background-size keyframe.
Underline draws left-to-right under the text. Configurable thickness + color.
Bright spot moves across text via radial-gradient bg-clip-text.
Drops huge from above with motion blur, slams flat with hard impact, recoils, then settles.
One-shot burst of small colored squares from each character on mount.
Animated multi-stop aurora gradient — green/sky/violet/amber.
Light glare panning across text. Always-on or hover-only.
Animated gradient bg-clip-text via @property — angle rotates smoothly.
Hue rotates through the spectrum, staggered per character.
Cold-start sputter — sign tries to ignite, sputters out, sputters back, then settles to a steady hum with rare flickers.
Flowing colored plasma blobs inside text via bg-clip + multi radial-gradient.
Each letter drops in then bounces in place 2-3 times like a ball settling.
Letters bob gently up and down with phase-offset stagger.
Letters scattered, then snap into place with a slight overshoot.
Letters slam in from huge to normal with a slight bounce.
Each letter spins in two full turns on the z-axis, scaling up from zero.
Letters undulate vertically in a sine-wave pattern. Pure CSS infinite loop.
Letters stretch wide-and-short, then settle to natural size.
Each letter drops in tall, gets slammed flat by a hydraulic press, then springs back to natural size.
Letters rotate around the Y-axis. Pure CSS perspective + rotateY.
Subtle random tremor per character, infinite loop. Like nervous text.
Text breathes with a soft scale pulse while two ring waves radiate outward like a sonar ping.
Horizontal slices of the text shift sideways in brief stutter bursts. Broken-signal feel.
Each letter assembles from four triangular shards converging from random offsets.
Text rips into top and bottom halves with jagged edges, then heals back together.
Cycles through words with letter-staggered morph between each.
Text dissolves into a fine dot pattern, then dots merge until the letters resolve solid.
Each letter resolves through a chunky pixel grid that snaps in 6 discrete steps. True 8-bit feel.
CRT-style horizontal scanlines passing over text. Constant grain overlay.
Halftone dots pulse with increasing amplitude (like a heartbeat building) before merging into solid text.
Each letter drops in as a thick outline that scans across, refines to a thin line, then fills.
Text starts as visible mosaic tiles, then dissolves into clarity as the tiles grow and merge.
Vertical wheel cycling through a list of words. Crossfade with subtle slide.
Letters live around an invisible 3D ring that spins three full revolutions like a globe, then unwrap and snap into the spelled word.
Five staggered ghost copies pulse outward from the word, fading and blurring as they go.
Text phases out and back — fades, blurs, and slips sideways like passing through a barrier.
Vertical-bar mask reveal — like venetian blinds opening.
Horizontally scrolling ribbon with edge-fade gradient masks.
TV-style static noise overlays text, then fades to clear. Atomic texture reveal.
Mirror reflection beneath text with linear-gradient mask fade.