design-infraReport a problem or share feedback← Catalog
Text Effect
curatedtheme-awarefreemotion-primitives/text-effect
A component that applies animated effects to text content.
$
npx shadcn@latest add @motion-primitives/text-effectnpm deps: motion
Our notes
Most flexible text entrance primitive (per char/word/line, presets + custom variants, trigger prop). Unstyled — inherits theme. Install via @motion-primitives or `npx motion-primitives add`.- Source
- Motion Primitives
- Kind
- effect
- Categories
- text-effect
- Use as
- wrapper — wraps your existing element
- Applies to
- text-effecthero
- Motion
- on enter · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (ibelick/motion-primitives). Motion Primitives Pro is a separate paid product — not catalogued.
- Live demo
- motion-primitives.com
- Docs
- motion-primitives.com
Similar
Compare all 4 →- Text Generate Effectaceternity/text-generate-effectWord-by-word fade-in for one hero line or an AI answer. Don't use on long paragraphs.
- Text Animatemagicui/text-animatePer-word/char/line text entrance with ~10 presets (blurIn, slideUp, scaleUp…). Inherits colour — good default for hero headlines over Aceternity's text effects.
- Blur Textreact-bits/blur-textWords blur-in one by one (motion). Inherits colour; lighter than SplitText (no GSAP).