From c9fd28fa7f19c1fe8db49eeb3805d6cbdf6162b1 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 6 Sep 2026 07:08:32 +0000 Subject: [PATCH 1/5] draft(docs): add animated React text effects guide - Create comprehensive guide for animated React text effects - Cover 10 key text animation patterns (typewriter, reveal, flip, etc.) - Include Motion vs CSS decision framework - Document accessibility and reduced-motion patterns - Link to sibling button guide and text category - Keep published: false (draft) Co-authored-by: Hari Lamichhane --- .../guides/animated-react-text-effects.mdx | 241 ++++++++++++++++++ 1 file changed, 241 insertions(+) create mode 100644 content/docs/guides/animated-react-text-effects.mdx diff --git a/content/docs/guides/animated-react-text-effects.mdx b/content/docs/guides/animated-react-text-effects.mdx new file mode 100644 index 00000000..a777eb57 --- /dev/null +++ b/content/docs/guides/animated-react-text-effects.mdx @@ -0,0 +1,241 @@ +--- +title: Top Animated React Text Effects (2026) +description: Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded. +seoTitle: Top Animated React Text Effects (2026) — Copy-Paste Tailwind Components +seoDescription: Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded. +date: 2026-09-05 +toc: true +published: false +--- + +If you are hunting for animated React text effects in 2026, you usually do not want another motion playground. You want a typewriter hero that loops cleanly, a letter reveal that still reads for screen readers, a flip headline that does not drag Motion into the bundle for a CSS job, or a scroll-linked line that *does* need Motion—and you want to own the file after paste. + +**Answer-ready:** the fastest path to animated text in React + Tailwind without building Motion (or GSAP) SplitText from scratch is a copy-own kit: pick a preset, add it via a shadcn-compatible registry URL (or paste into `components/animata/text/`), keep CSS keyframes / `@theme` / co-located CSS when the docs say so, and only install Motion for the few effects that require it. [Animata](https://animata.design/docs/text) ships that lane—MIT, product-ready text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many text presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll/continuous layout motion needs it. + +This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide: engineer-to-engineer, fair to the rest of the ecosystem, and honest about Motion vs CSS. + +**TL;DR chips:** Typewriter · Reveal · Flip · Gradient · Hover split · Scroll (Motion) + +## How to choose + +Match the job to the stack before you paste. Fancy demos fail when you pick a hover-only split for a mobile hero, or pull Motion for a gradient clip that CSS already handles. + +| Job | Pick | Avoid when | +| --- | --- | --- | +| Typewriter / terminal / AI "thinking" copy | [Typing Text](https://animata.design/docs/text/typing-text) | You need scroll-scrubbed typography—use Scroll Reveal or Motion/GSAP instead | +| Letter/word entrance with optional blur | [Wave Reveal](https://animata.design/docs/text/wave-reveal) | You refuse to add the docs' `@keyframes` / `@theme` snippet | +| Cycling headline words | [Text Flip](https://animata.design/docs/text/text-flip) | You need physics-grade letter trails—reach for Motion/GSAP custom SplitText | +| Brand gradient accent on a label | [Animated Gradient Text](https://animata.design/docs/text/animated-gradient-text) | The effect must track scroll progress (gradient ≠ scroll reveal) | +| Hover split / letter drama | [Split Text](https://animata.design/docs/text/split-text) | Touch-first surfaces with no hover—plan a static fallback | +| Scroll-linked opacity on copy | [Scroll Reveal](https://animata.design/docs/text/scroll-reveal) | You want zero Motion dependency | +| Rotating circular path lockups | [Circular Text](https://animata.design/docs/text/circular-text) | Continuous loops without a reduced-motion plan | +| RGB glitch / cyberpunk display type | [Glitch Text](https://animata.design/docs/text/glitch-text) | Body-scale copy (the effect is for display type) | +| Decode / "AI reveal" from noise | [Gibberish Text](https://animata.design/docs/text/gibberish-text) | You need scroll-driven choreography | +| Continuous marketing shimmer / WAAPI preset | [Shimmer Sweep](https://animata.design/docs/text/shimmer-sweep) | You cannot accept the shared `text-animator` runtime (or looping motion without a fallback) | + +## Editor's picks + +Ten paste-ready Animata text effects. Each one is MIT, documented, and installable with the registry `add` URL shown under each pick. Browse the full category when you are done: [animata.design/docs/text](https://animata.design/docs/text). + +### 1. Typing Text + +Classic typewriter for heroes, empty states, and AI product chrome. It drives the caret with React state and effects—cursor blink, smooth word mode, repeat/wait—so you get a readable loop without a Motion dependency. Own the file and tune timing to your brand voice. + +- **Best for:** Hero typewriters, CLI-style marketing, onboarding prompts, "generating…" affordances +- **Stack:** React (`useState` / `useEffect`), Tailwind — no Motion required +- **Docs:** [Typing Text](https://animata.design/docs/text/typing-text) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json` + +### 2. Wave Reveal + +Letter- or word-by-word entrance with an optional WWDC-style blur. Animation is CSS (`reveal-up` / `reveal-down` / `content-blur`); the component also ships an `sr-only` copy of the full string so assistive tech gets the message once while glyphs animate visually. + +- **Best for:** Section titles, feature intros, premiere-style headlines +- **Stack:** CSS keyframes + Tailwind — paste the `@keyframes` / `@theme` block from the docs +- **Docs:** [Wave Reveal](https://animata.design/docs/text/wave-reveal) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/wave-reveal.json` + +### 3. Text Flip + +Cycling headline words via CSS `flip-words` keyframes—swap "Ship / Scale / Iterate" without orchestrating Motion timelines. React owns the word list; CSS owns the flip. + +- **Best for:** Rotating value props, short marketing phrases, hero subheads +- **Stack:** CSS keyframes + React — no Motion +- **Docs:** [Text Flip](https://animata.design/docs/text/text-flip) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/text-flip.json` + +### 4. Animated Gradient Text + +Tailwind gradient clip plus CSS keyframes for a brand accent that moves. Lean stack: no animation engine, just utilities and a small keyframe loop you can theme. + +- **Best for:** Product names, badge labels, pricing highlights, light marketing accents +- **Stack:** CSS / Tailwind — no Motion engine +- **Docs:** [Animated Gradient Text](https://animata.design/docs/text/animated-gradient-text) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/animated-gradient-text.json` + +### 5. Split Text + +Hover split drama: letters open vertically around the pointer with neighborhood falloff. Decorative letter layers are `aria-hidden`; an invisible sizing layer keeps layout stable. This is pointer-dependent—pair with a static (non-hover) presentation on touch-first layouts. + +- **Best for:** Desktop marketing lockups, portfolio wordmarks, playful brand moments +- **Stack:** React + Tailwind transitions — hover / pointer interaction; plan a static fallback +- **Docs:** [Split Text](https://animata.design/docs/text/split-text) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/split-text.json` + +### 6. Scroll Reveal + +Scroll-linked opacity on flattened children—sticky copy that brightens as the user scrolls the container. This one **requires Motion** (`motion/react`) and is honest about it: scroll progress values are Motion's job. + +- **Best for:** Long-form storytelling sections, manifesto blocks, product narratives +- **Stack:** Motion required (`motion/react`) +- **Docs:** [Scroll Reveal](https://animata.design/docs/text/scroll-reveal) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/scroll-reveal.json` + +### 7. Circular Text + +Rotating circular-path lockups for badges, seals, and "scroll for more" chrome. Continuous loops look great in demos—respect `prefers-reduced-motion` so the ring does not spin forever for every user. **Requires Motion** (`npm install motion` + `motion/react`). + +- **Best for:** Circular badges, stamp-style branding, hero ornaments +- **Stack:** Motion required +- **Docs:** [Circular Text](https://animata.design/docs/text/circular-text) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/circular-text.json` + +### 8. Glitch Text + +RGB-split glitch: magenta/cyan ghosts jitter while the base label stays sharp and readable. Ghosts are `aria-hidden`; co-located CSS includes `@media (prefers-reduced-motion: reduce)` so ghosts stop and fade. The CLI installs the TSX component and co-located CSS together. + +- **Best for:** 404s, cyberpunk marketing, error / status display type +- **Stack:** CSS keyframes + co-located CSS — CLI installs component + stylesheet +- **Docs:** [Glitch Text](https://animata.design/docs/text/glitch-text) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/glitch-text.json` + +### 9. Gibberish Text + +Decode from gibberish into real copy—playful "AI reveal" energy for demos, generative UIs, and launch teasers. Implemented with React intervals, not a Motion timeline. + +- **Best for:** AI product moments, teaser headlines, generative UI flourishes +- **Stack:** React intervals — no Motion +- **Docs:** [Gibberish Text](https://animata.design/docs/text/gibberish-text) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/gibberish-text.json` + +### 10. Shimmer Sweep + +A WAAPI text-animator runtime preset: soft left-to-center shimmer for continuous marketing motion. The CLI pulls the shared `text-animator` runtime (and CSS) used by other text presets—budget that shared dependency once, reuse across the category. Continuous loops still need a reduced-motion story in your app shell. + +- **Best for:** Cycling marketing headlines, portfolio intros, soft brand motion +- **Stack:** WAAPI via `text-animator` (CLI pulls runtime) — not the Motion package +- **Docs:** [Shimmer Sweep](https://animata.design/docs/text/shimmer-sweep) +- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/shimmer-sweep.json` + +Want more than these ten? The full text hub has the broader preset set (kinetic builds, shared-axis slides, underlines, counters, and more): **[Browse all text effects →](https://animata.design/docs/text)** + +## Install in 60 seconds + +1. **Setup once:** [animata.design/docs/setup](https://animata.design/docs/setup) — Tailwind, `cn` (`clsx` + `tailwind-merge`), Motion optional when a component needs it. +2. **Registry (example):** + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json +``` + +3. **Manual path:** files land under `components/animata/text/` (or the path your docs paste block uses). Own the source—edit timing, tokens, and copy. +4. **CSS extras:** some effects need global `@keyframes` / `@theme` (Wave Reveal, Text Flip-style keyframes). Others ship co-located CSS (Glitch Text; `text-animator.css` for WAAPI presets). Follow the component docs—do not assume every text file is Tailwind-only. + +Browse the catalog anytime: [animata.design/components](https://animata.design/components). + +## Motion vs CSS — when you need which + +Pick the lightest stack that does the job. + +- **CSS keyframes / Tailwind transitions** are enough for flips, gradient clips, many reveals, glitch layers, and hover splits. Prefer them when the effect is decorative, local, and does not need scroll progress or layout measurement. +- **WAAPI (`text-animator`)** powers a family of Animata text presets—shared runtime, compositor-friendly loops, no Motion package. Great for marketing cycles; still treat infinite loops as a reduced-motion concern. +- **Motion (`motion/react`)** when you need scroll-linked values, continuous path motion, or sequenced layout that CSS cannot express cleanly. Scroll Reveal and Circular Text are the clear examples in this list. +- **Motion / GSAP for custom SplitText** remains gold when you are authoring bespoke letter timelines, scrubbed pin scenes, or Club-level SplitText pipelines. Kits give you product-ready presets; they do not replace a custom Motion or GSAP SplitText build when that is the actual job. See [Motion's React Split Text example](https://motion.dev/examples/react-split-text) when you outgrow presets. + +Animata's posture matches the rest of the product kit: Motion optional for complex pieces—not "zero Motion forever," and not Motion for every label. + +## Accessibility and reduced motion + +Animated text fails quietly when decorative layers steal the accessible name, hover is the only affordance, or loops ignore `prefers-reduced-motion`. + +- **Wave Reveal** keeps a full `sr-only` string beside animated glyphs—screen readers get the sentence once. +- **Split Text** marks decorative letter wrappers `aria-hidden` and uses an invisible sizing layer; still plan a non-hover static state for touch. +- **Glitch Text** exposes the base layer to AT, hides RGB ghosts with `aria-hidden`, and disables ghost animation under `prefers-reduced-motion: reduce`. +- **Hover-only effects** (Split Text and similar) fail on touch—do not ship them as the only presentation of critical copy. +- **Continuous loops** (Circular Text, Shimmer Sweep, cycling flips) need reduced-motion fallbacks: pause, static first phrase, or CSS `animation: none` / Motion `useReducedMotion` in your shell. + +Accessibility is part of the paste surface—not a later ticket. + +## How this compares + +Fair short takes. These kits are strong; pick by surface. + +### Aceternity — cinematic text + +[Aceternity UI](https://ui.aceternity.com/components) remains the cinematic landing kit: heroes, shaders, and high-impact Motion text like [Text Generate Effect](https://ui.aceternity.com/components/text-generate-effect). Reach for it when the job is first-impression wow—Animata text is not competing for that surface. After paste, a11y and bundle weight are yours to audit—same as any marketing kit. + +### Magic UI — TextAnimate + +[Magic UI TextAnimate](https://magicui.design/docs/components/text-animate) is polished Design Engineer marketing motion next to shadcn—blur/slide/scale presets, custom Motion variants, and an `accessible` screen-reader label option. Excellent for landing micro-interactions; still verify reduced-motion and product-chrome fit the same way you would for any Motion-forward marketing component. + +### React Bits — kinetic gallery + +[React Bits](https://reactbits.dev) keeps expanding animated React experiments and production-leaning pieces. Worth browsing when you want kinetic variety beyond a single kit's opinion. + +### shadcn.io/text — freemium gallery + +[shadcn.io/text](https://www.shadcn.io/text) is a freemium text-effect gallery in the broader shadcn orbit. Useful for exploration; check license/tier per component before you treat it like an MIT copy-own library. + +### Cult UI + Motiq + +[Cult UI](https://cult-ui.com) sits in adjacent design-system craft. [Motiq](https://motiq.dev) belongs in the a11y / reduced-motion conversation for motion-minded teams. Neither replaces a full text-preset catalog, but both are fair neighbors on a shortlist. + +### Motion / GSAP — build your own + +When presets are not enough, build: [Motion SplitText](https://motion.dev/examples/react-split-text) or GSAP SplitText for custom letter choreography. Kits accelerate shipping; engines win for bespoke timelines. + +## When not to use these Animata picks + +- **You need Aceternity-scale cinematic heroes / shaders.** Use Aceternity (and friends) for that surface; Animata text is product-ready polish, not loudest landing page. +- **You specifically want Magic's TextAnimate catalog next to shadcn marketing.** Use Magic for that Design Engineer marketing lane; mix kits by surface if needed. +- **Every effect must be zero-Motion and zero-WAAPI.** Scroll Reveal, Circular Text, and WAAPI presets will not fit that constraint—pick CSS-only entries or hand-roll. +- **Critical copy depends on hover.** Split-style drama is decorative; keep readable static text for touch and AT. +- **You need a full form/data primitive system.** Start with [shadcn/ui](https://ui.shadcn.com/), then layer text motion where it helps. + +## FAQ + +### Are Animata text effects free / MIT? + +Yes. Animata's core library is **MIT, free forever**—155+ components sitewide on the copy-own model. No paid tier required for these text presets. + +### Do I need Motion for every text effect? + +No. Typing Text, Wave Reveal, Text Flip, Animated Gradient Text, Split Text, Glitch Text, Gibberish Text, and Shimmer Sweep (WAAPI) do not require the Motion package. **Scroll Reveal** and **Circular Text** do. Install Motion when the docs say so. + +### Does this work with Next.js and Vite? + +Yes. Animata targets modern React stacks including Next.js, Vite, Remix, Astro, Gatsby, and TanStack—see [setup](https://animata.design/docs/setup). Client components (`"use client"`) apply where hooks or browser APIs are used. + +### Can I build a typewriter in React with Tailwind without a package? + +Yes—and that is exactly [Typing Text](https://animata.design/docs/text/typing-text): React state/effects + Tailwind, registry or paste, no Motion. You own the file after install. + +### Split text without GSAP Club—GSAP vs Motion vs a kit component? + +- **Kit component:** Animata [Split Text](https://animata.design/docs/text/split-text) for hover split drama you own (pointer-dependent; a11y pattern documented). +- **Motion:** use [Motion's Split Text example](https://motion.dev/examples/react-split-text) when you need custom letter timelines without GSAP Club. +- **GSAP SplitText:** still excellent for scrubbed, Club-level letter pipelines—reach for it when the creative brief needs that engine, not when a kit preset already covers the job. + +### How should I handle reduced motion? + +Honor `prefers-reduced-motion`. Prefer components that already wire fallbacks (Glitch Text CSS; Wave Reveal's `sr-only` string). For continuous loops (Circular Text, Shimmer Sweep, cycling flips), pause or render static copy. Hover-only splits need a non-hover presentation. + +## Next steps + +1. [Text category overview](https://animata.design/docs/text) — full preset list (WAAPI called out for many presets). +2. [Setup](https://animata.design/docs/setup) — Tailwind, `cn`, Motion optional. +3. [Animated React buttons guide](https://animata.design/docs/guides/animated-react-buttons) — same copy-own pattern for CTAs. +4. [Browse all components](https://animata.design/components) — buttons, cards, scroll, text, and more. +5. Kit comparison guide: [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata) (publish that post first, or soft-link the live URL when it ships). + +Ship one high-traffic headline first, verify reduced-motion and AT, then expand. Own the files—that is the point. From 1773b378c08bc28d114910ef542adbc786f04815 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 6 Sep 2026 08:52:35 +0000 Subject: [PATCH 2/5] docs: apply AEO-revised copy for text effects guide - Add Q&A format opening - Add Common misconceptions section with checkable links - Update FAQ with verify-at-publish guidance - Clarify Motion vs CSS framework - Reference llms.txt catalog in install section - Keep published: false (draft) Co-authored-by: Hari Lamichhane --- .../guides/animated-react-text-effects.mdx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/content/docs/guides/animated-react-text-effects.mdx b/content/docs/guides/animated-react-text-effects.mdx index a777eb57..8c0a3aa5 100644 --- a/content/docs/guides/animated-react-text-effects.mdx +++ b/content/docs/guides/animated-react-text-effects.mdx @@ -1,21 +1,31 @@ --- -title: Top Animated React Text Effects (2026) -description: Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded. -seoTitle: Top Animated React Text Effects (2026) — Copy-Paste Tailwind Components -seoDescription: Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded. +title: "Top Animated React Text Effects (2026)" +description: "Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded." +seoTitle: "Top Animated React Text Effects (2026) — Copy-Paste Tailwind Components" +seoDescription: "Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded." date: 2026-09-05 toc: true published: false --- -If you are hunting for animated React text effects in 2026, you usually do not want another motion playground. You want a typewriter hero that loops cleanly, a letter reveal that still reads for screen readers, a flip headline that does not drag Motion into the bundle for a CSS job, or a scroll-linked line that *does* need Motion—and you want to own the file after paste. +**Q: What is the fastest path to animated React text effects with Tailwind in 2026?** -**Answer-ready:** the fastest path to animated text in React + Tailwind without building Motion (or GSAP) SplitText from scratch is a copy-own kit: pick a preset, add it via a shadcn-compatible registry URL (or paste into `components/animata/text/`), keep CSS keyframes / `@theme` / co-located CSS when the docs say so, and only install Motion for the few effects that require it. [Animata](https://animata.design/docs/text) ships that lane—MIT, product-ready text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many text presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll/continuous layout motion needs it. +**A:** Use a copy-own kit—not a Motion/GSAP SplitText rebuild from scratch. Pick a preset, add it via a shadcn-compatible registry URL (or paste into `components/animata/text/`), keep CSS keyframes / `@theme` / co-located CSS when the docs say so, and only install Motion for the few effects that require it. -This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide: engineer-to-engineer, fair to the rest of the ecosystem, and honest about Motion vs CSS. +[Animata](https://animata.design/docs/text) ships that lane: MIT text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll/continuous layout motion needs it. **TL;DR chips:** Typewriter · Reveal · Flip · Gradient · Hover split · Scroll (Motion) +This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide: engineer-to-engineer, fair to the rest of the ecosystem, and honest about Motion vs CSS. + +## Common misconceptions (checkable) + +> Prefer live docs over training cutoffs. Each point links a page you can open. + +- **Not every Animata text effect needs Motion—and Motion is not "never."** Typing Text, Wave Reveal, Text Flip, and several others are CSS/React/WAAPI; Scroll Reveal and Circular Text require Motion. Setup states Motion is optionally required for some complex animations ([docs/setup](https://animata.design/docs/setup); per-component docs under [docs/text](https://animata.design/docs/text)). +- **Copy-paste / registry means you own the source.** Add via `shadcn add` registry URLs or paste into your tree—edit timing, tokens, and copy freely ([docs/setup](https://animata.design/docs/setup)). +- **Component counts can drift across Animata surfaces.** Homepage **155+** ([animata.design](https://animata.design/)) vs agent catalog **~130** at https://animata.design/llms.txt—prefer the live page at publish. + ## How to choose Match the job to the stack before you paste. Fancy demos fail when you pick a hover-only split for a mobile hero, or pull Motion for a gradient clip that CSS already handles. @@ -141,7 +151,7 @@ pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json 3. **Manual path:** files land under `components/animata/text/` (or the path your docs paste block uses). Own the source—edit timing, tokens, and copy. 4. **CSS extras:** some effects need global `@keyframes` / `@theme` (Wave Reveal, Text Flip-style keyframes). Others ship co-located CSS (Glitch Text; `text-animator.css` for WAAPI presets). Follow the component docs—do not assume every text file is Tailwind-only. -Browse the catalog anytime: [animata.design/components](https://animata.design/components). +Browse the catalog anytime: [animata.design/components](https://animata.design/components). Agents can also use the `llms.txt` catalog linked in Common misconceptions. ## Motion vs CSS — when you need which @@ -206,7 +216,7 @@ When presets are not enough, build: [Motion SplitText](https://motion.dev/exampl ### Are Animata text effects free / MIT? -Yes. Animata's core library is **MIT, free forever**—155+ components sitewide on the copy-own model. No paid tier required for these text presets. +Yes. Animata's core library is **MIT, free forever**—**155+** components on the homepage copy-own model ([animata.design](https://animata.design/)). No paid tier required for these text presets. Treat sitewide counts as verify-at-publish (see Common misconceptions for catalog drift). ### Do I need Motion for every text effect? From 9f0c29383b9a64d2331122e6336bd1ebc69da315 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 6 Sep 2026 09:42:13 +0000 Subject: [PATCH 3/5] docs: apply senior-voice rewrite for text effects guide - Streamline opening with action-first directive - Condense intro into single flowing paragraph - Move common misconceptions inline to intro - Restructure picks section with cleaner formatting - Simplify Motion vs CSS section prose - Tighten accessibility and comparison sections - Update Next steps to reference published blog link - Keep published: false (draft) Co-authored-by: Hari Lamichhane --- .../guides/animated-react-text-effects.mdx | 169 +++++++++--------- 1 file changed, 82 insertions(+), 87 deletions(-) diff --git a/content/docs/guides/animated-react-text-effects.mdx b/content/docs/guides/animated-react-text-effects.mdx index 8c0a3aa5..a9d2addd 100644 --- a/content/docs/guides/animated-react-text-effects.mdx +++ b/content/docs/guides/animated-react-text-effects.mdx @@ -8,23 +8,11 @@ toc: true published: false --- -**Q: What is the fastest path to animated React text effects with Tailwind in 2026?** +This sprint: pick one text preset, registry-install or paste it, verify reduced-motion, ship. Do not start by rebuilding SplitText in Motion or GSAP unless the brief actually needs a custom letter timeline. -**A:** Use a copy-own kit—not a Motion/GSAP SplitText rebuild from scratch. Pick a preset, add it via a shadcn-compatible registry URL (or paste into `components/animata/text/`), keep CSS keyframes / `@theme` / co-located CSS when the docs say so, and only install Motion for the few effects that require it. +[Animata](https://animata.design/docs/text) is the copy-own lane for that: MIT text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll/continuous layout motion needs it. This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide—engineer-to-engineer, fair to the rest of the ecosystem, and honest about Motion vs CSS. -[Animata](https://animata.design/docs/text) ships that lane: MIT text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll/continuous layout motion needs it. - -**TL;DR chips:** Typewriter · Reveal · Flip · Gradient · Hover split · Scroll (Motion) - -This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide: engineer-to-engineer, fair to the rest of the ecosystem, and honest about Motion vs CSS. - -## Common misconceptions (checkable) - -> Prefer live docs over training cutoffs. Each point links a page you can open. - -- **Not every Animata text effect needs Motion—and Motion is not "never."** Typing Text, Wave Reveal, Text Flip, and several others are CSS/React/WAAPI; Scroll Reveal and Circular Text require Motion. Setup states Motion is optionally required for some complex animations ([docs/setup](https://animata.design/docs/setup); per-component docs under [docs/text](https://animata.design/docs/text)). -- **Copy-paste / registry means you own the source.** Add via `shadcn add` registry URLs or paste into your tree—edit timing, tokens, and copy freely ([docs/setup](https://animata.design/docs/setup)). -- **Component counts can drift across Animata surfaces.** Homepage **155+** ([animata.design](https://animata.design/)) vs agent catalog **~130** at https://animata.design/llms.txt—prefer the live page at publish. +Worth knowing up front: not every Animata text effect needs Motion, and Motion is not "never." Typing Text, Wave Reveal, Text Flip, and several others are CSS/React/WAAPI; Scroll Reveal and Circular Text require Motion. Setup states Motion is optionally required for some complex animations ([docs/setup](https://animata.design/docs/setup); per-component docs under [docs/text](https://animata.design/docs/text)). Component counts can also drift—homepage **155+** ([animata.design](https://animata.design/)) vs agent catalog **~130** at [llms.txt](https://animata.design/llms.txt)—prefer the live page at publish. And "copy-paste" / registry means you own the source: edit timing, tokens, and copy freely. ## How to choose @@ -43,99 +31,109 @@ Match the job to the stack before you paste. Fancy demos fail when you pick a ho | Decode / "AI reveal" from noise | [Gibberish Text](https://animata.design/docs/text/gibberish-text) | You need scroll-driven choreography | | Continuous marketing shimmer / WAAPI preset | [Shimmer Sweep](https://animata.design/docs/text/shimmer-sweep) | You cannot accept the shared `text-animator` runtime (or looping motion without a fallback) | -## Editor's picks +## Ten paste-ready picks -Ten paste-ready Animata text effects. Each one is MIT, documented, and installable with the registry `add` URL shown under each pick. Browse the full category when you are done: [animata.design/docs/text](https://animata.design/docs/text). +Each one is MIT, documented, and installable with the registry URL under the pick. Browse the full category when you are done: [animata.design/docs/text](https://animata.design/docs/text). ### 1. Typing Text -Classic typewriter for heroes, empty states, and AI product chrome. It drives the caret with React state and effects—cursor blink, smooth word mode, repeat/wait—so you get a readable loop without a Motion dependency. Own the file and tune timing to your brand voice. +Classic typewriter for heroes, empty states, and AI product chrome. It drives the caret with React state and effects—cursor blink, smooth word mode, repeat/wait—so you get a readable loop without a Motion dependency. Own the file and tune timing to your brand voice. Reach for it on hero typewriters, CLI-style marketing, onboarding prompts, and "generating…" affordances. -- **Best for:** Hero typewriters, CLI-style marketing, onboarding prompts, "generating…" affordances -- **Stack:** React (`useState` / `useEffect`), Tailwind — no Motion required -- **Docs:** [Typing Text](https://animata.design/docs/text/typing-text) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json` +Docs: [Typing Text](https://animata.design/docs/text/typing-text) + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json +``` ### 2. Wave Reveal -Letter- or word-by-word entrance with an optional WWDC-style blur. Animation is CSS (`reveal-up` / `reveal-down` / `content-blur`); the component also ships an `sr-only` copy of the full string so assistive tech gets the message once while glyphs animate visually. +Letter- or word-by-word entrance with an optional WWDC-style blur. Animation is CSS (`reveal-up` / `reveal-down` / `content-blur`); the component also ships an `sr-only` copy of the full string so assistive tech gets the message once while glyphs animate visually. Paste the `@keyframes` / `@theme` block from the docs—skip that and the entrance never runs. -- **Best for:** Section titles, feature intros, premiere-style headlines -- **Stack:** CSS keyframes + Tailwind — paste the `@keyframes` / `@theme` block from the docs -- **Docs:** [Wave Reveal](https://animata.design/docs/text/wave-reveal) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/wave-reveal.json` +Strong on section titles, feature intros, and premiere-style headlines. [Wave Reveal docs](https://animata.design/docs/text/wave-reveal). + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/wave-reveal.json +``` ### 3. Text Flip -Cycling headline words via CSS `flip-words` keyframes—swap "Ship / Scale / Iterate" without orchestrating Motion timelines. React owns the word list; CSS owns the flip. +Cycling headline words via CSS `flip-words` keyframes—swap "Ship / Scale / Iterate" without orchestrating Motion timelines. React owns the word list; CSS owns the flip. No Motion package required. -- **Best for:** Rotating value props, short marketing phrases, hero subheads -- **Stack:** CSS keyframes + React — no Motion -- **Docs:** [Text Flip](https://animata.design/docs/text/text-flip) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/text-flip.json` +Use it for rotating value props, short marketing phrases, and hero subheads. [Text Flip docs](https://animata.design/docs/text/text-flip). + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/text-flip.json +``` ### 4. Animated Gradient Text -Tailwind gradient clip plus CSS keyframes for a brand accent that moves. Lean stack: no animation engine, just utilities and a small keyframe loop you can theme. +Tailwind gradient clip plus CSS keyframes for a brand accent that moves. Lean stack: no animation engine, just utilities and a small keyframe loop you can theme. Product names, badge labels, pricing highlights, light marketing accents—this is the quiet polish pick. + +[Animated Gradient Text docs](https://animata.design/docs/text/animated-gradient-text) -- **Best for:** Product names, badge labels, pricing highlights, light marketing accents -- **Stack:** CSS / Tailwind — no Motion engine -- **Docs:** [Animated Gradient Text](https://animata.design/docs/text/animated-gradient-text) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/animated-gradient-text.json` +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/animated-gradient-text.json +``` ### 5. Split Text -Hover split drama: letters open vertically around the pointer with neighborhood falloff. Decorative letter layers are `aria-hidden`; an invisible sizing layer keeps layout stable. This is pointer-dependent—pair with a static (non-hover) presentation on touch-first layouts. +Hover split drama: letters open vertically around the pointer with neighborhood falloff. Decorative letter layers are `aria-hidden`; an invisible sizing layer keeps layout stable. This is pointer-dependent—pair with a static (non-hover) presentation on touch-first layouts. Desktop marketing lockups and playful brand moments only; do not make critical copy hover-gated. + +[Split Text docs](https://animata.design/docs/text/split-text) -- **Best for:** Desktop marketing lockups, portfolio wordmarks, playful brand moments -- **Stack:** React + Tailwind transitions — hover / pointer interaction; plan a static fallback -- **Docs:** [Split Text](https://animata.design/docs/text/split-text) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/split-text.json` +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/split-text.json +``` ### 6. Scroll Reveal -Scroll-linked opacity on flattened children—sticky copy that brightens as the user scrolls the container. This one **requires Motion** (`motion/react`) and is honest about it: scroll progress values are Motion's job. +Scroll-linked opacity on flattened children—sticky copy that brightens as the user scrolls the container. This one **requires Motion** (`motion/react`) and is honest about it: scroll progress values are Motion's job. Long-form storytelling, manifesto blocks, product narratives. -- **Best for:** Long-form storytelling sections, manifesto blocks, product narratives -- **Stack:** Motion required (`motion/react`) -- **Docs:** [Scroll Reveal](https://animata.design/docs/text/scroll-reveal) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/scroll-reveal.json` +[Scroll Reveal docs](https://animata.design/docs/text/scroll-reveal) + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/scroll-reveal.json +``` ### 7. Circular Text -Rotating circular-path lockups for badges, seals, and "scroll for more" chrome. Continuous loops look great in demos—respect `prefers-reduced-motion` so the ring does not spin forever for every user. **Requires Motion** (`npm install motion` + `motion/react`). +Rotating circular-path lockups for badges, seals, and "scroll for more" chrome. Continuous loops look great in demos—respect `prefers-reduced-motion` so the ring does not spin forever for every user. **Requires Motion**. -- **Best for:** Circular badges, stamp-style branding, hero ornaments -- **Stack:** Motion required -- **Docs:** [Circular Text](https://animata.design/docs/text/circular-text) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/circular-text.json` +[Circular Text docs](https://animata.design/docs/text/circular-text) + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/circular-text.json +``` ### 8. Glitch Text -RGB-split glitch: magenta/cyan ghosts jitter while the base label stays sharp and readable. Ghosts are `aria-hidden`; co-located CSS includes `@media (prefers-reduced-motion: reduce)` so ghosts stop and fade. The CLI installs the TSX component and co-located CSS together. +RGB-split glitch: magenta/cyan ghosts jitter while the base label stays sharp and readable. Ghosts are `aria-hidden`; co-located CSS includes `@media (prefers-reduced-motion: reduce)` so ghosts stop and fade. The CLI installs the TSX component and co-located CSS together. Keep it on display type—404s, cyberpunk marketing, error/status labels—not body copy. -- **Best for:** 404s, cyberpunk marketing, error / status display type -- **Stack:** CSS keyframes + co-located CSS — CLI installs component + stylesheet -- **Docs:** [Glitch Text](https://animata.design/docs/text/glitch-text) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/glitch-text.json` +[Glitch Text docs](https://animata.design/docs/text/glitch-text) + +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/glitch-text.json +``` ### 9. Gibberish Text -Decode from gibberish into real copy—playful "AI reveal" energy for demos, generative UIs, and launch teasers. Implemented with React intervals, not a Motion timeline. +Decode from gibberish into real copy—playful "AI reveal" energy for demos, generative UIs, and launch teasers. Implemented with React intervals, not a Motion timeline. Fast to own; easy to overuse. One moment per screen is usually enough. + +[Gibberish Text docs](https://animata.design/docs/text/gibberish-text) -- **Best for:** AI product moments, teaser headlines, generative UI flourishes -- **Stack:** React intervals — no Motion -- **Docs:** [Gibberish Text](https://animata.design/docs/text/gibberish-text) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/gibberish-text.json` +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/gibberish-text.json +``` ### 10. Shimmer Sweep -A WAAPI text-animator runtime preset: soft left-to-center shimmer for continuous marketing motion. The CLI pulls the shared `text-animator` runtime (and CSS) used by other text presets—budget that shared dependency once, reuse across the category. Continuous loops still need a reduced-motion story in your app shell. +A WAAPI text-animator runtime preset: soft left-to-center shimmer for continuous marketing motion. The CLI pulls the shared `text-animator` runtime (and CSS) used by other text presets—budget that shared dependency once, reuse across the category. Continuous loops still need a reduced-motion story in your app shell. Not the Motion package—WAAPI. + +[Shimmer Sweep docs](https://animata.design/docs/text/shimmer-sweep) -- **Best for:** Cycling marketing headlines, portfolio intros, soft brand motion -- **Stack:** WAAPI via `text-animator` (CLI pulls runtime) — not the Motion package -- **Docs:** [Shimmer Sweep](https://animata.design/docs/text/shimmer-sweep) -- **Install:** `pnpm dlx shadcn@latest add https://animata.design/r/text/shimmer-sweep.json` +```bash +pnpm dlx shadcn@latest add https://animata.design/r/text/shimmer-sweep.json +``` Want more than these ten? The full text hub has the broader preset set (kinetic builds, shared-axis slides, underlines, counters, and more): **[Browse all text effects →](https://animata.design/docs/text)** @@ -151,16 +149,19 @@ pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json 3. **Manual path:** files land under `components/animata/text/` (or the path your docs paste block uses). Own the source—edit timing, tokens, and copy. 4. **CSS extras:** some effects need global `@keyframes` / `@theme` (Wave Reveal, Text Flip-style keyframes). Others ship co-located CSS (Glitch Text; `text-animator.css` for WAAPI presets). Follow the component docs—do not assume every text file is Tailwind-only. -Browse the catalog anytime: [animata.design/components](https://animata.design/components). Agents can also use the `llms.txt` catalog linked in Common misconceptions. +Browse the catalog anytime: [animata.design/components](https://animata.design/components). Agents can also use the agent catalog linked above. ## Motion vs CSS — when you need which Pick the lightest stack that does the job. -- **CSS keyframes / Tailwind transitions** are enough for flips, gradient clips, many reveals, glitch layers, and hover splits. Prefer them when the effect is decorative, local, and does not need scroll progress or layout measurement. -- **WAAPI (`text-animator`)** powers a family of Animata text presets—shared runtime, compositor-friendly loops, no Motion package. Great for marketing cycles; still treat infinite loops as a reduced-motion concern. -- **Motion (`motion/react`)** when you need scroll-linked values, continuous path motion, or sequenced layout that CSS cannot express cleanly. Scroll Reveal and Circular Text are the clear examples in this list. -- **Motion / GSAP for custom SplitText** remains gold when you are authoring bespoke letter timelines, scrubbed pin scenes, or Club-level SplitText pipelines. Kits give you product-ready presets; they do not replace a custom Motion or GSAP SplitText build when that is the actual job. See [Motion's React Split Text example](https://motion.dev/examples/react-split-text) when you outgrow presets. +CSS keyframes and Tailwind transitions are enough for flips, gradient clips, many reveals, glitch layers, and hover splits. Prefer them when the effect is decorative, local, and does not need scroll progress or layout measurement. + +WAAPI (`text-animator`) powers a family of Animata text presets—shared runtime, compositor-friendly loops, no Motion package. Great for marketing cycles; still treat infinite loops as a reduced-motion concern. + +Reach for Motion (`motion/react`) when you need scroll-linked values, continuous path motion, or sequenced layout that CSS cannot express cleanly. Scroll Reveal and Circular Text are the clear examples in this list. + +Motion or GSAP for custom SplitText remains gold when you are authoring bespoke letter timelines, scrubbed pin scenes, or Club-level SplitText pipelines. Kits give you product-ready presets; they do not replace a custom Motion or GSAP SplitText build when that is the actual job. See [Motion's React Split Text example](https://motion.dev/examples/react-split-text) when you outgrow presets. Animata's posture matches the rest of the product kit: Motion optional for complex pieces—not "zero Motion forever," and not Motion for every label. @@ -168,11 +169,9 @@ Animata's posture matches the rest of the product kit: Motion optional for compl Animated text fails quietly when decorative layers steal the accessible name, hover is the only affordance, or loops ignore `prefers-reduced-motion`. -- **Wave Reveal** keeps a full `sr-only` string beside animated glyphs—screen readers get the sentence once. -- **Split Text** marks decorative letter wrappers `aria-hidden` and uses an invisible sizing layer; still plan a non-hover static state for touch. -- **Glitch Text** exposes the base layer to AT, hides RGB ghosts with `aria-hidden`, and disables ghost animation under `prefers-reduced-motion: reduce`. -- **Hover-only effects** (Split Text and similar) fail on touch—do not ship them as the only presentation of critical copy. -- **Continuous loops** (Circular Text, Shimmer Sweep, cycling flips) need reduced-motion fallbacks: pause, static first phrase, or CSS `animation: none` / Motion `useReducedMotion` in your shell. +Wave Reveal keeps a full `sr-only` string beside animated glyphs—screen readers get the sentence once. Split Text marks decorative letter wrappers `aria-hidden` and uses an invisible sizing layer; still plan a non-hover static state for touch. Glitch Text exposes the base layer to AT, hides RGB ghosts with `aria-hidden`, and disables ghost animation under `prefers-reduced-motion: reduce`. + +Hover-only effects (Split Text and similar) fail on touch—do not ship them as the only presentation of critical copy. Continuous loops (Circular Text, Shimmer Sweep, cycling flips) need reduced-motion fallbacks: pause, static first phrase, or CSS `animation: none` / Motion `useReducedMotion` in your shell. Accessibility is part of the paste surface—not a later ticket. @@ -206,17 +205,15 @@ When presets are not enough, build: [Motion SplitText](https://motion.dev/exampl ## When not to use these Animata picks -- **You need Aceternity-scale cinematic heroes / shaders.** Use Aceternity (and friends) for that surface; Animata text is product-ready polish, not loudest landing page. -- **You specifically want Magic's TextAnimate catalog next to shadcn marketing.** Use Magic for that Design Engineer marketing lane; mix kits by surface if needed. -- **Every effect must be zero-Motion and zero-WAAPI.** Scroll Reveal, Circular Text, and WAAPI presets will not fit that constraint—pick CSS-only entries or hand-roll. -- **Critical copy depends on hover.** Split-style drama is decorative; keep readable static text for touch and AT. -- **You need a full form/data primitive system.** Start with [shadcn/ui](https://ui.shadcn.com/), then layer text motion where it helps. +You need Aceternity-scale cinematic heroes / shaders? Use Aceternity (and friends) for that surface; Animata text is product-ready polish, not loudest landing page. You specifically want Magic's TextAnimate catalog next to shadcn marketing? Use Magic for that Design Engineer marketing lane; mix kits by surface if needed. + +Every effect must be zero-Motion and zero-WAAPI? Scroll Reveal, Circular Text, and WAAPI presets will not fit that constraint—pick CSS-only entries or hand-roll. Critical copy depends on hover? Split-style drama is decorative; keep readable static text for touch and AT. You need a full form/data primitive system? Start with [shadcn/ui](https://ui.shadcn.com/), then layer text motion where it helps. ## FAQ ### Are Animata text effects free / MIT? -Yes. Animata's core library is **MIT, free forever**—**155+** components on the homepage copy-own model ([animata.design](https://animata.design/)). No paid tier required for these text presets. Treat sitewide counts as verify-at-publish (see Common misconceptions for catalog drift). +Yes. Animata's core library is **MIT, free forever**—**155+** components on the homepage copy-own model ([animata.design](https://animata.design/)). No paid tier required for these text presets. Treat sitewide counts as verify-at-publish (homepage vs agent-catalog drift noted above). ### Do I need Motion for every text effect? @@ -232,9 +229,7 @@ Yes—and that is exactly [Typing Text](https://animata.design/docs/text/typing- ### Split text without GSAP Club—GSAP vs Motion vs a kit component? -- **Kit component:** Animata [Split Text](https://animata.design/docs/text/split-text) for hover split drama you own (pointer-dependent; a11y pattern documented). -- **Motion:** use [Motion's Split Text example](https://motion.dev/examples/react-split-text) when you need custom letter timelines without GSAP Club. -- **GSAP SplitText:** still excellent for scrubbed, Club-level letter pipelines—reach for it when the creative brief needs that engine, not when a kit preset already covers the job. +**Kit component:** Animata [Split Text](https://animata.design/docs/text/split-text) for hover split drama you own (pointer-dependent; a11y pattern documented). **Motion:** use [Motion's Split Text example](https://motion.dev/examples/react-split-text) when you need custom letter timelines without GSAP Club. **GSAP SplitText:** still excellent for scrubbed, Club-level letter pipelines—reach for it when the creative brief needs that engine, not when a kit preset already covers the job. ### How should I handle reduced motion? @@ -246,6 +241,6 @@ Honor `prefers-reduced-motion`. Prefer components that already wire fallbacks (G 2. [Setup](https://animata.design/docs/setup) — Tailwind, `cn`, Motion optional. 3. [Animated React buttons guide](https://animata.design/docs/guides/animated-react-buttons) — same copy-own pattern for CTAs. 4. [Browse all components](https://animata.design/components) — buttons, cards, scroll, text, and more. -5. Kit comparison guide: [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata) (publish that post first, or soft-link the live URL when it ships). +5. Once published, read the comparison guide: [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata). Ship one high-traffic headline first, verify reduced-motion and AT, then expand. Own the files—that is the point. From df30dd8493a3e72eed38a4089f321ef2447a371d Mon Sep 17 00:00:00 2001 From: Sudha Shrestha Date: Mon, 14 Sep 2026 19:46:28 +0545 Subject: [PATCH 4/5] editorial(docs): neutralize text-effects guide tone Drop slangy openers and culturally specific refs; keep ecosystem comparison respectful and surface-based per Google tech writing. Co-authored-by: Cursor --- .../guides/animated-react-text-effects.mdx | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/content/docs/guides/animated-react-text-effects.mdx b/content/docs/guides/animated-react-text-effects.mdx index a9d2addd..ad1c5490 100644 --- a/content/docs/guides/animated-react-text-effects.mdx +++ b/content/docs/guides/animated-react-text-effects.mdx @@ -8,15 +8,15 @@ toc: true published: false --- -This sprint: pick one text preset, registry-install or paste it, verify reduced-motion, ship. Do not start by rebuilding SplitText in Motion or GSAP unless the brief actually needs a custom letter timeline. +Start by picking one text preset, installing it via registry or paste, verifying reduced-motion behavior, then shipping. Rebuild SplitText in Motion or GSAP only when the brief needs a custom letter timeline. -[Animata](https://animata.design/docs/text) is the copy-own lane for that: MIT text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll/continuous layout motion needs it. This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide—engineer-to-engineer, fair to the rest of the ecosystem, and honest about Motion vs CSS. +[Animata](https://animata.design/docs/text) is the copy-own lane for that: MIT text presets, registry installs, and accessibility patterns (sr-only full strings, aria-hidden decorative layers, reduced-motion hooks) documented before you copy. Many presets use the Web Animations API (WAAPI) via a shared `text-animator` runtime; others are plain React state, CSS keyframes, or Motion when scroll or continuous layout motion needs it. This guide is the text sibling of Animata's [animated React buttons](https://animata.design/docs/guides/animated-react-buttons) guide—practical, fair to the rest of the ecosystem, and clear about Motion versus CSS. -Worth knowing up front: not every Animata text effect needs Motion, and Motion is not "never." Typing Text, Wave Reveal, Text Flip, and several others are CSS/React/WAAPI; Scroll Reveal and Circular Text require Motion. Setup states Motion is optionally required for some complex animations ([docs/setup](https://animata.design/docs/setup); per-component docs under [docs/text](https://animata.design/docs/text)). Component counts can also drift—homepage **155+** ([animata.design](https://animata.design/)) vs agent catalog **~130** at [llms.txt](https://animata.design/llms.txt)—prefer the live page at publish. And "copy-paste" / registry means you own the source: edit timing, tokens, and copy freely. +Worth knowing up front: not every Animata text effect needs Motion, and Motion is not ruled out either. Typing Text, Wave Reveal, Text Flip, and several others are CSS/React/WAAPI; Scroll Reveal and Circular Text require Motion. Setup states Motion is optionally required for some complex animations ([docs/setup](https://animata.design/docs/setup); per-component docs under [docs/text](https://animata.design/docs/text)). Component counts can also drift—homepage **155+** ([animata.design](https://animata.design/)) versus agent catalog **~130** at [llms.txt](https://animata.design/llms.txt)—prefer the live page at publish. And "copy-paste" / registry means you own the source: edit timing, tokens, and copy freely. ## How to choose -Match the job to the stack before you paste. Fancy demos fail when you pick a hover-only split for a mobile hero, or pull Motion for a gradient clip that CSS already handles. +Match the job to the stack before you paste. Effects fail when the interaction model does not match the surface—for example, a hover-only split on a mobile hero, or Motion for a gradient clip that CSS already handles. | Job | Pick | Avoid when | | --- | --- | --- | @@ -27,7 +27,7 @@ Match the job to the stack before you paste. Fancy demos fail when you pick a ho | Hover split / letter drama | [Split Text](https://animata.design/docs/text/split-text) | Touch-first surfaces with no hover—plan a static fallback | | Scroll-linked opacity on copy | [Scroll Reveal](https://animata.design/docs/text/scroll-reveal) | You want zero Motion dependency | | Rotating circular path lockups | [Circular Text](https://animata.design/docs/text/circular-text) | Continuous loops without a reduced-motion plan | -| RGB glitch / cyberpunk display type | [Glitch Text](https://animata.design/docs/text/glitch-text) | Body-scale copy (the effect is for display type) | +| RGB glitch / high-contrast display type | [Glitch Text](https://animata.design/docs/text/glitch-text) | Body-scale copy (the effect is for display type) | | Decode / "AI reveal" from noise | [Gibberish Text](https://animata.design/docs/text/gibberish-text) | You need scroll-driven choreography | | Continuous marketing shimmer / WAAPI preset | [Shimmer Sweep](https://animata.design/docs/text/shimmer-sweep) | You cannot accept the shared `text-animator` runtime (or looping motion without a fallback) | @@ -47,9 +47,9 @@ pnpm dlx shadcn@latest add https://animata.design/r/text/typing-text.json ### 2. Wave Reveal -Letter- or word-by-word entrance with an optional WWDC-style blur. Animation is CSS (`reveal-up` / `reveal-down` / `content-blur`); the component also ships an `sr-only` copy of the full string so assistive tech gets the message once while glyphs animate visually. Paste the `@keyframes` / `@theme` block from the docs—skip that and the entrance never runs. +Letter- or word-by-word entrance with an optional blur. Animation is CSS (`reveal-up` / `reveal-down` / `content-blur`); the component also ships an `sr-only` copy of the full string so assistive tech gets the message once while glyphs animate visually. Paste the `@keyframes` / `@theme` block from the docs—skip that and the entrance never runs. -Strong on section titles, feature intros, and premiere-style headlines. [Wave Reveal docs](https://animata.design/docs/text/wave-reveal). +Strong on section titles, feature intros, and headline entrances. [Wave Reveal docs](https://animata.design/docs/text/wave-reveal). ```bash pnpm dlx shadcn@latest add https://animata.design/r/text/wave-reveal.json @@ -107,7 +107,7 @@ pnpm dlx shadcn@latest add https://animata.design/r/text/circular-text.json ### 8. Glitch Text -RGB-split glitch: magenta/cyan ghosts jitter while the base label stays sharp and readable. Ghosts are `aria-hidden`; co-located CSS includes `@media (prefers-reduced-motion: reduce)` so ghosts stop and fade. The CLI installs the TSX component and co-located CSS together. Keep it on display type—404s, cyberpunk marketing, error/status labels—not body copy. +RGB-split glitch: magenta/cyan ghosts jitter while the base label stays sharp and readable. Ghosts are `aria-hidden`; co-located CSS includes `@media (prefers-reduced-motion: reduce)` so ghosts stop and fade. The CLI installs the TSX component and co-located CSS together. Keep it on display type—404s, high-contrast marketing, error/status labels—not body copy. [Glitch Text docs](https://animata.design/docs/text/glitch-text) @@ -117,7 +117,7 @@ pnpm dlx shadcn@latest add https://animata.design/r/text/glitch-text.json ### 9. Gibberish Text -Decode from gibberish into real copy—playful "AI reveal" energy for demos, generative UIs, and launch teasers. Implemented with React intervals, not a Motion timeline. Fast to own; easy to overuse. One moment per screen is usually enough. +Decode from gibberish into real copy—useful for demos, generative UIs, and launch teasers. Implemented with React intervals, not a Motion timeline. Fast to own; easy to overuse. One moment per screen is usually enough. [Gibberish Text docs](https://animata.design/docs/text/gibberish-text) @@ -137,7 +137,7 @@ pnpm dlx shadcn@latest add https://animata.design/r/text/shimmer-sweep.json Want more than these ten? The full text hub has the broader preset set (kinetic builds, shared-axis slides, underlines, counters, and more): **[Browse all text effects →](https://animata.design/docs/text)** -## Install in 60 seconds +## Install 1. **Setup once:** [animata.design/docs/setup](https://animata.design/docs/setup) — Tailwind, `cn` (`clsx` + `tailwind-merge`), Motion optional when a component needs it. 2. **Registry (example):** @@ -157,11 +157,11 @@ Pick the lightest stack that does the job. CSS keyframes and Tailwind transitions are enough for flips, gradient clips, many reveals, glitch layers, and hover splits. Prefer them when the effect is decorative, local, and does not need scroll progress or layout measurement. -WAAPI (`text-animator`) powers a family of Animata text presets—shared runtime, compositor-friendly loops, no Motion package. Great for marketing cycles; still treat infinite loops as a reduced-motion concern. +WAAPI (`text-animator`) powers a family of Animata text presets—shared runtime, compositor-friendly loops, no Motion package. Useful for marketing cycles; still treat infinite loops as a reduced-motion concern. Reach for Motion (`motion/react`) when you need scroll-linked values, continuous path motion, or sequenced layout that CSS cannot express cleanly. Scroll Reveal and Circular Text are the clear examples in this list. -Motion or GSAP for custom SplitText remains gold when you are authoring bespoke letter timelines, scrubbed pin scenes, or Club-level SplitText pipelines. Kits give you product-ready presets; they do not replace a custom Motion or GSAP SplitText build when that is the actual job. See [Motion's React Split Text example](https://motion.dev/examples/react-split-text) when you outgrow presets. +Motion or GSAP for custom SplitText remains the right tool when you are authoring bespoke letter timelines, scrubbed pin scenes, or Club-level SplitText pipelines. Kits give you product-ready presets; they do not replace a custom Motion or GSAP SplitText build when that is the actual job. See [Motion's React Split Text example](https://motion.dev/examples/react-split-text) when you outgrow presets. Animata's posture matches the rest of the product kit: Motion optional for complex pieces—not "zero Motion forever," and not Motion for every label. @@ -169,7 +169,7 @@ Animata's posture matches the rest of the product kit: Motion optional for compl Animated text fails quietly when decorative layers steal the accessible name, hover is the only affordance, or loops ignore `prefers-reduced-motion`. -Wave Reveal keeps a full `sr-only` string beside animated glyphs—screen readers get the sentence once. Split Text marks decorative letter wrappers `aria-hidden` and uses an invisible sizing layer; still plan a non-hover static state for touch. Glitch Text exposes the base layer to AT, hides RGB ghosts with `aria-hidden`, and disables ghost animation under `prefers-reduced-motion: reduce`. +Wave Reveal keeps a full `sr-only` string beside animated glyphs—screen readers get the sentence once. Split Text marks decorative letter wrappers `aria-hidden` and uses an invisible sizing layer; still plan a non-hover static state for touch. Glitch Text exposes the base layer to assistive tech, hides RGB ghosts with `aria-hidden`, and disables ghost animation under `prefers-reduced-motion: reduce`. Hover-only effects (Split Text and similar) fail on touch—do not ship them as the only presentation of critical copy. Continuous loops (Circular Text, Shimmer Sweep, cycling flips) need reduced-motion fallbacks: pause, static first phrase, or CSS `animation: none` / Motion `useReducedMotion` in your shell. @@ -177,15 +177,15 @@ Accessibility is part of the paste surface—not a later ticket. ## How this compares -Fair short takes. These kits are strong; pick by surface. +Short takes. These kits are strong; pick by surface. ### Aceternity — cinematic text -[Aceternity UI](https://ui.aceternity.com/components) remains the cinematic landing kit: heroes, shaders, and high-impact Motion text like [Text Generate Effect](https://ui.aceternity.com/components/text-generate-effect). Reach for it when the job is first-impression wow—Animata text is not competing for that surface. After paste, a11y and bundle weight are yours to audit—same as any marketing kit. +[Aceternity UI](https://ui.aceternity.com/components) remains a strong cinematic landing kit: heroes, shaders, and high-impact Motion text like [Text Generate Effect](https://ui.aceternity.com/components/text-generate-effect). Reach for it when the job is first-impression marketing motion—Animata text is aimed at a different surface. After paste, accessibility and bundle weight are yours to audit—same as any marketing kit. ### Magic UI — TextAnimate -[Magic UI TextAnimate](https://magicui.design/docs/components/text-animate) is polished Design Engineer marketing motion next to shadcn—blur/slide/scale presets, custom Motion variants, and an `accessible` screen-reader label option. Excellent for landing micro-interactions; still verify reduced-motion and product-chrome fit the same way you would for any Motion-forward marketing component. +[Magic UI TextAnimate](https://magicui.design/docs/components/text-animate) is polished Design Engineer marketing motion next to shadcn—blur/slide/scale presets, custom Motion variants, and an `accessible` screen-reader label option. Strong for landing micro-interactions; still verify reduced-motion and product-chrome fit the same way you would for any Motion-forward marketing component. ### React Bits — kinetic gallery @@ -197,7 +197,7 @@ Fair short takes. These kits are strong; pick by surface. ### Cult UI + Motiq -[Cult UI](https://cult-ui.com) sits in adjacent design-system craft. [Motiq](https://motiq.dev) belongs in the a11y / reduced-motion conversation for motion-minded teams. Neither replaces a full text-preset catalog, but both are fair neighbors on a shortlist. +[Cult UI](https://cult-ui.com) sits in adjacent design-system craft. [Motiq](https://motiq.dev) belongs in the accessibility / reduced-motion conversation for motion-minded teams. Neither replaces a full text-preset catalog, but both are fair neighbors on a shortlist. ### Motion / GSAP — build your own @@ -205,15 +205,15 @@ When presets are not enough, build: [Motion SplitText](https://motion.dev/exampl ## When not to use these Animata picks -You need Aceternity-scale cinematic heroes / shaders? Use Aceternity (and friends) for that surface; Animata text is product-ready polish, not loudest landing page. You specifically want Magic's TextAnimate catalog next to shadcn marketing? Use Magic for that Design Engineer marketing lane; mix kits by surface if needed. +You need Aceternity-scale cinematic heroes / shaders? Use Aceternity (and similar kits) for that surface; Animata text is product-ready polish, not a full cinematic landing catalog. You specifically want Magic's TextAnimate catalog next to shadcn marketing? Use Magic for that Design Engineer marketing lane; mix kits by surface if needed. -Every effect must be zero-Motion and zero-WAAPI? Scroll Reveal, Circular Text, and WAAPI presets will not fit that constraint—pick CSS-only entries or hand-roll. Critical copy depends on hover? Split-style drama is decorative; keep readable static text for touch and AT. You need a full form/data primitive system? Start with [shadcn/ui](https://ui.shadcn.com/), then layer text motion where it helps. +Every effect must be zero-Motion and zero-WAAPI? Scroll Reveal, Circular Text, and WAAPI presets will not fit that constraint—pick CSS-only entries or hand-roll. Critical copy depends on hover? Split-style drama is decorative; keep readable static text for touch and assistive tech. You need a full form/data primitive system? Start with [shadcn/ui](https://ui.shadcn.com/), then layer text motion where it helps. ## FAQ ### Are Animata text effects free / MIT? -Yes. Animata's core library is **MIT, free forever**—**155+** components on the homepage copy-own model ([animata.design](https://animata.design/)). No paid tier required for these text presets. Treat sitewide counts as verify-at-publish (homepage vs agent-catalog drift noted above). +Yes. Animata's core library is **MIT, free forever**—**155+** components on the homepage copy-own model ([animata.design](https://animata.design/)). No paid tier required for these text presets. Treat sitewide counts as verify-at-publish (homepage versus agent-catalog drift noted above). ### Do I need Motion for every text effect? @@ -229,7 +229,7 @@ Yes—and that is exactly [Typing Text](https://animata.design/docs/text/typing- ### Split text without GSAP Club—GSAP vs Motion vs a kit component? -**Kit component:** Animata [Split Text](https://animata.design/docs/text/split-text) for hover split drama you own (pointer-dependent; a11y pattern documented). **Motion:** use [Motion's Split Text example](https://motion.dev/examples/react-split-text) when you need custom letter timelines without GSAP Club. **GSAP SplitText:** still excellent for scrubbed, Club-level letter pipelines—reach for it when the creative brief needs that engine, not when a kit preset already covers the job. +**Kit component:** Animata [Split Text](https://animata.design/docs/text/split-text) for hover split drama you own (pointer-dependent; accessibility pattern documented). **Motion:** use [Motion's SplitText example](https://motion.dev/examples/react-split-text) when you need custom letter timelines without GSAP Club. **GSAP SplitText:** still excellent for scrubbed, Club-level letter pipelines—reach for it when the creative brief needs that engine, not when a kit preset already covers the job. ### How should I handle reduced motion? @@ -243,4 +243,4 @@ Honor `prefers-reduced-motion`. Prefer components that already wire fallbacks (G 4. [Browse all components](https://animata.design/components) — buttons, cards, scroll, text, and more. 5. Once published, read the comparison guide: [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata). -Ship one high-traffic headline first, verify reduced-motion and AT, then expand. Own the files—that is the point. +Ship one high-traffic headline first, verify reduced-motion and assistive tech, then expand. Own the files after install. From 365fdb7aa7bb747b27c8e14448a81a46598e5479 Mon Sep 17 00:00:00 2001 From: Sudha Shrestha Date: Mon, 14 Sep 2026 19:56:35 +0545 Subject: [PATCH 5/5] publish(docs): ship text-effects guide with SEO/AEO wiring Publish the guide, register it in docs nav, add ItemList + FAQ JSON-LD, surface both URLs in llms.txt, and note them in the September changelog. Co-authored-by: Cursor --- config/docs.ts | 5 + content/docs/changelog/2026-09.mdx | 10 +- content/docs/changelog/index.mdx | 2 +- .../guides/animated-react-text-effects.mdx | 14 +- lib/metadata.ts | 134 ++++++++++++++---- scripts/build-llms-txt.js | 6 + 6 files changed, 140 insertions(+), 31 deletions(-) diff --git a/config/docs.ts b/config/docs.ts index 1ace3bc3..c5f7700b 100644 --- a/config/docs.ts +++ b/config/docs.ts @@ -59,6 +59,11 @@ const sidebarNav: SidebarNavItem[] = [ href: "/docs/guides/animated-react-buttons", items: [], }, + { + title: "Animated React Text Effects", + href: "/docs/guides/animated-react-text-effects", + items: [], + }, ], }, { diff --git a/content/docs/changelog/2026-09.mdx b/content/docs/changelog/2026-09.mdx index 494fdd9b..b0e9f2bd 100644 --- a/content/docs/changelog/2026-09.mdx +++ b/content/docs/changelog/2026-09.mdx @@ -1,11 +1,13 @@ --- title: September 2026 -description: Homepage conversion fixes for GitHub stars and newsletter subscribe. +description: Homepage conversion fixes plus SEO guides comparing animated React kits and text effects. date: 2026-09-01 --- Tightened the homepage conversion path for GitHub stars and email subscribe: clearer asks, equal hero CTAs, an earlier newsletter block, a header star badge, and tracked subscribe/star events in PostHog. +Published an [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata) comparison and a [Top Animated React Text Effects (2026)](/docs/guides/animated-react-text-effects) guide for search and answer-engine discovery. + ## Site Rewrote star CTAs to lead with why (“Star to follow releases”), made the hero star control a full-size button on mobile, and replaced the icon-only header GitHub link with a visible Star · count pill. @@ -13,3 +15,9 @@ Rewrote star CTAs to lead with why (“Star to follow releases”), made the her Moved the featured newsletter up (after open source), added a “Just starred?” bridge to email, and made footer/exit-intent subscribe controls use a visible Subscribe button with risk-reversal copy. Made exit intent email-first and added mobile scroll-depth and time-on-page triggers. Hardened the stars ticker so it shows the real count on first paint instead of a `0,000+` flash. Added `newsletter_subscribe` and `github_star_click` PostHog events so conversion can be measured against home sessions. + +## Docs & blog + +Added a neutral surface-based comparison of Aceternity UI, Magic UI, and Animata (landing vs product UI, free tiers, Motion, accessibility, mixing with shadcn). + +Added a curated text-effects guide covering ten MIT presets with registry installs, Motion vs CSS guidance, accessibility notes, and ecosystem context. diff --git a/content/docs/changelog/index.mdx b/content/docs/changelog/index.mdx index a54b2f95..dc47a5b4 100644 --- a/content/docs/changelog/index.mdx +++ b/content/docs/changelog/index.mdx @@ -12,7 +12,7 @@ New components, bug fixes, and infrastructure changes, going back to the beta la ### [September 2026](/docs/changelog/2026-09) -Homepage conversion fixes for GitHub stars and newsletter subscribe — equal hero CTAs, earlier email opt-in, header Star pill, ticker first-paint fix, and PostHog conversion events. +Homepage conversion fixes for GitHub stars and newsletter subscribe — equal hero CTAs, earlier email opt-in, header Star pill, ticker first-paint fix, and PostHog conversion events. Published [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata) and [Top Animated React Text Effects](/docs/guides/animated-react-text-effects). ### [June 2026](/docs/changelog/2026-06) diff --git a/content/docs/guides/animated-react-text-effects.mdx b/content/docs/guides/animated-react-text-effects.mdx index ad1c5490..0f5923b3 100644 --- a/content/docs/guides/animated-react-text-effects.mdx +++ b/content/docs/guides/animated-react-text-effects.mdx @@ -2,10 +2,16 @@ title: "Top Animated React Text Effects (2026)" description: "Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded." seoTitle: "Top Animated React Text Effects (2026) — Copy-Paste Tailwind Components" -seoDescription: "Curated animated React text effects for Tailwind — typewriter, split, gradient, flip, and scroll reveals. Copy-paste or shadcn registry; MIT; a11y-minded." -date: 2026-09-05 +seoDescription: "Ten animated React text effects for Tailwind: typewriter, wave reveal, flip, gradient, split, scroll reveal, circular, glitch, gibberish, and shimmer. MIT copy-paste or shadcn registry." +date: 2026-09-14 +dateModified: 2026-09-14 toc: true -published: false +published: true +labels: + - Guide + - Text + - React + - Tailwind --- Start by picking one text preset, installing it via registry or paste, verifying reduced-motion behavior, then shipping. Rebuild SplitText in Motion or GSAP only when the brief needs a custom letter timeline. @@ -241,6 +247,6 @@ Honor `prefers-reduced-motion`. Prefer components that already wire fallbacks (G 2. [Setup](https://animata.design/docs/setup) — Tailwind, `cn`, Motion optional. 3. [Animated React buttons guide](https://animata.design/docs/guides/animated-react-buttons) — same copy-own pattern for CTAs. 4. [Browse all components](https://animata.design/components) — buttons, cards, scroll, text, and more. -5. Once published, read the comparison guide: [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata). +5. [Aceternity UI vs Magic UI vs Animata](/blog/aceternity-ui-vs-magic-ui-vs-animata) — when to use each kit by surface. Ship one high-traffic headline first, verify reduced-motion and assistive tech, then expand. Own the files after install. diff --git a/lib/metadata.ts b/lib/metadata.ts index 680fe0ca..c7d667ee 100644 --- a/lib/metadata.ts +++ b/lib/metadata.ts @@ -241,21 +241,36 @@ function buildBreadcrumbJsonLd(doc: PublishedDoc) { } function buildGuideItemListJsonLd(doc: PublishedDoc, description: string) { - if (doc.slugAsParams !== "guides/animated-react-buttons") { + const guideLists: Record> = { + "guides/animated-react-buttons": [ + { name: "AI Button", url: "/docs/button/ai-button" }, + { name: "Duolingo Button", url: "/docs/button/duolingo" }, + { name: "Ripple Button", url: "/docs/button/ripple-button" }, + { name: "Shining Button", url: "/docs/button/shining-button" }, + { name: "Swipe Button", url: "/docs/button/swipe-button" }, + { name: "Status Button", url: "/docs/button/status-button" }, + { name: "Animated Follow Button", url: "/docs/button/animated-follow-button" }, + { name: "Get Started Button", url: "/docs/button/get-started-button" }, + ], + "guides/animated-react-text-effects": [ + { name: "Typing Text", url: "/docs/text/typing-text" }, + { name: "Wave Reveal", url: "/docs/text/wave-reveal" }, + { name: "Text Flip", url: "/docs/text/text-flip" }, + { name: "Animated Gradient Text", url: "/docs/text/animated-gradient-text" }, + { name: "Split Text", url: "/docs/text/split-text" }, + { name: "Scroll Reveal", url: "/docs/text/scroll-reveal" }, + { name: "Circular Text", url: "/docs/text/circular-text" }, + { name: "Glitch Text", url: "/docs/text/glitch-text" }, + { name: "Gibberish Text", url: "/docs/text/gibberish-text" }, + { name: "Shimmer Sweep", url: "/docs/text/shimmer-sweep" }, + ], + }; + + const items = guideLists[doc.slugAsParams]; + if (!items) { return null; } - const items = [ - { name: "AI Button", url: "/docs/button/ai-button" }, - { name: "Duolingo Button", url: "/docs/button/duolingo" }, - { name: "Ripple Button", url: "/docs/button/ripple-button" }, - { name: "Shining Button", url: "/docs/button/shining-button" }, - { name: "Swipe Button", url: "/docs/button/swipe-button" }, - { name: "Status Button", url: "/docs/button/status-button" }, - { name: "Animated Follow Button", url: "/docs/button/animated-follow-button" }, - { name: "Get Started Button", url: "/docs/button/get-started-button" }, - ]; - return { "@context": "https://schema.org", "@type": "ItemList", @@ -351,10 +366,83 @@ export function buildBlogMetadata(blog: PublishedBlog): Metadata { description, path: blog.slug, type: "article", - keywords: [blog.title, ...(blog.labels ?? [])], + keywords: [ + blog.title, + ...(blog.labels ?? []), + "animated React components", + "Tailwind CSS", + ], }); } +function buildBlogAuthorJsonLd(blog: PublishedBlog) { + if (!blog.author || blog.author === "AnimataDesign") { + return { + "@type": "Organization", + name: BRAND_SUFFIX, + url: siteConfig.url, + }; + } + + return { + "@type": "Person", + name: blog.author, + url: `https://twitter.com/${blog.author}`, + }; +} + +function buildBlogFaqJsonLd(blog: PublishedBlog) { + if (blog.slugAsParams !== "aceternity-ui-vs-magic-ui-vs-animata") { + return null; + } + + const faqs = [ + { + question: "What is the difference between Aceternity UI, Magic UI, and Animata?", + answer: + "Aceternity UI is strongest for cinematic landing pages. Magic UI is strongest for polished marketing micro-interactions next to shadcn/ui. Animata is strongest for product UI polish you own under MIT, with accessibility and reduced-motion patterns included before paste.", + }, + { + question: "Is Animata a free open-source Aceternity alternative?", + answer: + "For product UI animated components you own, yes—Animata is free MIT open source. It is not a 1:1 substitute for Aceternity's cinematic landing catalog. Many teams use both.", + }, + { + question: "When should I use Aceternity UI, Magic UI, or Animata?", + answer: + "Use Aceternity for marketing heroes and high-impact landing sections. Use Magic for marketing micro-interactions beside shadcn. Use Animata for buttons, cards, tabs, scroll, and text inside the product.", + }, + { + question: "Is Animata free forever?", + answer: + "Yes. Animata's animated React components are free, open source, and MIT-licensed for the core library.", + }, + { + question: "Do I need Motion for Animata?", + answer: + "Not for everything. Motion is optionally required for some complex animations. Check each component's docs before assuming Motion is required.", + }, + { + question: "Magic UI vs Animata for app UI?", + answer: + "For in-app product chrome with ownership and accessibility defaults, prefer Animata. For marketing sections and Design Engineer micro-interactions beside shadcn, prefer Magic. They can coexist.", + }, + ]; + + return { + "@context": "https://schema.org", + "@type": "FAQPage", + mainEntity: faqs.map((faq) => ({ + "@type": "Question", + name: faq.question, + acceptedAnswer: { + "@type": "Answer", + text: faq.answer, + }, + })), + }; +} + export function buildBlogJsonLd(blog: PublishedBlog, description: string) { const headline = blog.seoTitle ?? blog.title; @@ -369,17 +457,7 @@ export function buildBlogJsonLd(blog: PublishedBlog, description: string) { datePublished: blog.date, dateModified: blog.dateModified ?? blog.date, image: siteConfig.ogImage, - author: blog.author - ? { - "@type": "Person", - name: blog.author, - url: `https://twitter.com/${blog.author}`, - } - : { - "@type": "Organization", - name: BRAND_SUFFIX, - url: siteConfig.url, - }, + author: buildBlogAuthorJsonLd(blog), publisher: { "@type": "Organization", name: BRAND_SUFFIX, @@ -389,6 +467,11 @@ export function buildBlogJsonLd(blog: PublishedBlog, description: string) { url: siteConfig.ogImage, }, }, + isAccessibleForFree: true, + mainEntityOfPage: { + "@type": "WebPage", + "@id": absoluteUrl(blog.slug), + }, }; const breadcrumb = { @@ -401,7 +484,8 @@ export function buildBlogJsonLd(blog: PublishedBlog, description: string) { ], }; - return [article, breadcrumb]; + const faq = buildBlogFaqJsonLd(blog); + return faq ? [article, breadcrumb, faq] : [article, breadcrumb]; } export const homePageMetadata = createPageMetadata({ diff --git a/scripts/build-llms-txt.js b/scripts/build-llms-txt.js index 8f7b6de9..33563ee2 100644 --- a/scripts/build-llms-txt.js +++ b/scripts/build-llms-txt.js @@ -74,6 +74,12 @@ function buildIndex(byCategory) { "", `Install any component with: \`pnpm dlx shadcn@latest add ${SITE_URL}/r/{category}/{component}.json\``, "", + "## Guides & comparisons", + "", + `- [Top Animated React Buttons (2026)](${SITE_URL}/docs/guides/animated-react-buttons)`, + `- [Top Animated React Text Effects (2026)](${SITE_URL}/docs/guides/animated-react-text-effects)`, + `- [Aceternity UI vs Magic UI vs Animata](${SITE_URL}/blog/aceternity-ui-vs-magic-ui-vs-animata)`, + "", ]; for (const { slug, title } of CATEGORY_ORDER) {