feat: added new components in new section called as animation section

__tests__/metadata.test.ts

@@ -26,6 +26,7 @@ describe("Component Metadata", () => {
       "navbar-sections",
       "unicorn-section",
       "interactive-illustrations",
+      "animations",
       "cards",
       "buttons",
     ]

app/components/page.tsx

@@ -26,6 +26,7 @@ const CATEGORY_ORDER = [
   "grid-sections",
   "navbar-sections",
   "interactive-illustrations",
+  "animations",
 ]
 
 export default function ComponentsPage() {

app/playground/animation/page.tsx

@@ -0,0 +1,68 @@
+import CardsAnimation from "@/content/registry/animations/cards-animation/demo"
+import Scroll1Animation from "@/content/registry/animations/scroll1-animation/demo"
+import Scroll2Animation from "@/content/registry/animations/scroll2-animation/demo"
+import Scroll3Animation from "@/content/registry/animations/scroll3-animation/demo"
+import Scroll4Animation from "@/content/registry/animations/scroll4-animation/demo"
+import Scroll5Animation from "@/content/registry/animations/scroll5-animation/demo"
+import Scroll6Animation from "@/content/registry/animations/scroll6-animation/demo"
+import { PlaygroundDemo } from "@/components/showcase/playground-demo"
+
+/** Slugs tested here before they are added to the registry. */
+const LOCAL_PLAYGROUND_SLUGS = {
+  "cards-animation": CardsAnimation,
+  "scroll1-animation": Scroll1Animation,
+  "scroll2-animation": Scroll2Animation,
+  "scroll3-animation": Scroll3Animation,
+  "scroll4-animation": Scroll4Animation,
+  "scroll5-animation": Scroll5Animation,
+  "scroll6-animation": Scroll6Animation,
+} as const
+
+const LOCAL_PLAYGROUND_BG: Record<keyof typeof LOCAL_PLAYGROUND_SLUGS, string> = {
+  "cards-animation": "#ffffff",
+  "scroll1-animation": "#000000",
+  "scroll2-animation": "#000000",
+  "scroll3-animation": "#000000",
+  "scroll4-animation": "#000000",
+  "scroll5-animation": "#000000",
+  "scroll6-animation": "#000000",
+}
+
+type LocalPlaygroundSlug = keyof typeof LOCAL_PLAYGROUND_SLUGS
+
+function isLocalPlaygroundSlug(slug: string): slug is LocalPlaygroundSlug {
+  return slug in LOCAL_PLAYGROUND_SLUGS
+}
+
+/** Change this slug or use `?slug=your-animation` in the URL to test another component. */
+const DEFAULT_PLAYGROUND_SLUG = "cards-animation"
+
+interface AnimationPlaygroundPageProps {
+  searchParams: Promise<{ slug?: string }>
+}
+
+export default async function AnimationPlaygroundPage({
+  searchParams,
+}: AnimationPlaygroundPageProps) {
+  const { slug } = await searchParams
+  const demoSlug = slug ?? DEFAULT_PLAYGROUND_SLUG
+
+  if (isLocalPlaygroundSlug(demoSlug)) {
+    const LocalDemo = LOCAL_PLAYGROUND_SLUGS[demoSlug]
+
+    return (
+      <main
+        className="min-h-screen"
+        style={{ background: LOCAL_PLAYGROUND_BG[demoSlug] }}
+      >
+        <LocalDemo />
+      </main>
+    )
+  }
+
+  return (
+    <main className="min-h-screen bg-black">
+      <PlaygroundDemo slug={demoSlug} />
+    </main>
+  )
+}

app/playground/grid/page.tsx

@@ -10,6 +10,7 @@ import Featured9Grid from "@/content/registry/grid-sections/featured9-grid/demo"
 import Featured10Grid from "@/content/registry/grid-sections/featured10-grid/demo"
 import CompanionGrid from "@/content/registry/grid-sections/companion-grid/demo"
 import Featured11Grid from "@/content/registry/grid-sections/featured11-grid/demo"
+import PaperGrid from "@/content/registry/grid-sections/paper-grid/demo"
 import { PlaygroundDemo } from "@/components/showcase/playground-demo"
 
 /** Slugs tested here before they are added to the registry. */
@@ -26,6 +27,7 @@ const LOCAL_PLAYGROUND_SLUGS = {
   "featured10-grid": Featured10Grid,
   "companion-grid": CompanionGrid,
   "featured11-grid": Featured11Grid,
+  "paper-grid": PaperGrid,
 } as const
 
 const LOCAL_PLAYGROUND_BG: Record<keyof typeof LOCAL_PLAYGROUND_SLUGS, string> = {
@@ -41,6 +43,7 @@ const LOCAL_PLAYGROUND_BG: Record<keyof typeof LOCAL_PLAYGROUND_SLUGS, string> =
   "featured10-grid": "#fbfbfc",
   "companion-grid": "#fffaf4",
   "featured11-grid": "#ffffff",
+  "paper-grid": "#08080a",
 }
 
 type LocalPlaygroundSlug = keyof typeof LOCAL_PLAYGROUND_SLUGS

content/featured.ts

@@ -6,6 +6,7 @@
  * or a removed component never breaks the page.
  */
 export const featuredSlugs: string[] = [
+  "paper-grid",
   "selfie-hero",
   "featured2-grid",
   "air-hero",
@@ -17,6 +18,9 @@ export const featuredSlugs: string[] = [
   "featured6-grid",
   "lena-hero",
   "paper-hero",
+  "cards-animation",
+  "scroll1-animation",
+  "scroll3-animation",
   "dove-unicorn",
   "amind-hero",
   "pop-hero",