HighlighterSweep
Sequential word highlight reveal driven by a CSS background-size keyframe.
runtime : 0 deps · pure CSS keyframes bundle : <1kb median (gzip) · per component react : 18.3+ · next 15+ · tailwind v4 ssr : safe by construction · 42 of 47 zero-JS
Example — every component installs the same way · browse all 47 ↓
npx shadcn add https://tricklekit.dev/r/typewriter.json47
Components
42
Pure server (zero JS)
<1kb
Median gzip / component
0
Animation deps
tweak · code · replay — every strip is interactive.
Sequential word highlight reveal driven by a CSS background-size keyframe.
Letters fly in misspelled, then correct themselves character-by-character.
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.
Animated gradient bg-clip-text via @property — angle rotates smoothly.
Light glare panning across text. Always-on or hover-only.
Vertical wheel cycling through a list of words. Crossfade with subtle slide.
Animated multi-stop aurora gradient — green/sky/violet/amber.
Underline draws left-to-right under the text. Configurable thickness + color.
Random characters scramble into the target text. Configurable charset.
Reveals via clip-path circle from origin + blur unmask.
Each letter assembles from four triangular shards converging from random offsets.
Five staggered ghost copies pulse outward from the word, fading and blurring as they go.
One-shot burst of small colored squares from each character on mount.
Cycles through words with letter-staggered morph between each.
Cold-start sputter — sign tries to ignite, sputters out, sputters back, then settles to a steady hum with rare flickers.
Horizontal slices of the text shift sideways in brief stutter bursts. Broken-signal feel.
Letters slam in from huge to normal with a slight bounce.
Drops huge from above with motion blur, slams flat with hard impact, recoils, then settles.
Horizontally scrolling ribbon with edge-fade gradient masks.
Letters undulate vertically in a sine-wave pattern. Pure CSS infinite loop.
Letters stretch wide-and-short, then settle to natural size.
Letters rotate around the Y-axis. Pure CSS perspective + rotateY.
Bright spot moves across text via radial-gradient bg-clip-text.
Letters scattered, then snap into place with a slight overshoot.
Letters bob gently up and down with phase-offset stagger.
Text breathes with a soft scale pulse while two ring waves radiate outward like a sonar ping.
Hue rotates through the spectrum, staggered per character.
Subtle random tremor per character, infinite loop. Like nervous text.
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.
Text dissolves into a fine dot pattern, then dots merge until the letters resolve solid.
Each letter drops in as a thick outline that scans across, refines to a thin line, then fills.
Halftone dots pulse with increasing amplitude (like a heartbeat building) before merging into solid text.
Each letter drops in then bounces in place 2-3 times like a ball settling.
Each letter spins in two full turns on the z-axis, scaling up from zero.
Vertical-bar mask reveal — like venetian blinds opening.
Flowing colored plasma blobs inside text via bg-clip + multi radial-gradient.
Each letter drops in tall, gets slammed flat by a hydraulic press, then springs back to natural size.
Letters live around an invisible 3D ring that spins three full revolutions like a globe, then unwrap and snap into the spelled word.
TV-style static noise overlays text, then fades to clear. Atomic texture reveal.
Text rips into top and bottom halves with jagged edges, then heals back together.
Mirror reflection beneath text with linear-gradient mask fade.
Text phases out and back — fades, blurs, and slips sideways like passing through a barrier.
Text starts as visible mosaic tiles, then dissolves into clarity as the tiles grow and merge.
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.