fix(docs): text animator demo and co located css

.gitignore

@@ -20,6 +20,7 @@
 # misc
 .DS_Store
 *.pem
+.patterns/
 
 # debug
 npm-debug.log*

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

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;
+    }
+  }
+}

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={{

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);
+    }
+  }
+}

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={{

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;
+  }
+}

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>
   );

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;
+  }
+}

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>
   );
 }

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;
+    }
+  }
+}

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>
   );
 }

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;
+    }
+  }
+}