diff --git a/.gitignore b/.gitignore
index 57cbf583..aa3aae8d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,6 +20,7 @@
 # misc
 .DS_Store
 *.pem
+.patterns/
 
 # debug
 npm-debug.log*
diff --git a/CLAUDE.md b/CLAUDE.md
index 1f6f6f07..04be73b8 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -10,7 +10,7 @@ Animata is a free, open-source library of animated React components built with N
 - Use `cn()` from `@/lib/utils` for class merging — never raw string concatenation
 - Tailwind for layout, color, spacing, and transitions on the component itself
 - Co-located `<name>.css` imported from the TSX for keyframes, pseudo-elements, and selectors Tailwind cannot express (see `roll-text.tsx`, `metis-text.tsx`)
-- Inline `<style>` blocks are fine for small self-contained keyframes when a separate file would be overkill (see `marquee.tsx`)
+- No inline `<style>` blocks — use co-located `<name>.css` imported from the TSX (see `marquee.tsx`, `roll-text.tsx`)
 - No CSS modules, no styled-components
 - Fonts: `--font-display` = Instrument Sans (headings/display), `--font-sans` = IBM Plex Sans (body), `--font-mono` = Lilex
 - Brand yellow: `#ffcc00` (from logo) — use for highlights and badges
diff --git a/animata/background/animated-beam.css b/animata/background/animated-beam.css
new file mode 100644
index 00000000..a992485f
--- /dev/null
+++ b/animata/background/animated-beam.css
@@ -0,0 +1,28 @@
+@layer components {
+  @keyframes meteor {
+    0% {
+      transform: translateY(-20%) translateX(-50%);
+      opacity: 0;
+    }
+
+    12% {
+      opacity: var(--opacity, 1);
+    }
+
+    88% {
+      opacity: var(--opacity, 1);
+    }
+
+    100% {
+      transform: translateY(300%) translateX(-50%);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ab-beam {
+      animation: none !important;
+      opacity: 0 !important;
+    }
+  }
+}
diff --git a/animata/background/animated-beam.tsx b/animata/background/animated-beam.tsx
index 7ccc9adf..70d31404 100644
--- a/animata/background/animated-beam.tsx
+++ b/animata/background/animated-beam.tsx
@@ -1,5 +1,7 @@
 import { cn } from "@/lib/utils";
 
+import "./animated-beam.css";
+
 // Deterministic 0–1 pseudo-random from an integer — same on server and client,
 // so each beam gets its own length/speed/etc. without a hydration mismatch.
 const prand = (n: number) => {
@@ -56,18 +58,6 @@ function Beam({ index }: { index: number }) {
 function Background() {
   return (
     <div className="absolute inset-0 z-0 flex flex-row justify-center overflow-hidden bg-linear-to-t from-indigo-900 to-indigo-950">
-      <style>{`
-        @keyframes meteor {
-          0% { transform: translateY(-20%) translateX(-50%); opacity: 0; }
-          12% { opacity: var(--opacity, 1); }
-          88% { opacity: var(--opacity, 1); }
-          100% { transform: translateY(300%) translateX(-50%); opacity: 0; }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .ab-beam { animation: none !important; opacity: 0 !important; }
-        }
-      `}</style>
-
       {/* soft glow */}
       <div
         style={{
diff --git a/animata/background/shooting-stars.css b/animata/background/shooting-stars.css
new file mode 100644
index 00000000..ade68745
--- /dev/null
+++ b/animata/background/shooting-stars.css
@@ -0,0 +1,32 @@
+@layer components {
+  @keyframes ss-shoot {
+    0% {
+      transform: translate(0px, 0px);
+      opacity: 0;
+    }
+
+    6% {
+      opacity: 1;
+    }
+
+    82% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: translate(var(--dx), var(--dy));
+      opacity: 0;
+    }
+  }
+
+  @keyframes ss-twinkle {
+    0%,
+    100% {
+      opacity: var(--o);
+    }
+
+    50% {
+      opacity: calc(var(--o) * 0.25);
+    }
+  }
+}
diff --git a/animata/background/shooting-stars.tsx b/animata/background/shooting-stars.tsx
index 1c97af0d..5b0ceb53 100644
--- a/animata/background/shooting-stars.tsx
+++ b/animata/background/shooting-stars.tsx
@@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
+import "./shooting-stars.css";
+
 /**
  * ShootingStars — a night sky where streaks shoot across with variable length,
  * speed and direction, over a twinkling starfield.
@@ -144,19 +146,6 @@ export default function ShootingStars({
         ref={containerRef}
         className="absolute inset-0 z-0 bg-linear-to-b from-indigo-950 to-[#05050f]"
       >
-        <style>{`
-          @keyframes ss-shoot {
-            0%   { transform: translate(0px, 0px); opacity: 0; }
-            6%   { opacity: 1; }
-            82%  { opacity: 1; }
-            100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
-          }
-          @keyframes ss-twinkle {
-            0%, 100% { opacity: var(--o); }
-            50%      { opacity: calc(var(--o) * 0.25); }
-          }
-        `}</style>
-
         <div
           className="absolute inset-x-0 top-1/4 h-3/4 opacity-40"
           style={{
diff --git a/animata/button/algolia-blue-button.css b/animata/button/algolia-blue-button.css
new file mode 100644
index 00000000..83f9996d
--- /dev/null
+++ b/animata/button/algolia-blue-button.css
@@ -0,0 +1,27 @@
+@layer components {
+  .algolia-blue-btn {
+    box-shadow:
+      rgba(45, 35, 66, 0.4) 0 2px 4px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
+  }
+
+  .algolia-blue-btn:hover {
+    box-shadow:
+      rgba(45, 35, 66, 0.4) 0 4px 8px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      #3c4fe0 0 -3px 0 inset;
+  }
+
+  .algolia-blue-btn:focus {
+    box-shadow:
+      #3c4fe0 0 0 0 1.5px inset,
+      rgba(45, 35, 66, 0.4) 0 2px 4px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      #3c4fe0 0 -3px 0 inset;
+  }
+
+  .algolia-blue-btn:active {
+    box-shadow: #3c4fe0 0 3px 7px inset;
+  }
+}
diff --git a/animata/button/algolia-blue-button.tsx b/animata/button/algolia-blue-button.tsx
index 09f83bfd..6f0ba00f 100644
--- a/animata/button/algolia-blue-button.tsx
+++ b/animata/button/algolia-blue-button.tsx
@@ -1,20 +1,8 @@
+import "./algolia-blue-button.css";
+
 export default function AlgoliaBlueButton() {
   return (
     <button className="algolia-blue-btn relative box-border inline-flex h-12 cursor-pointer touch-manipulation items-center justify-center overflow-hidden whitespace-nowrap rounded-md border-0 bg-linear-to-r from-sky-500 to-blue-600 px-4 font-mono leading-none text-white no-underline transition-transform duration-150 ease-in-out hover:-translate-y-0.5 active:translate-y-0.5">
-      <style>{`
-        .algolia-blue-btn {
-          box-shadow: rgba(45,35,66,0.4) 0 2px 4px, rgba(45,35,66,0.3) 0 7px 13px -3px, rgba(58,65,111,0.5) 0 -3px 0 inset;
-        }
-        .algolia-blue-btn:hover {
-          box-shadow: rgba(45,35,66,0.4) 0 4px 8px, rgba(45,35,66,0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
-        }
-        .algolia-blue-btn:focus {
-          box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45,35,66,0.4) 0 2px 4px, rgba(45,35,66,0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
-        }
-        .algolia-blue-btn:active {
-          box-shadow: #3c4fe0 0 3px 7px inset;
-        }
-      `}</style>
       Algolia Blue
     </button>
   );
diff --git a/animata/button/algolia-white-button.css b/animata/button/algolia-white-button.css
new file mode 100644
index 00000000..b4637944
--- /dev/null
+++ b/animata/button/algolia-white-button.css
@@ -0,0 +1,27 @@
+@layer components {
+  .algolia-white-btn {
+    box-shadow:
+      rgba(45, 35, 66, 0.4) 0 2px 4px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      #d6d6e7 0 -3px 0 inset;
+  }
+
+  .algolia-white-btn:hover {
+    box-shadow:
+      rgba(45, 35, 66, 0.4) 0 4px 8px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      #d6d6e7 0 -3px 0 inset;
+  }
+
+  .algolia-white-btn:focus {
+    box-shadow:
+      #d6d6e7 0 0 0 1.5px inset,
+      rgba(45, 35, 66, 0.4) 0 2px 4px,
+      rgba(45, 35, 66, 0.3) 0 7px 13px -3px,
+      #d6d6e7 0 -3px 0 inset;
+  }
+
+  .algolia-white-btn:active {
+    box-shadow: #d6d6e7 0 3px 7px inset;
+  }
+}
diff --git a/animata/button/algolia-white-button.tsx b/animata/button/algolia-white-button.tsx
index dfc8f424..bbc07d09 100644
--- a/animata/button/algolia-white-button.tsx
+++ b/animata/button/algolia-white-button.tsx
@@ -1,21 +1,9 @@
+import "./algolia-white-button.css";
+
 export default function AlgoliaWhiteButton() {
   return (
     <button className="algolia-white-btn inline-flex h-12 cursor-pointer touch-manipulation items-center justify-center overflow-hidden whitespace-nowrap rounded border-0 bg-[#FCFCFD] px-4 font-mono leading-none text-slate-800 no-underline transition-transform duration-150 ease-in-out hover:-translate-y-0.5 active:translate-y-0.5">
-      <style>{`
-        .algolia-white-btn {
-          box-shadow: rgba(45,35,66,0.4) 0 2px 4px, rgba(45,35,66,0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
-        }
-        .algolia-white-btn:hover {
-          box-shadow: rgba(45,35,66,0.4) 0 4px 8px, rgba(45,35,66,0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
-        }
-        .algolia-white-btn:focus {
-          box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45,35,66,0.4) 0 2px 4px, rgba(45,35,66,0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
-        }
-        .algolia-white-btn:active {
-          box-shadow: #D6D6E7 0 3px 7px inset;
-        }
-      `}</style>
-      Aloglia White
+      Algolia White
     </button>
   );
 }
diff --git a/animata/button/ripple-button.css b/animata/button/ripple-button.css
new file mode 100644
index 00000000..2f599332
--- /dev/null
+++ b/animata/button/ripple-button.css
@@ -0,0 +1,43 @@
+@layer components {
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    background-color: #000000;
+    z-index: 1;
+    opacity: 0;
+    transition: transform 50ms linear;
+  }
+
+  .ripple-enter {
+    animation: ripple-enter 250ms ease-out forwards;
+  }
+
+  .ripple-leave {
+    animation: ripple-leave 250ms ease-out forwards;
+  }
+
+  @keyframes ripple-enter {
+    from {
+      transform: scale(0);
+      opacity: 1;
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes ripple-leave {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    to {
+      transform: scale(0);
+      opacity: 1;
+    }
+  }
+}
diff --git a/animata/button/ripple-button.tsx b/animata/button/ripple-button.tsx
index 84955925..ebff66f7 100644
--- a/animata/button/ripple-button.tsx
+++ b/animata/button/ripple-button.tsx
@@ -1,6 +1,9 @@
 "use client";
+
 import { useCallback, useRef, useState } from "react";
 
+import "./ripple-button.css";
+
 interface RippleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
 }
@@ -97,31 +100,6 @@ export default function RippleButton({ children, ...props }: RippleButtonProps)
     >
       <span className="relative z-[2]">{children}</span>
       <span ref={rippleRef} className="ripple" />
-      <style>{`
-        .ripple {
-          position: absolute;
-          border-radius: 50%;
-          pointer-events: none;
-          background-color: #000000;
-          z-index: 1;
-          opacity: 0;
-          transition: transform 50ms linear;
-        }
-        .ripple-enter {
-          animation: ripple-enter 250ms ease-out forwards;
-        }
-        .ripple-leave {
-          animation: ripple-leave 250ms ease-out forwards;
-        }
-        @keyframes ripple-enter {
-          from { transform: scale(0); opacity: 1; }
-          to { transform: scale(1); opacity: 1; }
-        }
-        @keyframes ripple-leave {
-          from { transform: scale(1); opacity: 1; }
-          to { transform: scale(0); opacity: 1; }
-        }
-      `}</style>
     </button>
   );
 }
diff --git a/animata/card/card-spread.css b/animata/card/card-spread.css
new file mode 100644
index 00000000..5335bbf4
--- /dev/null
+++ b/animata/card/card-spread.css
@@ -0,0 +1,31 @@
+@layer components {
+  .card-spread-stage {
+    /* Quick throw, soft settle — expand on click only */
+    --ease-throw: cubic-bezier(0.22, 1.18, 0.36, 1);
+  }
+
+  .card-spread-motion--expand {
+    transition: transform 480ms var(--ease-throw);
+  }
+
+  .card-spread-motion--collapse {
+    transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  .card-spread-stage--expand {
+    transition: width 480ms var(--ease-throw);
+  }
+
+  .card-spread-stage--collapse {
+    transition: width 520ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .card-spread-motion--expand,
+    .card-spread-motion--collapse,
+    .card-spread-stage--expand,
+    .card-spread-stage--collapse {
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
diff --git a/animata/card/card-spread.tsx b/animata/card/card-spread.tsx
index 683fe13b..216571bc 100644
--- a/animata/card/card-spread.tsx
+++ b/animata/card/card-spread.tsx
@@ -6,6 +6,8 @@ import Notes, { NotesCard } from "@/animata/widget/notes";
 import ShoppingList from "@/animata/widget/shopping-list";
 import { cn } from "@/lib/utils";
 
+import "./card-spread.css";
+
 /** w-48 + gap-3 — horizontal step between spread slots */
 const CARD_STEP = "12.75rem";
 
@@ -72,38 +74,6 @@ export default function CardSpread() {
 
   return (
     <div className="inline-flex min-h-80 items-end justify-center overflow-visible p-8">
-      <style>{`
-        .card-spread-stage {
-          /* Quick throw, soft settle — expand on click only */
-          --ease-throw: cubic-bezier(0.22, 1.18, 0.36, 1);
-        }
-
-        .card-spread-motion--expand {
-          transition: transform 480ms var(--ease-throw);
-        }
-
-        .card-spread-motion--collapse {
-          transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1);
-        }
-
-        .card-spread-stage--expand {
-          transition: width 480ms var(--ease-throw);
-        }
-
-        .card-spread-stage--collapse {
-          transition: width 520ms cubic-bezier(0.33, 1, 0.68, 1);
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .card-spread-motion--expand,
-          .card-spread-motion--collapse,
-          .card-spread-stage--expand,
-          .card-spread-stage--collapse {
-            transition-duration: 0.01ms !important;
-          }
-        }
-      `}</style>
-
       <div
         role="button"
         tabIndex={0}
diff --git a/animata/card/collab-card.css b/animata/card/collab-card.css
new file mode 100644
index 00000000..efec7df3
--- /dev/null
+++ b/animata/card/collab-card.css
@@ -0,0 +1,129 @@
+@layer components {
+  .collab-cursor {
+    display: inline-block;
+    transform-origin: 20% 20%;
+    will-change: transform;
+    animation-fill-mode: both;
+  }
+
+  .collab-cursor--host {
+    animation: collab-host 9s ease-in-out infinite;
+  }
+
+  .collab-cursor--first {
+    animation: collab-first 5.5s ease-in-out infinite;
+  }
+
+  .collab-cursor--second {
+    animation: collab-second 5.5s ease-in-out infinite 0.8s;
+  }
+
+  .collab-cursor [data-burst] {
+    opacity: 0;
+    animation: collab-burst 5.5s ease-in-out infinite;
+    animation-fill-mode: both;
+  }
+
+  .collab-cursor--first [data-burst] {
+    animation-delay: 1.1s;
+  }
+
+  .collab-cursor--second [data-burst] {
+    animation-delay: 2.7s;
+  }
+
+  .collab-live-ping {
+    animation: collab-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  @keyframes collab-host {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) rotate(-14deg);
+    }
+
+    22% {
+      transform: translate3d(54cqi, 2cqi, 0) rotate(-4deg);
+    }
+
+    48% {
+      transform: translate3d(56cqi, 19cqi, 0) rotate(10deg);
+    }
+
+    72% {
+      transform: translate3d(-1cqi, 21cqi, 0) rotate(-2deg);
+    }
+  }
+
+  @keyframes collab-first {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) rotate(0deg);
+    }
+
+    30% {
+      transform: translate3d(-1.2cqi, -1cqi, 0) rotate(-5deg);
+    }
+
+    60% {
+      transform: translate3d(0.8cqi, 0.6cqi, 0) rotate(3deg);
+    }
+  }
+
+  @keyframes collab-second {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) rotate(0deg);
+    }
+
+    35% {
+      transform: translate3d(1.4cqi, -0.8cqi, 0) rotate(6deg);
+    }
+
+    65% {
+      transform: translate3d(-0.6cqi, 0.6cqi, 0) rotate(-3deg);
+    }
+  }
+
+  @keyframes collab-burst {
+    0%,
+    14% {
+      opacity: 0;
+      transform: scale(0.4);
+    }
+
+    22% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    34%,
+    100% {
+      opacity: 0;
+      transform: scale(1.5);
+    }
+  }
+
+  @keyframes collab-ping {
+    0% {
+      transform: scale(1);
+      opacity: 0.7;
+    }
+
+    75%,
+    100% {
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .collab-cursor,
+    .collab-cursor [data-burst],
+    .collab-live-ping {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
diff --git a/animata/card/collab-card.tsx b/animata/card/collab-card.tsx
index 823c2d33..bc2cc702 100644
--- a/animata/card/collab-card.tsx
+++ b/animata/card/collab-card.tsx
@@ -1,5 +1,7 @@
 import { cn } from "@/lib/utils";
 
+import "./collab-card.css";
+
 export interface Collaborator {
   name: string;
   /** Tailwind background class for the pill. */
@@ -273,67 +275,6 @@ export default function CollabCard({
           {trailing ? <span className="text-white/80">{trailing}</span> : null}
         </p>
       </div>
-
-      <style>{`
-        .collab-cursor {
-          display: inline-block;
-          transform-origin: 20% 20%;
-          will-change: transform;
-          animation-fill-mode: both;
-        }
-        .collab-cursor--host    { animation: collab-host   9s ease-in-out infinite; }
-        .collab-cursor--first   { animation: collab-first  5.5s ease-in-out infinite; }
-        .collab-cursor--second  { animation: collab-second 5.5s ease-in-out infinite 0.8s; }
-
-        .collab-cursor [data-burst] {
-          opacity: 0;
-          animation: collab-burst 5.5s ease-in-out infinite;
-          animation-fill-mode: both;
-        }
-        .collab-cursor--first  [data-burst] { animation-delay: 1.1s; }
-        .collab-cursor--second [data-burst] { animation-delay: 2.7s; }
-
-        .collab-live-ping { animation: collab-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
-
-        @keyframes collab-host {
-          0%, 100% { transform: translate3d(0, 0, 0) rotate(-14deg); }
-          22%      { transform: translate3d(54cqi, 2cqi, 0) rotate(-4deg); }
-          48%      { transform: translate3d(56cqi, 19cqi, 0) rotate(10deg); }
-          72%      { transform: translate3d(-1cqi, 21cqi, 0) rotate(-2deg); }
-        }
-
-        @keyframes collab-first {
-          0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
-          30%      { transform: translate3d(-1.2cqi, -1cqi, 0) rotate(-5deg); }
-          60%      { transform: translate3d(0.8cqi, 0.6cqi, 0) rotate(3deg); }
-        }
-        @keyframes collab-second {
-          0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
-          35%      { transform: translate3d(1.4cqi, -0.8cqi, 0) rotate(6deg); }
-          65%      { transform: translate3d(-0.6cqi, 0.6cqi, 0) rotate(-3deg); }
-        }
-
-        @keyframes collab-burst {
-          0%, 14%   { opacity: 0; transform: scale(0.4); }
-          22%       { opacity: 1; transform: scale(1); }
-          34%, 100% { opacity: 0; transform: scale(1.5); }
-        }
-
-        @keyframes collab-ping {
-          0%       { transform: scale(1);   opacity: 0.7; }
-          75%, 100%{ transform: scale(2.4); opacity: 0;   }
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .collab-cursor,
-          .collab-cursor [data-burst],
-          .collab-live-ping {
-            animation: none;
-            opacity: 1;
-            transform: none;
-          }
-        }
-      `}</style>
     </div>
   );
 }
diff --git a/animata/container/animated-border-trail.css b/animata/container/animated-border-trail.css
new file mode 100644
index 00000000..2ff63086
--- /dev/null
+++ b/animata/container/animated-border-trail.css
@@ -0,0 +1,17 @@
+@layer components {
+  @property --border-trail-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+
+  @keyframes border-trail {
+    0% {
+      --border-trail-angle: 0deg;
+    }
+
+    100% {
+      --border-trail-angle: 360deg;
+    }
+  }
+}
diff --git a/animata/container/animated-border-trail.tsx b/animata/container/animated-border-trail.tsx
index 4b7c11f6..831011d0 100644
--- a/animata/container/animated-border-trail.tsx
+++ b/animata/container/animated-border-trail.tsx
@@ -1,5 +1,7 @@
 import { cn } from "@/lib/utils";
 
+import "./animated-border-trail.css";
+
 interface AnimatedTrailProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The duration of the animation.
@@ -33,19 +35,6 @@ export default function AnimatedBorderTrail({
       {...props}
       className={cn("relative h-fit w-fit overflow-hidden rounded-2xl bg-gray-200 p-px", className)}
     >
-      <style>
-        {`
-          @property --border-trail-angle {
-            syntax: "<angle>";
-            initial-value: 0deg;
-            inherits: false;
-          }
-          @keyframes border-trail {
-            0% { --border-trail-angle: 0deg; }
-            100% { --border-trail-angle: 360deg; }
-          }
-        `}
-      </style>
       <div
         className="absolute inset-0 h-full w-full"
         style={{
diff --git a/animata/container/marquee.css b/animata/container/marquee.css
new file mode 100644
index 00000000..83bc7406
--- /dev/null
+++ b/animata/container/marquee.css
@@ -0,0 +1,33 @@
+@layer components {
+  @keyframes marquee-x {
+    from {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+
+  @keyframes marquee-y {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+
+  .marquee-horizontal {
+    animation: marquee-x var(--duration) infinite linear;
+  }
+
+  .marquee-vertical {
+    animation: marquee-y var(--duration) infinite linear;
+  }
+
+  .group\/marquee:hover .marquee-pause-on-hover {
+    animation-play-state: paused;
+  }
+}
diff --git a/animata/container/marquee.tsx b/animata/container/marquee.tsx
index 7945b710..6d34283e 100644
--- a/animata/container/marquee.tsx
+++ b/animata/container/marquee.tsx
@@ -1,5 +1,7 @@
 import { cn } from "@/lib/utils";
 
+import "./marquee.css";
+
 interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Should the marquee scroll horizontally or vertically.
@@ -54,25 +56,6 @@ export default function Marquee({
         className,
       )}
     >
-      <style>{`
-        @keyframes marquee-x {
-          from { transform: translateX(0); }
-          to { transform: translateX(calc(-100% - var(--gap))); }
-        }
-        @keyframes marquee-y {
-          from { transform: translateY(0); }
-          to { transform: translateY(calc(-100% - var(--gap))); }
-        }
-        .marquee-horizontal {
-          animation: marquee-x var(--duration) infinite linear;
-        }
-        .marquee-vertical {
-          animation: marquee-y var(--duration) infinite linear;
-        }
-        .group\\/marquee:hover .marquee-pause-on-hover {
-          animation-play-state: paused;
-        }
-      `}</style>
       {Array.from({ length: repeat }).map((_, index) => (
         <div
           key={`item-${index}`}
diff --git a/animata/fabs/flower-menu.css b/animata/fabs/flower-menu.css
new file mode 100644
index 00000000..a9d38d35
--- /dev/null
+++ b/animata/fabs/flower-menu.css
@@ -0,0 +1,12 @@
+@layer components {
+  .flower-petal {
+    transition-property: transform, opacity;
+    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flower-petal {
+      transition: none !important;
+    }
+  }
+}
diff --git a/animata/fabs/flower-menu.tsx b/animata/fabs/flower-menu.tsx
index 6dbb0b47..cc72694d 100644
--- a/animata/fabs/flower-menu.tsx
+++ b/animata/fabs/flower-menu.tsx
@@ -6,6 +6,8 @@ import { useCallback, useEffect, useId, useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
+import "./flower-menu.css";
+
 type MenuItem = {
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   href: string;
@@ -200,18 +202,6 @@ export default function FlowerMenu({
       style={{ width: containerSize, height: containerSize, minHeight: containerSize }}
       {...props}
     >
-      <style>{`
-        .flower-petal {
-          transition-property: transform, opacity;
-          transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .flower-petal {
-            transition: none !important;
-          }
-        }
-      `}</style>
-
       <MenuToggler
         isOpen={isOpen}
         onToggle={toggle}
diff --git a/animata/fabs/speed-dial.css b/animata/fabs/speed-dial.css
new file mode 100644
index 00000000..24284dfb
--- /dev/null
+++ b/animata/fabs/speed-dial.css
@@ -0,0 +1,84 @@
+@layer components {
+  @keyframes speed-dial-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.82);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes speed-dial-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.82);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes speed-dial-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(10px) scale(0.82);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+
+  @keyframes speed-dial-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(-10px) scale(0.82);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+
+  [data-direction="up"] .speed-dial-item {
+    animation-name: speed-dial-in-up;
+  }
+
+  [data-direction="down"] .speed-dial-item {
+    animation-name: speed-dial-in-down;
+  }
+
+  [data-direction="left"] .speed-dial-item {
+    animation-name: speed-dial-in-left;
+  }
+
+  [data-direction="right"] .speed-dial-item {
+    animation-name: speed-dial-in-right;
+  }
+
+  .speed-dial-item {
+    animation-duration: 120ms;
+    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    animation-fill-mode: both;
+    animation-delay: calc(12ms + var(--i) * 22ms);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .speed-dial-item {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+
+    .speed-dial-trigger-icon {
+      transition: none;
+    }
+  }
+}
diff --git a/animata/fabs/speed-dial.tsx b/animata/fabs/speed-dial.tsx
index bbca45a8..e44a6928 100644
--- a/animata/fabs/speed-dial.tsx
+++ b/animata/fabs/speed-dial.tsx
@@ -6,6 +6,8 @@ import { useCallback, useEffect, useId, useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
+import "./speed-dial.css";
+
 type Direction = "up" | "down" | "left" | "right";
 
 interface SpeedDialAction {
@@ -130,45 +132,6 @@ export default function SpeedDial({
       data-direction={direction}
       {...props}
     >
-      <style>{`
-        @keyframes speed-dial-in-up {
-          from { opacity: 0; transform: translateY(10px) scale(0.82); }
-          to { opacity: 1; transform: translateY(0) scale(1); }
-        }
-        @keyframes speed-dial-in-down {
-          from { opacity: 0; transform: translateY(-10px) scale(0.82); }
-          to { opacity: 1; transform: translateY(0) scale(1); }
-        }
-        @keyframes speed-dial-in-left {
-          from { opacity: 0; transform: translateX(10px) scale(0.82); }
-          to { opacity: 1; transform: translateX(0) scale(1); }
-        }
-        @keyframes speed-dial-in-right {
-          from { opacity: 0; transform: translateX(-10px) scale(0.82); }
-          to { opacity: 1; transform: translateX(0) scale(1); }
-        }
-        [data-direction="up"] .speed-dial-item { animation-name: speed-dial-in-up; }
-        [data-direction="down"] .speed-dial-item { animation-name: speed-dial-in-down; }
-        [data-direction="left"] .speed-dial-item { animation-name: speed-dial-in-left; }
-        [data-direction="right"] .speed-dial-item { animation-name: speed-dial-in-right; }
-        .speed-dial-item {
-          animation-duration: 120ms;
-          animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
-          animation-fill-mode: both;
-          animation-delay: calc(12ms + var(--i) * 22ms);
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .speed-dial-item {
-            animation: none;
-            opacity: 1;
-            transform: none;
-          }
-          .speed-dial-trigger-icon {
-            transition: none;
-          }
-        }
-      `}</style>
-
       <button
         ref={triggerRef}
         type="button"
diff --git a/animata/feature-cards/content-scan.css b/animata/feature-cards/content-scan.css
new file mode 100644
index 00000000..68c32344
--- /dev/null
+++ b/animata/feature-cards/content-scan.css
@@ -0,0 +1,16 @@
+@layer components {
+  .highlight {
+    transition: background-color 0.3s ease;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+
+  .highlight.active {
+    background-color: #ffcc00;
+    color: hsl(var(--foreground));
+  }
+
+  .scanned-text {
+    color: hsl(var(--foreground));
+  }
+}
diff --git a/animata/feature-cards/content-scan.tsx b/animata/feature-cards/content-scan.tsx
index f7964ed7..36dfad3f 100644
--- a/animata/feature-cards/content-scan.tsx
+++ b/animata/feature-cards/content-scan.tsx
@@ -2,6 +2,8 @@ import { motion, useAnimation } from "motion/react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 
+import "./content-scan.css";
+
 interface ContentScannerProps {
   content: string;
   highlightWords: string[];
@@ -227,20 +229,6 @@ const ContentScanner: React.FC<ContentScannerProps> = ({
           </div>
         </div>
       </div>
-
-      <style>{`
-        .highlight {
-          transition: background-color 0.3s ease;
-          box-decoration-break: clone;
-          -webkit-box-decoration-break: clone;
-        }
-        .highlight.active {
-          background-color: #DAD9FE;
-        }
-        .scanned-text {
-          color: #4B0082;
-        }
-      `}</style>
     </div>
   );
 };
diff --git a/animata/preloader/split-reveal.css b/animata/preloader/split-reveal.css
new file mode 100644
index 00000000..7e349c34
--- /dev/null
+++ b/animata/preloader/split-reveal.css
@@ -0,0 +1,52 @@
+@layer components {
+  @keyframes split-reveal-shutter-top {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+
+  @keyframes split-reveal-shutter-bottom {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+
+  [data-split-reveal-overlay] [data-split-reveal-progress] {
+    opacity: 1;
+    transition: opacity var(--split-reveal-progress-fade) ease-out;
+  }
+
+  [data-split-reveal-overlay][data-phase="fade-ui"] [data-split-reveal-progress],
+  [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-progress] {
+    opacity: 0;
+  }
+
+  [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-shutter="top"] {
+    animation: split-reveal-shutter-top var(--split-reveal-duration) cubic-bezier(0.76, 0, 0.24, 1)
+      forwards;
+  }
+
+  [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-shutter="bottom"] {
+    animation: split-reveal-shutter-bottom var(--split-reveal-duration)
+      cubic-bezier(0.76, 0, 0.24, 1) forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-shutter] {
+      animation: none;
+      opacity: 0;
+    }
+
+    [data-split-reveal-overlay] [data-split-reveal-progress] {
+      transition: none;
+    }
+  }
+}
diff --git a/animata/preloader/split-reveal.tsx b/animata/preloader/split-reveal.tsx
index bb6e4e56..ebe3b070 100644
--- a/animata/preloader/split-reveal.tsx
+++ b/animata/preloader/split-reveal.tsx
@@ -15,6 +15,8 @@ import {
 
 import { cn } from "@/lib/utils";
 
+import "./split-reveal.css";
+
 type PreloaderPhase = "loading" | "fade-ui" | "reveal" | "done";
 
 export interface SplitRevealProgressState {
@@ -35,8 +37,6 @@ interface SplitRevealContextValue extends SplitRevealProgressState {
 
 const SplitRevealContext = createContext<SplitRevealContextValue | null>(null);
 
-const REVEAL_EASE = "cubic-bezier(0.76, 0, 0.24, 1)";
-
 export function useSplitReveal() {
   const context = use(SplitRevealContext);
   if (!context) {
@@ -167,59 +167,6 @@ function useScrollLock(active: boolean) {
   }, [active]);
 }
 
-function SplitRevealStyles() {
-  return (
-    <style>{`
-      @keyframes split-reveal-shutter-top {
-        from {
-          transform: translate3d(0, 0, 0);
-        }
-        to {
-          transform: translate3d(0, -100%, 0);
-        }
-      }
-
-      @keyframes split-reveal-shutter-bottom {
-        from {
-          transform: translate3d(0, 0, 0);
-        }
-        to {
-          transform: translate3d(0, 100%, 0);
-        }
-      }
-
-      [data-split-reveal-overlay] [data-split-reveal-progress] {
-        opacity: 1;
-        transition: opacity var(--split-reveal-progress-fade) ease-out;
-      }
-
-      [data-split-reveal-overlay][data-phase="fade-ui"] [data-split-reveal-progress],
-      [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-progress] {
-        opacity: 0;
-      }
-
-      [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-shutter="top"] {
-        animation: split-reveal-shutter-top var(--split-reveal-duration) ${REVEAL_EASE} forwards;
-      }
-
-      [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-shutter="bottom"] {
-        animation: split-reveal-shutter-bottom var(--split-reveal-duration) ${REVEAL_EASE} forwards;
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        [data-split-reveal-overlay][data-phase="reveal"] [data-split-reveal-shutter] {
-          animation: none;
-          opacity: 0;
-        }
-
-        [data-split-reveal-overlay] [data-split-reveal-progress] {
-          transition: none;
-        }
-      }
-    `}</style>
-  );
-}
-
 function SplitRevealOverlayFrame({ className, children, ...props }: ComponentProps<"div">) {
   const { phase, zIndex, revealDuration, progressFadeMs, isActive } = useSplitReveal();
 
@@ -248,7 +195,6 @@ function SplitRevealOverlayFrame({ className, children, ...props }: ComponentPro
       data-split-reveal-overlay=""
       {...props}
     >
-      <SplitRevealStyles />
       {children}
     </div>
   );
diff --git a/animata/scroll/stacked-sections.css b/animata/scroll/stacked-sections.css
new file mode 100644
index 00000000..cc4db84a
--- /dev/null
+++ b/animata/scroll/stacked-sections.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-stacked-content][data-stacked-covered] {
+    transform-origin: 50% 0%;
+  }
+}
diff --git a/animata/scroll/stacked-sections.tsx b/animata/scroll/stacked-sections.tsx
index 5a0c8119..01073f3c 100644
--- a/animata/scroll/stacked-sections.tsx
+++ b/animata/scroll/stacked-sections.tsx
@@ -4,6 +4,8 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+import "./stacked-sections.css";
+
 export type StackedSectionsProps = {
   /**
    * One pane per direct child — sticky card > inner content (scale only).
@@ -165,12 +167,6 @@ export default function StackedSections({
 
   return (
     <>
-      <style>{`
-        [data-stacked-content][data-stacked-covered] {
-          transform-origin: 50% 0%;
-        }
-      `}</style>
-
       <div
         ref={deckRef}
         data-stacked-deck=""
diff --git a/animata/skeleton/category-skeleton.tsx b/animata/skeleton/category-skeleton.tsx
index fa26522e..29dff99d 100644
--- a/animata/skeleton/category-skeleton.tsx
+++ b/animata/skeleton/category-skeleton.tsx
@@ -19,7 +19,7 @@ export default function CategorySkeleton({ variant, className }: CategorySkeleto
       viewBox={`0 0 ${CARD_W} ${CARD_H}`}
       className={cn(
         "[--cg-darkest:#76756f] [--cg-lightest:#e3e3e3] [--cg-ink:var(--ink,var(--cg-darkest))] [--cg-faint:var(--ink-faint,var(--cg-lightest))] [--cg-soft:color-mix(in_oklab,var(--cg-ink)_50%,transparent)] dark:[--cg-ink:var(--ink,var(--cg-lightest))] dark:[--cg-faint:var(--ink-faint,var(--cg-darkest))]",
-        "w-full overflow-visible rounded-2xl text-foreground motion-safe:transition-[scale,transform] motion-safe:duration-300 motion-safe:ease-out group-hover/cg:scale-[1.02]",
+        "w-full overflow-visible rounded-2xl text-foreground motion-safe:transition-[scale,transform] motion-safe:duration-300 motion-safe:ease-out",
         className,
       )}
       aria-hidden="true"
diff --git a/animata/text/blur-out-up.stories.tsx b/animata/text/blur-out-up.stories.tsx
index 6c85ed17..f83582ab 100644
--- a/animata/text/blur-out-up.stories.tsx
+++ b/animata/text/blur-out-up.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import BlurOutUp from "@/animata/text/blur-out-up";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Blur Out Up",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/bottom-up-letters.stories.tsx b/animata/text/bottom-up-letters.stories.tsx
index b70dbf7c..8059ecf8 100644
--- a/animata/text/bottom-up-letters.stories.tsx
+++ b/animata/text/bottom-up-letters.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import BottomUpLetters from "@/animata/text/bottom-up-letters";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Bottom-Up Letters",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/fade-through.stories.tsx b/animata/text/fade-through.stories.tsx
index 43fdb6cb..1b88cdf7 100644
--- a/animata/text/fade-through.stories.tsx
+++ b/animata/text/fade-through.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import FadeThrough from "@/animata/text/fade-through";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Fade Through",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/focus-blur-resolve.stories.tsx b/animata/text/focus-blur-resolve.stories.tsx
index 3d8776a6..54fe0827 100644
--- a/animata/text/focus-blur-resolve.stories.tsx
+++ b/animata/text/focus-blur-resolve.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import FocusBlurResolve from "@/animata/text/focus-blur-resolve";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Focus Blur Resolve",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/kinetic-center-build.stories.tsx b/animata/text/kinetic-center-build.stories.tsx
index 0bc66aaf..8c380ec9 100644
--- a/animata/text/kinetic-center-build.stories.tsx
+++ b/animata/text/kinetic-center-build.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import KineticCenterBuild from "@/animata/text/kinetic-center-build";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Kinetic Center Build",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/line-by-line-slide.stories.tsx b/animata/text/line-by-line-slide.stories.tsx
index 61f63a35..ebd5f41c 100644
--- a/animata/text/line-by-line-slide.stories.tsx
+++ b/animata/text/line-by-line-slide.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import LineByLineSlide from "@/animata/text/line-by-line-slide";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Line-by-Line Slide",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/mask-reveal-up.stories.tsx b/animata/text/mask-reveal-up.stories.tsx
index 97e89568..695572b1 100644
--- a/animata/text/mask-reveal-up.stories.tsx
+++ b/animata/text/mask-reveal-up.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import MaskRevealUp from "@/animata/text/mask-reveal-up";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Mask Reveal Up",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/micro-scale-fade.stories.tsx b/animata/text/micro-scale-fade.stories.tsx
index 25eb76fe..b75f023f 100644
--- a/animata/text/micro-scale-fade.stories.tsx
+++ b/animata/text/micro-scale-fade.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import MicroScaleFade from "@/animata/text/micro-scale-fade";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Micro Scale Fade",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/per-character-rise.stories.tsx b/animata/text/per-character-rise.stories.tsx
index e7cc2505..a630426b 100644
--- a/animata/text/per-character-rise.stories.tsx
+++ b/animata/text/per-character-rise.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import PerCharacterRise from "@/animata/text/per-character-rise";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Per-Character Rise",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/per-word-crossfade.stories.tsx b/animata/text/per-word-crossfade.stories.tsx
index 0b96c72d..e3aa8a2c 100644
--- a/animata/text/per-word-crossfade.stories.tsx
+++ b/animata/text/per-word-crossfade.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import PerWordCrossfade from "@/animata/text/per-word-crossfade";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Per-Word Crossfade",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/scale-down-fade.stories.tsx b/animata/text/scale-down-fade.stories.tsx
index de23d3c2..1b6c0280 100644
--- a/animata/text/scale-down-fade.stories.tsx
+++ b/animata/text/scale-down-fade.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import ScaleDownFade from "@/animata/text/scale-down-fade";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Scale Down Fade",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/shared-axis-y.stories.tsx b/animata/text/shared-axis-y.stories.tsx
index 3ba40297..e4f63f32 100644
--- a/animata/text/shared-axis-y.stories.tsx
+++ b/animata/text/shared-axis-y.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import SharedAxisY from "@/animata/text/shared-axis-y";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Shared Axis Y",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/shared-axis-z.stories.tsx b/animata/text/shared-axis-z.stories.tsx
index fe92bc4e..b25edfe8 100644
--- a/animata/text/shared-axis-z.stories.tsx
+++ b/animata/text/shared-axis-z.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import SharedAxisZ from "@/animata/text/shared-axis-z";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Shared Axis Z",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/shimmer-sweep.stories.tsx b/animata/text/shimmer-sweep.stories.tsx
index 5a9d8a0b..7414b9da 100644
--- a/animata/text/shimmer-sweep.stories.tsx
+++ b/animata/text/shimmer-sweep.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import ShimmerSweep from "@/animata/text/shimmer-sweep";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Shimmer Sweep",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/short-slide-down.stories.tsx b/animata/text/short-slide-down.stories.tsx
index 519097e7..15f15fd1 100644
--- a/animata/text/short-slide-down.stories.tsx
+++ b/animata/text/short-slide-down.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import ShortSlideDown from "@/animata/text/short-slide-down";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Short Slide Down",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/short-slide-right.stories.tsx b/animata/text/short-slide-right.stories.tsx
index 9c8351ec..8b3a68b9 100644
--- a/animata/text/short-slide-right.stories.tsx
+++ b/animata/text/short-slide-right.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import ShortSlideRight from "@/animata/text/short-slide-right";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Short Slide Right",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/soft-blur-in.stories.tsx b/animata/text/soft-blur-in.stories.tsx
index 5fcb321c..29937b48 100644
--- a/animata/text/soft-blur-in.stories.tsx
+++ b/animata/text/soft-blur-in.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import SoftBlurIn from "@/animata/text/soft-blur-in";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Soft Blur In",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/spring-scale-in.stories.tsx b/animata/text/spring-scale-in.stories.tsx
index f5d3c8fc..9831321f 100644
--- a/animata/text/spring-scale-in.stories.tsx
+++ b/animata/text/spring-scale-in.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import SpringScaleIn from "@/animata/text/spring-scale-in";
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 
 const meta = {
   title: "Text/Spring Scale In",
@@ -12,11 +13,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/animata/text/text-animator-demo.css b/animata/text/text-animator-demo.css
new file mode 100644
index 00000000..484a51b8
--- /dev/null
+++ b/animata/text/text-animator-demo.css
@@ -0,0 +1,23 @@
+/* Demo typography for preset previews — globals + text-animator.tsx + text-animator-list-demo.tsx */
+.text-animator-demo .text-animation-stage,
+[data-text-animator-demo] .text-animation-stage {
+  padding: clamp(1rem, 5cqi, 1.5rem);
+  perspective: 900px;
+  font-size: clamp(1rem, 10cqi, 2rem);
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.text-animator-demo .text-animation-title,
+.text-animator-demo .text-animation-kinetic-word,
+[data-text-animator-demo] .text-animation-title,
+[data-text-animator-demo] .text-animation-kinetic-word {
+  text-align: center;
+  letter-spacing: -0.025em;
+}
+
+.text-animator-demo .text-animation-title,
+[data-text-animator-demo] .text-animation-title {
+  text-wrap: balance;
+  font-variant-numeric: tabular-nums;
+}
diff --git a/animata/text/text-animator-demo.ts b/animata/text/text-animator-demo.ts
new file mode 100644
index 00000000..c608da19
--- /dev/null
+++ b/animata/text/text-animator-demo.ts
@@ -0,0 +1,8 @@
+/** Demo frame classes — typography lives in co-located text-animator-demo.css (imported by text-animator.tsx). */
+export const TEXT_ANIMATOR_DEMO_CLASS = "text-animator-demo";
+
+/** Storybook frame — bordered tile matching doc previews. */
+export const TEXT_ANIMATOR_STORY_FRAME_CLASS = `${TEXT_ANIMATOR_DEMO_CLASS} 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`;
+
+/** Text category index grid tiles. */
+export const TEXT_ANIMATOR_INDEX_FRAME_CLASS = `${TEXT_ANIMATOR_DEMO_CLASS} h-56 w-full min-h-56 text-foreground`;
diff --git a/animata/text/text-animator-preset.stories-shared.ts b/animata/text/text-animator-preset.stories-shared.ts
new file mode 100644
index 00000000..dca44086
--- /dev/null
+++ b/animata/text/text-animator-preset.stories-shared.ts
@@ -0,0 +1,8 @@
+import { TEXT_ANIMATOR_STORY_FRAME_CLASS } from "@/animata/text/text-animator-demo";
+
+export const TEXT_ANIMATOR_PRESET_STORY_ARGS = {
+  speed: 0.72,
+  holdMs: 550,
+  gapMs: 320,
+  className: TEXT_ANIMATOR_STORY_FRAME_CLASS,
+} as const;
diff --git a/animata/text/text-animator.css b/animata/text/text-animator.css
index c13017cc..ae5d7f17 100644
--- a/animata/text/text-animator.css
+++ b/animata/text/text-animator.css
@@ -1,50 +1,55 @@
-@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;
+@layer components {
+  .text-animation-stage {
+    container-type: inline-size;
+    display: grid;
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+    place-items: center;
+    grid-template-areas: "title";
+  }
+
+  .text-animation-title {
+    margin: 0;
+    grid-area: title;
+    pointer-events: none;
+    transform-style: preserve-3d;
+  }
+
+  .text-animation-unit {
+    display: inline-block;
+    white-space: pre;
+    backface-visibility: hidden;
+    transform-origin: 50% 55%;
+    will-change: transform, opacity, filter;
+  }
+
+  .text-animation-unit.line {
+    display: block;
+  }
+
+  .text-animation-kinetic-line {
+    position: relative;
+    height: 72px;
+    width: min(92%, 270px);
+  }
+
+  .text-animation-kinetic-stack {
+    position: relative;
+    height: 132px;
+    width: min(92%, 270px);
+  }
+
+  .text-animation-kinetic-word {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    white-space: nowrap;
+    backface-visibility: hidden;
+    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
index f5d25a16..b9913a09 100644
--- a/animata/text/text-animator.tsx
+++ b/animata/text/text-animator.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-
+import { TEXT_ANIMATOR_DEMO_CLASS } from "@/animata/text/text-animator-demo";
 import { cn } from "@/lib/utils";
-
+import "./text-animator-demo.css";
 import "./text-animator.css";
 
 export type TextAnimationTarget = "whole" | "per-character" | "per-word" | "per-line";
@@ -983,12 +983,12 @@ export default function TextAnimator({
     };
   }, [spec, samplesKey, phrasesKey, speed, holdMs, gapMs, yTravel, titleClassName]);
 
+  const demoMode = className != null && String(className).includes(TEXT_ANIMATOR_DEMO_CLASS);
+
   return (
     <div
-      className={cn(
-        "relative flex aspect-video w-full items-center justify-center overflow-hidden",
-        className,
-      )}
+      data-text-animator-demo={demoMode ? "" : undefined}
+      className={cn("relative flex w-full items-center justify-center overflow-hidden", className)}
     >
       <div ref={stageRef} className={cn("text-animation-stage absolute inset-0", stageClassName)}>
         {failed && effectiveSamples[0] ? (
diff --git a/animata/text/top-down-letters.stories.tsx b/animata/text/top-down-letters.stories.tsx
index 00cfd024..43ba2dca 100644
--- a/animata/text/top-down-letters.stories.tsx
+++ b/animata/text/top-down-letters.stories.tsx
@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+
+import { TEXT_ANIMATOR_PRESET_STORY_ARGS } from "@/animata/text/text-animator-preset.stories-shared";
 import TopDownLetters from "@/animata/text/top-down-letters";
 
 const meta = {
@@ -12,11 +14,5 @@ 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",
-  },
+  args: TEXT_ANIMATOR_PRESET_STORY_ARGS,
 };
diff --git a/app/(main)/components/page.tsx b/app/(main)/components/page.tsx
index 76bdc409..8c38510f 100644
--- a/app/(main)/components/page.tsx
+++ b/app/(main)/components/page.tsx
@@ -30,7 +30,7 @@ export default function ComponentsPage() {
           <li key={category.slug} className="min-w-0">
             <Link href={category.href} className="group group/cg block">
               <CategorySkeleton variant={category.slug} />
-              <p className="mt-3 px-2 text-base leading-snug tracking-tight sm:text-[1.2rem]">
+              <p className="mt-3 px-2.5 text-base leading-snug tracking-tight sm:text-lg">
                 <span className="font-semibold text-foreground transition-colors duration-300 group-hover:text-foreground/40">
                   {category.title}
                 </span>
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 17de7c62..747179f1 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -46,7 +46,7 @@ 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:--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-tight text-foreground font-bold">
           Ship faster.
           <br />
           Look better.
diff --git a/components/component-list-item.tsx b/components/component-list-item.tsx
index c7f25aee..79635577 100644
--- a/components/component-list-item.tsx
+++ b/components/component-list-item.tsx
@@ -79,7 +79,7 @@ function DisplayInView({ children }: { children: React.ReactNode }) {
   // 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">
+    <div ref={ref} className="flex min-h-56 w-full items-center justify-center">
       {isInView && children}
     </div>
   );
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index ed7c54b3..ee49895c 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -31,6 +31,7 @@ import { InView } from "@/components/in-view";
 import PreviewContainer from "@/components/preview-container";
 import { PropsTable } from "@/components/props-table";
 import { RegistryInstall } from "@/components/registry-install";
+import { TextAnimatorListDemo } from "@/components/text-animator-list-demo";
 import {
   Accordion,
   AccordionContent,
@@ -134,7 +135,21 @@ const postProcess = () => (tree: UnistTree) => {
         const rawString = pre.properties.__rawString__ as string | undefined;
 
         if (rawString?.startsWith("mkdir")) {
-          const path = rawString.split(" ").pop();
+          const trimmed = rawString.trim();
+          pre.properties.__unix__ = trimmed;
+
+          const touchMatch = trimmed.match(/^mkdir\s+-p\s+(.+?)\s+&&\s+touch\s+(.+)$/);
+          if (touchMatch) {
+            const dir = touchMatch[1].trim().replace(/^["']|["']$/g, "");
+            const files = touchMatch[2].trim().split(/\s+/);
+            pre.properties.__windows__ = [
+              `mkdir "${dir}"`,
+              ...files.map((file) => `type null > "${file}"`),
+            ].join(" && ");
+            return;
+          }
+
+          const path = trimmed.split(" ").pop();
           if (!path) {
             return;
           }
@@ -142,7 +157,6 @@ const postProcess = () => (tree: UnistTree) => {
           const filename = path.split("/").pop() ?? "";
           const dir = path.replace(`/${filename}`, "");
           pre.properties.__windows__ = `mkdir "${dir}" && type null > ${path}`;
-          pre.properties.__unix__ = `mkdir -p ${dir} && touch ${path}`;
         }
 
         if (rawString?.startsWith("npm install")) {
@@ -165,6 +179,7 @@ const components = {
   AlertTitle,
   AlertDescription,
   InView,
+  TextAnimatorListDemo,
   PreviewContainer,
   PreviewGrid: ({ children }: { children: React.ReactNode }) => (
     <div className="not-prose my-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2">{children}</div>
diff --git a/components/sidebar-nav.tsx b/components/sidebar-nav.tsx
index 7d9bad5e..84c26731 100644
--- a/components/sidebar-nav.tsx
+++ b/components/sidebar-nav.tsx
@@ -285,7 +285,7 @@ export function DocsSidebarNav({ items, variant = "docs", className }: DocsSideb
   return items.length ? (
     <div className={cn("grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)]", className)}>
       <div className="pr-6 pb-3">
-        <div className="relative">
+        <div className="relative translate-x-px translate-y-0.5">
           <Search className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={query}
diff --git a/components/text-animator-list-demo.tsx b/components/text-animator-list-demo.tsx
new file mode 100644
index 00000000..923d7d39
--- /dev/null
+++ b/components/text-animator-list-demo.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import type React from "react";
+import { cloneElement, isValidElement } from "react";
+
+import { TEXT_ANIMATOR_INDEX_FRAME_CLASS } from "@/animata/text/text-animator-demo";
+import { cn } from "@/lib/utils";
+
+import "@/animata/text/text-animator-demo.css";
+
+type DemoChildProps = { className?: string };
+
+/**
+ * Index grid frame for text-animator presets.
+ * Demo class lives on this wrapper (not cloneElement → AnimataRenderer) so CSS
+ * matches even when the preset is lazy-loaded from MDX.
+ */
+export function TextAnimatorListDemo({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={TEXT_ANIMATOR_INDEX_FRAME_CLASS} data-text-animator-demo="">
+      {isValidElement<DemoChildProps>(children)
+        ? cloneElement(children, {
+            className: cn("h-full w-full min-h-0", children.props.className),
+          })
+        : children}
+    </div>
+  );
+}
diff --git a/content/docs/background/animated-beam.mdx b/content/docs/background/animated-beam.mdx
index df9dcce4..da836546 100644
--- a/content/docs/background/animated-beam.mdx
+++ b/content/docs/background/animated-beam.mdx
@@ -16,22 +16,19 @@ author: harimanok_
 
 <Steps>
 
-<Step>No dependencies</Step>
-
-Everything ships in the one file, including the `meteor` keyframes (in an inline `<style>`). There's
-no extra CSS to add and no config to touch.
-
 <Step>Run the following command</Step>
 
-It will create a new file `animated-beam.tsx` inside the `components/animata/background` directory.
+It will create `animated-beam.tsx` and the co-located `animated-beam.css` inside `components/animata/background`.
 
 ```bash
-mkdir -p components/animata/background && touch components/animata/background/animated-beam.tsx
+mkdir -p components/animata/background && touch components/animata/background/animated-beam.tsx components/animata/background/animated-beam.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/background/animated-beam.css
+
+```
 
 ```jsx file=<rootDir>/animata/background/animated-beam.tsx
 
diff --git a/content/docs/background/shooting-stars.mdx b/content/docs/background/shooting-stars.mdx
index a375c3e6..b1fcbbe1 100644
--- a/content/docs/background/shooting-stars.mdx
+++ b/content/docs/background/shooting-stars.mdx
@@ -17,22 +17,19 @@ labels: ["new", "background", "animated"]
 
 <Steps>
 
-<Step>No dependencies</Step>
-
-Built with React, SVG and CSS keyframes. React spawns and recycles the streaks; the movement
-itself is plain CSS. There's no animation library and no WebGL.
-
 <Step>Run the following command</Step>
 
-It will create a new file called `shooting-stars.tsx` inside the `components/animata/background` directory.
+It will create `shooting-stars.tsx` and the co-located `shooting-stars.css` inside `components/animata/background`.
 
 ```bash
-mkdir -p components/animata/background && touch components/animata/background/shooting-stars.tsx
+mkdir -p components/animata/background && touch components/animata/background/shooting-stars.tsx components/animata/background/shooting-stars.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/background/shooting-stars.css
+
+```
 
 ```jsx file=<rootDir>/animata/background/shooting-stars.tsx
 
diff --git a/content/docs/button/algolia-blue-button.mdx b/content/docs/button/algolia-blue-button.mdx
index 49c55db1..c9b90699 100644
--- a/content/docs/button/algolia-blue-button.mdx
+++ b/content/docs/button/algolia-blue-button.mdx
@@ -18,15 +18,17 @@ author: harimanok_
 
 <Step>Run the following command</Step>
 
-It will create a new file `algolia-blue-button.tsx` inside the `components/animata/button` directory.
+It will create `algolia-blue-button.tsx` and `algolia-blue-button.css` inside the `components/animata/button` directory.
 
 ```bash
-mkdir -p components/animata/button && touch components/animata/button/algolia-blue-button.tsx
+mkdir -p components/animata/button && touch components/animata/button/algolia-blue-button.tsx components/animata/button/algolia-blue-button.css
 ```
 
 <Step>Paste the code</Step>{" "}
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/button/algolia-blue-button.css
+
+```
 
 ```jsx file=<rootDir>/animata/button/algolia-blue-button.tsx
 
diff --git a/content/docs/button/algolia-white-button.mdx b/content/docs/button/algolia-white-button.mdx
index 2be7b6ba..7712ea6d 100644
--- a/content/docs/button/algolia-white-button.mdx
+++ b/content/docs/button/algolia-white-button.mdx
@@ -18,15 +18,17 @@ author: harimanok_
 
 <Step>Run the following command</Step>
 
-It will create a new file `algolia-white-button.tsx` inside the `components/animata/button` directory.
+It will create `algolia-white-button.tsx` and `algolia-white-button.css` inside the `components/animata/button` directory.
 
 ```bash
-mkdir -p components/animata/button && touch components/animata/button/algolia-white-button.tsx
+mkdir -p components/animata/button && touch components/animata/button/algolia-white-button.tsx components/animata/button/algolia-white-button.css
 ```
 
 <Step>Paste the code</Step>{" "}
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/button/algolia-white-button.css
+
+```
 
 ```jsx file=<rootDir>/animata/button/algolia-white-button.tsx
 
diff --git a/content/docs/button/ripple-button.mdx b/content/docs/button/ripple-button.mdx
index 6d850cca..87521678 100644
--- a/content/docs/button/ripple-button.mdx
+++ b/content/docs/button/ripple-button.mdx
@@ -18,15 +18,17 @@ author: Abhi_Hertz
 <Steps>
 <Step>Run the following command</Step>
 
-It will create a new file called `ripple-button.tsx` inside the `compoents/animata/button` directory.
+It will create `ripple-button.tsx` and `ripple-button.css` inside the `components/animata/button` directory.
 
 ```bash
-mkdir -p components/animata/button && touch components/animata/button/ripple-button.tsx
+mkdir -p components/animata/button && touch components/animata/button/ripple-button.tsx components/animata/button/ripple-button.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly create file and paste the following code:
+```jsx file=<rootDir>/animata/button/ripple-button.css
+
+```
 
 ```jsx file=<rootDir>/animata/button/ripple-button.tsx
 
diff --git a/content/docs/card/card-spread.mdx b/content/docs/card/card-spread.mdx
index 03e37d53..ceb2c6a9 100644
--- a/content/docs/card/card-spread.mdx
+++ b/content/docs/card/card-spread.mdx
@@ -18,15 +18,17 @@ labels: ["requires interaction", "click", "hover"]
 <Steps>
 <Step>Run the following command</Step>
 
-It will create a new file `card-spread.tsx` inside the `components/animata/card` directory.
+It will create `card-spread.tsx` and `card-spread.css` inside the `components/animata/card` directory.
 
 ```bash
-mkdir -p components/animata/card && touch components/animata/card/card-spread.tsx
+mkdir -p components/animata/card && touch components/animata/card/card-spread.tsx components/animata/card/card-spread.css
 ```
 
 <Step>Paste the code</Step>{" "}
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/card/card-spread.css
+
+```
 
 ```jsx file=<rootDir>/animata/card/card-spread.tsx
 
diff --git a/content/docs/card/collab-card.mdx b/content/docs/card/collab-card.mdx
index 00b2aabb..449b83eb 100644
--- a/content/docs/card/collab-card.mdx
+++ b/content/docs/card/collab-card.mdx
@@ -22,15 +22,17 @@ Out of the box it looks like Figma multiplayer: live status and an avatar stack
 
 <Step>Run the following command</Step>
 
-This creates `collab-card.tsx` in `components/animata/card`.
+This creates `collab-card.tsx` and `collab-card.css` in `components/animata/card`.
 
 ```bash
-mkdir -p components/animata/card && touch components/animata/card/collab-card.tsx
+mkdir -p components/animata/card && touch components/animata/card/collab-card.tsx components/animata/card/collab-card.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the file and paste:
+```jsx file=<rootDir>/animata/card/collab-card.css
+
+```
 
 ```jsx file=<rootDir>/animata/card/collab-card.tsx
 
diff --git a/content/docs/container/animated-border-trail.mdx b/content/docs/container/animated-border-trail.mdx
index 7490999d..1ae5a7c5 100644
--- a/content/docs/container/animated-border-trail.mdx
+++ b/content/docs/container/animated-border-trail.mdx
@@ -18,15 +18,17 @@ author: harimanok_
 
 <Step>Run the following command</Step>
 
-It will create a new file `animated-border-trail.tsx` inside the `components/animata/container` directory.
+It will create `animated-border-trail.tsx` and the co-located `animated-border-trail.css` inside `components/animata/container`.
 
 ```bash
-mkdir -p components/animata/container && touch components/animata/container/animated-border-trail.tsx
+mkdir -p components/animata/container && touch components/animata/container/animated-border-trail.tsx components/animata/container/animated-border-trail.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/container/animated-border-trail.css
+
+```
 
 ```jsx file=<rootDir>/animata/container/animated-border-trail.tsx
 
@@ -36,7 +38,7 @@ Open the newly created file and paste the following code:
 
 ## How it works
 
-No global CSS setup is required. The component ships a scoped `<style>` block with `@property --border-trail-angle` and a `@keyframes border-trail` rule — both are needed because Tailwind utilities cannot register typed custom properties or animate them.
+Keyframes and the typed `@property --border-trail-angle` live in the co-located `animated-border-trail.css` import — Tailwind utilities cannot register typed custom properties or animate them.
 
 The trail layer is an absolutely positioned `conic-gradient` whose start angle reads `--border-trail-angle`. Keyframes sweep that property from `0deg` to `360deg`; duration comes from the `duration` prop via an inline `animation` style so each instance can run at its own speed without a separate `@theme` token.
 
diff --git a/content/docs/container/marquee.mdx b/content/docs/container/marquee.mdx
index ba2607cb..302d455a 100644
--- a/content/docs/container/marquee.mdx
+++ b/content/docs/container/marquee.mdx
@@ -17,33 +17,19 @@ author: harimanok_
 
 <Steps>
 
-<Step>Add to your CSS</Step>
-```css
-@keyframes marquee-x {
-  from { transform: translateX(0); }
-  to { transform: translateX(calc(-100% - var(--gap))); }
-}
-@keyframes marquee-y {
-  from { transform: translateY(0); }
-  to { transform: translateY(calc(-100% - var(--gap))); }
-}
-@theme {
-  --animate-marquee-horizontal: marquee-x var(--duration) infinite linear;
-  --animate-marquee-vertical: marquee-y var(--duration) linear infinite;
-}
-```
-
 <Step>Run the following command</Step>
 
-It will create a new file called `marquee.tsx` inside the `components/animata/container` directory.
+It will create `marquee.tsx` and the co-located `marquee.css` inside `components/animata/container`.
 
 ```bash
-mkdir -p components/animata/container && touch components/animata/container/marquee.tsx
+mkdir -p components/animata/container && touch components/animata/container/marquee.tsx components/animata/container/marquee.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/container/marquee.css
+
+```
 
 ```jsx file=<rootDir>/animata/container/marquee.tsx
 
diff --git a/content/docs/contributing/guidelines.mdx b/content/docs/contributing/guidelines.mdx
index 78598c50..47c4466d 100644
--- a/content/docs/contributing/guidelines.mdx
+++ b/content/docs/contributing/guidelines.mdx
@@ -44,7 +44,7 @@ Use Tailwind on the component for layout, color, spacing, and simple transitions
 
 Keep the CSS file focused: if a rule is a one-liner utility (`relative`, `inline-block`, `block`), prefer Tailwind on the element instead of duplicating it in CSS.
 
-Inline `<style>` blocks inside the component are acceptable for small, self-contained keyframes when a separate file would be heavier than the animation itself (see `marquee.tsx`). Do not use CSS modules or styled-components.
+Do not use inline `<style>` blocks in components — put `@keyframes`, pseudo-elements, and selectors Tailwind cannot express in a co-located `<name>.css` imported from the TSX. Do not use CSS modules or styled-components.
 
 ## Conditional Classes
 
diff --git a/content/docs/fabs/flower-menu.mdx b/content/docs/fabs/flower-menu.mdx
index 523af432..372feac5 100644
--- a/content/docs/fabs/flower-menu.mdx
+++ b/content/docs/fabs/flower-menu.mdx
@@ -19,15 +19,17 @@ labels: ["requires interaction", "click"]
 
 <Step>Run the following command</Step>
 
-It will create a new file `flower-menu.tsx` inside the `components/animata/fabs` directory.
+It will create `flower-menu.tsx` and `flower-menu.css` inside the `components/animata/fabs` directory.
 
 ```bash
-mkdir -p components/animata/fabs && touch components/animata/fabs/flower-menu.tsx
+mkdir -p components/animata/fabs && touch components/animata/fabs/flower-menu.tsx components/animata/fabs/flower-menu.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/fabs/flower-menu.css
+
+```
 
 ```jsx file=<rootDir>/animata/fabs/flower-menu.tsx
 
diff --git a/content/docs/fabs/speed-dial.mdx b/content/docs/fabs/speed-dial.mdx
index 655fc8a6..051c88c3 100644
--- a/content/docs/fabs/speed-dial.mdx
+++ b/content/docs/fabs/speed-dial.mdx
@@ -24,15 +24,17 @@ npm install lucide-react
 
 <Step>Run the following command</Step>
 
-It will create a new file `speed-dial.tsx` inside the `components/animata/fabs` directory.
+It will create `speed-dial.tsx` and the co-located `speed-dial.css` inside `components/animata/fabs`.
 
 ```bash
-mkdir -p components/animata/fabs && touch components/animata/fabs/speed-dial.tsx
+mkdir -p components/animata/fabs && touch components/animata/fabs/speed-dial.tsx components/animata/fabs/speed-dial.css
 ```
 
 <Step>Paste the code</Step>{" "}
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/fabs/speed-dial.css
+
+```
 
 ```jsx file=<rootDir>/animata/fabs/speed-dial.tsx
 
@@ -46,7 +48,7 @@ Click opens the menu; hover doesn't. That matters on touch devices. The trigger
 
 Each action is a `role="menuitem"` at `size-11` (44×44 px). Labels live in `aria-label` and an `sr-only` span, not beside the icon. The action list is positioned absolutely (`left-full`, `bottom-full`, and so on relative to `direction`) so the FAB doesn't jump when items appear.
 
-Motion is CSS only: direction-specific `@keyframes` in a scoped `<style>` block, 120ms per item, staggered with `animation-delay: calc(12ms + var(--i) * 22ms)`. No Motion package. The plus icon rotates 45° via `transition-transform` over 150ms. Reduced-motion users get the layout without the keyframes.
+Motion is CSS only: direction-specific `@keyframes` in the co-located `speed-dial.css`, 120ms per item, staggered with `animation-delay: calc(12ms + var(--i) * 22ms)`. No Motion package. The plus icon rotates 45° via `transition-transform` over 150ms. Reduced-motion users get the layout without the keyframes.
 
 Keyboard: arrows move along the axis you picked with `direction`; Home and End hit the first and last item; Escape or an outside tap closes and refocuses the trigger.
 
diff --git a/content/docs/preloader/split-reveal.mdx b/content/docs/preloader/split-reveal.mdx
index efc1a889..716f28e5 100644
--- a/content/docs/preloader/split-reveal.mdx
+++ b/content/docs/preloader/split-reveal.mdx
@@ -18,15 +18,17 @@ labels: ["new"]
 <Steps>
 <Step>Run the following command</Step>
 
-It will create a new file `split-reveal.tsx` inside the `components/animata/preloader` directory.
+It will create `split-reveal.tsx` and the co-located `split-reveal.css` inside `components/animata/preloader`.
 
 ```bash
-mkdir -p components/animata/preloader && touch components/animata/preloader/split-reveal.tsx
+mkdir -p components/animata/preloader && touch components/animata/preloader/split-reveal.tsx components/animata/preloader/split-reveal.css
 ```
 
 <Step>Paste the code</Step>{" "}
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/preloader/split-reveal.css
+
+```
 
 ```jsx file=<rootDir>/animata/preloader/split-reveal.tsx
 
diff --git a/content/docs/scroll/stacked-sections.mdx b/content/docs/scroll/stacked-sections.mdx
index 7c893c5a..d0f994bd 100644
--- a/content/docs/scroll/stacked-sections.mdx
+++ b/content/docs/scroll/stacked-sections.mdx
@@ -21,12 +21,14 @@ labels: ["new", "scroll", "requires interaction"]
 It will create a new file called `stacked-sections.tsx` inside the `components/animata/scroll` directory.
 
 ```bash
-mkdir -p components/animata/scroll && touch components/animata/scroll/stacked-sections.tsx
+mkdir -p components/animata/scroll && touch components/animata/scroll/stacked-sections.tsx components/animata/scroll/stacked-sections.css
 ```
 
 <Step>Paste the code</Step>
 
-Open the newly created file and paste the following code:
+```jsx file=<rootDir>/animata/scroll/stacked-sections.css
+
+```
 
 ```jsx file=<rootDir>/animata/scroll/stacked-sections.tsx
 
diff --git a/content/docs/text/blur-out-up.mdx b/content/docs/text/blur-out-up.mdx
index eb302b38..09968409 100644
--- a/content/docs/text/blur-out-up.mdx
+++ b/content/docs/text/blur-out-up.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="blur-out-up" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/bottom-up-letters.mdx b/content/docs/text/bottom-up-letters.mdx
index a67146d9..556fe682 100644
--- a/content/docs/text/bottom-up-letters.mdx
+++ b/content/docs/text/bottom-up-letters.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="bottom-up-letters" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/fade-through.mdx b/content/docs/text/fade-through.mdx
index 2c2f8a37..c0b20951 100644
--- a/content/docs/text/fade-through.mdx
+++ b/content/docs/text/fade-through.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="fade-through" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/focus-blur-resolve.mdx b/content/docs/text/focus-blur-resolve.mdx
index 930096cd..1107b45b 100644
--- a/content/docs/text/focus-blur-resolve.mdx
+++ b/content/docs/text/focus-blur-resolve.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="focus-blur-resolve" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/index.mdx b/content/docs/text/index.mdx
index 90505600..84e48df7 100644
--- a/content/docs/text/index.mdx
+++ b/content/docs/text/index.mdx
@@ -52,7 +52,7 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="blur-out-up" href="/docs/text/blur-out-up">
-    <BlurOutUp />
+    <TextAnimatorListDemo><BlurOutUp /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="bold-copy" href="/docs/text/bold-copy">
@@ -60,7 +60,7 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="bottom-up-letters" href="/docs/text/bottom-up-letters">
-    <BottomUpLetters />
+    <TextAnimatorListDemo><BottomUpLetters /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="circular-text" href="/docs/text/circular-text">
@@ -80,11 +80,11 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="fade-through" href="/docs/text/fade-through">
-    <FadeThrough />
+    <TextAnimatorListDemo><FadeThrough /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="focus-blur-resolve" href="/docs/text/focus-blur-resolve">
-    <FocusBlurResolve />
+    <TextAnimatorListDemo><FocusBlurResolve /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="gibberish-text" href="/docs/text/gibberish-text">
@@ -112,19 +112,19 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="kinetic-center-build" href="/docs/text/kinetic-center-build">
-    <KineticCenterBuild />
+    <TextAnimatorListDemo><KineticCenterBuild /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="line-by-line-slide" href="/docs/text/line-by-line-slide">
-    <LineByLineSlide />
+    <TextAnimatorListDemo><LineByLineSlide /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="mask-reveal-up" href="/docs/text/mask-reveal-up">
-    <MaskRevealUp />
+    <TextAnimatorListDemo><MaskRevealUp /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="micro-scale-fade" href="/docs/text/micro-scale-fade">
-    <MicroScaleFade />
+    <TextAnimatorListDemo><MicroScaleFade /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="mirror-text" href="/docs/text/mirror-text">
@@ -132,27 +132,27 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="per-character-rise" href="/docs/text/per-character-rise">
-    <PerCharacterRise />
+    <TextAnimatorListDemo><PerCharacterRise /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="per-word-crossfade" href="/docs/text/per-word-crossfade">
-    <PerWordCrossfade />
+    <TextAnimatorListDemo><PerWordCrossfade /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="scale-down-fade" href="/docs/text/scale-down-fade">
-    <ScaleDownFade />
+    <TextAnimatorListDemo><ScaleDownFade /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="shared-axis-y" href="/docs/text/shared-axis-y">
-    <SharedAxisY />
+    <TextAnimatorListDemo><SharedAxisY /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="shared-axis-z" href="/docs/text/shared-axis-z">
-    <SharedAxisZ />
+    <TextAnimatorListDemo><SharedAxisZ /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="shimmer-sweep" href="/docs/text/shimmer-sweep">
-    <ShimmerSweep />
+    <TextAnimatorListDemo><ShimmerSweep /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="roll-text" href="/docs/text/roll-text">
@@ -165,15 +165,15 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="short-slide-down" href="/docs/text/short-slide-down">
-    <ShortSlideDown />
+    <TextAnimatorListDemo><ShortSlideDown /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="short-slide-right" href="/docs/text/short-slide-right">
-    <ShortSlideRight />
+    <TextAnimatorListDemo><ShortSlideRight /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="soft-blur-in" href="/docs/text/soft-blur-in">
-    <SoftBlurIn />
+    <TextAnimatorListDemo><SoftBlurIn /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="split-text" href="/docs/text/split-text">
@@ -183,7 +183,7 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="spring-scale-in" href="/docs/text/spring-scale-in">
-    <SpringScaleIn />
+    <TextAnimatorListDemo><SpringScaleIn /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="swap-text" href="/docs/text/swap-text">
@@ -209,7 +209,7 @@ import InView from "@/components/in-view";
   </ComponentListItem>
 
   <ComponentListItem copyId="top-down-letters" href="/docs/text/top-down-letters">
-    <TopDownLetters />
+    <TextAnimatorListDemo><TopDownLetters /></TextAnimatorListDemo>
   </ComponentListItem>
 
   <ComponentListItem copyId="typing-text" href="/docs/text/typing-text">
diff --git a/content/docs/text/kinetic-center-build.mdx b/content/docs/text/kinetic-center-build.mdx
index 6cfd07aa..6a084e1a 100644
--- a/content/docs/text/kinetic-center-build.mdx
+++ b/content/docs/text/kinetic-center-build.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="kinetic-center-build" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/line-by-line-slide.mdx b/content/docs/text/line-by-line-slide.mdx
index 5ff813a4..b1e8b8f7 100644
--- a/content/docs/text/line-by-line-slide.mdx
+++ b/content/docs/text/line-by-line-slide.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="line-by-line-slide" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/mask-reveal-up.mdx b/content/docs/text/mask-reveal-up.mdx
index 7c6e63a6..72a36dea 100644
--- a/content/docs/text/mask-reveal-up.mdx
+++ b/content/docs/text/mask-reveal-up.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="mask-reveal-up" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/micro-scale-fade.mdx b/content/docs/text/micro-scale-fade.mdx
index 8e64bc32..7190aca4 100644
--- a/content/docs/text/micro-scale-fade.mdx
+++ b/content/docs/text/micro-scale-fade.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="micro-scale-fade" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/per-character-rise.mdx b/content/docs/text/per-character-rise.mdx
index 11c746df..205c8b36 100644
--- a/content/docs/text/per-character-rise.mdx
+++ b/content/docs/text/per-character-rise.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="per-character-rise" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/per-word-crossfade.mdx b/content/docs/text/per-word-crossfade.mdx
index 5e4922f4..f8b60bd2 100644
--- a/content/docs/text/per-word-crossfade.mdx
+++ b/content/docs/text/per-word-crossfade.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="per-word-crossfade" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/scale-down-fade.mdx b/content/docs/text/scale-down-fade.mdx
index dfb1c331..bfe7aab3 100644
--- a/content/docs/text/scale-down-fade.mdx
+++ b/content/docs/text/scale-down-fade.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="scale-down-fade" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/shared-axis-y.mdx b/content/docs/text/shared-axis-y.mdx
index e92ffbfd..b4f69605 100644
--- a/content/docs/text/shared-axis-y.mdx
+++ b/content/docs/text/shared-axis-y.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="shared-axis-y" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/shared-axis-z.mdx b/content/docs/text/shared-axis-z.mdx
index 8f5a36bc..57021d50 100644
--- a/content/docs/text/shared-axis-z.mdx
+++ b/content/docs/text/shared-axis-z.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="shared-axis-z" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/shimmer-sweep.mdx b/content/docs/text/shimmer-sweep.mdx
index 0c0c6f39..22395a9b 100644
--- a/content/docs/text/shimmer-sweep.mdx
+++ b/content/docs/text/shimmer-sweep.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="shimmer-sweep" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/short-slide-down.mdx b/content/docs/text/short-slide-down.mdx
index 018414f0..eb5c24b8 100644
--- a/content/docs/text/short-slide-down.mdx
+++ b/content/docs/text/short-slide-down.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="short-slide-down" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/short-slide-right.mdx b/content/docs/text/short-slide-right.mdx
index 8696fd46..bd3d6105 100644
--- a/content/docs/text/short-slide-right.mdx
+++ b/content/docs/text/short-slide-right.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="short-slide-right" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/soft-blur-in.mdx b/content/docs/text/soft-blur-in.mdx
index 74c3c1f8..ef4babad 100644
--- a/content/docs/text/soft-blur-in.mdx
+++ b/content/docs/text/soft-blur-in.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="soft-blur-in" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/spring-scale-in.mdx b/content/docs/text/spring-scale-in.mdx
index 3c814a53..49ae8bff 100644
--- a/content/docs/text/spring-scale-in.mdx
+++ b/content/docs/text/spring-scale-in.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="spring-scale-in" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/content/docs/text/top-down-letters.mdx b/content/docs/text/top-down-letters.mdx
index 233a68e3..e25411e9 100644
--- a/content/docs/text/top-down-letters.mdx
+++ b/content/docs/text/top-down-letters.mdx
@@ -12,6 +12,8 @@ author: pixelpoint
 
 <RegistryInstall category="text" name="top-down-letters" />
 
+The CLI installs the preset, `text-animator.tsx`, and `text-animator.css` in one step.
+
 ### Manual
 
 <Steps>
@@ -19,15 +21,19 @@ author: pixelpoint
 <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.
+`text-animator` runtime and co-located `text-animator.css`. Skip this step if you already added them for another text preset.
 
 ```bash
-mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx
+mkdir -p components/animata/text && touch components/animata/text/text-animator.tsx components/animata/text/text-animator.css
 ```
 
-Paste the runtime into `text-animator.tsx`:
+<Step>Paste the runtime</Step>
+
+Paste into `text-animator.css` and `text-animator.tsx`:
+
+```jsx file=<rootDir>/animata/text/text-animator.css
+
+```
 
 ```tsx file=<rootDir>/animata/text/text-animator.tsx
 
diff --git a/scripts/build-registry.js b/scripts/build-registry.js
index db8c324c..38e9fe29 100644
--- a/scripts/build-registry.js
+++ b/scripts/build-registry.js
@@ -220,6 +220,14 @@ function addBundledSourceFile(ref, files, bundledRefs, queue) {
   bundledRefs.add(ref);
   files.push(registryFileEntry(ref, content));
   queue.push(content);
+
+  const dir = path.posix.dirname(ref);
+  for (const spec of parseImports(content)) {
+    if (!spec.startsWith("./") || !spec.endsWith(".css")) continue;
+    const cssRef = path.posix.normalize(path.posix.join(dir, spec));
+    addBundledSourceFile(cssRef, files, bundledRefs, queue);
+  }
+
   return true;
 }
 
diff --git a/styles/globals.css b/styles/globals.css
index 9b62e123..f584fbc8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "../animata/text/text-animator-demo.css";
 
 @custom-variant dark (&:where(.dark, .dark *));