diff --git a/__tests__/metadata.test.ts b/__tests__/metadata.test.ts
index 20c9557..f9323ec 100644
--- a/__tests__/metadata.test.ts
+++ b/__tests__/metadata.test.ts
@@ -26,6 +26,7 @@ describe("Component Metadata", () => {
       "navbar-sections",
       "unicorn-section",
       "interactive-illustrations",
+      "animations",
       "cards",
       "buttons",
     ]
diff --git a/app/components/page.tsx b/app/components/page.tsx
index 05fac83..257d9d7 100644
--- a/app/components/page.tsx
+++ b/app/components/page.tsx
@@ -26,6 +26,7 @@ const CATEGORY_ORDER = [
   "grid-sections",
   "navbar-sections",
   "interactive-illustrations",
+  "animations",
 ]
 
 export default function ComponentsPage() {
diff --git a/app/playground/animation/page.tsx b/app/playground/animation/page.tsx
new file mode 100644
index 0000000..8b150d0
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/app/playground/grid/page.tsx b/app/playground/grid/page.tsx
index d5baccc..5f681d6 100644
--- a/app/playground/grid/page.tsx
+++ b/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
diff --git a/content/featured.ts b/content/featured.ts
index 327153b..7d36339 100644
--- a/content/featured.ts
+++ b/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",
diff --git a/content/registry/animations/cards-animation/demo.tsx b/content/registry/animations/cards-animation/demo.tsx
new file mode 100644
index 0000000..b175286
--- /dev/null
+++ b/content/registry/animations/cards-animation/demo.tsx
@@ -0,0 +1,654 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import gsap from "gsap"
+
+/* ─────────────────────────────────────────────
+   cards-animation — the deal-in carousel wheel
+
+   Eighteen cards fly in from alternating sides,
+   spinning and scaling down from four times their
+   size, then settle onto a giant wheel whose pivot
+   sits 200vh below the stage — so only the top arc
+   is ever on screen and the cards fan out like a
+   hand being dealt.
+
+   Scrolling turns the wheel. The component owns its
+   own scroll container (a tall track under a sticky
+   stage), so it reads its own scrollTop and never
+   touches window scroll or position:fixed.
+
+   Most cards are monochrome; a few are duotoned warm
+   or cool so the wheel reads as one object with two
+   accents rather than eighteen competing photos.
+
+   Click a card and it lifts out of the wheel to the
+   centre, drops every filter, and opens its detail
+   panel. Escape or the backdrop sends it back.
+
+   Deal-in choreography after a GSAP study by
+   @deadrabbbbit, itself inspired by the Hyundai site.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781877270/zepalogo1_bnzxuc.png"
+
+/** tint: which cards break the monochrome — 2 warm, 2 cool per set of nine */
+type Tint = "mono" | "warm" | "cool"
+
+type Card = {
+  src: string
+  title: string
+  kind: string
+  body: string
+  tint: Tint
+}
+
+const BASE: Card[] = [
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+    title: "Selfie Hero",
+    kind: "Hero section",
+    body: "A hero that greets the visitor with their own reflection — camera-lit, permission-gated, and gracefully blank when the answer is no.",
+    tint: "mono",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+    title: "Paper Grid",
+    kind: "Grid section",
+    body: "Three certificates printed on glass, bending like real paper. The curl is integrated along the sheet, so the silhouette pulls in where the page turns away.",
+    tint: "warm",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+    title: "Zaveda Interface",
+    kind: "Hero section",
+    body: "A savings-app hero on soft lilac, with three phones fanned and a live earnings readout built from real digit wheels.",
+    tint: "mono",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+    title: "Companion Grid",
+    kind: "Grid section",
+    body: "A train of polaroids clears away one at a time as you scroll, revealing the line underneath. Starts on the last card and ends on the first.",
+    tint: "cool",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+    title: "Scrolldown Hero",
+    kind: "Hero section",
+    body: "Trading cards float up on buttery easing while the background marquee drifts sideways and speeds up with your scroll velocity.",
+    tint: "mono",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+    title: "Wave Hero",
+    kind: "Hero section",
+    body: "A displacement field runs across the type so the headline reads as something seen through moving water rather than sitting on top of it.",
+    tint: "warm",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+    title: "Osmos Hero",
+    kind: "Hero section",
+    body: "Soft bodies drift, meet and merge under a metaball threshold — no physics engine, just a distance field resolved per pixel.",
+    tint: "mono",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+    title: "Drops Hero",
+    kind: "Hero section",
+    body: "An image trail that follows the cursor and thins out as it goes, each drop inheriting a little less of the last one's momentum.",
+    tint: "cool",
+  },
+  {
+    src: "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+    title: "Bluish Hero",
+    kind: "Hero section",
+    body: "A cold-lit landing surface where the gradient is doing the typography's job, and the copy simply stays out of its way.",
+    tint: "mono",
+  },
+]
+
+/** served at the card's own aspect so the wheel is not fetching nine originals */
+const fit = (u: string) =>
+  u.replace("/upload/", "/upload/c_fill,w_520,h_740,g_auto/")
+
+const CARDS: Card[] = [...BASE, ...BASE].map((c) => ({ ...c, src: fit(c.src) }))
+
+/** how far the wheel turns across the full scroll track */
+const SPIN_DEGREES = 360
+
+export default function CardsAnimation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const itemsRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState<number | null>(null)
+  /* the panel has to stay mounted while it animates out, so closing is a
+     state of its own rather than just clearing `open` */
+  const [closing, setClosing] = useState(false)
+  const closeTimer = useRef<number | null>(null)
+
+  const CLOSE_MS = 300
+
+  const openCard = useCallback((i: number) => {
+    if (closeTimer.current !== null) {
+      clearTimeout(closeTimer.current)
+      closeTimer.current = null
+    }
+    setClosing(false)
+    setOpen(i)
+  }, [])
+
+  const close = useCallback(() => {
+    if (closeTimer.current !== null) return // already on the way out
+    setClosing(true)
+    closeTimer.current = window.setTimeout(() => {
+      setOpen(null)
+      setClosing(false)
+      closeTimer.current = null
+    }, CLOSE_MS)
+  }, [])
+
+  // never leave a timer running past unmount
+  useEffect(
+    () => () => {
+      if (closeTimer.current !== null) clearTimeout(closeTimer.current)
+    },
+    []
+  )
+
+  /* ── entrance: the deal-in ─────────────────────────────────────────── */
+  useEffect(() => {
+    const root = rootRef.current
+    const itemsEl = itemsRef.current
+    if (!root || !itemsEl) return
+
+    /* context scopes every selector below to this root and gives us one
+       revert() that undoes each tween and inline style on unmount */
+    const ctx = gsap.context(() => {
+      const images = gsap.utils.toArray<HTMLElement>(".ca-item")
+      const imageSize = images.length
+      const degree = 360 / imageSize
+
+      gsap.set(itemsEl, { transformOrigin: "center 200vh" })
+
+      const timeline = gsap.timeline()
+
+      images.forEach((image, index) => {
+        const sign = Math.floor((index / 2) % 2) ? 1 : -1
+        const value = Math.floor((index + 4) / 4) * 4
+        const rotation = index > imageSize - 3 ? 0 : sign * value
+
+        gsap.set(image, { rotation, scale: 0.5 })
+
+        timeline.from(
+          image,
+          {
+            /* the original threw these off the window's edges; the stage's
+               own box is what a registry component may measure */
+            x: () =>
+              index % 2
+                ? root.clientWidth + image.clientWidth * 4
+                : -root.clientWidth - image.clientWidth * 4,
+            y: () => root.clientHeight - image.clientHeight,
+            rotation: index % 2 ? 200 : -200,
+            scale: 4,
+            opacity: 1,
+            ease: "power4.out",
+            duration: 1,
+            delay: 0.15 * Math.floor(index / 2),
+          },
+          0
+        )
+
+        timeline.to(image, { scale: 1, duration: 0 }, 0.15 * (imageSize / 2 - 1) + 1)
+
+        timeline.to(
+          image,
+          {
+            transformOrigin: "center 200vh",
+            rotation:
+              index > imageSize / 2 ? -degree * (imageSize - index) : index * degree,
+            duration: 1,
+            ease: "power1.out",
+          },
+          0.15 * (imageSize / 2 - 1) + 1
+        )
+      })
+
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        timeline.progress(1).pause()
+      }
+    }, root)
+
+    return () => ctx.revert()
+  }, [])
+
+  /* ── scroll turns the wheel ────────────────────────────────────────── */
+  useEffect(() => {
+    const root = rootRef.current
+    const itemsEl = itemsRef.current
+    if (!root || !itemsEl) return
+
+    let raf = 0
+    let cur = root.scrollTop
+
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+
+      /* the component's own scroll position, never the window's — a
+         registry component can be embedded anywhere and must not
+         assume it owns the page */
+      const target = root.scrollTop
+      cur += (target - cur) * 0.09 // lenis-style ease
+      if (Math.abs(target - cur) < 0.05) cur = target
+
+      const travel = root.scrollHeight - root.clientHeight
+      const p = travel > 0 ? Math.min(1, Math.max(0, cur / travel)) : 0
+      /* driven through gsap rather than the CSS rotate property, so the
+         wheel shares one transform (and one transform-origin) with the
+         cards instead of composing rotate and transform separately */
+      gsap.set(itemsEl, { rotation: -p * SPIN_DEGREES })
+    }
+
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [])
+
+  /* ── Escape closes the detail panel ────────────────────────────────── */
+  useEffect(() => {
+    if (open === null) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close()
+    }
+    document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [open, close])
+
+  const active = open === null ? null : CARDS[open]
+
+  return (
+    <div
+      ref={rootRef}
+      className={"ca-root" + (open !== null ? " ca-root--locked" : "")}
+    >
+      <style>{CSS}</style>
+
+      <div className="ca-track">
+        <div className="ca-stage">
+          <div className="ca-logo">
+            <img src={LOGO} alt="Zepa" draggable={false} />
+          </div>
+
+          <div className="ca-container">
+            <div className="ca-center">
+              <div ref={itemsRef} className="ca-items">
+                {CARDS.map((card, i) => (
+                  <div className="ca-item" key={i}>
+                    <div
+                      className={"ca-card ca-card--" + card.tint}
+                      role="button"
+                      tabIndex={0}
+                      aria-label={"Open " + card.title}
+                      onClick={() => openCard(i)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault()
+                          openCard(i)
+                        }
+                      }}
+                    >
+                      <img className="ca-image" src={card.src} alt="" draggable={false} />
+                      <span className="ca-card-tag">{card.title}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <p className="ca-hint">Scroll to turn · Click a card to open</p>
+
+          {/* ── detail panel ── */}
+          {active && (
+            <div
+              className={"ca-detail" + (closing ? " ca-detail--closing" : "")}
+              onClick={close}
+              role="presentation"
+            >
+              <div
+                className="ca-detail-inner"
+                onClick={(e) => e.stopPropagation()}
+                role="dialog"
+                aria-modal="true"
+                aria-label={active.title}
+              >
+                <div className="ca-detail-card">
+                  <img src={active.src} alt="" draggable={false} />
+                </div>
+
+                <div className="ca-detail-copy">
+                  <span className="ca-detail-kind">{active.kind}</span>
+                  <h2>{active.title}</h2>
+                  <p>{active.body}</p>
+                  <button type="button" className="ca-detail-close" onClick={close}>
+                    Close
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.ca-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #ffffff;
+  color: #000000;
+  font-weight: 600;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  scrollbar-width: none;
+}
+.ca-root::-webkit-scrollbar { display: none; }
+.ca-root--locked { overflow: hidden; }
+
+.ca-root *,
+.ca-root *::before,
+.ca-root *::after { box-sizing: border-box; }
+
+/* the scroll runway — its length sets how far one turn takes */
+.ca-track { position: relative; width: 100%; height: 400vh; }
+
+.ca-stage {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+
+/* the logo reads as the section's title, so it is sized like one —
+   capped in vh as well as vw so it cannot crowd the wheel, which
+   starts at 28% of the stage */
+.ca-logo {
+  position: absolute;
+  z-index: 20;
+  top: clamp(20px, 4vh, 52px);
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+.ca-logo img {
+  display: block;
+  height: min(clamp(52px, 7.4vw, 132px), 15vh);
+  width: auto;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ca-container {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ca-center {
+  height: 100vh;
+  position: absolute;
+  left: 50%;
+  top: 28%;
+  transform: translate(-50%);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ca-items {
+  transform-origin: center 200vh;
+  user-select: none;
+  -webkit-user-select: none;
+  display: flex;
+  will-change: transform;
+}
+
+.ca-item {
+  position: absolute;
+  user-select: none;
+  -webkit-user-select: none;
+  transform: translateX(-50%);
+}
+
+.ca-card {
+  display: block;
+  width: 430px;
+  height: 610px;
+  color: #fff;
+  user-select: none;
+  -webkit-user-select: none;
+  border-radius: 17px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  border: 4px solid #000000;
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.ca-card:active { transform: scale(0.97); }
+.ca-card:focus-visible { outline: 3px solid #ff6a1f; outline-offset: 4px; }
+
+.ca-image {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transition: filter 0.4s ease;
+}
+
+/* duotone via filters, so the accent is the same regardless of the photo */
+.ca-card--mono .ca-image { filter: grayscale(1) contrast(1.05); }
+.ca-card--warm .ca-image {
+  filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(-12deg) contrast(1.02);
+}
+.ca-card--cool .ca-image {
+  filter: grayscale(1) sepia(1) saturate(4.6) hue-rotate(178deg) contrast(1.02);
+}
+.ca-card:hover .ca-image { filter: none; }
+
+.ca-card-tag {
+  position: absolute;
+  left: 14px;
+  bottom: 14px;
+  z-index: 2;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #fff;
+  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.ca-card:hover .ca-card-tag { opacity: 1; }
+
+.ca-hint {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 26px;
+  z-index: 20;
+  margin: 0;
+  text-align: center;
+  pointer-events: none;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.42);
+}
+
+/* ── detail panel ── */
+.ca-detail {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  animation: caFade 0.3s ease both;
+}
+@keyframes caFade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes caFadeOut { from { opacity: 1; } to { opacity: 0; } }
+
+.ca-detail-inner {
+  display: flex;
+  align-items: center;
+  gap: 44px;
+  max-width: 940px;
+  width: 100%;
+  animation: caRise 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes caRise {
+  from { opacity: 0; transform: translateY(30px) scale(0.94); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes caSink {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(18px) scale(0.96); }
+}
+
+/* the artwork leads on the way in and trails on the way out, so the panel
+   reads as the card growing rather than a box appearing over it */
+.ca-detail-card {
+  flex: 0 0 auto;
+  width: 320px;
+  height: 454px;
+  border-radius: 17px;
+  overflow: hidden;
+  border: 5px solid #000000;
+  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);
+  animation: caCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes caCardIn {
+  from { opacity: 0; transform: scale(0.82) rotate(-4deg); }
+  to   { opacity: 1; transform: scale(1) rotate(0deg); }
+}
+@keyframes caCardOut {
+  from { opacity: 1; transform: scale(1) rotate(0deg); }
+  to   { opacity: 0; transform: scale(0.88) rotate(3deg); }
+}
+.ca-detail-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* the copy comes in just behind the artwork */
+.ca-detail-kind,
+.ca-detail-copy h2,
+.ca-detail-copy p,
+.ca-detail-close {
+  animation: caCopyIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.ca-detail-kind      { animation-delay: 0.08s; }
+.ca-detail-copy h2   { animation-delay: 0.13s; }
+.ca-detail-copy p    { animation-delay: 0.18s; }
+.ca-detail-close     { animation-delay: 0.23s; }
+@keyframes caCopyIn {
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── on the way out ── */
+.ca-detail--closing { animation: caFadeOut 0.3s ease both; }
+.ca-detail--closing .ca-detail-inner { animation: caSink 0.3s cubic-bezier(0.4, 0, 1, 1) both; }
+.ca-detail--closing .ca-detail-card { animation: caCardOut 0.3s cubic-bezier(0.4, 0, 1, 1) both; }
+.ca-detail--closing .ca-detail-kind,
+.ca-detail--closing .ca-detail-copy h2,
+.ca-detail--closing .ca-detail-copy p,
+.ca-detail--closing .ca-detail-close {
+  animation: caFadeOut 0.18s ease both;
+  animation-delay: 0s;
+}
+
+.ca-detail-copy { flex: 1 1 auto; min-width: 0; }
+.ca-detail-kind {
+  display: inline-block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.45);
+  margin-bottom: 14px;
+}
+.ca-detail-copy h2 {
+  margin: 0 0 14px;
+  font-size: clamp(30px, 3.6vw, 52px);
+  line-height: 1.03;
+  letter-spacing: -0.035em;
+  font-weight: 700;
+}
+.ca-detail-copy p {
+  margin: 0 0 26px;
+  font-size: 16px;
+  line-height: 1.6;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.66);
+  max-width: 46ch;
+}
+.ca-detail-close {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: #000000;
+  border: none;
+  border-radius: 999px;
+  padding: 12px 26px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.ca-detail-close:hover { opacity: 0.82; }
+
+@media screen and (max-height: 1000px) {
+  .ca-card { width: 350px; height: 497px; }
+}
+@media screen and (max-height: 800px) {
+  .ca-card { width: 300px; height: 400px; }
+}
+
+@media (max-width: 820px) {
+  .ca-detail-inner { flex-direction: column; gap: 24px; text-align: center; }
+  .ca-detail-card { width: 210px; height: 298px; border-width: 4px; }
+  .ca-detail-copy p { margin-inline: auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ca-detail,
+  .ca-detail-inner,
+  .ca-detail-card,
+  .ca-detail-kind,
+  .ca-detail-copy h2,
+  .ca-detail-copy p,
+  .ca-detail-close,
+  .ca-detail--closing,
+  .ca-detail--closing .ca-detail-inner,
+  .ca-detail--closing .ca-detail-card { animation: none; }
+  .ca-card, .ca-image, .ca-card-tag { transition: none; }
+  .ca-card:active { transform: none; }
+}
+`
diff --git a/content/registry/animations/cards-animation/meta.ts b/content/registry/animations/cards-animation/meta.ts
new file mode 100644
index 0000000..6207786
--- /dev/null
+++ b/content/registry/animations/cards-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "cards-animation",
+  title: "Cards Animation",
+  description:
+    "Eighteen cards fly in from alternating sides and settle onto a giant wheel that scrolling turns. Mostly duotone monochrome with warm and cool accents; click a card to open its detail panel. Inspired by @deadrabbbbit.",
+  category: "animations",
+  preview: "/previews/animations/cards-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scroll",
+    "carousel",
+    "wheel",
+    "cards",
+    "duotone",
+    "lightbox",
+    "light",
+    "interactive",
+  ],
+  dependencies: ["gsap"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/animations/scroll1-animation/demo.tsx b/content/registry/animations/scroll1-animation/demo.tsx
new file mode 100644
index 0000000..5e13528
--- /dev/null
+++ b/content/registry/animations/scroll1-animation/demo.tsx
@@ -0,0 +1,298 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import Lenis from "lenis"
+
+/* ─────────────────────────────────────────────
+   scroll1-animation — Effortless motion, Zepa's quiet craft.
+
+   A wall of images rotated 25° on the Y axis, each tile parked at a random depth between −1600 and 200px, sweeping right across the viewport as you scroll while the inner picture scales from 2 down to 0.5 — so the frame travels but the photograph inside it settles.
+
+   One of six on-scroll perspective grid animations
+   from Codrops' Scroll3DGrid (MIT — Codrops), split
+   here into a component per animation.
+
+   The original drives off window scroll with Lenis
+   on the page. This owns its own scroll container
+   instead: Lenis is bound to the root as its wrapper
+   and ScrollTrigger is given that same root as its
+   scroller, so the component never touches window
+   scroll or position:fixed.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
+
+const BASE = [
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+]
+
+/** the grid asks for 48 tiles; the nine images repeat to fill it */
+const TILES = Array.from({ length: 48 }, (_, i) =>
+  BASE[i % BASE.length].replace("/upload/", "/upload/c_fill,w_600,h_600,g_auto/")
+)
+
+export default function Scroll1Animation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const wrap = wrapRef.current
+    if (!root || !content || !wrap) return
+
+    gsap.registerPlugin(ScrollTrigger)
+
+    /* Lenis smooths the component's own scroller, not the page's */
+    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })
+    const onScroll = () => ScrollTrigger.update()
+    lenis.on("scroll", onScroll)
+
+    let raf = 0
+    const loop = (time: number) => {
+      lenis.raf(time)
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>(".s1-item")
+      const inners = items.map((el) => el.querySelector(".s1-inner") as HTMLElement)
+
+      const tl = gsap.timeline({
+        defaults: { ease: "none" },
+        scrollTrigger: {
+          trigger: wrap,
+          scroller: root,
+          start: "top bottom+=5%",
+          end: "bottom top-=5%",
+          scrub: true,
+        },
+      })
+
+      tl.set(wrap, { rotationY: 25 })
+        .set(items, { z: () => gsap.utils.random(-1600, 200) })
+        .fromTo(items,
+          { xPercent: () => gsap.utils.random(-1000, -500) },
+          { xPercent: () => gsap.utils.random(500, 1000) }, 0)
+        .fromTo(inners, { scale: 2 }, { scale: 0.5 }, 0)
+    }, root)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      lenis.off("scroll", onScroll)
+      lenis.destroy()
+      ctx.revert()
+    }
+  }, [])
+
+  return (
+    <div ref={rootRef} className="s1-root">
+      <style>{CSS}</style>
+
+      <div ref={contentRef} className="s1-content">
+        {/* lead-in the scrub needs — carries the mark instead of nothing */}
+        <div className="s1-intro">
+          <img className="s1-logo" src={LOGO} alt="Zepa" draggable={false} />
+          <p className="s1-kicker">Zepa Motion · Scroll Animation 01</p>
+          <p className="s1-scroll">Scroll down</p>
+        </div>
+
+        <section className="s1-section">
+          <h3 className={"s1-title" + " s1-title--right s1-title--top"}>
+            Effortless motion,
+            <br />
+            Zepa’s quiet craft.
+          </h3>
+
+          <div className="s1-grid">
+            <div ref={wrapRef} className="s1-wrap">
+              {TILES.map((src, i) => (
+                <div className="s1-item" key={i}>
+                  <div
+                    className="s1-inner"
+                    style={{ backgroundImage: "url(" + src + ")" }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* tail the scrub needs, ditto */}
+        <div className="s1-outro">
+          <img className="s1-logo s1-logo--sm" src={LOGO} alt="Zepa" draggable={false} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.s1-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #000000;
+  color: #ffffff;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+
+  /* defaults from the original :root, then this animation's overrides */
+  --perspective: 1500px;
+  --grid-item-ratio: 1.5;
+  --grid-width: 100%;
+  --grid-height: auto;
+  --grid-gap: 2vw;
+  --grid-columns: 4;
+  --grid-inner-scale: 1;
+  --perspective: 1000px;
+  --grid-inner-scale: 0.5;
+}
+.s1-root::-webkit-scrollbar { display: none; }
+.s1-root *,
+.s1-root *::before,
+.s1-root *::after { box-sizing: border-box; }
+
+/* lead-in and lead-out give the scrub somewhere to run; on the original
+   page this space came from the neighbouring sections */
+/* Runway.
+   starts and ends off-screen left/right, so the blank head and tail are trimmed rather than scrolled
+   through. Raise these to see more of the timeline, lower to scroll less. */
+.s1-content { position: relative; width: 100%; padding: 0; }
+.s1-intro {
+  height: 46vh;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1.5rem;
+}
+.s1-outro { height: 58vh; display: grid; place-items: center; }
+
+.s1-logo {
+  width: min(62vw, 760px);
+  height: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.s1-logo--sm { width: min(26vw, 300px); opacity: 0.4; }
+
+.s1-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+}
+
+.s1-scroll {
+  margin: 0.6rem 0 3rem;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+  text-align: center;
+  position: relative;
+}
+.s1-scroll::after {
+  content: "";
+  position: absolute;
+  top: calc(100% + 0.9rem);
+  left: 50%;
+  width: 1px;
+  height: 2.2rem;
+  background: rgba(255, 255, 255, 0.34);
+  animation: s1ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
+}
+@keyframes s1ScrollLine {
+  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }
+  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }
+  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }
+  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .s1-scroll::after { animation: none; transform: translateX(-50%); }
+}
+
+.s1-section { position: relative; }
+
+.s1-title {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0 10vw;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  font-weight: 300;
+  font-size: clamp(1.5rem, 15vw, 6.5rem);
+  line-height: 1.05;
+  pointer-events: none;
+  z-index: 2;
+}
+.s1-title--top { align-items: start; }
+.s1-title--bottom { align-items: end; }
+.s1-title--left { justify-items: start; text-align: left; }
+.s1-title--right { justify-items: end; text-align: right; }
+
+.s1-grid {
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  width: 100%;
+  perspective: var(--perspective);
+}
+
+.s1-wrap {
+  height: var(--grid-height);
+  width: var(--grid-width);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+  transform-style: preserve-3d;
+}
+
+.s1-item {
+  aspect-ratio: var(--grid-item-ratio);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+
+.s1-inner {
+  position: relative;
+  width: calc(1 / var(--grid-inner-scale) * 100%);
+  height: calc(1 / var(--grid-inner-scale) * 100%);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+`
diff --git a/content/registry/animations/scroll1-animation/meta.ts b/content/registry/animations/scroll1-animation/meta.ts
new file mode 100644
index 0000000..42fd35f
--- /dev/null
+++ b/content/registry/animations/scroll1-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "scroll1-animation",
+  title: "Scroll 1 Animation",
+  description:
+    "A perspective wall of images rotated on the Y axis, each tile parked at its own depth and sweeping across the viewport as you scroll. Inspired by Codrops.",
+  category: "animations",
+  preview: "/previews/animations/scroll1-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scrolltrigger",
+    "scroll",
+    "grid",
+    "3d",
+    "perspective",
+    "sweep",
+    "depth",
+    "dark",
+  ],
+  dependencies: ["gsap", "lenis"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/animations/scroll2-animation/demo.tsx b/content/registry/animations/scroll2-animation/demo.tsx
new file mode 100644
index 0000000..f9dfa31
--- /dev/null
+++ b/content/registry/animations/scroll2-animation/demo.tsx
@@ -0,0 +1,303 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import Lenis from "lenis"
+
+/* ─────────────────────────────────────────────
+   scroll2-animation — Every detail, already considered.
+
+   Tiles rise out of deep space — pushed 1000 to 3000px back — turning from −45° to 45° and dimming from double brightness to black as they pass, while the whole grid counter-rotates and scales up beneath them.
+
+   One of six on-scroll perspective grid animations
+   from Codrops' Scroll3DGrid (MIT — Codrops), split
+   here into a component per animation.
+
+   The original drives off window scroll with Lenis
+   on the page. This owns its own scroll container
+   instead: Lenis is bound to the root as its wrapper
+   and ScrollTrigger is given that same root as its
+   scroller, so the component never touches window
+   scroll or position:fixed.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
+
+const BASE = [
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+]
+
+/** the grid asks for 48 tiles; the nine images repeat to fill it */
+const TILES = Array.from({ length: 48 }, (_, i) =>
+  BASE[i % BASE.length].replace("/upload/", "/upload/c_fill,w_600,h_600,g_auto/")
+)
+
+export default function Scroll2Animation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const wrap = wrapRef.current
+    if (!root || !content || !wrap) return
+
+    gsap.registerPlugin(ScrollTrigger)
+
+    /* Lenis smooths the component's own scroller, not the page's */
+    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })
+    const onScroll = () => ScrollTrigger.update()
+    lenis.on("scroll", onScroll)
+
+    let raf = 0
+    const loop = (time: number) => {
+      lenis.raf(time)
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>(".s2-item")
+      const inners = items.map((el) => el.querySelector(".s2-inner") as HTMLElement)
+
+      const tl = gsap.timeline({
+        defaults: { ease: "none" },
+        scrollTrigger: {
+          trigger: wrap,
+          scroller: root,
+          start: "top bottom+=5%",
+          end: "bottom top-=5%",
+          scrub: true,
+        },
+      })
+
+      tl.set(wrap, { rotationX: 20 })
+        .set(items, { z: () => gsap.utils.random(-3000, -1000) })
+        .fromTo(items,
+          { yPercent: () => gsap.utils.random(100, 1000), rotationY: -45, filter: 'brightness(200%)' },
+          { ease: 'power2', yPercent: () => gsap.utils.random(-1000, -100), rotationY: 45, filter: 'brightness(0%)' }, 0)
+        .fromTo(wrap, { rotationZ: -5 }, { rotationX: -20, rotationZ: 10, scale: 1.2 }, 0)
+        .fromTo(inners, { scale: 2 }, { scale: 0.5 }, 0)
+    }, root)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      lenis.off("scroll", onScroll)
+      lenis.destroy()
+      ctx.revert()
+    }
+  }, [])
+
+  return (
+    <div ref={rootRef} className="s2-root">
+      <style>{CSS}</style>
+
+      <div ref={contentRef} className="s2-content">
+        {/* lead-in the scrub needs — carries the mark instead of nothing */}
+        <div className="s2-intro">
+          <img className="s2-logo" src={LOGO} alt="Zepa" draggable={false} />
+          <p className="s2-kicker">Zepa Motion · Scroll Animation 02</p>
+          <p className="s2-scroll">Scroll down</p>
+        </div>
+
+        <section className="s2-section">
+          <h3 className={"s2-title" + ""}>
+            Every detail,
+            <br />
+            already considered.
+          </h3>
+
+          <div className="s2-grid">
+            <div ref={wrapRef} className="s2-wrap">
+              {TILES.map((src, i) => (
+                <div className="s2-item" key={i}>
+                  <div
+                    className="s2-inner"
+                    style={{ backgroundImage: "url(" + src + ")" }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* tail the scrub needs, ditto */}
+        <div className="s2-outro">
+          <img className="s2-logo s2-logo--sm" src={LOGO} alt="Zepa" draggable={false} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.s2-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #000000;
+  color: #ffffff;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+
+  /* defaults from the original :root, then this animation's overrides */
+  --perspective: 1500px;
+  --grid-item-ratio: 1.5;
+  --grid-width: 100%;
+  --grid-height: auto;
+  --grid-gap: 2vw;
+  --grid-columns: 4;
+  --grid-inner-scale: 1;
+  --grid-width: 160%;
+  --perspective: 2000px;
+  --grid-inner-scale: 0.5;
+  --grid-item-ratio: 0.8;
+  --grid-columns: 6;
+  --grid-gap: 14vw;
+}
+.s2-root::-webkit-scrollbar { display: none; }
+.s2-root *,
+.s2-root *::before,
+.s2-root *::after { box-sizing: border-box; }
+
+/* lead-in and lead-out give the scrub somewhere to run; on the original
+   page this space came from the neighbouring sections */
+/* Runway.
+   starts below and far, ends above and at brightness 0, so the blank head and tail are trimmed rather than scrolled
+   through. Raise these to see more of the timeline, lower to scroll less. */
+.s2-content { position: relative; width: 100%; padding: 0; }
+.s2-intro {
+  height: 46vh;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1.5rem;
+}
+.s2-outro { height: 58vh; display: grid; place-items: center; }
+
+.s2-logo {
+  width: min(62vw, 760px);
+  height: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.s2-logo--sm { width: min(26vw, 300px); opacity: 0.4; }
+
+.s2-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+}
+
+.s2-scroll {
+  margin: 0.6rem 0 3rem;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+  text-align: center;
+  position: relative;
+}
+.s2-scroll::after {
+  content: "";
+  position: absolute;
+  top: calc(100% + 0.9rem);
+  left: 50%;
+  width: 1px;
+  height: 2.2rem;
+  background: rgba(255, 255, 255, 0.34);
+  animation: s2ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
+}
+@keyframes s2ScrollLine {
+  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }
+  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }
+  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }
+  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .s2-scroll::after { animation: none; transform: translateX(-50%); }
+}
+
+.s2-section { position: relative; }
+
+.s2-title {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0 10vw;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  font-weight: 300;
+  font-size: clamp(1.5rem, 15vw, 6.5rem);
+  line-height: 1.05;
+  pointer-events: none;
+  z-index: 2;
+}
+.s2-title--top { align-items: start; }
+.s2-title--bottom { align-items: end; }
+.s2-title--left { justify-items: start; text-align: left; }
+.s2-title--right { justify-items: end; text-align: right; }
+
+.s2-grid {
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  width: 100%;
+  perspective: var(--perspective);
+}
+
+.s2-wrap {
+  height: var(--grid-height);
+  width: var(--grid-width);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+  transform-style: preserve-3d;
+}
+
+.s2-item {
+  aspect-ratio: var(--grid-item-ratio);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+
+.s2-inner {
+  position: relative;
+  width: calc(1 / var(--grid-inner-scale) * 100%);
+  height: calc(1 / var(--grid-inner-scale) * 100%);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+`
diff --git a/content/registry/animations/scroll2-animation/meta.ts b/content/registry/animations/scroll2-animation/meta.ts
new file mode 100644
index 0000000..266f754
--- /dev/null
+++ b/content/registry/animations/scroll2-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "scroll2-animation",
+  title: "Scroll 2 Animation",
+  description:
+    "Tiles rise out of deep space, turning and dimming as they pass while the grid counter-rotates and scales beneath them. Inspired by Codrops.",
+  category: "animations",
+  preview: "/previews/animations/scroll2-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scrolltrigger",
+    "scroll",
+    "grid",
+    "3d",
+    "perspective",
+    "rise",
+    "brightness",
+    "dark",
+  ],
+  dependencies: ["gsap", "lenis"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/animations/scroll3-animation/demo.tsx b/content/registry/animations/scroll3-animation/demo.tsx
new file mode 100644
index 0000000..bec6920
--- /dev/null
+++ b/content/registry/animations/scroll3-animation/demo.tsx
@@ -0,0 +1,308 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import Lenis from "lenis"
+
+/* ─────────────────────────────────────────────
+   scroll3-animation — Copy it now, ship it today.
+
+   The grid starts 5000px away, pitched back on its top edge and unlit, then flattens and brightens as the whole wrap rushes 6500px toward the camera — a flythrough where the destination assembles itself on approach.
+
+   One of six on-scroll perspective grid animations
+   from Codrops' Scroll3DGrid (MIT — Codrops), split
+   here into a component per animation.
+
+   The original drives off window scroll with Lenis
+   on the page. This owns its own scroll container
+   instead: Lenis is bound to the root as its wrapper
+   and ScrollTrigger is given that same root as its
+   scroller, so the component never touches window
+   scroll or position:fixed.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
+
+const BASE = [
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+]
+
+/** the grid asks for 48 tiles; the nine images repeat to fill it */
+const TILES = Array.from({ length: 48 }, (_, i) =>
+  BASE[i % BASE.length].replace("/upload/", "/upload/c_fill,w_600,h_600,g_auto/")
+)
+
+export default function Scroll3Animation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const wrap = wrapRef.current
+    if (!root || !content || !wrap) return
+
+    gsap.registerPlugin(ScrollTrigger)
+
+    /* Lenis smooths the component's own scroller, not the page's */
+    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })
+    const onScroll = () => ScrollTrigger.update()
+    lenis.on("scroll", onScroll)
+
+    let raf = 0
+    const loop = (time: number) => {
+      lenis.raf(time)
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>(".s3-item")
+      const inners = items.map((el) => el.querySelector(".s3-inner") as HTMLElement)
+
+      const tl = gsap.timeline({
+        defaults: { ease: "none" },
+        scrollTrigger: {
+          trigger: wrap,
+          scroller: root,
+          start: "top bottom+=5%",
+          end: "bottom top-=5%",
+          scrub: true,
+        },
+      })
+
+      tl.set(items, {
+          transformOrigin: '50% 0%',
+          z: () => gsap.utils.random(-5000, -2000),
+          rotationX: () => gsap.utils.random(-65, -25),
+          filter: 'brightness(0%)',
+        })
+        .to(items, {
+          xPercent: () => gsap.utils.random(-150, 150),
+          yPercent: () => gsap.utils.random(-300, 300),
+          rotationX: 0,
+          filter: 'brightness(200%)',
+        }, 0)
+        .to(wrap, { z: 6500 }, 0)
+        .fromTo(inners, { scale: 2 }, { scale: 0.5 }, 0)
+    }, root)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      lenis.off("scroll", onScroll)
+      lenis.destroy()
+      ctx.revert()
+    }
+  }, [])
+
+  return (
+    <div ref={rootRef} className="s3-root">
+      <style>{CSS}</style>
+
+      <div ref={contentRef} className="s3-content">
+        {/* lead-in the scrub needs — carries the mark instead of nothing */}
+        <div className="s3-intro">
+          <img className="s3-logo" src={LOGO} alt="Zepa" draggable={false} />
+          <p className="s3-kicker">Zepa Motion · Scroll Animation 03</p>
+          <p className="s3-scroll">Scroll down</p>
+        </div>
+
+        <section className="s3-section">
+          <h3 className={"s3-title" + " s3-title--left s3-title--bottom"}>
+            Copy it now,
+            <br />
+            ship it today.
+          </h3>
+
+          <div className="s3-grid">
+            <div ref={wrapRef} className="s3-wrap">
+              {TILES.map((src, i) => (
+                <div className="s3-item" key={i}>
+                  <div
+                    className="s3-inner"
+                    style={{ backgroundImage: "url(" + src + ")" }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* tail the scrub needs, ditto */}
+        <div className="s3-outro">
+          <img className="s3-logo s3-logo--sm" src={LOGO} alt="Zepa" draggable={false} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.s3-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #000000;
+  color: #ffffff;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+
+  /* defaults from the original :root, then this animation's overrides */
+  --perspective: 1500px;
+  --grid-item-ratio: 1.5;
+  --grid-width: 100%;
+  --grid-height: auto;
+  --grid-gap: 2vw;
+  --grid-columns: 4;
+  --grid-inner-scale: 1;
+  --grid-width: 105%;
+  --grid-columns: 8;
+  --perspective: 1500px;
+  --grid-inner-scale: 0.5;
+}
+.s3-root::-webkit-scrollbar { display: none; }
+.s3-root *,
+.s3-root *::before,
+.s3-root *::after { box-sizing: border-box; }
+
+/* lead-in and lead-out give the scrub somewhere to run; on the original
+   page this space came from the neighbouring sections */
+/* Runway — the full lead-in and lead-out, as the original's trigger range
+   asks for: start fires at "top bottom+=5%" and end at "bottom top-=5%",
+   so anything under ~105vh either side clips the timeline. */
+.s3-content { position: relative; width: 100%; padding: 0; }
+.s3-intro {
+  height: 90vh;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1.5rem;
+}
+.s3-outro { height: 110vh; display: grid; place-items: center; }
+
+.s3-logo {
+  width: min(62vw, 760px);
+  height: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.s3-logo--sm { width: min(26vw, 300px); opacity: 0.4; }
+
+.s3-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+}
+
+.s3-scroll {
+  margin: 0.6rem 0 3rem;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+  text-align: center;
+  position: relative;
+}
+.s3-scroll::after {
+  content: "";
+  position: absolute;
+  top: calc(100% + 0.9rem);
+  left: 50%;
+  width: 1px;
+  height: 2.2rem;
+  background: rgba(255, 255, 255, 0.34);
+  animation: s3ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
+}
+@keyframes s3ScrollLine {
+  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }
+  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }
+  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }
+  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .s3-scroll::after { animation: none; transform: translateX(-50%); }
+}
+
+.s3-section { position: relative; }
+
+.s3-title {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0 10vw;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  font-weight: 300;
+  font-size: clamp(1.5rem, 15vw, 6.5rem);
+  line-height: 1.05;
+  pointer-events: none;
+  z-index: 2;
+}
+.s3-title--top { align-items: start; }
+.s3-title--bottom { align-items: end; }
+.s3-title--left { justify-items: start; text-align: left; }
+.s3-title--right { justify-items: end; text-align: right; }
+
+.s3-grid {
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  width: 100%;
+  perspective: var(--perspective);
+}
+
+.s3-wrap {
+  height: var(--grid-height);
+  width: var(--grid-width);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+  transform-style: preserve-3d;
+}
+
+.s3-item {
+  aspect-ratio: var(--grid-item-ratio);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+
+.s3-inner {
+  position: relative;
+  width: calc(1 / var(--grid-inner-scale) * 100%);
+  height: calc(1 / var(--grid-inner-scale) * 100%);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+`
diff --git a/content/registry/animations/scroll3-animation/meta.ts b/content/registry/animations/scroll3-animation/meta.ts
new file mode 100644
index 0000000..386f4ae
--- /dev/null
+++ b/content/registry/animations/scroll3-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "scroll3-animation",
+  title: "Scroll 3 Animation",
+  description:
+    "The grid starts far away and unlit, then flattens and brightens as it rushes toward the camera — a flythrough that assembles itself on approach. Inspired by Codrops.",
+  category: "animations",
+  preview: "/previews/animations/scroll3-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scrolltrigger",
+    "scroll",
+    "grid",
+    "3d",
+    "flythrough",
+    "depth",
+    "brightness",
+    "dark",
+  ],
+  dependencies: ["gsap", "lenis"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/animations/scroll4-animation/demo.tsx b/content/registry/animations/scroll4-animation/demo.tsx
new file mode 100644
index 0000000..84cabe9
--- /dev/null
+++ b/content/registry/animations/scroll4-animation/demo.tsx
@@ -0,0 +1,301 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import Lenis from "lenis"
+
+/* ─────────────────────────────────────────────
+   scroll4-animation — One paste unfolds a finished scene
+
+   A narrow column seen from its left edge. Each tile hinges on its top edge from −70° to 70° while stepping 500px toward the camera and back again on a 0.04s stagger — pages turning in sequence rather than all at once.
+
+   One of six on-scroll perspective grid animations
+   from Codrops' Scroll3DGrid (MIT — Codrops), split
+   here into a component per animation.
+
+   The original drives off window scroll with Lenis
+   on the page. This owns its own scroll container
+   instead: Lenis is bound to the root as its wrapper
+   and ScrollTrigger is given that same root as its
+   scroller, so the component never touches window
+   scroll or position:fixed.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
+
+const BASE = [
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+]
+
+/** the grid asks for 24 tiles; the nine images repeat to fill it */
+const TILES = Array.from({ length: 24 }, (_, i) =>
+  BASE[i % BASE.length].replace("/upload/", "/upload/c_fill,w_600,h_600,g_auto/")
+)
+
+export default function Scroll4Animation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const wrap = wrapRef.current
+    if (!root || !content || !wrap) return
+
+    gsap.registerPlugin(ScrollTrigger)
+
+    /* Lenis smooths the component's own scroller, not the page's */
+    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })
+    const onScroll = () => ScrollTrigger.update()
+    lenis.on("scroll", onScroll)
+
+    let raf = 0
+    const loop = (time: number) => {
+      lenis.raf(time)
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>(".s4-item")
+
+      const tl = gsap.timeline({
+        defaults: { ease: "none" },
+        scrollTrigger: {
+          trigger: wrap,
+          scroller: root,
+          start: "top bottom+=5%",
+          end: "bottom top-=5%",
+          scrub: true,
+        },
+      })
+
+      tl.set(wrap, { transformOrigin: '0% 50%', rotationY: 30, xPercent: -75 })
+        .set(items, { transformOrigin: '50% 0%' })
+        .to(items, { duration: 0.5, ease: 'power2', z: 500, stagger: 0.04 }, 0)
+        .to(items, { duration: 0.5, ease: 'power2.in', z: 0, stagger: 0.04 }, 0.5)
+        .fromTo(items,
+          { rotationX: -70, filter: 'brightness(120%)' },
+          { duration: 1, rotationX: 70, filter: 'brightness(0%)', stagger: 0.04 }, 0)
+    }, root)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      lenis.off("scroll", onScroll)
+      lenis.destroy()
+      ctx.revert()
+    }
+  }, [])
+
+  return (
+    <div ref={rootRef} className="s4-root">
+      <style>{CSS}</style>
+
+      <div ref={contentRef} className="s4-content">
+        {/* lead-in the scrub needs — carries the mark instead of nothing */}
+        <div className="s4-intro">
+          <img className="s4-logo" src={LOGO} alt="Zepa" draggable={false} />
+          <p className="s4-kicker">Zepa Motion · Scroll Animation 04</p>
+          <p className="s4-scroll">Scroll down</p>
+        </div>
+
+        <section className="s4-section">
+          <h3 className={"s4-title" + " s4-title--right"}>
+            One paste unfolds
+            <br />
+            a finished scene
+          </h3>
+
+          <div className="s4-grid">
+            <div ref={wrapRef} className="s4-wrap">
+              {TILES.map((src, i) => (
+                <div className="s4-item" key={i}>
+                  <div
+                    className="s4-inner"
+                    style={{ backgroundImage: "url(" + src + ")" }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* tail the scrub needs, ditto */}
+        <div className="s4-outro">
+          <img className="s4-logo s4-logo--sm" src={LOGO} alt="Zepa" draggable={false} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.s4-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #000000;
+  color: #ffffff;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+
+  /* defaults from the original :root, then this animation's overrides */
+  --perspective: 1500px;
+  --grid-item-ratio: 1.5;
+  --grid-width: 100%;
+  --grid-height: auto;
+  --grid-gap: 2vw;
+  --grid-columns: 4;
+  --grid-inner-scale: 1;
+  --grid-width: 50%;
+  --perspective: 3000px;
+  --grid-item-ratio: 0.8;
+  --grid-columns: 3;
+  --grid-gap: 1vw;
+}
+.s4-root::-webkit-scrollbar { display: none; }
+.s4-root *,
+.s4-root *::before,
+.s4-root *::after { box-sizing: border-box; }
+
+/* lead-in and lead-out give the scrub somewhere to run; on the original
+   page this space came from the neighbouring sections */
+/* Runway — the full lead-in and lead-out, as the original's trigger range
+   asks for: start fires at "top bottom+=5%" and end at "bottom top-=5%",
+   so anything under ~105vh either side clips the timeline. */
+.s4-content { position: relative; width: 100%; padding: 0; }
+.s4-intro {
+  height: 90vh;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1.5rem;
+}
+.s4-outro { height: 110vh; display: grid; place-items: center; }
+
+.s4-logo {
+  width: min(62vw, 760px);
+  height: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.s4-logo--sm { width: min(26vw, 300px); opacity: 0.4; }
+
+.s4-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+}
+
+.s4-scroll {
+  margin: 0.6rem 0 3rem;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+  text-align: center;
+  position: relative;
+}
+.s4-scroll::after {
+  content: "";
+  position: absolute;
+  top: calc(100% + 0.9rem);
+  left: 50%;
+  width: 1px;
+  height: 2.2rem;
+  background: rgba(255, 255, 255, 0.34);
+  animation: s4ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
+}
+@keyframes s4ScrollLine {
+  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }
+  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }
+  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }
+  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .s4-scroll::after { animation: none; transform: translateX(-50%); }
+}
+
+.s4-section { position: relative; }
+
+.s4-title {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0 10vw;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  font-weight: 300;
+  font-size: clamp(1.5rem, 15vw, 6.5rem);
+  line-height: 1.05;
+  pointer-events: none;
+  z-index: 2;
+}
+.s4-title--top { align-items: start; }
+.s4-title--bottom { align-items: end; }
+.s4-title--left { justify-items: start; text-align: left; }
+.s4-title--right { justify-items: end; text-align: right; }
+
+.s4-grid {
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  width: 100%;
+  perspective: var(--perspective);
+}
+
+.s4-wrap {
+  height: var(--grid-height);
+  width: var(--grid-width);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+  transform-style: preserve-3d;
+}
+
+.s4-item {
+  aspect-ratio: var(--grid-item-ratio);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+
+.s4-inner {
+  position: relative;
+  width: calc(1 / var(--grid-inner-scale) * 100%);
+  height: calc(1 / var(--grid-inner-scale) * 100%);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+`
diff --git a/content/registry/animations/scroll4-animation/meta.ts b/content/registry/animations/scroll4-animation/meta.ts
new file mode 100644
index 0000000..82a7ccb
--- /dev/null
+++ b/content/registry/animations/scroll4-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "scroll4-animation",
+  title: "Scroll 4 Animation",
+  description:
+    "A narrow column seen from its left edge, each tile hinging on its top edge and stepping toward the camera on a stagger — pages turning in sequence. Inspired by Codrops.",
+  category: "animations",
+  preview: "/previews/animations/scroll4-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scrolltrigger",
+    "scroll",
+    "grid",
+    "3d",
+    "hinge",
+    "stagger",
+    "pages",
+    "dark",
+  ],
+  dependencies: ["gsap", "lenis"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/animations/scroll5-animation/demo.tsx b/content/registry/animations/scroll5-animation/demo.tsx
new file mode 100644
index 0000000..11f2367
--- /dev/null
+++ b/content/registry/animations/scroll5-animation/demo.tsx
@@ -0,0 +1,321 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import Lenis from "lenis"
+
+/* ─────────────────────────────────────────────
+   scroll5-animation — An infinite library of components unfolding
+
+   A gapless field laid almost flat at 50°. Even rows slide left and odd rows slide right, tearing the image apart along its own seams, then every tile drifts vertically once the rows have parted.
+
+   One of six on-scroll perspective grid animations
+   from Codrops' Scroll3DGrid (MIT — Codrops), split
+   here into a component per animation.
+
+   The original drives off window scroll with Lenis
+   on the page. This owns its own scroll container
+   instead: Lenis is bound to the root as its wrapper
+   and ScrollTrigger is given that same root as its
+   scroller, so the component never touches window
+   scroll or position:fixed.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
+
+const BASE = [
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+]
+
+/** the grid asks for 48 tiles; the nine images repeat to fill it */
+const TILES = Array.from({ length: 48 }, (_, i) =>
+  BASE[i % BASE.length].replace("/upload/", "/upload/c_fill,w_600,h_600,g_auto/")
+)
+
+/**
+ * Group the tiles into rows by their vertical centre, then keep every other
+ * row. Ported from the original's getGrid() helper, reduced to the one axis
+ * this animation actually uses and flattened, since GSAP receives a flat
+ * target list either way.
+ */
+function rowsOf(items: HTMLElement[], which: "even" | "odd") {
+  const buckets = new Map<number, HTMLElement[]>()
+  for (const el of items) {
+    const b = el.getBoundingClientRect()
+    const key = Math.round(b.top + b.height / 2)
+    const found = buckets.get(key)
+    if (found) found.push(el)
+    else buckets.set(key, [el])
+  }
+  const ordered = [...buckets.keys()].sort((a, b) => a - b).map((k) => buckets.get(k) as HTMLElement[])
+  const onlyEven = which === "even"
+  return ordered.filter((_, i) => !(i % 2) === onlyEven).flat()
+}
+
+export default function Scroll5Animation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const wrap = wrapRef.current
+    if (!root || !content || !wrap) return
+
+    gsap.registerPlugin(ScrollTrigger)
+
+    /* Lenis smooths the component's own scroller, not the page's */
+    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })
+    const onScroll = () => ScrollTrigger.update()
+    lenis.on("scroll", onScroll)
+
+    let raf = 0
+    const loop = (time: number) => {
+      lenis.raf(time)
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>(".s5-item")
+
+      const tl = gsap.timeline({
+        defaults: { ease: "none" },
+        scrollTrigger: {
+          trigger: wrap,
+          scroller: root,
+          start: "top bottom+=5%",
+          end: "bottom top-=5%",
+          scrub: true,
+        },
+      })
+
+      const grouped = { even: rowsOf(items, 'even'), odd: rowsOf(items, 'odd') }
+
+      tl.set(wrap, { rotationX: 50 })
+        .to(wrap, { rotationX: 30 })
+        .fromTo(items, { filter: 'brightness(0%)' }, { filter: 'brightness(100%)' }, 0)
+        .to(grouped.even, { xPercent: -100, ease: 'power1' }, 0)
+        .to(grouped.odd, { xPercent: 100, ease: 'power1' }, 0)
+        .addLabel('rowsEnd', '>-=0.15')
+        .to(items, { ease: 'power1', yPercent: () => gsap.utils.random(-100, 200) }, 'rowsEnd')
+    }, root)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      lenis.off("scroll", onScroll)
+      lenis.destroy()
+      ctx.revert()
+    }
+  }, [])
+
+  return (
+    <div ref={rootRef} className="s5-root">
+      <style>{CSS}</style>
+
+      <div ref={contentRef} className="s5-content">
+        {/* lead-in the scrub needs — carries the mark instead of nothing */}
+        <div className="s5-intro">
+          <img className="s5-logo" src={LOGO} alt="Zepa" draggable={false} />
+          <p className="s5-kicker">Zepa Motion · Scroll Animation 05</p>
+          <p className="s5-scroll">Scroll down</p>
+        </div>
+
+        <section className="s5-section">
+          <h3 className={"s5-title" + ""}>
+            An infinite library
+            <br />
+            of components unfolding
+          </h3>
+
+          <div className="s5-grid">
+            <div ref={wrapRef} className="s5-wrap">
+              {TILES.map((src, i) => (
+                <div className="s5-item" key={i}>
+                  <div
+                    className="s5-inner"
+                    style={{ backgroundImage: "url(" + src + ")" }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* tail the scrub needs, ditto */}
+        <div className="s5-outro">
+          <img className="s5-logo s5-logo--sm" src={LOGO} alt="Zepa" draggable={false} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.s5-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #000000;
+  color: #ffffff;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+
+  /* defaults from the original :root, then this animation's overrides */
+  --perspective: 1500px;
+  --grid-item-ratio: 1.5;
+  --grid-width: 100%;
+  --grid-height: auto;
+  --grid-gap: 2vw;
+  --grid-columns: 4;
+  --grid-inner-scale: 1;
+  --grid-width: 120%;
+  --grid-columns: 8;
+  --grid-gap: 0;
+}
+.s5-root::-webkit-scrollbar { display: none; }
+.s5-root *,
+.s5-root *::before,
+.s5-root *::after { box-sizing: border-box; }
+
+/* lead-in and lead-out give the scrub somewhere to run; on the original
+   page this space came from the neighbouring sections */
+/* Runway — the full lead-in and lead-out, as the original's trigger range
+   asks for: start fires at "top bottom+=5%" and end at "bottom top-=5%",
+   so anything under ~105vh either side clips the timeline. */
+.s5-content { position: relative; width: 100%; padding: 0; }
+.s5-intro {
+  height: 90vh;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1.5rem;
+}
+.s5-outro { height: 110vh; display: grid; place-items: center; }
+
+.s5-logo {
+  width: min(62vw, 760px);
+  height: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.s5-logo--sm { width: min(26vw, 300px); opacity: 0.4; }
+
+.s5-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+}
+
+.s5-scroll {
+  margin: 0.6rem 0 3rem;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+  text-align: center;
+  position: relative;
+}
+.s5-scroll::after {
+  content: "";
+  position: absolute;
+  top: calc(100% + 0.9rem);
+  left: 50%;
+  width: 1px;
+  height: 2.2rem;
+  background: rgba(255, 255, 255, 0.34);
+  animation: s5ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
+}
+@keyframes s5ScrollLine {
+  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }
+  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }
+  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }
+  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .s5-scroll::after { animation: none; transform: translateX(-50%); }
+}
+
+.s5-section { position: relative; }
+
+.s5-title {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0 10vw;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  font-weight: 300;
+  font-size: clamp(1.5rem, 15vw, 6.5rem);
+  line-height: 1.05;
+  pointer-events: none;
+  z-index: 2;
+}
+.s5-title--top { align-items: start; }
+.s5-title--bottom { align-items: end; }
+.s5-title--left { justify-items: start; text-align: left; }
+.s5-title--right { justify-items: end; text-align: right; }
+
+.s5-grid {
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  width: 100%;
+  perspective: var(--perspective);
+}
+
+.s5-wrap {
+  height: var(--grid-height);
+  width: var(--grid-width);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+  transform-style: preserve-3d;
+}
+
+.s5-item {
+  aspect-ratio: var(--grid-item-ratio);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+
+.s5-inner {
+  position: relative;
+  width: calc(1 / var(--grid-inner-scale) * 100%);
+  height: calc(1 / var(--grid-inner-scale) * 100%);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+`
diff --git a/content/registry/animations/scroll5-animation/meta.ts b/content/registry/animations/scroll5-animation/meta.ts
new file mode 100644
index 0000000..e8b6888
--- /dev/null
+++ b/content/registry/animations/scroll5-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "scroll5-animation",
+  title: "Scroll 5 Animation",
+  description:
+    "A gapless field laid almost flat. Even rows slide left and odd rows slide right, tearing the image apart along its own seams. Inspired by Codrops.",
+  category: "animations",
+  preview: "/previews/animations/scroll5-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scrolltrigger",
+    "scroll",
+    "grid",
+    "3d",
+    "shear",
+    "rows",
+    "flat",
+    "dark",
+  ],
+  dependencies: ["gsap", "lenis"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/animations/scroll6-animation/demo.tsx b/content/registry/animations/scroll6-animation/demo.tsx
new file mode 100644
index 0000000..cce69c5
--- /dev/null
+++ b/content/registry/animations/scroll6-animation/demo.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import Lenis from "lenis"
+
+/* ─────────────────────────────────────────────
+   scroll6-animation — Interfaces shift, motion flows.
+
+   Tiles hinge from a pivot two heights below themselves, swinging up from 400% down while spinning a full 360° on the Y axis, fading to a fifth opacity on a 0.03s stagger — a deck flipping itself into place.
+
+   One of six on-scroll perspective grid animations
+   from Codrops' Scroll3DGrid (MIT — Codrops), split
+   here into a component per animation.
+
+   The original drives off window scroll with Lenis
+   on the page. This owns its own scroll container
+   instead: Lenis is bound to the root as its wrapper
+   and ScrollTrigger is given that same root as its
+   scroller, so the component never touches window
+   scroll or position:fixed.
+   ───────────────────────────────────────────── */
+
+const LOGO =
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png"
+
+const BASE = [
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png",
+  "https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png",
+]
+
+/** the grid asks for 21 tiles; the nine images repeat to fill it */
+const TILES = Array.from({ length: 21 }, (_, i) =>
+  BASE[i % BASE.length].replace("/upload/", "/upload/c_fill,w_600,h_600,g_auto/")
+)
+
+export default function Scroll6Animation() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const root = rootRef.current
+    const content = contentRef.current
+    const wrap = wrapRef.current
+    if (!root || !content || !wrap) return
+
+    gsap.registerPlugin(ScrollTrigger)
+
+    /* Lenis smooths the component's own scroller, not the page's */
+    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })
+    const onScroll = () => ScrollTrigger.update()
+    lenis.on("scroll", onScroll)
+
+    let raf = 0
+    const loop = (time: number) => {
+      lenis.raf(time)
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const ctx = gsap.context(() => {
+      const items = gsap.utils.toArray<HTMLElement>(".s6-item")
+
+      const tl = gsap.timeline({
+        defaults: { ease: "none" },
+        scrollTrigger: {
+          trigger: wrap,
+          scroller: root,
+          start: "top bottom+=5%",
+          end: "bottom top-=5%",
+          scrub: true,
+        },
+      })
+
+      tl.fromTo(items,
+        { transformOrigin: '50% 200%', rotationX: 0, yPercent: 400 },
+        { yPercent: 0, rotationY: 360, opacity: 0.2, scale: 0.8, stagger: 0.03 })
+    }, root)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      lenis.off("scroll", onScroll)
+      lenis.destroy()
+      ctx.revert()
+    }
+  }, [])
+
+  return (
+    <div ref={rootRef} className="s6-root">
+      <style>{CSS}</style>
+
+      <div ref={contentRef} className="s6-content">
+        {/* lead-in the scrub needs — carries the mark instead of nothing */}
+        <div className="s6-intro">
+          <img className="s6-logo" src={LOGO} alt="Zepa" draggable={false} />
+          <p className="s6-kicker">Zepa Motion · Scroll Animation 06</p>
+          <p className="s6-scroll">Scroll down</p>
+        </div>
+
+        <section className="s6-section">
+          <h3 className={"s6-title" + ""}>
+            Interfaces shift,
+            <br />
+            motion flows.
+          </h3>
+
+          <div className="s6-grid">
+            <div ref={wrapRef} className="s6-wrap">
+              {TILES.map((src, i) => (
+                <div className="s6-item" key={i}>
+                  <div
+                    className="s6-inner"
+                    style={{ backgroundImage: "url(" + src + ")" }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* tail the scrub needs, ditto */}
+        <div className="s6-outro">
+          <img className="s6-logo s6-logo--sm" src={LOGO} alt="Zepa" draggable={false} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CSS = `
+.s6-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #000000;
+  color: #ffffff;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
+
+  /* defaults from the original :root, then this animation's overrides */
+  --perspective: 1500px;
+  --grid-item-ratio: 1.5;
+  --grid-width: 100%;
+  --grid-height: auto;
+  --grid-gap: 2vw;
+  --grid-columns: 4;
+  --grid-inner-scale: 1;
+  --perspective: 2500px;
+  --grid-width: 100%;
+  --grid-gap: 6;
+  --grid-columns: 3;
+  --grid-item-ratio: 1;
+}
+.s6-root::-webkit-scrollbar { display: none; }
+.s6-root *,
+.s6-root *::before,
+.s6-root *::after { box-sizing: border-box; }
+
+/* lead-in and lead-out give the scrub somewhere to run; on the original
+   page this space came from the neighbouring sections */
+/* Runway.
+   starts below the fold, but ENDS with every tile settled and visible — tail must stay, so the blank head and tail are trimmed rather than scrolled
+   through. Raise these to see more of the timeline, lower to scroll less. */
+.s6-content { position: relative; width: 100%; padding: 0; }
+/* a full viewport tall, so the mark centres on the first screen rather than
+   sitting a quarter of the way down a short block */
+.s6-intro {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1.5rem;
+}
+.s6-outro { height: 108vh; display: grid; place-items: center; }
+
+.s6-logo {
+  width: min(62vw, 760px);
+  height: auto;
+  display: block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.s6-logo--sm { width: min(26vw, 300px); opacity: 0.4; }
+
+.s6-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+  text-align: center;
+}
+
+.s6-scroll {
+  margin: 0.6rem 0 3rem;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.34);
+  text-align: center;
+  position: relative;
+}
+.s6-scroll::after {
+  content: "";
+  position: absolute;
+  top: calc(100% + 0.9rem);
+  left: 50%;
+  width: 1px;
+  height: 2.2rem;
+  background: rgba(255, 255, 255, 0.34);
+  animation: s6ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;
+}
+@keyframes s6ScrollLine {
+  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }
+  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }
+  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }
+  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .s6-scroll::after { animation: none; transform: translateX(-50%); }
+}
+
+.s6-section { position: relative; }
+
+.s6-title {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0 10vw;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  font-weight: 300;
+  font-size: clamp(1.5rem, 15vw, 6.5rem);
+  line-height: 1.05;
+  pointer-events: none;
+  z-index: 2;
+}
+.s6-title--top { align-items: start; }
+.s6-title--bottom { align-items: end; }
+.s6-title--left { justify-items: start; text-align: left; }
+.s6-title--right { justify-items: end; text-align: right; }
+
+.s6-grid {
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  width: 100%;
+  perspective: var(--perspective);
+}
+
+.s6-wrap {
+  height: var(--grid-height);
+  width: var(--grid-width);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gap);
+  transform-style: preserve-3d;
+}
+
+.s6-item {
+  aspect-ratio: var(--grid-item-ratio);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+
+.s6-inner {
+  position: relative;
+  width: calc(1 / var(--grid-inner-scale) * 100%);
+  height: calc(1 / var(--grid-inner-scale) * 100%);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+`
diff --git a/content/registry/animations/scroll6-animation/meta.ts b/content/registry/animations/scroll6-animation/meta.ts
new file mode 100644
index 0000000..a8c5894
--- /dev/null
+++ b/content/registry/animations/scroll6-animation/meta.ts
@@ -0,0 +1,27 @@
+export const meta = {
+  slug: "scroll6-animation",
+  title: "Scroll 6 Animation",
+  description:
+    "Tiles hinge from a pivot below themselves, swinging up while spinning a full turn on a stagger — a deck flipping itself into place. Inspired by Codrops.",
+  category: "animations",
+  preview: "/previews/animations/scroll6-animation/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "animation",
+    "gsap",
+    "scrolltrigger",
+    "scroll",
+    "grid",
+    "3d",
+    "flip",
+    "stagger",
+    "spin",
+    "dark",
+  ],
+  dependencies: ["gsap", "lenis"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/grid-sections/paper-grid/demo.tsx b/content/registry/grid-sections/paper-grid/demo.tsx
new file mode 100644
index 0000000..3393216
--- /dev/null
+++ b/content/registry/grid-sections/paper-grid/demo.tsx
@@ -0,0 +1,162 @@
+"use client"
+
+import { PaperSheets, type SheetContent } from "./ui/paper-sheets"
+
+/* ─────────────────────────────────────────────
+   paper-grid — three certificates printed on glass
+
+   Three translucent sheets hang side by side over
+   a single giant wordmark. Each one bends like real
+   paper: the curl is integrated along the sheet
+   rather than pushed in Z, so the silhouette pulls
+   in where the page turns away from the light.
+
+   Drag a sheet to turn it — the throw carries and
+   settles on the nearest whole rotation. Hover to
+   light it; the hovered sheet lifts toward the
+   camera so it wins the overlap.
+
+   All three share one WebGL context, one renderer
+   and one environment map. The component measures
+   its own container and binds pointer events to it,
+   so it never touches window scroll or position:fixed.
+
+   3D scene ported from ThreeUI's <ThreeDPaper />
+   (MIT — Meng To / Design+Code).
+   ───────────────────────────────────────────── */
+
+/** the same credits are printed on every sheet */
+const CREDITS = ["By Zepa Studios", "Sameer Shaik", "George Hastings", "Frank Adl"]
+
+const CARDS: SheetContent[] = [
+  {
+    kicker: "Component of the Week.",
+    date: "Feb 14, 2026",
+    title: "selfie-hero.",
+    names: CREDITS,
+    body: "The Zepa jury is proud to declare this component pick of the week in recognition of the craft and restraint invested in its making.",
+    mark: "zepa.",
+    markSuffix: " winners",
+    badge: "2026 Official Certificate",
+    tag: "COTW",
+  },
+  {
+    kicker: "Studio of the Month.",
+    date: "Mar 02, 2026",
+    title: "Zepa Studio.",
+    names: CREDITS,
+    body: "Awarded for a body of work that treats motion as structure rather than decoration, and ships it without the maintenance tax.",
+    mark: "zepa.",
+    markSuffix: " studios",
+    badge: "2026 Official Certificate",
+    tag: "SOTM",
+  },
+  {
+    kicker: "Featured Build.",
+    date: "Apr 21, 2026",
+    title: "zepa.design",
+    names: CREDITS,
+    body: "Recognised for an interface that stays legible at speed, and for proving that a registry component can carry a whole product.",
+    mark: "zepa.",
+    markSuffix: " featured",
+    badge: "2026 Official Certificate",
+    tag: "BUILD",
+  },
+]
+
+export default function PaperGrid() {
+  return (
+    <div className="pg-root">
+      <style>{CSS}</style>
+
+      {/* one giant word, nothing else */}
+      <div className="pg-bg">
+        <h1>NOCTURNE</h1>
+      </div>
+
+      {/* a touch of defocus so the wordmark sits behind glass */}
+      <div className="pg-dof" />
+
+      <PaperSheets cards={CARDS} />
+
+      <div className="pg-grain" />
+      <div className="pg-vig" />
+
+      <p className="pg-hint">
+        <b>Drag</b> to turn one<span className="pg-ptr"> &nbsp;·&nbsp; <b>Hover</b> to light it</span>
+      </p>
+    </div>
+  )
+}
+
+const CSS = `
+.pg-root {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: #08080a;
+  color: #f2f2f0;
+  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+/* the word the sheets hang in front of */
+.pg-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
+.pg-bg h1 {
+  position: absolute; left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  font-weight: 600; letter-spacing: -0.055em;
+  font-size: clamp(96px, 18.6vw, 420px);
+  line-height: 0.8; white-space: nowrap;
+  color: rgba(242, 242, 240, 0.125);
+}
+
+.pg-dof {
+  position: absolute; inset: -30px; z-index: 2; pointer-events: none;
+  backdrop-filter: blur(2.4px);
+  -webkit-backdrop-filter: blur(2.4px);
+  background: rgba(8, 8, 10, 0.05);
+}
+
+/* the WebGL stage owns pointer input, so it sits above the backdrop */
+.pg-stage { position: absolute; inset: 0; z-index: 3; }
+.pg-gl { display: block; width: 100%; height: 100%; }
+
+.pg-grain {
+  position: absolute; inset: 0; z-index: 4; pointer-events: none;
+  opacity: 0.05; mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat; background-size: 160px 160px;
+}
+
+.pg-vig {
+  position: absolute; inset: 0; z-index: 5; pointer-events: none;
+  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.52) 100%);
+}
+
+.pg-hint {
+  position: absolute; left: 0; right: 0; bottom: 48px; z-index: 6;
+  margin: 0; pointer-events: none; text-align: center;
+  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
+  color: rgba(242, 242, 240, 0.3);
+  opacity: 0; transition: opacity 0.8s ease;
+}
+.pg-hint b { font-weight: 500; color: rgba(242, 242, 240, 0.58); }
+.pg-stage[data-ready="true"] ~ .pg-hint { opacity: 1; }
+
+@media (hover: none) { .pg-ptr { display: none; } }
+
+@media (max-width: 760px) {
+  .pg-bg h1 { font-size: 22vw; }
+  .pg-hint { bottom: 32px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pg-hint { transition: none; }
+}
+`
diff --git a/content/registry/grid-sections/paper-grid/meta.ts b/content/registry/grid-sections/paper-grid/meta.ts
new file mode 100644
index 0000000..8b98b2a
--- /dev/null
+++ b/content/registry/grid-sections/paper-grid/meta.ts
@@ -0,0 +1,29 @@
+export const meta = {
+  slug: "paper-grid",
+  title: "Paper Grid",
+  description:
+    "Three translucent certificates printed on glass, hanging side by side and bending like real paper. Drag a sheet to turn it, hover to light it — all three share one WebGL context. Inspired by ThreeUI's ThreeDPaper.",
+  category: "grid-sections",
+  preview: "/previews/grid-sections/paper-grid/preview.mov",
+  github: "vij-sameerb5",
+  tags: [
+    "grid",
+    "webgl",
+    "three",
+    "paper",
+    "glass",
+    "certificate",
+    "shader",
+    "drag",
+    "3d",
+    "dark",
+    "interactive",
+    "animated",
+  ],
+  dependencies: ["three"],
+  registryDependencies: [],
+  version: 1,
+  views: 0,
+  likes: 0,
+  installs: 0,
+} as const
diff --git a/content/registry/grid-sections/paper-grid/ui/paper-sheets.tsx b/content/registry/grid-sections/paper-grid/ui/paper-sheets.tsx
new file mode 100644
index 0000000..a99d586
--- /dev/null
+++ b/content/registry/grid-sections/paper-grid/ui/paper-sheets.tsx
@@ -0,0 +1,908 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import * as THREE from "three"
+
+/* ─────────────────────────────────────────────────────────────────────────
+   paper-sheets — three certificates printed on glass, one WebGL context
+
+   Ported from ThreeUI's <ThreeDPaper /> (MIT, Meng To / Design+Code).
+   https://threeui.com/source-code/3d-paper.json
+
+   The upstream component ships as an <iframe srcDoc> wrapping a 630KB
+   self-contained document with Three.js r149 inlined. That works there
+   because the iframe isolates its position:fixed, window.innerWidth,
+   global html/body styles and Google Fonts <link> from the host page.
+   None of those survive in a registry component, so the scene is ported
+   out of the iframe and re-hosted here:
+
+     · one renderer / scene / PMREM env shared by all three sheets
+     · sizing driven by the container's clientWidth, never window's
+     · pointer events bound to the container, never window
+     · cursor set on the container, never document.body
+     · canvas-drawn type, so no webfont is fetched
+
+   Three.js r149 → r184 breakages that land on this component's shader
+   injection, all fixed below:
+     · sRGBEncoding / outputEncoding removed  → colorSpace / outputColorSpace
+     · #include <output_fragment> renamed     → #include <opaque_fragment>
+     · geometry.normal / geometry.viewDir     → geometryNormal / geometryViewDir
+   ───────────────────────────────────────────────────────────────────────── */
+
+export type SheetContent = {
+  /** small line above the award title */
+  kicker: string
+  date: string
+  /** the award title, set large */
+  title: string
+  /** credited people, under the title */
+  names: string[]
+  /** citation paragraph in the lower half */
+  body: string
+  /** wordmark bottom-left */
+  mark: string
+  markSuffix: string
+  /** certificate line above the citation */
+  badge: string
+  /** short label set rotated down the right edge */
+  tag: string
+}
+
+/* texture resolution per sheet. the upstream single-sheet hero used
+   1400x1932; three of those is ~32MB of GPU texture, which is a lot to
+   ask of a card sitting in a gallery grid, so the same 0.7246 proportion
+   is kept at a smaller size */
+const TW = 1100
+const TH = 1518
+
+/* sheet geometry, in world units — unchanged from upstream */
+const SW = 2.3
+const SH = 2.72
+
+const clamp = (v: number, a: number, b: number) => (v < a ? a : v > b ? b : v)
+const rng = (s: number) => () => {
+  s = (s * 1103515245 + 12345) & 0x7fffffff
+  return (s >>> 8) / 8388608
+}
+
+const FONT_STACK = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'
+
+/* ── canvas helpers (upstream, unchanged) ───────────────────────────── */
+
+function rr(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number
+) {
+  ctx.beginPath()
+  ctx.moveTo(x + r, y)
+  ctx.arcTo(x + w, y, x + w, y + h, r)
+  ctx.arcTo(x + w, y + h, x, y + h, r)
+  ctx.arcTo(x, y + h, x, y, r)
+  ctx.arcTo(x, y, x + w, y, r)
+  ctx.closePath()
+}
+
+function wrapL(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  maxW: number,
+  lh: number
+) {
+  const words = text.split(" ")
+  let line = ""
+  let yy = y
+  for (const w of words) {
+    const t = line ? line + " " + w : w
+    if (ctx.measureText(t).width > maxW && line) {
+      ctx.fillText(line, x, yy)
+      line = w
+      yy += lh
+    } else line = t
+  }
+  if (line) ctx.fillText(line, x, yy)
+  return yy + lh
+}
+
+/** procedural signature — deterministic per seed */
+function signature(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  s: number,
+  seed: number,
+  color: string
+) {
+  ctx.save()
+  ctx.translate(x, y)
+  ctx.scale(s, s)
+  ctx.strokeStyle = color
+  ctx.lineWidth = 2.2
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  const rnd = rng(seed * 7919 + 13)
+  ctx.beginPath()
+  ctx.moveTo(0, 15)
+  ctx.bezierCurveTo(-3 + rnd() * 4, -7, 9, -20 - rnd() * 6, 15, -5)
+  ctx.bezierCurveTo(18, 7, 7, 15, 9, 4)
+  let px = 9
+  let py = 4
+  const n = 4 + Math.floor(rnd() * 3)
+  for (let i = 0; i < n; i++) {
+    const step = 9 + rnd() * 11
+    const nx = px + step
+    const ny = 4 - (i % 2 ? -1 : 1) * (4 + rnd() * 13)
+    ctx.bezierCurveTo(
+      px + step * 0.35,
+      py - 9 - rnd() * 10,
+      nx - step * 0.35,
+      ny + 7 + rnd() * 8,
+      nx,
+      ny
+    )
+    px = nx
+    py = ny
+  }
+  ctx.bezierCurveTo(px + 9, py - 13, px + 21, py + 11, px + 29, py - 3)
+  ctx.stroke()
+  ctx.beginPath()
+  ctx.lineWidth = 1.4
+  ctx.moveTo(-5, 19)
+  ctx.quadraticCurveTo(px * 0.55, 24 + rnd() * 5, px + 25, 12 + rnd() * 4)
+  ctx.stroke()
+  ctx.restore()
+}
+
+/**
+ * Draw a headline, stepping the size down only if it would otherwise run
+ * past the sheet's inner border. Upstream hard-coded 106px/110px because it
+ * shipped with one fixed string; card copy is data here, so a long kicker
+ * would print straight off the edge of the paper.
+ */
+function fitText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  maxW: number,
+  weight: string,
+  size: number
+) {
+  let s = size
+  ctx.font = weight + " " + s + "px " + FONT_STACK
+  while (s > 44 && ctx.measureText(text).width > maxW) {
+    s -= 2
+    ctx.font = weight + " " + s + "px " + FONT_STACK
+  }
+  ctx.fillText(text, x, y)
+}
+
+/** the certificate artwork, authored on a 1200x1656 grid then scaled up */
+function drawGlass(ctx: CanvasRenderingContext2D, c: SheetContent, seed: number) {
+  ctx.scale(TW / 1200, TH / 1656)
+
+  ctx.fillStyle = "rgba(255,255,255,.030)"
+  ctx.fillRect(0, 0, 1200, 1656)
+
+  // a whisper of frost behind the headline so it holds over the type below
+  const fr = ctx.createLinearGradient(0, 240, 0, 880)
+  fr.addColorStop(0, "rgba(255,255,255,0)")
+  fr.addColorStop(0.26, "rgba(255,255,255,.060)")
+  fr.addColorStop(0.74, "rgba(255,255,255,.060)")
+  fr.addColorStop(1, "rgba(255,255,255,0)")
+  ctx.fillStyle = fr
+  ctx.fillRect(40, 240, 1120, 640)
+
+  ctx.strokeStyle = "rgba(255,255,255,.34)"
+  ctx.lineWidth = 2
+  rr(ctx, 20, 20, 1160, 1616, 14)
+  ctx.stroke()
+  ctx.strokeStyle = "rgba(255,255,255,.12)"
+  ctx.lineWidth = 1
+  rr(ctx, 36, 36, 1128, 1584, 10)
+  ctx.stroke()
+
+  const M = 74
+  ctx.fillStyle = "#ffffff"
+  ctx.font = "700 104px " + FONT_STACK
+  ctx.fillText("z.", M, 190)
+
+  // the inner border sits at x=36..1164, so mirror the left margin on the right
+  const HEAD_W = 1200 - M * 2
+  ctx.fillStyle = "rgba(255,255,255,.52)"
+  fitText(ctx, c.kicker, M, 392, HEAD_W, "500", 106)
+  fitText(ctx, c.date, M, 518, HEAD_W, "500", 106)
+  ctx.fillStyle = "#ffffff"
+  fitText(ctx, c.title, M, 664, HEAD_W, "600", 110)
+
+  ctx.font = "600 34px " + FONT_STACK
+  ctx.fillStyle = "rgba(255,255,255,.90)"
+  c.names.forEach((s, i) => ctx.fillText(s, M + 4, 752 + i * 45))
+
+  const px = 592
+  const py = 1158
+  ctx.font = "700 24px " + FONT_STACK
+  ctx.fillStyle = "rgba(255,255,255,.92)"
+  ctx.fillText(c.badge + ".", px, py)
+  ctx.font = "500 22px " + FONT_STACK
+  ctx.fillStyle = "rgba(255,255,255,.68)"
+  const endY = wrapL(ctx, c.body, px, py + 36, 296, 28)
+  ;[0, 1, 2].forEach((i) =>
+    signature(ctx, px + 6 + i * 100, endY + 24, 0.86, i * 5 + 3 + seed * 11, "rgba(255,255,255,.62)")
+  )
+
+  ctx.save()
+  ctx.translate(1200 - M - 24, 1236)
+  ctx.rotate(Math.PI / 2)
+  ctx.font = "500 23px " + FONT_STACK
+  ctx.fillStyle = "rgba(255,255,255,.62)"
+  ctx.fillText("—", 0, 0)
+  ctx.fillText(c.tag, 48, 0)
+  ctx.restore()
+
+  ctx.font = "700 34px " + FONT_STACK
+  ctx.fillStyle = "#ffffff"
+  ctx.fillText(c.mark, M, 1516)
+  const w = ctx.measureText(c.mark).width
+  ctx.font = "500 34px " + FONT_STACK
+  ctx.fillStyle = "rgba(255,255,255,.62)"
+  ctx.fillText(c.markSuffix, M + w, 1516)
+}
+
+function makeCertTexture(c: SheetContent, seed: number) {
+  const cv = document.createElement("canvas")
+  cv.width = TW
+  cv.height = TH
+  const ctx = cv.getContext("2d")
+  if (!ctx) return null
+  ctx.clearRect(0, 0, TW, TH)
+  ctx.save()
+  rr(ctx, 0, 0, TW, TH, 30)
+  ctx.clip()
+  drawGlass(ctx, c, seed)
+  ctx.restore()
+  const t = new THREE.CanvasTexture(cv)
+  // r152+: encoding was replaced by colorSpace
+  t.colorSpace = THREE.SRGBColorSpace
+  t.anisotropy = 8
+  t.needsUpdate = true
+  return t
+}
+
+/* ── the bend, verbatim from upstream ───────────────────────────────────
+   paper conserves arc length, so the sheet is built by integrating the
+   bend angle rather than displacing Z — that is what makes the silhouette
+   genuinely pull in where the sheet turns away from the camera */
+const WAVE = `
+uniform float uTime, uAmp, uFlutter, uPhase, uFreq, uTwist;
+uniform vec2  uSize;
+
+float sAmp(float u, float v){ return uAmp*(0.10 + pow(u,1.35))*(0.50 + 0.64*v); }
+float sAmpV(float u){        return uAmp*(0.10 + pow(u,1.35))*0.64; }
+
+float sTheta(float u, float v){
+  float a  = sAmp(u,v);
+  float ph = uFreq*u + uTwist*v + uTime*0.40 + uPhase;
+  return a*sin(ph) + uFlutter*a*0.60*sin(ph*2.35 + uTime*2.0);
+}
+float sThetaV(float u, float v){
+  float a  = sAmp(u,v), da = sAmpV(u);
+  float ph = uFreq*u + uTwist*v + uTime*0.40 + uPhase;
+  float f  = ph*2.35 + uTime*2.0;
+  return da*sin(ph) + a*cos(ph)*uTwist
+       + uFlutter*0.60*(da*sin(f) + a*cos(f)*uTwist*2.35);
+}
+float sYoff(float u, float v){
+  float w = 1.0 - 0.55*v;
+  return 0.021*uSize.y*sin(2.05*u + uTime*0.47 + uPhase)
+       + 0.013*uSize.y*sin(3.35*u - 1.55*v + uTime*0.63 + uPhase)*w;
+}
+float sYdU(float u, float v){
+  float w = 1.0 - 0.55*v;
+  return 0.0431*uSize.y*cos(2.05*u + uTime*0.47 + uPhase)
+       + 0.0436*uSize.y*cos(3.35*u - 1.55*v + uTime*0.63 + uPhase)*w;
+}
+float sYdV(float u, float v){
+  float ph = 3.35*u - 1.55*v + uTime*0.63 + uPhase;
+  return 0.013*uSize.y*(-1.55*cos(ph)*(1.0-0.55*v) - 0.55*sin(ph));
+}
+
+void sheetPoint(vec2 q, out vec3 P, out vec3 NN){
+  float u = q.x, v = q.y;
+  float x=0.0, z=0.0, xe=0.0, ze=0.0, dxv=0.0, dzv=0.0, dxe=0.0, dze=0.0;
+  const int NS = 20;
+  float h = 1.0/float(NS);
+  for(int i=0;i<NS;i++){
+    float uu = (float(i)+0.5)*h;
+    float w  = clamp((u-(uu-0.5*h))/h, 0.0, 1.0);
+    float th = sTheta(uu,v);
+    float dt = sThetaV(uu,v);
+    float c = cos(th), sn = sin(th);
+    xe += c*h;          ze += sn*h;
+    dxe += -sn*dt*h;    dze +=  c*dt*h;
+    x   += c*h*w;       z   += sn*h*w;
+    dxv += -sn*dt*h*w;  dzv +=  c*dt*h*w;
+  }
+  float W = uSize.x, H = uSize.y;
+  float th0 = sTheta(u,v);
+  P = vec3((x - xe*0.5)*W, (v-0.5)*H + sYoff(u,v), (z - ze*0.5)*W);
+  vec3 Tu = vec3(W*cos(th0), sYdU(u,v), W*sin(th0));
+  vec3 Tv = vec3((dxv - dxe*0.5)*W, H + sYdV(u,v), (dzv - dze*0.5)*W);
+  NN = normalize(cross(Tu, Tv));
+}`
+
+/** the studio-light environment, drawn rather than loaded */
+function envTexture() {
+  const w = 1024
+  const h = 512
+  const c = document.createElement("canvas")
+  c.width = w
+  c.height = h
+  const x = c.getContext("2d")!
+  const g = x.createLinearGradient(0, 0, 0, h)
+  g.addColorStop(0, "#3a3d47")
+  g.addColorStop(0.46, "#171820")
+  g.addColorStop(1, "#08080a")
+  x.fillStyle = g
+  x.fillRect(0, 0, w, h)
+  const blob = (cx: number, cy: number, rx: number, ry: number, col: string, a: string) => {
+    const rg = x.createRadialGradient(cx, cy, 0, cx, cy, Math.max(rx, ry))
+    rg.addColorStop(0, col.replace("A", a))
+    rg.addColorStop(1, col.replace("A", "0"))
+    x.save()
+    x.translate(cx, cy)
+    x.scale(1, ry / rx)
+    x.translate(-cx, -cy)
+    x.fillStyle = rg
+    x.beginPath()
+    x.arc(cx, cy, rx, 0, 7)
+    x.fill()
+    x.restore()
+  }
+  blob(w * 0.3, h * 0.24, 330, 240, "rgba(255,252,246,A)", "1")
+  blob(w * 0.74, h * 0.34, 240, 200, "rgba(150,175,235,A)", ".42")
+  blob(w * 0.52, h * 0.86, 420, 190, "rgba(255,170,120,A)", ".10")
+  const t = new THREE.CanvasTexture(c)
+  t.mapping = THREE.EquirectangularReflectionMapping
+  t.colorSpace = THREE.SRGBColorSpace
+  return t
+}
+
+type Sheet = {
+  group: THREE.Group
+  mat: THREE.MeshPhysicalMaterial
+  uni: Record<string, { value: unknown }>
+  baseX: number
+  dragYaw: number
+  dragPitch: number
+  velYaw: number
+  velPitch: number
+  prevYaw: number
+  prevPitch: number
+  release: number
+  quad: [number, number][] | null
+  hover: number
+  hoverTarget: number
+}
+
+export function PaperSheets({ cards }: { cards: SheetContent[] }) {
+  const hostRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const host = hostRef.current
+    if (!host) return
+
+    const canvas = document.createElement("canvas")
+    canvas.className = "pg-gl"
+    host.appendChild(canvas)
+
+    const REDUCED = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+    let renderer: THREE.WebGLRenderer
+    try {
+      renderer = new THREE.WebGLRenderer({
+        canvas,
+        antialias: true,
+        alpha: true,
+        powerPreference: "high-performance",
+      })
+    } catch {
+      // no WebGL — the DOM fallback underneath stays visible
+      canvas.remove()
+      return
+    }
+    // r152+: outputEncoding was replaced by outputColorSpace
+    renderer.outputColorSpace = THREE.SRGBColorSpace
+    renderer.toneMapping = THREE.NoToneMapping
+
+    const scene = new THREE.Scene()
+    const camera = new THREE.PerspectiveCamera(24, 1, 0.1, 100)
+    camera.position.set(0, 0, 8.2)
+
+    const pmrem = new THREE.PMREMGenerator(renderer)
+    pmrem.compileEquirectangularShader()
+    const envSrc = envTexture()
+    const envRT = pmrem.fromEquirectangular(envSrc)
+    scene.environment = envRT.texture
+    envSrc.dispose()
+
+    const key = new THREE.DirectionalLight(0xfff6ec, 1.42)
+    key.position.set(-3.3, 2.1, 2.0)
+    const fill = new THREE.DirectionalLight(0x9fb6ff, 0.13)
+    fill.position.set(3.6, -1.8, 1.6)
+    const rim = new THREE.DirectionalLight(0xffffff, 0.1)
+    rim.position.set(1.6, 1.2, -2.6)
+    scene.add(key, fill, rim, new THREE.AmbientLight(0xffffff, 0.16))
+
+    const touchLight = new THREE.PointLight(0xdfe8ff, 0, 7.5, 1.35)
+    touchLight.position.set(0, 0, 1.7)
+    scene.add(touchLight)
+
+    /* one geometry, shared by all three sheets */
+    const geo = new THREE.PlaneGeometry(SW, SH, 72, 96)
+
+    const haloTex = (() => {
+      const s = 256
+      const c = document.createElement("canvas")
+      c.width = c.height = s
+      const x = c.getContext("2d")!
+      const g = x.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2)
+      g.addColorStop(0, "rgba(0,0,0,.55)")
+      g.addColorStop(0.45, "rgba(0,0,0,.28)")
+      g.addColorStop(1, "rgba(0,0,0,0)")
+      x.fillStyle = g
+      x.fillRect(0, 0, s, s)
+      const t = new THREE.CanvasTexture(c)
+      t.colorSpace = THREE.SRGBColorSpace
+      return t
+    })()
+
+    /* the rig holds the three sheets so the whole row scales as one */
+    const rig = new THREE.Group()
+    scene.add(rig)
+
+    const GAP = 0.42
+    const PITCH = SW + GAP
+    const sheets: Sheet[] = []
+    const textures: THREE.Texture[] = []
+    const halos: THREE.Mesh[] = []
+
+    cards.forEach((card, i) => {
+      const tex = makeCertTexture(card, i)
+      if (tex) textures.push(tex)
+
+      const uni: Record<string, { value: unknown }> = {
+        uTime: { value: 0 },
+        uAmp: { value: 1.18 - i * 0.08 },
+        uFreq: { value: 4.7 },
+        uTwist: { value: 1.3 },
+        uSize: { value: new THREE.Vector2(SW, SH) },
+        uFlutter: { value: 0 },
+        // each sheet reads the same field at a different point in it, so
+        // the three never breathe in lockstep
+        uPhase: { value: i * 2.1 },
+        uRim: { value: 0.62 },
+        uRimA: { value: 0.88 },
+        uSpecA: { value: 0.14 },
+        uRimCol: { value: new THREE.Color(0xeaf2ff) },
+      }
+
+      const mat = new THREE.MeshPhysicalMaterial({
+        map: tex ?? undefined,
+        color: new THREE.Color(0xc4d2e8),
+        side: THREE.DoubleSide,
+        metalness: 0.0,
+        roughness: 0.06,
+        clearcoat: 1.0,
+        clearcoatRoughness: 0.03,
+        iridescence: 0.1,
+        iridescenceIOR: 1.35,
+        iridescenceThicknessRange: [120, 420],
+        envMapIntensity: 1.15,
+        specularIntensity: 1.0,
+        ior: 1.5,
+        transparent: true,
+        alphaTest: 0.012,
+        opacity: 1,
+      })
+
+      mat.onBeforeCompile = (sh) => {
+        Object.assign(sh.uniforms, uni)
+        sh.vertexShader = sh.vertexShader
+          .replace("#include <common>", "#include <common>\n" + WAVE)
+          .replace(
+            "#include <beginnormal_vertex>",
+            "vec3 sheetP; vec3 objectNormal;\n" +
+              "sheetPoint(uv, sheetP, objectNormal);\n" +
+              "#ifdef USE_TANGENT\n  vec3 objectTangent = vec3( tangent.xyz );\n#endif"
+          )
+          .replace("#include <begin_vertex>", "vec3 transformed = sheetP;")
+
+        sh.fragmentShader = sh.fragmentShader
+          .replace(
+            "#include <common>",
+            "#include <common>\nuniform float uRim, uRimA, uSpecA;\nuniform vec3 uRimCol;"
+          )
+          // judge the cut against the artwork's own alpha, not alpha*opacity,
+          // so the intro fade does not eat the sheet
+          .replace(
+            "#include <alphatest_fragment>",
+            "if ( diffuseColor.a / max(opacity,1e-4) < alphaTest ) discard;"
+          )
+          // r154 renamed output_fragment; r155 renamed the geometry struct
+          // members to the flat geometryNormal / geometryViewDir locals that
+          // lights_fragment_begin declares just above this chunk
+          .replace(
+            "#include <opaque_fragment>",
+            "float fres = pow(1.0 - clamp(abs(dot(geometryNormal, geometryViewDir)),0.0,1.0), 3.2);\n" +
+              "outgoingLight += fres * uRim * uRimCol;\n" +
+              "float baseA = diffuseColor.a / max(opacity, 1e-4);\n" +
+              "float outA  = clamp(baseA + fres*uRimA + uSpecA*dot(outgoingLight, vec3(0.3333)), 0.0, 1.0) * opacity;\n" +
+              "gl_FragColor = vec4( outgoingLight, outA );"
+          )
+      }
+
+      const group = new THREE.Group()
+      group.add(new THREE.Mesh(geo, mat))
+
+      // a faint dark cloud so each sheet sits clear of the wordmark behind
+      const halo = new THREE.Mesh(
+        new THREE.PlaneGeometry(3.2, 4.1),
+        new THREE.MeshBasicMaterial({
+          map: haloTex,
+          transparent: true,
+          depthWrite: false,
+          opacity: 0.3,
+        })
+      )
+      halo.position.z = -0.62
+      group.add(halo)
+      halos.push(halo)
+
+      const baseX = (i - (cards.length - 1) / 2) * PITCH
+      group.position.x = baseX
+      rig.add(group)
+
+      sheets.push({
+        group,
+        mat,
+        uni,
+        baseX,
+        dragYaw: 0,
+        dragPitch: 0,
+        velYaw: 0,
+        velPitch: 0,
+        prevYaw: 0,
+        prevPitch: 0,
+        release: 0,
+        quad: null,
+        hover: 0,
+        hoverTarget: 0,
+      })
+    })
+
+    /* ── layout: fit the whole row inside the container ──────────────── */
+    let vw = 0
+    let vh = 0
+
+    function resize() {
+      vw = host!.clientWidth
+      vh = host!.clientHeight
+      if (!vw || !vh) return
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
+      renderer.setSize(vw, vh, false)
+      camera.aspect = vw / vh
+      camera.updateProjectionMatrix()
+
+      const visH = 2 * camera.position.z * Math.tan(THREE.MathUtils.degToRad(camera.fov) / 2)
+      const visW = visH * camera.aspect
+      const rigW = cards.length * SW + (cards.length - 1) * GAP
+      // the row is the constraint on wide screens, the sheet height on tall ones
+      const s = Math.min((visW * 0.92) / rigW, (visH * 0.74) / SH)
+      rig.scale.setScalar(s)
+    }
+
+    const ro = new ResizeObserver(resize)
+    ro.observe(host)
+    resize()
+
+    /* ── pointer, bound to the container rather than the window ──────── */
+    const _v = new THREE.Vector3()
+
+    function cornerPoint(sheet: Sheet, qx: number, qy: number) {
+      const t = sheet.uni.uTime.value as number
+      const ph = sheet.uni.uPhase.value as number
+      const A = sheet.uni.uAmp.value as number
+      const F = sheet.uni.uFreq.value as number
+      const TWs = sheet.uni.uTwist.value as number
+      const u = qx
+      const v = qy
+      const theta = (uu: number) =>
+        A *
+        (0.1 + Math.pow(uu, 1.35)) *
+        (0.5 + 0.64 * v) *
+        Math.sin(F * uu + TWs * v + t * 0.4 + ph)
+      let x = 0
+      let z = 0
+      let xe = 0
+      let ze = 0
+      const N = 20
+      const h = 1 / N
+      for (let i = 0; i < N; i++) {
+        const uu = (i + 0.5) * h
+        const w = clamp((u - (uu - 0.5 * h)) / h, 0, 1)
+        const th = theta(uu)
+        const c = Math.cos(th)
+        const s = Math.sin(th)
+        xe += c * h
+        ze += s * h
+        x += c * h * w
+        z += s * h * w
+      }
+      const yo =
+        0.021 * SH * Math.sin(2.05 * u + t * 0.47 + ph) +
+        0.013 * SH * Math.sin(3.35 * u - 1.55 * v + t * 0.63 + ph) * (1 - 0.55 * v)
+      return _v.set((x - xe * 0.5) * SW, (v - 0.5) * SH + yo, (z - ze * 0.5) * SW)
+    }
+
+    function buildQuad(sheet: Sheet) {
+      const pts: [number, number][] = []
+      for (const [u, v] of [
+        [0, 1],
+        [1, 1],
+        [1, 0],
+        [0, 0],
+      ]) {
+        cornerPoint(sheet, u, v).applyMatrix4(sheet.group.matrixWorld).project(camera)
+        pts.push([(_v.x * 0.5 + 0.5) * vw, (-_v.y * 0.5 + 0.5) * vh])
+      }
+      const cx = (pts[0][0] + pts[1][0] + pts[2][0] + pts[3][0]) / 4
+      const cy = (pts[0][1] + pts[1][1] + pts[2][1] + pts[3][1]) / 4
+      sheet.quad = pts.map(([x, y]) => [cx + (x - cx) * 1.07, cy + (y - cy) * 1.07])
+    }
+
+    function inQuad(sheet: Sheet, px: number, py: number) {
+      const quad = sheet.quad
+      if (!quad) return false
+      let sign = 0
+      for (let i = 0; i < 4; i++) {
+        const [ax, ay] = quad[i]
+        const [bx, by] = quad[(i + 1) % 4]
+        const c = (bx - ax) * (py - ay) - (by - ay) * (px - ax)
+        if (c !== 0) {
+          const s = c > 0 ? 1 : -1
+          if (sign === 0) sign = s
+          else if (s !== sign) return false
+        }
+      }
+      return true
+    }
+
+    /** topmost sheet under the pointer — nearest camera wins on overlap */
+    function pick(px: number, py: number): Sheet | null {
+      let best: Sheet | null = null
+      let bestZ = -Infinity
+      for (const s of sheets) {
+        if (!inQuad(s, px, py)) continue
+        const z = s.group.position.z
+        if (z > bestZ) {
+          bestZ = z
+          best = s
+        }
+      }
+      return best
+    }
+
+    const mouse = { x: 0, y: 0, tx: 0, ty: 0 }
+    let dragging: Sheet | null = null
+    let lastPX = 0
+    let lastPY = 0
+    let cursorNow = ""
+
+    const local = (e: PointerEvent) => {
+      const r = host!.getBoundingClientRect()
+      return { x: e.clientX - r.left, y: e.clientY - r.top }
+    }
+
+    const onMove = (e: PointerEvent) => {
+      const p = local(e)
+      mouse.tx = (p.x / Math.max(vw, 1) - 0.5) * 2
+      mouse.ty = (p.y / Math.max(vh, 1) - 0.5) * 2
+      if (dragging) {
+        const dx = p.x - lastPX
+        const dy = p.y - lastPY
+        lastPX = p.x
+        lastPY = p.y
+        dragging.dragYaw += dx * 0.006
+        dragging.dragPitch = clamp(dragging.dragPitch - dy * 0.0045, -0.6, 0.6)
+        return
+      }
+      const hit = pick(p.x, p.y)
+      for (const s of sheets) s.hoverTarget = s === hit ? 1 : 0
+    }
+
+    const onDown = (e: PointerEvent) => {
+      const p = local(e)
+      const hit = pick(p.x, p.y)
+      if (!hit) return
+      dragging = hit
+      lastPX = p.x
+      lastPY = p.y
+      hit.velYaw = hit.velPitch = 0
+      hit.prevYaw = hit.dragYaw
+      hit.prevPitch = hit.dragPitch
+      host!.setPointerCapture?.(e.pointerId)
+    }
+
+    const onUp = (e: PointerEvent) => {
+      if (dragging) {
+        dragging.release = 0.6
+        dragging = null
+      }
+      host!.releasePointerCapture?.(e.pointerId)
+    }
+
+    const onLeave = () => {
+      for (const s of sheets) s.hoverTarget = 0
+    }
+
+    host.addEventListener("pointermove", onMove, { passive: true })
+    host.addEventListener("pointerdown", onDown)
+    host.addEventListener("pointerup", onUp)
+    host.addEventListener("pointercancel", onUp)
+    host.addEventListener("pointerleave", onLeave)
+
+    /* ── loop, paused when offscreen or the tab is hidden ─────────────── */
+    const clock = new THREE.Clock()
+    const lightPos = new THREE.Vector3()
+    let intro = 0
+    let raf = 0
+    let running = false
+    let onScreen = true
+    let pageVisible = typeof document === "undefined" || !document.hidden
+
+    function frame() {
+      raf = requestAnimationFrame(frame)
+      const dt = Math.min(clock.getDelta(), 0.05)
+      const t = clock.elapsedTime
+
+      intro += (1 - intro) * Math.min(1, dt * 1.9)
+
+      mouse.x += (mouse.tx - mouse.x) * Math.min(1, dt * 3.0)
+      mouse.y += (mouse.ty - mouse.y) * Math.min(1, dt * 3.0)
+      const idle = REDUCED ? 0 : 1
+      const rise = 1 - intro
+
+      let anyHover = 0
+      sheets.forEach((s, i) => {
+        s.uni.uTime.value = REDUCED ? 2.4 : t
+        s.mat.opacity = intro
+        const haloMat = halos[i].material as THREE.MeshBasicMaterial
+        haloMat.opacity = intro * 0.3
+
+        if (dragging === s) {
+          const k = Math.min(1, dt * 14)
+          s.velYaw += ((s.dragYaw - s.prevYaw) / Math.max(dt, 1e-3) - s.velYaw) * k
+          s.velPitch += ((s.dragPitch - s.prevPitch) / Math.max(dt, 1e-3) - s.velPitch) * k
+          s.velYaw = clamp(s.velYaw, -7, 7)
+          s.velPitch = clamp(s.velPitch, -4, 4)
+        } else {
+          s.dragYaw += s.velYaw * dt
+          s.dragPitch = clamp(s.dragPitch + s.velPitch * dt, -0.6, 0.6)
+          const decay = Math.pow(0.018, dt)
+          s.velYaw *= decay
+          s.velPitch *= decay
+          s.release = Math.max(0, s.release - dt)
+          if (s.release <= 0) {
+            // settle on the nearest whole turn rather than unwinding a spin
+            const home = Math.round(s.dragYaw / (Math.PI * 2)) * Math.PI * 2
+            const k = Math.min(1, dt * 0.55)
+            s.dragYaw += (home - s.dragYaw) * k
+            s.dragPitch -= s.dragPitch * k
+          }
+        }
+        s.prevYaw = s.dragYaw
+        s.prevPitch = s.dragPitch
+
+        s.hover += (s.hoverTarget - s.hover) * Math.min(1, dt * 4.5)
+        anyHover = Math.max(anyHover, s.hover)
+
+        const ph = i * 1.7
+        s.group.rotation.y = s.dragYaw + mouse.x * 0.16 + Math.sin(t * 0.23 + ph) * 0.045 * idle
+        s.group.rotation.x =
+          s.dragPitch - mouse.y * 0.11 + Math.sin(t * 0.19 + ph) * 0.026 * idle + rise * 0.28
+        s.group.rotation.z = Math.sin(t * 0.27 + ph) * 0.018 * idle
+        s.group.position.y = Math.sin(t * 0.36 + ph) * 0.06 * idle - rise * 0.7
+        s.group.position.x = s.baseX + Math.sin(t * 0.21 + ph) * 0.05 * idle
+        // hovered sheet lifts toward the camera so it wins the overlap
+        s.group.position.z += (s.hover * 0.36 - s.group.position.z) * Math.min(1, dt * 5)
+      })
+
+      rig.updateMatrixWorld(true)
+
+      touchLight.intensity = anyHover * 2.6 * intro
+      if (anyHover > 0.002) {
+        lightPos.set(mouse.tx, -mouse.ty, 0.5).unproject(camera).sub(camera.position).normalize()
+        touchLight.position
+          .copy(camera.position)
+          .addScaledVector(lightPos, (1.75 - camera.position.z) / lightPos.z)
+      }
+
+      for (const s of sheets) buildQuad(s)
+
+      const wantCursor = dragging ? "grabbing" : anyHover > 0.5 ? "grab" : ""
+      if (wantCursor !== cursorNow) {
+        cursorNow = wantCursor
+        host!.style.cursor = wantCursor
+      }
+
+      renderer.render(scene, camera)
+    }
+
+    function start() {
+      if (running) return
+      running = true
+      clock.getDelta()
+      raf = requestAnimationFrame(frame)
+    }
+    function stop() {
+      if (!running) return
+      running = false
+      cancelAnimationFrame(raf)
+    }
+    const sync = () => (onScreen && pageVisible ? start() : stop())
+
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        onScreen = entry?.isIntersecting ?? true
+        sync()
+      },
+      { rootMargin: "120px" }
+    )
+    io.observe(host)
+
+    const onVis = () => {
+      pageVisible = !document.hidden
+      sync()
+    }
+    document.addEventListener("visibilitychange", onVis)
+
+    // warm the shaders before the first visible frame so the sheets do not
+    // pop in half-compiled
+    renderer.compile(scene, camera)
+    host.dataset.ready = "true"
+    sync()
+
+    return () => {
+      stop()
+      io.disconnect()
+      ro.disconnect()
+      document.removeEventListener("visibilitychange", onVis)
+      host.removeEventListener("pointermove", onMove)
+      host.removeEventListener("pointerdown", onDown)
+      host.removeEventListener("pointerup", onUp)
+      host.removeEventListener("pointercancel", onUp)
+      host.removeEventListener("pointerleave", onLeave)
+      geo.dispose()
+      haloTex.dispose()
+      for (const t of textures) t.dispose()
+      for (const s of sheets) s.mat.dispose()
+      for (const h of halos) {
+        h.geometry.dispose()
+        ;(h.material as THREE.Material).dispose()
+      }
+      envRT.texture.dispose()
+      pmrem.dispose()
+      renderer.dispose()
+      canvas.remove()
+      delete host.dataset.ready
+    }
+  }, [cards])
+
+  return <div ref={hostRef} className="pg-stage" aria-hidden />
+}
diff --git a/content/registry/items.ts b/content/registry/items.ts
index b3c3bb5..08c2e36 100644
--- a/content/registry/items.ts
+++ b/content/registry/items.ts
@@ -1,6 +1,13 @@
 // AUTO-GENERATED by scripts/build-registry.ts — do not edit manually.
 // Run: npm run build:registry
 
+import { meta as animationsCardsAnimation } from "./animations/cards-animation/meta"
+import { meta as animationsScroll1Animation } from "./animations/scroll1-animation/meta"
+import { meta as animationsScroll2Animation } from "./animations/scroll2-animation/meta"
+import { meta as animationsScroll3Animation } from "./animations/scroll3-animation/meta"
+import { meta as animationsScroll4Animation } from "./animations/scroll4-animation/meta"
+import { meta as animationsScroll5Animation } from "./animations/scroll5-animation/meta"
+import { meta as animationsScroll6Animation } from "./animations/scroll6-animation/meta"
 import { meta as gridSectionsCompanionGrid } from "./grid-sections/companion-grid/meta"
 import { meta as gridSectionsFeatured1Grid } from "./grid-sections/featured1-grid/meta"
 import { meta as gridSectionsFeatured10Grid } from "./grid-sections/featured10-grid/meta"
@@ -13,6 +20,7 @@ import { meta as gridSectionsFeatured6Grid } from "./grid-sections/featured6-gri
 import { meta as gridSectionsFeatured7Grid } from "./grid-sections/featured7-grid/meta"
 import { meta as gridSectionsFeatured8Grid } from "./grid-sections/featured8-grid/meta"
 import { meta as gridSectionsFeatured9Grid } from "./grid-sections/featured9-grid/meta"
+import { meta as gridSectionsPaperGrid } from "./grid-sections/paper-grid/meta"
 import { meta as heroSectionsAirHero } from "./hero-sections/air-hero/meta"
 import { meta as heroSectionsAmeroHero } from "./hero-sections/amero-hero/meta"
 import { meta as heroSectionsAmindHero } from "./hero-sections/amind-hero/meta"
@@ -83,6 +91,13 @@ import { meta as unicornSectionVoidUnicorn } from "./unicorn-section/void-unicor
 import { meta as unicornSectionWalkingUnicorn } from "./unicorn-section/walking-unicorn/meta"
 
 export const registryItems = [
+  animationsCardsAnimation,
+  animationsScroll1Animation,
+  animationsScroll2Animation,
+  animationsScroll3Animation,
+  animationsScroll4Animation,
+  animationsScroll5Animation,
+  animationsScroll6Animation,
   gridSectionsCompanionGrid,
   gridSectionsFeatured1Grid,
   gridSectionsFeatured10Grid,
@@ -95,6 +110,7 @@ export const registryItems = [
   gridSectionsFeatured7Grid,
   gridSectionsFeatured8Grid,
   gridSectionsFeatured9Grid,
+  gridSectionsPaperGrid,
   heroSectionsAirHero,
   heroSectionsAmeroHero,
   heroSectionsAmindHero,
diff --git a/content/registry/loaders.ts b/content/registry/loaders.ts
index b4535db..30d09e3 100644
--- a/content/registry/loaders.ts
+++ b/content/registry/loaders.ts
@@ -11,6 +11,27 @@ export const registryLoaders: Record<
     demo: () => Promise<DemoModule>
   }
 > = {
+  "cards-animation": {
+    demo: () => import("./animations/cards-animation/demo"),
+  },
+  "scroll1-animation": {
+    demo: () => import("./animations/scroll1-animation/demo"),
+  },
+  "scroll2-animation": {
+    demo: () => import("./animations/scroll2-animation/demo"),
+  },
+  "scroll3-animation": {
+    demo: () => import("./animations/scroll3-animation/demo"),
+  },
+  "scroll4-animation": {
+    demo: () => import("./animations/scroll4-animation/demo"),
+  },
+  "scroll5-animation": {
+    demo: () => import("./animations/scroll5-animation/demo"),
+  },
+  "scroll6-animation": {
+    demo: () => import("./animations/scroll6-animation/demo"),
+  },
   "companion-grid": {
     demo: () => import("./grid-sections/companion-grid/demo"),
   },
@@ -47,6 +68,9 @@ export const registryLoaders: Record<
   "featured9-grid": {
     demo: () => import("./grid-sections/featured9-grid/demo"),
   },
+  "paper-grid": {
+    demo: () => import("./grid-sections/paper-grid/demo"),
+  },
   "air-hero": {
     demo: () => import("./hero-sections/air-hero/demo"),
   },
diff --git a/content/registry/published.ts b/content/registry/published.ts
index 7c9f913..eeddf89 100644
--- a/content/registry/published.ts
+++ b/content/registry/published.ts
@@ -82,4 +82,12 @@ export const publishedDates: Record<string, string> = {
   "featured11-grid": "2026-08-27T17:44:49.898Z",
   "companion-grid": "2026-08-31T10:08:32.945Z",
   "zaveda-hero": "2026-09-01T19:37:28.172Z",
+  "paper-grid": "2026-09-03T06:41:20.831Z",
+  "cards-animation": "2026-09-04T16:35:03.316Z",
+  "scroll1-animation": "2026-09-04T16:35:03.317Z",
+  "scroll2-animation": "2026-09-04T16:35:03.317Z",
+  "scroll3-animation": "2026-09-04T16:35:03.317Z",
+  "scroll4-animation": "2026-09-04T16:35:03.317Z",
+  "scroll5-animation": "2026-09-04T16:35:03.317Z",
+  "scroll6-animation": "2026-09-04T16:35:03.317Z",
 }
diff --git a/content/registry/registry.json b/content/registry/registry.json
index 14f26da..e5fef2c 100644
--- a/content/registry/registry.json
+++ b/content/registry/registry.json
@@ -3,6 +3,146 @@
   "name": "zepa",
   "homepage": "https://zepa.design",
   "items": [
+    {
+      "slug": "cards-animation",
+      "title": "Cards Animation",
+      "category": "animations",
+      "description": "Eighteen cards fly in from alternating sides and settle onto a giant wheel that scrolling turns. Mostly duotone monochrome with warm and cool accents; click a card to open its detail panel. Inspired by @deadrabbbbit.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scroll",
+        "carousel",
+        "wheel",
+        "cards",
+        "duotone",
+        "lightbox",
+        "light",
+        "interactive"
+      ],
+      "installUrl": "https://zepa.design/r/cards-animation.json"
+    },
+    {
+      "slug": "scroll1-animation",
+      "title": "Scroll 1 Animation",
+      "category": "animations",
+      "description": "A perspective wall of images rotated on the Y axis, each tile parked at its own depth and sweeping across the viewport as you scroll. Inspired by Codrops.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scrolltrigger",
+        "scroll",
+        "grid",
+        "3d",
+        "perspective",
+        "sweep",
+        "depth",
+        "dark"
+      ],
+      "installUrl": "https://zepa.design/r/scroll1-animation.json"
+    },
+    {
+      "slug": "scroll2-animation",
+      "title": "Scroll 2 Animation",
+      "category": "animations",
+      "description": "Tiles rise out of deep space, turning and dimming as they pass while the grid counter-rotates and scales beneath them. Inspired by Codrops.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scrolltrigger",
+        "scroll",
+        "grid",
+        "3d",
+        "perspective",
+        "rise",
+        "brightness",
+        "dark"
+      ],
+      "installUrl": "https://zepa.design/r/scroll2-animation.json"
+    },
+    {
+      "slug": "scroll3-animation",
+      "title": "Scroll 3 Animation",
+      "category": "animations",
+      "description": "The grid starts far away and unlit, then flattens and brightens as it rushes toward the camera — a flythrough that assembles itself on approach. Inspired by Codrops.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scrolltrigger",
+        "scroll",
+        "grid",
+        "3d",
+        "flythrough",
+        "depth",
+        "brightness",
+        "dark"
+      ],
+      "installUrl": "https://zepa.design/r/scroll3-animation.json"
+    },
+    {
+      "slug": "scroll4-animation",
+      "title": "Scroll 4 Animation",
+      "category": "animations",
+      "description": "A narrow column seen from its left edge, each tile hinging on its top edge and stepping toward the camera on a stagger — pages turning in sequence. Inspired by Codrops.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scrolltrigger",
+        "scroll",
+        "grid",
+        "3d",
+        "hinge",
+        "stagger",
+        "pages",
+        "dark"
+      ],
+      "installUrl": "https://zepa.design/r/scroll4-animation.json"
+    },
+    {
+      "slug": "scroll5-animation",
+      "title": "Scroll 5 Animation",
+      "category": "animations",
+      "description": "A gapless field laid almost flat. Even rows slide left and odd rows slide right, tearing the image apart along its own seams. Inspired by Codrops.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scrolltrigger",
+        "scroll",
+        "grid",
+        "3d",
+        "shear",
+        "rows",
+        "flat",
+        "dark"
+      ],
+      "installUrl": "https://zepa.design/r/scroll5-animation.json"
+    },
+    {
+      "slug": "scroll6-animation",
+      "title": "Scroll 6 Animation",
+      "category": "animations",
+      "description": "Tiles hinge from a pivot below themselves, swinging up while spinning a full turn on a stagger — a deck flipping itself into place. Inspired by Codrops.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "animation",
+        "gsap",
+        "scrolltrigger",
+        "scroll",
+        "grid",
+        "3d",
+        "flip",
+        "stagger",
+        "spin",
+        "dark"
+      ],
+      "installUrl": "https://zepa.design/r/scroll6-animation.json"
+    },
     {
       "slug": "companion-grid",
       "title": "Companion Grid",
@@ -245,6 +385,28 @@
       ],
       "installUrl": "https://zepa.design/r/featured9-grid.json"
     },
+    {
+      "slug": "paper-grid",
+      "title": "Paper Grid",
+      "category": "grid-sections",
+      "description": "Three translucent certificates printed on glass, hanging side by side and bending like real paper. Drag a sheet to turn it, hover to light it — all three share one WebGL context. Inspired by ThreeUI's ThreeDPaper.",
+      "github": "vij-sameerb5",
+      "tags": [
+        "grid",
+        "webgl",
+        "three",
+        "paper",
+        "glass",
+        "certificate",
+        "shader",
+        "drag",
+        "3d",
+        "dark",
+        "interactive",
+        "animated"
+      ],
+      "installUrl": "https://zepa.design/r/paper-grid.json"
+    },
     {
       "slug": "air-hero",
       "title": "Air Hero",
diff --git a/data/canary-map.json b/data/canary-map.json
index b4dd565..b2e9e7b 100644
--- a/data/canary-map.json
+++ b/data/canary-map.json
@@ -1,4 +1,11 @@
 {
+  "cards-animation": "311716c5acea",
+  "scroll1-animation": "be32606cd354",
+  "scroll2-animation": "5928e86b5456",
+  "scroll3-animation": "4b9033033442",
+  "scroll4-animation": "602570c51950",
+  "scroll5-animation": "668836c00479",
+  "scroll6-animation": "c3dc293e5ace",
   "companion-grid": "f4d9b3f5b7c2",
   "featured1-grid": "f614d6a39402",
   "featured10-grid": "e5d1fce58241",
@@ -11,6 +18,7 @@
   "featured7-grid": "879f40f6a7e1",
   "featured8-grid": "1449b64d4731",
   "featured9-grid": "a6c4da40f48e",
+  "paper-grid": "c548dffa26e3",
   "air-hero": "18233a94af99",
   "amero-hero": "d3f85f703262",
   "amind-hero": "4597c277ba23",
diff --git a/data/published-dates.json b/data/published-dates.json
index a3228d3..247fdb2 100644
--- a/data/published-dates.json
+++ b/data/published-dates.json
@@ -78,5 +78,13 @@
   "featured10-grid": "2026-08-27T17:44:49.898Z",
   "featured11-grid": "2026-08-27T17:44:49.898Z",
   "companion-grid": "2026-08-31T10:08:32.945Z",
-  "zaveda-hero": "2026-09-01T19:37:28.172Z"
+  "zaveda-hero": "2026-09-01T19:37:28.172Z",
+  "paper-grid": "2026-09-03T06:41:20.831Z",
+  "cards-animation": "2026-09-04T16:35:03.316Z",
+  "scroll1-animation": "2026-09-04T16:35:03.317Z",
+  "scroll2-animation": "2026-09-04T16:35:03.317Z",
+  "scroll3-animation": "2026-09-04T16:35:03.317Z",
+  "scroll4-animation": "2026-09-04T16:35:03.317Z",
+  "scroll5-animation": "2026-09-04T16:35:03.317Z",
+  "scroll6-animation": "2026-09-04T16:35:03.317Z"
 }
diff --git a/lib/registry/code-paths.ts b/lib/registry/code-paths.ts
index af87efc..e89afb3 100644
--- a/lib/registry/code-paths.ts
+++ b/lib/registry/code-paths.ts
@@ -2,6 +2,27 @@
 // Run: npm run build:registry
 
 export const codePaths: Record<string, string[]> = {
+  "cards-animation": [
+    "animations/cards-animation/demo.tsx",
+  ],
+  "scroll1-animation": [
+    "animations/scroll1-animation/demo.tsx",
+  ],
+  "scroll2-animation": [
+    "animations/scroll2-animation/demo.tsx",
+  ],
+  "scroll3-animation": [
+    "animations/scroll3-animation/demo.tsx",
+  ],
+  "scroll4-animation": [
+    "animations/scroll4-animation/demo.tsx",
+  ],
+  "scroll5-animation": [
+    "animations/scroll5-animation/demo.tsx",
+  ],
+  "scroll6-animation": [
+    "animations/scroll6-animation/demo.tsx",
+  ],
   "companion-grid": [
     "grid-sections/companion-grid/demo.tsx",
   ],
@@ -38,6 +59,10 @@ export const codePaths: Record<string, string[]> = {
   "featured9-grid": [
     "grid-sections/featured9-grid/demo.tsx",
   ],
+  "paper-grid": [
+    "grid-sections/paper-grid/demo.tsx",
+    "grid-sections/paper-grid/ui/paper-sheets.tsx",
+  ],
   "air-hero": [
     "hero-sections/air-hero/demo.tsx",
   ],
diff --git a/public/previews/animations/cards-animation/preview.mov b/public/previews/animations/cards-animation/preview.mov
new file mode 100644
index 0000000..1337ae4
Binary files /dev/null and b/public/previews/animations/cards-animation/preview.mov differ
diff --git a/public/previews/animations/scroll1-animation/preview.mov b/public/previews/animations/scroll1-animation/preview.mov
new file mode 100644
index 0000000..e3fcdd0
Binary files /dev/null and b/public/previews/animations/scroll1-animation/preview.mov differ
diff --git a/public/previews/animations/scroll2-animation/preview.mov b/public/previews/animations/scroll2-animation/preview.mov
new file mode 100644
index 0000000..cb0df83
Binary files /dev/null and b/public/previews/animations/scroll2-animation/preview.mov differ
diff --git a/public/previews/animations/scroll3-animation/preview.mov b/public/previews/animations/scroll3-animation/preview.mov
new file mode 100644
index 0000000..6478824
Binary files /dev/null and b/public/previews/animations/scroll3-animation/preview.mov differ
diff --git a/public/previews/animations/scroll4-animation/preview.mov b/public/previews/animations/scroll4-animation/preview.mov
new file mode 100644
index 0000000..7cea8d8
Binary files /dev/null and b/public/previews/animations/scroll4-animation/preview.mov differ
diff --git a/public/previews/animations/scroll5-animation/preview.mov b/public/previews/animations/scroll5-animation/preview.mov
new file mode 100644
index 0000000..7500ef1
Binary files /dev/null and b/public/previews/animations/scroll5-animation/preview.mov differ
diff --git a/public/previews/animations/scroll6-animation/preview.mov b/public/previews/animations/scroll6-animation/preview.mov
new file mode 100644
index 0000000..aadc52b
Binary files /dev/null and b/public/previews/animations/scroll6-animation/preview.mov differ
diff --git a/public/previews/grid-sections/paper-grid/preview.mov b/public/previews/grid-sections/paper-grid/preview.mov
new file mode 100644
index 0000000..c785cea
Binary files /dev/null and b/public/previews/grid-sections/paper-grid/preview.mov differ
diff --git a/public/r/cards-animation.json b/public/r/cards-animation.json
new file mode 100644
index 0000000..b9bc5a7
--- /dev/null
+++ b/public/r/cards-animation.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cards-animation",
+  "type": "registry:block",
+  "title": "Cards Animation",
+  "description": "Eighteen cards fly in from alternating sides and settle onto a giant wheel that scrolling turns. Mostly duotone monochrome with warm and cool accents; click a card to open its detail panel. Inspired by @deadrabbbbit.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — cards-animation\n * https://zepa.design/components/cards-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport gsap from \"gsap\"\n\n/* ─────────────────────────────────────────────\n   cards-animation — the deal-in carousel wheel\n\n   Eighteen cards fly in from alternating sides,\n   spinning and scaling down from four times their\n   size, then settle onto a giant wheel whose pivot\n   sits 200vh below the stage — so only the top arc\n   is ever on screen and the cards fan out like a\n   hand being dealt.\n\n   Scrolling turns the wheel. The component owns its\n   own scroll container (a tall track under a sticky\n   stage), so it reads its own scrollTop and never\n   touches window scroll or position:fixed.\n\n   Most cards are monochrome; a few are duotoned warm\n   or cool so the wheel reads as one object with two\n   accents rather than eighteen competing photos.\n\n   Click a card and it lifts out of the wheel to the\n   centre, drops every filter, and opens its detail\n   panel. Escape or the backdrop sends it back.\n\n   Deal-in choreography after a GSAP study by\n   @deadrabbbbit, itself inspired by the Hyundai site.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781877270/zepalogo1_bnzxuc.png\"\n\n/** tint: which cards break the monochrome — 2 warm, 2 cool per set of nine */\ntype Tint = \"mono\" | \"warm\" | \"cool\"\n\ntype Card = {\n  src: string\n  title: string\n  kind: string\n  body: string\n  tint: Tint\n}\n\nconst BASE: Card[] = [\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n    title: \"Selfie Hero\",\n    kind: \"Hero section\",\n    body: \"A hero that greets the visitor with their own reflection — camera-lit, permission-gated, and gracefully blank when the answer is no.\",\n    tint: \"mono\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n    title: \"Paper Grid\",\n    kind: \"Grid section\",\n    body: \"Three certificates printed on glass, bending like real paper. The curl is integrated along the sheet, so the silhouette pulls in where the page turns away.\",\n    tint: \"warm\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n    title: \"Zaveda Interface\",\n    kind: \"Hero section\",\n    body: \"A savings-app hero on soft lilac, with three phones fanned and a live earnings readout built from real digit wheels.\",\n    tint: \"mono\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n    title: \"Companion Grid\",\n    kind: \"Grid section\",\n    body: \"A train of polaroids clears away one at a time as you scroll, revealing the line underneath. Starts on the last card and ends on the first.\",\n    tint: \"cool\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n    title: \"Scrolldown Hero\",\n    kind: \"Hero section\",\n    body: \"Trading cards float up on buttery easing while the background marquee drifts sideways and speeds up with your scroll velocity.\",\n    tint: \"mono\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n    title: \"Wave Hero\",\n    kind: \"Hero section\",\n    body: \"A displacement field runs across the type so the headline reads as something seen through moving water rather than sitting on top of it.\",\n    tint: \"warm\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n    title: \"Osmos Hero\",\n    kind: \"Hero section\",\n    body: \"Soft bodies drift, meet and merge under a metaball threshold — no physics engine, just a distance field resolved per pixel.\",\n    tint: \"mono\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n    title: \"Drops Hero\",\n    kind: \"Hero section\",\n    body: \"An image trail that follows the cursor and thins out as it goes, each drop inheriting a little less of the last one's momentum.\",\n    tint: \"cool\",\n  },\n  {\n    src: \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n    title: \"Bluish Hero\",\n    kind: \"Hero section\",\n    body: \"A cold-lit landing surface where the gradient is doing the typography's job, and the copy simply stays out of its way.\",\n    tint: \"mono\",\n  },\n]\n\n/** served at the card's own aspect so the wheel is not fetching nine originals */\nconst fit = (u: string) =>\n  u.replace(\"/upload/\", \"/upload/c_fill,w_520,h_740,g_auto/\")\n\nconst CARDS: Card[] = [...BASE, ...BASE].map((c) => ({ ...c, src: fit(c.src) }))\n\n/** how far the wheel turns across the full scroll track */\nconst SPIN_DEGREES = 360\n\nexport default function CardsAnimation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const itemsRef = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState<number | null>(null)\n  /* the panel has to stay mounted while it animates out, so closing is a\n     state of its own rather than just clearing `open` */\n  const [closing, setClosing] = useState(false)\n  const closeTimer = useRef<number | null>(null)\n\n  const CLOSE_MS = 300\n\n  const openCard = useCallback((i: number) => {\n    if (closeTimer.current !== null) {\n      clearTimeout(closeTimer.current)\n      closeTimer.current = null\n    }\n    setClosing(false)\n    setOpen(i)\n  }, [])\n\n  const close = useCallback(() => {\n    if (closeTimer.current !== null) return // already on the way out\n    setClosing(true)\n    closeTimer.current = window.setTimeout(() => {\n      setOpen(null)\n      setClosing(false)\n      closeTimer.current = null\n    }, CLOSE_MS)\n  }, [])\n\n  // never leave a timer running past unmount\n  useEffect(\n    () => () => {\n      if (closeTimer.current !== null) clearTimeout(closeTimer.current)\n    },\n    []\n  )\n\n  /* ── entrance: the deal-in ─────────────────────────────────────────── */\n  useEffect(() => {\n    const root = rootRef.current\n    const itemsEl = itemsRef.current\n    if (!root || !itemsEl) return\n\n    /* context scopes every selector below to this root and gives us one\n       revert() that undoes each tween and inline style on unmount */\n    const ctx = gsap.context(() => {\n      const images = gsap.utils.toArray<HTMLElement>(\".ca-item\")\n      const imageSize = images.length\n      const degree = 360 / imageSize\n\n      gsap.set(itemsEl, { transformOrigin: \"center 200vh\" })\n\n      const timeline = gsap.timeline()\n\n      images.forEach((image, index) => {\n        const sign = Math.floor((index / 2) % 2) ? 1 : -1\n        const value = Math.floor((index + 4) / 4) * 4\n        const rotation = index > imageSize - 3 ? 0 : sign * value\n\n        gsap.set(image, { rotation, scale: 0.5 })\n\n        timeline.from(\n          image,\n          {\n            /* the original threw these off the window's edges; the stage's\n               own box is what a registry component may measure */\n            x: () =>\n              index % 2\n                ? root.clientWidth + image.clientWidth * 4\n                : -root.clientWidth - image.clientWidth * 4,\n            y: () => root.clientHeight - image.clientHeight,\n            rotation: index % 2 ? 200 : -200,\n            scale: 4,\n            opacity: 1,\n            ease: \"power4.out\",\n            duration: 1,\n            delay: 0.15 * Math.floor(index / 2),\n          },\n          0\n        )\n\n        timeline.to(image, { scale: 1, duration: 0 }, 0.15 * (imageSize / 2 - 1) + 1)\n\n        timeline.to(\n          image,\n          {\n            transformOrigin: \"center 200vh\",\n            rotation:\n              index > imageSize / 2 ? -degree * (imageSize - index) : index * degree,\n            duration: 1,\n            ease: \"power1.out\",\n          },\n          0.15 * (imageSize / 2 - 1) + 1\n        )\n      })\n\n      if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n        timeline.progress(1).pause()\n      }\n    }, root)\n\n    return () => ctx.revert()\n  }, [])\n\n  /* ── scroll turns the wheel ────────────────────────────────────────── */\n  useEffect(() => {\n    const root = rootRef.current\n    const itemsEl = itemsRef.current\n    if (!root || !itemsEl) return\n\n    let raf = 0\n    let cur = root.scrollTop\n\n    const tick = () => {\n      raf = requestAnimationFrame(tick)\n\n      /* the component's own scroll position, never the window's — a\n         registry component can be embedded anywhere and must not\n         assume it owns the page */\n      const target = root.scrollTop\n      cur += (target - cur) * 0.09 // lenis-style ease\n      if (Math.abs(target - cur) < 0.05) cur = target\n\n      const travel = root.scrollHeight - root.clientHeight\n      const p = travel > 0 ? Math.min(1, Math.max(0, cur / travel)) : 0\n      /* driven through gsap rather than the CSS rotate property, so the\n         wheel shares one transform (and one transform-origin) with the\n         cards instead of composing rotate and transform separately */\n      gsap.set(itemsEl, { rotation: -p * SPIN_DEGREES })\n    }\n\n    raf = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(raf)\n  }, [])\n\n  /* ── Escape closes the detail panel ────────────────────────────────── */\n  useEffect(() => {\n    if (open === null) return\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close()\n    }\n    document.addEventListener(\"keydown\", onKey)\n    return () => document.removeEventListener(\"keydown\", onKey)\n  }, [open, close])\n\n  const active = open === null ? null : CARDS[open]\n\n  return (\n    <div\n      ref={rootRef}\n      className={\"ca-root\" + (open !== null ? \" ca-root--locked\" : \"\")}\n    >\n      <style>{CSS}</style>\n\n      <div className=\"ca-track\">\n        <div className=\"ca-stage\">\n          <div className=\"ca-logo\">\n            <img src={LOGO} alt=\"Zepa\" draggable={false} />\n          </div>\n\n          <div className=\"ca-container\">\n            <div className=\"ca-center\">\n              <div ref={itemsRef} className=\"ca-items\">\n                {CARDS.map((card, i) => (\n                  <div className=\"ca-item\" key={i}>\n                    <div\n                      className={\"ca-card ca-card--\" + card.tint}\n                      role=\"button\"\n                      tabIndex={0}\n                      aria-label={\"Open \" + card.title}\n                      onClick={() => openCard(i)}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault()\n                          openCard(i)\n                        }\n                      }}\n                    >\n                      <img className=\"ca-image\" src={card.src} alt=\"\" draggable={false} />\n                      <span className=\"ca-card-tag\">{card.title}</span>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          <p className=\"ca-hint\">Scroll to turn · Click a card to open</p>\n\n          {/* ── detail panel ── */}\n          {active && (\n            <div\n              className={\"ca-detail\" + (closing ? \" ca-detail--closing\" : \"\")}\n              onClick={close}\n              role=\"presentation\"\n            >\n              <div\n                className=\"ca-detail-inner\"\n                onClick={(e) => e.stopPropagation()}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={active.title}\n              >\n                <div className=\"ca-detail-card\">\n                  <img src={active.src} alt=\"\" draggable={false} />\n                </div>\n\n                <div className=\"ca-detail-copy\">\n                  <span className=\"ca-detail-kind\">{active.kind}</span>\n                  <h2>{active.title}</h2>\n                  <p>{active.body}</p>\n                  <button type=\"button\" className=\"ca-detail-close\" onClick={close}>\n                    Close\n                  </button>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.ca-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #ffffff;\n  color: #000000;\n  font-weight: 600;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  -webkit-font-smoothing: antialiased;\n  scrollbar-width: none;\n}\n.ca-root::-webkit-scrollbar { display: none; }\n.ca-root--locked { overflow: hidden; }\n\n.ca-root *,\n.ca-root *::before,\n.ca-root *::after { box-sizing: border-box; }\n\n/* the scroll runway — its length sets how far one turn takes */\n.ca-track { position: relative; width: 100%; height: 400vh; }\n\n.ca-stage {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  overflow: hidden;\n  background-color: #ffffff;\n}\n\n/* the logo reads as the section's title, so it is sized like one —\n   capped in vh as well as vw so it cannot crowd the wheel, which\n   starts at 28% of the stage */\n.ca-logo {\n  position: absolute;\n  z-index: 20;\n  top: clamp(20px, 4vh, 52px);\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.ca-logo img {\n  display: block;\n  height: min(clamp(52px, 7.4vw, 132px), 15vh);\n  width: auto;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.ca-container {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.ca-center {\n  height: 100vh;\n  position: absolute;\n  left: 50%;\n  top: 28%;\n  transform: translate(-50%);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.ca-items {\n  transform-origin: center 200vh;\n  user-select: none;\n  -webkit-user-select: none;\n  display: flex;\n  will-change: transform;\n}\n\n.ca-item {\n  position: absolute;\n  user-select: none;\n  -webkit-user-select: none;\n  transform: translateX(-50%);\n}\n\n.ca-card {\n  display: block;\n  width: 430px;\n  height: 610px;\n  color: #fff;\n  user-select: none;\n  -webkit-user-select: none;\n  border-radius: 17px;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  border: 4px solid #000000;\n  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n.ca-card:active { transform: scale(0.97); }\n.ca-card:focus-visible { outline: 3px solid #ff6a1f; outline-offset: 4px; }\n\n.ca-image {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  transition: filter 0.4s ease;\n}\n\n/* duotone via filters, so the accent is the same regardless of the photo */\n.ca-card--mono .ca-image { filter: grayscale(1) contrast(1.05); }\n.ca-card--warm .ca-image {\n  filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(-12deg) contrast(1.02);\n}\n.ca-card--cool .ca-image {\n  filter: grayscale(1) sepia(1) saturate(4.6) hue-rotate(178deg) contrast(1.02);\n}\n.ca-card:hover .ca-image { filter: none; }\n\n.ca-card-tag {\n  position: absolute;\n  left: 14px;\n  bottom: 14px;\n  z-index: 2;\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: #fff;\n  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.ca-card:hover .ca-card-tag { opacity: 1; }\n\n.ca-hint {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 26px;\n  z-index: 20;\n  margin: 0;\n  text-align: center;\n  pointer-events: none;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: rgba(0, 0, 0, 0.42);\n}\n\n/* ── detail panel ── */\n.ca-detail {\n  position: absolute;\n  inset: 0;\n  z-index: 40;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  background: rgba(255, 255, 255, 0.82);\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n  animation: caFade 0.3s ease both;\n}\n@keyframes caFade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes caFadeOut { from { opacity: 1; } to { opacity: 0; } }\n\n.ca-detail-inner {\n  display: flex;\n  align-items: center;\n  gap: 44px;\n  max-width: 940px;\n  width: 100%;\n  animation: caRise 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n@keyframes caRise {\n  from { opacity: 0; transform: translateY(30px) scale(0.94); }\n  to   { opacity: 1; transform: translateY(0) scale(1); }\n}\n@keyframes caSink {\n  from { opacity: 1; transform: translateY(0) scale(1); }\n  to   { opacity: 0; transform: translateY(18px) scale(0.96); }\n}\n\n/* the artwork leads on the way in and trails on the way out, so the panel\n   reads as the card growing rather than a box appearing over it */\n.ca-detail-card {\n  flex: 0 0 auto;\n  width: 320px;\n  height: 454px;\n  border-radius: 17px;\n  overflow: hidden;\n  border: 5px solid #000000;\n  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);\n  animation: caCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n@keyframes caCardIn {\n  from { opacity: 0; transform: scale(0.82) rotate(-4deg); }\n  to   { opacity: 1; transform: scale(1) rotate(0deg); }\n}\n@keyframes caCardOut {\n  from { opacity: 1; transform: scale(1) rotate(0deg); }\n  to   { opacity: 0; transform: scale(0.88) rotate(3deg); }\n}\n.ca-detail-card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* the copy comes in just behind the artwork */\n.ca-detail-kind,\n.ca-detail-copy h2,\n.ca-detail-copy p,\n.ca-detail-close {\n  animation: caCopyIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.ca-detail-kind      { animation-delay: 0.08s; }\n.ca-detail-copy h2   { animation-delay: 0.13s; }\n.ca-detail-copy p    { animation-delay: 0.18s; }\n.ca-detail-close     { animation-delay: 0.23s; }\n@keyframes caCopyIn {\n  from { opacity: 0; transform: translateY(14px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n/* ── on the way out ── */\n.ca-detail--closing { animation: caFadeOut 0.3s ease both; }\n.ca-detail--closing .ca-detail-inner { animation: caSink 0.3s cubic-bezier(0.4, 0, 1, 1) both; }\n.ca-detail--closing .ca-detail-card { animation: caCardOut 0.3s cubic-bezier(0.4, 0, 1, 1) both; }\n.ca-detail--closing .ca-detail-kind,\n.ca-detail--closing .ca-detail-copy h2,\n.ca-detail--closing .ca-detail-copy p,\n.ca-detail--closing .ca-detail-close {\n  animation: caFadeOut 0.18s ease both;\n  animation-delay: 0s;\n}\n\n.ca-detail-copy { flex: 1 1 auto; min-width: 0; }\n.ca-detail-kind {\n  display: inline-block;\n  font-size: 10px;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: rgba(0, 0, 0, 0.45);\n  margin-bottom: 14px;\n}\n.ca-detail-copy h2 {\n  margin: 0 0 14px;\n  font-size: clamp(30px, 3.6vw, 52px);\n  line-height: 1.03;\n  letter-spacing: -0.035em;\n  font-weight: 700;\n}\n.ca-detail-copy p {\n  margin: 0 0 26px;\n  font-size: 16px;\n  line-height: 1.6;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.66);\n  max-width: 46ch;\n}\n.ca-detail-close {\n  font: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  color: #fff;\n  background: #000000;\n  border: none;\n  border-radius: 999px;\n  padding: 12px 26px;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n.ca-detail-close:hover { opacity: 0.82; }\n\n@media screen and (max-height: 1000px) {\n  .ca-card { width: 350px; height: 497px; }\n}\n@media screen and (max-height: 800px) {\n  .ca-card { width: 300px; height: 400px; }\n}\n\n@media (max-width: 820px) {\n  .ca-detail-inner { flex-direction: column; gap: 24px; text-align: center; }\n  .ca-detail-card { width: 210px; height: 298px; border-width: 4px; }\n  .ca-detail-copy p { margin-inline: auto; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ca-detail,\n  .ca-detail-inner,\n  .ca-detail-card,\n  .ca-detail-kind,\n  .ca-detail-copy h2,\n  .ca-detail-copy p,\n  .ca-detail-close,\n  .ca-detail--closing,\n  .ca-detail--closing .ca-detail-inner,\n  .ca-detail--closing .ca-detail-card { animation: none; }\n  .ca-card, .ca-image, .ca-card-tag { transition: none; }\n  .ca-card:active { transform: none; }\n}\n`\n\nexport const __demoId = \"311716c5acea\"\n",
+      "type": "registry:example",
+      "target": "components/cards-animation/demo.tsx"
+    }
+  ]
+}
diff --git a/public/r/paper-grid.json b/public/r/paper-grid.json
new file mode 100644
index 0000000..51a7625
--- /dev/null
+++ b/public/r/paper-grid.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "paper-grid",
+  "type": "registry:block",
+  "title": "Paper Grid",
+  "description": "Three translucent certificates printed on glass, hanging side by side and bending like real paper. Drag a sheet to turn it, hover to light it — all three share one WebGL context. Inspired by ThreeUI's ThreeDPaper.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "three"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — paper-grid\n * https://zepa.design/components/paper-grid\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { PaperSheets, type SheetContent } from \"./ui/paper-sheets\"\n\n/* ─────────────────────────────────────────────\n   paper-grid — three certificates printed on glass\n\n   Three translucent sheets hang side by side over\n   a single giant wordmark. Each one bends like real\n   paper: the curl is integrated along the sheet\n   rather than pushed in Z, so the silhouette pulls\n   in where the page turns away from the light.\n\n   Drag a sheet to turn it — the throw carries and\n   settles on the nearest whole rotation. Hover to\n   light it; the hovered sheet lifts toward the\n   camera so it wins the overlap.\n\n   All three share one WebGL context, one renderer\n   and one environment map. The component measures\n   its own container and binds pointer events to it,\n   so it never touches window scroll or position:fixed.\n\n   3D scene ported from ThreeUI's <ThreeDPaper />\n   (MIT — Meng To / Design+Code).\n   ───────────────────────────────────────────── */\n\n/** the same credits are printed on every sheet */\nconst CREDITS = [\"By Zepa Studios\", \"Sameer Shaik\", \"George Hastings\", \"Frank Adl\"]\n\nconst CARDS: SheetContent[] = [\n  {\n    kicker: \"Component of the Week.\",\n    date: \"Feb 14, 2026\",\n    title: \"selfie-hero.\",\n    names: CREDITS,\n    body: \"The Zepa jury is proud to declare this component pick of the week in recognition of the craft and restraint invested in its making.\",\n    mark: \"zepa.\",\n    markSuffix: \" winners\",\n    badge: \"2026 Official Certificate\",\n    tag: \"COTW\",\n  },\n  {\n    kicker: \"Studio of the Month.\",\n    date: \"Mar 02, 2026\",\n    title: \"Zepa Studio.\",\n    names: CREDITS,\n    body: \"Awarded for a body of work that treats motion as structure rather than decoration, and ships it without the maintenance tax.\",\n    mark: \"zepa.\",\n    markSuffix: \" studios\",\n    badge: \"2026 Official Certificate\",\n    tag: \"SOTM\",\n  },\n  {\n    kicker: \"Featured Build.\",\n    date: \"Apr 21, 2026\",\n    title: \"zepa.design\",\n    names: CREDITS,\n    body: \"Recognised for an interface that stays legible at speed, and for proving that a registry component can carry a whole product.\",\n    mark: \"zepa.\",\n    markSuffix: \" featured\",\n    badge: \"2026 Official Certificate\",\n    tag: \"BUILD\",\n  },\n]\n\nexport default function PaperGrid() {\n  return (\n    <div className=\"pg-root\">\n      <style>{CSS}</style>\n\n      {/* one giant word, nothing else */}\n      <div className=\"pg-bg\">\n        <h1>NOCTURNE</h1>\n      </div>\n\n      {/* a touch of defocus so the wordmark sits behind glass */}\n      <div className=\"pg-dof\" />\n\n      <PaperSheets cards={CARDS} />\n\n      <div className=\"pg-grain\" />\n      <div className=\"pg-vig\" />\n\n      <p className=\"pg-hint\">\n        <b>Drag</b> to turn one<span className=\"pg-ptr\"> &nbsp;·&nbsp; <b>Hover</b> to light it</span>\n      </p>\n    </div>\n  )\n}\n\nconst CSS = `\n.pg-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  background: #08080a;\n  color: #f2f2f0;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  -webkit-font-smoothing: antialiased;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n/* the word the sheets hang in front of */\n.pg-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }\n.pg-bg h1 {\n  position: absolute; left: 50%; top: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  font-weight: 600; letter-spacing: -0.055em;\n  font-size: clamp(96px, 18.6vw, 420px);\n  line-height: 0.8; white-space: nowrap;\n  color: rgba(242, 242, 240, 0.125);\n}\n\n.pg-dof {\n  position: absolute; inset: -30px; z-index: 2; pointer-events: none;\n  backdrop-filter: blur(2.4px);\n  -webkit-backdrop-filter: blur(2.4px);\n  background: rgba(8, 8, 10, 0.05);\n}\n\n/* the WebGL stage owns pointer input, so it sits above the backdrop */\n.pg-stage { position: absolute; inset: 0; z-index: 3; }\n.pg-gl { display: block; width: 100%; height: 100%; }\n\n.pg-grain {\n  position: absolute; inset: 0; z-index: 4; pointer-events: none;\n  opacity: 0.05; mix-blend-mode: overlay;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E\");\n  background-repeat: repeat; background-size: 160px 160px;\n}\n\n.pg-vig {\n  position: absolute; inset: 0; z-index: 5; pointer-events: none;\n  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.52) 100%);\n}\n\n.pg-hint {\n  position: absolute; left: 0; right: 0; bottom: 48px; z-index: 6;\n  margin: 0; pointer-events: none; text-align: center;\n  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;\n  color: rgba(242, 242, 240, 0.3);\n  opacity: 0; transition: opacity 0.8s ease;\n}\n.pg-hint b { font-weight: 500; color: rgba(242, 242, 240, 0.58); }\n.pg-stage[data-ready=\"true\"] ~ .pg-hint { opacity: 1; }\n\n@media (hover: none) { .pg-ptr { display: none; } }\n\n@media (max-width: 760px) {\n  .pg-bg h1 { font-size: 22vw; }\n  .pg-hint { bottom: 32px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pg-hint { transition: none; }\n}\n`\n\nexport const __demoId = \"c548dffa26e3\"\n",
+      "type": "registry:example",
+      "target": "components/paper-grid/demo.tsx"
+    },
+    {
+      "path": "ui/paper-sheets.tsx",
+      "content": "/**\n * Zepa UI — paper-grid\n * https://zepa.design/components/paper-grid\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport * as THREE from \"three\"\n\n/* ─────────────────────────────────────────────────────────────────────────\n   paper-sheets — three certificates printed on glass, one WebGL context\n\n   Ported from ThreeUI's <ThreeDPaper /> (MIT, Meng To / Design+Code).\n   https://threeui.com/source-code/3d-paper.json\n\n   The upstream component ships as an <iframe srcDoc> wrapping a 630KB\n   self-contained document with Three.js r149 inlined. That works there\n   because the iframe isolates its position:fixed, window.innerWidth,\n   global html/body styles and Google Fonts <link> from the host page.\n   None of those survive in a registry component, so the scene is ported\n   out of the iframe and re-hosted here:\n\n     · one renderer / scene / PMREM env shared by all three sheets\n     · sizing driven by the container's clientWidth, never window's\n     · pointer events bound to the container, never window\n     · cursor set on the container, never document.body\n     · canvas-drawn type, so no webfont is fetched\n\n   Three.js r149 → r184 breakages that land on this component's shader\n   injection, all fixed below:\n     · sRGBEncoding / outputEncoding removed  → colorSpace / outputColorSpace\n     · #include <output_fragment> renamed     → #include <opaque_fragment>\n     · geometry.normal / geometry.viewDir     → geometryNormal / geometryViewDir\n   ───────────────────────────────────────────────────────────────────────── */\n\nexport type SheetContent = {\n  /** small line above the award title */\n  kicker: string\n  date: string\n  /** the award title, set large */\n  title: string\n  /** credited people, under the title */\n  names: string[]\n  /** citation paragraph in the lower half */\n  body: string\n  /** wordmark bottom-left */\n  mark: string\n  markSuffix: string\n  /** certificate line above the citation */\n  badge: string\n  /** short label set rotated down the right edge */\n  tag: string\n}\n\n/* texture resolution per sheet. the upstream single-sheet hero used\n   1400x1932; three of those is ~32MB of GPU texture, which is a lot to\n   ask of a card sitting in a gallery grid, so the same 0.7246 proportion\n   is kept at a smaller size */\nconst TW = 1100\nconst TH = 1518\n\n/* sheet geometry, in world units — unchanged from upstream */\nconst SW = 2.3\nconst SH = 2.72\n\nconst clamp = (v: number, a: number, b: number) => (v < a ? a : v > b ? b : v)\nconst rng = (s: number) => () => {\n  s = (s * 1103515245 + 12345) & 0x7fffffff\n  return (s >>> 8) / 8388608\n}\n\nconst FONT_STACK = 'ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif'\n\n/* ── canvas helpers (upstream, unchanged) ───────────────────────────── */\n\nfunction rr(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  r: number\n) {\n  ctx.beginPath()\n  ctx.moveTo(x + r, y)\n  ctx.arcTo(x + w, y, x + w, y + h, r)\n  ctx.arcTo(x + w, y + h, x, y + h, r)\n  ctx.arcTo(x, y + h, x, y, r)\n  ctx.arcTo(x, y, x + w, y, r)\n  ctx.closePath()\n}\n\nfunction wrapL(\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  x: number,\n  y: number,\n  maxW: number,\n  lh: number\n) {\n  const words = text.split(\" \")\n  let line = \"\"\n  let yy = y\n  for (const w of words) {\n    const t = line ? line + \" \" + w : w\n    if (ctx.measureText(t).width > maxW && line) {\n      ctx.fillText(line, x, yy)\n      line = w\n      yy += lh\n    } else line = t\n  }\n  if (line) ctx.fillText(line, x, yy)\n  return yy + lh\n}\n\n/** procedural signature — deterministic per seed */\nfunction signature(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  s: number,\n  seed: number,\n  color: string\n) {\n  ctx.save()\n  ctx.translate(x, y)\n  ctx.scale(s, s)\n  ctx.strokeStyle = color\n  ctx.lineWidth = 2.2\n  ctx.lineCap = \"round\"\n  ctx.lineJoin = \"round\"\n  const rnd = rng(seed * 7919 + 13)\n  ctx.beginPath()\n  ctx.moveTo(0, 15)\n  ctx.bezierCurveTo(-3 + rnd() * 4, -7, 9, -20 - rnd() * 6, 15, -5)\n  ctx.bezierCurveTo(18, 7, 7, 15, 9, 4)\n  let px = 9\n  let py = 4\n  const n = 4 + Math.floor(rnd() * 3)\n  for (let i = 0; i < n; i++) {\n    const step = 9 + rnd() * 11\n    const nx = px + step\n    const ny = 4 - (i % 2 ? -1 : 1) * (4 + rnd() * 13)\n    ctx.bezierCurveTo(\n      px + step * 0.35,\n      py - 9 - rnd() * 10,\n      nx - step * 0.35,\n      ny + 7 + rnd() * 8,\n      nx,\n      ny\n    )\n    px = nx\n    py = ny\n  }\n  ctx.bezierCurveTo(px + 9, py - 13, px + 21, py + 11, px + 29, py - 3)\n  ctx.stroke()\n  ctx.beginPath()\n  ctx.lineWidth = 1.4\n  ctx.moveTo(-5, 19)\n  ctx.quadraticCurveTo(px * 0.55, 24 + rnd() * 5, px + 25, 12 + rnd() * 4)\n  ctx.stroke()\n  ctx.restore()\n}\n\n/**\n * Draw a headline, stepping the size down only if it would otherwise run\n * past the sheet's inner border. Upstream hard-coded 106px/110px because it\n * shipped with one fixed string; card copy is data here, so a long kicker\n * would print straight off the edge of the paper.\n */\nfunction fitText(\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  x: number,\n  y: number,\n  maxW: number,\n  weight: string,\n  size: number\n) {\n  let s = size\n  ctx.font = weight + \" \" + s + \"px \" + FONT_STACK\n  while (s > 44 && ctx.measureText(text).width > maxW) {\n    s -= 2\n    ctx.font = weight + \" \" + s + \"px \" + FONT_STACK\n  }\n  ctx.fillText(text, x, y)\n}\n\n/** the certificate artwork, authored on a 1200x1656 grid then scaled up */\nfunction drawGlass(ctx: CanvasRenderingContext2D, c: SheetContent, seed: number) {\n  ctx.scale(TW / 1200, TH / 1656)\n\n  ctx.fillStyle = \"rgba(255,255,255,.030)\"\n  ctx.fillRect(0, 0, 1200, 1656)\n\n  // a whisper of frost behind the headline so it holds over the type below\n  const fr = ctx.createLinearGradient(0, 240, 0, 880)\n  fr.addColorStop(0, \"rgba(255,255,255,0)\")\n  fr.addColorStop(0.26, \"rgba(255,255,255,.060)\")\n  fr.addColorStop(0.74, \"rgba(255,255,255,.060)\")\n  fr.addColorStop(1, \"rgba(255,255,255,0)\")\n  ctx.fillStyle = fr\n  ctx.fillRect(40, 240, 1120, 640)\n\n  ctx.strokeStyle = \"rgba(255,255,255,.34)\"\n  ctx.lineWidth = 2\n  rr(ctx, 20, 20, 1160, 1616, 14)\n  ctx.stroke()\n  ctx.strokeStyle = \"rgba(255,255,255,.12)\"\n  ctx.lineWidth = 1\n  rr(ctx, 36, 36, 1128, 1584, 10)\n  ctx.stroke()\n\n  const M = 74\n  ctx.fillStyle = \"#ffffff\"\n  ctx.font = \"700 104px \" + FONT_STACK\n  ctx.fillText(\"z.\", M, 190)\n\n  // the inner border sits at x=36..1164, so mirror the left margin on the right\n  const HEAD_W = 1200 - M * 2\n  ctx.fillStyle = \"rgba(255,255,255,.52)\"\n  fitText(ctx, c.kicker, M, 392, HEAD_W, \"500\", 106)\n  fitText(ctx, c.date, M, 518, HEAD_W, \"500\", 106)\n  ctx.fillStyle = \"#ffffff\"\n  fitText(ctx, c.title, M, 664, HEAD_W, \"600\", 110)\n\n  ctx.font = \"600 34px \" + FONT_STACK\n  ctx.fillStyle = \"rgba(255,255,255,.90)\"\n  c.names.forEach((s, i) => ctx.fillText(s, M + 4, 752 + i * 45))\n\n  const px = 592\n  const py = 1158\n  ctx.font = \"700 24px \" + FONT_STACK\n  ctx.fillStyle = \"rgba(255,255,255,.92)\"\n  ctx.fillText(c.badge + \".\", px, py)\n  ctx.font = \"500 22px \" + FONT_STACK\n  ctx.fillStyle = \"rgba(255,255,255,.68)\"\n  const endY = wrapL(ctx, c.body, px, py + 36, 296, 28)\n  ;[0, 1, 2].forEach((i) =>\n    signature(ctx, px + 6 + i * 100, endY + 24, 0.86, i * 5 + 3 + seed * 11, \"rgba(255,255,255,.62)\")\n  )\n\n  ctx.save()\n  ctx.translate(1200 - M - 24, 1236)\n  ctx.rotate(Math.PI / 2)\n  ctx.font = \"500 23px \" + FONT_STACK\n  ctx.fillStyle = \"rgba(255,255,255,.62)\"\n  ctx.fillText(\"—\", 0, 0)\n  ctx.fillText(c.tag, 48, 0)\n  ctx.restore()\n\n  ctx.font = \"700 34px \" + FONT_STACK\n  ctx.fillStyle = \"#ffffff\"\n  ctx.fillText(c.mark, M, 1516)\n  const w = ctx.measureText(c.mark).width\n  ctx.font = \"500 34px \" + FONT_STACK\n  ctx.fillStyle = \"rgba(255,255,255,.62)\"\n  ctx.fillText(c.markSuffix, M + w, 1516)\n}\n\nfunction makeCertTexture(c: SheetContent, seed: number) {\n  const cv = document.createElement(\"canvas\")\n  cv.width = TW\n  cv.height = TH\n  const ctx = cv.getContext(\"2d\")\n  if (!ctx) return null\n  ctx.clearRect(0, 0, TW, TH)\n  ctx.save()\n  rr(ctx, 0, 0, TW, TH, 30)\n  ctx.clip()\n  drawGlass(ctx, c, seed)\n  ctx.restore()\n  const t = new THREE.CanvasTexture(cv)\n  // r152+: encoding was replaced by colorSpace\n  t.colorSpace = THREE.SRGBColorSpace\n  t.anisotropy = 8\n  t.needsUpdate = true\n  return t\n}\n\n/* ── the bend, verbatim from upstream ───────────────────────────────────\n   paper conserves arc length, so the sheet is built by integrating the\n   bend angle rather than displacing Z — that is what makes the silhouette\n   genuinely pull in where the sheet turns away from the camera */\nconst WAVE = `\nuniform float uTime, uAmp, uFlutter, uPhase, uFreq, uTwist;\nuniform vec2  uSize;\n\nfloat sAmp(float u, float v){ return uAmp*(0.10 + pow(u,1.35))*(0.50 + 0.64*v); }\nfloat sAmpV(float u){        return uAmp*(0.10 + pow(u,1.35))*0.64; }\n\nfloat sTheta(float u, float v){\n  float a  = sAmp(u,v);\n  float ph = uFreq*u + uTwist*v + uTime*0.40 + uPhase;\n  return a*sin(ph) + uFlutter*a*0.60*sin(ph*2.35 + uTime*2.0);\n}\nfloat sThetaV(float u, float v){\n  float a  = sAmp(u,v), da = sAmpV(u);\n  float ph = uFreq*u + uTwist*v + uTime*0.40 + uPhase;\n  float f  = ph*2.35 + uTime*2.0;\n  return da*sin(ph) + a*cos(ph)*uTwist\n       + uFlutter*0.60*(da*sin(f) + a*cos(f)*uTwist*2.35);\n}\nfloat sYoff(float u, float v){\n  float w = 1.0 - 0.55*v;\n  return 0.021*uSize.y*sin(2.05*u + uTime*0.47 + uPhase)\n       + 0.013*uSize.y*sin(3.35*u - 1.55*v + uTime*0.63 + uPhase)*w;\n}\nfloat sYdU(float u, float v){\n  float w = 1.0 - 0.55*v;\n  return 0.0431*uSize.y*cos(2.05*u + uTime*0.47 + uPhase)\n       + 0.0436*uSize.y*cos(3.35*u - 1.55*v + uTime*0.63 + uPhase)*w;\n}\nfloat sYdV(float u, float v){\n  float ph = 3.35*u - 1.55*v + uTime*0.63 + uPhase;\n  return 0.013*uSize.y*(-1.55*cos(ph)*(1.0-0.55*v) - 0.55*sin(ph));\n}\n\nvoid sheetPoint(vec2 q, out vec3 P, out vec3 NN){\n  float u = q.x, v = q.y;\n  float x=0.0, z=0.0, xe=0.0, ze=0.0, dxv=0.0, dzv=0.0, dxe=0.0, dze=0.0;\n  const int NS = 20;\n  float h = 1.0/float(NS);\n  for(int i=0;i<NS;i++){\n    float uu = (float(i)+0.5)*h;\n    float w  = clamp((u-(uu-0.5*h))/h, 0.0, 1.0);\n    float th = sTheta(uu,v);\n    float dt = sThetaV(uu,v);\n    float c = cos(th), sn = sin(th);\n    xe += c*h;          ze += sn*h;\n    dxe += -sn*dt*h;    dze +=  c*dt*h;\n    x   += c*h*w;       z   += sn*h*w;\n    dxv += -sn*dt*h*w;  dzv +=  c*dt*h*w;\n  }\n  float W = uSize.x, H = uSize.y;\n  float th0 = sTheta(u,v);\n  P = vec3((x - xe*0.5)*W, (v-0.5)*H + sYoff(u,v), (z - ze*0.5)*W);\n  vec3 Tu = vec3(W*cos(th0), sYdU(u,v), W*sin(th0));\n  vec3 Tv = vec3((dxv - dxe*0.5)*W, H + sYdV(u,v), (dzv - dze*0.5)*W);\n  NN = normalize(cross(Tu, Tv));\n}`\n\n/** the studio-light environment, drawn rather than loaded */\nfunction envTexture() {\n  const w = 1024\n  const h = 512\n  const c = document.createElement(\"canvas\")\n  c.width = w\n  c.height = h\n  const x = c.getContext(\"2d\")!\n  const g = x.createLinearGradient(0, 0, 0, h)\n  g.addColorStop(0, \"#3a3d47\")\n  g.addColorStop(0.46, \"#171820\")\n  g.addColorStop(1, \"#08080a\")\n  x.fillStyle = g\n  x.fillRect(0, 0, w, h)\n  const blob = (cx: number, cy: number, rx: number, ry: number, col: string, a: string) => {\n    const rg = x.createRadialGradient(cx, cy, 0, cx, cy, Math.max(rx, ry))\n    rg.addColorStop(0, col.replace(\"A\", a))\n    rg.addColorStop(1, col.replace(\"A\", \"0\"))\n    x.save()\n    x.translate(cx, cy)\n    x.scale(1, ry / rx)\n    x.translate(-cx, -cy)\n    x.fillStyle = rg\n    x.beginPath()\n    x.arc(cx, cy, rx, 0, 7)\n    x.fill()\n    x.restore()\n  }\n  blob(w * 0.3, h * 0.24, 330, 240, \"rgba(255,252,246,A)\", \"1\")\n  blob(w * 0.74, h * 0.34, 240, 200, \"rgba(150,175,235,A)\", \".42\")\n  blob(w * 0.52, h * 0.86, 420, 190, \"rgba(255,170,120,A)\", \".10\")\n  const t = new THREE.CanvasTexture(c)\n  t.mapping = THREE.EquirectangularReflectionMapping\n  t.colorSpace = THREE.SRGBColorSpace\n  return t\n}\n\ntype Sheet = {\n  group: THREE.Group\n  mat: THREE.MeshPhysicalMaterial\n  uni: Record<string, { value: unknown }>\n  baseX: number\n  dragYaw: number\n  dragPitch: number\n  velYaw: number\n  velPitch: number\n  prevYaw: number\n  prevPitch: number\n  release: number\n  quad: [number, number][] | null\n  hover: number\n  hoverTarget: number\n}\n\nexport function PaperSheets({ cards }: { cards: SheetContent[] }) {\n  const hostRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const host = hostRef.current\n    if (!host) return\n\n    const canvas = document.createElement(\"canvas\")\n    canvas.className = \"pg-gl\"\n    host.appendChild(canvas)\n\n    const REDUCED = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n\n    let renderer: THREE.WebGLRenderer\n    try {\n      renderer = new THREE.WebGLRenderer({\n        canvas,\n        antialias: true,\n        alpha: true,\n        powerPreference: \"high-performance\",\n      })\n    } catch {\n      // no WebGL — the DOM fallback underneath stays visible\n      canvas.remove()\n      return\n    }\n    // r152+: outputEncoding was replaced by outputColorSpace\n    renderer.outputColorSpace = THREE.SRGBColorSpace\n    renderer.toneMapping = THREE.NoToneMapping\n\n    const scene = new THREE.Scene()\n    const camera = new THREE.PerspectiveCamera(24, 1, 0.1, 100)\n    camera.position.set(0, 0, 8.2)\n\n    const pmrem = new THREE.PMREMGenerator(renderer)\n    pmrem.compileEquirectangularShader()\n    const envSrc = envTexture()\n    const envRT = pmrem.fromEquirectangular(envSrc)\n    scene.environment = envRT.texture\n    envSrc.dispose()\n\n    const key = new THREE.DirectionalLight(0xfff6ec, 1.42)\n    key.position.set(-3.3, 2.1, 2.0)\n    const fill = new THREE.DirectionalLight(0x9fb6ff, 0.13)\n    fill.position.set(3.6, -1.8, 1.6)\n    const rim = new THREE.DirectionalLight(0xffffff, 0.1)\n    rim.position.set(1.6, 1.2, -2.6)\n    scene.add(key, fill, rim, new THREE.AmbientLight(0xffffff, 0.16))\n\n    const touchLight = new THREE.PointLight(0xdfe8ff, 0, 7.5, 1.35)\n    touchLight.position.set(0, 0, 1.7)\n    scene.add(touchLight)\n\n    /* one geometry, shared by all three sheets */\n    const geo = new THREE.PlaneGeometry(SW, SH, 72, 96)\n\n    const haloTex = (() => {\n      const s = 256\n      const c = document.createElement(\"canvas\")\n      c.width = c.height = s\n      const x = c.getContext(\"2d\")!\n      const g = x.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2)\n      g.addColorStop(0, \"rgba(0,0,0,.55)\")\n      g.addColorStop(0.45, \"rgba(0,0,0,.28)\")\n      g.addColorStop(1, \"rgba(0,0,0,0)\")\n      x.fillStyle = g\n      x.fillRect(0, 0, s, s)\n      const t = new THREE.CanvasTexture(c)\n      t.colorSpace = THREE.SRGBColorSpace\n      return t\n    })()\n\n    /* the rig holds the three sheets so the whole row scales as one */\n    const rig = new THREE.Group()\n    scene.add(rig)\n\n    const GAP = 0.42\n    const PITCH = SW + GAP\n    const sheets: Sheet[] = []\n    const textures: THREE.Texture[] = []\n    const halos: THREE.Mesh[] = []\n\n    cards.forEach((card, i) => {\n      const tex = makeCertTexture(card, i)\n      if (tex) textures.push(tex)\n\n      const uni: Record<string, { value: unknown }> = {\n        uTime: { value: 0 },\n        uAmp: { value: 1.18 - i * 0.08 },\n        uFreq: { value: 4.7 },\n        uTwist: { value: 1.3 },\n        uSize: { value: new THREE.Vector2(SW, SH) },\n        uFlutter: { value: 0 },\n        // each sheet reads the same field at a different point in it, so\n        // the three never breathe in lockstep\n        uPhase: { value: i * 2.1 },\n        uRim: { value: 0.62 },\n        uRimA: { value: 0.88 },\n        uSpecA: { value: 0.14 },\n        uRimCol: { value: new THREE.Color(0xeaf2ff) },\n      }\n\n      const mat = new THREE.MeshPhysicalMaterial({\n        map: tex ?? undefined,\n        color: new THREE.Color(0xc4d2e8),\n        side: THREE.DoubleSide,\n        metalness: 0.0,\n        roughness: 0.06,\n        clearcoat: 1.0,\n        clearcoatRoughness: 0.03,\n        iridescence: 0.1,\n        iridescenceIOR: 1.35,\n        iridescenceThicknessRange: [120, 420],\n        envMapIntensity: 1.15,\n        specularIntensity: 1.0,\n        ior: 1.5,\n        transparent: true,\n        alphaTest: 0.012,\n        opacity: 1,\n      })\n\n      mat.onBeforeCompile = (sh) => {\n        Object.assign(sh.uniforms, uni)\n        sh.vertexShader = sh.vertexShader\n          .replace(\"#include <common>\", \"#include <common>\\n\" + WAVE)\n          .replace(\n            \"#include <beginnormal_vertex>\",\n            \"vec3 sheetP; vec3 objectNormal;\\n\" +\n              \"sheetPoint(uv, sheetP, objectNormal);\\n\" +\n              \"#ifdef USE_TANGENT\\n  vec3 objectTangent = vec3( tangent.xyz );\\n#endif\"\n          )\n          .replace(\"#include <begin_vertex>\", \"vec3 transformed = sheetP;\")\n\n        sh.fragmentShader = sh.fragmentShader\n          .replace(\n            \"#include <common>\",\n            \"#include <common>\\nuniform float uRim, uRimA, uSpecA;\\nuniform vec3 uRimCol;\"\n          )\n          // judge the cut against the artwork's own alpha, not alpha*opacity,\n          // so the intro fade does not eat the sheet\n          .replace(\n            \"#include <alphatest_fragment>\",\n            \"if ( diffuseColor.a / max(opacity,1e-4) < alphaTest ) discard;\"\n          )\n          // r154 renamed output_fragment; r155 renamed the geometry struct\n          // members to the flat geometryNormal / geometryViewDir locals that\n          // lights_fragment_begin declares just above this chunk\n          .replace(\n            \"#include <opaque_fragment>\",\n            \"float fres = pow(1.0 - clamp(abs(dot(geometryNormal, geometryViewDir)),0.0,1.0), 3.2);\\n\" +\n              \"outgoingLight += fres * uRim * uRimCol;\\n\" +\n              \"float baseA = diffuseColor.a / max(opacity, 1e-4);\\n\" +\n              \"float outA  = clamp(baseA + fres*uRimA + uSpecA*dot(outgoingLight, vec3(0.3333)), 0.0, 1.0) * opacity;\\n\" +\n              \"gl_FragColor = vec4( outgoingLight, outA );\"\n          )\n      }\n\n      const group = new THREE.Group()\n      group.add(new THREE.Mesh(geo, mat))\n\n      // a faint dark cloud so each sheet sits clear of the wordmark behind\n      const halo = new THREE.Mesh(\n        new THREE.PlaneGeometry(3.2, 4.1),\n        new THREE.MeshBasicMaterial({\n          map: haloTex,\n          transparent: true,\n          depthWrite: false,\n          opacity: 0.3,\n        })\n      )\n      halo.position.z = -0.62\n      group.add(halo)\n      halos.push(halo)\n\n      const baseX = (i - (cards.length - 1) / 2) * PITCH\n      group.position.x = baseX\n      rig.add(group)\n\n      sheets.push({\n        group,\n        mat,\n        uni,\n        baseX,\n        dragYaw: 0,\n        dragPitch: 0,\n        velYaw: 0,\n        velPitch: 0,\n        prevYaw: 0,\n        prevPitch: 0,\n        release: 0,\n        quad: null,\n        hover: 0,\n        hoverTarget: 0,\n      })\n    })\n\n    /* ── layout: fit the whole row inside the container ──────────────── */\n    let vw = 0\n    let vh = 0\n\n    function resize() {\n      vw = host!.clientWidth\n      vh = host!.clientHeight\n      if (!vw || !vh) return\n      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))\n      renderer.setSize(vw, vh, false)\n      camera.aspect = vw / vh\n      camera.updateProjectionMatrix()\n\n      const visH = 2 * camera.position.z * Math.tan(THREE.MathUtils.degToRad(camera.fov) / 2)\n      const visW = visH * camera.aspect\n      const rigW = cards.length * SW + (cards.length - 1) * GAP\n      // the row is the constraint on wide screens, the sheet height on tall ones\n      const s = Math.min((visW * 0.92) / rigW, (visH * 0.74) / SH)\n      rig.scale.setScalar(s)\n    }\n\n    const ro = new ResizeObserver(resize)\n    ro.observe(host)\n    resize()\n\n    /* ── pointer, bound to the container rather than the window ──────── */\n    const _v = new THREE.Vector3()\n\n    function cornerPoint(sheet: Sheet, qx: number, qy: number) {\n      const t = sheet.uni.uTime.value as number\n      const ph = sheet.uni.uPhase.value as number\n      const A = sheet.uni.uAmp.value as number\n      const F = sheet.uni.uFreq.value as number\n      const TWs = sheet.uni.uTwist.value as number\n      const u = qx\n      const v = qy\n      const theta = (uu: number) =>\n        A *\n        (0.1 + Math.pow(uu, 1.35)) *\n        (0.5 + 0.64 * v) *\n        Math.sin(F * uu + TWs * v + t * 0.4 + ph)\n      let x = 0\n      let z = 0\n      let xe = 0\n      let ze = 0\n      const N = 20\n      const h = 1 / N\n      for (let i = 0; i < N; i++) {\n        const uu = (i + 0.5) * h\n        const w = clamp((u - (uu - 0.5 * h)) / h, 0, 1)\n        const th = theta(uu)\n        const c = Math.cos(th)\n        const s = Math.sin(th)\n        xe += c * h\n        ze += s * h\n        x += c * h * w\n        z += s * h * w\n      }\n      const yo =\n        0.021 * SH * Math.sin(2.05 * u + t * 0.47 + ph) +\n        0.013 * SH * Math.sin(3.35 * u - 1.55 * v + t * 0.63 + ph) * (1 - 0.55 * v)\n      return _v.set((x - xe * 0.5) * SW, (v - 0.5) * SH + yo, (z - ze * 0.5) * SW)\n    }\n\n    function buildQuad(sheet: Sheet) {\n      const pts: [number, number][] = []\n      for (const [u, v] of [\n        [0, 1],\n        [1, 1],\n        [1, 0],\n        [0, 0],\n      ]) {\n        cornerPoint(sheet, u, v).applyMatrix4(sheet.group.matrixWorld).project(camera)\n        pts.push([(_v.x * 0.5 + 0.5) * vw, (-_v.y * 0.5 + 0.5) * vh])\n      }\n      const cx = (pts[0][0] + pts[1][0] + pts[2][0] + pts[3][0]) / 4\n      const cy = (pts[0][1] + pts[1][1] + pts[2][1] + pts[3][1]) / 4\n      sheet.quad = pts.map(([x, y]) => [cx + (x - cx) * 1.07, cy + (y - cy) * 1.07])\n    }\n\n    function inQuad(sheet: Sheet, px: number, py: number) {\n      const quad = sheet.quad\n      if (!quad) return false\n      let sign = 0\n      for (let i = 0; i < 4; i++) {\n        const [ax, ay] = quad[i]\n        const [bx, by] = quad[(i + 1) % 4]\n        const c = (bx - ax) * (py - ay) - (by - ay) * (px - ax)\n        if (c !== 0) {\n          const s = c > 0 ? 1 : -1\n          if (sign === 0) sign = s\n          else if (s !== sign) return false\n        }\n      }\n      return true\n    }\n\n    /** topmost sheet under the pointer — nearest camera wins on overlap */\n    function pick(px: number, py: number): Sheet | null {\n      let best: Sheet | null = null\n      let bestZ = -Infinity\n      for (const s of sheets) {\n        if (!inQuad(s, px, py)) continue\n        const z = s.group.position.z\n        if (z > bestZ) {\n          bestZ = z\n          best = s\n        }\n      }\n      return best\n    }\n\n    const mouse = { x: 0, y: 0, tx: 0, ty: 0 }\n    let dragging: Sheet | null = null\n    let lastPX = 0\n    let lastPY = 0\n    let cursorNow = \"\"\n\n    const local = (e: PointerEvent) => {\n      const r = host!.getBoundingClientRect()\n      return { x: e.clientX - r.left, y: e.clientY - r.top }\n    }\n\n    const onMove = (e: PointerEvent) => {\n      const p = local(e)\n      mouse.tx = (p.x / Math.max(vw, 1) - 0.5) * 2\n      mouse.ty = (p.y / Math.max(vh, 1) - 0.5) * 2\n      if (dragging) {\n        const dx = p.x - lastPX\n        const dy = p.y - lastPY\n        lastPX = p.x\n        lastPY = p.y\n        dragging.dragYaw += dx * 0.006\n        dragging.dragPitch = clamp(dragging.dragPitch - dy * 0.0045, -0.6, 0.6)\n        return\n      }\n      const hit = pick(p.x, p.y)\n      for (const s of sheets) s.hoverTarget = s === hit ? 1 : 0\n    }\n\n    const onDown = (e: PointerEvent) => {\n      const p = local(e)\n      const hit = pick(p.x, p.y)\n      if (!hit) return\n      dragging = hit\n      lastPX = p.x\n      lastPY = p.y\n      hit.velYaw = hit.velPitch = 0\n      hit.prevYaw = hit.dragYaw\n      hit.prevPitch = hit.dragPitch\n      host!.setPointerCapture?.(e.pointerId)\n    }\n\n    const onUp = (e: PointerEvent) => {\n      if (dragging) {\n        dragging.release = 0.6\n        dragging = null\n      }\n      host!.releasePointerCapture?.(e.pointerId)\n    }\n\n    const onLeave = () => {\n      for (const s of sheets) s.hoverTarget = 0\n    }\n\n    host.addEventListener(\"pointermove\", onMove, { passive: true })\n    host.addEventListener(\"pointerdown\", onDown)\n    host.addEventListener(\"pointerup\", onUp)\n    host.addEventListener(\"pointercancel\", onUp)\n    host.addEventListener(\"pointerleave\", onLeave)\n\n    /* ── loop, paused when offscreen or the tab is hidden ─────────────── */\n    const clock = new THREE.Clock()\n    const lightPos = new THREE.Vector3()\n    let intro = 0\n    let raf = 0\n    let running = false\n    let onScreen = true\n    let pageVisible = typeof document === \"undefined\" || !document.hidden\n\n    function frame() {\n      raf = requestAnimationFrame(frame)\n      const dt = Math.min(clock.getDelta(), 0.05)\n      const t = clock.elapsedTime\n\n      intro += (1 - intro) * Math.min(1, dt * 1.9)\n\n      mouse.x += (mouse.tx - mouse.x) * Math.min(1, dt * 3.0)\n      mouse.y += (mouse.ty - mouse.y) * Math.min(1, dt * 3.0)\n      const idle = REDUCED ? 0 : 1\n      const rise = 1 - intro\n\n      let anyHover = 0\n      sheets.forEach((s, i) => {\n        s.uni.uTime.value = REDUCED ? 2.4 : t\n        s.mat.opacity = intro\n        const haloMat = halos[i].material as THREE.MeshBasicMaterial\n        haloMat.opacity = intro * 0.3\n\n        if (dragging === s) {\n          const k = Math.min(1, dt * 14)\n          s.velYaw += ((s.dragYaw - s.prevYaw) / Math.max(dt, 1e-3) - s.velYaw) * k\n          s.velPitch += ((s.dragPitch - s.prevPitch) / Math.max(dt, 1e-3) - s.velPitch) * k\n          s.velYaw = clamp(s.velYaw, -7, 7)\n          s.velPitch = clamp(s.velPitch, -4, 4)\n        } else {\n          s.dragYaw += s.velYaw * dt\n          s.dragPitch = clamp(s.dragPitch + s.velPitch * dt, -0.6, 0.6)\n          const decay = Math.pow(0.018, dt)\n          s.velYaw *= decay\n          s.velPitch *= decay\n          s.release = Math.max(0, s.release - dt)\n          if (s.release <= 0) {\n            // settle on the nearest whole turn rather than unwinding a spin\n            const home = Math.round(s.dragYaw / (Math.PI * 2)) * Math.PI * 2\n            const k = Math.min(1, dt * 0.55)\n            s.dragYaw += (home - s.dragYaw) * k\n            s.dragPitch -= s.dragPitch * k\n          }\n        }\n        s.prevYaw = s.dragYaw\n        s.prevPitch = s.dragPitch\n\n        s.hover += (s.hoverTarget - s.hover) * Math.min(1, dt * 4.5)\n        anyHover = Math.max(anyHover, s.hover)\n\n        const ph = i * 1.7\n        s.group.rotation.y = s.dragYaw + mouse.x * 0.16 + Math.sin(t * 0.23 + ph) * 0.045 * idle\n        s.group.rotation.x =\n          s.dragPitch - mouse.y * 0.11 + Math.sin(t * 0.19 + ph) * 0.026 * idle + rise * 0.28\n        s.group.rotation.z = Math.sin(t * 0.27 + ph) * 0.018 * idle\n        s.group.position.y = Math.sin(t * 0.36 + ph) * 0.06 * idle - rise * 0.7\n        s.group.position.x = s.baseX + Math.sin(t * 0.21 + ph) * 0.05 * idle\n        // hovered sheet lifts toward the camera so it wins the overlap\n        s.group.position.z += (s.hover * 0.36 - s.group.position.z) * Math.min(1, dt * 5)\n      })\n\n      rig.updateMatrixWorld(true)\n\n      touchLight.intensity = anyHover * 2.6 * intro\n      if (anyHover > 0.002) {\n        lightPos.set(mouse.tx, -mouse.ty, 0.5).unproject(camera).sub(camera.position).normalize()\n        touchLight.position\n          .copy(camera.position)\n          .addScaledVector(lightPos, (1.75 - camera.position.z) / lightPos.z)\n      }\n\n      for (const s of sheets) buildQuad(s)\n\n      const wantCursor = dragging ? \"grabbing\" : anyHover > 0.5 ? \"grab\" : \"\"\n      if (wantCursor !== cursorNow) {\n        cursorNow = wantCursor\n        host!.style.cursor = wantCursor\n      }\n\n      renderer.render(scene, camera)\n    }\n\n    function start() {\n      if (running) return\n      running = true\n      clock.getDelta()\n      raf = requestAnimationFrame(frame)\n    }\n    function stop() {\n      if (!running) return\n      running = false\n      cancelAnimationFrame(raf)\n    }\n    const sync = () => (onScreen && pageVisible ? start() : stop())\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        onScreen = entry?.isIntersecting ?? true\n        sync()\n      },\n      { rootMargin: \"120px\" }\n    )\n    io.observe(host)\n\n    const onVis = () => {\n      pageVisible = !document.hidden\n      sync()\n    }\n    document.addEventListener(\"visibilitychange\", onVis)\n\n    // warm the shaders before the first visible frame so the sheets do not\n    // pop in half-compiled\n    renderer.compile(scene, camera)\n    host.dataset.ready = \"true\"\n    sync()\n\n    return () => {\n      stop()\n      io.disconnect()\n      ro.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVis)\n      host.removeEventListener(\"pointermove\", onMove)\n      host.removeEventListener(\"pointerdown\", onDown)\n      host.removeEventListener(\"pointerup\", onUp)\n      host.removeEventListener(\"pointercancel\", onUp)\n      host.removeEventListener(\"pointerleave\", onLeave)\n      geo.dispose()\n      haloTex.dispose()\n      for (const t of textures) t.dispose()\n      for (const s of sheets) s.mat.dispose()\n      for (const h of halos) {\n        h.geometry.dispose()\n        ;(h.material as THREE.Material).dispose()\n      }\n      envRT.texture.dispose()\n      pmrem.dispose()\n      renderer.dispose()\n      canvas.remove()\n      delete host.dataset.ready\n    }\n  }, [cards])\n\n  return <div ref={hostRef} className=\"pg-stage\" aria-hidden />\n}\n",
+      "type": "registry:component",
+      "target": "components/paper-grid/ui/paper-sheets.tsx"
+    }
+  ]
+}
diff --git a/public/r/scroll1-animation.json b/public/r/scroll1-animation.json
new file mode 100644
index 0000000..dcbf03a
--- /dev/null
+++ b/public/r/scroll1-animation.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll1-animation",
+  "type": "registry:block",
+  "title": "Scroll 1 Animation",
+  "description": "A perspective wall of images rotated on the Y axis, each tile parked at its own depth and sweeping across the viewport as you scroll. Inspired by Codrops.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap",
+    "lenis"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — scroll1-animation\n * https://zepa.design/components/scroll1-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport gsap from \"gsap\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport Lenis from \"lenis\"\n\n/* ─────────────────────────────────────────────\n   scroll1-animation — Effortless motion, Zepa's quiet craft.\n\n   A wall of images rotated 25° on the Y axis, each tile parked at a random depth between −1600 and 200px, sweeping right across the viewport as you scroll while the inner picture scales from 2 down to 0.5 — so the frame travels but the photograph inside it settles.\n\n   One of six on-scroll perspective grid animations\n   from Codrops' Scroll3DGrid (MIT — Codrops), split\n   here into a component per animation.\n\n   The original drives off window scroll with Lenis\n   on the page. This owns its own scroll container\n   instead: Lenis is bound to the root as its wrapper\n   and ScrollTrigger is given that same root as its\n   scroller, so the component never touches window\n   scroll or position:fixed.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png\"\n\nconst BASE = [\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n]\n\n/** the grid asks for 48 tiles; the nine images repeat to fill it */\nconst TILES = Array.from({ length: 48 }, (_, i) =>\n  BASE[i % BASE.length].replace(\"/upload/\", \"/upload/c_fill,w_600,h_600,g_auto/\")\n)\n\nexport default function Scroll1Animation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const wrapRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const root = rootRef.current\n    const content = contentRef.current\n    const wrap = wrapRef.current\n    if (!root || !content || !wrap) return\n\n    gsap.registerPlugin(ScrollTrigger)\n\n    /* Lenis smooths the component's own scroller, not the page's */\n    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })\n    const onScroll = () => ScrollTrigger.update()\n    lenis.on(\"scroll\", onScroll)\n\n    let raf = 0\n    const loop = (time: number) => {\n      lenis.raf(time)\n      raf = requestAnimationFrame(loop)\n    }\n    raf = requestAnimationFrame(loop)\n\n    const ctx = gsap.context(() => {\n      const items = gsap.utils.toArray<HTMLElement>(\".s1-item\")\n      const inners = items.map((el) => el.querySelector(\".s1-inner\") as HTMLElement)\n\n      const tl = gsap.timeline({\n        defaults: { ease: \"none\" },\n        scrollTrigger: {\n          trigger: wrap,\n          scroller: root,\n          start: \"top bottom+=5%\",\n          end: \"bottom top-=5%\",\n          scrub: true,\n        },\n      })\n\n      tl.set(wrap, { rotationY: 25 })\n        .set(items, { z: () => gsap.utils.random(-1600, 200) })\n        .fromTo(items,\n          { xPercent: () => gsap.utils.random(-1000, -500) },\n          { xPercent: () => gsap.utils.random(500, 1000) }, 0)\n        .fromTo(inners, { scale: 2 }, { scale: 0.5 }, 0)\n    }, root)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      lenis.off(\"scroll\", onScroll)\n      lenis.destroy()\n      ctx.revert()\n    }\n  }, [])\n\n  return (\n    <div ref={rootRef} className=\"s1-root\">\n      <style>{CSS}</style>\n\n      <div ref={contentRef} className=\"s1-content\">\n        {/* lead-in the scrub needs — carries the mark instead of nothing */}\n        <div className=\"s1-intro\">\n          <img className=\"s1-logo\" src={LOGO} alt=\"Zepa\" draggable={false} />\n          <p className=\"s1-kicker\">Zepa Motion · Scroll Animation 01</p>\n          <p className=\"s1-scroll\">Scroll down</p>\n        </div>\n\n        <section className=\"s1-section\">\n          <h3 className={\"s1-title\" + \" s1-title--right s1-title--top\"}>\n            Effortless motion,\n            <br />\n            Zepa’s quiet craft.\n          </h3>\n\n          <div className=\"s1-grid\">\n            <div ref={wrapRef} className=\"s1-wrap\">\n              {TILES.map((src, i) => (\n                <div className=\"s1-item\" key={i}>\n                  <div\n                    className=\"s1-inner\"\n                    style={{ backgroundImage: \"url(\" + src + \")\" }}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* tail the scrub needs, ditto */}\n        <div className=\"s1-outro\">\n          <img className=\"s1-logo s1-logo--sm\" src={LOGO} alt=\"Zepa\" draggable={false} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.s1-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #000000;\n  color: #ffffff;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  font-weight: 300;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scrollbar-width: none;\n\n  /* defaults from the original :root, then this animation's overrides */\n  --perspective: 1500px;\n  --grid-item-ratio: 1.5;\n  --grid-width: 100%;\n  --grid-height: auto;\n  --grid-gap: 2vw;\n  --grid-columns: 4;\n  --grid-inner-scale: 1;\n  --perspective: 1000px;\n  --grid-inner-scale: 0.5;\n}\n.s1-root::-webkit-scrollbar { display: none; }\n.s1-root *,\n.s1-root *::before,\n.s1-root *::after { box-sizing: border-box; }\n\n/* lead-in and lead-out give the scrub somewhere to run; on the original\n   page this space came from the neighbouring sections */\n/* Runway.\n   starts and ends off-screen left/right, so the blank head and tail are trimmed rather than scrolled\n   through. Raise these to see more of the timeline, lower to scroll less. */\n.s1-content { position: relative; width: 100%; padding: 0; }\n.s1-intro {\n  height: 46vh;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: 1.5rem;\n}\n.s1-outro { height: 58vh; display: grid; place-items: center; }\n\n.s1-logo {\n  width: min(62vw, 760px);\n  height: auto;\n  display: block;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.s1-logo--sm { width: min(26vw, 300px); opacity: 0.4; }\n\n.s1-kicker {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45);\n  text-align: center;\n}\n\n.s1-scroll {\n  margin: 0.6rem 0 3rem;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.34);\n  text-align: center;\n  position: relative;\n}\n.s1-scroll::after {\n  content: \"\";\n  position: absolute;\n  top: calc(100% + 0.9rem);\n  left: 50%;\n  width: 1px;\n  height: 2.2rem;\n  background: rgba(255, 255, 255, 0.34);\n  animation: s1ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n}\n@keyframes s1ScrollLine {\n  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }\n  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }\n  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }\n  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s1-scroll::after { animation: none; transform: translateX(-50%); }\n}\n\n.s1-section { position: relative; }\n\n.s1-title {\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  padding: 0 10vw;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  font-weight: 300;\n  font-size: clamp(1.5rem, 15vw, 6.5rem);\n  line-height: 1.05;\n  pointer-events: none;\n  z-index: 2;\n}\n.s1-title--top { align-items: start; }\n.s1-title--bottom { align-items: end; }\n.s1-title--left { justify-items: start; text-align: left; }\n.s1-title--right { justify-items: end; text-align: right; }\n\n.s1-grid {\n  display: grid;\n  place-items: center;\n  padding: 2rem;\n  width: 100%;\n  perspective: var(--perspective);\n}\n\n.s1-wrap {\n  height: var(--grid-height);\n  width: var(--grid-width);\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  transform-style: preserve-3d;\n}\n\n.s1-item {\n  aspect-ratio: var(--grid-item-ratio);\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  position: relative;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n}\n\n.s1-inner {\n  position: relative;\n  width: calc(1 / var(--grid-inner-scale) * 100%);\n  height: calc(1 / var(--grid-inner-scale) * 100%);\n  background-size: cover;\n  background-position: 50% 50%;\n}\n`\n\nexport const __demoId = \"be32606cd354\"\n",
+      "type": "registry:example",
+      "target": "components/scroll1-animation/demo.tsx"
+    }
+  ]
+}
diff --git a/public/r/scroll2-animation.json b/public/r/scroll2-animation.json
new file mode 100644
index 0000000..2a8affc
--- /dev/null
+++ b/public/r/scroll2-animation.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll2-animation",
+  "type": "registry:block",
+  "title": "Scroll 2 Animation",
+  "description": "Tiles rise out of deep space, turning and dimming as they pass while the grid counter-rotates and scales beneath them. Inspired by Codrops.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap",
+    "lenis"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — scroll2-animation\n * https://zepa.design/components/scroll2-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport gsap from \"gsap\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport Lenis from \"lenis\"\n\n/* ─────────────────────────────────────────────\n   scroll2-animation — Every detail, already considered.\n\n   Tiles rise out of deep space — pushed 1000 to 3000px back — turning from −45° to 45° and dimming from double brightness to black as they pass, while the whole grid counter-rotates and scales up beneath them.\n\n   One of six on-scroll perspective grid animations\n   from Codrops' Scroll3DGrid (MIT — Codrops), split\n   here into a component per animation.\n\n   The original drives off window scroll with Lenis\n   on the page. This owns its own scroll container\n   instead: Lenis is bound to the root as its wrapper\n   and ScrollTrigger is given that same root as its\n   scroller, so the component never touches window\n   scroll or position:fixed.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png\"\n\nconst BASE = [\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n]\n\n/** the grid asks for 48 tiles; the nine images repeat to fill it */\nconst TILES = Array.from({ length: 48 }, (_, i) =>\n  BASE[i % BASE.length].replace(\"/upload/\", \"/upload/c_fill,w_600,h_600,g_auto/\")\n)\n\nexport default function Scroll2Animation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const wrapRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const root = rootRef.current\n    const content = contentRef.current\n    const wrap = wrapRef.current\n    if (!root || !content || !wrap) return\n\n    gsap.registerPlugin(ScrollTrigger)\n\n    /* Lenis smooths the component's own scroller, not the page's */\n    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })\n    const onScroll = () => ScrollTrigger.update()\n    lenis.on(\"scroll\", onScroll)\n\n    let raf = 0\n    const loop = (time: number) => {\n      lenis.raf(time)\n      raf = requestAnimationFrame(loop)\n    }\n    raf = requestAnimationFrame(loop)\n\n    const ctx = gsap.context(() => {\n      const items = gsap.utils.toArray<HTMLElement>(\".s2-item\")\n      const inners = items.map((el) => el.querySelector(\".s2-inner\") as HTMLElement)\n\n      const tl = gsap.timeline({\n        defaults: { ease: \"none\" },\n        scrollTrigger: {\n          trigger: wrap,\n          scroller: root,\n          start: \"top bottom+=5%\",\n          end: \"bottom top-=5%\",\n          scrub: true,\n        },\n      })\n\n      tl.set(wrap, { rotationX: 20 })\n        .set(items, { z: () => gsap.utils.random(-3000, -1000) })\n        .fromTo(items,\n          { yPercent: () => gsap.utils.random(100, 1000), rotationY: -45, filter: 'brightness(200%)' },\n          { ease: 'power2', yPercent: () => gsap.utils.random(-1000, -100), rotationY: 45, filter: 'brightness(0%)' }, 0)\n        .fromTo(wrap, { rotationZ: -5 }, { rotationX: -20, rotationZ: 10, scale: 1.2 }, 0)\n        .fromTo(inners, { scale: 2 }, { scale: 0.5 }, 0)\n    }, root)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      lenis.off(\"scroll\", onScroll)\n      lenis.destroy()\n      ctx.revert()\n    }\n  }, [])\n\n  return (\n    <div ref={rootRef} className=\"s2-root\">\n      <style>{CSS}</style>\n\n      <div ref={contentRef} className=\"s2-content\">\n        {/* lead-in the scrub needs — carries the mark instead of nothing */}\n        <div className=\"s2-intro\">\n          <img className=\"s2-logo\" src={LOGO} alt=\"Zepa\" draggable={false} />\n          <p className=\"s2-kicker\">Zepa Motion · Scroll Animation 02</p>\n          <p className=\"s2-scroll\">Scroll down</p>\n        </div>\n\n        <section className=\"s2-section\">\n          <h3 className={\"s2-title\" + \"\"}>\n            Every detail,\n            <br />\n            already considered.\n          </h3>\n\n          <div className=\"s2-grid\">\n            <div ref={wrapRef} className=\"s2-wrap\">\n              {TILES.map((src, i) => (\n                <div className=\"s2-item\" key={i}>\n                  <div\n                    className=\"s2-inner\"\n                    style={{ backgroundImage: \"url(\" + src + \")\" }}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* tail the scrub needs, ditto */}\n        <div className=\"s2-outro\">\n          <img className=\"s2-logo s2-logo--sm\" src={LOGO} alt=\"Zepa\" draggable={false} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.s2-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #000000;\n  color: #ffffff;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  font-weight: 300;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scrollbar-width: none;\n\n  /* defaults from the original :root, then this animation's overrides */\n  --perspective: 1500px;\n  --grid-item-ratio: 1.5;\n  --grid-width: 100%;\n  --grid-height: auto;\n  --grid-gap: 2vw;\n  --grid-columns: 4;\n  --grid-inner-scale: 1;\n  --grid-width: 160%;\n  --perspective: 2000px;\n  --grid-inner-scale: 0.5;\n  --grid-item-ratio: 0.8;\n  --grid-columns: 6;\n  --grid-gap: 14vw;\n}\n.s2-root::-webkit-scrollbar { display: none; }\n.s2-root *,\n.s2-root *::before,\n.s2-root *::after { box-sizing: border-box; }\n\n/* lead-in and lead-out give the scrub somewhere to run; on the original\n   page this space came from the neighbouring sections */\n/* Runway.\n   starts below and far, ends above and at brightness 0, so the blank head and tail are trimmed rather than scrolled\n   through. Raise these to see more of the timeline, lower to scroll less. */\n.s2-content { position: relative; width: 100%; padding: 0; }\n.s2-intro {\n  height: 46vh;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: 1.5rem;\n}\n.s2-outro { height: 58vh; display: grid; place-items: center; }\n\n.s2-logo {\n  width: min(62vw, 760px);\n  height: auto;\n  display: block;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.s2-logo--sm { width: min(26vw, 300px); opacity: 0.4; }\n\n.s2-kicker {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45);\n  text-align: center;\n}\n\n.s2-scroll {\n  margin: 0.6rem 0 3rem;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.34);\n  text-align: center;\n  position: relative;\n}\n.s2-scroll::after {\n  content: \"\";\n  position: absolute;\n  top: calc(100% + 0.9rem);\n  left: 50%;\n  width: 1px;\n  height: 2.2rem;\n  background: rgba(255, 255, 255, 0.34);\n  animation: s2ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n}\n@keyframes s2ScrollLine {\n  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }\n  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }\n  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }\n  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s2-scroll::after { animation: none; transform: translateX(-50%); }\n}\n\n.s2-section { position: relative; }\n\n.s2-title {\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  padding: 0 10vw;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  font-weight: 300;\n  font-size: clamp(1.5rem, 15vw, 6.5rem);\n  line-height: 1.05;\n  pointer-events: none;\n  z-index: 2;\n}\n.s2-title--top { align-items: start; }\n.s2-title--bottom { align-items: end; }\n.s2-title--left { justify-items: start; text-align: left; }\n.s2-title--right { justify-items: end; text-align: right; }\n\n.s2-grid {\n  display: grid;\n  place-items: center;\n  padding: 2rem;\n  width: 100%;\n  perspective: var(--perspective);\n}\n\n.s2-wrap {\n  height: var(--grid-height);\n  width: var(--grid-width);\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  transform-style: preserve-3d;\n}\n\n.s2-item {\n  aspect-ratio: var(--grid-item-ratio);\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  position: relative;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n}\n\n.s2-inner {\n  position: relative;\n  width: calc(1 / var(--grid-inner-scale) * 100%);\n  height: calc(1 / var(--grid-inner-scale) * 100%);\n  background-size: cover;\n  background-position: 50% 50%;\n}\n`\n\nexport const __demoId = \"5928e86b5456\"\n",
+      "type": "registry:example",
+      "target": "components/scroll2-animation/demo.tsx"
+    }
+  ]
+}
diff --git a/public/r/scroll3-animation.json b/public/r/scroll3-animation.json
new file mode 100644
index 0000000..35906b8
--- /dev/null
+++ b/public/r/scroll3-animation.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll3-animation",
+  "type": "registry:block",
+  "title": "Scroll 3 Animation",
+  "description": "The grid starts far away and unlit, then flattens and brightens as it rushes toward the camera — a flythrough that assembles itself on approach. Inspired by Codrops.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap",
+    "lenis"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — scroll3-animation\n * https://zepa.design/components/scroll3-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport gsap from \"gsap\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport Lenis from \"lenis\"\n\n/* ─────────────────────────────────────────────\n   scroll3-animation — Copy it now, ship it today.\n\n   The grid starts 5000px away, pitched back on its top edge and unlit, then flattens and brightens as the whole wrap rushes 6500px toward the camera — a flythrough where the destination assembles itself on approach.\n\n   One of six on-scroll perspective grid animations\n   from Codrops' Scroll3DGrid (MIT — Codrops), split\n   here into a component per animation.\n\n   The original drives off window scroll with Lenis\n   on the page. This owns its own scroll container\n   instead: Lenis is bound to the root as its wrapper\n   and ScrollTrigger is given that same root as its\n   scroller, so the component never touches window\n   scroll or position:fixed.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png\"\n\nconst BASE = [\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n]\n\n/** the grid asks for 48 tiles; the nine images repeat to fill it */\nconst TILES = Array.from({ length: 48 }, (_, i) =>\n  BASE[i % BASE.length].replace(\"/upload/\", \"/upload/c_fill,w_600,h_600,g_auto/\")\n)\n\nexport default function Scroll3Animation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const wrapRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const root = rootRef.current\n    const content = contentRef.current\n    const wrap = wrapRef.current\n    if (!root || !content || !wrap) return\n\n    gsap.registerPlugin(ScrollTrigger)\n\n    /* Lenis smooths the component's own scroller, not the page's */\n    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })\n    const onScroll = () => ScrollTrigger.update()\n    lenis.on(\"scroll\", onScroll)\n\n    let raf = 0\n    const loop = (time: number) => {\n      lenis.raf(time)\n      raf = requestAnimationFrame(loop)\n    }\n    raf = requestAnimationFrame(loop)\n\n    const ctx = gsap.context(() => {\n      const items = gsap.utils.toArray<HTMLElement>(\".s3-item\")\n      const inners = items.map((el) => el.querySelector(\".s3-inner\") as HTMLElement)\n\n      const tl = gsap.timeline({\n        defaults: { ease: \"none\" },\n        scrollTrigger: {\n          trigger: wrap,\n          scroller: root,\n          start: \"top bottom+=5%\",\n          end: \"bottom top-=5%\",\n          scrub: true,\n        },\n      })\n\n      tl.set(items, {\n          transformOrigin: '50% 0%',\n          z: () => gsap.utils.random(-5000, -2000),\n          rotationX: () => gsap.utils.random(-65, -25),\n          filter: 'brightness(0%)',\n        })\n        .to(items, {\n          xPercent: () => gsap.utils.random(-150, 150),\n          yPercent: () => gsap.utils.random(-300, 300),\n          rotationX: 0,\n          filter: 'brightness(200%)',\n        }, 0)\n        .to(wrap, { z: 6500 }, 0)\n        .fromTo(inners, { scale: 2 }, { scale: 0.5 }, 0)\n    }, root)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      lenis.off(\"scroll\", onScroll)\n      lenis.destroy()\n      ctx.revert()\n    }\n  }, [])\n\n  return (\n    <div ref={rootRef} className=\"s3-root\">\n      <style>{CSS}</style>\n\n      <div ref={contentRef} className=\"s3-content\">\n        {/* lead-in the scrub needs — carries the mark instead of nothing */}\n        <div className=\"s3-intro\">\n          <img className=\"s3-logo\" src={LOGO} alt=\"Zepa\" draggable={false} />\n          <p className=\"s3-kicker\">Zepa Motion · Scroll Animation 03</p>\n          <p className=\"s3-scroll\">Scroll down</p>\n        </div>\n\n        <section className=\"s3-section\">\n          <h3 className={\"s3-title\" + \" s3-title--left s3-title--bottom\"}>\n            Copy it now,\n            <br />\n            ship it today.\n          </h3>\n\n          <div className=\"s3-grid\">\n            <div ref={wrapRef} className=\"s3-wrap\">\n              {TILES.map((src, i) => (\n                <div className=\"s3-item\" key={i}>\n                  <div\n                    className=\"s3-inner\"\n                    style={{ backgroundImage: \"url(\" + src + \")\" }}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* tail the scrub needs, ditto */}\n        <div className=\"s3-outro\">\n          <img className=\"s3-logo s3-logo--sm\" src={LOGO} alt=\"Zepa\" draggable={false} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.s3-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #000000;\n  color: #ffffff;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  font-weight: 300;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scrollbar-width: none;\n\n  /* defaults from the original :root, then this animation's overrides */\n  --perspective: 1500px;\n  --grid-item-ratio: 1.5;\n  --grid-width: 100%;\n  --grid-height: auto;\n  --grid-gap: 2vw;\n  --grid-columns: 4;\n  --grid-inner-scale: 1;\n  --grid-width: 105%;\n  --grid-columns: 8;\n  --perspective: 1500px;\n  --grid-inner-scale: 0.5;\n}\n.s3-root::-webkit-scrollbar { display: none; }\n.s3-root *,\n.s3-root *::before,\n.s3-root *::after { box-sizing: border-box; }\n\n/* lead-in and lead-out give the scrub somewhere to run; on the original\n   page this space came from the neighbouring sections */\n/* Runway — the full lead-in and lead-out, as the original's trigger range\n   asks for: start fires at \"top bottom+=5%\" and end at \"bottom top-=5%\",\n   so anything under ~105vh either side clips the timeline. */\n.s3-content { position: relative; width: 100%; padding: 0; }\n.s3-intro {\n  height: 90vh;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: 1.5rem;\n}\n.s3-outro { height: 110vh; display: grid; place-items: center; }\n\n.s3-logo {\n  width: min(62vw, 760px);\n  height: auto;\n  display: block;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.s3-logo--sm { width: min(26vw, 300px); opacity: 0.4; }\n\n.s3-kicker {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45);\n  text-align: center;\n}\n\n.s3-scroll {\n  margin: 0.6rem 0 3rem;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.34);\n  text-align: center;\n  position: relative;\n}\n.s3-scroll::after {\n  content: \"\";\n  position: absolute;\n  top: calc(100% + 0.9rem);\n  left: 50%;\n  width: 1px;\n  height: 2.2rem;\n  background: rgba(255, 255, 255, 0.34);\n  animation: s3ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n}\n@keyframes s3ScrollLine {\n  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }\n  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }\n  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }\n  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s3-scroll::after { animation: none; transform: translateX(-50%); }\n}\n\n.s3-section { position: relative; }\n\n.s3-title {\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  padding: 0 10vw;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  font-weight: 300;\n  font-size: clamp(1.5rem, 15vw, 6.5rem);\n  line-height: 1.05;\n  pointer-events: none;\n  z-index: 2;\n}\n.s3-title--top { align-items: start; }\n.s3-title--bottom { align-items: end; }\n.s3-title--left { justify-items: start; text-align: left; }\n.s3-title--right { justify-items: end; text-align: right; }\n\n.s3-grid {\n  display: grid;\n  place-items: center;\n  padding: 2rem;\n  width: 100%;\n  perspective: var(--perspective);\n}\n\n.s3-wrap {\n  height: var(--grid-height);\n  width: var(--grid-width);\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  transform-style: preserve-3d;\n}\n\n.s3-item {\n  aspect-ratio: var(--grid-item-ratio);\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  position: relative;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n}\n\n.s3-inner {\n  position: relative;\n  width: calc(1 / var(--grid-inner-scale) * 100%);\n  height: calc(1 / var(--grid-inner-scale) * 100%);\n  background-size: cover;\n  background-position: 50% 50%;\n}\n`\n\nexport const __demoId = \"4b9033033442\"\n",
+      "type": "registry:example",
+      "target": "components/scroll3-animation/demo.tsx"
+    }
+  ]
+}
diff --git a/public/r/scroll4-animation.json b/public/r/scroll4-animation.json
new file mode 100644
index 0000000..3050e81
--- /dev/null
+++ b/public/r/scroll4-animation.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll4-animation",
+  "type": "registry:block",
+  "title": "Scroll 4 Animation",
+  "description": "A narrow column seen from its left edge, each tile hinging on its top edge and stepping toward the camera on a stagger — pages turning in sequence. Inspired by Codrops.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap",
+    "lenis"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — scroll4-animation\n * https://zepa.design/components/scroll4-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport gsap from \"gsap\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport Lenis from \"lenis\"\n\n/* ─────────────────────────────────────────────\n   scroll4-animation — One paste unfolds a finished scene\n\n   A narrow column seen from its left edge. Each tile hinges on its top edge from −70° to 70° while stepping 500px toward the camera and back again on a 0.04s stagger — pages turning in sequence rather than all at once.\n\n   One of six on-scroll perspective grid animations\n   from Codrops' Scroll3DGrid (MIT — Codrops), split\n   here into a component per animation.\n\n   The original drives off window scroll with Lenis\n   on the page. This owns its own scroll container\n   instead: Lenis is bound to the root as its wrapper\n   and ScrollTrigger is given that same root as its\n   scroller, so the component never touches window\n   scroll or position:fixed.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png\"\n\nconst BASE = [\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n]\n\n/** the grid asks for 24 tiles; the nine images repeat to fill it */\nconst TILES = Array.from({ length: 24 }, (_, i) =>\n  BASE[i % BASE.length].replace(\"/upload/\", \"/upload/c_fill,w_600,h_600,g_auto/\")\n)\n\nexport default function Scroll4Animation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const wrapRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const root = rootRef.current\n    const content = contentRef.current\n    const wrap = wrapRef.current\n    if (!root || !content || !wrap) return\n\n    gsap.registerPlugin(ScrollTrigger)\n\n    /* Lenis smooths the component's own scroller, not the page's */\n    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })\n    const onScroll = () => ScrollTrigger.update()\n    lenis.on(\"scroll\", onScroll)\n\n    let raf = 0\n    const loop = (time: number) => {\n      lenis.raf(time)\n      raf = requestAnimationFrame(loop)\n    }\n    raf = requestAnimationFrame(loop)\n\n    const ctx = gsap.context(() => {\n      const items = gsap.utils.toArray<HTMLElement>(\".s4-item\")\n\n      const tl = gsap.timeline({\n        defaults: { ease: \"none\" },\n        scrollTrigger: {\n          trigger: wrap,\n          scroller: root,\n          start: \"top bottom+=5%\",\n          end: \"bottom top-=5%\",\n          scrub: true,\n        },\n      })\n\n      tl.set(wrap, { transformOrigin: '0% 50%', rotationY: 30, xPercent: -75 })\n        .set(items, { transformOrigin: '50% 0%' })\n        .to(items, { duration: 0.5, ease: 'power2', z: 500, stagger: 0.04 }, 0)\n        .to(items, { duration: 0.5, ease: 'power2.in', z: 0, stagger: 0.04 }, 0.5)\n        .fromTo(items,\n          { rotationX: -70, filter: 'brightness(120%)' },\n          { duration: 1, rotationX: 70, filter: 'brightness(0%)', stagger: 0.04 }, 0)\n    }, root)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      lenis.off(\"scroll\", onScroll)\n      lenis.destroy()\n      ctx.revert()\n    }\n  }, [])\n\n  return (\n    <div ref={rootRef} className=\"s4-root\">\n      <style>{CSS}</style>\n\n      <div ref={contentRef} className=\"s4-content\">\n        {/* lead-in the scrub needs — carries the mark instead of nothing */}\n        <div className=\"s4-intro\">\n          <img className=\"s4-logo\" src={LOGO} alt=\"Zepa\" draggable={false} />\n          <p className=\"s4-kicker\">Zepa Motion · Scroll Animation 04</p>\n          <p className=\"s4-scroll\">Scroll down</p>\n        </div>\n\n        <section className=\"s4-section\">\n          <h3 className={\"s4-title\" + \" s4-title--right\"}>\n            One paste unfolds\n            <br />\n            a finished scene\n          </h3>\n\n          <div className=\"s4-grid\">\n            <div ref={wrapRef} className=\"s4-wrap\">\n              {TILES.map((src, i) => (\n                <div className=\"s4-item\" key={i}>\n                  <div\n                    className=\"s4-inner\"\n                    style={{ backgroundImage: \"url(\" + src + \")\" }}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* tail the scrub needs, ditto */}\n        <div className=\"s4-outro\">\n          <img className=\"s4-logo s4-logo--sm\" src={LOGO} alt=\"Zepa\" draggable={false} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.s4-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #000000;\n  color: #ffffff;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  font-weight: 300;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scrollbar-width: none;\n\n  /* defaults from the original :root, then this animation's overrides */\n  --perspective: 1500px;\n  --grid-item-ratio: 1.5;\n  --grid-width: 100%;\n  --grid-height: auto;\n  --grid-gap: 2vw;\n  --grid-columns: 4;\n  --grid-inner-scale: 1;\n  --grid-width: 50%;\n  --perspective: 3000px;\n  --grid-item-ratio: 0.8;\n  --grid-columns: 3;\n  --grid-gap: 1vw;\n}\n.s4-root::-webkit-scrollbar { display: none; }\n.s4-root *,\n.s4-root *::before,\n.s4-root *::after { box-sizing: border-box; }\n\n/* lead-in and lead-out give the scrub somewhere to run; on the original\n   page this space came from the neighbouring sections */\n/* Runway — the full lead-in and lead-out, as the original's trigger range\n   asks for: start fires at \"top bottom+=5%\" and end at \"bottom top-=5%\",\n   so anything under ~105vh either side clips the timeline. */\n.s4-content { position: relative; width: 100%; padding: 0; }\n.s4-intro {\n  height: 90vh;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: 1.5rem;\n}\n.s4-outro { height: 110vh; display: grid; place-items: center; }\n\n.s4-logo {\n  width: min(62vw, 760px);\n  height: auto;\n  display: block;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.s4-logo--sm { width: min(26vw, 300px); opacity: 0.4; }\n\n.s4-kicker {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45);\n  text-align: center;\n}\n\n.s4-scroll {\n  margin: 0.6rem 0 3rem;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.34);\n  text-align: center;\n  position: relative;\n}\n.s4-scroll::after {\n  content: \"\";\n  position: absolute;\n  top: calc(100% + 0.9rem);\n  left: 50%;\n  width: 1px;\n  height: 2.2rem;\n  background: rgba(255, 255, 255, 0.34);\n  animation: s4ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n}\n@keyframes s4ScrollLine {\n  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }\n  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }\n  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }\n  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s4-scroll::after { animation: none; transform: translateX(-50%); }\n}\n\n.s4-section { position: relative; }\n\n.s4-title {\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  padding: 0 10vw;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  font-weight: 300;\n  font-size: clamp(1.5rem, 15vw, 6.5rem);\n  line-height: 1.05;\n  pointer-events: none;\n  z-index: 2;\n}\n.s4-title--top { align-items: start; }\n.s4-title--bottom { align-items: end; }\n.s4-title--left { justify-items: start; text-align: left; }\n.s4-title--right { justify-items: end; text-align: right; }\n\n.s4-grid {\n  display: grid;\n  place-items: center;\n  padding: 2rem;\n  width: 100%;\n  perspective: var(--perspective);\n}\n\n.s4-wrap {\n  height: var(--grid-height);\n  width: var(--grid-width);\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  transform-style: preserve-3d;\n}\n\n.s4-item {\n  aspect-ratio: var(--grid-item-ratio);\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  position: relative;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n}\n\n.s4-inner {\n  position: relative;\n  width: calc(1 / var(--grid-inner-scale) * 100%);\n  height: calc(1 / var(--grid-inner-scale) * 100%);\n  background-size: cover;\n  background-position: 50% 50%;\n}\n`\n\nexport const __demoId = \"602570c51950\"\n",
+      "type": "registry:example",
+      "target": "components/scroll4-animation/demo.tsx"
+    }
+  ]
+}
diff --git a/public/r/scroll5-animation.json b/public/r/scroll5-animation.json
new file mode 100644
index 0000000..533de13
--- /dev/null
+++ b/public/r/scroll5-animation.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll5-animation",
+  "type": "registry:block",
+  "title": "Scroll 5 Animation",
+  "description": "A gapless field laid almost flat. Even rows slide left and odd rows slide right, tearing the image apart along its own seams. Inspired by Codrops.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap",
+    "lenis"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — scroll5-animation\n * https://zepa.design/components/scroll5-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport gsap from \"gsap\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport Lenis from \"lenis\"\n\n/* ─────────────────────────────────────────────\n   scroll5-animation — An infinite library of components unfolding\n\n   A gapless field laid almost flat at 50°. Even rows slide left and odd rows slide right, tearing the image apart along its own seams, then every tile drifts vertically once the rows have parted.\n\n   One of six on-scroll perspective grid animations\n   from Codrops' Scroll3DGrid (MIT — Codrops), split\n   here into a component per animation.\n\n   The original drives off window scroll with Lenis\n   on the page. This owns its own scroll container\n   instead: Lenis is bound to the root as its wrapper\n   and ScrollTrigger is given that same root as its\n   scroller, so the component never touches window\n   scroll or position:fixed.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png\"\n\nconst BASE = [\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n]\n\n/** the grid asks for 48 tiles; the nine images repeat to fill it */\nconst TILES = Array.from({ length: 48 }, (_, i) =>\n  BASE[i % BASE.length].replace(\"/upload/\", \"/upload/c_fill,w_600,h_600,g_auto/\")\n)\n\n/**\n * Group the tiles into rows by their vertical centre, then keep every other\n * row. Ported from the original's getGrid() helper, reduced to the one axis\n * this animation actually uses and flattened, since GSAP receives a flat\n * target list either way.\n */\nfunction rowsOf(items: HTMLElement[], which: \"even\" | \"odd\") {\n  const buckets = new Map<number, HTMLElement[]>()\n  for (const el of items) {\n    const b = el.getBoundingClientRect()\n    const key = Math.round(b.top + b.height / 2)\n    const found = buckets.get(key)\n    if (found) found.push(el)\n    else buckets.set(key, [el])\n  }\n  const ordered = [...buckets.keys()].sort((a, b) => a - b).map((k) => buckets.get(k) as HTMLElement[])\n  const onlyEven = which === \"even\"\n  return ordered.filter((_, i) => !(i % 2) === onlyEven).flat()\n}\n\nexport default function Scroll5Animation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const wrapRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const root = rootRef.current\n    const content = contentRef.current\n    const wrap = wrapRef.current\n    if (!root || !content || !wrap) return\n\n    gsap.registerPlugin(ScrollTrigger)\n\n    /* Lenis smooths the component's own scroller, not the page's */\n    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })\n    const onScroll = () => ScrollTrigger.update()\n    lenis.on(\"scroll\", onScroll)\n\n    let raf = 0\n    const loop = (time: number) => {\n      lenis.raf(time)\n      raf = requestAnimationFrame(loop)\n    }\n    raf = requestAnimationFrame(loop)\n\n    const ctx = gsap.context(() => {\n      const items = gsap.utils.toArray<HTMLElement>(\".s5-item\")\n\n      const tl = gsap.timeline({\n        defaults: { ease: \"none\" },\n        scrollTrigger: {\n          trigger: wrap,\n          scroller: root,\n          start: \"top bottom+=5%\",\n          end: \"bottom top-=5%\",\n          scrub: true,\n        },\n      })\n\n      const grouped = { even: rowsOf(items, 'even'), odd: rowsOf(items, 'odd') }\n\n      tl.set(wrap, { rotationX: 50 })\n        .to(wrap, { rotationX: 30 })\n        .fromTo(items, { filter: 'brightness(0%)' }, { filter: 'brightness(100%)' }, 0)\n        .to(grouped.even, { xPercent: -100, ease: 'power1' }, 0)\n        .to(grouped.odd, { xPercent: 100, ease: 'power1' }, 0)\n        .addLabel('rowsEnd', '>-=0.15')\n        .to(items, { ease: 'power1', yPercent: () => gsap.utils.random(-100, 200) }, 'rowsEnd')\n    }, root)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      lenis.off(\"scroll\", onScroll)\n      lenis.destroy()\n      ctx.revert()\n    }\n  }, [])\n\n  return (\n    <div ref={rootRef} className=\"s5-root\">\n      <style>{CSS}</style>\n\n      <div ref={contentRef} className=\"s5-content\">\n        {/* lead-in the scrub needs — carries the mark instead of nothing */}\n        <div className=\"s5-intro\">\n          <img className=\"s5-logo\" src={LOGO} alt=\"Zepa\" draggable={false} />\n          <p className=\"s5-kicker\">Zepa Motion · Scroll Animation 05</p>\n          <p className=\"s5-scroll\">Scroll down</p>\n        </div>\n\n        <section className=\"s5-section\">\n          <h3 className={\"s5-title\" + \"\"}>\n            An infinite library\n            <br />\n            of components unfolding\n          </h3>\n\n          <div className=\"s5-grid\">\n            <div ref={wrapRef} className=\"s5-wrap\">\n              {TILES.map((src, i) => (\n                <div className=\"s5-item\" key={i}>\n                  <div\n                    className=\"s5-inner\"\n                    style={{ backgroundImage: \"url(\" + src + \")\" }}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* tail the scrub needs, ditto */}\n        <div className=\"s5-outro\">\n          <img className=\"s5-logo s5-logo--sm\" src={LOGO} alt=\"Zepa\" draggable={false} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.s5-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #000000;\n  color: #ffffff;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  font-weight: 300;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scrollbar-width: none;\n\n  /* defaults from the original :root, then this animation's overrides */\n  --perspective: 1500px;\n  --grid-item-ratio: 1.5;\n  --grid-width: 100%;\n  --grid-height: auto;\n  --grid-gap: 2vw;\n  --grid-columns: 4;\n  --grid-inner-scale: 1;\n  --grid-width: 120%;\n  --grid-columns: 8;\n  --grid-gap: 0;\n}\n.s5-root::-webkit-scrollbar { display: none; }\n.s5-root *,\n.s5-root *::before,\n.s5-root *::after { box-sizing: border-box; }\n\n/* lead-in and lead-out give the scrub somewhere to run; on the original\n   page this space came from the neighbouring sections */\n/* Runway — the full lead-in and lead-out, as the original's trigger range\n   asks for: start fires at \"top bottom+=5%\" and end at \"bottom top-=5%\",\n   so anything under ~105vh either side clips the timeline. */\n.s5-content { position: relative; width: 100%; padding: 0; }\n.s5-intro {\n  height: 90vh;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: 1.5rem;\n}\n.s5-outro { height: 110vh; display: grid; place-items: center; }\n\n.s5-logo {\n  width: min(62vw, 760px);\n  height: auto;\n  display: block;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.s5-logo--sm { width: min(26vw, 300px); opacity: 0.4; }\n\n.s5-kicker {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45);\n  text-align: center;\n}\n\n.s5-scroll {\n  margin: 0.6rem 0 3rem;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.34);\n  text-align: center;\n  position: relative;\n}\n.s5-scroll::after {\n  content: \"\";\n  position: absolute;\n  top: calc(100% + 0.9rem);\n  left: 50%;\n  width: 1px;\n  height: 2.2rem;\n  background: rgba(255, 255, 255, 0.34);\n  animation: s5ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n}\n@keyframes s5ScrollLine {\n  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }\n  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }\n  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }\n  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s5-scroll::after { animation: none; transform: translateX(-50%); }\n}\n\n.s5-section { position: relative; }\n\n.s5-title {\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  padding: 0 10vw;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  font-weight: 300;\n  font-size: clamp(1.5rem, 15vw, 6.5rem);\n  line-height: 1.05;\n  pointer-events: none;\n  z-index: 2;\n}\n.s5-title--top { align-items: start; }\n.s5-title--bottom { align-items: end; }\n.s5-title--left { justify-items: start; text-align: left; }\n.s5-title--right { justify-items: end; text-align: right; }\n\n.s5-grid {\n  display: grid;\n  place-items: center;\n  padding: 2rem;\n  width: 100%;\n  perspective: var(--perspective);\n}\n\n.s5-wrap {\n  height: var(--grid-height);\n  width: var(--grid-width);\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  transform-style: preserve-3d;\n}\n\n.s5-item {\n  aspect-ratio: var(--grid-item-ratio);\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  position: relative;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n}\n\n.s5-inner {\n  position: relative;\n  width: calc(1 / var(--grid-inner-scale) * 100%);\n  height: calc(1 / var(--grid-inner-scale) * 100%);\n  background-size: cover;\n  background-position: 50% 50%;\n}\n`\n\nexport const __demoId = \"668836c00479\"\n",
+      "type": "registry:example",
+      "target": "components/scroll5-animation/demo.tsx"
+    }
+  ]
+}
diff --git a/public/r/scroll6-animation.json b/public/r/scroll6-animation.json
new file mode 100644
index 0000000..9c334c5
--- /dev/null
+++ b/public/r/scroll6-animation.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll6-animation",
+  "type": "registry:block",
+  "title": "Scroll 6 Animation",
+  "description": "Tiles hinge from a pivot below themselves, swinging up while spinning a full turn on a stagger — a deck flipping itself into place. Inspired by Codrops.",
+  "github": "vij-sameerb5",
+  "dependencies": [
+    "gsap",
+    "lenis"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "demo.tsx",
+      "content": "/**\n * Zepa UI — scroll6-animation\n * https://zepa.design/components/scroll6-animation\n * Free to use in your projects. Please don't republish or resell as your own.\n */\n\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport gsap from \"gsap\"\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\nimport Lenis from \"lenis\"\n\n/* ─────────────────────────────────────────────\n   scroll6-animation — Interfaces shift, motion flows.\n\n   Tiles hinge from a pivot two heights below themselves, swinging up from 400% down while spinning a full 360° on the Y axis, fading to a fifth opacity on a 0.03s stagger — a deck flipping itself into place.\n\n   One of six on-scroll perspective grid animations\n   from Codrops' Scroll3DGrid (MIT — Codrops), split\n   here into a component per animation.\n\n   The original drives off window scroll with Lenis\n   on the page. This owns its own scroll container\n   instead: Lenis is bound to the root as its wrapper\n   and ScrollTrigger is given that same root as its\n   scroller, so the component never touches window\n   scroll or position:fixed.\n   ───────────────────────────────────────────── */\n\nconst LOGO =\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973374/zzepa_fur8kl.png\"\n\nconst BASE = [\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/01_wvqrxz.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/02_efyml3.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/03_sceom4.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/04_dpquqc.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/05_ccn9so.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973294/06_p0lonf.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/07_wzzq5u.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/08_bu1urh.png\",\n  \"https://res.cloudinary.com/dakrfj1oh/image/upload/v1781973295/09_b5kt8t.png\",\n]\n\n/** the grid asks for 21 tiles; the nine images repeat to fill it */\nconst TILES = Array.from({ length: 21 }, (_, i) =>\n  BASE[i % BASE.length].replace(\"/upload/\", \"/upload/c_fill,w_600,h_600,g_auto/\")\n)\n\nexport default function Scroll6Animation() {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const wrapRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const root = rootRef.current\n    const content = contentRef.current\n    const wrap = wrapRef.current\n    if (!root || !content || !wrap) return\n\n    gsap.registerPlugin(ScrollTrigger)\n\n    /* Lenis smooths the component's own scroller, not the page's */\n    const lenis = new Lenis({ wrapper: root, content, lerp: 0.1, smoothWheel: true })\n    const onScroll = () => ScrollTrigger.update()\n    lenis.on(\"scroll\", onScroll)\n\n    let raf = 0\n    const loop = (time: number) => {\n      lenis.raf(time)\n      raf = requestAnimationFrame(loop)\n    }\n    raf = requestAnimationFrame(loop)\n\n    const ctx = gsap.context(() => {\n      const items = gsap.utils.toArray<HTMLElement>(\".s6-item\")\n\n      const tl = gsap.timeline({\n        defaults: { ease: \"none\" },\n        scrollTrigger: {\n          trigger: wrap,\n          scroller: root,\n          start: \"top bottom+=5%\",\n          end: \"bottom top-=5%\",\n          scrub: true,\n        },\n      })\n\n      tl.fromTo(items,\n        { transformOrigin: '50% 200%', rotationX: 0, yPercent: 400 },\n        { yPercent: 0, rotationY: 360, opacity: 0.2, scale: 0.8, stagger: 0.03 })\n    }, root)\n\n    return () => {\n      cancelAnimationFrame(raf)\n      lenis.off(\"scroll\", onScroll)\n      lenis.destroy()\n      ctx.revert()\n    }\n  }, [])\n\n  return (\n    <div ref={rootRef} className=\"s6-root\">\n      <style>{CSS}</style>\n\n      <div ref={contentRef} className=\"s6-content\">\n        {/* lead-in the scrub needs — carries the mark instead of nothing */}\n        <div className=\"s6-intro\">\n          <img className=\"s6-logo\" src={LOGO} alt=\"Zepa\" draggable={false} />\n          <p className=\"s6-kicker\">Zepa Motion · Scroll Animation 06</p>\n          <p className=\"s6-scroll\">Scroll down</p>\n        </div>\n\n        <section className=\"s6-section\">\n          <h3 className={\"s6-title\" + \"\"}>\n            Interfaces shift,\n            <br />\n            motion flows.\n          </h3>\n\n          <div className=\"s6-grid\">\n            <div ref={wrapRef} className=\"s6-wrap\">\n              {TILES.map((src, i) => (\n                <div className=\"s6-item\" key={i}>\n                  <div\n                    className=\"s6-inner\"\n                    style={{ backgroundImage: \"url(\" + src + \")\" }}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* tail the scrub needs, ditto */}\n        <div className=\"s6-outro\">\n          <img className=\"s6-logo s6-logo--sm\" src={LOGO} alt=\"Zepa\" draggable={false} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CSS = `\n.s6-root {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: #000000;\n  color: #ffffff;\n  font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  font-weight: 300;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scrollbar-width: none;\n\n  /* defaults from the original :root, then this animation's overrides */\n  --perspective: 1500px;\n  --grid-item-ratio: 1.5;\n  --grid-width: 100%;\n  --grid-height: auto;\n  --grid-gap: 2vw;\n  --grid-columns: 4;\n  --grid-inner-scale: 1;\n  --perspective: 2500px;\n  --grid-width: 100%;\n  --grid-gap: 6;\n  --grid-columns: 3;\n  --grid-item-ratio: 1;\n}\n.s6-root::-webkit-scrollbar { display: none; }\n.s6-root *,\n.s6-root *::before,\n.s6-root *::after { box-sizing: border-box; }\n\n/* lead-in and lead-out give the scrub somewhere to run; on the original\n   page this space came from the neighbouring sections */\n/* Runway.\n   starts below the fold, but ENDS with every tile settled and visible — tail must stay, so the blank head and tail are trimmed rather than scrolled\n   through. Raise these to see more of the timeline, lower to scroll less. */\n.s6-content { position: relative; width: 100%; padding: 0; }\n/* a full viewport tall, so the mark centres on the first screen rather than\n   sitting a quarter of the way down a short block */\n.s6-intro {\n  height: 100vh;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: 1.5rem;\n}\n.s6-outro { height: 108vh; display: grid; place-items: center; }\n\n.s6-logo {\n  width: min(62vw, 760px);\n  height: auto;\n  display: block;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.s6-logo--sm { width: min(26vw, 300px); opacity: 0.4; }\n\n.s6-kicker {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.45);\n  text-align: center;\n}\n\n.s6-scroll {\n  margin: 0.6rem 0 3rem;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.34);\n  text-align: center;\n  position: relative;\n}\n.s6-scroll::after {\n  content: \"\";\n  position: absolute;\n  top: calc(100% + 0.9rem);\n  left: 50%;\n  width: 1px;\n  height: 2.2rem;\n  background: rgba(255, 255, 255, 0.34);\n  animation: s6ScrollLine 2.1s cubic-bezier(0.76, 0, 0.24, 1) infinite;\n}\n@keyframes s6ScrollLine {\n  0%   { transform: translateX(-50%) scaleY(0); transform-origin: 50% 0%; }\n  45%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 0%; }\n  55%  { transform: translateX(-50%) scaleY(1); transform-origin: 50% 100%; }\n  100% { transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s6-scroll::after { animation: none; transform: translateX(-50%); }\n}\n\n.s6-section { position: relative; }\n\n.s6-title {\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n  padding: 0 10vw;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  font-weight: 300;\n  font-size: clamp(1.5rem, 15vw, 6.5rem);\n  line-height: 1.05;\n  pointer-events: none;\n  z-index: 2;\n}\n.s6-title--top { align-items: start; }\n.s6-title--bottom { align-items: end; }\n.s6-title--left { justify-items: start; text-align: left; }\n.s6-title--right { justify-items: end; text-align: right; }\n\n.s6-grid {\n  display: grid;\n  place-items: center;\n  padding: 2rem;\n  width: 100%;\n  perspective: var(--perspective);\n}\n\n.s6-wrap {\n  height: var(--grid-height);\n  width: var(--grid-width);\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  transform-style: preserve-3d;\n}\n\n.s6-item {\n  aspect-ratio: var(--grid-item-ratio);\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  position: relative;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n}\n\n.s6-inner {\n  position: relative;\n  width: calc(1 / var(--grid-inner-scale) * 100%);\n  height: calc(1 / var(--grid-inner-scale) * 100%);\n  background-size: cover;\n  background-position: 50% 50%;\n}\n`\n\nexport const __demoId = \"c3dc293e5ace\"\n",
+      "type": "registry:example",
+      "target": "components/scroll6-animation/demo.tsx"
+    }
+  ]
+}