From bfef08fba7d257d4e461d8883ca9a62d237ae07b Mon Sep 17 00:00:00 2001
From: Hari Lamichhane <onwithhari@gmail.com>
Date: Fri, 24 Apr 2026 16:39:46 +0545
Subject: [PATCH 1/5] sync release (#436)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Sanjana Podduturi <59354376+P-Sanjana@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

From 1f5853dc7c741fa0f2ddff95e8e7ee6ae2b7b7e6 Mon Sep 17 00:00:00 2001
From: Hari Lamichhane <onwithhari@gmail.com>
Date: Fri, 24 Apr 2026 17:00:44 +0545
Subject: [PATCH 2/5] chore(build): update scripts (#438)

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 170631a3..563c35a4 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "velite --watch & next dev & storybook dev -p 6006 --no-open & wait",
-    "prebuild": "velite && node ./scripts/build-registry.js && node ./scripts/build-docs-markdown.js && node ./scripts/build-llms-txt.js && storybook build -o public/preview",
-    "build": "next build --webpack",
+    "build": "velite && node ./scripts/build-registry.js && node ./scripts/build-docs-markdown.js && node ./scripts/build-llms-txt.js && storybook build -o public/preview && next build --webpack",
     "start": "next start",
     "lint": "biome check .",
     "lint:fix": "biome check --fix .",

From fb1c3d10fa0f49a5d1e095de96e4846cfc744b2d Mon Sep 17 00:00:00 2001
From: Hari Lamichhane <onwithhari@gmail.com>
Date: Fri, 24 Apr 2026 21:25:18 +0545
Subject: [PATCH 3/5] chore: add announcement and update change log (#439)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                                     | 102 +++++++++++++++
 .../container/announcement-ribbon.stories.tsx |  82 +++++++++++++
 animata/container/announcement-ribbon.tsx     | 116 ++++++++++++++++++
 app/(main)/_landing/open-source-section.tsx   |   2 +-
 app/(main)/_landing/stats-bento.tsx           |   2 +-
 app/(main)/blog/[[...slug]]/page.tsx          |   4 +-
 app/(main)/blog/layout.tsx                    |   2 +-
 app/(main)/docs/[[...slug]]/nav-menu.tsx      |  43 +++++--
 app/(main)/docs/[[...slug]]/page.tsx          |   6 +-
 app/(main)/docs/layout.tsx                    |   2 +-
 app/(main)/layout.tsx                         |   2 +
 app/(main)/page.tsx                           |   2 +-
 components/command-menu.tsx                   |  46 ++++---
 components/mobile-nav.tsx                     |  44 +++++--
 components/site-header.tsx                    |   2 +-
 config/docs.ts                                |  22 +++-
 content/docs/changelog.mdx                    |  17 ---
 content/docs/changelog/2024-06.mdx            |  37 ++++++
 content/docs/changelog/2024-07.mdx            |  47 +++++++
 content/docs/changelog/2024-08.mdx            |  21 ++++
 content/docs/changelog/2024-09.mdx            |  15 +++
 content/docs/changelog/2024-10.mdx            |  73 +++++++++++
 content/docs/changelog/2025-03.mdx            |  11 ++
 content/docs/changelog/2025-04.mdx            |  11 ++
 content/docs/changelog/2026-01.mdx            |  11 ++
 content/docs/changelog/2026-03.mdx            |  17 +++
 content/docs/changelog/2026-04.mdx            |  25 ++++
 content/docs/changelog/index.mdx              |  34 +++++
 .../docs/container/announcement-ribbon.mdx    |  37 ++++++
 29 files changed, 766 insertions(+), 69 deletions(-)
 create mode 100644 CLAUDE.md
 create mode 100644 animata/container/announcement-ribbon.stories.tsx
 create mode 100644 animata/container/announcement-ribbon.tsx
 delete mode 100644 content/docs/changelog.mdx
 create mode 100644 content/docs/changelog/2024-06.mdx
 create mode 100644 content/docs/changelog/2024-07.mdx
 create mode 100644 content/docs/changelog/2024-08.mdx
 create mode 100644 content/docs/changelog/2024-09.mdx
 create mode 100644 content/docs/changelog/2024-10.mdx
 create mode 100644 content/docs/changelog/2025-03.mdx
 create mode 100644 content/docs/changelog/2025-04.mdx
 create mode 100644 content/docs/changelog/2026-01.mdx
 create mode 100644 content/docs/changelog/2026-03.mdx
 create mode 100644 content/docs/changelog/2026-04.mdx
 create mode 100644 content/docs/changelog/index.mdx
 create mode 100644 content/docs/container/announcement-ribbon.mdx

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..117853ba
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,102 @@
+# Animata — Claude Code Instructions
+
+## Project overview
+
+Animata is a free, open-source library of animated React components built with Next.js 16, Tailwind CSS v4, and TypeScript. Components live in `animata/` and are documented via MDX in `content/docs/`. The site itself is the primary showcase — the landing page at `app/(main)/page.tsx` and the docs at `app/(main)/docs/`.
+
+## Key conventions
+
+- Components go in `animata/<category>/<name>.tsx` with a matching `<name>.stories.tsx`
+- Use `cn()` from `@/lib/utils` for class merging — never raw string concatenation
+- CSS animations belong in inline `<style>` blocks inside the component (see `marquee.tsx`)
+- No CSS modules, no styled-components — Tailwind only
+- Fonts: `--font-display` = Young Serif (headings/display), `--font-sans` = IBM Plex Sans (body), `--font-mono` = Lilex
+- Brand yellow: `#ffcc00` (from logo) — use for highlights and badges
+- shadcn registry URL format: `https://animata.design/r/{category}/{name}.json` — always use this in docs/changelog, never bare `npx shadcn add component-name`
+- Theme accent: `hsl(var(--accent))` = purple/violet
+- All new components must be theme-responsive (light + dark)
+
+## Changelog rule — ALWAYS update this
+
+The changelog lives at `content/docs/changelog/` — one MDX file per month plus an index.
+
+### Structure
+
+```text
+content/docs/changelog/
+  index.mdx        # overview page — shows 2 most recent months + table linking all others
+  2026-04.mdx      # April 2026 (newest first)
+  2026-03.mdx
+  ...
+```
+
+### When adding a new month
+
+1. Create `content/docs/changelog/YYYY-MM.mdx` with this frontmatter:
+   ```yaml
+   ---
+   title: Month YYYY
+   description: One-line summary of the main themes.
+   date: YYYY-MM-DD
+   ---
+   ```
+2. Write the content as prose, not bullet lists. Each new component gets a short paragraph — what it is, when you'd use it, anything notable about the implementation.
+3. Add the new month to `config/docs.ts` under the Changelog items array (newest first).
+4. Update `content/docs/changelog/index.mdx`: promote the new month to "Recent releases" and move the oldest of the current two into the table.
+
+### When updating an existing month
+
+Add to the relevant `YYYY-MM.mdx` file. No need to touch the index unless the summary line there is now misleading.
+
+### What warrants a changelog entry
+
+| Action | Update changelog? |
+|---|---|
+| New component | Yes — new section in the current month file |
+| Landing/docs UI update | Yes — brief paragraph |
+| Major dependency upgrade | Yes — explain what changed and why it matters |
+| User-visible bug fix | Yes — one sentence is fine |
+| Dependency patch bumps | No |
+| CI / GitHub Actions only | No |
+| Typo fix in docs | No |
+
+### Writing style
+
+- Past tense. "Added X" not "We're excited to announce X."
+- No emojis, no prefix symbols (no ✨ 🛠 🐛).
+- Each component gets a description of what it does and when you'd use it — not just its name.
+- If a fix has a root cause worth knowing, say so briefly.
+
+## File map (quick reference)
+
+```text
+animata/               # Component source (copy-paste friendly)
+  container/           # Layout wrappers (marquee, dock, ribbon…)
+  text/                # Text animation effects
+  button/              # Button variants
+  card/                # Card components
+  widget/              # Complex interactive widgets
+app/(main)/
+  page.tsx             # Landing page
+  _landing/            # Landing page sections
+  docs/                # Docs app shell
+components/
+  site-header.tsx      # Top nav
+  icons.tsx            # SVG icon set (logo is here — brand yellow #ffcc00)
+content/docs/
+  changelog/
+    index.mdx          # overview + table of all months — ← KEEP THIS UPDATED
+    YYYY-MM.mdx        # one file per month (e.g. 2026-04.mdx)
+  contributing/        # Contributor guides
+config/
+  docs.ts              # Sidebar nav config — register new component categories here
+styles/globals.css     # Tailwind v4 theme tokens
+```
+
+## Running locally
+
+```bash
+yarn dev        # Next.js dev server
+yarn storybook  # Component workbench
+yarn build      # Production build
+```
diff --git a/animata/container/announcement-ribbon.stories.tsx b/animata/container/announcement-ribbon.stories.tsx
new file mode 100644
index 00000000..ced57cab
--- /dev/null
+++ b/animata/container/announcement-ribbon.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Package, Sparkles, Zap } from "lucide-react";
+import AnnouncementRibbon from "@/animata/container/announcement-ribbon";
+
+const meta = {
+  title: "Container/Announcement Ribbon",
+  component: AnnouncementRibbon,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    badge: { control: "text" },
+    ctaText: { control: "text" },
+    repeat: { control: { type: "number", min: 2, max: 8 } },
+    pauseOnHover: { control: "boolean" },
+  },
+} satisfies Meta<typeof AnnouncementRibbon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    pauseOnHover: true,
+  },
+};
+
+export const NoControls: Story = {
+  args: {
+    badge: null,
+    ctaText: null,
+    pauseOnHover: true,
+  },
+};
+
+export const CustomMessage: Story = {
+  args: {
+    badge: "V2",
+    ctaText: "Read the docs",
+    message: (
+      <span className="flex items-center gap-2 whitespace-nowrap">
+        <Zap className="h-3 w-3 shrink-0 text-sky-400" aria-hidden />
+        <span className="text-white/75">
+          Animata <strong className="font-semibold text-sky-300">2.0</strong> is here — faster
+          animations, smaller bundles, zero config
+        </span>
+      </span>
+    ),
+    pauseOnHover: true,
+  },
+};
+
+export const RegistryRelease: Story = {
+  name: "Registry Release (Full Page Preview)",
+  args: {},
+  render: () => (
+    <div className="flex min-h-screen flex-col bg-background">
+      <AnnouncementRibbon />
+      <div className="flex flex-1 flex-col items-center justify-center gap-6 px-4 text-center">
+        <div className="flex items-center gap-2 rounded-full border border-amber-300/40 bg-amber-100/60 px-3 py-1 dark:border-amber-700/30 dark:bg-amber-950/30">
+          <Package className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
+          <span className="text-xs font-medium text-amber-700 dark:text-amber-400">
+            shadcn registry
+          </span>
+        </div>
+        <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-6xl">
+          Beautiful UI components
+          <br />
+          <span className="text-muted-foreground">ready to install</span>
+        </h1>
+        <p className="max-w-md text-sm text-muted-foreground">
+          Copy, paste, and own every component — no black boxes, no abstractions you can't control.
+        </p>
+        <div className="flex items-center gap-1.5 rounded-lg border border-border bg-muted px-4 py-2 font-mono text-sm text-muted-foreground">
+          <Sparkles className="h-3.5 w-3.5 text-amber-500" />
+          npx shadcn add
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/animata/container/announcement-ribbon.tsx b/animata/container/announcement-ribbon.tsx
new file mode 100644
index 00000000..1869a02b
--- /dev/null
+++ b/animata/container/announcement-ribbon.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import Link from "next/link";
+
+import Marquee from "@/animata/container/marquee";
+import { cn } from "@/lib/utils";
+
+interface AnnouncementRibbonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content to scroll in the ribbon. Accepts any React node.
+   * Defaults to the shadcn registry announcement.
+   */
+  message?: React.ReactNode;
+
+  /**
+   * Label shown in the static left badge. Pass `null` to hide it.
+   * @default "NEW"
+   */
+  badge?: string | null;
+
+  /**
+   * Text for the right-side CTA link. Pass `null` to hide it.
+   * @default "Learn more"
+   */
+  ctaText?: string | null;
+
+  /**
+   * URL for the CTA link.
+   * @default "/docs/changelog/2026-04"
+   */
+  ctaHref?: string;
+
+  /**
+   * Number of times the message is repeated to fill the track.
+   * @default 5
+   */
+  repeat?: number;
+
+  /**
+   * Pause scrolling when the user hovers over the ribbon.
+   * @default true
+   */
+  pauseOnHover?: boolean;
+}
+
+function DefaultMessage() {
+  return (
+    <span>
+      <span className="whitespace-nowrap px-12 font-(family-name:--font-display) font-light text-neutral-900">
+        shadcn registry is live
+      </span>
+      <span className="text-neutral-900">&middot;</span>
+    </span>
+  );
+}
+
+export default function AnnouncementRibbon({
+  message,
+  badge = "NEW",
+  ctaText = "Learn more",
+  ctaHref = "/docs/changelog/2026-04",
+  repeat = 5,
+  pauseOnHover = true,
+  className,
+  ...props
+}: AnnouncementRibbonProps) {
+  const content = message ?? <DefaultMessage />;
+
+  return (
+    <div
+      className={cn(
+        "relative flex h-11 w-full items-center overflow-hidden",
+        "bg-[#ffcc00]",
+        "border-b border-black/8",
+        className,
+      )}
+      {...props}
+    >
+      {/* Badge */}
+      {badge && (
+        <div className="relative z-30 flex bg-[#ffcc00] shrink-0 items-center self-stretch border-r border-black/8 px-4">
+          <span className="rounded-full bg-black/10 px-2.5 py-px font-mono text-[10px] font-semibold uppercase tracking-widest text-neutral-900">
+            {badge}
+          </span>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-hidden">
+        <Marquee repeat={repeat} pauseOnHover={pauseOnHover} applyMask={false}>
+          {content}
+        </Marquee>
+      </div>
+
+      {/* CTA */}
+      {ctaText && ctaHref && (
+        <Link
+          href={ctaHref}
+          className="group/cta relative bg-[#ffcc00] z-30 flex shrink-0 items-center gap-1.5 self-stretch border-l border-black/8 px-4 font-mono text-[10px] font-semibold uppercase tracking-widest text-neutral-800/60 transition-colors hover:text-neutral-900"
+        >
+          {ctaText}
+          <svg
+            className="h-3 w-3 transition-transform group-hover/cta:translate-x-0.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden
+            role="presentation"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/app/(main)/_landing/open-source-section.tsx b/app/(main)/_landing/open-source-section.tsx
index 257ee8a0..0012ff23 100644
--- a/app/(main)/_landing/open-source-section.tsx
+++ b/app/(main)/_landing/open-source-section.tsx
@@ -123,7 +123,7 @@ export default function OpenSourceSection() {
 
       {/* Stats */}
       <div className="mx-auto grid max-w-3xl grid-cols-2 gap-8 px-6 py-10 sm:grid-cols-4 sm:py-12">
-        <Stat value={2392} label="Stars" delay={0} />
+        <Stat value={2506} label="Stars" delay={0} />
         <Stat value={196} label="Forks" delay={100} />
         <Stat value={44} label="Contributors" delay={200} />
         <Stat value={194} label="Components" delay={300} />
diff --git a/app/(main)/_landing/stats-bento.tsx b/app/(main)/_landing/stats-bento.tsx
index 2b2508f4..b85aba1d 100644
--- a/app/(main)/_landing/stats-bento.tsx
+++ b/app/(main)/_landing/stats-bento.tsx
@@ -164,7 +164,7 @@ export default function StatsBento() {
               <strong className="font-(family-name:--font-mono) text-2xl font-bold tabular-nums text-foreground sm:text-3xl lg:text-4xl">
                 <RemountOnMouseIn>
                   <Ticker
-                    value="2,392+"
+                    value="2,506+"
                     className="font-(family-name:--font-mono) font-bold tabular-nums"
                   />
                 </RemountOnMouseIn>
diff --git a/app/(main)/blog/[[...slug]]/page.tsx b/app/(main)/blog/[[...slug]]/page.tsx
index fd638d31..d7f0e9b6 100644
--- a/app/(main)/blog/[[...slug]]/page.tsx
+++ b/app/(main)/blog/[[...slug]]/page.tsx
@@ -158,9 +158,9 @@ export default async function BlogPage({ params }: BlogPageProps) {
       </div>
       {blog.toc && (
         <div className="hidden text-sm xl:block">
-          <div className="sticky top-16 -mt-10 pt-4">
+          <div className="sticky top-[6.25rem] -mt-10 pt-4">
             <ScrollArea className="pb-10">
-              <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
+              <div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
                 <DashboardTableOfContents toc={toc} />
               </div>
             </ScrollArea>
diff --git a/app/(main)/blog/layout.tsx b/app/(main)/blog/layout.tsx
index 40a34b34..f2b44bb1 100644
--- a/app/(main)/blog/layout.tsx
+++ b/app/(main)/blog/layout.tsx
@@ -10,7 +10,7 @@ export default function BlogLayout({ children }: BlogLayoutProps) {
   return (
     <div className="border-b border-border">
       <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-4 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-6">
-        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+        <aside className="fixed top-[6.25rem] z-30 -ml-2 hidden h-[calc(100vh-6.25rem)] w-full shrink-0 md:sticky md:block">
           <ScrollArea className="h-full py-6 pr-6 lg:py-8">
             <DocsSidebarNav items={blogSidebarNav} />
           </ScrollArea>
diff --git a/app/(main)/docs/[[...slug]]/nav-menu.tsx b/app/(main)/docs/[[...slug]]/nav-menu.tsx
index 2de3be77..6c69f74c 100644
--- a/app/(main)/docs/[[...slug]]/nav-menu.tsx
+++ b/app/(main)/docs/[[...slug]]/nav-menu.tsx
@@ -10,6 +10,7 @@ import {
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -44,24 +45,44 @@ export default function NavMenu({
           {sideBarNavItems.map((item, index) => (
             <SelectGroup key={index}>
               <SelectLabel className="font-medium">{item.title}</SelectLabel>
-              {item?.items?.length &&
-                item.items.map((item) => (
-                  <SelectItem key={item.href} value={item.href ?? item.title}>
-                    {!item.disabled &&
-                      (item.href ? (
-                        <Link href={item.href} className="text-muted-foreground">
-                          {item.title}
-                          {item.label && (
+              {item?.items?.map((subItem) => {
+                if (subItem.items?.length) {
+                  return (
+                    <SelectGroup key={subItem.href}>
+                      <SelectSeparator />
+                      <SelectLabel className="font-medium">{subItem.title}</SelectLabel>
+                      {subItem.items.map((child) => (
+                        <SelectItem key={child.href} value={child.href ?? child.title}>
+                          {child.href ? (
+                            <Link href={child.href} className="text-muted-foreground">
+                              {child.title}
+                            </Link>
+                          ) : (
+                            child.title
+                          )}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  );
+                }
+                return (
+                  <SelectItem key={subItem.href} value={subItem.href ?? subItem.title}>
+                    {!subItem.disabled &&
+                      (subItem.href ? (
+                        <Link href={subItem.href} className="text-muted-foreground">
+                          {subItem.title}
+                          {subItem.label && (
                             <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                              {item.label}
+                              {subItem.label}
                             </span>
                           )}
                         </Link>
                       ) : (
-                        item.title
+                        subItem.title
                       ))}
                   </SelectItem>
-                ))}
+                );
+              })}
             </SelectGroup>
           ))}
         </SelectContent>
diff --git a/app/(main)/docs/[[...slug]]/page.tsx b/app/(main)/docs/[[...slug]]/page.tsx
index b6c31e98..53d2370f 100644
--- a/app/(main)/docs/[[...slug]]/page.tsx
+++ b/app/(main)/docs/[[...slug]]/page.tsx
@@ -155,7 +155,7 @@ export default async function DocPage({ params }: DocPageProps) {
 
           <div className="my-3 text-right">
             <Link
-              href={`https://github.com/codse/animata/edit/main/content/docs/${doc.slugAsParams}.mdx`}
+              href={`https://github.com/codse/animata/edit/main/content/${doc.path}.mdx`}
               target="_blank"
               rel="noreferrer"
               className="text-sm text-secondary-foreground underline"
@@ -168,9 +168,9 @@ export default async function DocPage({ params }: DocPageProps) {
       </div>
       {doc.toc && (
         <div className="hidden text-sm xl:block">
-          <div className="sticky top-16 -mt-10 pt-4">
+          <div className="sticky top-[6.25rem] -mt-10 pt-4">
             <ScrollArea className="pb-10">
-              <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
+              <div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
                 <DashboardTableOfContents toc={toc} />
               </div>
             </ScrollArea>
diff --git a/app/(main)/docs/layout.tsx b/app/(main)/docs/layout.tsx
index a1dc5cf1..b9cc55d1 100644
--- a/app/(main)/docs/layout.tsx
+++ b/app/(main)/docs/layout.tsx
@@ -10,7 +10,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
     <div className="border-b border-border">
       <div className="mx-auto w-full max-w-6xl flex-1 items-start px-4 sm:px-6 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-4 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-6">
-        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+        <aside className="fixed top-[6.25rem] z-30 -ml-2 hidden h-[calc(100vh-6.25rem)] w-full shrink-0 md:sticky md:block">
           <ScrollArea className="h-full py-6 pr-6 lg:py-8">
             <DocsSidebarNav items={docsConfig.sidebarNav} />
           </ScrollArea>
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index b7fdb6c1..91e4e396 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -1,3 +1,4 @@
+import AnnouncementRibbon from "@/animata/container/announcement-ribbon";
 import { CSPostHogProvider } from "@/app/(main)/providers";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
@@ -12,6 +13,7 @@ export default function MainLayout({ children }: MainLayoutProps) {
     <CSPostHogProvider>
       <div vaul-drawer-wrapper="">
         <div className="relative flex min-h-screen flex-col bg-background">
+          <AnnouncementRibbon repeat={12} className="sticky top-0 z-60" />
           <SiteHeader />
           <main className="flex-1">{children}</main>
           <SiteFooter />
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 8da25466..0c5e2043 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -76,7 +76,7 @@ function Hero() {
 
         <p className="mt-5 text-center text-[13px] text-muted-foreground">
           <span className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
-          2,300+ stars · Trusted by shipping teams
+          2,506+ stars · Trusted by shipping teams
         </p>
 
         <div className="mt-8 flex justify-center">
diff --git a/components/command-menu.tsx b/components/command-menu.tsx
index 28c09dcf..c75a2ef9 100644
--- a/components/command-menu.tsx
+++ b/components/command-menu.tsx
@@ -86,20 +86,38 @@ export function CommandMenu({ ...props }: ComponentPropsWithoutRef<typeof Comman
           </CommandGroup>
           {docsConfig.sidebarNav.map((group) => (
             <CommandGroup key={group.title} heading={group.title}>
-              {group.items?.map((navItem) => (
-                <CommandItem
-                  key={navItem.href}
-                  value={navItem.title}
-                  onSelect={() => {
-                    runCommand(() => router.push(navItem.href as string));
-                  }}
-                >
-                  <div className="mr-2 flex h-4 w-4 items-center justify-center">
-                    <CircleIcon className="h-3 w-3" />
-                  </div>
-                  {navItem.title}
-                </CommandItem>
-              ))}
+              {group.items?.flatMap((navItem) => {
+                if (navItem.items?.length) {
+                  return navItem.items.map((child) => (
+                    <CommandItem
+                      key={child.href}
+                      value={`${navItem.title} ${child.title}`}
+                      onSelect={() => {
+                        runCommand(() => router.push(child.href as string));
+                      }}
+                    >
+                      <div className="mr-2 flex h-4 w-4 items-center justify-center">
+                        <CircleIcon className="h-3 w-3" />
+                      </div>
+                      {child.title}
+                    </CommandItem>
+                  ));
+                }
+                return [
+                  <CommandItem
+                    key={navItem.href}
+                    value={navItem.title}
+                    onSelect={() => {
+                      runCommand(() => router.push(navItem.href as string));
+                    }}
+                  >
+                    <div className="mr-2 flex h-4 w-4 items-center justify-center">
+                      <CircleIcon className="h-3 w-3" />
+                    </div>
+                    {navItem.title}
+                  </CommandItem>,
+                ];
+              })}
             </CommandGroup>
           ))}
           <CommandSeparator />
diff --git a/components/mobile-nav.tsx b/components/mobile-nav.tsx
index a8f0ea95..1b590ff4 100644
--- a/components/mobile-nav.tsx
+++ b/components/mobile-nav.tsx
@@ -74,28 +74,50 @@ export function MobileNav() {
             {docsConfig.sidebarNav.map((item, index) => (
               <div key={index} className="flex flex-col space-y-3 pt-6">
                 <h4 className="font-medium">{item.title}</h4>
-                {item?.items?.length &&
-                  item.items.map((item) => (
-                    <React.Fragment key={item.href}>
-                      {!item.disabled &&
-                        (item.href ? (
+                {item?.items?.map((subItem) => {
+                  if (subItem.items?.length) {
+                    return (
+                      <React.Fragment key={subItem.href ?? subItem.title}>
+                        <span className="text-xs font-medium text-muted-foreground/60">
+                          {subItem.title}
+                        </span>
+                        {subItem.items.map((child) =>
+                          !child.disabled && child.href ? (
+                            <MobileLink
+                              key={child.href}
+                              href={child.href}
+                              onOpenChange={setOpen}
+                              className="pl-3 text-muted-foreground"
+                            >
+                              {child.title}
+                            </MobileLink>
+                          ) : null,
+                        )}
+                      </React.Fragment>
+                    );
+                  }
+                  return (
+                    <React.Fragment key={subItem.href}>
+                      {!subItem.disabled &&
+                        (subItem.href ? (
                           <MobileLink
-                            href={item.href}
+                            href={subItem.href}
                             onOpenChange={setOpen}
                             className="text-muted-foreground"
                           >
-                            {item.title}
-                            {item.label && (
+                            {subItem.title}
+                            {subItem.label && (
                               <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                                {item.label}
+                                {subItem.label}
                               </span>
                             )}
                           </MobileLink>
                         ) : (
-                          item.title
+                          subItem.title
                         ))}
                     </React.Fragment>
-                  ))}
+                  );
+                })}
               </div>
             ))}
           </div>
diff --git a/components/site-header.tsx b/components/site-header.tsx
index bfc0be24..a1c23da3 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -35,7 +35,7 @@ export function SiteHeader() {
 
       <header
         className={cn(
-          "sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-lg backdrop-saturate-150 transition-[background-color,border-color] duration-300",
+          "sticky top-11 z-50 w-full border-b bg-background/80 backdrop-blur-lg backdrop-saturate-150 transition-[background-color,border-color] duration-300",
           scrolled ? "border-border/50" : "border-transparent",
           isIndexPage && !scrolled && "bg-transparent",
         )}
diff --git a/config/docs.ts b/config/docs.ts
index efb6a60c..9a4b879c 100644
--- a/config/docs.ts
+++ b/config/docs.ts
@@ -41,7 +41,19 @@ const sidebarNav: SidebarNavItem[] = [
       {
         title: "Changelog",
         href: "/docs/changelog",
-        items: [],
+        items: [
+          { title: "Overview", href: "/docs/changelog", items: [] },
+          { title: "April 2026", href: "/docs/changelog/2026-04", items: [] },
+          { title: "March 2026", href: "/docs/changelog/2026-03", items: [] },
+          { title: "January 2026", href: "/docs/changelog/2026-01", items: [] },
+          { title: "April 2025", href: "/docs/changelog/2025-04", items: [] },
+          { title: "March 2025", href: "/docs/changelog/2025-03", items: [] },
+          { title: "October 2024", href: "/docs/changelog/2024-10", items: [] },
+          { title: "September 2024", href: "/docs/changelog/2024-09", items: [] },
+          { title: "August 2024", href: "/docs/changelog/2024-08", items: [] },
+          { title: "July 2024", href: "/docs/changelog/2024-07", items: [] },
+          { title: "June 2024", href: "/docs/changelog/2024-06", items: [] },
+        ],
       },
     ],
   },
@@ -211,10 +223,6 @@ const sidebarNav: SidebarNavItem[] = [
 
 export const docsConfig: DocsConfig = {
   mainNav: [
-    {
-      title: "Docs",
-      href: "/docs",
-    },
     {
       title: "Components",
       href: sidebarNav[2].items?.[0]?.href ?? sidebarNav[2]?.href,
@@ -223,6 +231,10 @@ export const docsConfig: DocsConfig = {
       title: "Blog",
       href: "/blog",
     },
+    {
+      title: "Changelog",
+      href: "/docs/changelog",
+    },
   ],
   sidebarNav,
 };
diff --git a/content/docs/changelog.mdx b/content/docs/changelog.mdx
deleted file mode 100644
index 2b0b35d7..00000000
--- a/content/docs/changelog.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Changelog
-date: 2024-07-08
-description: Project updates and changes
----
-
-## June 28, 2024 - Beta Launch 🚀
-
-We are excited to announce the beta launch of Animata. Animata is a collection of components that you can use in your project.
-
-It serves as both inspiration as well as a starting point for your project. You can use the components as they are or customize them to fit your project. Or simply study them to learn how they were created. If you are feeling adventurous, you can even [contribute](/docs/contributing) your own components to the collection.
-
-We are still in the early stages of development, so we are looking for feedback from the community. If you have any suggestions or feedback you can let us know by [email](mailto:animata@codse.com?subject=Animata+Feedback) or by [opening an issue](https://github.com/codse/animata/issues).
-
-We hope you enjoy using Animata as much as we enjoyed creating it. Thank you for your support!
-
-Happy coding! 🚀
diff --git a/content/docs/changelog/2024-06.mdx b/content/docs/changelog/2024-06.mdx
new file mode 100644
index 00000000..d599d0ca
--- /dev/null
+++ b/content/docs/changelog/2024-06.mdx
@@ -0,0 +1,37 @@
+---
+title: June 2024
+description: Beta launch with 16 founding components.
+date: 2024-06-28
+---
+
+Animata launched in public beta on June 28, 2024. The idea was simple: a collection of animated React components that you copy directly into your project. No package to install, no abstraction layer you can't see into. Just code you own from the moment you paste it.
+
+## Founding components
+
+[**`Marquee`**](/docs/container/marquee) is the horizontal and vertical infinite scroll component. It handles the seamless loop by repeating content and uses a CSS animation on the compositor thread. A gradient mask fades the edges. This was the first component in the library and established the pattern that most others follow — CSS-first, no JavaScript animation where CSS is sufficient.
+
+[**`CyclingText`**](/docs/text/cycle-text) rotates through a list of words in place, animating between them with a flip or fade. Commonly used in hero sections to cycle through a product's key benefits.
+
+[**`TextBorderAnimation`**](/docs/text/text-border-animation) draws an animated border around text using an SVG path that traces the outline of the letters on hover or loop.
+
+[**`MenuAnimation`**](/docs/list/menu-animation) is a navigation menu with enter and exit transitions on the list items. Items stagger in on open and stagger out on close.
+
+[**`FlippingText`**](/docs/text/text-flip) flips between two strings with a 3D flip on the Y axis. Useful anywhere a value updates and you want the change to feel intentional rather than instant.
+
+[**`CardSpread`**](/docs/card/card-spread) shows a stack of cards that fan out on hover, revealing the cards behind the top one.
+
+[**`EightItemsBentoGrid`**](/docs/bento-grid/eight) is a responsive asymmetric grid layout for eight cells.
+
+[**`ThreeItemBentoGrid`**](/docs/bento-grid/three) is the smaller variant — one large cell and two smaller ones.
+
+[**`AvatarList`**](/docs/list/avatar-list) stacks avatar images with a small overlap, showing up to a configurable limit with a `+N` overflow indicator.
+
+[**`OrbitingList`**](/docs/list/orbiting-items) places items around a circular path centered on a fixed element.
+
+[**`SwapTextCard`**](/docs/card/swap-text-card) shows a card where a line of text swaps to a different value on hover using a vertical slide animation.
+
+[**`DeliveryStatusCard`**](/docs/widget/delivery-card) shows a package delivery progress tracker with a step indicator, estimated delivery date, and current status label.
+
+[**`SecurityAlertWidget`**](/docs/widget/security-alert) is a notification card for security events — icon, severity, title, and a message body. The border pulses on a loop to indicate an active alert.
+
+[**`ExpandableCarousel`**](/docs/carousel/expandable) is a carousel where the focused item expands to a larger size and the surrounding items compress proportionally.
diff --git a/content/docs/changelog/2024-07.mdx b/content/docs/changelog/2024-07.mdx
new file mode 100644
index 00000000..02aa62b2
--- /dev/null
+++ b/content/docs/changelog/2024-07.mdx
@@ -0,0 +1,47 @@
+---
+title: July 2024
+description: 16 new components including interactive cursor effects, SVG animations, and new buttons.
+date: 2024-07-28
+---
+
+A broad expansion across several categories. The interactive components this month lean into cursor-driven effects — things that only make sense on pointer devices and degrade gracefully on touch.
+
+## Interactive and cursor effects
+
+[**`InteractiveGrid`**](/docs/background/interactive-grid) renders a grid of cells that scale or highlight based on cursor proximity. Each cell calculates its distance from the pointer and applies a transform proportional to that distance.
+
+[**`CursorTracker`**](/docs/container/cursor-tracker) places a child element at the pointer position, lerping toward the target so movement is smooth rather than locked pixel-for-pixel to the cursor.
+
+[**`ImageTrail`**](/docs/image/trailing-image) spawns copies of an image at the cursor position as it moves, fading each copy out after a short delay. The trail length, fade duration, and source image are configurable.
+
+[**`AnimatedBeam`**](/docs/background/animated-beam) draws an SVG line between two DOM elements, with an animated gradient that moves along the path. It uses `ResizeObserver` to keep the endpoints accurate as layout changes.
+
+[**`AnimatedBorderTrail`**](/docs/container/animated-border-trail) wraps any element in a border where a glowing point traces the perimeter continuously.
+
+## Display and layout
+
+[**`LedBoard`**](/docs/card/led-board) scrolls a string of characters across a grid of circular dots styled to look like a physical LED matrix. Speed and dot color are configurable.
+
+[**`ProductFeaturesHero`**](/docs/hero/product-features) cycles through a list of features, animating between them. The active feature is highlighted in a right-side panel while the list stays visible on the left.
+
+[**`HeroSection`**](/docs/hero/hero-section) is a full-bleed hero layout with headline, subheadline, CTA button, and an optional background effect slot.
+
+## Text effects
+
+[**`StaggeredLetterAnimation`**](/docs/text/staggered-letter) animates each character in a string with a sequential delay on enter.
+
+[**`SplitTextEffect`**](/docs/text/split-text) separates a string into two halves that move apart on hover and snap back on leave.
+
+## Buttons and cards
+
+[**`StatusButton`**](/docs/button/status-button) cycles through a defined list of states — idle, loading, success, error — with animated transitions between them.
+
+[**`AIButton`**](/docs/button/ai-button) is a button with a shimmer animation that suggests something is processing. The shimmer runs indefinitely until you change the button to an idle or complete state.
+
+[**`SwapCard`**](/docs/feature-cards/swap-card) flips between two content panels on hover or click using a CSS 3D transform.
+
+[**`GitHubCards`**](/docs/card/github-card-shiny) renders a GitHub repository card showing repo name, description, star count, fork count, and primary language.
+
+[**`TransitionList`**](/docs/list/transition-list) animates list items in and out on mount/unmount.
+
+[**`SplitTextEffect`**](/docs/text/split-text) splits a string in two on hover.
diff --git a/content/docs/changelog/2024-08.mdx b/content/docs/changelog/2024-08.mdx
new file mode 100644
index 00000000..fd8a3f9d
--- /dev/null
+++ b/content/docs/changelog/2024-08.mdx
@@ -0,0 +1,21 @@
+---
+title: August 2024
+description: Four new text animation effects and a TypingText improvement.
+date: 2024-08-28
+---
+
+This month focused on text effects — specifically ones that feel more playful or expressive than a standard fade-in.
+
+## New components
+
+[**`JumpingText`**](/docs/text/jumping-text-instagram) makes individual characters jump in sequence, either continuously on a loop or triggered by hover. The jump height, duration, and stagger between characters are all configurable.
+
+[**`TextExplosion`**](/docs/text/text-explode-imessage) breaks the text into individual characters, explodes them outward to random positions, then snaps them back into place. The explosion uses randomized angles and distances per character so each trigger looks slightly different. Best used sparingly — as a one-shot reveal, not an idle loop.
+
+[**`JitterText`**](/docs/text/jitter-text) makes characters vibrate independently with small random offsets, loosely in the style of the iMessage typing indicator applied to a full string. The jitter magnitude is configurable.
+
+[**`RevealTextOnScroll`**](/docs/text/scroll-reveal) masks text behind a clip that opens as the element enters the viewport. The reveal direction (up, down, left, right) and threshold are configurable.
+
+## Improvement
+
+[`TypingText`](/docs/text/typing-text) gained a `hideCursor` prop. When set, the blinking cursor is removed after the full string has been typed. Previously the cursor remained visible indefinitely, which looked odd in contexts where the component was used as a static display after the animation completed.
diff --git a/content/docs/changelog/2024-09.mdx b/content/docs/changelog/2024-09.mdx
new file mode 100644
index 00000000..ba8471dc
--- /dev/null
+++ b/content/docs/changelog/2024-09.mdx
@@ -0,0 +1,15 @@
+---
+title: September 2024
+description: GlitchText, StaggeredCard, and the blog section.
+date: 2024-09-30
+---
+
+## New components
+
+[**`GlitchText`**](/docs/text/glitch-text) applies an RGB-channel-split glitch effect to text. The red, green, and blue layers offset independently on a randomized timing loop, creating a distorted digital aesthetic. The intensity and speed are configurable. Works best at larger sizes — the effect is too subtle to read at body text scale.
+
+[**`StaggeredCard`**](/docs/card/staggered-card) is a card that animates its children in with a sequential delay on mount. Each direct child gets a slightly later start than the one before it, so the card feels like it's assembling itself. The stagger interval is configurable.
+
+## Site
+
+Added a blog section at `/blog`. Posts are written in MDX and follow the same content pipeline as docs pages.
diff --git a/content/docs/changelog/2024-10.mdx b/content/docs/changelog/2024-10.mdx
new file mode 100644
index 00000000..9273f861
--- /dev/null
+++ b/content/docs/changelog/2024-10.mdx
@@ -0,0 +1,73 @@
+---
+title: October 2024
+description: 28 new components from the Hacktoberfest contributor sprint.
+date: 2024-10-31
+---
+
+The biggest single month in Animata's history. 28 components were contributed by the community during Hacktoberfest 2024.
+
+## Buttons and interaction
+
+[**`RippleButton`**](/docs/button/ripple-button) adds a material-style circular ripple that expands from the click origin and fades out. Drop-in replacement for any button element.
+
+[**`SlidingArrowButton`**](/docs/button/slide-arrow-button) shows an arrow that slides in from off-screen on hover, replacing the label. Works well for directional CTAs where the motion reinforces the action.
+
+[**`AnimatedFollowButton`**](/docs/button/animated-follow-button) handles the follow/unfollow toggle pattern — the label and icon swap with a spring transition when state changes, and the button briefly shows a loading state between.
+
+[**`SpeedDial`**](/docs/fabs/speed-dial) is a floating action button that expands into a radial or vertical stack of secondary actions on press. Each action item has a tooltip label and configurable icon. Useful when you need multiple entry points without cluttering a toolbar.
+
+[**`FlowerMenu`**](/docs/fabs/flower-menu) is a variant on the speed dial concept where items bloom outward from the trigger in an arc. The open/close transition uses spring physics.
+
+## Cards
+
+[**`CommentReplyCard`**](/docs/card/comment-reply-card) renders a comment with its reply chain, including avatar, author name, timestamp, and a reply input at the bottom.
+
+[**`NotificationCard`**](/docs/card/notification-card) is a toast-style card with icon, title, message, and an optional action. Intended to be stacked or floated — the component doesn't include a notification manager, just the visual.
+
+[**`NoticeCard`**](/docs/card/notice-card) is a dismissible banner for inline notices. It takes a severity level (info, warning, error) and adjusts the icon and color accordingly.
+
+[**`EmailFeatureCard`**](/docs/card/email-feature-card) presents a feature highlight in the visual language of an email client — icon on the left, title and description on the right, with a subtle hover state.
+
+[**`CardComment`**](/docs/card/card-comment) shows a standalone comment with avatar, author, timestamp, body text, and a reaction row.
+
+[**`WebhookCard`**](/docs/card/webhooks-card) displays a webhook event — endpoint URL, method, status code, and a collapsible payload viewer.
+
+[**`SubscribeCard`**](/docs/feature-cards/subscribe-card) pairs a short value proposition with an email input and submit button. The submission state is animated.
+
+[**`SurveyCard`**](/docs/feature-cards/survey-card) steps through a short survey one question at a time. Each question can be multiple choice, rating, or free text. The progress indicator is animated between steps.
+
+[**`InteractiveCaseStudyCard`**](/docs/card/case-study-card) flips to reveal a case study on the back face. The front shows a teaser image and title; the back shows the full summary. The flip uses a CSS perspective transform.
+
+[**`ScoreCard`**](/docs/feature-cards/score-card) displays a numeric score or stat with an animated counter and a supporting label.
+
+## Widgets
+
+[**`TeamClock`**](/docs/widget/team-clock) shows the current time in multiple time zones simultaneously. Each zone has a label, a live time display, and a visual indicator for whether it's within business hours.
+
+[**`MusicStackWidget`**](/docs/widget/music-stack-interaction) shows a stack of album art cards that can be flipped through with playback controls. Designed as a UI component, not a real audio player — it calls your callbacks and you handle the audio.
+
+[**`FundWidget`**](/docs/widget/fund-widget) renders a funding progress bar with a current amount, goal, and percentage. The fill animates on mount.
+
+[**`TransactionList`**](/docs/list/transaction-list) shows a scrollable list of transactions, each with an icon, description, amount, and timestamp. New items animate in from the top.
+
+[**`ReminderScheduler`**](/docs/feature-cards/reminder-scheduler) combines a date picker, time picker, and a short text input into a single compact card for scheduling a reminder.
+
+[**`ConfirmationMessage`**](/docs/feature-cards/confirmation-message) overlays a success or error state with an animated icon and message. Typically shown after a form submission or async action.
+
+## Navigation and layout
+
+[**`FluidTabs`**](/docs/tabs/fluid-tabs) is a tab bar where the active indicator slides smoothly between tabs rather than jumping. The indicator width matches each tab's content width.
+
+[**`AnimatedDock`**](/docs/container/animated-dock) replicates the macOS dock's magnification behavior. Items near the cursor scale up based on proximity.
+
+[**`OrbitingItems3D`**](/docs/list/orbiting-items-3-d) places elements around a 3D orbital path that rotates continuously.
+
+[**`AnimatedTimeline`**](/docs/progress/animatedtimeline) renders a vertical timeline where each entry animates in with a staggered delay on scroll into view.
+
+[**`VerticalTilePreloader`**](/docs/preloader/vertical-tiles) is a full-screen entry animation where tiles slide down sequentially to reveal the page beneath.
+
+[**`ContentScanComponent`**](/docs/feature-cards/content-scan) overlays an animated horizontal scan line on any content, suggesting a machine-reading or biometric scan.
+
+[**`IntegrationPills`**](/docs/card/integration-pills) renders a horizontal scrolling row of service logos with an enter animation. Commonly used in landing pages to show integrations.
+
+[**`PricingComponent`**](/docs/section/pricing) is a three-tier pricing table with a monthly/annual toggle. The highlighted tier has a distinct treatment. All copy is configurable through props.
diff --git a/content/docs/changelog/2025-03.mdx b/content/docs/changelog/2025-03.mdx
new file mode 100644
index 00000000..fa1eb7a7
--- /dev/null
+++ b/content/docs/changelog/2025-03.mdx
@@ -0,0 +1,11 @@
+---
+title: March 2025
+description: Added CalendarWidget.
+date: 2025-03-05
+---
+
+## New component: [CalendarWidget](/docs/widget/calendar-widget)
+
+A self-contained interactive calendar. It shows a full month grid, handles navigation between months, and supports marking individual dates with events or indicators. The component owns its state internally but accepts a controlled mode via `value` and `onChange` props if you need to wire it to external data.
+
+The design is intentionally neutral — it uses the project's theme tokens throughout so it adapts to light and dark mode without additional configuration. Commonly used inside a card or floating panel rather than inline in a page layout.
diff --git a/content/docs/changelog/2025-04.mdx b/content/docs/changelog/2025-04.mdx
new file mode 100644
index 00000000..72645f5a
--- /dev/null
+++ b/content/docs/changelog/2025-04.mdx
@@ -0,0 +1,11 @@
+---
+title: April 2025
+description: Two bug fixes.
+date: 2025-04-25
+---
+
+## Bug fixes
+
+The mobile navigation had an overflow issue that caused horizontal scrolling on screens narrower than 375px. The root cause was a fixed-width element in the header that didn't collapse at small breakpoints — fixed by switching to `min-w-0` and letting the flex container handle the constraint.
+
+`AnimatedGradientText` was missing the `bg-position` keyframe registration in the Tailwind config, which caused the gradient animation to be static in production builds. The animation was already defined in the component but the config-level registration was dropped during a previous cleanup. It's back.
diff --git a/content/docs/changelog/2026-01.mdx b/content/docs/changelog/2026-01.mdx
new file mode 100644
index 00000000..b1fc3f3c
--- /dev/null
+++ b/content/docs/changelog/2026-01.mdx
@@ -0,0 +1,11 @@
+---
+title: January 2026
+description: Added CircularText.
+date: 2026-01-26
+---
+
+## New component: [CircularText](/docs/text/circular-text)
+
+Arranges a string of characters evenly around a circular path and rotates continuously. The radius, font size, animation speed, and direction are all configurable. It works well as a decorative label around an avatar or icon, and pairs with a centered element inside the circle.
+
+The rotation uses a CSS animation rather than JavaScript, so it runs on the compositor thread and doesn't contribute to layout recalculations.
diff --git a/content/docs/changelog/2026-03.mdx b/content/docs/changelog/2026-03.mdx
new file mode 100644
index 00000000..e32041c3
--- /dev/null
+++ b/content/docs/changelog/2026-03.mdx
@@ -0,0 +1,17 @@
+---
+title: March 2026
+description: Full stack upgrade — Next.js 16, Tailwind CSS v4, Storybook 10, and Biome.
+date: 2026-03-10
+---
+
+Infrastructure-only month. No new components — the entire toolchain was upgraded in one coordinated pass.
+
+## Stack upgrade
+
+**Next.js 16** brought improvements to the App Router's caching behavior and server component performance. The upgrade was straightforward; no breaking changes affected the component library itself.
+
+**Tailwind CSS v4** changed the configuration format significantly. The `tailwind.config.js` was replaced with CSS-native theme definitions in `globals.css`, using `@theme` blocks and CSS variables directly. Component class names that relied on arbitrary values were audited and updated. The `bg-gradient-to-r` utility became `bg-linear-to-r`, and a handful of plugin-based utilities were rewritten as native CSS.
+
+**Storybook 10** updated the story format and dropped several deprecated APIs. Stories across the component library were updated to the new `satisfies Meta<typeof Component>` pattern. The autodocs setup was reconfigured to work with the new architecture.
+
+**Biome** replaced ESLint and Prettier as the single tool for linting and formatting. The configuration is in `biome.json`. The main behavioral difference is that Biome enforces import ordering, so existing files were reformatted on adoption. Going forward, `biome check --write` handles both formatting and lint fixes in one pass.
diff --git a/content/docs/changelog/2026-04.mdx b/content/docs/changelog/2026-04.mdx
new file mode 100644
index 00000000..d1adf319
--- /dev/null
+++ b/content/docs/changelog/2026-04.mdx
@@ -0,0 +1,25 @@
+---
+title: April 2026
+description: shadcn registry launch, announcement ribbon, and site revamp.
+date: 2026-04-24
+---
+
+Big month. The shadcn registry went live, which changed how people got components into their projects. There was also a new announcement ribbon component, and the site got a meaningful speed and accessibility pass.
+
+## shadcn registry
+
+Every Animata component now has a registry URL. Instead of copying files by hand, you pass the URL straight to the shadcn CLI:
+
+```bash
+npx shadcn add https://animata.design/r/container/marquee.json
+```
+
+It resolves imports and dependencies automatically. The URL pattern is `https://animata.design/r/{category}/{name}.json` — works for every component in the library.
+
+## New component: [announcement ribbon](/docs/container/announcement-ribbon)
+
+A sticky top-of-page banner for announcements. It uses the [Marquee](/docs/container/marquee) component internally for the scrolling track, so it inherits all the same pause-on-hover and repeat behavior. There's a badge slot on the left, scrolling content in the middle (accepts any React node), and an optional link CTA on the right. The whole thing is brand yellow — works on both light and dark backgrounds.
+
+## Site updates
+
+The landing page is faster and more accessible. Keyboard navigation is cleaner, the heading structure is consistent for screen readers, and several layout shifts on first load were fixed.
diff --git a/content/docs/changelog/index.mdx b/content/docs/changelog/index.mdx
new file mode 100644
index 00000000..08fbbe9e
--- /dev/null
+++ b/content/docs/changelog/index.mdx
@@ -0,0 +1,34 @@
+---
+title: Changelog
+description: What's changed in Animata, month by month.
+toc: false
+---
+
+New components, bug fixes, and infrastructure changes, going back to the beta launch in June 2024.
+
+## Recent releases
+
+### [April 2026](/docs/changelog/2026-04)
+
+shadcn registry went live — every component is now installable with `npx shadcn add`. Added the announcement ribbon component and revamped the site for speed and accessibility.
+
+### [March 2026](/docs/changelog/2026-03)
+
+Stack upgrade: Next.js 16, Tailwind CSS v4, Storybook 10, and Biome replacing the old linter setup.
+
+---
+
+## All releases
+
+| Month | Highlights |
+|---|---|
+| [April 2026](/docs/changelog/2026-04) | shadcn registry, announcement ribbon, site revamp |
+| [March 2026](/docs/changelog/2026-03) | Next.js 16, Tailwind v4, Storybook 10, Biome |
+| [January 2026](/docs/changelog/2026-01) | CircularText |
+| [April 2025](/docs/changelog/2025-04) | Two bug fixes |
+| [March 2025](/docs/changelog/2025-03) | CalendarWidget |
+| [October 2024](/docs/changelog/2024-10) | 28 components from Hacktoberfest |
+| [September 2024](/docs/changelog/2024-09) | GlitchText, StaggeredCard, blog section |
+| [August 2024](/docs/changelog/2024-08) | Four new text effects |
+| [July 2024](/docs/changelog/2024-07) | 16 components across interactive, button, and card categories |
+| [June 2024](/docs/changelog/2024-06) | Beta launch — 16 founding components |
diff --git a/content/docs/container/announcement-ribbon.mdx b/content/docs/container/announcement-ribbon.mdx
new file mode 100644
index 00000000..159ac033
--- /dev/null
+++ b/content/docs/container/announcement-ribbon.mdx
@@ -0,0 +1,37 @@
+---
+title: Announcement Ribbon
+description: A sticky scrolling banner for top-of-page announcements.
+author: harimanok_
+---
+
+<ComponentPreview name="container-announcement-ribbon--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="container" name="announcement-ribbon" />
+
+### Manual
+
+<Steps>
+
+<Step>Install dependencies</Step>
+
+This component uses the [Marquee](/docs/container/marquee) component for the scrolling track. Make sure it's in your project first.
+
+<Step>Run the following command</Step>
+
+```bash
+mkdir -p components/animata/container && touch components/animata/container/announcement-ribbon.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/container/announcement-ribbon.tsx
+
+```
+
+</Steps>

From 34b4cadfeb0f1c51cb76feaa1a56261c3b122f68 Mon Sep 17 00:00:00 2001
From: Hari Lamichhane <onwithhari@gmail.com>
Date: Sat, 25 Apr 2026 21:43:06 +0545
Subject: [PATCH 4/5] feat(text): add lots of new animated text based on
 pixelpoint's skills (#441)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 animata/bento-grid/gradient.tsx               |   4 +-
 animata/bento-grid/three.tsx                  |   2 +-
 animata/hero/hero-section-text-hover.tsx      |   9 +-
 animata/hero/product-features.tsx             |   5 +-
 animata/text/animated-gradient-text.tsx       |   2 +-
 animata/text/blur-out-up.stories.tsx          |  23 +
 animata/text/blur-out-up.tsx                  | 117 +++
 animata/text/bold-copy.stories.tsx            |   9 +-
 animata/text/bold-copy.tsx                    |  25 +-
 animata/text/bottom-up-letters.stories.tsx    |  23 +
 animata/text/bottom-up-letters.tsx            | 109 ++
 animata/text/circular-text.tsx                |   2 +-
 animata/text/counter.tsx                      |   2 +-
 animata/text/double-underline.tsx             |  27 +-
 animata/text/fade-through.stories.tsx         |  23 +
 animata/text/fade-through.tsx                 | 121 +++
 animata/text/focus-blur-resolve.stories.tsx   |  23 +
 animata/text/focus-blur-resolve.tsx           | 121 +++
 animata/text/gibberish-text.tsx               |   6 +-
 animata/text/kinetic-center-build.stories.tsx |  22 +
 animata/text/kinetic-center-build.tsx         | 117 +++
 animata/text/line-by-line-slide.stories.tsx   |  23 +
 animata/text/line-by-line-slide.tsx           | 113 ++
 animata/text/mask-reveal-up.stories.tsx       |  23 +
 animata/text/mask-reveal-up.tsx               | 117 +++
 animata/text/micro-scale-fade.stories.tsx     |  23 +
 animata/text/micro-scale-fade.tsx             | 113 ++
 animata/text/mirror-text.tsx                  |   2 +-
 animata/text/per-character-rise.stories.tsx   |  23 +
 animata/text/per-character-rise.tsx           | 112 ++
 animata/text/per-word-crossfade.stories.tsx   |  23 +
 animata/text/per-word-crossfade.tsx           | 113 ++
 animata/text/scale-down-fade.stories.tsx      |  23 +
 animata/text/scale-down-fade.tsx              | 117 +++
 animata/text/shared-axis-y.stories.tsx        |  23 +
 animata/text/shared-axis-y.tsx                | 117 +++
 animata/text/shared-axis-z.stories.tsx        |  23 +
 animata/text/shared-axis-z.tsx                | 117 +++
 animata/text/shimmer-sweep.stories.tsx        |  23 +
 animata/text/shimmer-sweep.tsx                | 121 +++
 animata/text/short-slide-down.stories.tsx     |  22 +
 animata/text/short-slide-down.tsx             | 122 +++
 animata/text/short-slide-right.stories.tsx    |  23 +
 animata/text/short-slide-right.tsx            | 123 +++
 animata/text/soft-blur-in.stories.tsx         |  23 +
 animata/text/soft-blur-in.tsx                 | 116 +++
 animata/text/split-text.tsx                   |   7 +-
 animata/text/spring-scale-in.stories.tsx      |  23 +
 animata/text/spring-scale-in.tsx              | 113 ++
 animata/text/text-animator.css                |  50 +
 animata/text/text-animator.tsx                | 981 ++++++++++++++++++
 animata/text/text-border-animation.tsx        |  11 +-
 animata/text/top-down-letters.stories.tsx     |  23 +
 animata/text/top-down-letters.tsx             | 109 ++
 animata/text/underline-hover-text.stories.tsx |   5 -
 animata/text/underline-hover-text.tsx         |  44 +-
 animata/text/wave-reveal.tsx                  |   2 +-
 app/(main)/_landing/beam-cta.tsx              |   2 +-
 app/(main)/_landing/hero-variants.tsx         |   8 +-
 app/(main)/_landing/section-one.tsx           |   2 +-
 app/(main)/_landing/section-two.tsx           |   2 +-
 app/(main)/_landing/stats-bento.tsx           |   8 +-
 app/(main)/_landing/why-animata.tsx           |   2 +-
 app/(main)/_landing/wound-and-promise.tsx     |   2 +-
 app/(main)/blog/[[...slug]]/page.tsx          |   5 +-
 app/(main)/docs/[[...slug]]/page.tsx          |  10 +-
 app/(main)/page.tsx                           |  11 +-
 app/(main)/text-animations/page.tsx           | 223 ++++
 components/ads.tsx                            |   5 +-
 components/component-card.tsx                 |   6 +-
 components/component-list-item.tsx            |  87 +-
 components/component-preview.tsx              |  25 +-
 components/icons.tsx                          |   3 +-
 components/in-view.tsx                        |  47 +
 components/mdx-components.tsx                 |  26 +-
 config/docs.ts                                |   4 +
 content/docs/bento-grid/index.mdx             |   2 +-
 content/docs/changelog/2026-04.mdx            |  93 +-
 content/docs/changelog/index.mdx              |   4 +-
 content/docs/text/blur-out-up.mdx             |  57 +
 content/docs/text/bottom-up-letters.mdx       |  57 +
 content/docs/text/fade-through.mdx            |  57 +
 content/docs/text/focus-blur-resolve.mdx      |  57 +
 content/docs/text/index.mdx                   | 239 +++++
 content/docs/text/kinetic-center-build.mdx    |  57 +
 content/docs/text/line-by-line-slide.mdx      |  57 +
 content/docs/text/mask-reveal-up.mdx          |  57 +
 content/docs/text/micro-scale-fade.mdx        |  57 +
 content/docs/text/per-character-rise.mdx      |  57 +
 content/docs/text/per-word-crossfade.mdx      |  57 +
 content/docs/text/scale-down-fade.mdx         |  57 +
 content/docs/text/shared-axis-y.mdx           |  57 +
 content/docs/text/shared-axis-z.mdx           |  57 +
 content/docs/text/shimmer-sweep.mdx           |  57 +
 content/docs/text/short-slide-down.mdx        |  57 +
 content/docs/text/short-slide-right.mdx       |  57 +
 content/docs/text/soft-blur-in.mdx            |  57 +
 content/docs/text/spring-scale-in.mdx         |  57 +
 content/docs/text/staggered-letter.mdx        |   1 +
 content/docs/text/top-down-letters.mdx        |  57 +
 100 files changed, 5627 insertions(+), 111 deletions(-)
 create mode 100644 animata/text/blur-out-up.stories.tsx
 create mode 100644 animata/text/blur-out-up.tsx
 create mode 100644 animata/text/bottom-up-letters.stories.tsx
 create mode 100644 animata/text/bottom-up-letters.tsx
 create mode 100644 animata/text/fade-through.stories.tsx
 create mode 100644 animata/text/fade-through.tsx
 create mode 100644 animata/text/focus-blur-resolve.stories.tsx
 create mode 100644 animata/text/focus-blur-resolve.tsx
 create mode 100644 animata/text/kinetic-center-build.stories.tsx
 create mode 100644 animata/text/kinetic-center-build.tsx
 create mode 100644 animata/text/line-by-line-slide.stories.tsx
 create mode 100644 animata/text/line-by-line-slide.tsx
 create mode 100644 animata/text/mask-reveal-up.stories.tsx
 create mode 100644 animata/text/mask-reveal-up.tsx
 create mode 100644 animata/text/micro-scale-fade.stories.tsx
 create mode 100644 animata/text/micro-scale-fade.tsx
 create mode 100644 animata/text/per-character-rise.stories.tsx
 create mode 100644 animata/text/per-character-rise.tsx
 create mode 100644 animata/text/per-word-crossfade.stories.tsx
 create mode 100644 animata/text/per-word-crossfade.tsx
 create mode 100644 animata/text/scale-down-fade.stories.tsx
 create mode 100644 animata/text/scale-down-fade.tsx
 create mode 100644 animata/text/shared-axis-y.stories.tsx
 create mode 100644 animata/text/shared-axis-y.tsx
 create mode 100644 animata/text/shared-axis-z.stories.tsx
 create mode 100644 animata/text/shared-axis-z.tsx
 create mode 100644 animata/text/shimmer-sweep.stories.tsx
 create mode 100644 animata/text/shimmer-sweep.tsx
 create mode 100644 animata/text/short-slide-down.stories.tsx
 create mode 100644 animata/text/short-slide-down.tsx
 create mode 100644 animata/text/short-slide-right.stories.tsx
 create mode 100644 animata/text/short-slide-right.tsx
 create mode 100644 animata/text/soft-blur-in.stories.tsx
 create mode 100644 animata/text/soft-blur-in.tsx
 create mode 100644 animata/text/spring-scale-in.stories.tsx
 create mode 100644 animata/text/spring-scale-in.tsx
 create mode 100644 animata/text/text-animator.css
 create mode 100644 animata/text/text-animator.tsx
 create mode 100644 animata/text/top-down-letters.stories.tsx
 create mode 100644 animata/text/top-down-letters.tsx
 create mode 100644 app/(main)/text-animations/page.tsx
 create mode 100644 components/in-view.tsx
 create mode 100644 content/docs/text/blur-out-up.mdx
 create mode 100644 content/docs/text/bottom-up-letters.mdx
 create mode 100644 content/docs/text/fade-through.mdx
 create mode 100644 content/docs/text/focus-blur-resolve.mdx
 create mode 100644 content/docs/text/index.mdx
 create mode 100644 content/docs/text/kinetic-center-build.mdx
 create mode 100644 content/docs/text/line-by-line-slide.mdx
 create mode 100644 content/docs/text/mask-reveal-up.mdx
 create mode 100644 content/docs/text/micro-scale-fade.mdx
 create mode 100644 content/docs/text/per-character-rise.mdx
 create mode 100644 content/docs/text/per-word-crossfade.mdx
 create mode 100644 content/docs/text/scale-down-fade.mdx
 create mode 100644 content/docs/text/shared-axis-y.mdx
 create mode 100644 content/docs/text/shared-axis-z.mdx
 create mode 100644 content/docs/text/shimmer-sweep.mdx
 create mode 100644 content/docs/text/short-slide-down.mdx
 create mode 100644 content/docs/text/short-slide-right.mdx
 create mode 100644 content/docs/text/soft-blur-in.mdx
 create mode 100644 content/docs/text/spring-scale-in.mdx
 create mode 100644 content/docs/text/top-down-letters.mdx

diff --git a/animata/bento-grid/gradient.tsx b/animata/bento-grid/gradient.tsx
index d4fa0b5d..8e9ecb18 100644
--- a/animata/bento-grid/gradient.tsx
+++ b/animata/bento-grid/gradient.tsx
@@ -31,7 +31,7 @@ function BentoCard({
   return (
     <MovingGradient
       animated={false}
-      className={cn("rounded-md", className)}
+      className={className}
       gradientClassName={cn("opacity-10", gradient)}
     >
       <section className="flex h-full flex-col gap-2 p-4">
@@ -57,7 +57,7 @@ function GetGradient() {
       className="sm:col-span-1 sm:row-span-2"
       gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
     >
-      <div className="group/grid relative flex cursor-pointer flex-col justify-end rounded-md bg-zinc-950 p-2 text-2xl tracking-tight text-gray-100 md:text-4xl">
+      <div className="group/grid relative flex cursor-pointer flex-col justify-end bg-zinc-950 p-2.5 text-2xl tracking-tight text-gray-100 md:text-4xl">
         <div className="font-light">Get</div>
         <div className="-mt-2 font-bold">Gradients</div>
         <div className="flex h-6 w-6 items-center justify-center rounded-full border bg-white transition duration-700 group-hover/grid:rotate-[360] md:h-8 md:w-8">
diff --git a/animata/bento-grid/three.tsx b/animata/bento-grid/three.tsx
index 5318f428..65bc37ed 100644
--- a/animata/bento-grid/three.tsx
+++ b/animata/bento-grid/three.tsx
@@ -48,7 +48,7 @@ function FeatureThree() {
 
 export default function Three() {
   return (
-    <div className="grid w-full min-w-0 grid-cols-1 grid-rows-1 gap-3 sm:grid-cols-2 sm:grid-rows-2">
+    <div className="grid w-fit min-w-0 grid-cols-1 grid-rows-1 gap-3 sm:grid-cols-2 sm:grid-rows-2">
       <FeatureOne />
       <FeatureTwo />
       <FeatureThree />
diff --git a/animata/hero/hero-section-text-hover.tsx b/animata/hero/hero-section-text-hover.tsx
index 40615b39..bb955a45 100644
--- a/animata/hero/hero-section-text-hover.tsx
+++ b/animata/hero/hero-section-text-hover.tsx
@@ -84,7 +84,7 @@ const HeroSectionTextHover: React.FC<HeroCardProps> = ({ className }) => {
                   <span
                     key={index}
                     className={cn(
-                      "pointer-events-none absolute transform text-lg transition-transform duration-500 group-hover/hero:scale-110 sm:text-2xl md:text-4xl",
+                      "pointer-events-none absolute transform text-lg transition-transform duration-300 ease-[cubic-bezier(0.5,1.8,0.4,1)] group-hover/hero:scale-110 sm:text-2xl md:text-4xl",
                       dest.position,
                     )}
                   >
@@ -104,7 +104,7 @@ const HeroSectionTextHover: React.FC<HeroCardProps> = ({ className }) => {
                   <span
                     key={index}
                     className={cn(
-                      "pointer-events-none absolute transform text-lg transition-transform duration-500 group-hover/hero:scale-110 sm:text-2xl md:text-4xl",
+                      "pointer-events-none absolute transform text-lg transition-transform duration-300 ease-[cubic-bezier(0.5,1.8,0.4,1)] group-hover/hero:scale-110 sm:text-2xl md:text-4xl",
                       gem.position,
                     )}
                   >
@@ -115,7 +115,10 @@ const HeroSectionTextHover: React.FC<HeroCardProps> = ({ className }) => {
             </div>
           </div>
         </div>
-        <button className="cursor-pointer rounded-3xl bg-orange-400 px-4 py-2 font-mono tracking-tighter hover:bg-orange-500">
+        <button
+          className="cursor-pointer rounded-3xl bg-yellow-400 px-4 py-2 font-mono tracking-tighter hover:bg-yellow-500"
+          type="button"
+        >
           Begin your journey
         </button>
       </div>
diff --git a/animata/hero/product-features.tsx b/animata/hero/product-features.tsx
index 39250a70..140c5c99 100644
--- a/animata/hero/product-features.tsx
+++ b/animata/hero/product-features.tsx
@@ -1,6 +1,5 @@
 import { type HTMLMotionProps, motion, useSpring, useTransform } from "motion/react";
 import type { ReactNode } from "react";
-import Balancer from "react-wrap-balancer";
 
 import { cn } from "@/lib/utils";
 
@@ -89,10 +88,10 @@ export default function ProductFeatures() {
         className="flex max-w-md flex-col items-center gap-2 text-center"
       >
         <h1 className="text-3xl font-black text-orange-600">Pots of Joy: Ceramic Chic!</h1>
-        <Balancer className="block text-lg text-neutral-500">
+        <div className="block text-balance text-lg text-neutral-500">
           Quirky ceramics for happy spaces. From sleek vases to funky mugs, we&apos;ve got your
           shelves covered.
-        </Balancer>
+        </div>
       </motion.header>
 
       <motion.div
diff --git a/animata/text/animated-gradient-text.tsx b/animata/text/animated-gradient-text.tsx
index e52dcc43..d1d1853d 100644
--- a/animata/text/animated-gradient-text.tsx
+++ b/animata/text/animated-gradient-text.tsx
@@ -7,7 +7,7 @@ export default function AnimatedGradientText({
   return (
     <div
       className={cn(
-        "bg-size animate-bg-position bg-linear-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% bg-[length:200%_auto] bg-clip-text text-transparent",
+        "bg-size animate-bg-position bg-linear-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% bg-size-[200%_auto] bg-clip-text text-transparent",
         className,
       )}
     >
diff --git a/animata/text/blur-out-up.stories.tsx b/animata/text/blur-out-up.stories.tsx
new file mode 100644
index 00000000..1f0f434e
--- /dev/null
+++ b/animata/text/blur-out-up.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BlurOutUp from "@/animata/text/blur-out-up";
+
+const meta = {
+  title: "Text/Blur Out Up",
+  component: BlurOutUp,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BlurOutUp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Clear in, airy out.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/blur-out-up.tsx b/animata/text/blur-out-up.tsx
new file mode 100644
index 00000000..eb561199
--- /dev/null
+++ b/animata/text/blur-out-up.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "blur-out-up",
+  target: "per-word",
+  enter: {
+    durationMs: 560,
+    staggerMs: 28,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      yPx: 10,
+      blurPx: 6,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 480,
+    staggerMs: 24,
+    easing: "cubic-bezier(0.64, 0, 0.78, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -14,
+      blurPx: 8,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 170,
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Clear in, airy out.",
+  "Lightweight typography.",
+  "Exit with grace.",
+];
+
+export interface BlurOutUpProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function BlurOutUp({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: BlurOutUpProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/bold-copy.stories.tsx b/animata/text/bold-copy.stories.tsx
index 87cc0710..b19e5f9c 100644
--- a/animata/text/bold-copy.stories.tsx
+++ b/animata/text/bold-copy.stories.tsx
@@ -8,7 +8,11 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {},
+  argTypes: {
+    size: {
+      options: ["sm", "md", "xl"],
+    },
+  },
 } satisfies Meta<typeof BoldCopy>;
 
 export default meta;
@@ -17,5 +21,8 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     text: "Animata",
+    size: "md",
+    backgroundTextClassName: "",
+    textClassName: "",
   },
 };
diff --git a/animata/text/bold-copy.tsx b/animata/text/bold-copy.tsx
index d1edc633..a0d41579 100644
--- a/animata/text/bold-copy.tsx
+++ b/animata/text/bold-copy.tsx
@@ -6,13 +6,30 @@ const tourney = Tourney({
   subsets: ["latin"],
 });
 
+const sizePresets = {
+  sm: {
+    title: "text-sm group-hover/bold:text-xl md:text-lg group-hover/bold:md:text-2xl",
+    background: "text-xl md:text-2xl",
+  },
+  md: {
+    title: "text-base group-hover/bold:text-2xl md:text-xl group-hover/bold:md:text-4xl",
+    background: "text-2xl md:text-4xl",
+  },
+  xl: {
+    title: "text-lg group-hover/bold:text-4xl md:text-3xl group-hover/bold:md:text-8xl",
+    background: "text-4xl md:text-8xl",
+  },
+} as const;
+
 export default function BoldCopy({
   text = "animata",
+  size = "xl",
   className,
   textClassName,
   backgroundTextClassName,
 }: {
   text: string;
+  size?: keyof typeof sizePresets;
   className?: string;
   textClassName?: string;
   backgroundTextClassName?: string;
@@ -21,6 +38,8 @@ export default function BoldCopy({
     return null;
   }
 
+  const preset = size && size in sizePresets ? sizePresets[size] : sizePresets.xl;
+
   return (
     <div
       className={cn(
@@ -31,7 +50,8 @@ export default function BoldCopy({
     >
       <div
         className={cn(
-          "text-4xl font-bold uppercase text-foreground/15 transition-all group-hover/bold:opacity-50 md:text-8xl",
+          "font-bold uppercase text-foreground/15 transition-all group-hover/bold:opacity-50 select-none",
+          preset.background,
           backgroundTextClassName,
         )}
       >
@@ -39,7 +59,8 @@ export default function BoldCopy({
       </div>
       <div
         className={cn(
-          "text-md absolute font-bold uppercase text-foreground transition-all duration-300 group-hover/bold:text-4xl md:text-3xl group-hover/bold:md:text-8xl",
+          "absolute font-bold uppercase text-foreground transition-all duration-300",
+          preset.title,
           textClassName,
         )}
       >
diff --git a/animata/text/bottom-up-letters.stories.tsx b/animata/text/bottom-up-letters.stories.tsx
new file mode 100644
index 00000000..684fc449
--- /dev/null
+++ b/animata/text/bottom-up-letters.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BottomUpLetters from "@/animata/text/bottom-up-letters";
+
+const meta = {
+  title: "Text/Bottom-Up Letters",
+  component: BottomUpLetters,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BottomUpLetters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Shift",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/bottom-up-letters.tsx b/animata/text/bottom-up-letters.tsx
new file mode 100644
index 00000000..ca7ef93a
--- /dev/null
+++ b/animata/text/bottom-up-letters.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "bottom-up-letters",
+  target: "per-character",
+  enter: {
+    durationMs: 400,
+    staggerMs: 88,
+    easing: "cubic-bezier(0.18, 1, 0.32, 1)",
+    from: {
+      opacity: 0,
+      yPx: 46,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 280,
+    staggerMs: 28,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -14,
+    },
+  },
+  swap: {
+    mode: "sequential",
+    overlapMs: 0,
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = ["Shift", "Stage", "Letter"];
+
+export interface BottomUpLettersProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function BottomUpLetters({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: BottomUpLettersProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/circular-text.tsx b/animata/text/circular-text.tsx
index 04ec4ed7..3b424b71 100644
--- a/animata/text/circular-text.tsx
+++ b/animata/text/circular-text.tsx
@@ -19,7 +19,7 @@ export default function CircularText({
     <motion.div
       key={spinDuration}
       className={cn(
-        "relative mx-auto flex h-[200px] w-[200px] origin-center cursor-pointer items-center justify-center rounded-full text-center font-bold text-foreground",
+        "relative mx-auto flex h-48 aspect-square origin-center cursor-pointer items-center justify-center rounded-full text-center font-bold text-foreground",
         className,
       )}
       initial={{ rotate: 0 }}
diff --git a/animata/text/counter.tsx b/animata/text/counter.tsx
index 9e02c201..b4156d64 100644
--- a/animata/text/counter.tsx
+++ b/animata/text/counter.tsx
@@ -41,7 +41,7 @@ export const Formatter = {
 
 export default function Counter({
   format = Formatter.number,
-  targetValue,
+  targetValue = 1000,
   direction = "up",
   delay = 0,
   className,
diff --git a/animata/text/double-underline.tsx b/animata/text/double-underline.tsx
index 0a08bcaf..abef3617 100644
--- a/animata/text/double-underline.tsx
+++ b/animata/text/double-underline.tsx
@@ -5,24 +5,39 @@ export default function DoubleUnderline({
   children,
   ...props
 }: React.HTMLProps<HTMLSpanElement>) {
-  const common =
-    "absolute h-px w-full bg-blue-500 transition duration-200 group-hover/underline:opacity-50 dark:bg-white/70";
   return (
     <span
       {...props}
       className={cn(
-        "group/underline relative inline-block cursor-pointer text-blue-500",
+        "group/underline relative inline-block cursor-pointer",
+        "font-medium tracking-tight text-zinc-900 dark:text-zinc-100",
+        "transition-[letter-spacing,color] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+        "hover:tracking-[-0.01em]",
         className,
       )}
     >
       {children}
+      {/* Bottom stroke — soft gradient, always present, fades a touch on hover */}
       <span
+        aria-hidden
         className={cn(
-          common,
-          "pointer-events-none left-0 top-[calc(100%_-_2px)] group-hover/underline:top-0",
+          "pointer-events-none absolute -bottom-[3px] left-0 h-px w-full",
+          "bg-gradient-to-r from-transparent via-current/70 to-transparent",
+          "transition-opacity duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+          "group-hover/underline:opacity-50",
+        )}
+      />
+      {/* Top stroke — lifts from below to above the glyph on hover */}
+      <span
+        aria-hidden
+        className={cn(
+          "pointer-events-none absolute left-0 h-px w-full",
+          "bg-gradient-to-r from-transparent via-current to-transparent",
+          "top-[calc(100%-3px)] opacity-0",
+          "transition-[top,opacity] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+          "group-hover/underline:-top-px group-hover/underline:opacity-100",
         )}
       />
-      <span className={cn(common, "-bottom-[2px] left-0")} />
     </span>
   );
 }
diff --git a/animata/text/fade-through.stories.tsx b/animata/text/fade-through.stories.tsx
new file mode 100644
index 00000000..4f5da59b
--- /dev/null
+++ b/animata/text/fade-through.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import FadeThrough from "@/animata/text/fade-through";
+
+const meta = {
+  title: "Text/Fade Through",
+  component: FadeThrough,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FadeThrough>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Calm transitions.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/fade-through.tsx b/animata/text/fade-through.tsx
new file mode 100644
index 00000000..cf634cdb
--- /dev/null
+++ b/animata/text/fade-through.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "fade-through",
+  target: "whole",
+  enter: {
+    durationMs: 420,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.2, 0, 0, 1)",
+    from: {
+      opacity: 0,
+      yPx: 6,
+      scale: 0.99,
+      blurPx: 2,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 260,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.4, 0, 1, 1)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -4,
+      scale: 1,
+      blurPx: 0,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 20,
+    microDelayMs: 60,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Calm transitions.",
+  "Fade through content.",
+  "Focus shifts smoothly.",
+];
+
+export interface FadeThroughProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function FadeThrough({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: FadeThroughProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/focus-blur-resolve.stories.tsx b/animata/text/focus-blur-resolve.stories.tsx
new file mode 100644
index 00000000..4518b625
--- /dev/null
+++ b/animata/text/focus-blur-resolve.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import FocusBlurResolve from "@/animata/text/focus-blur-resolve";
+
+const meta = {
+  title: "Text/Focus Blur Resolve",
+  component: FocusBlurResolve,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FocusBlurResolve>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Focus resolves clearly.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/focus-blur-resolve.tsx b/animata/text/focus-blur-resolve.tsx
new file mode 100644
index 00000000..fdbee930
--- /dev/null
+++ b/animata/text/focus-blur-resolve.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "focus-blur-resolve",
+  target: "whole",
+  enter: {
+    durationMs: 760,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      yPx: 14,
+      blurPx: 14,
+      scale: 1.01,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 520,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.64, 0, 0.78, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+      scale: 1,
+    },
+    to: {
+      opacity: 0,
+      yPx: -10,
+      blurPx: 10,
+      scale: 1,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 160,
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Focus resolves clearly.",
+  "Detail emerges.",
+  "Then softly recedes.",
+];
+
+export interface FocusBlurResolveProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function FocusBlurResolve({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: FocusBlurResolveProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/gibberish-text.tsx b/animata/text/gibberish-text.tsx
index f72adfb4..d3ad87fe 100644
--- a/animata/text/gibberish-text.tsx
+++ b/animata/text/gibberish-text.tsx
@@ -31,11 +31,13 @@ const Letter = ({ letter, className }: { letter: string; className?: string }) =
     return () => clearInterval(interval);
   }, [letter]);
 
+  const char = String.fromCharCode(code);
+
   return (
     <span
-      className={cn("inline-block w-[1ch] text-center whitespace-pre text-foreground", className)}
+      className={cn("inline-block min-w-[1ch] font-mono text-center text-foreground", className)}
     >
-      {String.fromCharCode(code)}
+      {char === " " ? "\u00A0" : char}
     </span>
   );
 };
diff --git a/animata/text/kinetic-center-build.stories.tsx b/animata/text/kinetic-center-build.stories.tsx
new file mode 100644
index 00000000..0bc66aaf
--- /dev/null
+++ b/animata/text/kinetic-center-build.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import KineticCenterBuild from "@/animata/text/kinetic-center-build";
+
+const meta = {
+  title: "Text/Kinetic Center Build",
+  component: KineticCenterBuild,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof KineticCenterBuild>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/kinetic-center-build.tsx b/animata/text/kinetic-center-build.tsx
new file mode 100644
index 00000000..2c4d348a
--- /dev/null
+++ b/animata/text/kinetic-center-build.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationBuildSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "kinetic-center-build",
+  target: "per-word",
+  enter: {
+    durationMs: 360,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    from: {
+      opacity: 0,
+      yPx: 6,
+      scale: 0.992,
+      blurPx: 3.5,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 260,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -6,
+      blurPx: 2.5,
+    },
+  },
+  swap: {
+    mode: "sequential",
+    overlapMs: 0,
+    microDelayMs: 220,
+  },
+  customRenderer: "kinetic-center-build",
+  build: {
+    firstWordDurationMs: 340,
+    pushDurationMs: 430,
+    entryOffsetPx: 88,
+    wordGapPx: 10,
+    firstWordYPx: 6,
+    entryScale: 0.992,
+    entryBlurPx: 3.5,
+    reflowBlurPx: 0.8,
+    exitYPx: -6,
+    exitBlurPx: 2.5,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    exitEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  },
+};
+
+const DEFAULT_PHRASES: readonly (readonly string[])[] = [
+  ["Words", "push", "left"],
+  ["Type", "locks", "center"],
+  ["Build", "the", "line"],
+];
+
+export interface KineticCenterBuildProps {
+  /** Phrases to cycle through. Each phrase is an array of words. */
+  phrases?: string[][];
+  /** Override build params (gap, duration, blur, etc.). */
+  build?: Partial<TextAnimationBuildSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function KineticCenterBuild({
+  phrases,
+  build,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: KineticCenterBuildProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      build: { ...BASE_SPEC.build, ...build },
+    }),
+    [build],
+  );
+  const effectivePhrases = useMemo(() => phrases ?? DEFAULT_PHRASES.map((p) => [...p]), [phrases]);
+  return (
+    <TextAnimator
+      spec={spec}
+      phrases={effectivePhrases}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/line-by-line-slide.stories.tsx b/animata/text/line-by-line-slide.stories.tsx
new file mode 100644
index 00000000..245a7123
--- /dev/null
+++ b/animata/text/line-by-line-slide.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import LineByLineSlide from "@/animata/text/line-by-line-slide";
+
+const meta = {
+  title: "Text/Line-by-Line Slide",
+  component: LineByLineSlide,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof LineByLineSlide>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Think different.\nDo more.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/line-by-line-slide.tsx b/animata/text/line-by-line-slide.tsx
new file mode 100644
index 00000000..196f0fab
--- /dev/null
+++ b/animata/text/line-by-line-slide.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "line-by-line-slide",
+  target: "per-line",
+  enter: {
+    durationMs: 900,
+    staggerMs: 120,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      xPx: -48,
+    },
+    to: {
+      opacity: 1,
+      xPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 600,
+    staggerMs: 80,
+    easing: "cubic-bezier(0.64, 0, 0.78, 0)",
+    from: {
+      opacity: 1,
+      xPx: 0,
+    },
+    to: {
+      opacity: 0,
+      xPx: 48,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 0,
+    microDelayMs: 20,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Think different.\nDo more.",
+  "Built for speed.\nMade to last.",
+  "Clear ideas.\nClean motion.",
+];
+
+export interface LineByLineSlideProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function LineByLineSlide({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: LineByLineSlideProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/mask-reveal-up.stories.tsx b/animata/text/mask-reveal-up.stories.tsx
new file mode 100644
index 00000000..9620143c
--- /dev/null
+++ b/animata/text/mask-reveal-up.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import MaskRevealUp from "@/animata/text/mask-reveal-up";
+
+const meta = {
+  title: "Text/Mask Reveal Up",
+  component: MaskRevealUp,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MaskRevealUp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Designed to move.\nBuilt to focus.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/mask-reveal-up.tsx b/animata/text/mask-reveal-up.tsx
new file mode 100644
index 00000000..499612e7
--- /dev/null
+++ b/animata/text/mask-reveal-up.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "mask-reveal-up",
+  target: "per-line",
+  enter: {
+    durationMs: 760,
+    staggerMs: 90,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      yPx: 30,
+      blurPx: 6,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 520,
+    staggerMs: 70,
+    easing: "cubic-bezier(0.64, 0, 0.78, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -22,
+      blurPx: 6,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 210,
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Designed to move.\nBuilt to focus.",
+  "Quiet motion.\nStrong hierarchy.",
+  "Premium feel.\nEvery frame.",
+];
+
+export interface MaskRevealUpProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function MaskRevealUp({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: MaskRevealUpProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/micro-scale-fade.stories.tsx b/animata/text/micro-scale-fade.stories.tsx
new file mode 100644
index 00000000..d82885f5
--- /dev/null
+++ b/animata/text/micro-scale-fade.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import MicroScaleFade from "@/animata/text/micro-scale-fade";
+
+const meta = {
+  title: "Text/Micro Scale Fade",
+  component: MicroScaleFade,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MicroScaleFade>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Welcome to motion.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/micro-scale-fade.tsx b/animata/text/micro-scale-fade.tsx
new file mode 100644
index 00000000..fc105f3f
--- /dev/null
+++ b/animata/text/micro-scale-fade.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "micro-scale-fade",
+  target: "whole",
+  enter: {
+    durationMs: 600,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.32, 0.72, 0, 1)",
+    from: {
+      opacity: 0,
+      scale: 0.96,
+    },
+    to: {
+      opacity: 1,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 400,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      scale: 1,
+    },
+    to: {
+      opacity: 0,
+      scale: 0.96,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 0,
+    microDelayMs: 20,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Welcome to motion.",
+  "Small details matter.",
+  "Quietly premium.",
+];
+
+export interface MicroScaleFadeProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function MicroScaleFade({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: MicroScaleFadeProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/mirror-text.tsx b/animata/text/mirror-text.tsx
index 9bdeba2c..b8f2b183 100644
--- a/animata/text/mirror-text.tsx
+++ b/animata/text/mirror-text.tsx
@@ -32,7 +32,7 @@ export default function MirrorText({
   return (
     <div
       className={cn(
-        "group/mirror relative w-full justify-end overflow-hidden p-6 text-foreground",
+        "group/mirror relative w-fit justify-end overflow-hidden p-6 text-foreground",
         containerClassName,
       )}
     >
diff --git a/animata/text/per-character-rise.stories.tsx b/animata/text/per-character-rise.stories.tsx
new file mode 100644
index 00000000..9c8b6843
--- /dev/null
+++ b/animata/text/per-character-rise.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PerCharacterRise from "@/animata/text/per-character-rise";
+
+const meta = {
+  title: "Text/Per-Character Rise",
+  component: PerCharacterRise,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PerCharacterRise>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "One more thing.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/per-character-rise.tsx b/animata/text/per-character-rise.tsx
new file mode 100644
index 00000000..fc59a59f
--- /dev/null
+++ b/animata/text/per-character-rise.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "per-character-rise",
+  target: "per-character",
+  enter: {
+    durationMs: 700,
+    staggerMs: 24,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    from: {
+      opacity: 0,
+      yPx: 32,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 420,
+    staggerMs: 14,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -24,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 210,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "One more thing.",
+  "Fast and fluid.",
+  "Sharp by design.",
+];
+
+export interface PerCharacterRiseProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function PerCharacterRise({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: PerCharacterRiseProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/per-word-crossfade.stories.tsx b/animata/text/per-word-crossfade.stories.tsx
new file mode 100644
index 00000000..d5ebc281
--- /dev/null
+++ b/animata/text/per-word-crossfade.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PerWordCrossfade from "@/animata/text/per-word-crossfade";
+
+const meta = {
+  title: "Text/Per-Word Crossfade",
+  component: PerWordCrossfade,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PerWordCrossfade>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Beautifully simple.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/per-word-crossfade.tsx b/animata/text/per-word-crossfade.tsx
new file mode 100644
index 00000000..a7762ef6
--- /dev/null
+++ b/animata/text/per-word-crossfade.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "per-word-crossfade",
+  target: "per-word",
+  enter: {
+    durationMs: 700,
+    staggerMs: 70,
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    from: {
+      opacity: 0,
+      yPx: 8,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 500,
+    staggerMs: 40,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -6,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 170,
+    microDelayMs: 70,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Beautifully simple.",
+  "Designed for focus.",
+  "Built for people.",
+];
+
+export interface PerWordCrossfadeProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function PerWordCrossfade({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: PerWordCrossfadeProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/scale-down-fade.stories.tsx b/animata/text/scale-down-fade.stories.tsx
new file mode 100644
index 00000000..d8f50c5a
--- /dev/null
+++ b/animata/text/scale-down-fade.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ScaleDownFade from "@/animata/text/scale-down-fade";
+
+const meta = {
+  title: "Text/Scale Down Fade",
+  component: ScaleDownFade,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScaleDownFade>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Quietly refined.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/scale-down-fade.tsx b/animata/text/scale-down-fade.tsx
new file mode 100644
index 00000000..1e45b64e
--- /dev/null
+++ b/animata/text/scale-down-fade.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "scale-down-fade",
+  target: "whole",
+  enter: {
+    durationMs: 520,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      yPx: 8,
+      scale: 1.04,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 380,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.64, 0, 0.78, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+    },
+    to: {
+      opacity: 0,
+      yPx: -8,
+      scale: 0.94,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 130,
+    microDelayMs: 20,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Quietly refined.",
+  "Polished transitions.",
+  "A soft close.",
+];
+
+export interface ScaleDownFadeProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function ScaleDownFade({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: ScaleDownFadeProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/shared-axis-y.stories.tsx b/animata/text/shared-axis-y.stories.tsx
new file mode 100644
index 00000000..e38a6b7c
--- /dev/null
+++ b/animata/text/shared-axis-y.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SharedAxisY from "@/animata/text/shared-axis-y";
+
+const meta = {
+  title: "Text/Shared Axis Y",
+  component: SharedAxisY,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SharedAxisY>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Layered navigation.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/shared-axis-y.tsx b/animata/text/shared-axis-y.tsx
new file mode 100644
index 00000000..644091d0
--- /dev/null
+++ b/animata/text/shared-axis-y.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "shared-axis-y",
+  target: "per-word",
+  enter: {
+    durationMs: 180,
+    staggerMs: 78,
+    easing: "steps(1, end)",
+    from: {
+      opacity: 0,
+      yPx: 0,
+      scale: 1,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 140,
+    staggerMs: 78,
+    easing: "steps(1, end)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+    },
+    to: {
+      opacity: 0,
+      yPx: 0,
+      scale: 1,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 0,
+    microDelayMs: 28,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Layered navigation.",
+  "Hierarchy made clear.",
+  "Depth with restraint.",
+];
+
+export interface SharedAxisYProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function SharedAxisY({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: SharedAxisYProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/shared-axis-z.stories.tsx b/animata/text/shared-axis-z.stories.tsx
new file mode 100644
index 00000000..b56328ae
--- /dev/null
+++ b/animata/text/shared-axis-z.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SharedAxisZ from "@/animata/text/shared-axis-z";
+
+const meta = {
+  title: "Text/Shared Axis Z",
+  component: SharedAxisZ,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SharedAxisZ>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Zooming between states.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/shared-axis-z.tsx b/animata/text/shared-axis-z.tsx
new file mode 100644
index 00000000..30b5d77e
--- /dev/null
+++ b/animata/text/shared-axis-z.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "shared-axis-z",
+  target: "whole",
+  enter: {
+    durationMs: 520,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.2, 0, 0, 1)",
+    from: {
+      opacity: 0,
+      scale: 0.9,
+      blurPx: 2,
+    },
+    to: {
+      opacity: 1,
+      scale: 1,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 360,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.4, 0, 1, 1)",
+    from: {
+      opacity: 1,
+      scale: 1,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      scale: 1.06,
+      blurPx: 1,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 100,
+    microDelayMs: 20,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Zooming between states.",
+  "Elevate and settle.",
+  "Scale with purpose.",
+];
+
+export interface SharedAxisZProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function SharedAxisZ({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: SharedAxisZProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/shimmer-sweep.stories.tsx b/animata/text/shimmer-sweep.stories.tsx
new file mode 100644
index 00000000..5e1c1559
--- /dev/null
+++ b/animata/text/shimmer-sweep.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ShimmerSweep from "@/animata/text/shimmer-sweep";
+
+const meta = {
+  title: "Text/Shimmer Sweep",
+  component: ShimmerSweep,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ShimmerSweep>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Shiny details.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/shimmer-sweep.tsx b/animata/text/shimmer-sweep.tsx
new file mode 100644
index 00000000..3d869345
--- /dev/null
+++ b/animata/text/shimmer-sweep.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "shimmer-sweep",
+  target: "whole",
+  enter: {
+    durationMs: 850,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      xPx: -22,
+      blurPx: 8,
+    },
+    to: {
+      opacity: 1,
+      xPx: 0,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 650,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      xPx: 0,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      xPx: 22,
+      blurPx: 8,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 0,
+    microDelayMs: 36,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Shiny details.",
+  "Glide with intent.",
+  "Soft and precise.",
+];
+
+export interface ShimmerSweepProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /**
+   * Y-travel multiplier for all transforms. This preset only animates
+   * `xPx` and `blurPx`, so this prop is a no-op here — kept for API symmetry
+   * with the rest of the text presets.
+   */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function ShimmerSweep({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: ShimmerSweepProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/short-slide-down.stories.tsx b/animata/text/short-slide-down.stories.tsx
new file mode 100644
index 00000000..519097e7
--- /dev/null
+++ b/animata/text/short-slide-down.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ShortSlideDown from "@/animata/text/short-slide-down";
+
+const meta = {
+  title: "Text/Short Slide Down",
+  component: ShortSlideDown,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ShortSlideDown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/short-slide-down.tsx b/animata/text/short-slide-down.tsx
new file mode 100644
index 00000000..4de1a245
--- /dev/null
+++ b/animata/text/short-slide-down.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationBuildSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "short-slide-down",
+  target: "per-word",
+  enter: {
+    durationMs: 520,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    from: {
+      opacity: 0,
+      yPx: -24,
+      blurPx: 2.4,
+      scale: 0.992,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 320,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+      scale: 1,
+    },
+    to: {
+      opacity: 0,
+      yPx: 10,
+      blurPx: 1.2,
+      scale: 1,
+    },
+  },
+  swap: {
+    mode: "sequential",
+    overlapMs: 0,
+    microDelayMs: 70,
+  },
+  customRenderer: "kinetic-top-build",
+  build: {
+    firstWordDurationMs: 360,
+    pushDurationMs: 500,
+    exitDurationMs: 320,
+    holdMs: 1100,
+    betweenPhrasesMs: 180,
+    entryOffsetYPx: -28,
+    lineGapPx: 12,
+    firstWordYPx: -14,
+    entryScale: 0.992,
+    entryBlurPx: 2.4,
+    reflowBlurPx: 0.7,
+    exitYPx: 10,
+    exitBlurPx: 1.2,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    exitEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  },
+};
+
+const DEFAULT_PHRASES: readonly (readonly string[])[] = [
+  ["Drop", "into", "place"],
+  ["Words", "settle", "lower"],
+  ["Build", "from", "above"],
+];
+
+export interface ShortSlideDownProps {
+  /** Phrases to cycle through. Each phrase is an array of words. */
+  phrases?: string[][];
+  /** Override build params (gap, duration, blur, etc.). */
+  build?: Partial<TextAnimationBuildSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function ShortSlideDown({
+  phrases,
+  build,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: ShortSlideDownProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      build: { ...BASE_SPEC.build, ...build },
+    }),
+    [build],
+  );
+  const effectivePhrases = useMemo(() => phrases ?? DEFAULT_PHRASES.map((p) => [...p]), [phrases]);
+  return (
+    <TextAnimator
+      spec={spec}
+      phrases={effectivePhrases}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/short-slide-right.stories.tsx b/animata/text/short-slide-right.stories.tsx
new file mode 100644
index 00000000..3e85ef3c
--- /dev/null
+++ b/animata/text/short-slide-right.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ShortSlideRight from "@/animata/text/short-slide-right";
+
+const meta = {
+  title: "Text/Short Slide Right",
+  component: ShortSlideRight,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ShortSlideRight>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Move with intent.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/short-slide-right.tsx b/animata/text/short-slide-right.tsx
new file mode 100644
index 00000000..611c8cee
--- /dev/null
+++ b/animata/text/short-slide-right.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "short-slide-right",
+  target: "per-word",
+  enter: {
+    durationMs: 520,
+    staggerMs: 92,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    from: {
+      opacity: 1,
+      xPx: -24,
+      blurPx: 1.2,
+    },
+    to: {
+      opacity: 1,
+      xPx: 0,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 320,
+    staggerMs: 0,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    from: {
+      opacity: 1,
+      xPx: 0,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      xPx: 12,
+      blurPx: 1,
+    },
+  },
+  swap: {
+    mode: "sequential",
+    overlapMs: 0,
+    microDelayMs: 70,
+  },
+  customRenderer: "shared-slide-opacity-stage",
+  build: {
+    wordOpacityDurationMs: 210,
+    wordOpacityFrom: 0,
+    wordOpacityTo: 1,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Move with intent.",
+  "Words glide across.",
+  "Build the rhythm.",
+];
+
+export interface ShortSlideRightProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function ShortSlideRight({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: ShortSlideRightProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/soft-blur-in.stories.tsx b/animata/text/soft-blur-in.stories.tsx
new file mode 100644
index 00000000..4d14a057
--- /dev/null
+++ b/animata/text/soft-blur-in.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SoftBlurIn from "@/animata/text/soft-blur-in";
+
+const meta = {
+  title: "Text/Soft Blur In",
+  component: SoftBlurIn,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SoftBlurIn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Think different.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/soft-blur-in.tsx b/animata/text/soft-blur-in.tsx
new file mode 100644
index 00000000..e93357d0
--- /dev/null
+++ b/animata/text/soft-blur-in.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "soft-blur-in",
+  target: "per-character",
+  enter: {
+    durationMs: 900,
+    staggerMs: 25,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    from: {
+      opacity: 0,
+      yPx: 16,
+      blurPx: 12,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 600,
+    staggerMs: 15,
+    easing: "cubic-bezier(0.64, 0, 0.78, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+      blurPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: -16,
+      blurPx: 12,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 300,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Think different.",
+  "Built to flow.",
+  "Motion with intent.",
+];
+
+export interface SoftBlurInProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function SoftBlurIn({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: SoftBlurInProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/split-text.tsx b/animata/text/split-text.tsx
index d8707766..a4927040 100644
--- a/animata/text/split-text.tsx
+++ b/animata/text/split-text.tsx
@@ -18,7 +18,7 @@ export default function SplitText({
   return (
     <div
       className={cn(
-        "relative mx-auto cursor-sword text-4xl font-black uppercase text-yellow-500 md:text-5xl lg:text-9xl",
+        "relative mx-auto text-4xl font-black uppercase text-yellow-500 md:text-5xl lg:text-9xl",
         className,
       )}
     >
@@ -38,8 +38,9 @@ export default function SplitText({
                 setIndex(undefined);
               });
             }}
-            key={index}
-            className="relative inline-flex h-full cursor-sword flex-col leading-none"
+            key={`${letter}-${index}`}
+            className="relative inline-flex h-full flex-col leading-none"
+            aria-hidden
           >
             {/** top half */}
             <span
diff --git a/animata/text/spring-scale-in.stories.tsx b/animata/text/spring-scale-in.stories.tsx
new file mode 100644
index 00000000..43ace6d8
--- /dev/null
+++ b/animata/text/spring-scale-in.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SpringScaleIn from "@/animata/text/spring-scale-in";
+
+const meta = {
+  title: "Text/Spring Scale In",
+  component: SpringScaleIn,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SpringScaleIn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Fast. Crisp. Fluid.",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/spring-scale-in.tsx b/animata/text/spring-scale-in.tsx
new file mode 100644
index 00000000..f03f2dce
--- /dev/null
+++ b/animata/text/spring-scale-in.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "spring-scale-in",
+  target: "per-word",
+  enter: {
+    durationMs: 360,
+    staggerMs: 95,
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    from: {
+      opacity: 0,
+      scale: 0.7,
+    },
+    to: {
+      opacity: 1,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 200,
+    staggerMs: 80,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      scale: 1,
+    },
+    to: {
+      opacity: 0,
+      scale: 0.8,
+    },
+  },
+  swap: {
+    mode: "crossfade",
+    overlapMs: 0,
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Fast. Crisp. Fluid.",
+  "Pop into place.",
+  "Smooth by default.",
+];
+
+export interface SpringScaleInProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function SpringScaleIn({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: SpringScaleInProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/text-animator.css b/animata/text/text-animator.css
new file mode 100644
index 00000000..c13017cc
--- /dev/null
+++ b/animata/text/text-animator.css
@@ -0,0 +1,50 @@
+@reference "tailwindcss";
+
+.text-animation-stage {
+  container-type: inline-size;
+  @apply grid h-full min-h-0 place-items-center w-full;
+  grid-template-areas: "title";
+  padding: clamp(1rem, 5cqi, 1.5rem);
+  perspective: 900px;
+}
+
+.text-animation-title {
+  @apply m-0 pointer-events-none text-center tabular-nums text-balance font-medium tracking-tight;
+  transform-style: preserve-3d;
+  font-size: clamp(1.2rem, 10cqi, 1.725rem);
+  grid-area: title;
+  line-height: 1.08;
+}
+
+.text-animation-unit {
+  @apply inline-block whitespace-pre backface-hidden;
+  transform-origin: 50% 55%;
+  will-change: transform, opacity, filter;
+}
+
+.text-animation-unit.line {
+  @apply block;
+}
+
+.text-animation-kinetic-line {
+  @apply relative;
+  height: 72px;
+  width: min(92%, 270px);
+}
+
+.text-animation-kinetic-stack {
+  @apply relative;
+  height: 132px;
+  width: min(92%, 270px);
+}
+
+.text-animation-kinetic-word {
+  @apply backface-hidden absolute left-1/2 top-1/2 whitespace-nowrap font-medium tracking-tight;
+  font-size: clamp(1.375rem, 10cqi, 2.125rem);
+  line-height: 1.1;
+  will-change: transform, opacity, filter;
+}
+
+.text-animation-fallback {
+  opacity: 0.74;
+}
diff --git a/animata/text/text-animator.tsx b/animata/text/text-animator.tsx
new file mode 100644
index 00000000..b3407f9e
--- /dev/null
+++ b/animata/text/text-animator.tsx
@@ -0,0 +1,981 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+import "./text-animator.css";
+
+export type TextAnimationTarget = "whole" | "per-character" | "per-word" | "per-line";
+
+export type TextAnimationStaggerMode = "normal" | "center-out" | "edges-in" | "reverse";
+
+export type TextAnimationCustomRenderer =
+  | "kinetic-center-build"
+  | "kinetic-top-build"
+  | "shared-slide-opacity-stage";
+
+export interface TextAnimationFrameSpec {
+  opacity?: number;
+  xPx?: number;
+  yPx?: number;
+  zPx?: number;
+  scale?: number;
+  rotateDeg?: number;
+  rotateXDeg?: number;
+  rotateYDeg?: number;
+  blurPx?: number;
+  letterSpacingEm?: number;
+  color?: string;
+}
+
+export interface TextAnimationPhaseSpec {
+  durationMs: number;
+  staggerMs: number;
+  easing: string;
+  from: TextAnimationFrameSpec;
+  to: TextAnimationFrameSpec;
+}
+
+export interface TextAnimationSwapSpec {
+  mode?: string;
+  overlapMs?: number;
+  microDelayMs?: number;
+}
+
+export interface TextAnimationBuildSpec {
+  firstWordDurationMs?: number;
+  pushDurationMs?: number;
+  exitDurationMs?: number;
+  holdMs?: number;
+  betweenPhrasesMs?: number;
+  entryOffsetPx?: number;
+  entryOffsetYPx?: number;
+  wordGapPx?: number;
+  lineGapPx?: number;
+  firstWordYPx?: number;
+  entryScale?: number;
+  entryBlurPx?: number;
+  reflowBlurPx?: number;
+  exitYPx?: number;
+  exitBlurPx?: number;
+  easing?: string;
+  exitEasing?: string;
+  wordOpacityFrom?: number;
+  wordOpacityTo?: number;
+  wordOpacityDurationMs?: number;
+}
+
+export interface TextAnimationSpec {
+  id?: string;
+  target?: TextAnimationTarget;
+  enter: TextAnimationPhaseSpec;
+  exit: TextAnimationPhaseSpec;
+  swap?: TextAnimationSwapSpec;
+  customRenderer?: TextAnimationCustomRenderer;
+  staggerMode?: TextAnimationStaggerMode;
+  build?: TextAnimationBuildSpec;
+}
+
+export interface TextAnimatorProps {
+  spec: TextAnimationSpec;
+  samples?: string[];
+  phrases?: string[][];
+  className?: string;
+  stageClassName?: string;
+  speed?: number;
+  holdMs?: number;
+  gapMs?: number;
+  yTravel?: number;
+}
+
+const DEFAULT_RUNTIME = {
+  tileSpeed: 0.72,
+  tileHoldMs: 550,
+  tileGapMs: 320,
+  tileYTravel: 0.58,
+};
+
+type TileFrame = {
+  color?: string;
+  filter: string;
+  letterSpacingEm: number | null;
+  opacity: number;
+  transform: string;
+};
+
+type LoopController = {
+  animations: Set<Animation>;
+  cancelled: boolean;
+  stage: HTMLElement;
+  timers: Set<number>;
+  pendingResolvers: Set<() => void>;
+  runtime: typeof DEFAULT_RUNTIME;
+};
+
+type KineticStageFrame = { filter: string; opacity: number; transform: string };
+
+type TextPart = { text: string; animate: boolean; block?: boolean };
+
+function splitTextByTarget(text: string, target: TextAnimationTarget): TextPart[] {
+  if (target === "whole") return [{ text, animate: true }];
+  if (target === "per-word") {
+    const parts: TextPart[] = [];
+    for (const m of text.matchAll(/(\S+|\s+)/g)) {
+      parts.push({ text: m[0], animate: /\S/.test(m[0]) });
+    }
+    return parts;
+  }
+  if (target === "per-line") {
+    return text.split("\n").map((line) => ({ text: line, animate: true, block: true }));
+  }
+  return [...text].map((c) => ({ text: c, animate: true }));
+}
+
+function getStaggerRanks(count: number, mode: TextAnimationStaggerMode = "normal"): number[] {
+  const order: number[] = [];
+  if (mode === "center-out") {
+    const center = (count - 1) / 2;
+    for (let i = 0; i < count; i += 1) order.push(i);
+    order.sort((a, b) => Math.abs(a - center) - Math.abs(b - center) || a - b);
+  } else if (mode === "edges-in") {
+    let l = 0;
+    let r = count - 1;
+    while (l <= r) {
+      order.push(l);
+      if (r !== l) order.push(r);
+      l += 1;
+      r -= 1;
+    }
+  } else if (mode === "reverse") {
+    for (let i = count - 1; i >= 0; i -= 1) order.push(i);
+  } else {
+    for (let i = 0; i < count; i += 1) order.push(i);
+  }
+  const ranks = Array.from({ length: count }, () => 0);
+  order.forEach((index, rank) => {
+    ranks[index] = rank;
+  });
+  return ranks;
+}
+
+function toAnimationFrame(values: TextAnimationFrameSpec | undefined, yTravel: number): TileFrame {
+  const f = values ?? {};
+  const frame: TileFrame = {
+    filter: `blur(${f.blurPx ?? 0}px)`,
+    letterSpacingEm: f.letterSpacingEm ?? null,
+    opacity: f.opacity ?? 1,
+    transform: `translate3d(${f.xPx ?? 0}px, ${(f.yPx ?? 0) * yTravel}px, ${
+      f.zPx ?? 0
+    }px) rotateX(${f.rotateXDeg ?? 0}deg) rotateY(${f.rotateYDeg ?? 0}deg) rotate(${
+      f.rotateDeg ?? 0
+    }deg) scale(${f.scale ?? 1})`,
+  };
+  if (f.color) frame.color = f.color;
+  return frame;
+}
+
+function materializeTileFrame(
+  frame: TileFrame,
+  unit: HTMLElement,
+  index: number,
+  count: number,
+  target: TextAnimationTarget,
+): Keyframe {
+  const k: Keyframe = {
+    filter: frame.filter,
+    letterSpacing: "0em",
+    marginLeft: "0em",
+    marginRight: "0em",
+    opacity: frame.opacity,
+    transform: frame.transform,
+  };
+  if (frame.color) k.color = frame.color;
+  if (frame.letterSpacingEm == null) return k;
+  if (target === "per-character") {
+    const text = unit.textContent ?? "";
+    const isGlyph = /\S/.test(text);
+    const halfGap = `${frame.letterSpacingEm / 2}em`;
+    k.marginLeft = isGlyph && index > 0 ? halfGap : "0em";
+    k.marginRight = isGlyph && index < count - 1 ? halfGap : "0em";
+    return k;
+  }
+  k.letterSpacing = `${frame.letterSpacingEm}em`;
+  return k;
+}
+
+function makeTitle(doc: Document, text: string, target: TextAnimationTarget) {
+  const title = doc.createElement("h3");
+  title.className = "text-animation-title";
+  const units: HTMLSpanElement[] = [];
+  splitTextByTarget(text, target).forEach((part) => {
+    const unit = doc.createElement("span");
+    unit.className = `text-animation-unit${part.block ? " line" : ""}`;
+    unit.textContent = part.text;
+    title.appendChild(unit);
+    if (part.animate) units.push(unit);
+  });
+  return { title, units };
+}
+
+function applyPhaseStart(
+  units: HTMLElement[],
+  phase: "enter" | "exit",
+  spec: TextAnimationSpec,
+  stage: HTMLElement,
+  yTravel: number,
+) {
+  const baseFrame = toAnimationFrame(spec[phase].from, yTravel);
+  units.forEach((unit, index) => {
+    const kf = materializeTileFrame(
+      baseFrame,
+      unit,
+      index,
+      units.length,
+      spec.target ?? "per-character",
+    );
+    Object.assign(unit.style, kf);
+  });
+  stage.dataset.animationPhase = phase;
+}
+
+function animatePhase(
+  controller: LoopController,
+  units: HTMLElement[],
+  phase: "enter" | "exit",
+  spec: TextAnimationSpec,
+): number {
+  const { tileSpeed, tileYTravel } = controller.runtime;
+  const currentPhase = spec[phase];
+  const fromFrame = toAnimationFrame(currentPhase.from, tileYTravel);
+  const toFrame = toAnimationFrame(currentPhase.to, tileYTravel);
+  const duration = Math.max(140, Math.round(currentPhase.durationMs * tileSpeed));
+  const delayStep = Math.max(0, Math.round(currentPhase.staggerMs * tileSpeed));
+  const ranks = getStaggerRanks(units.length, spec.staggerMode ?? "normal");
+
+  units.forEach((unit, index) => {
+    const fromK = materializeTileFrame(
+      fromFrame,
+      unit,
+      index,
+      units.length,
+      spec.target ?? "per-character",
+    );
+    const toK = materializeTileFrame(
+      toFrame,
+      unit,
+      index,
+      units.length,
+      spec.target ?? "per-character",
+    );
+    registerAnimation(
+      controller,
+      unit.animate([fromK, toK], {
+        delay: ranks[index] * delayStep,
+        duration,
+        easing: currentPhase.easing,
+        fill: "forwards",
+      }),
+    );
+  });
+
+  return duration + Math.max(0, units.length - 1) * delayStep;
+}
+
+function createLoop(stage: HTMLElement, runtime: typeof DEFAULT_RUNTIME): LoopController {
+  return {
+    animations: new Set(),
+    cancelled: false,
+    stage,
+    timers: new Set(),
+    pendingResolvers: new Set(),
+    runtime,
+  };
+}
+
+function cleanupLoop(c: LoopController) {
+  c.cancelled = true;
+  c.timers.forEach((t) => {
+    window.clearTimeout(t);
+  });
+  c.timers.clear();
+  c.animations.forEach((a) => {
+    a.cancel();
+  });
+  c.animations.clear();
+  // Resolve any in-flight sleep() promises so awaiting loop functions can
+  // observe the cancellation flag and unwind, releasing closures + DOM refs.
+  c.pendingResolvers.forEach((resolve) => {
+    resolve();
+  });
+  c.pendingResolvers.clear();
+  clearStage(c.stage);
+}
+
+function registerAnimation(c: LoopController, a: Animation): Animation {
+  c.animations.add(a);
+  void a.finished.finally(() => c.animations.delete(a));
+  return a;
+}
+
+function schedule(c: LoopController, cb: () => void, delay: number) {
+  if (c.cancelled) return;
+  const t = window.setTimeout(() => {
+    c.timers.delete(t);
+    if (!c.cancelled) cb();
+  }, delay);
+  c.timers.add(t);
+}
+
+function sleep(c: LoopController, delay: number): Promise<void> {
+  if (c.cancelled || delay <= 0) return Promise.resolve();
+  return new Promise((resolve) => {
+    const wrapped = () => {
+      c.pendingResolvers.delete(wrapped);
+      resolve();
+    };
+    c.pendingResolvers.add(wrapped);
+    schedule(c, wrapped, delay);
+  });
+}
+
+function waitForAnimations(animations: Animation[]) {
+  return Promise.all(animations.map((a) => a.finished.catch(() => undefined)));
+}
+
+function clearStage(stage: HTMLElement) {
+  while (stage.firstChild) stage.removeChild(stage.firstChild);
+}
+
+function mix(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+function setKineticPose(el: HTMLElement, frame: KineticStageFrame) {
+  el.style.filter = frame.filter;
+  el.style.opacity = `${frame.opacity}`;
+  el.style.transform = frame.transform;
+}
+
+function buildKineticFrame(
+  x: number,
+  y: number,
+  scale: number,
+  blur: number,
+  opacity: number,
+): KineticStageFrame {
+  return {
+    filter: `blur(${blur}px)`,
+    opacity,
+    transform: `translate(-50%, -50%) translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+  };
+}
+
+function titleFrame(values: TextAnimationFrameSpec | undefined, yTravel: number): Keyframe {
+  const f = values ?? {};
+  return {
+    filter: `blur(${f.blurPx ?? 0}px)`,
+    opacity: f.opacity ?? 1,
+    transform: `translate3d(${f.xPx ?? 0}px, ${(f.yPx ?? 0) * yTravel}px, 0) scale(${f.scale ?? 1})`,
+  };
+}
+
+async function runGenericLoop(c: LoopController, spec: TextAnimationSpec, samples: string[]) {
+  const { stage, runtime } = c;
+  const target = spec.target ?? "per-character";
+  const microDelay = spec.swap?.microDelayMs ?? 0;
+  // For crossfade swaps the new sample's enter starts `overlapMs` before the
+  // old sample's exit completes; the two titles share the stage's "title"
+  // grid area during that window. Other modes wait for exit + microDelay
+  // before the swap.
+  const overlap = spec.swap?.mode === "crossfade" ? (spec.swap?.overlapMs ?? 0) : 0;
+  let currentIndex = 0;
+  let currentTitle: HTMLElement | null = null;
+  let currentUnits: HTMLSpanElement[] = [];
+
+  const enterSample = (text: string): number => {
+    const { title, units } = makeTitle(stage.ownerDocument, text, target);
+    applyPhaseStart(units, "enter", spec, stage, runtime.tileYTravel);
+    clearStage(stage);
+    stage.appendChild(title);
+    currentTitle = title;
+    currentUnits = units;
+    return animatePhase(c, units, "enter", spec);
+  };
+
+  const firstEnter = enterSample(samples[currentIndex]);
+  await sleep(c, firstEnter + runtime.tileHoldMs);
+
+  while (!c.cancelled) {
+    const oldTitle = currentTitle;
+    const exitTotal = currentUnits.length ? animatePhase(c, currentUnits, "exit", spec) : 0;
+
+    if (overlap > 0 && oldTitle) {
+      // Crossfade: start the new enter while the old exit is still finishing.
+      await sleep(c, Math.max(0, exitTotal - overlap));
+      if (c.cancelled) break;
+
+      currentIndex = (currentIndex + 1) % samples.length;
+      const next = makeTitle(stage.ownerDocument, samples[currentIndex], target);
+      applyPhaseStart(next.units, "enter", spec, stage, runtime.tileYTravel);
+      // Mount alongside the still-exiting old title; both share grid-area "title".
+      stage.appendChild(next.title);
+      const nextEnter = animatePhase(c, next.units, "enter", spec);
+
+      // Drop the old title once its exit finishes (which is `overlap` ms from now).
+      schedule(c, () => oldTitle.remove(), overlap);
+
+      currentTitle = next.title;
+      currentUnits = next.units;
+
+      await sleep(c, nextEnter + runtime.tileHoldMs);
+    } else {
+      // Non-overlapping: wait for exit + microDelay, swap, gap, then enter.
+      await sleep(c, exitTotal + microDelay);
+      if (c.cancelled) break;
+
+      currentIndex = (currentIndex + 1) % samples.length;
+      const next = makeTitle(stage.ownerDocument, samples[currentIndex], target);
+      applyPhaseStart(next.units, "enter", spec, stage, runtime.tileYTravel);
+      clearStage(stage);
+      stage.appendChild(next.title);
+      currentTitle = next.title;
+      currentUnits = next.units;
+
+      await sleep(c, runtime.tileGapMs);
+      if (c.cancelled) break;
+
+      const nextEnter = animatePhase(c, next.units, "enter", spec);
+      await sleep(c, nextEnter + runtime.tileHoldMs);
+    }
+  }
+}
+
+async function runSharedSlideOpacityLoop(
+  c: LoopController,
+  spec: TextAnimationSpec,
+  samples: string[],
+) {
+  const { stage, runtime } = c;
+  const enter = spec.enter;
+  const exit = spec.exit;
+  const build = spec.build ?? {};
+  const titleDuration = Math.max(180, Math.round((enter.durationMs || 460) * runtime.tileSpeed));
+  const wordOpacityDuration = Math.max(
+    90,
+    Math.round((build.wordOpacityDurationMs ?? 170) * runtime.tileSpeed),
+  );
+  const wordStaggerMs = Math.max(0, Math.round((enter.staggerMs || 72) * runtime.tileSpeed));
+  const exitDuration = Math.max(140, Math.round((exit.durationMs || 300) * runtime.tileSpeed));
+  const holdMs = Math.max(380, runtime.tileHoldMs);
+  const gapMs = Math.max(180, runtime.tileGapMs);
+  const wordOpacityFrom = build.wordOpacityFrom ?? 0;
+  const wordOpacityTo = build.wordOpacityTo ?? 1;
+  let currentIndex = 0;
+
+  const enterPhrase = async (text: string): Promise<HTMLHeadingElement> => {
+    const { title, units } = makeTitle(stage.ownerDocument, text, spec.target ?? "per-word");
+    const fromFrame = titleFrame(enter.from, runtime.tileYTravel);
+    const toFrame = titleFrame(enter.to, runtime.tileYTravel);
+    Object.assign(title.style, fromFrame);
+    title.style.willChange = "transform, opacity, filter";
+    units.forEach((u) => {
+      u.style.opacity = `${wordOpacityFrom}`;
+      u.style.willChange = "opacity";
+    });
+    clearStage(stage);
+    stage.appendChild(title);
+    const animations = [
+      registerAnimation(
+        c,
+        title.animate([fromFrame, toFrame], {
+          duration: titleDuration,
+          easing: enter.easing,
+          fill: "forwards",
+        }),
+      ),
+      ...units.map((u, i) =>
+        registerAnimation(
+          c,
+          u.animate([{ opacity: wordOpacityFrom }, { opacity: wordOpacityTo }], {
+            delay: i * wordStaggerMs,
+            duration: wordOpacityDuration,
+            easing: enter.easing,
+            fill: "forwards",
+          }),
+        ),
+      ),
+    ];
+    await waitForAnimations(animations);
+    Object.assign(title.style, toFrame);
+    units.forEach((u) => {
+      u.style.opacity = `${wordOpacityTo}`;
+    });
+    return title;
+  };
+
+  const exitPhrase = async (title: HTMLHeadingElement | null) => {
+    if (!title || c.cancelled) return;
+    const fromFrame = titleFrame(exit.from, runtime.tileYTravel);
+    const toFrame = titleFrame(exit.to, runtime.tileYTravel);
+    Object.assign(title.style, fromFrame);
+    await waitForAnimations([
+      registerAnimation(
+        c,
+        title.animate([fromFrame, toFrame], {
+          duration: exitDuration,
+          easing: exit.easing,
+          fill: "forwards",
+        }),
+      ),
+    ]);
+    clearStage(stage);
+  };
+
+  while (!c.cancelled) {
+    const title = await enterPhrase(samples[currentIndex]);
+    await sleep(c, holdMs);
+    if (c.cancelled) break;
+    await exitPhrase(title);
+    await sleep(c, gapMs);
+    currentIndex = (currentIndex + 1) % samples.length;
+  }
+}
+
+async function runKineticCenterBuildLoop(
+  c: LoopController,
+  spec: TextAnimationSpec,
+  phrases: string[][],
+) {
+  const { stage, runtime } = c;
+  const build = spec.build ?? {};
+  const line = stage.ownerDocument.createElement("div");
+  const firstWordDuration = Math.max(
+    180,
+    Math.round((build.firstWordDurationMs ?? 360) * runtime.tileSpeed),
+  );
+  const pushDuration = Math.max(180, Math.round((build.pushDurationMs ?? 480) * runtime.tileSpeed));
+  const exitDuration = Math.max(140, Math.round((build.exitDurationMs ?? 260) * runtime.tileSpeed));
+  const holdMs = Math.max(380, Math.round((build.holdMs ?? 980) * runtime.tileSpeed));
+  const betweenPhrasesMs = Math.max(
+    120,
+    Math.round((build.betweenPhrasesMs ?? 220) * runtime.tileSpeed),
+  );
+  const entryOffsetPx = build.entryOffsetPx ?? 96;
+  const wordGapPx = build.wordGapPx ?? 16;
+  const firstWordLiftPx = build.firstWordYPx ?? 6;
+  const entryScale = build.entryScale ?? 0.992;
+  const entryBlurPx = build.entryBlurPx ?? 3.5;
+  const reflowBlurPx = build.reflowBlurPx ?? 0.8;
+  const exitLiftPx = build.exitYPx ?? -6;
+  const exitBlurPx = build.exitBlurPx ?? 2.5;
+  const easing = build.easing ?? "cubic-bezier(0.2, 0.8, 0.2, 1)";
+  const exitEasing = build.exitEasing ?? "cubic-bezier(0.4, 0, 0.2, 1)";
+  let phraseIndex = 0;
+  let words: HTMLSpanElement[] = [];
+  let positions: number[] = [];
+
+  clearStage(stage);
+  line.className = "text-animation-kinetic-line";
+  stage.appendChild(line);
+
+  const computePositions = (widths: number[]) => {
+    const total = widths.reduce((s, w) => s + w, 0) + wordGapPx * Math.max(0, widths.length - 1);
+    let cursor = -total / 2;
+    return widths.map((w) => {
+      const pos = cursor + w / 2;
+      cursor += w + wordGapPx;
+      return pos;
+    });
+  };
+
+  const buildPhrase = async (phraseWords: string[]) => {
+    line.innerHTML = "";
+    words = [];
+    positions = [];
+    for (const [index, text] of phraseWords.entries()) {
+      if (c.cancelled) return;
+      const word = stage.ownerDocument.createElement("span");
+      word.className = "text-animation-kinetic-word";
+      word.textContent = text;
+      line.appendChild(word);
+      const widths = Array.from(line.children, (n) => (n as HTMLElement).offsetWidth);
+      const nextPositions = computePositions(widths);
+      const animations: Animation[] = [];
+      if (index === 0) {
+        const start = buildKineticFrame(0, firstWordLiftPx, entryScale, entryBlurPx, 0);
+        setKineticPose(word, start);
+        animations.push(
+          registerAnimation(
+            c,
+            word.animate(
+              [
+                start,
+                {
+                  ...buildKineticFrame(0, firstWordLiftPx * 0.35, 0.998, entryBlurPx * 0.45, 0.78),
+                  offset: 0.58,
+                },
+                buildKineticFrame(0, 0, 1, 0, 1),
+              ],
+              { duration: firstWordDuration, easing, fill: "forwards" },
+            ),
+          ),
+        );
+      } else {
+        words.forEach((currentWord, i) => {
+          const cX = positions[i];
+          const nX = nextPositions[i];
+          animations.push(
+            registerAnimation(
+              c,
+              currentWord.animate(
+                [
+                  buildKineticFrame(cX, 0, 1, 0, 1),
+                  {
+                    ...buildKineticFrame(mix(cX, nX, 0.58), 0, 1, reflowBlurPx, 1),
+                    offset: 0.52,
+                  },
+                  buildKineticFrame(nX, 0, 1, 0, 1),
+                ],
+                { duration: pushDuration, easing, fill: "forwards" },
+              ),
+            ),
+          );
+        });
+        const targetX = nextPositions[index];
+        const startX = targetX + entryOffsetPx;
+        setKineticPose(word, buildKineticFrame(startX, 0, entryScale, entryBlurPx, 0));
+        animations.push(
+          registerAnimation(
+            c,
+            word.animate(
+              [
+                buildKineticFrame(startX, 0, entryScale, entryBlurPx, 0),
+                {
+                  ...buildKineticFrame(
+                    mix(startX, targetX, 0.72),
+                    0,
+                    0.998,
+                    entryBlurPx * 0.38,
+                    0.84,
+                  ),
+                  offset: 0.6,
+                },
+                buildKineticFrame(targetX, 0, 1, 0, 1),
+              ],
+              { duration: pushDuration, easing, fill: "forwards" },
+            ),
+          ),
+        );
+      }
+      await waitForAnimations(animations);
+      nextPositions.forEach((position, i) => {
+        const current = i === words.length ? word : words[i];
+        setKineticPose(current, buildKineticFrame(position, 0, 1, 0, 1));
+      });
+      if (!words.includes(word)) words.push(word);
+      positions = nextPositions;
+    }
+  };
+
+  const exitPhrase = async () => {
+    if (!words.length || c.cancelled) return;
+    const animations = words.map((word, i) => {
+      const p = positions[i];
+      return registerAnimation(
+        c,
+        word.animate(
+          [
+            buildKineticFrame(p, 0, 1, 0, 1),
+            {
+              ...buildKineticFrame(p, exitLiftPx * 0.45, 1, exitBlurPx * 0.55, 0.62),
+              offset: 0.52,
+            },
+            buildKineticFrame(p, exitLiftPx, 1, exitBlurPx, 0),
+          ],
+          { duration: exitDuration, easing: exitEasing, fill: "forwards" },
+        ),
+      );
+    });
+    await waitForAnimations(animations);
+    line.innerHTML = "";
+    words = [];
+    positions = [];
+  };
+
+  while (!c.cancelled) {
+    await buildPhrase(phrases[phraseIndex] ?? phrases[0]);
+    await sleep(c, holdMs);
+    if (c.cancelled) break;
+    await exitPhrase();
+    await sleep(c, betweenPhrasesMs);
+    phraseIndex = (phraseIndex + 1) % phrases.length;
+  }
+}
+
+async function runKineticTopBuildLoop(
+  c: LoopController,
+  spec: TextAnimationSpec,
+  phrases: string[][],
+) {
+  const { stage, runtime } = c;
+  const build = spec.build ?? {};
+  const line = stage.ownerDocument.createElement("div");
+  const firstWordDuration = Math.max(
+    180,
+    Math.round((build.firstWordDurationMs ?? 360) * runtime.tileSpeed),
+  );
+  const pushDuration = Math.max(180, Math.round((build.pushDurationMs ?? 500) * runtime.tileSpeed));
+  const exitDuration = Math.max(140, Math.round((build.exitDurationMs ?? 320) * runtime.tileSpeed));
+  const holdMs = Math.max(380, Math.round((build.holdMs ?? 1100) * runtime.tileSpeed));
+  const betweenPhrasesMs = Math.max(
+    120,
+    Math.round((build.betweenPhrasesMs ?? 220) * runtime.tileSpeed),
+  );
+  const entryOffsetYPx = build.entryOffsetYPx ?? -28;
+  const lineGapPx = build.lineGapPx ?? build.wordGapPx ?? 12;
+  const firstWordLiftPx = build.firstWordYPx ?? -14;
+  const entryScale = build.entryScale ?? 0.992;
+  const entryBlurPx = build.entryBlurPx ?? 2.4;
+  const reflowBlurPx = build.reflowBlurPx ?? 0.7;
+  const exitLiftPx = build.exitYPx ?? 10;
+  const exitBlurPx = build.exitBlurPx ?? 1.2;
+  const easing = build.easing ?? "cubic-bezier(0.2, 0.8, 0.2, 1)";
+  const exitEasing = build.exitEasing ?? "cubic-bezier(0.4, 0, 0.2, 1)";
+  let phraseIndex = 0;
+  let words: HTMLSpanElement[] = [];
+  let positions: number[] = [];
+
+  clearStage(stage);
+  line.className = "text-animation-kinetic-stack";
+  stage.appendChild(line);
+
+  const computePositions = (heights: number[]) => {
+    const total = heights.reduce((s, h) => s + h, 0) + lineGapPx * Math.max(0, heights.length - 1);
+    let cursor = -total / 2;
+    return heights.map((h) => {
+      const pos = cursor + h / 2;
+      cursor += h + lineGapPx;
+      return pos;
+    });
+  };
+
+  const buildPhrase = async (phraseWords: string[]) => {
+    line.innerHTML = "";
+    words = [];
+    positions = [];
+    for (const [index, text] of phraseWords.entries()) {
+      if (c.cancelled) return;
+      const word = stage.ownerDocument.createElement("span");
+      word.className = "text-animation-kinetic-word";
+      word.textContent = text;
+      line.appendChild(word);
+      const heights = Array.from(line.children, (n) => (n as HTMLElement).offsetHeight);
+      const nextPositions = computePositions(heights);
+      const animations: Animation[] = [];
+      if (index === 0) {
+        const start = buildKineticFrame(0, firstWordLiftPx, entryScale, entryBlurPx, 0);
+        setKineticPose(word, start);
+        animations.push(
+          registerAnimation(
+            c,
+            word.animate(
+              [
+                start,
+                {
+                  ...buildKineticFrame(0, firstWordLiftPx * 0.35, 0.998, entryBlurPx * 0.45, 0.78),
+                  offset: 0.58,
+                },
+                buildKineticFrame(0, 0, 1, 0, 1),
+              ],
+              { duration: firstWordDuration, easing, fill: "forwards" },
+            ),
+          ),
+        );
+      } else {
+        words.forEach((currentWord, i) => {
+          const cY = positions[i];
+          const nY = nextPositions[i];
+          animations.push(
+            registerAnimation(
+              c,
+              currentWord.animate(
+                [
+                  buildKineticFrame(0, cY, 1, 0, 1),
+                  {
+                    ...buildKineticFrame(0, mix(cY, nY, 0.58), 1, reflowBlurPx, 1),
+                    offset: 0.52,
+                  },
+                  buildKineticFrame(0, nY, 1, 0, 1),
+                ],
+                { duration: pushDuration, easing, fill: "forwards" },
+              ),
+            ),
+          );
+        });
+        const targetY = nextPositions[index];
+        setKineticPose(
+          word,
+          buildKineticFrame(0, targetY + entryOffsetYPx, entryScale, entryBlurPx, 0),
+        );
+        animations.push(
+          registerAnimation(
+            c,
+            word.animate(
+              [
+                buildKineticFrame(0, targetY + entryOffsetYPx, entryScale, entryBlurPx, 0),
+                {
+                  ...buildKineticFrame(
+                    0,
+                    mix(targetY + entryOffsetYPx, targetY, 0.72),
+                    0.998,
+                    entryBlurPx * 0.38,
+                    0.84,
+                  ),
+                  offset: 0.6,
+                },
+                buildKineticFrame(0, targetY, 1, 0, 1),
+              ],
+              { duration: pushDuration, easing, fill: "forwards" },
+            ),
+          ),
+        );
+      }
+      await waitForAnimations(animations);
+      nextPositions.forEach((position, i) => {
+        const current = i === words.length ? word : words[i];
+        setKineticPose(current, buildKineticFrame(0, position, 1, 0, 1));
+      });
+      if (!words.includes(word)) words.push(word);
+      positions = nextPositions;
+    }
+  };
+
+  const exitPhrase = async () => {
+    if (!words.length || c.cancelled) return;
+    const animations = words.map((word, i) => {
+      const p = positions[i];
+      return registerAnimation(
+        c,
+        word.animate(
+          [
+            buildKineticFrame(0, p, 1, 0, 1),
+            {
+              ...buildKineticFrame(0, p + exitLiftPx * 0.45, 1, exitBlurPx * 0.55, 0.62),
+              offset: 0.52,
+            },
+            buildKineticFrame(0, p + exitLiftPx, 1, exitBlurPx, 0),
+          ],
+          { duration: exitDuration, easing: exitEasing, fill: "forwards" },
+        ),
+      );
+    });
+    await waitForAnimations(animations);
+    line.innerHTML = "";
+    words = [];
+    positions = [];
+  };
+
+  while (!c.cancelled) {
+    await buildPhrase(phrases[phraseIndex] ?? phrases[0]);
+    await sleep(c, holdMs);
+    if (c.cancelled) break;
+    await exitPhrase();
+    await sleep(c, betweenPhrasesMs);
+    phraseIndex = (phraseIndex + 1) % phrases.length;
+  }
+}
+
+export default function TextAnimator({
+  spec,
+  samples,
+  phrases,
+  className,
+  stageClassName,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+}: TextAnimatorProps) {
+  const stageRef = useRef<HTMLDivElement | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  // Track samples/phrases by their *content* rather than array reference so
+  // a parent that hands us a fresh-but-identical array on every render
+  // doesn't tear down and restart the animation. 
/ are sentinels
+  // unlikely to appear in user-supplied copy.
+  const samplesKey = useMemo(() => samples?.join("
") ?? "", [samples]);
+  const phrasesKey = useMemo(() => phrases?.map((p) => p.join("
")).join("") ?? "", [phrases]);
+
+  // Refs let the effect read the latest samples/phrases without listing them
+  // as deps (we drive re-runs via the content keys above).
+  const samplesRef = useRef(samples);
+  const phrasesRef = useRef(phrases);
+  samplesRef.current = samples;
+  phrasesRef.current = phrases;
+
+  const effectiveSamples = samples?.length ? samples : ["Animation"];
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: samplesKey/phrasesKey track content; samples/phrases are read live from refs.
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    setFailed(false);
+    if (spec.id) stage.dataset.animationId = spec.id;
+
+    const runtime = {
+      tileSpeed: speed ?? DEFAULT_RUNTIME.tileSpeed,
+      tileHoldMs: holdMs ?? DEFAULT_RUNTIME.tileHoldMs,
+      tileGapMs: gapMs ?? DEFAULT_RUNTIME.tileGapMs,
+      tileYTravel: yTravel ?? DEFAULT_RUNTIME.tileYTravel,
+    };
+
+    const controller = createLoop(stage, runtime);
+    const renderer = spec.customRenderer;
+    const liveSamples = samplesRef.current;
+    const livePhrases = phrasesRef.current;
+    const effectiveSamples = liveSamples?.length ? liveSamples : ["Animation"];
+    const effectivePhrases = livePhrases?.length ? livePhrases : [["Build", "the", "line"]];
+
+    const launch = () => {
+      let loop: Promise<void>;
+      if (renderer === "kinetic-center-build") {
+        loop = runKineticCenterBuildLoop(controller, spec, effectivePhrases);
+      } else if (renderer === "kinetic-top-build") {
+        loop = runKineticTopBuildLoop(controller, spec, effectivePhrases);
+      } else if (renderer === "shared-slide-opacity-stage") {
+        loop = runSharedSlideOpacityLoop(controller, spec, effectiveSamples);
+      } else {
+        loop = runGenericLoop(controller, spec, effectiveSamples);
+      }
+      void loop.catch((error) => {
+        if (!controller.cancelled) {
+          console.error(`Failed to run text animation "${spec.id ?? "unknown"}"`, error);
+          setFailed(true);
+          cleanupLoop(controller);
+        }
+      });
+    };
+
+    schedule(controller, launch, Math.random() * 400);
+
+    return () => {
+      cleanupLoop(controller);
+    };
+  }, [spec, samplesKey, phrasesKey, speed, holdMs, gapMs, yTravel]);
+
+  return (
+    <div
+      className={cn(
+        "relative flex aspect-video w-full items-center justify-center overflow-hidden",
+        className,
+      )}
+    >
+      <div ref={stageRef} className={cn("text-animation-stage absolute inset-0", stageClassName)}>
+        {failed && effectiveSamples[0] ? (
+          <h3 className="text-animation-title text-animation-fallback">{effectiveSamples[0]}</h3>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/animata/text/text-border-animation.tsx b/animata/text/text-border-animation.tsx
index 50d530e8..5f698360 100644
--- a/animata/text/text-border-animation.tsx
+++ b/animata/text/text-border-animation.tsx
@@ -37,8 +37,15 @@ export default function TextBorderAnimation({ text = "Programming", className }:
   }, [isHoveredOut]);
 
   return (
-    <div onMouseEnter={handleHover} onMouseLeave={handleHoverExit} className="overflow-hidden">
-      <span className={cn("text-5xl font-bold text-foreground", className)}>{text}</span>
+    <div
+      onMouseEnter={handleHover}
+      onMouseLeave={handleHoverExit}
+      className="overflow-hidden"
+      aria-hidden
+    >
+      <span className={cn("text-xl xl:text-5xl font-medium text-foreground", className)}>
+        {text}
+      </span>
       <div className="relative mt-1 h-1 w-full">
         <div
           className={cn(
diff --git a/animata/text/top-down-letters.stories.tsx b/animata/text/top-down-letters.stories.tsx
new file mode 100644
index 00000000..c1174ffe
--- /dev/null
+++ b/animata/text/top-down-letters.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TopDownLetters from "@/animata/text/top-down-letters";
+
+const meta = {
+  title: "Text/Top-Down Letters",
+  component: TopDownLetters,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TopDownLetters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Signal",
+    speed: 0.72,
+    holdMs: 550,
+    gapMs: 320,
+    className:
+      "h-80 w-[32rem] rounded-lg border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+};
diff --git a/animata/text/top-down-letters.tsx b/animata/text/top-down-letters.tsx
new file mode 100644
index 00000000..9dd91e6c
--- /dev/null
+++ b/animata/text/top-down-letters.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useMemo } from "react";
+
+import TextAnimator, {
+  type TextAnimationPhaseSpec,
+  type TextAnimationSpec,
+} from "@/animata/text/text-animator";
+
+const BASE_SPEC: TextAnimationSpec = {
+  id: "top-down-letters",
+  target: "per-character",
+  enter: {
+    durationMs: 400,
+    staggerMs: 88,
+    easing: "cubic-bezier(0.18, 1, 0.32, 1)",
+    from: {
+      opacity: 0,
+      yPx: -46,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+    },
+  },
+  exit: {
+    durationMs: 280,
+    staggerMs: 28,
+    easing: "cubic-bezier(0.7, 0, 0.84, 0)",
+    from: {
+      opacity: 1,
+      yPx: 0,
+    },
+    to: {
+      opacity: 0,
+      yPx: 14,
+    },
+  },
+  swap: {
+    mode: "sequential",
+    overlapMs: 0,
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = ["Signal", "Header", "Vector"];
+
+export interface TopDownLettersProps {
+  /** Text(s) to animate. String = single, array = cycle through. */
+  text?: string | string[];
+  /** Override enter phase (merged with default). */
+  enter?: Partial<TextAnimationPhaseSpec>;
+  /** Override exit phase (merged with default). */
+  exit?: Partial<TextAnimationPhaseSpec>;
+  /** Global speed multiplier. Defaults to the runtime default (0.72) when omitted. */
+  speed?: number;
+  /** Hold time between enter and exit in ms. Defaults to the runtime default (550) when omitted. */
+  holdMs?: number;
+  /** Gap between cycles in ms. Defaults to the runtime default (320) when omitted. */
+  gapMs?: number;
+  /** Y-travel multiplier for all transforms. Defaults to the runtime default (0.58) when omitted. */
+  yTravel?: number;
+  className?: string;
+}
+
+export default function TopDownLetters({
+  text,
+  enter,
+  exit,
+  speed,
+  holdMs,
+  gapMs,
+  yTravel,
+  className,
+}: TopDownLettersProps = {}) {
+  const spec = useMemo<TextAnimationSpec>(
+    () => ({
+      ...BASE_SPEC,
+      enter: {
+        ...BASE_SPEC.enter,
+        ...enter,
+        from: { ...BASE_SPEC.enter.from, ...enter?.from },
+        to: { ...BASE_SPEC.enter.to, ...enter?.to },
+      },
+      exit: {
+        ...BASE_SPEC.exit,
+        ...exit,
+        from: { ...BASE_SPEC.exit.from, ...exit?.from },
+        to: { ...BASE_SPEC.exit.to, ...exit?.to },
+      },
+    }),
+    [enter, exit],
+  );
+  const samples = useMemo(() => {
+    if (text == null) return [...DEFAULT_SAMPLES];
+    return Array.isArray(text) ? text : [text];
+  }, [text]);
+  return (
+    <TextAnimator
+      spec={spec}
+      samples={samples}
+      speed={speed}
+      holdMs={holdMs}
+      gapMs={gapMs}
+      yTravel={yTravel}
+      className={className}
+    />
+  );
+}
diff --git a/animata/text/underline-hover-text.stories.tsx b/animata/text/underline-hover-text.stories.tsx
index e1ac132a..2ff84425 100644
--- a/animata/text/underline-hover-text.stories.tsx
+++ b/animata/text/underline-hover-text.stories.tsx
@@ -23,9 +23,4 @@ const Template: StoryFn<UnderlineHoverTextProps> = (args) => <UnderlineHoverText
 export const Primary = Template.bind({});
 Primary.args = {
   text: "Hover over me",
-  textColor: "text-yellow-600",
-  hoverTextColor: "hover:text-white",
-  hoverColor: "hover:after:bg-indigo-500",
-  fontSize: "text-2xl",
-  fontWeight: "font-medium",
 };
diff --git a/animata/text/underline-hover-text.tsx b/animata/text/underline-hover-text.tsx
index 586aa28f..589434a4 100644
--- a/animata/text/underline-hover-text.tsx
+++ b/animata/text/underline-hover-text.tsx
@@ -5,8 +5,22 @@ import { cn } from "@/lib/utils";
 
 export interface UnderlineHoverTextProps {
   text: string;
+  /**
+   * Resting text color. Tailwind class string.
+   */
   textColor?: string;
+  /**
+   * Text color applied on hover. Pass `hover:text-foo` style class, or leave
+   * empty to keep the resting color.
+   */
   hoverTextColor?: string;
+  /**
+   * Background color class applied to the underline stroke. Pass a plain
+   * class like `bg-zinc-900` (or any `bg-*`). The component drives visibility
+   * itself via the parent's `:hover` — if you pass a `hover:`-prefixed class
+   * here it'll never apply (the stroke element is not the hovered element)
+   * and the stroke will appear colorless on hover.
+   */
   hoverColor?: string;
   fontSize?: string;
   fontWeight?: string;
@@ -15,9 +29,9 @@ export interface UnderlineHoverTextProps {
 
 const UnderlineHoverText: React.FC<UnderlineHoverTextProps> = ({
   text,
-  textColor = "text-yellow-600",
-  hoverTextColor = "hover:text-white",
-  hoverColor = "hover:after:bg-indigo-500",
+  textColor = "text-zinc-900 dark:text-zinc-100",
+  hoverTextColor = "",
+  hoverColor = "bg-zinc-900 dark:bg-zinc-100",
   fontSize = "text-2xl",
   fontWeight = "font-medium",
   className,
@@ -25,19 +39,33 @@ const UnderlineHoverText: React.FC<UnderlineHoverTextProps> = ({
   return (
     <span
       className={cn(
-        "relative inline-block cursor-pointer p-2",
+        "group/underline relative inline-block cursor-pointer px-1 pb-1.5",
+        "tracking-tight",
+        "transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+        "will-change-transform hover:-translate-y-[2px]",
         fontSize,
         textColor,
         fontWeight,
-        "after:absolute after:bottom-0 after:left-0 after:h-1 after:w-full after:bg-gray-400",
-        "after:transition-all after:duration-150",
         hoverTextColor,
-        "hover:after:h-full",
-        hoverColor,
         className,
       )}
     >
       <span className="relative z-10">{text}</span>
+      {/* Soft baseline — always present, muted */}
+      <span
+        aria-hidden
+        className="pointer-events-none absolute bottom-0 left-0 h-px w-full bg-current opacity-25"
+      />
+      {/* Hover stroke — sweeps outward from the center */}
+      <span
+        aria-hidden
+        className={cn(
+          "pointer-events-none absolute -bottom-px left-1/2 h-[3px] w-0 -translate-x-1/2 rounded-full",
+          "transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+          "group-hover/underline:w-full",
+          hoverColor,
+        )}
+      />
     </span>
   );
 };
diff --git a/animata/text/wave-reveal.tsx b/animata/text/wave-reveal.tsx
index 89c73a5e..147c32bc 100644
--- a/animata/text/wave-reveal.tsx
+++ b/animata/text/wave-reveal.tsx
@@ -201,7 +201,7 @@ export default function WaveReveal({
   return (
     <div
       className={cn(
-        "relative flex flex-wrap justify-center whitespace-pre px-2 text-4xl font-black md:px-6 md:text-7xl",
+        "relative flex flex-wrap justify-center whitespace-pre px-2 text-4xl font-medium md:px-6 md:text-7xl",
         className,
       )}
     >
diff --git a/app/(main)/_landing/beam-cta.tsx b/app/(main)/_landing/beam-cta.tsx
index 6a929005..835537cd 100644
--- a/app/(main)/_landing/beam-cta.tsx
+++ b/app/(main)/_landing/beam-cta.tsx
@@ -16,7 +16,7 @@ export default function BeamCta() {
               Free &amp; Open Source
             </h2>
             <p className="mt-4 text-[17px] leading-[1.47] text-white/70">
-              194+ components, MIT licensed. Copy, paste, ship.
+              158+ components, MIT licensed. Copy, paste, ship.
             </p>
             <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row">
               <Link
diff --git a/app/(main)/_landing/hero-variants.tsx b/app/(main)/_landing/hero-variants.tsx
index 7d128a66..d9102a34 100644
--- a/app/(main)/_landing/hero-variants.tsx
+++ b/app/(main)/_landing/hero-variants.tsx
@@ -64,7 +64,7 @@ export function HeroVariantA() {
             Components with personality. For sites with personality.
           </h1>
           <p className="mt-5 max-w-[400px] text-[16px] leading-[1.6] text-[hsl(var(--text-secondary))]">
-            194+ animated React components. Copy the code, drop it in your project. Every
+            158+ animated React components. Copy the code, drop it in your project. Every
             interaction feels intentional.
           </p>
           <HeroCTAs />
@@ -120,13 +120,13 @@ export function HeroVariantB() {
     <HeroShell>
       <div className="mx-auto max-w-3xl text-center">
         <p className="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
-          194+ animated components
+          158+ animated components
         </p>
         <h1 className="font-[family-name:var(--font-display)] text-[clamp(2.5rem,6vw,4.5rem)] leading-[1] tracking-[-0.03em] text-foreground">
           Make every click feel like something.
         </h1>
         <p className="mx-auto mt-5 max-w-lg text-[17px] leading-[1.6] text-[hsl(var(--text-secondary))]">
-          194+ animated React components. Copy the code, paste into your project. Every interaction
+          158+ animated React components. Copy the code, paste into your project. Every interaction
           delights.
         </p>
         <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
@@ -222,7 +222,7 @@ export function HeroVariantC() {
             <span className="text-[hsl(var(--accent))]">Yours won&apos;t.</span>
           </h1>
           <p className="mt-5 max-w-[420px] text-[16px] leading-[1.6] text-[hsl(var(--text-secondary))]">
-            194+ animated React components that feel hand-crafted. Copy the code, paste it in. Ship
+            158+ animated React components that feel hand-crafted. Copy the code, paste it in. Ship
             something people notice.
           </p>
           <HeroCTAs />
diff --git a/app/(main)/_landing/section-one.tsx b/app/(main)/_landing/section-one.tsx
index ab7e51c5..925b386a 100644
--- a/app/(main)/_landing/section-one.tsx
+++ b/app/(main)/_landing/section-one.tsx
@@ -9,7 +9,7 @@ export default function SectionOne() {
       <div className="mx-auto max-w-7xl px-4 lg:px-[67px]">
         <div className="mb-8">
           <p className="text-xs font-bold uppercase tracking-[0.2em] text-[hsl(var(--accent))]">
-            194+ components
+            158+ components
           </p>
           <h2 className="mt-2 font-[family-name:var(--font-display)] text-[clamp(24px,4vw,36px)] leading-tight tracking-[-0.02em] text-foreground">
             Every one is live. Every one is free.
diff --git a/app/(main)/_landing/section-two.tsx b/app/(main)/_landing/section-two.tsx
index e5d1a20f..d86aa996 100644
--- a/app/(main)/_landing/section-two.tsx
+++ b/app/(main)/_landing/section-two.tsx
@@ -86,7 +86,7 @@ export default function SectionTwo() {
             href="/docs"
             className="inline-flex items-center justify-center rounded-full border border-border px-6 py-2.5 text-[14px] font-semibold text-foreground transition-colors hover:bg-foreground/5"
           >
-            Browse all 194+ components →
+            Browse all 158+ components →
           </Link>
         </div>
       </div>
diff --git a/app/(main)/_landing/stats-bento.tsx b/app/(main)/_landing/stats-bento.tsx
index b85aba1d..ae1980f0 100644
--- a/app/(main)/_landing/stats-bento.tsx
+++ b/app/(main)/_landing/stats-bento.tsx
@@ -24,6 +24,10 @@ const categories = docsConfig.sidebarNav
     count: item.items?.length ?? 0,
   }));
 
+const components = docsConfig.sidebarNav
+  .filter((item) => item.title !== "Getting Started" && item.title !== "Contributing")
+  .reduce((acc, group) => acc + (group.items?.length ?? 0), 0);
+
 const stargazers = [
   {
     name: "@jattinmanhas",
@@ -215,7 +219,7 @@ export default function StatsBento() {
             </div>
           </BentoCard>
 
-          {/* Card 2: 194+ Components + Categories */}
+          {/* Card 2: 158+ Components + Categories */}
           <BentoCard className="flex flex-col">
             <div className="flex-1">
               <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground sm:text-xs">
@@ -224,7 +228,7 @@ export default function StatsBento() {
               <div className="mt-2 flex items-baseline gap-1">
                 <RemountOnMouseIn>
                   <Counter
-                    targetValue={194}
+                    targetValue={components}
                     direction="up"
                     delay={0}
                     format={Formatter.number}
diff --git a/app/(main)/_landing/why-animata.tsx b/app/(main)/_landing/why-animata.tsx
index 0a478f86..2c09ff94 100644
--- a/app/(main)/_landing/why-animata.tsx
+++ b/app/(main)/_landing/why-animata.tsx
@@ -11,7 +11,7 @@ const cards = [
   },
   {
     title: "Free & Open Source",
-    description: "MIT licensed, community-driven. 194+ components and growing.",
+    description: "MIT licensed, community-driven. 158+ components and growing.",
   },
 ];
 
diff --git a/app/(main)/_landing/wound-and-promise.tsx b/app/(main)/_landing/wound-and-promise.tsx
index 7ad1e28c..81e62302 100644
--- a/app/(main)/_landing/wound-and-promise.tsx
+++ b/app/(main)/_landing/wound-and-promise.tsx
@@ -2,7 +2,7 @@ const steps = [
   {
     number: "1",
     title: "Browse",
-    description: "Pick any component from 194+ options",
+    description: "Pick any component from 158+ options",
   },
   {
     number: "2",
diff --git a/app/(main)/blog/[[...slug]]/page.tsx b/app/(main)/blog/[[...slug]]/page.tsx
index d7f0e9b6..c7e92065 100644
--- a/app/(main)/blog/[[...slug]]/page.tsx
+++ b/app/(main)/blog/[[...slug]]/page.tsx
@@ -2,7 +2,6 @@ import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import Balancer from "react-wrap-balancer";
 import { blogs as allBlogs } from "#site/content";
 import NavMenu from "@/app/(main)/docs/[[...slug]]/nav-menu";
 import { Mdx } from "@/components/mdx-components";
@@ -96,9 +95,7 @@ export default async function BlogPage({ params }: BlogPageProps) {
         <div className="space-y-2">
           <h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{blog.title}</h1>
           {blog.description && (
-            <p className="text-lg text-muted-foreground">
-              <Balancer>{blog.description}</Balancer>
-            </p>
+            <p className="text-lg text-balance text-muted-foreground">{blog.description}</p>
           )}
           <div
             className={cn("flex items-center space-x-2 text-sm text-muted-foreground", {
diff --git a/app/(main)/docs/[[...slug]]/page.tsx b/app/(main)/docs/[[...slug]]/page.tsx
index 53d2370f..8585c7a4 100644
--- a/app/(main)/docs/[[...slug]]/page.tsx
+++ b/app/(main)/docs/[[...slug]]/page.tsx
@@ -2,7 +2,6 @@ import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import Balancer from "react-wrap-balancer";
 import { docs as allDocs } from "#site/content";
 import NavMenu from "@/app/(main)/docs/[[...slug]]/nav-menu";
 import CarbonAds from "@/components/ads";
@@ -86,10 +85,7 @@ export default async function DocPage({ params }: DocPageProps) {
   const toc = await getTableOfContents(doc.content);
 
   return (
-    <main
-      id="main-content"
-      className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_150px]"
-    >
+    <main id="main-content" className="relative py-6 lg:gap-10 lg:py-8 xl:grid">
       <div className="mx-auto w-full min-w-0">
         <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
           <div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
@@ -103,9 +99,7 @@ export default async function DocPage({ params }: DocPageProps) {
         <div className="space-y-2">
           <h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{doc.title}</h1>
           {doc.description && (
-            <p className="w-full text-muted-foreground">
-              <Balancer>{doc.description}</Balancer>
-            </p>
+            <p className="w-full text-balance text-muted-foreground">{doc.description}</p>
           )}
           <div
             className={cn("flex items-center space-x-2 text-sm text-muted-foreground", {
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 0c5e2043..705991cb 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -11,7 +11,6 @@ import { cn } from "@/lib/utils";
 
 import ExitIntentModal from "./_landing/exit-intent-modal";
 import OpenSourceSection from "./_landing/open-source-section";
-import Reveal from "./_landing/reveal";
 import StatsBento from "./_landing/stats-bento";
 
 const Testimonials = React.lazy(() => import("./_landing/testimonials"));
@@ -46,13 +45,13 @@ function Hero() {
   return (
     <section className="px-6 pb-12 pt-16 sm:pb-16 sm:pt-20">
       <div className="mx-auto max-w-3xl text-center">
-        <h1 className="font-[family-name:var(--font-display)] text-[clamp(2.75rem,7vw,4.5rem)] leading-[1.05] tracking-[-0.01em] text-foreground">
+        <h1 className="font-(family-name:--font-display) text-[clamp(2.75rem,7vw,4.5rem)] leading-[1.05] tracking-[-0.01em] text-foreground">
           Ship faster.
           <br />
           Look better.
         </h1>
         <p className="mx-auto mt-6 max-w-md text-balance text-[clamp(15px,2vw,18px)] leading-[1.6] text-[hsl(var(--text-secondary))]">
-          194+ animated React components you can copy into any project. Free, open source, and ready
+          158+ animated React components you can copy into any project. Free, open source, and ready
           to use.
         </p>
 
@@ -110,7 +109,7 @@ function WhySection() {
   return (
     <section className="border-t border-border bg-[hsl(var(--surface-alt))] py-20 sm:py-24 lg:py-32">
       <div className="mx-auto max-w-6xl px-6">
-        <h2 className="font-[family-name:var(--font-display)] text-[clamp(28px,5vw,44px)] leading-[1] text-foreground">
+        <h2 className="font-(family-name:--font-display) text-[clamp(28px,5vw,44px)] leading-none text-foreground">
           Why teams
           <br />
           <span className="text-muted-foreground">choose animata.</span>
@@ -119,7 +118,7 @@ function WhySection() {
         <div className="mt-14 grid gap-10 sm:mt-16 sm:grid-cols-3 sm:gap-8">
           {reasons.map((reason, i) => (
             <div key={reason.title} className="border-t border-border pt-6">
-              <span className="font-[family-name:var(--font-mono)] text-[13px] text-muted-foreground">
+              <span className="font-(family-name:--font-mono) text-[13px] text-muted-foreground">
                 0{i + 1}
               </span>
               <h3 className="mt-2 text-[18px] font-semibold text-foreground sm:text-[20px]">
@@ -137,7 +136,7 @@ function WhySection() {
             href={componentsHref}
             className="text-[15px] font-medium text-[hsl(var(--link))] transition-colors hover:text-[hsl(var(--link-hover))]"
           >
-            See all 194+ components →
+            See all 158+ components →
           </Link>
         </div>
       </div>
diff --git a/app/(main)/text-animations/page.tsx b/app/(main)/text-animations/page.tsx
new file mode 100644
index 00000000..4971f72d
--- /dev/null
+++ b/app/(main)/text-animations/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { type ComponentType, useEffect, useRef, useState } from "react";
+
+import BlurOutUp from "@/animata/text/blur-out-up";
+import BottomUpLetters from "@/animata/text/bottom-up-letters";
+import FadeThrough from "@/animata/text/fade-through";
+import FocusBlurResolve from "@/animata/text/focus-blur-resolve";
+import KineticCenterBuild from "@/animata/text/kinetic-center-build";
+import LineByLineSlide from "@/animata/text/line-by-line-slide";
+import MaskRevealUp from "@/animata/text/mask-reveal-up";
+import MicroScaleFade from "@/animata/text/micro-scale-fade";
+import PerCharacterRise from "@/animata/text/per-character-rise";
+import PerWordCrossfade from "@/animata/text/per-word-crossfade";
+import ScaleDownFade from "@/animata/text/scale-down-fade";
+import SharedAxisY from "@/animata/text/shared-axis-y";
+import SharedAxisZ from "@/animata/text/shared-axis-z";
+import ShimmerSweep from "@/animata/text/shimmer-sweep";
+import ShortSlideDown from "@/animata/text/short-slide-down";
+import ShortSlideRight from "@/animata/text/short-slide-right";
+import SoftBlurIn from "@/animata/text/soft-blur-in";
+import SpringScaleIn from "@/animata/text/spring-scale-in";
+import TopDownLetters from "@/animata/text/top-down-letters";
+import Typewriter from "@/animata/text/typewriter";
+
+type Preset = {
+  id: string;
+  title: string;
+  description: string;
+  Component: ComponentType<{ className?: string }>;
+};
+
+const PRESETS: Preset[] = [
+  {
+    id: "soft-blur-in",
+    title: "Soft Blur",
+    description:
+      "Per-character fade-in with a gentle blur and upward motion. Apple's signature hero-title reveal.",
+    Component: SoftBlurIn,
+  },
+  {
+    id: "per-character-rise",
+    title: "Per-Character Rise",
+    description:
+      "Letters slide up from below with no blur — crisp, deliberate, kinetic. Apple's clean tvOS-style reveal.",
+    Component: PerCharacterRise,
+  },
+  {
+    id: "per-word-crossfade",
+    title: "Per-Word Crossfade",
+    description:
+      "Words gently fade into place one after another, with a short vertical drift for a calm keynote rhythm.",
+    Component: PerWordCrossfade,
+  },
+  {
+    id: "spring-scale-in",
+    title: "Spring Scale In",
+    description:
+      "Words pop in with a soft overshoot scale, like a physical spring settling into place.",
+    Component: SpringScaleIn,
+  },
+  {
+    id: "mask-reveal-up",
+    title: "Mask Reveal Up",
+    description: "Lines reveal upward with a soft masked feel and compact stagger.",
+    Component: MaskRevealUp,
+  },
+  {
+    id: "line-by-line-slide",
+    title: "Line-by-Line Slide",
+    description:
+      "Each line enters from the left with a staggered slide and exits to the right for a flowing paragraph reveal.",
+    Component: LineByLineSlide,
+  },
+  {
+    id: "typewriter",
+    title: "Typewriter",
+    description: "Per-character stepped reveal with a minimal editorial typing rhythm.",
+    Component: Typewriter,
+  },
+  {
+    id: "micro-scale-fade",
+    title: "Micro Scale Fade",
+    description: "A calm, tiny scale pop used as subtle premium polish for labels and headings.",
+    Component: MicroScaleFade,
+  },
+  {
+    id: "shimmer-sweep",
+    title: "Shimmer Sweep",
+    description:
+      "A subtle sweep across a clean headline, blending in while gliding from left to center.",
+    Component: ShimmerSweep,
+  },
+  {
+    id: "fade-through",
+    title: "Fade Through",
+    description:
+      "A Material-style content transition: old fades out, new fades in with a soft delay.",
+    Component: FadeThrough,
+  },
+  {
+    id: "shared-axis-y",
+    title: "Shared Axis Y",
+    description: "Per-word hard-cut transition with staircase timing for sharp editorial swaps.",
+    Component: SharedAxisY,
+  },
+  {
+    id: "shared-axis-z",
+    title: "Shared Axis Z",
+    description: "Scale-based shared-axis transition for focus shifts and context depth.",
+    Component: SharedAxisZ,
+  },
+  {
+    id: "blur-out-up",
+    title: "Blur Out Up",
+    description: "Words arrive clean and depart upward with increasing blur for airy exits.",
+    Component: BlurOutUp,
+  },
+  {
+    id: "scale-down-fade",
+    title: "Scale Down Fade",
+    description: "Subtle premium settle-in with a restrained scale-down fade on exit.",
+    Component: ScaleDownFade,
+  },
+  {
+    id: "focus-blur-resolve",
+    title: "Focus Blur Resolve",
+    description: "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
+    Component: FocusBlurResolve,
+  },
+  {
+    id: "bottom-up-letters",
+    title: "Bottom-Up Letters",
+    description:
+      "Letters rise from below in a pronounced staircase, one symbol at a time, with zero blur.",
+    Component: BottomUpLetters,
+  },
+  {
+    id: "top-down-letters",
+    title: "Top-Down Letters",
+    description:
+      "Letters descend from above in a pronounced staircase, one symbol at a time, with zero blur.",
+    Component: TopDownLetters,
+  },
+  {
+    id: "kinetic-center-build",
+    title: "Kinetic Center Build",
+    description:
+      "A word appears in the center; each new word enters from right to left with a soft blur and pushes the existing line until the full phrase locks centered.",
+    Component: KineticCenterBuild,
+  },
+  {
+    id: "short-slide-right",
+    title: "Short Slide Right",
+    description:
+      "The whole phrase glides in from the left as one compact move, while the words themselves are revealed in sequence only through opacity.",
+    Component: ShortSlideRight,
+  },
+  {
+    id: "short-slide-down",
+    title: "Short Slide Down",
+    description:
+      "Each new word drops in from above into its own line and pushes the existing stack downward until a centered three-line composition locks in place.",
+    Component: ShortSlideDown,
+  },
+];
+
+function LazyTile({ preset }: { preset: Preset }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || visible) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            observer.disconnect();
+            break;
+          }
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [visible]);
+
+  const { Component } = preset;
+
+  return (
+    <article ref={ref} className="flex flex-col gap-3">
+      <div className="relative aspect-video overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        {visible ? <Component className="absolute inset-0" /> : null}
+      </div>
+      <div>
+        <h3 className="font-semibold text-foreground">{preset.title}</h3>
+        <p className="mt-1 text-sm text-muted-foreground">{preset.description}</p>
+      </div>
+    </article>
+  );
+}
+
+export default function TextAnimationsPage() {
+  return (
+    <div className="container mx-auto max-w-6xl px-4 py-12 md:py-16">
+      <header className="mb-10 md:mb-14">
+        <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">Text Animations</h1>
+        <p className="mt-3 max-w-2xl text-base text-muted-foreground md:text-lg">
+          Twenty keynote-style text effects. Each tile below lazy-mounts when it scrolls into view,
+          so animations only run when you can see them.
+        </p>
+      </header>
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {PRESETS.map((preset) => (
+          <LazyTile key={preset.id} preset={preset} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/ads.tsx b/components/ads.tsx
index 08c26435..ad185cda 100644
--- a/components/ads.tsx
+++ b/components/ads.tsx
@@ -1,11 +1,8 @@
 "use client";
 
-import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 export default function CarbonAds() {
-  const _pathname = usePathname();
-
   useEffect(() => {
     // Skip loading ads in development environment
     if (
@@ -36,5 +33,5 @@ export default function CarbonAds() {
     };
   }, []);
 
-  return <div id="carbon-container" />;
+  return <div id="carbon-container" className="min-h-48" />;
 }
diff --git a/components/component-card.tsx b/components/component-card.tsx
index 3b840c08..55fe18ca 100644
--- a/components/component-card.tsx
+++ b/components/component-card.tsx
@@ -19,10 +19,10 @@ export function ComponentCard({
   return (
     <section
       className={cn(
-        "relative flex h-full flex-col border border-border bg-gray-50 shadow-[var(--shadow-card)] transition-shadow duration-300 hover:shadow-[var(--shadow-card-hover)] dark:border-zinc-600 dark:bg-zinc-800",
+        "relative flex h-full flex-col border border-border bg-gray-50 shadow-(--shadow-card) transition-shadow duration-300 hover:shadow-(--shadow-card-hover) dark:border-zinc-600 dark:bg-zinc-800",
         className,
         {
-          "rounded-[var(--radius-card)]": rounded,
+          "rounded-(--radius-card)": rounded,
         },
       )}
     >
@@ -30,7 +30,7 @@ export function ComponentCard({
         className={cn(
           "flex shrink-0 items-center gap-4 border-b bg-gray-100 p-4 dark:border-b-zinc-700 dark:bg-zinc-700",
           {
-            "rounded-tl-[var(--radius-card)] rounded-tr-[var(--radius-card)]": rounded,
+            "rounded-tl-(--radius-card) rounded-tr-(--radius-card)": rounded,
             "px-6": !rounded,
           },
         )}
diff --git a/components/component-list-item.tsx b/components/component-list-item.tsx
index 67ebc562..10423a59 100644
--- a/components/component-list-item.tsx
+++ b/components/component-list-item.tsx
@@ -1,19 +1,66 @@
 "use client";
 
-import { lazy, Suspense, useState } from "react";
-
+import { ArrowUpRight } from "lucide-react";
+import { useInView } from "motion/react";
+import Link from "next/link";
+import type React from "react";
+import { lazy, Suspense, useRef, useState } from "react";
 import { CopyButton } from "@/components/copy-button";
 import { ReloadButton } from "@/components/reload-button";
 import { cn } from "@/lib/utils";
 
-function Actions({ copyId, onRefresh }: { copyId: string; onRefresh: () => void }) {
+const extractName = (nameLike?: string) => {
+  if (!nameLike) {
+    return "";
+  }
+
+  const part = nameLike.includes("/") ? nameLike.split("/").pop() : nameLike;
+  if (!part) {
+    return "";
+  }
+
+  return part.replaceAll("-", " ");
+};
+
+function Name({ name, href }: { name: string; href?: string }) {
+  return (
+    <div className="w-full p-2 text-muted-foreground text-xs flex justify-between">
+      <span className=" transition-all md:opacity-0 md:translate-y-full capitalize md:group-hover/component:opacity-100 md:group-hover/component:translate-y-0">
+        {name}
+      </span>
+      {href ? (
+        <Link
+          href={href}
+          className={cn(
+            "text-zinc-600 pe-2 origin-bottom-left transition-all hover:scale-125 hover:text-zinc-900 dark:text-white",
+          )}
+          aria-label="Open component page"
+        >
+          <ArrowUpRight className="size-4" />
+        </Link>
+      ) : null}
+    </div>
+  );
+}
+
+function Actions({
+  copyId,
+  href,
+  onRefresh,
+}: {
+  href?: string;
+  copyId: string;
+  onRefresh: () => void;
+}) {
   return (
     <div className="inline-flex w-full justify-end p-2">
-      <CopyButton
-        className="bg-white text-zinc-600 shadow-none dark:bg-zinc-950 dark:text-white"
-        proxyId={`source-${copyId}`}
-        value=""
-      />
+      {!href?.length && (
+        <CopyButton
+          className="bg-white text-zinc-600 shadow-none dark:bg-zinc-950 dark:text-white"
+          proxyId={`source-${copyId}`}
+          value=""
+        />
+      )}
       <ReloadButton
         className="bg-white text-zinc-600 shadow-none dark:bg-zinc-950 dark:text-white"
         onClick={onRefresh}
@@ -27,34 +74,50 @@ const lazyList: Record<string, React.LazyExoticComponent<() => React.JSX.Element
   "status-button": lazy(() => import("@/animata/button/status-button")),
 };
 
+function DisplayInView({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  // not setting to once: true, so that it unmounts the component this triggering re-render
+  const isInView = useInView(ref);
+  return (
+    <div ref={ref} className="w-full h-full flex items-center justify-center">
+      {isInView && children}
+    </div>
+  );
+}
+
 export default function ComponentListItem({
   children,
   className,
   copyId,
+  href,
   lazy,
+  alwaysVisible,
   ...props
 }: {
   copyId: string;
+  href?: string;
   className?: string;
   children: React.ReactNode;
   lazy?: boolean;
+  alwaysVisible?: boolean;
 }) {
   const [forceUpdate, setForceUpdate] = useState(0);
   const Component = lazy && Reflect.has(lazyList, copyId) ? lazyList[copyId] : null;
   return (
-    <div {...props} className={cn("component-list-item relative rounded-xl border", className)}>
-      <Actions copyId={copyId} onRefresh={() => setForceUpdate((prev) => prev + 1)} />
+    <div {...props} className={cn("group/component component-list-item relative", className)}>
+      <Actions copyId={copyId} href={href} onRefresh={() => setForceUpdate((prev) => prev + 1)} />
       <div
         key={`component-list-item-${copyId}-${forceUpdate}`}
-        className="flex min-h-56 flex-col items-center justify-center px-4 pb-4"
+        className="flex min-h-56 flex-col items-center justify-center"
       >
-        {children}
+        {!alwaysVisible ? <DisplayInView>{children}</DisplayInView> : children}
         {Component && (
           <Suspense fallback={<div className="h-full w-full" />}>
             <Component />
           </Suspense>
         )}
       </div>
+      <Name name={extractName(href || copyId)} href={href} />
     </div>
   );
 }
diff --git a/components/component-preview.tsx b/components/component-preview.tsx
index 7df26587..7df1f4d2 100644
--- a/components/component-preview.tsx
+++ b/components/component-preview.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { Fragment } from "react";
 
 import { Icons } from "@/components/icons";
 import { cn } from "@/lib/utils";
@@ -78,7 +78,12 @@ function PropsEditor({
     // Allow args with options even if value type isn't primitive
     if (argTypes[key]?.options) return true;
     const val = args[key];
-    return typeof val === "boolean" || typeof val === "number" || typeof val === "string";
+    return (
+      typeof val === "boolean" ||
+      typeof val === "number" ||
+      typeof val === "string" ||
+      Array.isArray(val)
+    );
   });
 
   if (editableArgs.length === 0) return null;
@@ -101,12 +106,12 @@ function PropsEditor({
           </button>
         )}
       </div>
-      <div className="grid gap-2">
+      <div className="grid gap-2 grid-cols-[auto_1fr]">
         {editableArgs.map(([key, value]) => (
-          <div key={key} className="flex items-center gap-3">
+          <Fragment key={key}>
             <label
               htmlFor={`prop-${key}`}
-              className="min-w-[120px] text-right font-mono text-xs text-muted-foreground"
+              className="min-w-[120px] flex items-center justify-end font-mono text-xs text-muted-foreground"
             >
               {key}
             </label>
@@ -148,7 +153,7 @@ function PropsEditor({
                 onChange={(e) => onChange(key, Number(e.target.value))}
                 className="h-7 w-24 rounded border bg-background px-2 font-mono text-xs"
               />
-            ) : (
+            ) : typeof value === "string" ? (
               <input
                 id={`prop-${key}`}
                 type="text"
@@ -156,8 +161,14 @@ function PropsEditor({
                 onChange={(e) => onChange(key, e.target.value)}
                 className="h-7 flex-1 rounded border bg-background px-2 font-mono text-xs"
               />
+            ) : Array.isArray(value) || typeof value === "object" ? (
+              <span className="h-fit rounded border bg-muted p-2 font-mono text-xs overflow-auto">
+                {JSON.stringify(value)}
+              </span>
+            ) : (
+              <span>Unsupported value</span>
             )}
-          </div>
+          </Fragment>
         ))}
       </div>
     </div>
diff --git a/components/icons.tsx b/components/icons.tsx
index c3332376..fb6b6493 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -1,4 +1,4 @@
-import { Combine, RectangleHorizontal, TableCellsSplit } from "lucide-react";
+import { Combine, RectangleHorizontal, TableCellsSplit, Type } from "lucide-react";
 
 type IconProps = React.HTMLAttributes<SVGElement>;
 
@@ -61,6 +61,7 @@ export const Icons = {
   ),
   bento: (props: IconProps) => <TableCellsSplit {...props} />,
   button: (props: IconProps) => <RectangleHorizontal {...props} />,
+  text: (props: IconProps) => <Type {...props} />,
   widget: (props: IconProps) => <Combine {...props} />,
   reactJS: (props: IconProps) => (
     <svg
diff --git a/components/in-view.tsx b/components/in-view.tsx
new file mode 100644
index 00000000..e62caefd
--- /dev/null
+++ b/components/in-view.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Renders children only once the wrapper scrolls into view. Useful for
+ * animations that should not start until the user can actually see them.
+ */
+export function InView({
+  children,
+  rootMargin = "200px",
+  className,
+}: {
+  children: React.ReactNode;
+  rootMargin?: string;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || visible) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            observer.disconnect();
+            break;
+          }
+        }
+      },
+      { rootMargin },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [visible, rootMargin]);
+
+  return (
+    <div ref={ref} className={className}>
+      {visible ? children : null}
+    </div>
+  );
+}
+
+export default InView;
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index fc815039..2f9caa8a 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -25,6 +25,7 @@ import { CopyButton, CopyNpmCommandButton, CopyTouchCommandButton } from "@/comp
 import { CopyProxy } from "@/components/copy-proxy";
 import { AnimataRenderer } from "@/components/dynamic-animata";
 import { FrameworkDocs } from "@/components/framework-docs";
+import { InView } from "@/components/in-view";
 import PreviewContainer from "@/components/preview-container";
 import { RegistryInstall } from "@/components/registry-install";
 import {
@@ -117,6 +118,7 @@ const components = {
   Alert,
   AlertTitle,
   AlertDescription,
+  InView,
   PreviewContainer,
   ...baseComponents,
   pre: ({
@@ -263,10 +265,15 @@ const components = {
   ),
   ComponentList: ({ children, className }: { children: React.ReactNode; className?: string }) => {
     return (
-      <div
-        className={cn("relative grid max-w-full gap-4 sm:grid-cols-2 lg:grid-cols-3", className)}
-      >
-        {children}
+      <div className="@container">
+        <div
+          className={cn(
+            "relative grid max-w-full border border-muted bg-muted gap-0.5 overflow-hidden sm:grid-cols-2 lg:grid-cols-3",
+            className,
+          )}
+        >
+          {children}
+        </div>
       </div>
     );
   },
@@ -279,12 +286,19 @@ interface MdxProps {
 }
 
 function stripImports(code: string) {
-  const importRegex = /^import\s+(\w+)\s+from\s+["']@\/animata\/([^"']+)["'];?\s*$/gm;
+  const animataRegex = /^import\s+(\w+)\s+from\s+["']@\/animata\/([^"']+)["'];?\s*$/gm;
   const imports: Array<{ name: string; subpath: string }> = [];
-  const strippedCode = code.replace(importRegex, (_, name, subpath) => {
+  let strippedCode = code.replace(animataRegex, (_, name, subpath) => {
     imports.push({ name, subpath });
     return "";
   });
+  // Also strip imports from @/components/ — these components are registered
+  // directly in the `components` map above (e.g. InView), so the import line
+  // in the MDX source would otherwise leave MDXRemote unable to resolve them.
+  strippedCode = strippedCode.replace(
+    /^import\s+\{?\s*\w+(?:\s*,\s*\w+)*\s*\}?\s+from\s+["']@\/components\/[^"']+["'];?\s*$/gm,
+    "",
+  );
   return { strippedCode, imports };
 }
 
diff --git a/config/docs.ts b/config/docs.ts
index 9a4b879c..5f007e5f 100644
--- a/config/docs.ts
+++ b/config/docs.ts
@@ -19,6 +19,7 @@ const createLinks = (category: string) => {
       title: doc.title,
       sortId: doc.slug === `/docs/${category}` ? "000" : doc.title,
       href: doc.slug,
+      label: doc.labels?.includes("new") ? "new" : undefined,
       items: [],
     }))
     .sort(sortAlphabetically);
@@ -94,7 +95,10 @@ const sidebarNav: SidebarNavItem[] = [
     ],
   },
   {
+    icon: "text",
     title: "Text",
+    label: `${-1 + createLinks("text").length}`,
+    href: "/docs/text",
     items: createLinks("text"),
   },
   {
diff --git a/content/docs/bento-grid/index.mdx b/content/docs/bento-grid/index.mdx
index 42b8a079..3b54581b 100644
--- a/content/docs/bento-grid/index.mdx
+++ b/content/docs/bento-grid/index.mdx
@@ -19,7 +19,7 @@ import Eight from "@/animata/bento-grid/eight";
   </ComponentListItem>
 
   <ComponentListItem copyId="three" className="flex-1 w-full">
-    <Three className="w-full" />
+    <Three className="w-fit" />
     ```tsx file=<rootDir>/animata/bento-grid/three.tsx copyId="three"
 
     ````
diff --git a/content/docs/changelog/2026-04.mdx b/content/docs/changelog/2026-04.mdx
index d1adf319..4172856e 100644
--- a/content/docs/changelog/2026-04.mdx
+++ b/content/docs/changelog/2026-04.mdx
@@ -1,10 +1,97 @@
 ---
 title: April 2026
-description: shadcn registry launch, announcement ribbon, and site revamp.
-date: 2026-04-24
+description: 20 new text animation presets, shadcn registry launch, announcement ribbon, site revamp.
+date: 2026-04-25
 ---
 
-Big month. The shadcn registry went live, which changed how people got components into their projects. There was also a new announcement ribbon component, and the site got a meaningful speed and accessibility pass.
+Big month. Twenty new text animation presets landed, built on a shared WAAPI runtime. The shadcn registry also went live, changing how people get components into their projects. There was also a new announcement ribbon component, and the site got a meaningful speed and accessibility pass.
+
+## Text animations
+
+Twenty new presets built on a shared `TextAnimator` runtime. The timing model is consistent across all of them — swap one for another without rewriting anything.
+
+<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2px', margin: '24px 0' }}>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/blur-out-up" style={{ fontWeight: 600 }}>Blur Out Up</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Words arrive clean and depart upward with increasing blur for airy exits.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/bottom-up-letters" style={{ fontWeight: 600 }}>Bottom-Up Letters</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Letters rise from below in a pronounced staircase, one symbol at a time.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/fade-through" style={{ fontWeight: 600 }}>Fade Through</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Material-style transition: old text fades out, new text fades in with a soft delay.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/focus-blur-resolve" style={{ fontWeight: 600 }}>Focus Blur Resolve</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Heavy blur pulls into crisp text, then softly blurs out on exit.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/kinetic-center-build" style={{ fontWeight: 600 }}>Kinetic Center Build</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Each new word enters from the right and pushes the line until the phrase locks centered.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/line-by-line-slide" style={{ fontWeight: 600 }}>Line-by-Line Slide</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Lines enter from the left with a staggered slide and exit right for a flowing paragraph reveal.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/mask-reveal-up" style={{ fontWeight: 600 }}>Mask Reveal Up</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Lines reveal upward with a soft masked feel and compact stagger.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/micro-scale-fade" style={{ fontWeight: 600 }}>Micro Scale Fade</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Tiny scale pop used as subtle premium polish for labels and headings.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/per-character-rise" style={{ fontWeight: 600 }}>Per-Character Rise</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Letters slide up from below with no blur — crisp and kinetic, tvOS-style.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/per-word-crossfade" style={{ fontWeight: 600 }}>Per-Word Crossfade</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Words fade into place one after another with a short vertical drift.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/scale-down-fade" style={{ fontWeight: 600 }}>Scale Down Fade</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Subtle settle-in with a restrained scale-down fade on exit.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/shared-axis-y" style={{ fontWeight: 600 }}>Shared Axis Y</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Per-word hard-cut transition with staircase timing for sharp editorial swaps.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/shared-axis-z" style={{ fontWeight: 600 }}>Shared Axis Z</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Scale-based shared-axis transition for focus shifts and depth changes.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/shimmer-sweep" style={{ fontWeight: 600 }}>Shimmer Sweep</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>A subtle light sweep across a headline, gliding from left to center.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/short-slide-down" style={{ fontWeight: 600 }}>Short Slide Down</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Each new word drops in from above and pushes the stack until a three-line composition locks centered.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/short-slide-right" style={{ fontWeight: 600 }}>Short Slide Right</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>The whole phrase glides in from the left; words reveal in sequence through opacity only.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/soft-blur-in" style={{ fontWeight: 600 }}>Soft Blur In</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Per-character fade-in with a gentle blur and upward drift — Apple's signature hero-title reveal.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
+    <a href="/docs/text/spring-scale-in" style={{ fontWeight: 600 }}>Spring Scale In</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Words pop in with a soft overshoot scale, like a physical spring settling.</div>
+  </div>
+  <div style={{ padding: '14px 20px 14px 0', lineHeight: '1.65' }}>
+    <a href="/docs/text/top-down-letters" style={{ fontWeight: 600 }}>Top-Down Letters</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Letters descend from above in a pronounced staircase, one symbol at a time.</div>
+  </div>
+  <div style={{ padding: '14px 0 14px 20px', lineHeight: '1.65' }}>
+    <a href="/docs/text/typewriter" style={{ fontWeight: 600 }}>Typewriter</a>
+    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Per-character stepped reveal with a minimal editorial typing rhythm.</div>
+  </div>
+</div>
 
 ## shadcn registry
 
diff --git a/content/docs/changelog/index.mdx b/content/docs/changelog/index.mdx
index 08fbbe9e..f312dd31 100644
--- a/content/docs/changelog/index.mdx
+++ b/content/docs/changelog/index.mdx
@@ -10,7 +10,7 @@ New components, bug fixes, and infrastructure changes, going back to the beta la
 
 ### [April 2026](/docs/changelog/2026-04)
 
-shadcn registry went live — every component is now installable with `npx shadcn add`. Added the announcement ribbon component and revamped the site for speed and accessibility.
+20 new text animation presets built on a shared WAAPI runtime. shadcn registry went live — every component installable with `npx shadcn add`. Announcement ribbon added, site revamped for speed and accessibility.
 
 ### [March 2026](/docs/changelog/2026-03)
 
@@ -22,7 +22,7 @@ Stack upgrade: Next.js 16, Tailwind CSS v4, Storybook 10, and Biome replacing th
 
 | Month | Highlights |
 |---|---|
-| [April 2026](/docs/changelog/2026-04) | shadcn registry, announcement ribbon, site revamp |
+| [April 2026](/docs/changelog/2026-04) | 20 text animation presets, shadcn registry, announcement ribbon, site revamp |
 | [March 2026](/docs/changelog/2026-03) | Next.js 16, Tailwind v4, Storybook 10, Biome |
 | [January 2026](/docs/changelog/2026-01) | CircularText |
 | [April 2025](/docs/changelog/2025-04) | Two bug fixes |
diff --git a/content/docs/text/blur-out-up.mdx b/content/docs/text/blur-out-up.mdx
new file mode 100644
index 00000000..72416cc2
--- /dev/null
+++ b/content/docs/text/blur-out-up.mdx
@@ -0,0 +1,57 @@
+---
+title: Blur Out Up
+description: Words arrive clean and depart upward with increasing blur for airy exits.
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-blur-out-up--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="blur-out-up" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `blur-out-up.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/blur-out-up.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/blur-out-up.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/bottom-up-letters.mdx b/content/docs/text/bottom-up-letters.mdx
new file mode 100644
index 00000000..a98e0d89
--- /dev/null
+++ b/content/docs/text/bottom-up-letters.mdx
@@ -0,0 +1,57 @@
+---
+title: "Bottom-Up Letters"
+description: "Letters rise from below in a pronounced staircase, one symbol at a time, with zero blur."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-bottom-up-letters--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="bottom-up-letters" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `bottom-up-letters.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/bottom-up-letters.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/bottom-up-letters.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/fade-through.mdx b/content/docs/text/fade-through.mdx
new file mode 100644
index 00000000..0152f322
--- /dev/null
+++ b/content/docs/text/fade-through.mdx
@@ -0,0 +1,57 @@
+---
+title: Fade Through
+description: "A Material-style content transition: old fades out, new fades in with a soft delay."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-fade-through--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="fade-through" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `fade-through.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/fade-through.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/fade-through.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/focus-blur-resolve.mdx b/content/docs/text/focus-blur-resolve.mdx
new file mode 100644
index 00000000..cc809f0d
--- /dev/null
+++ b/content/docs/text/focus-blur-resolve.mdx
@@ -0,0 +1,57 @@
+---
+title: Focus Blur Resolve
+description: "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-focus-blur-resolve--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="focus-blur-resolve" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `focus-blur-resolve.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/focus-blur-resolve.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/focus-blur-resolve.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/index.mdx b/content/docs/text/index.mdx
new file mode 100644
index 00000000..a744ccf0
--- /dev/null
+++ b/content/docs/text/index.mdx
@@ -0,0 +1,239 @@
+---
+title: Text animations overview
+description: A collection of text effects — per-character reveals, per-word swaps, kinetic phrase builds, and editorial transitions. Drop-in text animation presets built on the Web Animations API.
+author: hari
+---
+
+import AnimatedGradientText from "@/animata/text/animated-gradient-text";
+import BlurOutUp from "@/animata/text/blur-out-up";
+import BoldCopy from "@/animata/text/bold-copy";
+import BottomUpLetters from "@/animata/text/bottom-up-letters";
+import CircularText from "@/animata/text/circular-text";
+import Counter from "@/animata/text/counter";
+import CycleText from "@/animata/text/cycle-text";
+import DoubleUnderline from "@/animata/text/double-underline";
+import FadeThrough from "@/animata/text/fade-through";
+import FocusBlurResolve from "@/animata/text/focus-blur-resolve";
+import GibberishText from "@/animata/text/gibberish-text";
+import GlitchText from "@/animata/text/glitch-text";
+import JitterText from "@/animata/text/jitter-text";
+import JumpingTextInstagram from "@/animata/text/jumping-text-instagram";
+import KineticCenterBuild from "@/animata/text/kinetic-center-build";
+import LineByLineSlide from "@/animata/text/line-by-line-slide";
+import MaskRevealUp from "@/animata/text/mask-reveal-up";
+import MicroScaleFade from "@/animata/text/micro-scale-fade";
+import MirrorText from "@/animata/text/mirror-text";
+import PerCharacterRise from "@/animata/text/per-character-rise";
+import PerWordCrossfade from "@/animata/text/per-word-crossfade";
+import ScaleDownFade from "@/animata/text/scale-down-fade";
+import SharedAxisY from "@/animata/text/shared-axis-y";
+import SharedAxisZ from "@/animata/text/shared-axis-z";
+import ShimmerSweep from "@/animata/text/shimmer-sweep";
+import ShortSlideDown from "@/animata/text/short-slide-down";
+import ShortSlideRight from "@/animata/text/short-slide-right";
+import SoftBlurIn from "@/animata/text/soft-blur-in";
+import SplitText from "@/animata/text/split-text";
+import SpringScaleIn from "@/animata/text/spring-scale-in";
+import SwapText from "@/animata/text/swap-text";
+import TextBorderAnimation from "@/animata/text/text-border-animation";
+import TextExplodeImessage from "@/animata/text/text-explode-imessage";
+import TextFlip from "@/animata/text/text-flip";
+import Ticker from "@/animata/text/ticker";
+import TopDownLetters from "@/animata/text/top-down-letters";
+import Typewriter from "@/animata/text/typewriter";
+import TypingText from "@/animata/text/typing-text";
+import UnderlineHoverText from "@/animata/text/underline-hover-text";
+import WaveReveal from "@/animata/text/wave-reveal";
+import InView from "@/components/in-view";
+
+<ComponentList className="grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 @3xl:grid-cols-2">
+  <ComponentListItem copyId="animated-gradient-text" href="/docs/text/animated-gradient-text">
+    <AnimatedGradientText className="text-3xl md:text-4xl font-bold">Gradient Text</AnimatedGradientText>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="blur-out-up" href="/docs/text/blur-out-up">
+    <BlurOutUp />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="bold-copy" href="/docs/text/bold-copy">
+    <BoldCopy text="Animata" size="md" />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="bottom-up-letters" href="/docs/text/bottom-up-letters">
+    <BottomUpLetters />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="circular-text" href="/docs/text/circular-text">
+    <CircularText text="CIRCULAR•TEXT•COMPONENT•" spinDuration={30} radius={5} />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="counter" href="/docs/text/counter">
+    <Counter targetValue={1000} direction="up" delay={0} />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="cycle-text" href="/docs/text/cycle-text">
+    <CycleText />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="double-underline" href="/docs/text/double-underline">
+    <DoubleUnderline className="text-xl md:text-2xl font-bold">Built using</DoubleUnderline>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="fade-through" href="/docs/text/fade-through">
+    <FadeThrough />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="focus-blur-resolve" href="/docs/text/focus-blur-resolve">
+    <FocusBlurResolve />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="gibberish-text" href="/docs/text/gibberish-text">
+    <InView>
+      <GibberishText text="Hello World" className="text-2xl sm:text-3xl md:text-4xl font-black" />
+    </InView>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="glitch-text" href="/docs/text/glitch-text">
+    <InView>
+      <GlitchText text="1000 Stars" starCount={40} className="text-2xl sm:text-3xl md:text-4xl" />
+    </InView>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="jitter-text" href="/docs/text/jitter-text">
+    <JitterText text="Jitter Text" duration={0.6} className="text-3xl md:text-4xl font-black" />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="jumping-text-instagram" href="/docs/text/jumping-text-instagram">
+    <InView>
+      <JumpingTextInstagram text="Jumping text" mode="word" className="text-xl sm:text-2xl md:text-3xl" />
+    </InView>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="kinetic-center-build" href="/docs/text/kinetic-center-build">
+    <KineticCenterBuild />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="line-by-line-slide" href="/docs/text/line-by-line-slide">
+    <LineByLineSlide />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="mask-reveal-up" href="/docs/text/mask-reveal-up">
+    <MaskRevealUp />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="micro-scale-fade" href="/docs/text/micro-scale-fade">
+    <MicroScaleFade />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="mirror-text" href="/docs/text/mirror-text">
+    <MirrorText text="ANIMATA" direction="up" />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="per-character-rise" href="/docs/text/per-character-rise">
+    <PerCharacterRise />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="per-word-crossfade" href="/docs/text/per-word-crossfade">
+    <PerWordCrossfade />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="scale-down-fade" href="/docs/text/scale-down-fade">
+    <ScaleDownFade />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="shared-axis-y" href="/docs/text/shared-axis-y">
+    <SharedAxisY />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="shared-axis-z" href="/docs/text/shared-axis-z">
+    <SharedAxisZ />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="shimmer-sweep" href="/docs/text/shimmer-sweep">
+    <ShimmerSweep />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="short-slide-down" href="/docs/text/short-slide-down">
+    <ShortSlideDown />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="short-slide-right" href="/docs/text/short-slide-right">
+    <ShortSlideRight />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="soft-blur-in" href="/docs/text/soft-blur-in">
+    <SoftBlurIn />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="split-text" href="/docs/text/split-text">
+    <InView>
+      <SplitText text="ANIMATA" className="text-xl sm:text-3xl md:text-4xl lg:text-5xl" />
+    </InView>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="spring-scale-in" href="/docs/text/spring-scale-in">
+    <SpringScaleIn />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="swap-text" href="/docs/text/swap-text">
+    <SwapText initialText="Open" finalText="Close" supportsHover={true} disableClick={false} />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="text-border-animation" href="/docs/text/text-border-animation">
+    <TextBorderAnimation text="Programming" />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="text-explode-imessage" href="/docs/text/text-explode-imessage">
+    <TextExplodeImessage text="iMessage explode 🎉" mode="loop" className="text-red-500" />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="text-flip" href="/docs/text/text-flip">
+    <TextFlip />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="ticker" href="/docs/text/ticker">
+    <InView>
+      <Ticker value="456.78" delay={0} className="text-3xl sm:text-4xl md:text-6xl font-black" />
+    </InView>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="top-down-letters" href="/docs/text/top-down-letters">
+    <TopDownLetters />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="typewriter" href="/docs/text/typewriter">
+    <Typewriter />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="typing-text" href="/docs/text/typing-text">
+    <div className="min-w-96 max-w-96 rounded-sm bg-gray-800 px-4 py-2 text-yellow-400 shadow-lg">
+      <TypingText
+        text="> yarn add @animata/awesomeness"
+        delay={32}
+        repeat={true}
+        alwaysVisibleCount={1}
+        waitTime={1000}
+      />
+    </div>
+  </ComponentListItem>
+
+  <ComponentListItem copyId="underline-hover-text" href="/docs/text/underline-hover-text">
+    <UnderlineHoverText
+      text="Hover over me"
+      fontSize="text-xl md:text-2xl"
+      fontWeight="font-medium"
+    />
+  </ComponentListItem>
+
+  <ComponentListItem copyId="wave-reveal" href="/docs/text/wave-reveal">
+    <WaveReveal
+      text="Hello World"
+      direction="down"
+      mode="letter"
+      duration="200ms"
+      delay={0}
+      blur={true}
+      className="text-foreground text-3xl md:text-4xl"
+    />
+  </ComponentListItem>
+</ComponentList>
diff --git a/content/docs/text/kinetic-center-build.mdx b/content/docs/text/kinetic-center-build.mdx
new file mode 100644
index 00000000..fcda00d1
--- /dev/null
+++ b/content/docs/text/kinetic-center-build.mdx
@@ -0,0 +1,57 @@
+---
+title: Kinetic Center Build
+description: A word appears in the center; each new word enters from right to left with a soft blur and pushes the existing line until the full phrase locks centered.
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-kinetic-center-build--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="kinetic-center-build" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `kinetic-center-build.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/kinetic-center-build.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/kinetic-center-build.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/line-by-line-slide.mdx b/content/docs/text/line-by-line-slide.mdx
new file mode 100644
index 00000000..92d12c8d
--- /dev/null
+++ b/content/docs/text/line-by-line-slide.mdx
@@ -0,0 +1,57 @@
+---
+title: "Line-by-Line Slide"
+description: Each line enters from the left with a staggered slide and exits to the right for a flowing paragraph reveal.
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-line-by-line-slide--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="line-by-line-slide" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `line-by-line-slide.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/line-by-line-slide.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/line-by-line-slide.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/mask-reveal-up.mdx b/content/docs/text/mask-reveal-up.mdx
new file mode 100644
index 00000000..faa34b42
--- /dev/null
+++ b/content/docs/text/mask-reveal-up.mdx
@@ -0,0 +1,57 @@
+---
+title: Mask Reveal Up
+description: Lines reveal upward with a soft masked feel and compact stagger.
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-mask-reveal-up--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="mask-reveal-up" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `mask-reveal-up.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/mask-reveal-up.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/mask-reveal-up.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/micro-scale-fade.mdx b/content/docs/text/micro-scale-fade.mdx
new file mode 100644
index 00000000..1b18bb55
--- /dev/null
+++ b/content/docs/text/micro-scale-fade.mdx
@@ -0,0 +1,57 @@
+---
+title: Micro Scale Fade
+description: "A calm, tiny scale pop used as subtle premium polish for labels and headings."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-micro-scale-fade--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="micro-scale-fade" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `micro-scale-fade.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/micro-scale-fade.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/micro-scale-fade.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/per-character-rise.mdx b/content/docs/text/per-character-rise.mdx
new file mode 100644
index 00000000..750c60b2
--- /dev/null
+++ b/content/docs/text/per-character-rise.mdx
@@ -0,0 +1,57 @@
+---
+title: "Per-Character Rise"
+description: "Letters slide up from below with no blur — crisp, deliberate, kinetic. Apple's clean tvOS-style reveal."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-per-character-rise--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="per-character-rise" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `per-character-rise.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/per-character-rise.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/per-character-rise.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/per-word-crossfade.mdx b/content/docs/text/per-word-crossfade.mdx
new file mode 100644
index 00000000..a2f83775
--- /dev/null
+++ b/content/docs/text/per-word-crossfade.mdx
@@ -0,0 +1,57 @@
+---
+title: "Per-Word Crossfade"
+description: "Words gently fade into place one after another, with a short vertical drift for a calm keynote rhythm."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-per-word-crossfade--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="per-word-crossfade" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `per-word-crossfade.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/per-word-crossfade.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/per-word-crossfade.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/scale-down-fade.mdx b/content/docs/text/scale-down-fade.mdx
new file mode 100644
index 00000000..d6913744
--- /dev/null
+++ b/content/docs/text/scale-down-fade.mdx
@@ -0,0 +1,57 @@
+---
+title: Scale Down Fade
+description: "Subtle premium settle-in with a restrained scale-down fade on exit."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-scale-down-fade--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="scale-down-fade" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `scale-down-fade.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/scale-down-fade.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/scale-down-fade.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/shared-axis-y.mdx b/content/docs/text/shared-axis-y.mdx
new file mode 100644
index 00000000..4f3e0863
--- /dev/null
+++ b/content/docs/text/shared-axis-y.mdx
@@ -0,0 +1,57 @@
+---
+title: Shared Axis Y
+description: "Per-word hard-cut transition with staircase timing for sharp editorial swaps."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-shared-axis-y--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="shared-axis-y" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `shared-axis-y.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/shared-axis-y.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/shared-axis-y.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/shared-axis-z.mdx b/content/docs/text/shared-axis-z.mdx
new file mode 100644
index 00000000..3126e895
--- /dev/null
+++ b/content/docs/text/shared-axis-z.mdx
@@ -0,0 +1,57 @@
+---
+title: Shared Axis Z
+description: "Scale-based shared-axis transition for focus shifts and context depth."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-shared-axis-z--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="shared-axis-z" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `shared-axis-z.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/shared-axis-z.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/shared-axis-z.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/shimmer-sweep.mdx b/content/docs/text/shimmer-sweep.mdx
new file mode 100644
index 00000000..9181ef62
--- /dev/null
+++ b/content/docs/text/shimmer-sweep.mdx
@@ -0,0 +1,57 @@
+---
+title: Shimmer Sweep
+description: "A subtle sweep across a clean headline, blending in while gliding from left to center."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-shimmer-sweep--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="shimmer-sweep" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `shimmer-sweep.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/shimmer-sweep.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/shimmer-sweep.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/short-slide-down.mdx b/content/docs/text/short-slide-down.mdx
new file mode 100644
index 00000000..1f849c8e
--- /dev/null
+++ b/content/docs/text/short-slide-down.mdx
@@ -0,0 +1,57 @@
+---
+title: Short Slide Down
+description: "Each new word drops in from above into its own line and pushes the existing stack downward until a centered three-line composition locks in place."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-short-slide-down--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="short-slide-down" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `short-slide-down.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/short-slide-down.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/short-slide-down.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/short-slide-right.mdx b/content/docs/text/short-slide-right.mdx
new file mode 100644
index 00000000..cea53939
--- /dev/null
+++ b/content/docs/text/short-slide-right.mdx
@@ -0,0 +1,57 @@
+---
+title: Short Slide Right
+description: "The whole phrase glides in from the left as one compact move, while the words themselves are revealed in sequence only through opacity."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-short-slide-right--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="short-slide-right" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `short-slide-right.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/short-slide-right.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/short-slide-right.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/soft-blur-in.mdx b/content/docs/text/soft-blur-in.mdx
new file mode 100644
index 00000000..56fc128f
--- /dev/null
+++ b/content/docs/text/soft-blur-in.mdx
@@ -0,0 +1,57 @@
+---
+title: Soft Blur In
+description: "Per-character fade-in with a gentle blur and upward motion. Apple's signature hero-title reveal."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-soft-blur-in--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="soft-blur-in" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `soft-blur-in.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/soft-blur-in.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/soft-blur-in.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/spring-scale-in.mdx b/content/docs/text/spring-scale-in.mdx
new file mode 100644
index 00000000..4c06aa9c
--- /dev/null
+++ b/content/docs/text/spring-scale-in.mdx
@@ -0,0 +1,57 @@
+---
+title: Spring Scale In
+description: "Words pop in with a soft overshoot scale, like a physical spring settling into place."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-spring-scale-in--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="spring-scale-in" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `spring-scale-in.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/spring-scale-in.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/spring-scale-in.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)
diff --git a/content/docs/text/staggered-letter.mdx b/content/docs/text/staggered-letter.mdx
index cb8e757e..60cb2b1c 100644
--- a/content/docs/text/staggered-letter.mdx
+++ b/content/docs/text/staggered-letter.mdx
@@ -2,6 +2,7 @@
 title: Staggered Letter
 description: A staggered up/drop letter animation.
 author: morphhyy
+published: false
 ---
 
 <ComponentPreview name="text-staggered-letter--primary" />
diff --git a/content/docs/text/top-down-letters.mdx b/content/docs/text/top-down-letters.mdx
new file mode 100644
index 00000000..0b54836a
--- /dev/null
+++ b/content/docs/text/top-down-letters.mdx
@@ -0,0 +1,57 @@
+---
+title: "Top-Down Letters"
+description: "Letters descend from above in a pronounced staircase, one symbol at a time, with zero blur."
+author: pixelpoint
+labels: ["new"]
+---
+
+<ComponentPreview name="text-top-down-letters--primary" />
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="text" name="top-down-letters" />
+
+### Manual
+
+<Steps>
+
+<Step>Install the shared runtime</Step>
+
+Every preset in the text category shares its WAAPI loop with the same
+`text-animator` runtime (styles are inlined into the file via a
+`<style>` block). Skip this step if you already added it for another
+text preset.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+```
+
+Paste the runtime into `text-animator.tsx`:
+
+```tsx file=<rootDir>/animata/text/text-animator.tsx
+
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `top-down-letters.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/top-down-letters.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/top-down-letters.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Based on [pixel-point/animate-text](https://github.com/pixel-point/animate-text)

From da9d7b26386a8ef6e54c38e799b064c518292cdd Mon Sep 17 00:00:00 2001
From: Hari Lamichhane <onwithhari@gmail.com>
Date: Sat, 25 Apr 2026 22:57:03 +0545
Subject: [PATCH 5/5] feat(changelog): update ui layout (#443)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../container/announcement-ribbon.stories.tsx |  38 +---
 animata/text/blur-out-up.stories.tsx          |   1 -
 animata/text/blur-out-up.tsx                  |   9 +-
 animata/text/bottom-up-letters.stories.tsx    |   1 -
 animata/text/bottom-up-letters.tsx            |   2 +-
 animata/text/fade-through.stories.tsx         |   1 -
 animata/text/fade-through.tsx                 |   9 +-
 animata/text/focus-blur-resolve.stories.tsx   |   1 -
 animata/text/focus-blur-resolve.tsx           |   9 +-
 animata/text/kinetic-center-build.tsx         |   6 +-
 animata/text/line-by-line-slide.stories.tsx   |   1 -
 animata/text/line-by-line-slide.tsx           |   6 +-
 animata/text/mask-reveal-up.stories.tsx       |   1 -
 animata/text/mask-reveal-up.tsx               |   9 +-
 animata/text/micro-scale-fade.stories.tsx     |   1 -
 animata/text/micro-scale-fade.tsx             |   6 +-
 animata/text/per-character-rise.stories.tsx   |   1 -
 animata/text/per-character-rise.tsx           |   9 +-
 animata/text/per-word-crossfade.stories.tsx   |   1 -
 animata/text/per-word-crossfade.tsx           |   9 +-
 animata/text/scale-down-fade.stories.tsx      |   1 -
 animata/text/scale-down-fade.tsx              |   9 +-
 animata/text/shared-axis-y.stories.tsx        |   1 -
 animata/text/shared-axis-y.tsx                |  10 +-
 animata/text/shared-axis-z.stories.tsx        |   1 -
 animata/text/shared-axis-z.tsx                |   9 +-
 animata/text/shimmer-sweep.stories.tsx        |   1 -
 animata/text/shimmer-sweep.tsx                |   6 +-
 animata/text/short-slide-down.tsx             |   6 +-
 animata/text/short-slide-right.stories.tsx    |   1 -
 animata/text/short-slide-right.tsx            |   6 +-
 animata/text/soft-blur-in.stories.tsx         |   1 -
 animata/text/soft-blur-in.tsx                 |   9 +-
 animata/text/spring-scale-in.stories.tsx      |   1 -
 animata/text/spring-scale-in.tsx              |   6 +-
 animata/text/top-down-letters.stories.tsx     |   1 -
 animata/text/top-down-letters.tsx             |   2 +-
 app/(main)/text-animations/page.tsx           |   7 -
 components/ads.tsx                            |   2 +-
 components/mdx-components.tsx                 |  16 +-
 content/docs/changelog/2026-04.mdx            | 166 +++++++++---------
 content/docs/changelog/index.mdx              |   4 +-
 content/docs/text/index.mdx                   |   5 -
 43 files changed, 166 insertions(+), 226 deletions(-)

diff --git a/animata/container/announcement-ribbon.stories.tsx b/animata/container/announcement-ribbon.stories.tsx
index ced57cab..1d7759a7 100644
--- a/animata/container/announcement-ribbon.stories.tsx
+++ b/animata/container/announcement-ribbon.stories.tsx
@@ -40,43 +40,13 @@ export const CustomMessage: Story = {
     ctaText: "Read the docs",
     message: (
       <span className="flex items-center gap-2 whitespace-nowrap">
-        <Zap className="h-3 w-3 shrink-0 text-sky-400" aria-hidden />
-        <span className="text-white/75">
-          Animata <strong className="font-semibold text-sky-300">2.0</strong> is here — faster
-          animations, smaller bundles, zero config
+        <Zap className="h-3 w-3 shrink-0 text-black/75" aria-hidden />
+        <span className="text-black/75">
+          Animata <strong className="font-medium">2.0</strong> is here — faster animations, smaller
+          bundles, zero config
         </span>
       </span>
     ),
     pauseOnHover: true,
   },
 };
-
-export const RegistryRelease: Story = {
-  name: "Registry Release (Full Page Preview)",
-  args: {},
-  render: () => (
-    <div className="flex min-h-screen flex-col bg-background">
-      <AnnouncementRibbon />
-      <div className="flex flex-1 flex-col items-center justify-center gap-6 px-4 text-center">
-        <div className="flex items-center gap-2 rounded-full border border-amber-300/40 bg-amber-100/60 px-3 py-1 dark:border-amber-700/30 dark:bg-amber-950/30">
-          <Package className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
-          <span className="text-xs font-medium text-amber-700 dark:text-amber-400">
-            shadcn registry
-          </span>
-        </div>
-        <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-6xl">
-          Beautiful UI components
-          <br />
-          <span className="text-muted-foreground">ready to install</span>
-        </h1>
-        <p className="max-w-md text-sm text-muted-foreground">
-          Copy, paste, and own every component — no black boxes, no abstractions you can't control.
-        </p>
-        <div className="flex items-center gap-1.5 rounded-lg border border-border bg-muted px-4 py-2 font-mono text-sm text-muted-foreground">
-          <Sparkles className="h-3.5 w-3.5 text-amber-500" />
-          npx shadcn add
-        </div>
-      </div>
-    </div>
-  ),
-};
diff --git a/animata/text/blur-out-up.stories.tsx b/animata/text/blur-out-up.stories.tsx
index 1f0f434e..6c85ed17 100644
--- a/animata/text/blur-out-up.stories.tsx
+++ b/animata/text/blur-out-up.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Clear in, airy out.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/blur-out-up.tsx b/animata/text/blur-out-up.tsx
index eb561199..f89ad7c4 100644
--- a/animata/text/blur-out-up.tsx
+++ b/animata/text/blur-out-up.tsx
@@ -41,16 +41,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 170,
+    mode: "sequential",
     microDelayMs: 35,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Clear in, airy out.",
-  "Lightweight typography.",
-  "Exit with grace.",
+  "Lands clean, leaves airy.",
+  "Drifts up on the way out.",
+  "Light type, lighter exit.",
 ];
 
 export interface BlurOutUpProps {
diff --git a/animata/text/bottom-up-letters.stories.tsx b/animata/text/bottom-up-letters.stories.tsx
index 684fc449..b70dbf7c 100644
--- a/animata/text/bottom-up-letters.stories.tsx
+++ b/animata/text/bottom-up-letters.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Shift",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/bottom-up-letters.tsx b/animata/text/bottom-up-letters.tsx
index ca7ef93a..720040d5 100644
--- a/animata/text/bottom-up-letters.tsx
+++ b/animata/text/bottom-up-letters.tsx
@@ -43,7 +43,7 @@ const BASE_SPEC: TextAnimationSpec = {
   },
 };
 
-const DEFAULT_SAMPLES: readonly string[] = ["Shift", "Stage", "Letter"];
+const DEFAULT_SAMPLES: readonly string[] = ["Climb", "Lift", "Stack"];
 
 export interface BottomUpLettersProps {
   /** Text(s) to animate. String = single, array = cycle through. */
diff --git a/animata/text/fade-through.stories.tsx b/animata/text/fade-through.stories.tsx
index 4f5da59b..43fdb6cb 100644
--- a/animata/text/fade-through.stories.tsx
+++ b/animata/text/fade-through.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Calm transitions.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/fade-through.tsx b/animata/text/fade-through.tsx
index cf634cdb..36223e6f 100644
--- a/animata/text/fade-through.tsx
+++ b/animata/text/fade-through.tsx
@@ -45,16 +45,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 20,
+    mode: "sequential",
     microDelayMs: 60,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Calm transitions.",
-  "Fade through content.",
-  "Focus shifts smoothly.",
+  "Old fades, new arrives.",
+  "A clean swap of copy.",
+  "Replaces without seams.",
 ];
 
 export interface FadeThroughProps {
diff --git a/animata/text/focus-blur-resolve.stories.tsx b/animata/text/focus-blur-resolve.stories.tsx
index 4518b625..3d8776a6 100644
--- a/animata/text/focus-blur-resolve.stories.tsx
+++ b/animata/text/focus-blur-resolve.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Focus resolves clearly.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/focus-blur-resolve.tsx b/animata/text/focus-blur-resolve.tsx
index fdbee930..c792b593 100644
--- a/animata/text/focus-blur-resolve.tsx
+++ b/animata/text/focus-blur-resolve.tsx
@@ -45,16 +45,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 160,
+    mode: "sequential",
     microDelayMs: 35,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Focus resolves clearly.",
-  "Detail emerges.",
-  "Then softly recedes.",
+  "Pulls into focus.",
+  "A camera-style resolve.",
+  "Then a quiet defocus.",
 ];
 
 export interface FocusBlurResolveProps {
diff --git a/animata/text/kinetic-center-build.tsx b/animata/text/kinetic-center-build.tsx
index 2c4d348a..4d7cdf25 100644
--- a/animata/text/kinetic-center-build.tsx
+++ b/animata/text/kinetic-center-build.tsx
@@ -65,9 +65,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_PHRASES: readonly (readonly string[])[] = [
-  ["Words", "push", "left"],
-  ["Type", "locks", "center"],
-  ["Build", "the", "line"],
+  ["Each", "word", "arrives"],
+  ["Center", "holds", "still"],
+  ["Builds", "one", "line"],
 ];
 
 export interface KineticCenterBuildProps {
diff --git a/animata/text/line-by-line-slide.stories.tsx b/animata/text/line-by-line-slide.stories.tsx
index 245a7123..61f63a35 100644
--- a/animata/text/line-by-line-slide.stories.tsx
+++ b/animata/text/line-by-line-slide.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Think different.\nDo more.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/line-by-line-slide.tsx b/animata/text/line-by-line-slide.tsx
index 196f0fab..4cecce92 100644
--- a/animata/text/line-by-line-slide.tsx
+++ b/animata/text/line-by-line-slide.tsx
@@ -44,9 +44,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Think different.\nDo more.",
-  "Built for speed.\nMade to last.",
-  "Clear ideas.\nClean motion.",
+  "Each line\nslides in turn.",
+  "Top arrives,\nthen the next.",
+  "Reads top down,\nleft to right.",
 ];
 
 export interface LineByLineSlideProps {
diff --git a/animata/text/mask-reveal-up.stories.tsx b/animata/text/mask-reveal-up.stories.tsx
index 9620143c..97e89568 100644
--- a/animata/text/mask-reveal-up.stories.tsx
+++ b/animata/text/mask-reveal-up.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Designed to move.\nBuilt to focus.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/mask-reveal-up.tsx b/animata/text/mask-reveal-up.tsx
index 499612e7..245e9e73 100644
--- a/animata/text/mask-reveal-up.tsx
+++ b/animata/text/mask-reveal-up.tsx
@@ -41,16 +41,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 210,
+    mode: "sequential",
     microDelayMs: 35,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Designed to move.\nBuilt to focus.",
-  "Quiet motion.\nStrong hierarchy.",
-  "Premium feel.\nEvery frame.",
+  "Two lines\nrise as one.",
+  "A headline\nlifts into view.",
+  "Clean reveal,\nclean exit.",
 ];
 
 export interface MaskRevealUpProps {
diff --git a/animata/text/micro-scale-fade.stories.tsx b/animata/text/micro-scale-fade.stories.tsx
index d82885f5..25eb76fe 100644
--- a/animata/text/micro-scale-fade.stories.tsx
+++ b/animata/text/micro-scale-fade.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Welcome to motion.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/micro-scale-fade.tsx b/animata/text/micro-scale-fade.tsx
index fc105f3f..b0673f5c 100644
--- a/animata/text/micro-scale-fade.tsx
+++ b/animata/text/micro-scale-fade.tsx
@@ -44,9 +44,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Welcome to motion.",
-  "Small details matter.",
-  "Quietly premium.",
+  "A whisper of motion.",
+  "Barely a gesture.",
+  "Subtle by design.",
 ];
 
 export interface MicroScaleFadeProps {
diff --git a/animata/text/per-character-rise.stories.tsx b/animata/text/per-character-rise.stories.tsx
index 9c8b6843..e7cc2505 100644
--- a/animata/text/per-character-rise.stories.tsx
+++ b/animata/text/per-character-rise.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "One more thing.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/per-character-rise.tsx b/animata/text/per-character-rise.tsx
index fc59a59f..3833f695 100644
--- a/animata/text/per-character-rise.tsx
+++ b/animata/text/per-character-rise.tsx
@@ -37,15 +37,14 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 210,
+    mode: "sequential",
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "One more thing.",
-  "Fast and fluid.",
-  "Sharp by design.",
+  "Each letter rises in.",
+  "Rises into place.",
+  "Crisp on every beat.",
 ];
 
 export interface PerCharacterRiseProps {
diff --git a/animata/text/per-word-crossfade.stories.tsx b/animata/text/per-word-crossfade.stories.tsx
index d5ebc281..0b96c72d 100644
--- a/animata/text/per-word-crossfade.stories.tsx
+++ b/animata/text/per-word-crossfade.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Beautifully simple.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/per-word-crossfade.tsx b/animata/text/per-word-crossfade.tsx
index a7762ef6..01e36aa6 100644
--- a/animata/text/per-word-crossfade.tsx
+++ b/animata/text/per-word-crossfade.tsx
@@ -37,16 +37,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 170,
+    mode: "sequential",
     microDelayMs: 70,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Beautifully simple.",
-  "Designed for focus.",
-  "Built for people.",
+  "A phrase, then another.",
+  "Words trade places.",
+  "Calm replacements.",
 ];
 
 export interface PerWordCrossfadeProps {
diff --git a/animata/text/scale-down-fade.stories.tsx b/animata/text/scale-down-fade.stories.tsx
index d8f50c5a..de23d3c2 100644
--- a/animata/text/scale-down-fade.stories.tsx
+++ b/animata/text/scale-down-fade.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Quietly refined.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/scale-down-fade.tsx b/animata/text/scale-down-fade.tsx
index 1e45b64e..534d4a55 100644
--- a/animata/text/scale-down-fade.tsx
+++ b/animata/text/scale-down-fade.tsx
@@ -41,16 +41,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 130,
+    mode: "sequential",
     microDelayMs: 20,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Quietly refined.",
-  "Polished transitions.",
-  "A soft close.",
+  "Settles in, then bows out.",
+  "A restrained sign-off.",
+  "Closes without fanfare.",
 ];
 
 export interface ScaleDownFadeProps {
diff --git a/animata/text/shared-axis-y.stories.tsx b/animata/text/shared-axis-y.stories.tsx
index e38a6b7c..3ba40297 100644
--- a/animata/text/shared-axis-y.stories.tsx
+++ b/animata/text/shared-axis-y.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Layered navigation.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/shared-axis-y.tsx b/animata/text/shared-axis-y.tsx
index 644091d0..5b25b6e3 100644
--- a/animata/text/shared-axis-y.tsx
+++ b/animata/text/shared-axis-y.tsx
@@ -13,7 +13,7 @@ const BASE_SPEC: TextAnimationSpec = {
   enter: {
     durationMs: 180,
     staggerMs: 78,
-    easing: "steps(1, end)",
+    easing: "steps(1, jump-start)",
     from: {
       opacity: 0,
       yPx: 0,
@@ -28,7 +28,7 @@ const BASE_SPEC: TextAnimationSpec = {
   exit: {
     durationMs: 140,
     staggerMs: 78,
-    easing: "steps(1, end)",
+    easing: "steps(1, jump-start)",
     from: {
       opacity: 1,
       yPx: 0,
@@ -48,9 +48,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Layered navigation.",
-  "Hierarchy made clear.",
-  "Depth with restraint.",
+  "Step swaps on the y-axis.",
+  "No easing, just rhythm.",
+  "Editorial pacing.",
 ];
 
 export interface SharedAxisYProps {
diff --git a/animata/text/shared-axis-z.stories.tsx b/animata/text/shared-axis-z.stories.tsx
index b56328ae..fe92bc4e 100644
--- a/animata/text/shared-axis-z.stories.tsx
+++ b/animata/text/shared-axis-z.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Zooming between states.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/shared-axis-z.tsx b/animata/text/shared-axis-z.tsx
index 30b5d77e..67491abd 100644
--- a/animata/text/shared-axis-z.tsx
+++ b/animata/text/shared-axis-z.tsx
@@ -41,16 +41,15 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 100,
+    mode: "sequential",
     microDelayMs: 20,
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Zooming between states.",
-  "Elevate and settle.",
-  "Scale with purpose.",
+  "Recedes, then returns.",
+  "Steps forward, then back.",
+  "A subtle shift in depth.",
 ];
 
 export interface SharedAxisZProps {
diff --git a/animata/text/shimmer-sweep.stories.tsx b/animata/text/shimmer-sweep.stories.tsx
index 5e1c1559..5a9d8a0b 100644
--- a/animata/text/shimmer-sweep.stories.tsx
+++ b/animata/text/shimmer-sweep.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Shiny details.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/shimmer-sweep.tsx b/animata/text/shimmer-sweep.tsx
index 3d869345..7123d589 100644
--- a/animata/text/shimmer-sweep.tsx
+++ b/animata/text/shimmer-sweep.tsx
@@ -48,9 +48,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Shiny details.",
-  "Glide with intent.",
-  "Soft and precise.",
+  "Drifts in from the left.",
+  "Carries a soft shine.",
+  "Sweeps across the line.",
 ];
 
 export interface ShimmerSweepProps {
diff --git a/animata/text/short-slide-down.tsx b/animata/text/short-slide-down.tsx
index 4de1a245..686594c6 100644
--- a/animata/text/short-slide-down.tsx
+++ b/animata/text/short-slide-down.tsx
@@ -70,9 +70,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_PHRASES: readonly (readonly string[])[] = [
-  ["Drop", "into", "place"],
-  ["Words", "settle", "lower"],
-  ["Build", "from", "above"],
+  ["Lands", "top", "first"],
+  ["Stacks", "into", "place"],
+  ["Drops", "line", "gently"],
 ];
 
 export interface ShortSlideDownProps {
diff --git a/animata/text/short-slide-right.stories.tsx b/animata/text/short-slide-right.stories.tsx
index 3e85ef3c..9c8351ec 100644
--- a/animata/text/short-slide-right.stories.tsx
+++ b/animata/text/short-slide-right.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Move with intent.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/short-slide-right.tsx b/animata/text/short-slide-right.tsx
index 611c8cee..05a65649 100644
--- a/animata/text/short-slide-right.tsx
+++ b/animata/text/short-slide-right.tsx
@@ -54,9 +54,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Move with intent.",
-  "Words glide across.",
-  "Build the rhythm.",
+  "Slides in as one piece.",
+  "Reveals together, in turn.",
+  "One motion, three words.",
 ];
 
 export interface ShortSlideRightProps {
diff --git a/animata/text/soft-blur-in.stories.tsx b/animata/text/soft-blur-in.stories.tsx
index 4d14a057..5fcb321c 100644
--- a/animata/text/soft-blur-in.stories.tsx
+++ b/animata/text/soft-blur-in.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Think different.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/soft-blur-in.tsx b/animata/text/soft-blur-in.tsx
index e93357d0..164610c6 100644
--- a/animata/text/soft-blur-in.tsx
+++ b/animata/text/soft-blur-in.tsx
@@ -41,15 +41,14 @@ const BASE_SPEC: TextAnimationSpec = {
     },
   },
   swap: {
-    mode: "crossfade",
-    overlapMs: 300,
+    mode: "sequential",
   },
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Think different.",
-  "Built to flow.",
-  "Motion with intent.",
+  "Coming into focus.",
+  "Edges sharpen up.",
+  "Letters land softly.",
 ];
 
 export interface SoftBlurInProps {
diff --git a/animata/text/spring-scale-in.stories.tsx b/animata/text/spring-scale-in.stories.tsx
index 43ace6d8..f5d3c8fc 100644
--- a/animata/text/spring-scale-in.stories.tsx
+++ b/animata/text/spring-scale-in.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Fast. Crisp. Fluid.",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/spring-scale-in.tsx b/animata/text/spring-scale-in.tsx
index f03f2dce..96639533 100644
--- a/animata/text/spring-scale-in.tsx
+++ b/animata/text/spring-scale-in.tsx
@@ -44,9 +44,9 @@ const BASE_SPEC: TextAnimationSpec = {
 };
 
 const DEFAULT_SAMPLES: readonly string[] = [
-  "Fast. Crisp. Fluid.",
-  "Pop into place.",
-  "Smooth by default.",
+  "Lands with a small bounce.",
+  "Settles after the spring.",
+  "A gentle overshoot.",
 ];
 
 export interface SpringScaleInProps {
diff --git a/animata/text/top-down-letters.stories.tsx b/animata/text/top-down-letters.stories.tsx
index c1174ffe..00cfd024 100644
--- a/animata/text/top-down-letters.stories.tsx
+++ b/animata/text/top-down-letters.stories.tsx
@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    text: "Signal",
     speed: 0.72,
     holdMs: 550,
     gapMs: 320,
diff --git a/animata/text/top-down-letters.tsx b/animata/text/top-down-letters.tsx
index 9dd91e6c..c557ec0b 100644
--- a/animata/text/top-down-letters.tsx
+++ b/animata/text/top-down-letters.tsx
@@ -43,7 +43,7 @@ const BASE_SPEC: TextAnimationSpec = {
   },
 };
 
-const DEFAULT_SAMPLES: readonly string[] = ["Signal", "Header", "Vector"];
+const DEFAULT_SAMPLES: readonly string[] = ["Drop", "Above", "Title"];
 
 export interface TopDownLettersProps {
   /** Text(s) to animate. String = single, array = cycle through. */
diff --git a/app/(main)/text-animations/page.tsx b/app/(main)/text-animations/page.tsx
index 4971f72d..2306f03c 100644
--- a/app/(main)/text-animations/page.tsx
+++ b/app/(main)/text-animations/page.tsx
@@ -21,7 +21,6 @@ import ShortSlideRight from "@/animata/text/short-slide-right";
 import SoftBlurIn from "@/animata/text/soft-blur-in";
 import SpringScaleIn from "@/animata/text/spring-scale-in";
 import TopDownLetters from "@/animata/text/top-down-letters";
-import Typewriter from "@/animata/text/typewriter";
 
 type Preset = {
   id: string;
@@ -72,12 +71,6 @@ const PRESETS: Preset[] = [
       "Each line enters from the left with a staggered slide and exits to the right for a flowing paragraph reveal.",
     Component: LineByLineSlide,
   },
-  {
-    id: "typewriter",
-    title: "Typewriter",
-    description: "Per-character stepped reveal with a minimal editorial typing rhythm.",
-    Component: Typewriter,
-  },
   {
     id: "micro-scale-fade",
     title: "Micro Scale Fade",
diff --git a/components/ads.tsx b/components/ads.tsx
index ad185cda..ad144cb1 100644
--- a/components/ads.tsx
+++ b/components/ads.tsx
@@ -33,5 +33,5 @@ export default function CarbonAds() {
     };
   }, []);
 
-  return <div id="carbon-container" className="min-h-48" />;
+  return <div id="carbon-container" className="min-h-48 mt-2" />;
 }
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index 2f9caa8a..221c3b3f 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -1,6 +1,7 @@
 import type { CompileOptions } from "@mdx-js/mdx";
 import Link from "next/link";
 import { MDXRemote } from "next-mdx-remote/rsc";
+import type React from "react";
 import type { ComponentProps, HTMLAttributes } from "react";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypePrettyCode, {
@@ -13,7 +14,6 @@ import remarkGfm from "remark-gfm";
 import type { NpmCommands, TouchCommands, UnistNode, UnistTree } from "types/unist";
 import { visit } from "unist-util-visit";
 import { VFile } from "vfile";
-
 import Modal from "@/animata/overlay/modal";
 import { Callout } from "@/components/callout";
 import { CodeBlockWrapper } from "@/components/code-block-wrapper";
@@ -39,7 +39,6 @@ import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { Event } from "@/lib/events";
 import { cn } from "@/lib/utils";
-
 import { baseComponents } from "./mdx-base-components";
 
 const setupCodeSnippet = () => (tree: UnistTree) => {
@@ -121,6 +120,19 @@ const components = {
   InView,
   PreviewContainer,
   ...baseComponents,
+  ChangeLogComponents: ({ children }: { children: React.ReactNode }) => {
+    return <div className="grid md:grid-cols-2 gap-2 py-2">{children}</div>;
+  },
+  ChangeLogEntry: ({ href, children }: { children: React.ReactNode; href: string }) => {
+    return (
+      <Link
+        href={href}
+        className="block hover:[&_h3]:underline p-2 rounded-sm bg-muted [&_h3]:text-sm [&_h3]:font-medium [&_p]:text-muted-foreground [&_p]:text-sm"
+      >
+        {children}
+      </Link>
+    );
+  },
   pre: ({
     className,
     __rawString__,
diff --git a/content/docs/changelog/2026-04.mdx b/content/docs/changelog/2026-04.mdx
index 4172856e..d92d2514 100644
--- a/content/docs/changelog/2026-04.mdx
+++ b/content/docs/changelog/2026-04.mdx
@@ -1,97 +1,93 @@
 ---
 title: April 2026
-description: 20 new text animation presets, shadcn registry launch, announcement ribbon, site revamp.
+description: 19 new text animation presets, shadcn registry launch, announcement ribbon, site revamp.
 date: 2026-04-25
 ---
 
-Big month. Twenty new text animation presets landed, built on a shared WAAPI runtime. The shadcn registry also went live, changing how people get components into their projects. There was also a new announcement ribbon component, and the site got a meaningful speed and accessibility pass.
+Big month. Nineteen new text animation presets landed, built on a shared WAAPI runtime. The shadcn registry also went live, changing how people get components into their projects. There was also a new announcement ribbon component, and the site got a meaningful speed and accessibility pass.
 
 ## Text animations
 
-Twenty new presets built on a shared `TextAnimator` runtime. The timing model is consistent across all of them — swap one for another without rewriting anything.
+Nineteen new presets built on a shared `TextAnimator` runtime. The timing model is consistent across all of them — swap one for another without rewriting anything.
 
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2px', margin: '24px 0' }}>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/blur-out-up" style={{ fontWeight: 600 }}>Blur Out Up</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Words arrive clean and depart upward with increasing blur for airy exits.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/bottom-up-letters" style={{ fontWeight: 600 }}>Bottom-Up Letters</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Letters rise from below in a pronounced staircase, one symbol at a time.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/fade-through" style={{ fontWeight: 600 }}>Fade Through</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Material-style transition: old text fades out, new text fades in with a soft delay.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/focus-blur-resolve" style={{ fontWeight: 600 }}>Focus Blur Resolve</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Heavy blur pulls into crisp text, then softly blurs out on exit.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/kinetic-center-build" style={{ fontWeight: 600 }}>Kinetic Center Build</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Each new word enters from the right and pushes the line until the phrase locks centered.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/line-by-line-slide" style={{ fontWeight: 600 }}>Line-by-Line Slide</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Lines enter from the left with a staggered slide and exit right for a flowing paragraph reveal.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/mask-reveal-up" style={{ fontWeight: 600 }}>Mask Reveal Up</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Lines reveal upward with a soft masked feel and compact stagger.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/micro-scale-fade" style={{ fontWeight: 600 }}>Micro Scale Fade</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Tiny scale pop used as subtle premium polish for labels and headings.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/per-character-rise" style={{ fontWeight: 600 }}>Per-Character Rise</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Letters slide up from below with no blur — crisp and kinetic, tvOS-style.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/per-word-crossfade" style={{ fontWeight: 600 }}>Per-Word Crossfade</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Words fade into place one after another with a short vertical drift.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/scale-down-fade" style={{ fontWeight: 600 }}>Scale Down Fade</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Subtle settle-in with a restrained scale-down fade on exit.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/shared-axis-y" style={{ fontWeight: 600 }}>Shared Axis Y</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Per-word hard-cut transition with staircase timing for sharp editorial swaps.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/shared-axis-z" style={{ fontWeight: 600 }}>Shared Axis Z</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Scale-based shared-axis transition for focus shifts and depth changes.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/shimmer-sweep" style={{ fontWeight: 600 }}>Shimmer Sweep</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>A subtle light sweep across a headline, gliding from left to center.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/short-slide-down" style={{ fontWeight: 600 }}>Short Slide Down</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Each new word drops in from above and pushes the stack until a three-line composition locks centered.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/short-slide-right" style={{ fontWeight: 600 }}>Short Slide Right</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>The whole phrase glides in from the left; words reveal in sequence through opacity only.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/soft-blur-in" style={{ fontWeight: 600 }}>Soft Blur In</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Per-character fade-in with a gentle blur and upward drift — Apple's signature hero-title reveal.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', borderBottom: '1px solid var(--border)', lineHeight: '1.65' }}>
-    <a href="/docs/text/spring-scale-in" style={{ fontWeight: 600 }}>Spring Scale In</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Words pop in with a soft overshoot scale, like a physical spring settling.</div>
-  </div>
-  <div style={{ padding: '14px 20px 14px 0', lineHeight: '1.65' }}>
-    <a href="/docs/text/top-down-letters" style={{ fontWeight: 600 }}>Top-Down Letters</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Letters descend from above in a pronounced staircase, one symbol at a time.</div>
-  </div>
-  <div style={{ padding: '14px 0 14px 20px', lineHeight: '1.65' }}>
-    <a href="/docs/text/typewriter" style={{ fontWeight: 600 }}>Typewriter</a>
-    <div style={{ marginTop: '4px', color: 'var(--muted-foreground)', fontSize: '0.875em' }}>Per-character stepped reveal with a minimal editorial typing rhythm.</div>
-  </div>
-</div>
+<ChangeLogComponents>
+  <ChangeLogEntry href="/docs/text/blur-out-up">
+    <h3>Blur Out Up</h3>
+    <p>Words arrive clean and depart upward with increasing blur for airy exits.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/bottom-up-letters">
+    <h3>Bottom-Up Letters</h3>
+    <p>Letters rise from below in a pronounced staircase, one symbol at a time.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/fade-through">
+    <h3>Fade Through</h3>
+    <p>Material-style transition: old text fades out, new text fades in with a soft delay.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/focus-blur-resolve">
+    <h3>Focus Blur Resolve</h3>
+    <p>Heavy blur pulls into crisp text, then softly blurs out on exit.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/kinetic-center-build">
+    <h3>Kinetic Center Build</h3>
+    <p>Each new word enters from the right and pushes the line until the phrase locks centered.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/line-by-line-slide">
+    <h3>Line-by-Line Slide</h3>
+    <p>Lines enter from the left with a staggered slide and exit right for a flowing paragraph reveal.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/mask-reveal-up">
+    <h3>Mask Reveal Up</h3>
+    <p>Lines reveal upward with a soft masked feel and compact stagger.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/micro-scale-fade">
+    <h3>Micro Scale Fade</h3>
+    <p>Tiny scale pop used as subtle premium polish for labels and headings.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/per-character-rise">
+    <h3>Per-Character Rise</h3>
+    <p>Letters slide up from below with no blur — crisp and kinetic, tvOS-style.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/per-word-crossfade">
+    <h3>Per-Word Crossfade</h3>
+    <p>Words fade into place one after another with a short vertical drift.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/scale-down-fade">
+    <h3>Scale Down Fade</h3>
+    <p>Subtle settle-in with a restrained scale-down fade on exit.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/shared-axis-y">
+    <h3>Shared Axis Y</h3>
+    <p>Per-word hard-cut transition with staircase timing for sharp editorial swaps.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/shared-axis-z">
+    <h3>Shared Axis Z</h3>
+    <p>Scale-based shared-axis transition for focus shifts and depth changes.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/shimmer-sweep">
+    <h3>Shimmer Sweep</h3>
+    <p>A subtle light sweep across a headline, gliding from left to center.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/short-slide-down">
+    <h3>Short Slide Down</h3>
+    <p>Each new word drops in from above and pushes the stack until a three-line composition locks centered.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/short-slide-right">
+    <h3>Short Slide Right</h3>
+    <p>The whole phrase glides in from the left; words reveal in sequence through opacity only.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/soft-blur-in">
+    <h3>Soft Blur In</h3>
+    <p>Per-character fade-in with a gentle blur and upward drift — Apple's signature hero-title reveal.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/spring-scale-in">
+    <h3>Spring Scale In</h3>
+    <p>Words pop in with a soft overshoot scale, like a physical spring settling.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/text/top-down-letters">
+    <h3>Top-Down Letters</h3>
+    <p>Letters descend from above in a pronounced staircase, one symbol at a time.</p>
+  </ChangeLogEntry>
+</ChangeLogComponents>
 
 ## shadcn registry
 
diff --git a/content/docs/changelog/index.mdx b/content/docs/changelog/index.mdx
index f312dd31..248a430e 100644
--- a/content/docs/changelog/index.mdx
+++ b/content/docs/changelog/index.mdx
@@ -10,7 +10,7 @@ New components, bug fixes, and infrastructure changes, going back to the beta la
 
 ### [April 2026](/docs/changelog/2026-04)
 
-20 new text animation presets built on a shared WAAPI runtime. shadcn registry went live — every component installable with `npx shadcn add`. Announcement ribbon added, site revamped for speed and accessibility.
+19 new text animation presets built on a shared WAAPI runtime. shadcn registry went live — every component installable with `npx shadcn add`. Announcement ribbon added, site revamped for speed and accessibility.
 
 ### [March 2026](/docs/changelog/2026-03)
 
@@ -22,7 +22,7 @@ Stack upgrade: Next.js 16, Tailwind CSS v4, Storybook 10, and Biome replacing th
 
 | Month | Highlights |
 |---|---|
-| [April 2026](/docs/changelog/2026-04) | 20 text animation presets, shadcn registry, announcement ribbon, site revamp |
+| [April 2026](/docs/changelog/2026-04) | 19 text animation presets, shadcn registry, announcement ribbon, site revamp |
 | [March 2026](/docs/changelog/2026-03) | Next.js 16, Tailwind v4, Storybook 10, Biome |
 | [January 2026](/docs/changelog/2026-01) | CircularText |
 | [April 2025](/docs/changelog/2025-04) | Two bug fixes |
diff --git a/content/docs/text/index.mdx b/content/docs/text/index.mdx
index a744ccf0..1a55ba35 100644
--- a/content/docs/text/index.mdx
+++ b/content/docs/text/index.mdx
@@ -40,7 +40,6 @@ import TextExplodeImessage from "@/animata/text/text-explode-imessage";
 import TextFlip from "@/animata/text/text-flip";
 import Ticker from "@/animata/text/ticker";
 import TopDownLetters from "@/animata/text/top-down-letters";
-import Typewriter from "@/animata/text/typewriter";
 import TypingText from "@/animata/text/typing-text";
 import UnderlineHoverText from "@/animata/text/underline-hover-text";
 import WaveReveal from "@/animata/text/wave-reveal";
@@ -201,10 +200,6 @@ import InView from "@/components/in-view";
     <TopDownLetters />
   </ComponentListItem>
 
-  <ComponentListItem copyId="typewriter" href="/docs/text/typewriter">
-    <Typewriter />
-  </ComponentListItem>
-
   <ComponentListItem copyId="typing-text" href="/docs/text/typing-text">
     <div className="min-w-96 max-w-96 rounded-sm bg-gray-800 px-4 py-2 text-yellow-400 shadow-lg">
       <TypingText