70 text effects, from blur reveals to gooey morphs. Each one lands in your repo as source, respects reduced motion, and ships with docs your AI agent can read.
$ npx shadcn@latest add @textlab/blur-revealFree and MIT licensedNo runtime package192 variants to choose from
Playground
// npx shadcn@latest add @textlab/blur-reveal
import { BlurReveal } from "@/components/textlab/blur-reveal/blur-reveal";
<BlurReveal text="Type that moves" />Built on the stack you already use
- React 19
- Next.js
- Tailwind CSS 4
- Motion
- shadcn/ui
- TypeScript
Live components
Every example is live.
Hover, poke or just wait. Nothing on this page is a recording.
Gooey text
Words melt into each other like liquid.
Rolling number
Each digit rolls to its new value.
Scramble text
Letters decode into place on view.
Variable proximity
Weight swells under your pointer.
- Say it once
Marker highlight
A highlighter swipes behind the words.
- After dark
Aurora text
Northern lights drift inside the letters.
Typewriter
Types, pauses and deletes like a person.
Jelly text
Letters wobble when you poke them.
Why Textlab
The details are already done.
Text effects are easy to start and slow to finish. These ship finished.
Source in your repo
The shadcn CLI copies each effect into your components folder. No package to update, nothing hidden behind an API.
Accessible by default
Screen readers hear the sentence once. Reduced motion gets still, readable text. Every effect passes an axe check.
Motion with intent
Shared easing tokens, springs that settle without wobble, and durations tuned by hand so effects feel quick but soft.
Ready for your agent
Markdown docs, llms.txt and an MCP server let Claude, Cursor or Codex find the right effect and install it.
How it works
From browsing to shipped in a minute.
- 01
Pick an effect
Browse live previews, switch variants and replay them until one fits the moment.
/components/blur-reveal - 02
Install it
Run one command. The component and its helpers land in your project as plain TypeScript.
npx shadcn@latest add @textlab/blur-reveal - 03
Make it yours
Pass text and a variant, tune duration and easing, or open the file and change anything.
<BlurReveal text="Hello" variant="words" />
The library
12 kinds of motion, all of it type.
Grouped by what the effect does, so you can find one by the job instead of the name.
- Reveal10Bring text in
- Numbers6Values that move
- Typing7Text that writes itself
- Light8Color, glow and sheen
- Distort6Filters that bend type
- Scroll5Driven by the page
- Draw6Pen strokes and marks
- Cursor6React to the pointer
- Physics5Springs and gravity
- Path1Type on a curve
- Pixel6Canvas and shaders
- Kinetic4Choreographed words
For AI agents
Your agent can install it, too.
Every component has a Markdown page and a registry item. The MCP server lets Claude, Cursor or Codex search by intent, read the props and add the right effect.
npx shadcn@latest add @textlab/blur-revealclaude mcp add --transport http textlab https://textlab.dev/api/mcpText effects, each with live variants
Groups, named by what they do
Tests, including an axe check for every component
FAQ
Good questions.
Anything else is in the docs, or open an issue on GitHub.
Is Textlab free for commercial projects?
Yes. Everything is MIT licensed, so you can use it in client work and products you sell. Keep the license notice in copies of the source.
How do I add an effect?
Open its page and run the shadcn command, for example npx shadcn@latest add @textlab/blur-reveal. The file lands in your components folder with its shared helpers, so there is no package to keep updated.
What does my project need?
React 19, Tailwind CSS 4 and Motion 12. A few effects use canvas or SVG filters and need nothing else. Each page lists exactly what it installs.
Will it work with my AI coding tool?
Yes. Every effect has a Markdown page, there is an llms.txt index, and the MCP server lets Claude, Cursor or Codex search by intent and install the right component.
What about people who prefer less motion?
Every effect checks the reduced motion setting and falls back to still, readable text. Screen readers hear the sentence once, never letter by letter.
Can I change how an effect looks or moves?
The source lives in your project, so you can edit anything. Most effects also take duration, easing and variant props, and they read your theme tokens for color.
Will it slow my page down?
Effects only animate transform, opacity and filter, pause when they scroll out of view, and load nothing until they are used. Text stays real HTML, so it still counts for search and LCP.
Start typing.
Pick an effect, run one command, and your next headline moves the way you meant it to.
Free and MIT licensed. A star helps other people find it.