# 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.

Textlab has 70 components. Free and open source (MIT).

## Install

Each component is a shadcn registry item. It pulls in the shared utilities (`text-fx`) and tokens (`text-fx-tokens`).

```bash
npx shadcn@latest add https://textlab.dev/r/blur-reveal.json
```

Or register the namespace once in `components.json` and install by name:

```json
{ "registries": { "@textlab": "https://textlab.dev/r/{name}.json" } }
```

```bash
npx shadcn@latest add @textlab/blur-reveal @textlab/scramble-text
```

Import the tokens once in the root layout: `import "@/components/textlab/tokens.css";`. Files install into `components/textlab/` and import each other with relative paths. Dark mode: `.dark` or `data-theme="dark"` on `<html>`.

## Rules for agents

- Prefer an existing Textlab component over writing a new text effect.
- Read the component's Markdown before using it; use only documented props.
- Shared props mean the same thing everywhere: `text`, `as`, `variant`, `trigger` (mount, inView, hover, manual), `active`, `once`, `delay`, `stagger`, `duration`, `ease`, `reducedMotion`, `className`.
- Keep the screen-reader text and the reduced-motion branch when you edit the source.
- Use the tokens (`--tl-foreground`, `--tl-accent`, `--tl-fx-*`) instead of raw colors and check both themes.
- Sentence case copy, no em dashes, no eyebrow labels.

## AI

- [MCP server](https://textlab.dev/api/mcp): streamable HTTP, read only. Tools: list_components, search_components, get_component, get_install_command, get_tokens.
- [Agent skill](https://textlab.dev/r/skills/textlab/SKILL.md)
- [Registry index](https://textlab.dev/r/registry.json)
- [Catalog](https://textlab.dev/r/catalog.json): metadata for every component.
- [Full context](https://textlab.dev/llms-full.txt): this file with every component's Markdown inlined.
- [Small context](https://textlab.dev/llms-small.txt): one line per component.

## Components

### Reveal

- [Blur reveal](https://textlab.dev/components/blur-reveal.md): Words sharpen into focus.
- [Word reveal](https://textlab.dev/components/word-reveal.md): Words rise out of a clip.
- [Line reveal](https://textlab.dev/components/line-reveal.md): Lines lift in, re-measured on resize.
- [Character reveal](https://textlab.dev/components/char-reveal.md): Letters arrive one at a time.
- [Wipe reveal](https://textlab.dev/components/wipe-reveal.md): A soft edge uncovers the line.
- [In-view title](https://textlab.dev/components/in-view-title.md): Bring a section title in as it scrolls into view.
- [Split text](https://textlab.dev/components/split-text.md): Stagger anything by chars, words or lines.
- [Tracking reveal](https://textlab.dev/components/tracking-reveal.md): Letter spacing breathes open as it appears.
- [Slice reveal](https://textlab.dev/components/slice-reveal.md): The title arrives in offset horizontal slices.
- [Focus pull](https://textlab.dev/components/focus-pull.md): Focus racks from the center letter outward.

### Numbers

- [Rolling number](https://textlab.dev/components/rolling-number.md): Each digit rolls to its new value.
- [Odometer](https://textlab.dev/components/odometer.md): A mechanical wheel that spins past every digit.
- [Split-flap board](https://textlab.dev/components/split-flap.md): An airport board that flips to the next word.
- [Price ticker](https://textlab.dev/components/price-ticker.md): Prices tick with a flash of up or down.
- [Countdown](https://textlab.dev/components/countdown.md): Count down to a moment, second by second.
- [Stat reveal](https://textlab.dev/components/stat-reveal.md): A stat counts up when it scrolls in.

### Typing

- [Typewriter](https://textlab.dev/components/typewriter.md): Types, deletes and retypes with a caret.
- [Scramble text](https://textlab.dev/components/scramble-text.md): Letters decode into place.
- [Hover scramble](https://textlab.dev/components/hover-scramble.md): Scrambles on hover, settles on leave.
- [Matrix decode](https://textlab.dev/components/matrix-decode.md): Glyph rain resolves into the word.
- [Text morph](https://textlab.dev/components/text-morph.md): One word turns into the next, letter by letter.
- [Word rotator](https://textlab.dev/components/word-rotator.md): Cycles words while the width follows.
- [Caret morph](https://textlab.dev/components/caret-morph.md): A caret that glides between words and reshapes to fit.

### Light

- [Gradient text](https://textlab.dev/components/gradient-text.md): Color flows slowly through the letters.
- [Shimmer text](https://textlab.dev/components/shimmer-text.md): A calm light passes across the words.
- [Neon sign](https://textlab.dev/components/neon-text.md): A neon sign that hums and flickers on.
- [Aurora text](https://textlab.dev/components/aurora-text.md): Northern lights drift inside the letters.
- [Holographic text](https://textlab.dev/components/holo-text.md): Foil that shifts color as you move across it.
- [Spotlight text](https://textlab.dev/components/spotlight-text.md): A light follows the cursor and reveals the copy.
- [Glass text](https://textlab.dev/components/glass-text.md): Glass letters that bend the scene behind them.
- [Ember text](https://textlab.dev/components/ember-text.md): Letters land hot and cool down to the text color.

### Distort

- [Gooey text](https://textlab.dev/components/gooey-text.md): Words melt into each other.
- [Liquid text](https://textlab.dev/components/liquid-text.md): Ripples run through the letters under the cursor.
- [Ink bleed](https://textlab.dev/components/ink-bleed.md): Text soaks in like ink on paper.
- [Chromatic text](https://textlab.dev/components/chromatic-text.md): The color channels split and rejoin.
- [Glitch text](https://textlab.dev/components/glitch-text.md): A controlled digital glitch on cue.
- [Heat haze](https://textlab.dev/components/heat-haze.md): A mirage warps the air around the type.

### Scroll

- [Scroll fill](https://textlab.dev/components/scroll-fill.md): Words light up as you read down the page.
- [Scroll skew](https://textlab.dev/components/scroll-skew.md): Type leans with the speed of your scroll.
- [Velocity marquee](https://textlab.dev/components/velocity-marquee.md): A marquee that speeds up, slows and reverses with scroll.
- [Scroll stretch](https://textlab.dev/components/scroll-stretch.md): Letters stretch tall as you scroll fast.
- [Depth layers](https://textlab.dev/components/depth-layers.md): Outline copies drift apart in depth as you scroll.

### Draw

- [Outline draw](https://textlab.dev/components/outline-draw.md): The outline draws itself, then fills.
- [Signature](https://textlab.dev/components/signature.md): A handwritten signature writes itself.
- [Marker highlight](https://textlab.dev/components/marker-highlight.md): A highlighter swipes behind the words.
- [Underline draw](https://textlab.dev/components/underline-draw.md): A hand-drawn underline sketches in.
- [Strike-through](https://textlab.dev/components/strike-through.md): Cross out a word and write the new one.
- [Circle annotate](https://textlab.dev/components/circle-annotate.md): A pen circles the word that matters.

### Cursor

- [Magnetic text](https://textlab.dev/components/magnetic-text.md): Letters lean toward the cursor and spring back.
- [Variable proximity](https://textlab.dev/components/variable-proximity.md): Weight and width swell near the cursor.
- [Cursor trail](https://textlab.dev/components/cursor-trail.md): A word trails behind the cursor letter by letter.
- [Flip roll](https://textlab.dev/components/flip-roll.md): Hover and the label rolls up into a fresh copy.
- [Tilt text](https://textlab.dev/components/tilt-text.md): Extruded type tilts toward the pointer.
- [Extrude text](https://textlab.dev/components/extrude-text.md): Depth grows from the letters on hover.

### Physics

- [Letter drop](https://textlab.dev/components/letter-drop.md): Letters fall, bounce and settle on the floor.
- [Elastic text](https://textlab.dev/components/elastic-text.md): Drag a letter and the word stretches like rubber.
- [Jelly text](https://textlab.dev/components/jelly-text.md): Letters wobble like jelly when touched.
- [Wave text](https://textlab.dev/components/wave-text.md): A sine wave runs through the line.
- [Breathing text](https://textlab.dev/components/breathing-text.md): Weight breathes in and out over time.

### Path

- [Path text](https://textlab.dev/components/path-text.md): Text travels along a wave, circle or spiral.

### Pixel

- [ASCII text](https://textlab.dev/components/ascii-text.md): The title rendered in ASCII glyphs that ripple.
- [Dither text](https://textlab.dev/components/dither-text.md): Ordered dither and halftone dots form the type.
- [Pixel sort](https://textlab.dev/components/pixel-sort.md): Rows sort into place like a glitch artwork.
- [Particle text](https://textlab.dev/components/particle-text.md): Particles gather into letters and scatter on touch.
- [Shader ripple](https://textlab.dev/components/shader-ripple.md): A WebGL ripple bends the title under the pointer.
- [Noise dissolve](https://textlab.dev/components/noise-dissolve.md): The title forms from noise and dissolves back into it.

### Kinetic

- [Kinetic beat](https://textlab.dev/components/kinetic-beat.md): Words hit on a beat.
- [Word sequence](https://textlab.dev/components/word-sequence.md): A sentence choreographed word by word.
- [Read along](https://textlab.dev/components/read-along.md): A highlight follows the reading, word by word.
- [Echo text](https://textlab.dev/components/echo-text.md): Every change leaves fading echoes behind.

## Docs

- [Introduction](https://textlab.dev/docs/introduction)
- [Installation](https://textlab.dev/docs/installation)
- [Tokens](https://textlab.dev/docs/tokens)
- [AI and MCP](https://textlab.dev/docs/ai)
- [Changelog](https://textlab.dev/docs/changelog)
- [Guides](https://textlab.dev/guides)
- [Compare](https://textlab.dev/compare)
- [Roadmap](https://textlab.dev/roadmap)