FREE / MOTION
Blur Text
Blur Text is a reusable text animations reference prepared for the MADLAB library. Explore the live behavior, understand the implementation, and take the source into your own project.
- Difficulty
- Intermediate
- Build time
- 30–90 minutes
- Category
- TEXT ANIMATIONS
- Status
- MADLAB preview + local source
MADLAB / WORKSPACE
Build it, then tune it.
MADLAB / MOTION
Move inside the preview to test the interaction. Open Code when you are ready to adapt the local source.
02 / API surface
Props & source.
The useful details stay visible beside the experiment: what it is, where it lives, and which values are safe to change.
- Component
- BlurText
- Source path
- src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
- Stack
- React / TypeScript / Tailwind CSS
- Controls
- Text, timing, and animation behavior are mapped to MADLAB controls.
- Accessibility
- Keep the surrounding label and non-motion fallback when integrating.
03 / Integration notes
Make the reference yours.
Use the preview to understand the visual rule, then keep only the behavior that earns its place in your interface. The local source remains available for every catalog item.
04 / Full tutorial
Build Blur Text from zero.
A complete, step-by-step breakdown of Blur Text: from the static contract to blur and opacity as a readable text entrance, responsive behavior, accessibility, and production tuning.
MADLAB / archive