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/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/container/announcement-ribbon.stories.tsx b/animata/container/announcement-ribbon.stories.tsx
new file mode 100644
index 00000000..1d7759a7
--- /dev/null
+++ b/animata/container/announcement-ribbon.stories.tsx
@@ -0,0 +1,52 @@
+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-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,
+  },
+};
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/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..6c85ed17
--- /dev/null
+++ b/animata/text/blur-out-up.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..f89ad7c4
--- /dev/null
+++ b/animata/text/blur-out-up.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: "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: "sequential",
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Lands clean, leaves airy.",
+  "Drifts up on the way out.",
+  "Light type, lighter exit.",
+];
+
+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..b70dbf7c
--- /dev/null
+++ b/animata/text/bottom-up-letters.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..720040d5
--- /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[] = ["Climb", "Lift", "Stack"];
+
+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..43fdb6cb
--- /dev/null
+++ b/animata/text/fade-through.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..36223e6f
--- /dev/null
+++ b/animata/text/fade-through.tsx
@@ -0,0 +1,120 @@
+"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: "sequential",
+    microDelayMs: 60,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Old fades, new arrives.",
+  "A clean swap of copy.",
+  "Replaces without seams.",
+];
+
+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..3d8776a6
--- /dev/null
+++ b/animata/text/focus-blur-resolve.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..c792b593
--- /dev/null
+++ b/animata/text/focus-blur-resolve.tsx
@@ -0,0 +1,120 @@
+"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: "sequential",
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Pulls into focus.",
+  "A camera-style resolve.",
+  "Then a quiet defocus.",
+];
+
+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..4d7cdf25
--- /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[])[] = [
+  ["Each", "word", "arrives"],
+  ["Center", "holds", "still"],
+  ["Builds", "one", "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..61f63a35
--- /dev/null
+++ b/animata/text/line-by-line-slide.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..4cecce92
--- /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[] = [
+  "Each line\nslides in turn.",
+  "Top arrives,\nthen the next.",
+  "Reads top down,\nleft to right.",
+];
+
+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..97e89568
--- /dev/null
+++ b/animata/text/mask-reveal-up.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..245e9e73
--- /dev/null
+++ b/animata/text/mask-reveal-up.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: "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: "sequential",
+    microDelayMs: 35,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Two lines\nrise as one.",
+  "A headline\nlifts into view.",
+  "Clean reveal,\nclean exit.",
+];
+
+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..25eb76fe
--- /dev/null
+++ b/animata/text/micro-scale-fade.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..b0673f5c
--- /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[] = [
+  "A whisper of motion.",
+  "Barely a gesture.",
+  "Subtle by design.",
+];
+
+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..e7cc2505
--- /dev/null
+++ b/animata/text/per-character-rise.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..3833f695
--- /dev/null
+++ b/animata/text/per-character-rise.tsx
@@ -0,0 +1,111 @@
+"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: "sequential",
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Each letter rises in.",
+  "Rises into place.",
+  "Crisp on every beat.",
+];
+
+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..0b96c72d
--- /dev/null
+++ b/animata/text/per-word-crossfade.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..01e36aa6
--- /dev/null
+++ b/animata/text/per-word-crossfade.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-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: "sequential",
+    microDelayMs: 70,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "A phrase, then another.",
+  "Words trade places.",
+  "Calm replacements.",
+];
+
+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..de23d3c2
--- /dev/null
+++ b/animata/text/scale-down-fade.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..534d4a55
--- /dev/null
+++ b/animata/text/scale-down-fade.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: "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: "sequential",
+    microDelayMs: 20,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Settles in, then bows out.",
+  "A restrained sign-off.",
+  "Closes without fanfare.",
+];
+
+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..3ba40297
--- /dev/null
+++ b/animata/text/shared-axis-y.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..5b25b6e3
--- /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, jump-start)",
+    from: {
+      opacity: 0,
+      yPx: 0,
+      scale: 1,
+    },
+    to: {
+      opacity: 1,
+      yPx: 0,
+      scale: 1,
+    },
+  },
+  exit: {
+    durationMs: 140,
+    staggerMs: 78,
+    easing: "steps(1, jump-start)",
+    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[] = [
+  "Step swaps on the y-axis.",
+  "No easing, just rhythm.",
+  "Editorial pacing.",
+];
+
+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..fe92bc4e
--- /dev/null
+++ b/animata/text/shared-axis-z.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..67491abd
--- /dev/null
+++ b/animata/text/shared-axis-z.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: "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: "sequential",
+    microDelayMs: 20,
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Recedes, then returns.",
+  "Steps forward, then back.",
+  "A subtle shift in depth.",
+];
+
+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..5a9d8a0b
--- /dev/null
+++ b/animata/text/shimmer-sweep.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..7123d589
--- /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[] = [
+  "Drifts in from the left.",
+  "Carries a soft shine.",
+  "Sweeps across the line.",
+];
+
+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..686594c6
--- /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[])[] = [
+  ["Lands", "top", "first"],
+  ["Stacks", "into", "place"],
+  ["Drops", "line", "gently"],
+];
+
+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..9c8351ec
--- /dev/null
+++ b/animata/text/short-slide-right.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..05a65649
--- /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[] = [
+  "Slides in as one piece.",
+  "Reveals together, in turn.",
+  "One motion, three words.",
+];
+
+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..5fcb321c
--- /dev/null
+++ b/animata/text/soft-blur-in.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..164610c6
--- /dev/null
+++ b/animata/text/soft-blur-in.tsx
@@ -0,0 +1,115 @@
+"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: "sequential",
+  },
+};
+
+const DEFAULT_SAMPLES: readonly string[] = [
+  "Coming into focus.",
+  "Edges sharpen up.",
+  "Letters land softly.",
+];
+
+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..f5d3c8fc
--- /dev/null
+++ b/animata/text/spring-scale-in.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..96639533
--- /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[] = [
+  "Lands with a small bounce.",
+  "Settles after the spring.",
+  "A gentle overshoot.",
+];
+
+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..00cfd024
--- /dev/null
+++ b/animata/text/top-down-letters.stories.tsx
@@ -0,0 +1,22 @@
+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: {
+    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..c557ec0b
--- /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[] = ["Drop", "Above", "Title"];
+
+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/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/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 2b2508f4..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",
@@ -164,7 +168,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>
@@ -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 fd638d31..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", {
@@ -158,9 +155,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..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", {
@@ -155,7 +149,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 +162,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..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>
 
@@ -76,7 +75,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">
@@ -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..2306f03c
--- /dev/null
+++ b/app/(main)/text-animations/page.tsx
@@ -0,0 +1,216 @@
+"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";
+
+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: "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..ad144cb1 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 mt-2" />;
 }
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/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..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";
@@ -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 {
@@ -38,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) => {
@@ -117,8 +117,22 @@ const components = {
   Alert,
   AlertTitle,
   AlertDescription,
+  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__,
@@ -263,10 +277,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 +298,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/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..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);
@@ -41,7 +42,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: [] },
+        ],
       },
     ],
   },
@@ -82,7 +95,10 @@ const sidebarNav: SidebarNavItem[] = [
     ],
   },
   {
+    icon: "text",
     title: "Text",
+    label: `${-1 + createLinks("text").length}`,
+    href: "/docs/text",
     items: createLinks("text"),
   },
   {
@@ -211,10 +227,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 +235,10 @@ export const docsConfig: DocsConfig = {
       title: "Blog",
       href: "/blog",
     },
+    {
+      title: "Changelog",
+      href: "/docs/changelog",
+    },
   ],
   sidebarNav,
 };
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.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..d92d2514
--- /dev/null
+++ b/content/docs/changelog/2026-04.mdx
@@ -0,0 +1,108 @@
+---
+title: April 2026
+description: 19 new text animation presets, shadcn registry launch, announcement ribbon, site revamp.
+date: 2026-04-25
+---
+
+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
+
+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.
+
+<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
+
+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..248a430e
--- /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)
+
+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)
+
+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) | 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 |
+| [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>
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..1a55ba35
--- /dev/null
+++ b/content/docs/text/index.mdx
@@ -0,0 +1,234 @@
+---
+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 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="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)
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 .",