---
name: textlab
description: Use when adding animated or expressive text to a React app (reveals, counters, typewriters, scramble, gradients, scroll-linked text, cursor effects). Finds the right Textlab component, installs it with the shadcn CLI and keeps accessibility and reduced motion intact.
---

# Textlab

Textlab is a library of 70 text effects for React, installed as source with the shadcn CLI.

## Workflow

1. Name the job, then pick the component whose one-line description matches it. Index: https://textlab.dev/llms.txt
2. Read its Markdown page (https://textlab.dev/components/<name>.md) for props, variants and when not to use it.
3. Install: `npx shadcn@latest add https://textlab.dev/r/<name>.json`. Import `@/components/textlab/tokens.css` once in the root layout.
4. Use only documented props. Pick a variant instead of restyling from scratch.
5. Check the page in light and dark themes and with reduced motion on.

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

## Quick picks

- Section title that animates on scroll: in-view-title
- Hero line on load: blur-reveal or word-reveal
- A number that changes: rolling-number; a price: price-ticker
- Loading or thinking label: shimmer-text
- Label that changes state: text-morph
- Long paragraph tied to scroll: scroll-fill