Introduction
Textlab is a library of text effects for React. Every component does one thing to type, installs as source you own, and has docs your AI tools can read.
What you get
- 70 components across 12 groups: reveals, numbers, typing, light, filters, scroll, drawing, cursor, physics, paths, pixels and kinetic type.
- Live examples. Every page runs the real component. Nothing is a recording.
- Source in your project. The shadcn CLI copies each component into
components/textlab. Change anything. - Built-in accessibility. Split text keeps one copy for screen readers, every effect has a reduced-motion branch, and nothing shifts layout.
- Agent-ready. A Markdown page per component, llms.txt, a registry and an MCP server.
How it is built
Components are React and TypeScript with motion for animation, plain CSS for anything that can run without JavaScript, and canvas or WebGL only where the effect needs pixels. Shared utilities ship as one registry item, text-fx, and the tokens as another, text-fx-tokens.
Every component speaks the same props:
text,asandvariantsay what to render and how it looks.triggerchooses when it starts: on mount, in view, on hover, or when you setactive.delay,stagger,durationandeasetune timing with the same units everywhere.reducedMotionfollows the OS setting by default, or can be forced on or off.
Choosing a component
Components are named by their job. A few starting points:
- A section title that animates as it scrolls in: In-view title.
- A number that changes in front of people: Rolling number.
- A label that changes state: Text morph.
- A paragraph people should actually read: Scroll fill.
Ready to add one? Start with installation.