# Textlab

> Textlab is a React library of text effects: reveals, numbers, typing, light, filters, scroll, drawing, cursor, physics, paths, pixels and kinetic type. Every component installs with the shadcn CLI, copies its source into your project, ships a reduced-motion branch and screen-reader text, and has a Markdown page for agents.

Install: `npx shadcn@latest add https://textlab.dev/r/<name>.json`, then import `@/components/textlab/tokens.css` once.

- blur-reveal: Words sharpen into focus.
- word-reveal: Words rise out of a clip.
- line-reveal: Lines lift in, re-measured on resize.
- char-reveal: Letters arrive one at a time.
- wipe-reveal: A soft edge uncovers the line.
- in-view-title: Bring a section title in as it scrolls into view.
- split-text: Stagger anything by chars, words or lines.
- tracking-reveal: Letter spacing breathes open as it appears.
- slice-reveal: The title arrives in offset horizontal slices.
- focus-pull: Focus racks from the center letter outward.
- rolling-number: Each digit rolls to its new value.
- odometer: A mechanical wheel that spins past every digit.
- split-flap: An airport board that flips to the next word.
- price-ticker: Prices tick with a flash of up or down.
- countdown: Count down to a moment, second by second.
- stat-reveal: A stat counts up when it scrolls in.
- typewriter: Types, deletes and retypes with a caret.
- scramble-text: Letters decode into place.
- hover-scramble: Scrambles on hover, settles on leave.
- matrix-decode: Glyph rain resolves into the word.
- text-morph: One word turns into the next, letter by letter.
- word-rotator: Cycles words while the width follows.
- caret-morph: A caret that glides between words and reshapes to fit.
- gradient-text: Color flows slowly through the letters.
- shimmer-text: A calm light passes across the words.
- neon-text: A neon sign that hums and flickers on.
- aurora-text: Northern lights drift inside the letters.
- holo-text: Foil that shifts color as you move across it.
- spotlight-text: A light follows the cursor and reveals the copy.
- glass-text: Glass letters that bend the scene behind them.
- ember-text: Letters land hot and cool down to the text color.
- gooey-text: Words melt into each other.
- liquid-text: Ripples run through the letters under the cursor.
- ink-bleed: Text soaks in like ink on paper.
- chromatic-text: The color channels split and rejoin.
- glitch-text: A controlled digital glitch on cue.
- heat-haze: A mirage warps the air around the type.
- scroll-fill: Words light up as you read down the page.
- scroll-skew: Type leans with the speed of your scroll.
- velocity-marquee: A marquee that speeds up, slows and reverses with scroll.
- scroll-stretch: Letters stretch tall as you scroll fast.
- depth-layers: Outline copies drift apart in depth as you scroll.
- outline-draw: The outline draws itself, then fills.
- signature: A handwritten signature writes itself.
- marker-highlight: A highlighter swipes behind the words.
- underline-draw: A hand-drawn underline sketches in.
- strike-through: Cross out a word and write the new one.
- circle-annotate: A pen circles the word that matters.
- magnetic-text: Letters lean toward the cursor and spring back.
- variable-proximity: Weight and width swell near the cursor.
- cursor-trail: A word trails behind the cursor letter by letter.
- flip-roll: Hover and the label rolls up into a fresh copy.
- tilt-text: Extruded type tilts toward the pointer.
- extrude-text: Depth grows from the letters on hover.
- letter-drop: Letters fall, bounce and settle on the floor.
- elastic-text: Drag a letter and the word stretches like rubber.
- jelly-text: Letters wobble like jelly when touched.
- wave-text: A sine wave runs through the line.
- breathing-text: Weight breathes in and out over time.
- path-text: Text travels along a wave, circle or spiral.
- ascii-text: The title rendered in ASCII glyphs that ripple.
- dither-text: Ordered dither and halftone dots form the type.
- pixel-sort: Rows sort into place like a glitch artwork.
- particle-text: Particles gather into letters and scatter on touch.
- shader-ripple: A WebGL ripple bends the title under the pointer.
- noise-dissolve: The title forms from noise and dissolves back into it.
- kinetic-beat: Words hit on a beat.
- word-sequence: A sentence choreographed word by word.
- read-along: A highlight follows the reading, word by word.
- echo-text: Every change leaves fading echoes behind.