From debeb940de17b76c636accebec237b39e758323a Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:34:47 +0530
Subject: [PATCH 01/49] Give the docs the monitor-bench palette and new type.

Doto sets component names in dot matrix, Hanken Grotesk carries the reading text, and Martian Mono the code; colour comes from bench, sheet, plate and screen tokens so only the live components add colour.
---
 app/globals.css | 293 ++++++++++++++++++++++++++++++------------------
 app/layout.tsx  |  25 ++++-
 2 files changed, 203 insertions(+), 115 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a90d256..e00cbac 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,6 +9,14 @@
 @theme inline {
     --font-heading: var(--font-sans);
     --font-sans: var(--font-sans);
+    --color-bench: var(--bench);
+    --color-sheet: var(--sheet);
+    --color-plate: var(--plate);
+    --color-screen: var(--screen);
+    --color-ink: var(--ink);
+    --color-graphite: var(--graphite);
+    --color-wash: var(--wash);
+    --color-rule: var(--rule);
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -98,75 +106,50 @@
     }
 }
 
+/*
+ * v2 tokens — "monitor bench".
+ * The chrome is a quiet, achromatic bench; the only colour on the page comes
+ * from the components running on their screens.
+ *
+ *   bench     page ground: sidebar, table of contents
+ *   sheet     the inset panel the page content sits on
+ *   plate     surfaces on the sheet: code, controls, tables, menus
+ *   screen    the stage a live component renders on
+ *   ink       text and primary actions
+ *   graphite  secondary text
+ *   wash      hover and pressed fills
+ *   rule      borders and dividers
+ */
 :root {
     color-scheme: light;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
+    --bench: #eeefef;
+    --sheet: #ffffff;
+    --plate: #f6f7f7;
+    --screen: #ffffff;
+    --ink: #141517;
+    --graphite: #5e6269;
+    --wash: #e6e8e9;
+    --rule: #d8dadc;
+
+    /* Subpixel triad — the "this one is on" indicator. */
+    --triad-r: #ff3b3b;
+    --triad-g: #1fc760;
+    --triad-b: #3563ff;
+
     --radius: 0.5rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --radius-screen: 14px;
 }
 
 .dark {
     color-scheme: dark;
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --bench: #1a1b1e;
+    --sheet: #131416;
+    --plate: #1c1e21;
+    --screen: #0e0f10;
+    --ink: #ecedee;
+    --graphite: #9da1a8;
+    --wash: #2b2d32;
+    --rule: #323439;
 }
 
 /* Before `html.dark` exists, :root is light. Keep system-dark users on dark
@@ -174,56 +157,74 @@
 @media (prefers-color-scheme: dark) {
     :root:not(.light) {
         color-scheme: dark;
-        --background: oklch(0.145 0 0);
-        --foreground: oklch(0.985 0 0);
-        --card: oklch(0.205 0 0);
-        --card-foreground: oklch(0.985 0 0);
-        --popover: oklch(0.205 0 0);
-        --popover-foreground: oklch(0.985 0 0);
-        --primary: oklch(0.922 0 0);
-        --primary-foreground: oklch(0.205 0 0);
-        --secondary: oklch(0.269 0 0);
-        --secondary-foreground: oklch(0.985 0 0);
-        --muted: oklch(0.269 0 0);
-        --muted-foreground: oklch(0.708 0 0);
-        --accent: oklch(0.269 0 0);
-        --accent-foreground: oklch(0.985 0 0);
-        --destructive: oklch(0.704 0.191 22.216);
-        --border: oklch(1 0 0 / 10%);
-        --input: oklch(1 0 0 / 15%);
-        --ring: oklch(0.556 0 0);
-        --chart-1: oklch(0.87 0 0);
-        --chart-2: oklch(0.556 0 0);
-        --chart-3: oklch(0.439 0 0);
-        --chart-4: oklch(0.371 0 0);
-        --chart-5: oklch(0.269 0 0);
-        --sidebar: oklch(0.205 0 0);
-        --sidebar-foreground: oklch(0.985 0 0);
-        --sidebar-primary: oklch(0.488 0.243 264.376);
-        --sidebar-primary-foreground: oklch(0.985 0 0);
-        --sidebar-accent: oklch(0.269 0 0);
-        --sidebar-accent-foreground: oklch(0.985 0 0);
-        --sidebar-border: oklch(1 0 0 / 10%);
-        --sidebar-ring: oklch(0.556 0 0);
-        --color-fd-background: hsl(0, 0%, 7.04%);
-        --color-fd-foreground: hsl(0, 0%, 92%);
-        --color-fd-muted: hsl(0, 0%, 12.9%);
-        --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
-        --color-fd-popover: hsl(0, 0%, 11.6%);
-        --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
-        --color-fd-card: hsl(0, 0%, 9.8%);
-        --color-fd-card-foreground: hsl(0, 0%, 98%);
-        --color-fd-border: hsla(0, 0%, 40%, 20%);
-        --color-fd-primary: hsl(0, 0%, 98%);
-        --color-fd-primary-foreground: hsl(0, 0%, 9%);
-        --color-fd-secondary: hsl(0, 0%, 12.9%);
-        --color-fd-secondary-foreground: hsl(0, 0%, 92%);
-        --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
-        --color-fd-accent-foreground: hsl(0, 0%, 90%);
-        --color-fd-ring: hsl(0, 0%, 54.9%);
+        --bench: #1a1b1e;
+        --sheet: #131416;
+        --plate: #1c1e21;
+        --screen: #0e0f10;
+        --ink: #ecedee;
+        --graphite: #9da1a8;
+        --wash: #2b2d32;
+        --rule: #323439;
     }
 }
 
+/* shadcn + Fumadocs roles, mapped onto the bench tokens. */
+:root,
+.dark {
+    --background: var(--bench);
+    --foreground: var(--ink);
+    --card: var(--plate);
+    --card-foreground: var(--ink);
+    --popover: var(--plate);
+    --popover-foreground: var(--ink);
+    --primary: var(--ink);
+    --primary-foreground: var(--bench);
+    --secondary: var(--wash);
+    --secondary-foreground: var(--ink);
+    --muted: var(--wash);
+    --muted-foreground: var(--graphite);
+    --accent: var(--wash);
+    --accent-foreground: var(--ink);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: var(--rule);
+    --input: var(--rule);
+    --ring: color-mix(in oklab, var(--ink) 55%, transparent);
+    --chart-1: var(--triad-r);
+    --chart-2: var(--triad-g);
+    --chart-3: var(--triad-b);
+    --chart-4: var(--graphite);
+    --chart-5: var(--ink);
+    --sidebar: var(--bench);
+    --sidebar-foreground: var(--ink);
+    --sidebar-primary: var(--ink);
+    --sidebar-primary-foreground: var(--bench);
+    --sidebar-accent: var(--wash);
+    --sidebar-accent-foreground: var(--ink);
+    --sidebar-border: var(--rule);
+    --sidebar-ring: var(--ring);
+
+    --color-fd-background: var(--bench);
+    --color-fd-foreground: var(--ink);
+    --color-fd-muted: var(--wash);
+    --color-fd-muted-foreground: var(--graphite);
+    --color-fd-popover: var(--plate);
+    --color-fd-popover-foreground: var(--ink);
+    --color-fd-card: var(--plate);
+    --color-fd-card-foreground: var(--ink);
+    --color-fd-border: var(--rule);
+    --color-fd-primary: var(--ink);
+    --color-fd-primary-foreground: var(--bench);
+    --color-fd-secondary: var(--wash);
+    --color-fd-secondary-foreground: var(--ink);
+    --color-fd-accent: var(--wash);
+    --color-fd-accent-foreground: var(--ink);
+    --color-fd-ring: var(--ring);
+}
+
+.dark {
+    --destructive: oklch(0.704 0.191 22.216);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -266,6 +267,18 @@
     @apply bg-background text-foreground;
   }
 
+  ::selection {
+    background-color: var(--ink);
+    color: var(--bench);
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-variation-settings: "wdth" 87.5;
+  }
+
   html {
     @apply bg-background font-sans;
     scrollbar-gutter: stable;
@@ -277,6 +290,68 @@
   }
 }
 
+/* Dot-matrix display face. Only for component names and the wordmark —
+   never for running text or labels. */
+@utility font-display {
+  font-family: var(--font-display), ui-monospace, monospace;
+  font-weight: 900;
+  font-variation-settings: "ROND" 100;
+  letter-spacing: -0.02em;
+  font-kerning: none;
+}
+
+/* Reading column. Fumadocs' typography plugin uses :where(), so these win. */
+.prose {
+  --tw-prose-body: color-mix(in oklab, var(--ink) 86%, var(--bench));
+  --tw-prose-headings: var(--ink);
+  line-height: 1.7;
+}
+
+.prose h2 {
+  margin-top: 3.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+}
+
+.prose h3 {
+  margin-top: 2.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.prose a:not([data-card]) {
+  font-weight: inherit;
+  text-decoration-color: color-mix(in oklab, var(--ink) 30%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+  transition: text-decoration-color 150ms;
+}
+
+.prose a:not([data-card]):hover {
+  text-decoration-color: var(--ink);
+}
+
+.prose strong {
+  font-weight: 600;
+}
+
+.prose :not(pre) > code {
+  padding: 0.1em 0.35em;
+  border: 1px solid var(--rule);
+  border-radius: 5px;
+  background: var(--plate);
+  font-size: 0.8125em;
+}
+
+.prose kbd {
+  border-color: var(--rule);
+  background: var(--plate);
+  box-shadow: 0 1px 0 var(--rule);
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/app/layout.tsx b/app/layout.tsx
index 4f16338..d15ef6d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Geist, Geist_Mono } from "next/font/google"
+import { Doto, Hanken_Grotesk, Martian_Mono } from "next/font/google"
 import { RootProvider } from "fumadocs-ui/provider/next"
 import type { Metadata, Viewport } from "next"
 import type { ReactNode } from "react"
@@ -94,17 +94,25 @@ export const metadata: Metadata = {
 
 export const viewport: Viewport = {
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
-    { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
+    { media: "(prefers-color-scheme: light)", color: "#eeefef" },
+    { media: "(prefers-color-scheme: dark)", color: "#1a1b1e" },
   ],
   colorScheme: "light dark",
 }
 
-const geist = Geist({ subsets: ["latin"], variable: "--font-sans" })
+const fontSans = Hanken_Grotesk({ subsets: ["latin"], variable: "--font-sans" })
 
-const fontMono = Geist_Mono({
+const fontMono = Martian_Mono({
   subsets: ["latin"],
   variable: "--font-mono",
+  axes: ["wdth"],
+})
+
+/** Dot-matrix face for component names — rendered, like the components. */
+const fontDisplay = Doto({
+  subsets: ["latin"],
+  variable: "--font-display",
+  axes: ["ROND"],
 })
 
 export default function RootLayout({
@@ -120,7 +128,12 @@ export default function RootLayout({
     <html
       lang="en"
       suppressHydrationWarning
-      className={cn("font-sans antialiased", fontMono.variable, geist.variable)}
+      className={cn(
+        "font-sans antialiased",
+        fontSans.variable,
+        fontMono.variable,
+        fontDisplay.variable
+      )}
     >
       <head>
         <script

From b31f249b2330ad9426dfee11851619270ecc0af1 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:34:52 +0530
Subject: [PATCH 02/49] Move docs navigation into a sticky sidebar with search.

The top bar is gone: the logo, a search field, the page tree and a footer with stars, theme and Sponsor live in one column, the open page is marked with a subpixel triad, and phones get the same column in a sheet.
---
 components/docs-shell.tsx     | 270 ++++++++++++----------------------
 components/docs-sidebar.tsx   | 106 +++----------
 components/search-trigger.tsx |  36 ++++-
 components/triad.tsx          |  19 +++
 4 files changed, 169 insertions(+), 262 deletions(-)
 create mode 100644 components/triad.tsx

diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 073832f..0f2d05a 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -1,32 +1,24 @@
 "use client"
 
-import {
-  useEffect,
-  useId,
-  useRef,
-  type CSSProperties,
-  type ReactNode,
-} from "react"
+import type { CSSProperties, ReactNode } from "react"
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { RiHeartFill } from "@remixicon/react"
 
 import { DocsSidebar } from "@/components/docs-sidebar"
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
-import { GithubSponsor } from "@/components/github-sponsor"
 import { GithubStars } from "@/components/github-stars"
 import { Logo } from "@/components/logo"
 import { SearchTrigger } from "@/components/search-trigger"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { FOOTER_LINKS, SUPPORT_EMAIL } from "@/lib/site"
 import { FrameworkProvider } from "@/lib/framework"
-import { cn } from "@/lib/utils"
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarInset,
   SidebarProvider,
+  useSidebar,
 } from "@/components/ui/sidebar"
 
 const sidebarTokens: CSSProperties = {
@@ -50,78 +42,94 @@ type FolderNode = {
 type RootNode = { type?: "root"; name: ReactNode; children: TreeNode[] }
 type TreeNode = PageNode | SeparatorNode | FolderNode
 
-const EDGE_BLUR_LAYERS = [
-  { std: 5, opaque: 0, fade: 24 },
-  { std: 3, opaque: 0, fade: 44 },
-  { std: 2, opaque: 10, fade: 66 },
-  { std: 1, opaque: 28, fade: 84 },
-  { std: 0.5, opaque: 50, fade: 100 },
-] as const
-
-function DocsEdgeBlurDefs({ uid }: { uid: string }) {
+function Wordmark() {
   return (
-    <svg
-      className="pointer-events-none absolute size-0 overflow-hidden"
-      aria-hidden
+    <Link
+      href="/docs"
+      className="flex min-w-0 items-center gap-2.5 rounded-md text-[15px] font-semibold tracking-tight outline-none focus-visible:ring-2 focus-visible:ring-ring"
     >
-      <defs>
-        {EDGE_BLUR_LAYERS.map((layer, i) => (
-          <filter
-            key={i}
-            id={`docs-edge-blur-${i}-${uid}`}
-            x="-10%"
-            y="-50%"
-            width="120%"
-            height="200%"
-            colorInterpolationFilters="sRGB"
+      <Logo className="size-6 shrink-0" cornerRadius={5} />
+      <span className="truncate">23rd</span>
+    </Link>
+  )
+}
+
+/** Logo, search, page tree, and the footer row — shared by desktop and the mobile sheet. */
+function SidebarBody({
+  tree,
+  githubStars,
+}: {
+  tree: RootNode
+  githubStars: number | null
+}) {
+  return (
+    <>
+      <SidebarHeader className="gap-4 px-4 pt-6 pb-2">
+        <Wordmark />
+        <SearchTrigger variant="field" className="w-full" />
+      </SidebarHeader>
+      <SidebarContent className="px-2 pb-6">
+        <DocsSidebar tree={tree} embedded />
+      </SidebarContent>
+      <SidebarFooter className="mx-4 gap-3 border-t px-0 pt-3 pb-4">
+        <div className="flex items-center gap-1">
+          <GithubStars stars={githubStars} className="-ms-2.5" />
+          <ThemeToggle />
+          <Link
+            href="/sponsors"
+            className="ms-auto inline-flex h-8 items-center gap-1.5 rounded-lg px-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <RiHeartFill className="size-3.5" />
+            Sponsor
+          </Link>
+        </div>
+        <nav
+          aria-label="Secondary"
+          className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground"
+        >
+          {FOOTER_LINKS.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="hover:text-foreground"
+            >
+              {link.label}
+            </Link>
+          ))}
+          <a
+            href={`mailto:${SUPPORT_EMAIL}`}
+            className="break-all hover:text-foreground"
           >
-            <feGaussianBlur in="SourceGraphic" stdDeviation={layer.std} />
-          </filter>
-        ))}
-      </defs>
-    </svg>
+            {SUPPORT_EMAIL}
+          </a>
+        </nav>
+      </SidebarFooter>
+    </>
   )
 }
 
-function WindowEdgeFade({
-  edge,
-  uid,
+/** Below `md` the page tree lives in a sheet opened from the top bar. */
+function MobileSidebar({
+  tree,
+  githubStars,
 }: {
-  edge: "top" | "bottom"
-  uid: string
+  tree: RootNode
+  githubStars: number | null
 }) {
-  const isTop = edge === "top"
-  const dir = isTop ? "to bottom" : "to top"
+  const { isMobile } = useSidebar()
+  if (!isMobile) return null
 
   return (
-    <div
-      aria-hidden
-      className={cn(
-        "pointer-events-none absolute inset-x-0 z-10 h-16 xl:right-56",
-        isTop ? "top-0" : "bottom-0"
-      )}
-    >
-      {EDGE_BLUR_LAYERS.map((layer, i) => {
-        const mask = `linear-gradient(${dir}, black ${layer.opaque}%, transparent ${layer.fade}%)`
-        return (
-          <div
-            key={i}
-            className="absolute inset-0"
-            style={{
-              backdropFilter: `url(#docs-edge-blur-${i}-${uid})`,
-              WebkitBackdropFilter: `url(#docs-edge-blur-${i}-${uid})`,
-              maskImage: mask,
-              WebkitMaskImage: mask,
-            }}
-          />
-        )
-      })}
-    </div>
+    <Sidebar id="docs-sidebar" aria-label="Documentation">
+      <SidebarBody tree={tree} githubStars={githubStars} />
+    </Sidebar>
   )
 }
 
 /**
- * Docs chrome: full-viewport panes split by borders.
+ * Docs chrome: page tree on the bench at the left, the page on an inset
+ * sheet (rendered by the page itself, so its table of contents can sit on
+ * the bench to the right).
  */
 export function DocsShell({
   tree,
@@ -132,115 +140,31 @@ export function DocsShell({
   children: ReactNode
   githubStars?: number | null
 }) {
-  const pathname = usePathname()
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const blurUid = useId().replace(/:/g, "")
-
-  useEffect(() => {
-    scrollRef.current?.scrollTo({ top: 0 })
-  }, [pathname])
-
-  useEffect(() => {
-    const html = document.documentElement
-    const { overflow: htmlOverflow, scrollbarGutter } = html.style
-    const bodyOverflow = document.body.style.overflow
-    html.style.overflow = "hidden"
-    html.style.scrollbarGutter = "auto"
-    document.body.style.overflow = "hidden"
-    return () => {
-      html.style.overflow = htmlOverflow
-      html.style.scrollbarGutter = scrollbarGutter
-      document.body.style.overflow = bodyOverflow
-    }
-  }, [])
-
   return (
     <FrameworkProvider>
       <SidebarProvider
         style={sidebarTokens}
-        className="h-svh min-h-0 overflow-hidden bg-background"
+        className="min-h-svh bg-background"
       >
-        <Sidebar
-          id="docs-sidebar"
-          aria-label="Documentation"
-          collapsible="offcanvas"
-        >
-          <SidebarHeader className="flex h-14 flex-row items-center gap-2 border-b px-4 py-0">
-            <Link
-              href="/docs"
-              className="flex min-w-0 items-center gap-2 text-sm font-medium"
-            >
-              <Logo className="size-6 shrink-0" cornerRadius={4} />
-              <span className="truncate">23rd</span>
-            </Link>
-            <DocsSidebarTrigger className="ml-auto shrink-0" />
-          </SidebarHeader>
-          <SidebarContent>
-            <DocsSidebar tree={tree} embedded />
-          </SidebarContent>
-          <SidebarFooter className="border-t px-3 py-3 text-xs text-muted-foreground">
-            <a
-              href={`mailto:${SUPPORT_EMAIL}`}
-              className="break-all hover:text-foreground"
-            >
-              {SUPPORT_EMAIL}
-            </a>
-            <nav aria-label="Secondary" className="flex flex-col gap-1.5">
-              {FOOTER_LINKS.map((link) => (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-foreground"
-                >
-                  {link.label}
-                </Link>
-              ))}
-            </nav>
-          </SidebarFooter>
-        </Sidebar>
-        <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
-          <header className="flex h-14 min-w-0 shrink-0 items-center gap-1 border-b px-4">
-            <DocsSidebarTrigger showWhenCollapsed />
-            <div className="min-w-0 flex-1" />
-            <GithubSponsor className="shrink-0" />
-            <GithubStars stars={githubStars} className="shrink-0" />
-            <SearchTrigger />
-            <ThemeToggle />
-          </header>
-          <div className="relative min-h-0 flex-1 overflow-hidden">
-            <div
-              ref={scrollRef}
-              className="absolute inset-0 overflow-y-auto overscroll-y-contain"
-            >
-              {children}
-            </div>
-            <DocsEdgeBlurDefs uid={blurUid} />
-            <WindowEdgeFade edge="top" uid={blurUid} />
-            <WindowEdgeFade edge="bottom" uid={blurUid} />
-          </div>
-          <footer className="flex shrink-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t px-4 py-2 text-xs text-muted-foreground md:hidden">
-            <a
-              href={`mailto:${SUPPORT_EMAIL}`}
-              className="break-all underline-offset-4 hover:text-foreground hover:underline"
-            >
-              {SUPPORT_EMAIL}
-            </a>
-            <nav
-              aria-label="Secondary"
-              className="flex flex-wrap gap-x-3 gap-y-1"
-            >
-              {FOOTER_LINKS.map((link) => (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  className="hover:text-foreground"
-                >
-                  {link.label}
-                </Link>
-              ))}
-            </nav>
-          </footer>
-        </SidebarInset>
+        <MobileSidebar tree={tree} githubStars={githubStars} />
+        <div className="mx-auto flex w-full max-w-[90rem] items-start">
+          <aside
+            aria-label="Documentation"
+            className="sticky top-0 hidden h-svh w-60 shrink-0 flex-col md:flex"
+          >
+            <SidebarBody tree={tree} githubStars={githubStars} />
+          </aside>
+          <main className="flex min-w-0 flex-1 flex-col">
+            <header className="flex h-14 items-center gap-2 px-3 md:hidden">
+              <DocsSidebarTrigger />
+              <Wordmark />
+              <div className="flex-1" />
+              <SearchTrigger />
+              <ThemeToggle />
+            </header>
+            {children}
+          </main>
+        </div>
       </SidebarProvider>
     </FrameworkProvider>
   )
diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 4b0aa1d..2a5bbc7 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -7,6 +7,7 @@ import { LayoutGroup, motion, useReducedMotion } from "motion/react"
 
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
 import { Logo } from "@/components/logo"
+import { Triad } from "@/components/triad"
 import {
   Sidebar,
   SidebarContent,
@@ -50,7 +51,7 @@ function isCurrent(pathname: string, url: string) {
 }
 
 const headingClassName =
-  "mt-4 mb-0.5 h-auto px-3 py-1 truncate text-[11px] font-medium tracking-[0.16em] text-foreground/35 uppercase first:mt-0"
+  "mt-6 mb-1 h-auto truncate px-2 py-1 font-mono text-[10.5px] font-normal tracking-[0.18em] text-muted-foreground/80 uppercase first:mt-0"
 
 const markSpring = {
   type: "spring" as const,
@@ -59,68 +60,42 @@ const markSpring = {
   mass: 0.7,
 }
 
-function DashMark({
-  layoutId,
-  opacity,
-}: {
-  layoutId: string
-  opacity: number
-}) {
+/** The open page's marker; slides between items as you navigate. */
+function ActiveTriad() {
   const reduce = useReducedMotion() ?? false
 
   return (
     <motion.span
-      layoutId={layoutId}
+      layoutId="docs-sidebar-active"
       aria-hidden
-      className="pointer-events-none ml-2 h-px min-w-3 flex-1 bg-[repeating-linear-gradient(90deg,currentColor_0_5px,transparent_5px_8px)]"
-      initial={false}
-      animate={{ opacity }}
+      className="me-2.5 flex shrink-0"
       transition={reduce ? { duration: 0 } : markSpring}
-    />
+    >
+      <Triad />
+    </motion.span>
   )
 }
 
-type TabHover = {
-  hoveredUrl: string | null
-  onHover: (url: string) => void
-}
-
 function PageItem({
   node,
   pathname,
-  indented = false,
-  hoveredUrl,
-  onHover,
 }: {
   node: PageNode
   pathname: string
-  indented?: boolean
-} & TabHover) {
+}) {
   const active = isCurrent(pathname, node.url)
-  const showHover = hoveredUrl === node.url && !active
 
   return (
-    <SidebarMenuItem
-      onPointerEnter={() => onHover(node.url)}
-      onMouseEnter={() => onHover(node.url)}
-    >
+    <SidebarMenuItem>
       <SidebarMenuButton
         render={
           <Link href={node.url} aria-label={String(node.name ?? "Page")} />
         }
         isActive={active}
-        className={cn(
-          "h-8 gap-0 overflow-visible rounded-lg bg-transparent font-normal text-foreground/45 transition-colors duration-200 hover:bg-transparent hover:text-foreground/80 active:bg-transparent data-active:bg-transparent data-active:font-normal data-active:text-foreground data-active:hover:bg-transparent data-active:hover:text-foreground [&>span:last-child]:overflow-visible [&>span:last-child]:text-clip",
-          indented && "pl-6"
-        )}
+        className="h-8 gap-0 rounded-lg bg-transparent px-2 font-normal text-foreground/70 transition-colors duration-150 hover:bg-transparent hover:text-foreground active:bg-transparent data-active:bg-transparent data-active:font-medium data-active:text-foreground data-active:hover:bg-transparent"
       >
+        {active ? <ActiveTriad /> : null}
         <span className="min-w-0 truncate">{node.name}</span>
-        {active ? (
-          <DashMark layoutId="docs-sidebar-selected-dashes" opacity={0.85} />
-        ) : null}
-        {showHover ? (
-          <DashMark layoutId="docs-sidebar-hover-dashes" opacity={0.4} />
-        ) : null}
       </SidebarMenuButton>
     </SidebarMenuItem>
   )
@@ -143,21 +118,12 @@ function folderKey(node: FolderNode, index: number) {
 function NavItems({
   nodes,
   pathname,
-  indented = false,
-  hoveredUrl,
-  onHover,
 }: {
   nodes: TreeNode[]
   pathname: string
-  indented?: boolean
-} & TabHover) {
-  let inSection = indented
-
+}) {
   return nodes.map((node, i) => {
     if (isSeparator(node)) {
-      if (node.name != null && node.name !== "") {
-        inSection = true
-      }
       return (
         <SeparatorItem
           key={`sep-${String(node.name ?? "")}-${i}`}
@@ -167,16 +133,7 @@ function NavItems({
     }
 
     if (isPage(node)) {
-      return (
-        <PageItem
-          key={node.url}
-          node={node}
-          pathname={pathname}
-          indented={inSection}
-          hoveredUrl={hoveredUrl}
-          onHover={onHover}
-        />
-      )
+      return <PageItem key={node.url} node={node} pathname={pathname} />
     }
 
     if (isFolder(node)) {
@@ -185,25 +142,13 @@ function NavItems({
       return (
         <React.Fragment key={folderKey(node, i)}>
           {node.index ? (
-            <PageItem
-              node={node.index}
-              pathname={pathname}
-              indented={inSection}
-              hoveredUrl={hoveredUrl}
-              onHover={onHover}
-            />
+            <PageItem node={node.index} pathname={pathname} />
           ) : hasSectionedChildren ? null : (
             <SidebarGroupLabel className={headingClassName}>
               {node.name}
             </SidebarGroupLabel>
           )}
-          <NavItems
-            nodes={node.children}
-            pathname={pathname}
-            indented={inSection || hasSectionedChildren || !node.index}
-            hoveredUrl={hoveredUrl}
-            onHover={onHover}
-          />
+          <NavItems nodes={node.children} pathname={pathname} />
         </React.Fragment>
       )
     }
@@ -215,27 +160,14 @@ function NavItems({
 function NavList({
   nodes,
   pathname,
-  indented = false,
 }: {
   nodes: TreeNode[]
   pathname: string
-  indented?: boolean
 }) {
-  const [hoveredUrl, setHoveredUrl] = React.useState<string | null>(null)
-
   return (
     <LayoutGroup id="docs-sidebar-tabs">
-      <SidebarMenu
-        onPointerLeave={() => setHoveredUrl(null)}
-        onMouseLeave={() => setHoveredUrl(null)}
-      >
-        <NavItems
-          nodes={nodes}
-          pathname={pathname}
-          indented={indented}
-          hoveredUrl={hoveredUrl}
-          onHover={(url) => setHoveredUrl(url)}
-        />
+      <SidebarMenu>
+        <NavItems nodes={nodes} pathname={pathname} />
       </SidebarMenu>
     </LayoutGroup>
   )
diff --git a/components/search-trigger.tsx b/components/search-trigger.tsx
index 608d5ab..ece6b03 100644
--- a/components/search-trigger.tsx
+++ b/components/search-trigger.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { Fragment } from "react"
 import { Dialog } from "@base-ui/react/dialog"
 import { useSearchContext } from "fumadocs-ui/contexts/search"
 import { RiSearchLine } from "@remixicon/react"
@@ -7,11 +8,42 @@ import { RiSearchLine } from "@remixicon/react"
 import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 
-export function SearchTrigger({ className }: { className?: string }) {
-  const { enabled, dialogHandle } = useSearchContext()
+/** Opens docs search, as an icon button or as an input-like field with its shortcut. */
+export function SearchTrigger({
+  className,
+  variant = "icon",
+}: {
+  className?: string
+  variant?: "icon" | "field"
+}) {
+  const { enabled, dialogHandle, hotKey } = useSearchContext()
 
   if (!enabled) return null
 
+  if (variant === "field") {
+    return (
+      <Dialog.Trigger
+        handle={dialogHandle}
+        type="button"
+        aria-label="Search docs"
+        className={cn(
+          "flex h-9 w-56 items-center gap-2 rounded-lg border bg-card px-2.5 text-sm text-muted-foreground transition-colors outline-none hover:border-foreground/25 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30",
+          className
+        )}
+      >
+        <RiSearchLine className="size-4 shrink-0" />
+        <span>Search docs</span>
+        {hotKey.length > 0 ? (
+          <kbd className="ms-auto inline-flex items-center gap-0.5 font-sans text-xs text-muted-foreground">
+            {hotKey.map((key, i) => (
+              <Fragment key={i}>{key.display}</Fragment>
+            ))}
+          </kbd>
+        ) : null}
+      </Dialog.Trigger>
+    )
+  }
+
   return (
     <Dialog.Trigger
       handle={dialogHandle}
diff --git a/components/triad.tsx b/components/triad.tsx
new file mode 100644
index 0000000..c403178
--- /dev/null
+++ b/components/triad.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils"
+
+/**
+ * Three subpixel bars. Marks the component that is currently "on" — the open
+ * page in the sidebar, the feed on the docs monitor.
+ */
+export function Triad({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden
+      data-slot="triad"
+      className={cn("inline-flex h-2.5 shrink-0 gap-px", className)}
+    >
+      <span className="w-[3px] rounded-[1px] bg-(--triad-r)" />
+      <span className="w-[3px] rounded-[1px] bg-(--triad-g)" />
+      <span className="w-[3px] rounded-[1px] bg-(--triad-b)" />
+    </span>
+  )
+}

From cb4205cdcd53d7a77d60c1e5cc74a22c038a2e1d Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:35:07 +0530
Subject: [PATCH 03/49] Set docs pages on an inset sheet with the outline
 beside it.

Content sits on a bordered sheet under a dot-matrix component title, and the outline moves to the bench on the right with the stepped Fumadocs track and a sponsor card underneath.
---
 app/docs/[[...slug]]/page.tsx |  54 +++++++-----
 components/docs-toc.tsx       | 155 ++++++++++------------------------
 2 files changed, 79 insertions(+), 130 deletions(-)

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 2451817..1e92853 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -15,6 +15,7 @@ import {
   SITE_TITLE,
 } from "@/lib/seo"
 import { source } from "@/lib/source"
+import { cn } from "@/lib/utils"
 
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>
@@ -24,28 +25,41 @@ export default async function Page(props: {
   if (!page) notFound()
 
   const MDX = page.data.body
+  const component = isComponentPage(params.slug)
 
   return (
-    <div className="flex min-h-full w-full">
-      <div className="flex min-w-0 flex-1 justify-center px-6 py-8 md:px-10 md:py-12">
-        <article className="w-full min-w-0 max-w-2xl">
-          <JsonLd
-            data={docsJsonLd({
-              title: page.data.title,
-              description: page.data.description,
-              path: docsPath(params.slug),
-              slug: params.slug,
-            })}
-          />
-          <h1 className="text-3xl font-semibold tracking-tight">
-            {page.data.title}
-          </h1>
-          {page.data.description ? (
-            <p className="mt-3 text-lg text-muted-foreground">
-              {page.data.description}
-            </p>
-          ) : null}
-          <div className="prose mt-8">
+    <div className="flex w-full items-start gap-8 px-2 md:ps-0 md:pe-3 md:pt-3 xl:pe-8">
+      <div
+        data-slot="docs-sheet"
+        className="@container/page min-h-[calc(100svh-0.75rem)] min-w-0 flex-1 rounded-t-2xl border border-b-0 bg-background [--background:var(--sheet)] px-5 py-10 md:px-10 md:py-12"
+      >
+        <JsonLd
+          data={docsJsonLd({
+            title: page.data.title,
+            description: page.data.description,
+            path: docsPath(params.slug),
+            slug: params.slug,
+          })}
+        />
+        <article className="mx-auto w-full min-w-0 max-w-[52rem]">
+          <header className="mb-12">
+            <h1
+              className={cn(
+                "min-w-0",
+                component
+                  ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
+                  : "text-4xl font-semibold tracking-tight"
+              )}
+            >
+              {page.data.title}
+            </h1>
+            {page.data.description ? (
+              <p className="mt-5 max-w-2xl text-[17px] leading-relaxed text-muted-foreground">
+                {page.data.description}
+              </p>
+            ) : null}
+          </header>
+          <div className="prose">
             <MDX
               components={getMDXComponents({
                 a: createRelativeLink(source, page),
diff --git a/components/docs-toc.tsx b/components/docs-toc.tsx
index 0b95e7a..ffd6bb1 100644
--- a/components/docs-toc.tsx
+++ b/components/docs-toc.tsx
@@ -1,117 +1,52 @@
 "use client"
 
-import {
-  type TOCItemType,
-  AnchorProvider,
-  TOCItem as PrimitiveTOCItem,
-  useItems,
-} from "fumadocs-core/toc"
-import { useEffect, useRef, useState, type RefObject } from "react"
-
-import { cn } from "@/lib/utils"
-
+import type { TOCItemType } from "fumadocs-core/toc"
+import { TOCProvider, TOCScrollArea } from "fumadocs-ui/components/toc"
+import { TOCItem, TOCItems } from "fumadocs-ui/components/toc/clerk"
+import Link from "next/link"
+import { RiArrowRightUpLine, RiHeartFill } from "@remixicon/react"
+
+/**
+ * Right rail on the bench, outside the page sheet: the page outline, with
+ * the sponsor slot underneath.
+ */
 export function DocsToc({ items }: { items: TOCItemType[] }) {
-  if (items.length === 0) return null
-
   return (
-    <aside className="hidden w-56 shrink-0 border-l xl:block">
-      <div className="sticky top-0 px-5 py-8">
-        <p className="mb-3 text-sm font-medium text-muted-foreground">
-          On this page
-        </p>
-        <AnchorProvider toc={items}>
-          <TocList items={items} />
-        </AnchorProvider>
-      </div>
+    <aside className="sticky top-0 hidden h-svh w-56 shrink-0 flex-col gap-6 pt-14 pb-6 xl:flex">
+      {items.length > 0 ? (
+        <TOCProvider toc={items}>
+          <div className="flex min-h-0 flex-col">
+            <p className="mb-1 text-[13px] text-muted-foreground">
+              On this page
+            </p>
+            <TOCScrollArea>
+              <TOCItems>
+                {items.map((item) => (
+                  <TOCItem
+                    key={item.url}
+                    item={item}
+                    className="text-[13px] data-[active=true]:text-foreground"
+                  />
+                ))}
+              </TOCItems>
+            </TOCScrollArea>
+          </div>
+        </TOCProvider>
+      ) : null}
+
+      <Link
+        href="/sponsors"
+        className="group flex items-start gap-2.5 rounded-lg border bg-card px-3 py-2.5 transition-colors hover:border-foreground/25"
+      >
+        <RiHeartFill className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="text-[13px] text-foreground">Sponsor 23rd</span>
+          <span className="text-xs text-muted-foreground">
+            Your logo and link on 23rd.dev/sponsors
+          </span>
+        </span>
+        <RiArrowRightUpLine className="mt-0.5 size-3.5 shrink-0 text-muted-foreground opacity-60 transition-opacity group-hover:opacity-100" />
+      </Link>
     </aside>
   )
 }
-
-function TocList({ items }: { items: TOCItemType[] }) {
-  const containerRef = useRef<HTMLElement>(null)
-
-  return (
-    <nav ref={containerRef} className="relative ms-0.5">
-      <div
-        aria-hidden
-        className="absolute inset-y-0 start-0 w-0.5 rounded-full bg-foreground/15"
-      />
-      <TocIndicator containerRef={containerRef} />
-      <ul className="flex flex-col">
-        {items.map((item) => (
-          <li key={item.url}>
-            <PrimitiveTOCItem
-              href={item.url}
-              className={cn(
-                "block py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground data-[active=true]:text-foreground",
-                item.depth <= 2 && "ps-3.5",
-                item.depth === 3 && "ps-5.5",
-                item.depth >= 4 && "ps-7.5"
-              )}
-            >
-              {item.title}
-            </PrimitiveTOCItem>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
-
-function TocIndicator({
-  containerRef,
-}: {
-  containerRef: RefObject<HTMLElement | null>
-}) {
-  const items = useItems()
-  const [thumb, setThumb] = useState({ top: 0, height: 0, visible: false })
-
-  useEffect(() => {
-    const container = containerRef.current
-
-    function update() {
-      if (!container) {
-        setThumb((prev) => ({ ...prev, visible: false }))
-        return
-      }
-
-      const activeLinks = items
-        .filter((item) => item.active)
-        .map((item) =>
-          container.querySelector<HTMLElement>(`a[href="#${CSS.escape(item.id)}"]`)
-        )
-        .filter((el): el is HTMLElement => el != null)
-
-      if (activeLinks.length === 0) {
-        setThumb((prev) => ({ ...prev, visible: false }))
-        return
-      }
-
-      const first = activeLinks[0]
-      const last = activeLinks[activeLinks.length - 1]
-      const top = first.offsetTop
-      const height = last.offsetTop + last.offsetHeight - top
-
-      setThumb({ top, height, visible: true })
-    }
-
-    update()
-    if (!container) return
-
-    const observer = new ResizeObserver(update)
-    observer.observe(container)
-    return () => observer.disconnect()
-  }, [items, containerRef])
-
-  return (
-    <div
-      aria-hidden
-      className="absolute start-0 w-0.5 rounded-full bg-foreground transition-[top,height,opacity] duration-300 ease-out"
-      style={{
-        top: thumb.top,
-        height: thumb.height,
-        opacity: thumb.visible ? 1 : 0,
-      }}
-    />
-  )
-}

From 48e137cbc80b3c2afd130128dd8af41a85edfa4f Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:35:17 +0530
Subject: [PATCH 04/49] Add Copy Markdown and Open actions to docs pages.

Each page title carries a button that copies the page as Markdown, bundled at build time so it works on Workers, and a menu that opens the page in ChatGPT or Claude or shows its source on GitHub.
---
 app/docs/[[...slug]]/page.tsx |  32 ++++++---
 components/page-actions.tsx   | 132 ++++++++++++++++++++++++++++++++++
 source.config.ts              |   4 ++
 3 files changed, 158 insertions(+), 10 deletions(-)
 create mode 100644 components/page-actions.tsx

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 1e92853..cd46f8a 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -6,7 +6,10 @@ import { DocsPager } from "@/components/docs-pager"
 import { DocsToc } from "@/components/docs-toc"
 import { JsonLd } from "@/components/json-ld"
 import { getMDXComponents } from "@/components/mdx"
+import { PageActions } from "@/components/page-actions"
+import { getGithubRepoUrl } from "@/lib/github"
 import {
+  absoluteUrl,
   buildPageMetadata,
   docsJsonLd,
   docsPath,
@@ -26,6 +29,7 @@ export default async function Page(props: {
 
   const MDX = page.data.body
   const component = isComponentPage(params.slug)
+  const markdown = await page.data.getText("processed")
 
   return (
     <div className="flex w-full items-start gap-8 px-2 md:ps-0 md:pe-3 md:pt-3 xl:pe-8">
@@ -43,16 +47,24 @@ export default async function Page(props: {
         />
         <article className="mx-auto w-full min-w-0 max-w-[52rem]">
           <header className="mb-12">
-            <h1
-              className={cn(
-                "min-w-0",
-                component
-                  ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
-                  : "text-4xl font-semibold tracking-tight"
-              )}
-            >
-              {page.data.title}
-            </h1>
+            <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
+              <h1
+                className={cn(
+                  "min-w-0",
+                  component
+                    ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
+                    : "text-4xl font-semibold tracking-tight"
+                )}
+              >
+                {page.data.title}
+              </h1>
+              <PageActions
+                markdown={markdown}
+                pageUrl={absoluteUrl(page.url)}
+                sourceUrl={`${getGithubRepoUrl()}/blob/main/content/docs/${page.path}`}
+                className="sm:mt-1"
+              />
+            </div>
             {page.data.description ? (
               <p className="mt-5 max-w-2xl text-[17px] leading-relaxed text-muted-foreground">
                 {page.data.description}
diff --git a/components/page-actions.tsx b/components/page-actions.tsx
new file mode 100644
index 0000000..ba3aef2
--- /dev/null
+++ b/components/page-actions.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import {
+  RiArrowDownSLine,
+  RiCheckLine,
+  RiClaudeFill,
+  RiFileCopyLine,
+  RiGithubFill,
+  RiOpenaiFill,
+} from "@remixicon/react"
+import { toast } from "sonner"
+
+import { trackEvent } from "@/components/tracwell-analytics"
+import { Button, buttonVariants } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+
+const actionClassName =
+  "h-8 gap-1.5 rounded-lg border-border bg-card px-2.5 text-[13px] font-normal text-muted-foreground shadow-none hover:bg-card hover:text-foreground dark:bg-card dark:hover:bg-card"
+
+/**
+ * Title-row actions on a docs page: copy the page as Markdown, or open it in
+ * an assistant or on GitHub.
+ */
+export function PageActions({
+  markdown,
+  pageUrl,
+  sourceUrl,
+  className,
+}: {
+  markdown: string
+  /** Absolute URL of this docs page. */
+  pageUrl: string
+  /** GitHub URL of the page's MDX source. */
+  sourceUrl: string
+  className?: string
+}) {
+  const [copied, setCopied] = useState(false)
+  const timeoutRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  async function onCopy() {
+    try {
+      await navigator.clipboard.writeText(markdown)
+      setCopied(true)
+      toast.success("Copied page as Markdown")
+      trackEvent("code_copied", { source: "page_markdown" })
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
+      timeoutRef.current = window.setTimeout(() => setCopied(false), 1600)
+    } catch {
+      toast.error("Couldn’t copy Markdown")
+    }
+  }
+
+  const prompt = encodeURIComponent(
+    `Read ${pageUrl} so I can ask questions about it.`
+  )
+
+  const destinations = [
+    {
+      label: "Open in ChatGPT",
+      href: `https://chatgpt.com/?hints=search&q=${prompt}`,
+      Icon: RiOpenaiFill,
+    },
+    {
+      label: "Open in Claude",
+      href: `https://claude.ai/new?q=${prompt}`,
+      Icon: RiClaudeFill,
+    },
+    {
+      label: "View source on GitHub",
+      href: sourceUrl,
+      Icon: RiGithubFill,
+    },
+  ]
+
+  return (
+    <div className={cn("flex shrink-0 items-center gap-2", className)}>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onCopy}
+        className={actionClassName}
+      >
+        {copied ? (
+          <RiCheckLine className="size-3.5" />
+        ) : (
+          <RiFileCopyLine className="size-3.5" />
+        )}
+        {copied ? "Copied" : "Copy Markdown"}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          className={cn(
+            buttonVariants({ variant: "outline" }),
+            actionClassName,
+            "pe-2"
+          )}
+        >
+          Open
+          <RiArrowDownSLine className="size-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-auto min-w-52 rounded-xl"
+        >
+          {destinations.map(({ label, href, Icon }) => (
+            <DropdownMenuItem
+              key={label}
+              className="rounded-lg"
+              render={<a href={href} target="_blank" rel="noreferrer" />}
+            >
+              <Icon className="text-muted-foreground" />
+              {label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/source.config.ts b/source.config.ts
index 4bc1220..1f14da8 100644
--- a/source.config.ts
+++ b/source.config.ts
@@ -2,6 +2,10 @@ import { defineConfig, defineDocs } from "fumadocs-mdx/config"
 
 export const docs = defineDocs({
   dir: "content/docs",
+  docs: {
+    // Bundles each page's Markdown so "Copy Markdown" works without fs access.
+    postprocess: { includeProcessedMarkdown: true },
+  },
 })
 
 export default defineConfig({

From 73500b3383edc1e022d04c4b6faed31fcd0d740b Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:35:24 +0530
Subject: [PATCH 05/49] Frame each preview with its props as control rows.

The live stage sits as a screen inside a frame, the props strip joins that frame underneath, and every control is a full-width row with its value on the right; sliders fill the row as you drag.
---
 components/component-controls.tsx | 312 ++++++++++++++----------------
 components/component-preview.tsx  |  42 ++--
 2 files changed, 167 insertions(+), 187 deletions(-)

diff --git a/components/component-controls.tsx b/components/component-controls.tsx
index 0b8c07c..4a8b5a8 100644
--- a/components/component-controls.tsx
+++ b/components/component-controls.tsx
@@ -3,9 +3,7 @@
 import {
   useCallback,
   useId,
-  useLayoutEffect,
   useMemo,
-  useRef,
   useState,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
@@ -95,7 +93,7 @@ export function formatComponentSnippet(
 
 export type ComponentControlsProps = {
   children: ReactNode
-  /** Label in the figcaption — matches CliCommand / ComponentPreview */
+  /** Heading for the props strip */
   title?: string
   hasChanges?: boolean
   onReset?: () => void
@@ -106,9 +104,12 @@ export type ComponentControlsProps = {
   snippetProps?: Record<string, unknown>
 }
 
+/** Row chrome shared by every control, and applied to custom rows demos pass in. */
+const rowClassName = "rounded-lg border bg-background"
+
 /**
- * Docs section for live prop controls — same chrome as CliCommand, tables,
- * and ComponentPreview (`rounded-2xl bg-muted/50` figure + ringed stage).
+ * Live prop controls. Directly after ComponentPreview it joins the preview's
+ * frame, so the props read as the screen's control strip.
  */
 export function ComponentControls({
   children,
@@ -127,27 +128,15 @@ export function ComponentControls({
     <figure
       data-slot="component-controls"
       className={cn(
-        "not-prose my-6 w-full overflow-hidden rounded-2xl bg-muted/50",
+        "not-prose my-8 rounded-2xl border bg-card",
+        "[[data-slot=component-preview]+&]:mt-0 [[data-slot=component-preview]+&]:rounded-t-none [[data-slot=component-preview]+&]:border-t-0",
         className
       )}
     >
-      <figcaption className="flex h-9 items-center justify-between gap-3 px-3.5">
-        <span className="text-sm font-medium text-foreground/90">{title}</span>
+      <figcaption className="flex h-12 items-center justify-between gap-3 px-4">
+        <span className="text-[13px] text-muted-foreground">{title}</span>
         {snippet || onReset ? (
-          <div className="flex items-center">
-            {snippet ? (
-              <CopyButton
-                size="xs"
-                text={snippet}
-                label="Copy"
-                onCopied={() =>
-                  trackEvent("code_copied", {
-                    source: "component_snippet",
-                    ...(component ? { component } : {}),
-                  })
-                }
-              />
-            ) : null}
+          <div className="-me-2 flex items-center">
             {onReset ? (
               <Button
                 type="button"
@@ -156,20 +145,37 @@ export function ComponentControls({
                 onClick={onReset}
                 disabled={!hasChanges}
                 aria-label="Reset props"
-                className="text-muted-foreground"
+                className="rounded-md text-muted-foreground"
               >
                 <RiRefreshLine data-icon="inline-start" />
                 Reset
               </Button>
             ) : null}
+            {snippet ? (
+              <CopyButton
+                size="xs"
+                text={snippet}
+                label="Copy JSX"
+                className="rounded-md"
+                onCopied={() =>
+                  trackEvent("code_copied", {
+                    source: "component_snippet",
+                    ...(component ? { component } : {}),
+                  })
+                }
+              />
+            ) : null}
           </div>
         ) : null}
       </figcaption>
 
-      <div className="p-1 pt-0">
-        <div className="flex flex-col gap-4 rounded-[calc(var(--radius-2xl)-2px)] bg-background px-3.5 py-3.5 ring-1 ring-border/80 sm:px-4">
-          {children}
-        </div>
+      <div
+        className={cn(
+          "flex flex-col gap-2 px-3 pb-3",
+          "[&>:not([data-control])]:rounded-lg [&>:not([data-control])]:border [&>:not([data-control])]:bg-background [&>:not([data-control])]:px-3 [&>:not([data-control])]:py-2"
+        )}
+      >
+        {children}
       </div>
     </figure>
   )
@@ -182,13 +188,6 @@ function formatValue(value: number) {
   return value.toFixed(2)
 }
 
-function tickCount(min: number, max: number, step: number) {
-  if (step <= 0 || max <= min) return 9
-  const steps = Math.round((max - min) / step)
-  if (steps <= 12) return steps + 1
-  return 9
-}
-
 export type ControlSliderProps = {
   label: string
   value: number
@@ -206,8 +205,7 @@ function snapToStep(raw: number, min: number, max: number, step: number) {
   return Number(Math.min(max, Math.max(min, snapped)).toFixed(precision))
 }
 
-const THUMB_WIDTH = 4
-
+/** A whole-row slider: drag anywhere on the row; the fill is the value. */
 export function ControlSlider({
   label,
   value,
@@ -219,41 +217,13 @@ export function ControlSlider({
   className,
 }: ControlSliderProps) {
   const id = useId()
-  const pillRef = useRef<HTMLDivElement>(null)
-  const trackRef = useRef<HTMLDivElement>(null)
-  const [fillWidth, setFillWidth] = useState(0)
-
   const progress = max === min ? 0 : (value - min) / (max - min)
-  const ticks = tickCount(min, max, step)
-
-  const syncMetrics = useCallback(() => {
-    const pill = pillRef.current
-    const track = trackRef.current
-    if (!pill || !track) return
-    const pillBox = pill.getBoundingClientRect()
-    const trackBox = track.getBoundingClientRect()
-    const travel = Math.max(0, trackBox.width - THUMB_WIDTH)
-    const offset = progress * travel
-    setFillWidth(trackBox.left - pillBox.left + offset + THUMB_WIDTH)
-  }, [progress])
-
-  useLayoutEffect(() => {
-    syncMetrics()
-    const pill = pillRef.current
-    if (!pill || typeof ResizeObserver === "undefined") return
-    const observer = new ResizeObserver(syncMetrics)
-    observer.observe(pill)
-    return () => observer.disconnect()
-  }, [syncMetrics])
 
   const commitFromClientX = useCallback(
-    (clientX: number) => {
-      const track = trackRef.current
-      if (!track) return
-      const { left, width } = track.getBoundingClientRect()
-      const travel = Math.max(0, width - THUMB_WIDTH)
-      if (travel <= 0) return
-      const ratio = Math.min(1, Math.max(0, (clientX - left - THUMB_WIDTH / 2) / travel))
+    (element: HTMLElement, clientX: number) => {
+      const { left, width } = element.getBoundingClientRect()
+      if (width <= 0) return
+      const ratio = Math.min(1, Math.max(0, (clientX - left) / width))
       onChange(snapToStep(min + ratio * (max - min), min, max, step))
     },
     [max, min, onChange, step]
@@ -262,61 +232,49 @@ export function ControlSlider({
   function onPointerDown(event: ReactPointerEvent<HTMLDivElement>) {
     if (event.button !== 0) return
     event.currentTarget.setPointerCapture(event.pointerId)
-    commitFromClientX(event.clientX)
+    commitFromClientX(event.currentTarget, event.clientX)
   }
 
   function onPointerMove(event: ReactPointerEvent<HTMLDivElement>) {
     if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
-    commitFromClientX(event.clientX)
+    commitFromClientX(event.currentTarget, event.clientX)
   }
 
   return (
-    <div className={cn("flex items-center gap-2.5", className)}>
+    <div
+      data-control="slider"
+      className={cn(
+        rowClassName,
+        "relative flex h-10 cursor-ew-resize touch-none items-center overflow-hidden select-none focus-within:ring-2 focus-within:ring-ring/40",
+        className
+      )}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+    >
       <div
-        ref={pillRef}
-        className="relative flex h-9 min-w-0 flex-1 cursor-ew-resize select-none items-center overflow-hidden rounded-xl bg-muted focus-within:ring-2 focus-within:ring-ring/30"
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
+        aria-hidden
+        className="pointer-events-none absolute inset-y-0 left-0 border-e border-foreground/25 bg-foreground/[0.07]"
+        style={{ width: `${progress * 100}%` }}
+      />
+      <label
+        htmlFor={id}
+        className="pointer-events-none relative truncate ps-3 text-sm text-foreground/85"
       >
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-y-0 left-0 flex items-center justify-end rounded-xl bg-foreground/10 pe-0.5"
-          style={{ width: Math.max(fillWidth, 18) }}
-        >
-          <span className="h-3.5 w-1 rounded-sm bg-foreground/45" />
-        </div>
-
-        <span className="pointer-events-none relative w-[4.75rem] shrink-0 truncate ps-3 text-sm text-muted-foreground">
-          {label}
-        </span>
-
-        <div ref={trackRef} className="relative mx-2 h-full min-w-0 flex-1 pe-2">
-          <div
-            aria-hidden
-            className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between"
-          >
-            {Array.from({ length: ticks }, (_, i) => (
-              <span key={i} className="h-2 w-px bg-foreground/20" />
-            ))}
-          </div>
-        </div>
-
-        <input
-          id={id}
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          aria-label={label}
-          onChange={(event) => onChange(Number(event.target.value))}
-          className="sr-only"
-        />
-      </div>
-
-      <span className="w-8 shrink-0 text-right text-sm text-foreground tabular-nums">
+        {label}
+      </label>
+      <span className="pointer-events-none relative ms-auto ps-3 pe-3 font-mono text-[12.5px] text-foreground tabular-nums">
         {format(value)}
       </span>
+      <input
+        id={id}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+        className="sr-only"
+      />
     </div>
   )
 }
@@ -339,9 +297,16 @@ export function ControlSwitch({
   const id = useId()
 
   return (
-    <div className={cn("flex items-center justify-between gap-4", className)}>
-      <div className="flex min-w-0 flex-col gap-0.5">
-        <label htmlFor={id} className="text-sm font-medium text-foreground/90">
+    <div
+      data-control="switch"
+      className={cn(
+        rowClassName,
+        "flex min-h-10 items-center justify-between gap-4 px-3 py-2",
+        className
+      )}
+    >
+      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2.5 gap-y-0.5">
+        <label htmlFor={id} className="text-sm text-foreground/85">
           {label}
         </label>
         {description ? (
@@ -375,12 +340,22 @@ export function ControlColor({
   const hex = toHex6(value)
 
   return (
-    <div className={cn("flex items-center justify-between gap-4", className)}>
-      <label htmlFor={id} className="text-sm font-medium text-foreground/90">
+    <div
+      data-control="color"
+      className={cn(
+        rowClassName,
+        "flex h-10 items-center justify-between gap-4 ps-3 pe-2",
+        className
+      )}
+    >
+      <label htmlFor={id} className="text-sm text-foreground/85">
         {label}
       </label>
-      <div className="flex items-center gap-2">
-        <label className="relative size-8 shrink-0 cursor-pointer overflow-hidden rounded-2xl ring-1 ring-border/80 transition-[box-shadow] hover:ring-ring/40 focus-within:ring-3 focus-within:ring-ring/30">
+      <div className="flex items-center gap-2.5">
+        <span className="font-mono text-[12.5px] text-foreground tabular-nums">
+          {hex.toLowerCase()}
+        </span>
+        <span className="relative size-6 shrink-0 cursor-pointer overflow-hidden rounded-md ring-1 ring-border transition-[box-shadow] focus-within:ring-2 focus-within:ring-ring hover:ring-foreground/30">
           <span
             aria-hidden
             className="absolute inset-0"
@@ -393,9 +368,6 @@ export function ControlColor({
             onChange={(e) => onChange(e.target.value.toUpperCase())}
             className="absolute inset-0 size-full cursor-pointer opacity-0"
           />
-        </label>
-        <span className="font-mono text-xs text-muted-foreground uppercase tabular-nums">
-          {hex}
         </span>
       </div>
     </div>
@@ -426,59 +398,65 @@ export function ControlColors({
   const [customOpen, setCustomOpen] = useState(activeIndex === -1)
 
   return (
-    <div className={cn("flex flex-col gap-2.5", className)}>
-      <span className="text-sm font-medium text-foreground/90">{label}</span>
-      <div className="flex flex-wrap items-center gap-2">
-        {fitted.map((palette, index) => {
-          const selected = index === activeIndex && !customOpen
-          return (
-            <button
-              key={palette.join("-")}
-              type="button"
-              aria-label={`${label} palette ${index + 1}`}
-              aria-pressed={selected}
-              onClick={() => {
-                setCustomOpen(false)
-                onChange(palette)
-              }}
-              className={cn(
-                "flex h-9 overflow-hidden rounded-2xl ring-1 transition-[box-shadow]",
-                selected
-                  ? "ring-2 ring-ring"
-                  : "ring-border/80 hover:ring-ring/40"
-              )}
-            >
-              {palette.map((color, colorIndex) => (
-                <span
-                  key={`${color}-${colorIndex}`}
-                  className="h-full w-3.5"
-                  style={{ backgroundColor: color }}
-                />
-              ))}
-            </button>
-          )
-        })}
-
-        <Button
-          type="button"
-          variant={customOpen ? "secondary" : "outline"}
-          size="xs"
-          aria-pressed={customOpen}
-          onClick={() => setCustomOpen((open) => !open)}
-        >
-          <RiAddLine data-icon="inline-start" />
-          Custom
-        </Button>
+    <div
+      data-control="colors"
+      className={cn(rowClassName, "flex flex-col gap-2.5 px-3 py-2", className)}
+    >
+      <div className="flex min-h-6 flex-wrap items-center justify-between gap-x-4 gap-y-2">
+        <span className="text-sm text-foreground/85">{label}</span>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {fitted.map((palette, index) => {
+            const selected = index === activeIndex && !customOpen
+            return (
+              <button
+                key={palette.join("-")}
+                type="button"
+                aria-label={`${label} palette ${index + 1}`}
+                aria-pressed={selected}
+                onClick={() => {
+                  setCustomOpen(false)
+                  onChange(palette)
+                }}
+                className={cn(
+                  "flex h-6 overflow-hidden rounded-md ring-1 transition-[box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  selected
+                    ? "ring-2 ring-foreground ring-offset-1 ring-offset-background"
+                    : "ring-border hover:ring-foreground/30"
+                )}
+              >
+                {palette.map((color, colorIndex) => (
+                  <span
+                    key={`${color}-${colorIndex}`}
+                    className="h-full w-3"
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </button>
+            )
+          })}
+
+          <Button
+            type="button"
+            variant={customOpen ? "secondary" : "ghost"}
+            size="xs"
+            aria-pressed={customOpen}
+            onClick={() => setCustomOpen((open) => !open)}
+            className="rounded-md"
+          >
+            <RiAddLine data-icon="inline-start" />
+            Custom
+          </Button>
+        </div>
       </div>
 
       {customOpen ? (
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap justify-end gap-1.5">
           {colors.map((color, index) => {
             const hex = toHex6(color)
             return (
               <label
                 key={index}
-                className="relative size-9 cursor-pointer overflow-hidden rounded-2xl ring-1 ring-border/80 transition-[box-shadow] hover:ring-ring/40 focus-within:ring-3 focus-within:ring-ring/30"
+                className="relative size-7 cursor-pointer overflow-hidden rounded-md ring-1 ring-border transition-[box-shadow] focus-within:ring-2 focus-within:ring-ring hover:ring-foreground/30"
               >
                 <span
                   aria-hidden
diff --git a/components/component-preview.tsx b/components/component-preview.tsx
index 96e56e9..5f22057 100644
--- a/components/component-preview.tsx
+++ b/components/component-preview.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react"
+import type { CSSProperties, ReactNode } from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -7,7 +7,7 @@ interface ComponentPreviewProps {
   className?: string
   /** Classes applied to the inner demo stage */
   stageClassName?: string
-  /** Optional label shown above the stage */
+  /** Accessible name for the preview */
   title?: string
   /** Fallback label when title is omitted */
   name?: string
@@ -15,6 +15,13 @@ interface ComponentPreviewProps {
   align?: "center" | "start" | "end"
 }
 
+/** Inside the stage, `bg-background` is the screen, not the sheet. */
+const screenTokens = { "--background": "var(--screen)" } as CSSProperties
+
+/**
+ * The live stage: a screen set in a frame. When ComponentControls follows,
+ * the two share one frame, with the props underneath the screen.
+ */
 export function ComponentPreview({
   children,
   className,
@@ -28,28 +35,23 @@ export function ComponentPreview({
   return (
     <figure
       data-slot="component-preview"
+      aria-label={label}
       className={cn(
-        "not-prose my-6 w-full rounded-2xl bg-muted/50",
+        "not-prose my-8 rounded-2xl border bg-card p-1",
+        "[&:has(+[data-slot=component-controls])]:mb-0 [&:has(+[data-slot=component-controls])]:rounded-b-none [&:has(+[data-slot=component-controls])]:border-b-0 [&:has(+[data-slot=component-controls])]:pb-0",
         className
       )}
     >
-      {label ? (
-        <figcaption className="flex h-9 items-center px-3.5">
-          <span className="text-sm font-medium text-foreground/90">{label}</span>
-        </figcaption>
-      ) : null}
-
-      <div className={cn("p-1", label && "pt-0")}>
-        <div
-          className={cn(
-            "relative flex min-h-[36svh] w-full items-center justify-center overflow-hidden rounded-[calc(var(--radius-2xl)-2px)] bg-background p-8 ring-1 ring-border/80",
-            align === "start" && "items-start justify-start",
-            align === "end" && "items-end justify-end",
-            stageClassName
-          )}
-        >
-          {children}
-        </div>
+      <div
+        style={screenTokens}
+        className={cn(
+          "relative flex min-h-[36svh] w-full items-center justify-center overflow-hidden rounded-xl bg-background p-8 text-foreground ring-1 ring-border",
+          align === "start" && "items-start justify-start",
+          align === "end" && "items-end justify-end",
+          stageClassName
+        )}
+      >
+        {children}
       </div>
     </figure>
   )

From 7972746f82efd5c54a2c9c692378ee55ec846c3f Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:35:24 +0530
Subject: [PATCH 06/49] Add a Preview heading to every component page.

The live demo now has its own section, so it shows up first in the page outline.
---
 content/docs/components/ascii-fluid.mdx        | 2 ++
 content/docs/components/ascii-logo.mdx         | 2 ++
 content/docs/components/dithered-404.mdx       | 2 ++
 content/docs/components/folio.mdx              | 2 ++
 content/docs/components/gooey-color-picker.mdx | 2 ++
 content/docs/components/live-orb.mdx           | 2 ++
 content/docs/components/logo-burst.mdx         | 2 ++
 content/docs/components/phosphor-score.mdx     | 2 ++
 content/docs/components/radiant-lines.mdx      | 2 ++
 content/docs/components/shader-fire.mdx        | 2 ++
 content/docs/components/shader-gradient.mdx    | 2 ++
 content/docs/components/shader-sky.mdx         | 2 ++
 content/docs/components/stretchy-footer.mdx    | 2 ++
 content/docs/components/tangle-footer.mdx      | 2 ++
 14 files changed, 28 insertions(+)

diff --git a/content/docs/components/ascii-fluid.mdx b/content/docs/components/ascii-fluid.mdx
index 5344003..4f95213 100644
--- a/content/docs/components/ascii-fluid.mdx
+++ b/content/docs/components/ascii-fluid.mdx
@@ -7,6 +7,8 @@ import { AsciiFluidDemo } from "@/registry/ascii-fluid/ascii-fluid-demo"
 
 Pointer trails dump ink into a fluid sim; density maps onto a full letter/symbol brightness ramp. Theme-aware. No text input — just a background. Press `d` to toggle theme.
 
+## Preview
+
 <AsciiFluidDemo />
 
 ## Installation
diff --git a/content/docs/components/ascii-logo.mdx b/content/docs/components/ascii-logo.mdx
index a210f17..939f6c4 100644
--- a/content/docs/components/ascii-logo.mdx
+++ b/content/docs/components/ascii-logo.mdx
@@ -7,6 +7,8 @@ import { AsciiLogoDemo } from "@/registry/ascii-logo/ascii-logo-demo"
 
 A logo sampled onto a grid of letters and numbers. Move over it and the characters drift aside. Click to scatter them, click again to drop them under gravity, click once more to gather them back. Theme-aware. Press `d` to toggle theme.
 
+## Preview
+
 <AsciiLogoDemo />
 
 ## Installation
diff --git a/content/docs/components/dithered-404.mdx b/content/docs/components/dithered-404.mdx
index d462cf8..93149de 100644
--- a/content/docs/components/dithered-404.mdx
+++ b/content/docs/components/dithered-404.mdx
@@ -7,6 +7,8 @@ import { Dithered404Demo } from "@/registry/dithered-404/dithered-404-demo"
 
 Bold **404** printed as ordered Bayer pixels — or turn **Dither** off for a soft, realistic fire like Shader Fire. Move over the type: the cursor is a coal. Linger and the glyph scorches dark, then burns into embers and smoke. Leftover type stays put until you burn it. After most of the number is gone, it assembles again and you can burn it once more. Press `d` to switch theme.
 
+## Preview
+
 <Dithered404Demo />
 
 ## Installation
diff --git a/content/docs/components/folio.mdx b/content/docs/components/folio.mdx
index a057277..56994ac 100644
--- a/content/docs/components/folio.mdx
+++ b/content/docs/components/folio.mdx
@@ -7,6 +7,8 @@ import { FolioDemo } from "@/registry/folio/folio-demo"
 
 A single sheet. Scroll down and it tips a few degrees one way; scroll up and it tips the other. The lean stays around 16° at a flick so a long page does not swing through the camera. Blur rides the traveling edge. Stop and it springs to the original plane. At the bottom the down-lean lets go; at the top the up-lean does.
 
+## Preview
+
 <FolioDemo />
 
 ## Installation
diff --git a/content/docs/components/gooey-color-picker.mdx b/content/docs/components/gooey-color-picker.mdx
index 76fac12..9cc3e70 100644
--- a/content/docs/components/gooey-color-picker.mdx
+++ b/content/docs/components/gooey-color-picker.mdx
@@ -7,6 +7,8 @@ import { GooeyColorPicker } from "@/registry/gooey-color-picker/gooey-color-pick
 
 A compact swatch that opens into a panel — circular color wheel, alpha slider, and editable hex field. The same button becomes the close control when open.
 
+## Preview
+
 <ComponentPreview title="Gooey Color Picker" stageClassName="min-h-[22rem] items-end overflow-visible pb-8 sm:min-h-[26rem]">
   <GooeyColorPicker defaultValue="hsla(320 90% 58% / 1)" />
 </ComponentPreview>
diff --git a/content/docs/components/live-orb.mdx b/content/docs/components/live-orb.mdx
index 2b2216e..6c14547 100644
--- a/content/docs/components/live-orb.mdx
+++ b/content/docs/components/live-orb.mdx
@@ -7,6 +7,8 @@ import { LiveOrbDemo } from "@/registry/live-orb/live-orb-demo"
 
 A still orb. Two pill eyes ride the curve and look at the cursor. The ball is fully lit — no shade, rim, or highlight. White is the default. Black inverts it. WebGL keeps the same face on an unlit color wash. Custom takes your hex.
 
+## Preview
+
 <LiveOrbDemo />
 
 ## Installation
diff --git a/content/docs/components/logo-burst.mdx b/content/docs/components/logo-burst.mdx
index 451134b..cadf449 100644
--- a/content/docs/components/logo-burst.mdx
+++ b/content/docs/components/logo-burst.mdx
@@ -7,6 +7,8 @@ import { LogoBurstDemo } from "@/registry/logo-burst/logo-burst-demo"
 
 A brand-hero burst. Thin filaments detonate out of the center, tip particles lock in, then the field breathes. Click the field — or bump `replayKey` — to explode again. Default `theme="auto"` follows the site. Press `d` to toggle.
 
+## Preview
+
 <LogoBurstDemo />
 
 ## Installation
diff --git a/content/docs/components/phosphor-score.mdx b/content/docs/components/phosphor-score.mdx
index 34260ca..6392580 100644
--- a/content/docs/components/phosphor-score.mdx
+++ b/content/docs/components/phosphor-score.mdx
@@ -7,6 +7,8 @@ import { PhosphorScoreDemo } from "@/registry/phosphor-score/phosphor-score-demo
 
 A falling score, not a piano roll. Two vertical staves, beamed runs, dynamics, and a scan line: notes dim on the way down, bloom in the phosphor color as they play, then flare out. Default `theme="auto"` follows the site — phosphor on black, forest ink on the page background. `glow` is 0–100 (default `50`) and stays a tight halo on the note. Press `d` to toggle.
 
+## Preview
+
 <PhosphorScoreDemo />
 
 ## Installation
diff --git a/content/docs/components/radiant-lines.mdx b/content/docs/components/radiant-lines.mdx
index a08fa91..6af72ff 100644
--- a/content/docs/components/radiant-lines.mdx
+++ b/content/docs/components/radiant-lines.mdx
@@ -7,6 +7,8 @@ import { RadiantLinesDemo } from "@/registry/radiant-lines/radiant-lines-demo"
 
 Canvas starfield in the spirit of those GSAP hyperspace scroll demos: stars project from the center as streaks. Scroll velocity boosts warp; `displacement` scales how far each star jumps. Release and it eases back to a drift.
 
+## Preview
+
 <RadiantLinesDemo />
 
 ## Installation
diff --git a/content/docs/components/shader-fire.mdx b/content/docs/components/shader-fire.mdx
index cc94c64..def98b4 100644
--- a/content/docs/components/shader-fire.mdx
+++ b/content/docs/components/shader-fire.mdx
@@ -7,6 +7,8 @@ import { ShaderFireDemo } from "@/registry/shader-fire/shader-fire-demo"
 
 Not a wall of flame. Use it as heat under a hero or wait screen so the page feels finished without covering the copy. Sienna / amber / dusty peach on paper in light mode; visible coals on slate in dark. Toggle **Dither** for an ordered Bayer print of the same field. Press `d` to switch theme.
 
+## Preview
+
 <ShaderFireDemo />
 
 ## Installation
diff --git a/content/docs/components/shader-gradient.mdx b/content/docs/components/shader-gradient.mdx
index 2c59621..020763e 100644
--- a/content/docs/components/shader-gradient.mdx
+++ b/content/docs/components/shader-gradient.mdx
@@ -7,6 +7,8 @@ import { ShaderGradientDemo } from "@/registry/shader-gradient/shader-gradient-d
 
 Not a standalone gradient. Use it as atmosphere behind a hero, wait screen, or empty state so the page feels finished without competing with the copy. Soft sky / sage / cream / lavender on paper in light mode; visible dusk hues in dark. Press `d` to toggle.
 
+## Preview
+
 <ShaderGradientDemo />
 
 ## Installation
diff --git a/content/docs/components/shader-sky.mdx b/content/docs/components/shader-sky.mdx
index 69b5370..7a3898e 100644
--- a/content/docs/components/shader-sky.mdx
+++ b/content/docs/components/shader-sky.mdx
@@ -7,6 +7,8 @@ import { ShaderSkyDemo } from "@/registry/shader-sky/shader-sky-demo"
 
 Not a stock photo. Use it as weather behind a hero so light and dark already feel like a forecast. Open blue in light; a gray storm ceiling in dark. Clouds drift continuously, forming and dissolving like weather. Toggle **Glass** for a transparent window film. Press `d` to switch theme. Turn on **Copy** to drop a headline over the sky.
 
+## Preview
+
 <ShaderSkyDemo />
 
 ## Installation
diff --git a/content/docs/components/stretchy-footer.mdx b/content/docs/components/stretchy-footer.mdx
index aad77f3..86cd75d 100644
--- a/content/docs/components/stretchy-footer.mdx
+++ b/content/docs/components/stretchy-footer.mdx
@@ -7,6 +7,8 @@ import { StretchyFooterDemo } from "@/registry/stretchy-footer/stretchy-footer-d
 
 Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page rolls up from the bottom and the aurora fills the stretch. Swap palettes, blur, glow, and snap below.
 
+## Preview
+
 <StretchyFooterDemo />
 
 ## Installation
diff --git a/content/docs/components/tangle-footer.mdx b/content/docs/components/tangle-footer.mdx
index 38edc58..bf45a18 100644
--- a/content/docs/components/tangle-footer.mdx
+++ b/content/docs/components/tangle-footer.mdx
@@ -7,6 +7,8 @@ import { TangleFooterDemo } from "@/registry/tangle-footer/tangle-footer-demo"
 
 Five concentric rings as an **upper semicircle** — outer diameter spans the parent width (`max-w-7xl`) when height is left at the default (half width). A shorter `height` scales the nest down so the arches stay complete. Rings rotate for a continuous marquee. Colors follow the site theme (`html.dark`) unless you override them. Press `d` to toggle.
 
+## Preview
+
 <TangleFooterDemo />
 
 ## Installation

From 553a09b2a78f1b661d79ca997490e6af32bd3532 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:35:24 +0530
Subject: [PATCH 07/49] Put install, code and table blocks on single plates.

Install commands, code, framework switchers, tables and the pager share one bordered plate instead of the nested muted frames.
---
 components/cli-command.tsx    | 62 +++++++++++++++++------------------
 components/docs-pager.tsx     | 12 +++----
 components/framework-code.tsx | 14 +++++---
 components/mdx-pre.tsx        |  6 +---
 components/mdx-table.tsx      | 22 +++++--------
 5 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/components/cli-command.tsx b/components/cli-command.tsx
index ce61c48..b5e3f71 100644
--- a/components/cli-command.tsx
+++ b/components/cli-command.tsx
@@ -169,21 +169,19 @@ export function CliCommand({
     <figure
       data-slot="cli-command"
       className={cn(
-        "not-prose my-6 w-full overflow-hidden rounded-2xl bg-muted/50",
+        "not-prose my-6 w-full overflow-hidden rounded-xl border bg-card",
         className
       )}
     >
-      <div className="flex h-9 items-center justify-between gap-3 px-3.5">
-        <div
-          className="flex size-6 items-center justify-center"
-          aria-hidden
-          title={active.label}
-        >
-          <ActiveIcon className={cn("size-4", active.colorClass)} />
-        </div>
-
-        <div className="flex items-center gap-3">
-          {item ? <FrameworkSelect /> : null}
+      <div className="flex h-10 items-center justify-between gap-3 border-b px-3.5">
+        <div className="flex items-center gap-2">
+          <span
+            className="flex size-5 items-center justify-center"
+            aria-hidden
+            title={active.label}
+          >
+            <ActiveIcon className={cn("size-4", active.colorClass)} />
+          </span>
           <Select
             value={manager}
             onValueChange={onManagerChange}
@@ -196,7 +194,7 @@ export function CliCommand({
             >
               <SelectValue className="flex-none" />
             </SelectTrigger>
-            <SelectContent align="end" alignItemWithTrigger={false}>
+            <SelectContent align="start" alignItemWithTrigger={false}>
               <SelectGroup>
                 {PACKAGE_MANAGERS.map(({ value, label }) => (
                   <SelectItem key={value} value={value}>
@@ -207,27 +205,27 @@ export function CliCommand({
             </SelectContent>
           </Select>
         </div>
+
+        {item ? <FrameworkSelect /> : null}
       </div>
 
-      <div className="p-1 pt-0">
-        <div className="flex items-center gap-2 rounded-[calc(var(--radius-2xl)-2px)] bg-background py-1.5 pr-1.5 pl-3.5 ring-1 ring-border/80">
-          <pre className="min-w-0 flex-1 overflow-x-auto font-mono text-[13px] leading-6 text-foreground/90">
-            <code>{activeCommand}</code>
-          </pre>
-          <CopyButton
-            text={activeCommand}
-            label="Copy command"
-            errorMessage="Couldn’t copy command"
-            onCopied={() =>
-              trackEvent("cli_command_copied", {
-                package_manager: manager,
-                framework,
-                source: github ? "github" : "registry",
-                ...(item ? { item } : {}),
-              })
-            }
-          />
-        </div>
+      <div className="flex items-center gap-2 py-1.5 pr-1.5 pl-3.5">
+        <pre className="min-w-0 flex-1 overflow-x-auto py-1 font-mono text-[13px] leading-6 text-foreground">
+          <code>{activeCommand}</code>
+        </pre>
+        <CopyButton
+          text={activeCommand}
+          label="Copy command"
+          errorMessage="Couldn’t copy command"
+          onCopied={() =>
+            trackEvent("cli_command_copied", {
+              package_manager: manager,
+              framework,
+              source: github ? "github" : "registry",
+              ...(item ? { item } : {}),
+            })
+          }
+        />
       </div>
     </figure>
   )
diff --git a/components/docs-pager.tsx b/components/docs-pager.tsx
index 8329fe7..bf002af 100644
--- a/components/docs-pager.tsx
+++ b/components/docs-pager.tsx
@@ -25,17 +25,17 @@ function PagerLink({
     <Link
       href={item.url}
       className={cn(
-        "group flex min-w-0 flex-1 flex-col gap-1 rounded-2xl bg-muted/50 px-4 py-3 ring-1 ring-border/60 transition-colors",
-        "hover:bg-muted",
+        "group flex min-w-0 flex-1 flex-col gap-1.5 rounded-xl border bg-card px-4 py-3.5 transition-colors",
+        "hover:border-foreground/30",
         "focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-none",
         isPrevious ? "items-start" : "items-end text-end"
       )}
     >
-      <span className="flex items-center gap-1 text-xs font-medium text-muted-foreground">
+      <span className="flex items-center gap-1 text-[13px] text-muted-foreground">
         {isPrevious ? (
           <>
             <RiArrowLeftLine className="size-3.5 transition-transform group-hover:-translate-x-0.5" />
-            Back
+            Previous
           </>
         ) : (
           <>
@@ -44,7 +44,7 @@ function PagerLink({
           </>
         )}
       </span>
-      <span className="w-full truncate text-sm font-medium">{pageName(item)}</span>
+      <span className="w-full truncate text-base font-medium">{pageName(item)}</span>
     </Link>
   )
 }
@@ -63,7 +63,7 @@ export function DocsPager({
   return (
     <nav
       aria-label="Docs pagination"
-      className="mt-12 flex flex-col gap-3 sm:flex-row"
+      className="mt-16 flex flex-col gap-3 sm:flex-row"
     >
       {previous ? (
         <PagerLink item={previous} direction="previous" />
diff --git a/components/framework-code.tsx b/components/framework-code.tsx
index 578eef3..000fdac 100644
--- a/components/framework-code.tsx
+++ b/components/framework-code.tsx
@@ -20,7 +20,7 @@ export function FrameworkSvelte({ children }: { children: ReactNode }) {
 
 /**
  * Shows the React or Svelte usage snippet based on the docs framework picker.
- * The picker sits in the same muted chrome as the code block below it.
+ * The picker is the header row of the same plate as the code below it.
  */
 export function FrameworkCode({
   children,
@@ -30,11 +30,17 @@ export function FrameworkCode({
   className?: string
 }) {
   return (
-    <div data-slot="framework-code" className={cn("not-prose my-6", className)}>
-      <div className="flex h-9 items-center justify-end rounded-t-2xl bg-muted/50 px-3.5">
+    <div
+      data-slot="framework-code"
+      className={cn(
+        "not-prose my-6 overflow-hidden rounded-xl border bg-card",
+        className
+      )}
+    >
+      <div className="flex h-10 items-center border-b px-3.5">
         <FrameworkSelect />
       </div>
-      <div className="[&_figure]:my-0 [&_figure]:rounded-t-none [&_figure]:pt-0">
+      <div className="[&_figure]:my-0 [&_figure]:rounded-none [&_figure]:border-0">
         {children}
       </div>
     </div>
diff --git a/components/mdx-pre.tsx b/components/mdx-pre.tsx
index 29b5712..3996a44 100644
--- a/components/mdx-pre.tsx
+++ b/components/mdx-pre.tsx
@@ -43,12 +43,8 @@ export function MdxPre({
           ) : null}
         </div>
       )}
-      viewportProps={{
-        className:
-          "rounded-[calc(var(--radius-2xl)-2px)] bg-background ring-1 ring-border/80",
-      }}
       className={cn(
-        "my-6 rounded-2xl border-0 bg-muted/50 p-1 shadow-none",
+        "my-6 rounded-xl border bg-card shadow-none",
         className
       )}
     >
diff --git a/components/mdx-table.tsx b/components/mdx-table.tsx
index f516b5c..9d498b0 100644
--- a/components/mdx-table.tsx
+++ b/components/mdx-table.tsx
@@ -14,16 +14,12 @@ export function MdxTable({
   return (
     <div
       data-slot="mdx-table"
-      className="not-prose my-6 w-full overflow-hidden rounded-2xl bg-muted/50"
+      className="not-prose my-6 w-full overflow-x-auto rounded-xl border bg-card"
     >
-      <div className="bg-muted/50 p-1">
-        <div className="overflow-x-auto rounded-[calc(var(--radius-2xl)-2px)] ring-[1px] ring-border/80 bg-background shadow-none">
-          <table
-            className={cn("w-full caption-bottom text-sm", className)}
-            {...props}
-          />
-        </div>
-      </div>
+      <table
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
     </div>
   )
 }
@@ -34,7 +30,7 @@ export function MdxTableHeader({
 }: HTMLAttributes<HTMLTableSectionElement>) {
   return (
     <thead
-      className={cn("border-b border-border/80 bg-muted/40", className)}
+      className={cn("border-b", className)}
       {...props}
     />
   )
@@ -59,7 +55,7 @@ export function MdxTableRow({
   return (
     <tr
       className={cn(
-        "border-b border-border/70 transition-colors hover:bg-muted/30",
+        "border-b transition-colors hover:bg-muted/40",
         className
       )}
       {...props}
@@ -74,7 +70,7 @@ export function MdxTableHead({
   return (
     <th
       className={cn(
-        "h-9 px-3.5 text-left align-middle text-xs font-medium tracking-wide text-muted-foreground",
+        "h-10 px-4 text-left align-middle text-[13px] font-normal text-muted-foreground",
         className
       )}
       {...props}
@@ -89,7 +85,7 @@ export function MdxTableCell({
   return (
     <td
       className={cn(
-        "px-3.5 py-2.5 align-middle text-foreground/90",
+        "px-4 py-2.5 align-middle text-foreground [&_code]:font-mono [&_code]:text-[12.5px]",
         className
       )}
       {...props}

From 7b0b9c9a7cad874630d6d732dcfc198bbe8f388e Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:35:32 +0530
Subject: [PATCH 08/49] Turn the docs index into a live component monitor.

The index lists every component in dot matrix beside one screen; hovering or focusing a name runs that component live with its install command, loading each engine only when it is picked.
---
 app/docs/[[...slug]]/page.tsx     |  84 ++++++++++-----
 components/docs-home.tsx          | 163 ++++++++++++++++++++++++++++++
 components/docs-monitor-feeds.tsx |  97 ++++++++++++++++++
 lib/tree.ts                       |  31 ++++++
 4 files changed, 347 insertions(+), 28 deletions(-)
 create mode 100644 components/docs-home.tsx
 create mode 100644 components/docs-monitor-feeds.tsx

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index cd46f8a..630ffb7 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -2,6 +2,7 @@ import { createRelativeLink } from "fumadocs-ui/mdx"
 import type { Metadata } from "next"
 import { notFound } from "next/navigation"
 
+import { DocsHome, type CatalogSection } from "@/components/docs-home"
 import { DocsPager } from "@/components/docs-pager"
 import { DocsToc } from "@/components/docs-toc"
 import { JsonLd } from "@/components/json-ld"
@@ -18,8 +19,24 @@ import {
   SITE_TITLE,
 } from "@/lib/seo"
 import { source } from "@/lib/source"
+import { sectionPageTree } from "@/lib/tree"
 import { cn } from "@/lib/utils"
 
+/** Component pages grouped by their sidebar section, for the docs home index. */
+function componentCatalog(): CatalogSection[] {
+  const pages = new Map(source.getPages().map((page) => [page.url, page]))
+
+  return sectionPageTree(source.getPageTree()).flatMap((section) => {
+    if (!section.name) return []
+    const items = section.items.map((item) => ({
+      ...item,
+      slug: item.url.split("/").at(-1) ?? item.url,
+      description: pages.get(item.url)?.data.description ?? "",
+    }))
+    return [{ name: section.name, items }]
+  })
+}
+
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>
 }) {
@@ -28,8 +45,9 @@ export default async function Page(props: {
   if (!page) notFound()
 
   const MDX = page.data.body
+  const home = isDocsIndex(params.slug)
   const component = isComponentPage(params.slug)
-  const markdown = await page.data.getText("processed")
+  const markdown = home ? "" : await page.data.getText("processed")
 
   return (
     <div className="flex w-full items-start gap-8 px-2 md:ps-0 md:pe-3 md:pt-3 xl:pe-8">
@@ -45,32 +63,42 @@ export default async function Page(props: {
             slug: params.slug,
           })}
         />
-        <article className="mx-auto w-full min-w-0 max-w-[52rem]">
-          <header className="mb-12">
-            <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
-              <h1
-                className={cn(
-                  "min-w-0",
-                  component
-                    ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
-                    : "text-4xl font-semibold tracking-tight"
-                )}
-              >
-                {page.data.title}
-              </h1>
-              <PageActions
-                markdown={markdown}
-                pageUrl={absoluteUrl(page.url)}
-                sourceUrl={`${getGithubRepoUrl()}/blob/main/content/docs/${page.path}`}
-                className="sm:mt-1"
-              />
-            </div>
-            {page.data.description ? (
-              <p className="mt-5 max-w-2xl text-[17px] leading-relaxed text-muted-foreground">
-                {page.data.description}
-              </p>
-            ) : null}
-          </header>
+        {home ? (
+          <DocsHome sections={componentCatalog()} initial="ascii-logo" />
+        ) : null}
+        <article
+          className={cn(
+            "mx-auto w-full min-w-0 max-w-[52rem]",
+            home && "mt-24 max-w-2xl border-t pt-12"
+          )}
+        >
+          {home ? null : (
+            <header className="mb-12">
+              <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
+                <h1
+                  className={cn(
+                    "min-w-0",
+                    component
+                      ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
+                      : "text-4xl font-semibold tracking-tight"
+                  )}
+                >
+                  {page.data.title}
+                </h1>
+                <PageActions
+                  markdown={markdown}
+                  pageUrl={absoluteUrl(page.url)}
+                  sourceUrl={`${getGithubRepoUrl()}/blob/main/content/docs/${page.path}`}
+                  className="sm:mt-1"
+                />
+              </div>
+              {page.data.description ? (
+                <p className="mt-5 max-w-2xl text-[17px] leading-relaxed text-muted-foreground">
+                  {page.data.description}
+                </p>
+              ) : null}
+            </header>
+          )}
           <div className="prose">
             <MDX
               components={getMDXComponents({
@@ -81,7 +109,7 @@ export default async function Page(props: {
           <DocsPager tree={source.getPageTree()} url={page.url} />
         </article>
       </div>
-      <DocsToc items={page.data.toc} />
+      {home ? null : <DocsToc items={page.data.toc} />}
     </div>
   )
 }
diff --git a/components/docs-home.tsx b/components/docs-home.tsx
new file mode 100644
index 0000000..0ffea32
--- /dev/null
+++ b/components/docs-home.tsx
@@ -0,0 +1,163 @@
+"use client"
+
+import { useEffect, useRef, useState, type CSSProperties } from "react"
+import Link from "next/link"
+
+import { CliCommand } from "@/components/cli-command"
+import { MonitorFeed } from "@/components/docs-monitor-feeds"
+import { Triad } from "@/components/triad"
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type CatalogItem = {
+  title: string
+  url: string
+  /** Registry item name, e.g. `shader-sky`. */
+  slug: string
+  description: string
+}
+
+export type CatalogSection = { name: string; items: CatalogItem[] }
+
+/** Pointer hover waits this long before switching feeds, so sweeping the list doesn't boot every engine. */
+const HOVER_DELAY_MS = 140
+
+const screenTokens = { "--background": "var(--screen)" } as CSSProperties
+
+/**
+ * Docs home: the component index beside one live monitor. Hovering or
+ * focusing a name puts that component on the screen; clicking opens its page.
+ */
+export function DocsHome({
+  sections,
+  initial,
+}: {
+  sections: CatalogSection[]
+  initial: string
+}) {
+  const items = sections.flatMap((section) => section.items)
+  const [selected, setSelected] = useState(initial)
+  const timer = useRef<number | null>(null)
+  const current = items.find((item) => item.slug === selected) ?? items[0]
+
+  function cancel() {
+    if (timer.current) window.clearTimeout(timer.current)
+    timer.current = null
+  }
+
+  function select(slug: string, delay = 0) {
+    cancel()
+    if (delay === 0) {
+      setSelected(slug)
+      return
+    }
+    timer.current = window.setTimeout(() => setSelected(slug), delay)
+  }
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) window.clearTimeout(timer.current)
+    }
+  }, [])
+
+  if (!current) return null
+
+  return (
+    <div className="grid grid-cols-1 gap-x-14 gap-y-10 @4xl/page:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] @4xl/page:grid-rows-[auto_1fr]">
+      <header className="@4xl/page:col-start-1 @4xl/page:row-start-1">
+        <h1 className="font-display text-[clamp(5.5rem,16cqw,10rem)] leading-[0.78]">
+          23rd
+        </h1>
+        <p className="mt-8 max-w-md text-lg leading-relaxed text-muted-foreground">
+          Components that render: shaders, ASCII, dithering and motion for
+          shadcn/ui. Install one with the CLI, then own the source. React and
+          Svelte 5.
+        </p>
+      </header>
+
+      <figure
+        aria-label="Live preview"
+        className="self-start @4xl/page:sticky @4xl/page:top-6 @4xl/page:col-start-2 @4xl/page:row-span-2 @4xl/page:row-start-1"
+      >
+        <div
+          style={screenTokens}
+          className="relative aspect-[4/3] overflow-hidden rounded-(--radius-screen) bg-background ring-1 ring-border @4xl/page:aspect-auto @4xl/page:h-[min(58svh,600px)]"
+        >
+          <MonitorFeed
+            key={current.slug}
+            slug={current.slug}
+            fallback={
+              <div className="flex size-full flex-col items-center justify-center gap-4 px-8 text-center">
+                <span className="font-display text-5xl leading-none">
+                  {current.title}
+                </span>
+                <span className="max-w-xs text-sm text-muted-foreground">
+                  This one reacts to page scroll. Open its page to try it.
+                </span>
+              </div>
+            }
+          />
+        </div>
+
+        <figcaption className="mt-5 flex flex-col gap-3">
+          <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+            <p className="flex items-center gap-2.5 text-base font-medium">
+              <Triad />
+              {current.title}
+            </p>
+            <Link
+              href={current.url}
+              className={cn(buttonVariants({ variant: "outline", size: "sm" }), "rounded-lg")}
+            >
+              Open {current.title}
+            </Link>
+          </div>
+          <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
+            {current.description}
+          </p>
+          <CliCommand item={current.slug} className="my-0 mt-1" />
+        </figcaption>
+      </figure>
+
+      <nav
+        aria-label="Components"
+        className="flex flex-col gap-9 @4xl/page:col-start-1 @4xl/page:row-start-2"
+      >
+        {sections.map((section) => (
+          <section key={section.name} aria-labelledby={`index-${section.name}`}>
+            <h2
+              id={`index-${section.name}`}
+              className="mb-3 font-mono text-[10.5px] tracking-[0.18em] text-muted-foreground/80 uppercase"
+            >
+              {section.name}
+            </h2>
+            <ul className="flex flex-col gap-1">
+              {section.items.map((item) => {
+                const on = item.slug === current.slug
+                return (
+                  <li key={item.slug}>
+                    <Link
+                      href={item.url}
+                      data-on={on || undefined}
+                      onPointerEnter={(event) => {
+                        if (event.pointerType === "mouse") {
+                          select(item.slug, HOVER_DELAY_MS)
+                        }
+                      }}
+                      onPointerLeave={cancel}
+                      onFocus={() => select(item.slug)}
+                      className="group -mx-1 flex items-center gap-3 rounded-md px-1 py-1 font-display text-[clamp(1.75rem,3.4cqw,2.25rem)] leading-none text-muted-foreground transition-colors duration-150 outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-on:text-foreground"
+                    >
+                      <span className="min-w-0">{item.title}</span>
+                      {on ? <Triad className="h-3.5 [&>span]:w-1" /> : null}
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </section>
+        ))}
+      </nav>
+    </div>
+  )
+}
diff --git a/components/docs-monitor-feeds.tsx b/components/docs-monitor-feeds.tsx
new file mode 100644
index 0000000..2ed99be
--- /dev/null
+++ b/components/docs-monitor-feeds.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import dynamic from "next/dynamic"
+import type { ComponentType, ReactNode } from "react"
+
+/**
+ * One live mount per registry item for the docs home monitor. Each engine
+ * loads only when its feed is selected, and unmounts (freeing its WebGL
+ * context) when another one takes over.
+ */
+function feed<P extends object>(
+  load: () => Promise<ComponentType<P>>
+): ComponentType<P> {
+  return dynamic(load, { ssr: false, loading: () => null })
+}
+
+const AsciiFluid = feed(() =>
+  import("@/registry/ascii-fluid/ascii-fluid").then((m) => m.AsciiFluid)
+)
+const AsciiLogo = feed(() =>
+  import("@/registry/ascii-logo/ascii-logo").then((m) => m.AsciiLogo)
+)
+const Dithered404 = feed(() =>
+  import("@/registry/dithered-404/dithered-404").then((m) => m.Dithered404)
+)
+const GooeyColorPicker = feed(() =>
+  import("@/registry/gooey-color-picker/gooey-color-picker").then(
+    (m) => m.GooeyColorPicker
+  )
+)
+const LiveOrb = feed(() =>
+  import("@/registry/live-orb/live-orb").then((m) => m.LiveOrb)
+)
+const LogoBurst = feed(() =>
+  import("@/registry/logo-burst/logo-burst").then((m) => m.LogoBurst)
+)
+const PhosphorScore = feed(() =>
+  import("@/registry/phosphor-score/phosphor-score").then(
+    (m) => m.PhosphorScore
+  )
+)
+const RadiantLines = feed(() =>
+  import("@/registry/radiant-lines/radiant-lines").then((m) => m.RadiantLines)
+)
+const ShaderFire = feed(() =>
+  import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
+)
+const ShaderGradient = feed(() =>
+  import("@/registry/shader-gradient/shader-gradient").then(
+    (m) => m.ShaderGradient
+  )
+)
+const ShaderSky = feed(() =>
+  import("@/registry/shader-sky/shader-sky").then((m) => m.ShaderSky)
+)
+const TangleFooter = feed(() =>
+  import("@/registry/tangle-footer/tangle-footer").then((m) => m.TangleFooter)
+)
+
+const FEEDS: Record<string, () => ReactNode> = {
+  "ascii-fluid": () => <AsciiFluid className="absolute inset-0" />,
+  "ascii-logo": () => <AsciiLogo className="absolute inset-0" />,
+  "dithered-404": () => <Dithered404 className="absolute inset-0" />,
+  "gooey-color-picker": () => (
+    <div className="flex size-full items-center justify-center">
+      <GooeyColorPicker defaultValue={{ h: 210, s: 90, l: 55, a: 1 }} />
+    </div>
+  ),
+  "live-orb": () => (
+    <div className="flex size-full items-center justify-center bg-[#0A0A0B]">
+      <LiveOrb size={220} />
+    </div>
+  ),
+  "logo-burst": () => <LogoBurst />,
+  "phosphor-score": () => <PhosphorScore />,
+  "radiant-lines": () => <RadiantLines />,
+  "shader-fire": () => <ShaderFire className="absolute inset-0" />,
+  "shader-gradient": () => <ShaderGradient className="absolute inset-0" />,
+  "shader-sky": () => <ShaderSky className="absolute inset-0" />,
+  "tangle-footer": () => (
+    <div className="flex size-full flex-col justify-end bg-[#EFEAE2] dark:bg-[#121210]">
+      <TangleFooter background="transparent" />
+    </div>
+  ),
+}
+
+/** Renders the live feed for a registry item, or `fallback` if it has none. */
+export function MonitorFeed({
+  slug,
+  fallback,
+}: {
+  slug: string
+  fallback: ReactNode
+}) {
+  const render = FEEDS[slug]
+  return render ? render() : fallback
+}
diff --git a/lib/tree.ts b/lib/tree.ts
index cebb04e..7854645 100644
--- a/lib/tree.ts
+++ b/lib/tree.ts
@@ -29,3 +29,34 @@ export function flattenPageTree(root: Root): PageTreeItem[] {
   root.children.forEach(visit)
   return items
 }
+
+export interface PageTreeSection {
+  /** Separator label from `meta.json`, or `null` for pages before the first one. */
+  name: string | null
+  items: PageTreeItem[]
+}
+
+/** Pages grouped under the `---Label---` separators they follow. */
+export function sectionPageTree(root: Root): PageTreeSection[] {
+  const sections: PageTreeSection[] = [{ name: null, items: [] }]
+
+  function visit(node: Root["children"][number]) {
+    if (node.type === "separator") {
+      const name = extractName(node)
+      if (name) sections.push({ name, items: [] })
+    } else if (node.type === "page" && !node.external) {
+      sections.at(-1)!.items.push({ title: extractName(node), url: node.url })
+    } else if (node.type === "folder") {
+      if (node.index) {
+        sections.at(-1)!.items.push({
+          title: extractName(node.index),
+          url: node.index.url,
+        })
+      }
+      node.children.forEach(visit)
+    }
+  }
+
+  root.children.forEach(visit)
+  return sections.filter((section) => section.items.length > 0)
+}

From 09e7b50a798db46739e66d86c6e3d740832cb5bc Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:37:34 +0530
Subject: [PATCH 09/49] Remove the Introduction page ahead of the landing page.

The docs start at Getting Started; `/` and `/docs` redirect there temporarily so nothing is cached before the landing page takes `/`, and the OG build keeps the root card as the site-wide default.
---
 app/docs/[[...slug]]/page.tsx     |  89 ++++++----------
 app/manifest.ts                   |   2 +-
 app/sitemap.ts                    |   4 +-
 components/docs-home.tsx          | 163 ------------------------------
 components/docs-monitor-feeds.tsx |  97 ------------------
 content/docs/index.mdx            |  30 ------
 content/docs/meta.json            |   2 +-
 lib/tree.ts                       |  31 ------
 next.config.mjs                   |  10 +-
 scripts/og-lib.mjs                |  10 ++
 10 files changed, 50 insertions(+), 388 deletions(-)
 delete mode 100644 components/docs-home.tsx
 delete mode 100644 components/docs-monitor-feeds.tsx
 delete mode 100644 content/docs/index.mdx

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 630ffb7..9d9431d 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -2,7 +2,6 @@ import { createRelativeLink } from "fumadocs-ui/mdx"
 import type { Metadata } from "next"
 import { notFound } from "next/navigation"
 
-import { DocsHome, type CatalogSection } from "@/components/docs-home"
 import { DocsPager } from "@/components/docs-pager"
 import { DocsToc } from "@/components/docs-toc"
 import { JsonLd } from "@/components/json-ld"
@@ -15,28 +14,10 @@ import {
   docsJsonLd,
   docsPath,
   isComponentPage,
-  isDocsIndex,
-  SITE_TITLE,
 } from "@/lib/seo"
 import { source } from "@/lib/source"
-import { sectionPageTree } from "@/lib/tree"
 import { cn } from "@/lib/utils"
 
-/** Component pages grouped by their sidebar section, for the docs home index. */
-function componentCatalog(): CatalogSection[] {
-  const pages = new Map(source.getPages().map((page) => [page.url, page]))
-
-  return sectionPageTree(source.getPageTree()).flatMap((section) => {
-    if (!section.name) return []
-    const items = section.items.map((item) => ({
-      ...item,
-      slug: item.url.split("/").at(-1) ?? item.url,
-      description: pages.get(item.url)?.data.description ?? "",
-    }))
-    return [{ name: section.name, items }]
-  })
-}
-
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>
 }) {
@@ -45,9 +26,8 @@ export default async function Page(props: {
   if (!page) notFound()
 
   const MDX = page.data.body
-  const home = isDocsIndex(params.slug)
   const component = isComponentPage(params.slug)
-  const markdown = home ? "" : await page.data.getText("processed")
+  const markdown = await page.data.getText("processed")
 
   return (
     <div className="flex w-full items-start gap-8 px-2 md:ps-0 md:pe-3 md:pt-3 xl:pe-8">
@@ -63,42 +43,32 @@ export default async function Page(props: {
             slug: params.slug,
           })}
         />
-        {home ? (
-          <DocsHome sections={componentCatalog()} initial="ascii-logo" />
-        ) : null}
-        <article
-          className={cn(
-            "mx-auto w-full min-w-0 max-w-[52rem]",
-            home && "mt-24 max-w-2xl border-t pt-12"
-          )}
-        >
-          {home ? null : (
-            <header className="mb-12">
-              <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
-                <h1
-                  className={cn(
-                    "min-w-0",
-                    component
-                      ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
-                      : "text-4xl font-semibold tracking-tight"
-                  )}
-                >
-                  {page.data.title}
-                </h1>
-                <PageActions
-                  markdown={markdown}
-                  pageUrl={absoluteUrl(page.url)}
-                  sourceUrl={`${getGithubRepoUrl()}/blob/main/content/docs/${page.path}`}
-                  className="sm:mt-1"
-                />
-              </div>
-              {page.data.description ? (
-                <p className="mt-5 max-w-2xl text-[17px] leading-relaxed text-muted-foreground">
-                  {page.data.description}
-                </p>
-              ) : null}
-            </header>
-          )}
+        <article className="mx-auto w-full min-w-0 max-w-[52rem]">
+          <header className="mb-12">
+            <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-4">
+              <h1
+                className={cn(
+                  "min-w-0",
+                  component
+                    ? "font-display text-[clamp(2.5rem,6.5cqw,3.75rem)] leading-[0.92]"
+                    : "text-4xl font-semibold tracking-tight"
+                )}
+              >
+                {page.data.title}
+              </h1>
+              <PageActions
+                markdown={markdown}
+                pageUrl={absoluteUrl(page.url)}
+                sourceUrl={`${getGithubRepoUrl()}/blob/main/content/docs/${page.path}`}
+                className="sm:mt-1"
+              />
+            </div>
+            {page.data.description ? (
+              <p className="mt-5 max-w-2xl text-[17px] leading-relaxed text-muted-foreground">
+                {page.data.description}
+              </p>
+            ) : null}
+          </header>
           <div className="prose">
             <MDX
               components={getMDXComponents({
@@ -109,7 +79,7 @@ export default async function Page(props: {
           <DocsPager tree={source.getPageTree()} url={page.url} />
         </article>
       </div>
-      {home ? null : <DocsToc items={page.data.toc} />}
+      <DocsToc items={page.data.toc} />
     </div>
   )
 }
@@ -131,12 +101,11 @@ export async function generateMetadata(props: {
     : [page.data.title]
 
   return buildPageMetadata({
-    title: isDocsIndex(params.slug) ? SITE_TITLE : page.data.title,
+    title: page.data.title,
     description: page.data.description,
     path,
     slug: params.slug,
     keywords: extraKeywords,
     type: "article",
-    absoluteTitle: isDocsIndex(params.slug),
   })
 }
diff --git a/app/manifest.ts b/app/manifest.ts
index 67396b7..3ae43ab 100644
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -7,7 +7,7 @@ export default function manifest(): MetadataRoute.Manifest {
     name: `${SITE_NAME} — ${SITE_TAGLINE}`,
     short_name: SITE_NAME,
     description: SITE_DESCRIPTION,
-    start_url: "/docs",
+    start_url: "/docs/getting-started",
     display: "standalone",
     background_color: "#000000",
     theme_color: "#000000",
diff --git a/app/sitemap.ts b/app/sitemap.ts
index e9eca33..70f7e3d 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -18,7 +18,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
     entries.push({ url, changeFrequency, priority })
   }
 
-  add("/docs", 1)
   add("/sponsors", 0.6, "monthly")
   add("/terms", 0.2, "yearly")
   add("/privacy", 0.2, "yearly")
@@ -26,10 +25,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
   for (const param of source.generateParams()) {
     const page = source.getPage(param.slug)
     const path = page?.url || docsPath(param.slug)
-    const isIndex = !param.slug?.length
     const isComponent = param.slug?.[0] === "components"
 
-    add(path, isIndex ? 1 : isComponent ? 0.8 : 0.7)
+    add(path, isComponent ? 0.8 : 0.7)
   }
 
   return entries
diff --git a/components/docs-home.tsx b/components/docs-home.tsx
deleted file mode 100644
index 0ffea32..0000000
--- a/components/docs-home.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState, type CSSProperties } from "react"
-import Link from "next/link"
-
-import { CliCommand } from "@/components/cli-command"
-import { MonitorFeed } from "@/components/docs-monitor-feeds"
-import { Triad } from "@/components/triad"
-import { buttonVariants } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-export type CatalogItem = {
-  title: string
-  url: string
-  /** Registry item name, e.g. `shader-sky`. */
-  slug: string
-  description: string
-}
-
-export type CatalogSection = { name: string; items: CatalogItem[] }
-
-/** Pointer hover waits this long before switching feeds, so sweeping the list doesn't boot every engine. */
-const HOVER_DELAY_MS = 140
-
-const screenTokens = { "--background": "var(--screen)" } as CSSProperties
-
-/**
- * Docs home: the component index beside one live monitor. Hovering or
- * focusing a name puts that component on the screen; clicking opens its page.
- */
-export function DocsHome({
-  sections,
-  initial,
-}: {
-  sections: CatalogSection[]
-  initial: string
-}) {
-  const items = sections.flatMap((section) => section.items)
-  const [selected, setSelected] = useState(initial)
-  const timer = useRef<number | null>(null)
-  const current = items.find((item) => item.slug === selected) ?? items[0]
-
-  function cancel() {
-    if (timer.current) window.clearTimeout(timer.current)
-    timer.current = null
-  }
-
-  function select(slug: string, delay = 0) {
-    cancel()
-    if (delay === 0) {
-      setSelected(slug)
-      return
-    }
-    timer.current = window.setTimeout(() => setSelected(slug), delay)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (timer.current) window.clearTimeout(timer.current)
-    }
-  }, [])
-
-  if (!current) return null
-
-  return (
-    <div className="grid grid-cols-1 gap-x-14 gap-y-10 @4xl/page:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] @4xl/page:grid-rows-[auto_1fr]">
-      <header className="@4xl/page:col-start-1 @4xl/page:row-start-1">
-        <h1 className="font-display text-[clamp(5.5rem,16cqw,10rem)] leading-[0.78]">
-          23rd
-        </h1>
-        <p className="mt-8 max-w-md text-lg leading-relaxed text-muted-foreground">
-          Components that render: shaders, ASCII, dithering and motion for
-          shadcn/ui. Install one with the CLI, then own the source. React and
-          Svelte 5.
-        </p>
-      </header>
-
-      <figure
-        aria-label="Live preview"
-        className="self-start @4xl/page:sticky @4xl/page:top-6 @4xl/page:col-start-2 @4xl/page:row-span-2 @4xl/page:row-start-1"
-      >
-        <div
-          style={screenTokens}
-          className="relative aspect-[4/3] overflow-hidden rounded-(--radius-screen) bg-background ring-1 ring-border @4xl/page:aspect-auto @4xl/page:h-[min(58svh,600px)]"
-        >
-          <MonitorFeed
-            key={current.slug}
-            slug={current.slug}
-            fallback={
-              <div className="flex size-full flex-col items-center justify-center gap-4 px-8 text-center">
-                <span className="font-display text-5xl leading-none">
-                  {current.title}
-                </span>
-                <span className="max-w-xs text-sm text-muted-foreground">
-                  This one reacts to page scroll. Open its page to try it.
-                </span>
-              </div>
-            }
-          />
-        </div>
-
-        <figcaption className="mt-5 flex flex-col gap-3">
-          <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
-            <p className="flex items-center gap-2.5 text-base font-medium">
-              <Triad />
-              {current.title}
-            </p>
-            <Link
-              href={current.url}
-              className={cn(buttonVariants({ variant: "outline", size: "sm" }), "rounded-lg")}
-            >
-              Open {current.title}
-            </Link>
-          </div>
-          <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
-            {current.description}
-          </p>
-          <CliCommand item={current.slug} className="my-0 mt-1" />
-        </figcaption>
-      </figure>
-
-      <nav
-        aria-label="Components"
-        className="flex flex-col gap-9 @4xl/page:col-start-1 @4xl/page:row-start-2"
-      >
-        {sections.map((section) => (
-          <section key={section.name} aria-labelledby={`index-${section.name}`}>
-            <h2
-              id={`index-${section.name}`}
-              className="mb-3 font-mono text-[10.5px] tracking-[0.18em] text-muted-foreground/80 uppercase"
-            >
-              {section.name}
-            </h2>
-            <ul className="flex flex-col gap-1">
-              {section.items.map((item) => {
-                const on = item.slug === current.slug
-                return (
-                  <li key={item.slug}>
-                    <Link
-                      href={item.url}
-                      data-on={on || undefined}
-                      onPointerEnter={(event) => {
-                        if (event.pointerType === "mouse") {
-                          select(item.slug, HOVER_DELAY_MS)
-                        }
-                      }}
-                      onPointerLeave={cancel}
-                      onFocus={() => select(item.slug)}
-                      className="group -mx-1 flex items-center gap-3 rounded-md px-1 py-1 font-display text-[clamp(1.75rem,3.4cqw,2.25rem)] leading-none text-muted-foreground transition-colors duration-150 outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-on:text-foreground"
-                    >
-                      <span className="min-w-0">{item.title}</span>
-                      {on ? <Triad className="h-3.5 [&>span]:w-1" /> : null}
-                    </Link>
-                  </li>
-                )
-              })}
-            </ul>
-          </section>
-        ))}
-      </nav>
-    </div>
-  )
-}
diff --git a/components/docs-monitor-feeds.tsx b/components/docs-monitor-feeds.tsx
deleted file mode 100644
index 2ed99be..0000000
--- a/components/docs-monitor-feeds.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client"
-
-import dynamic from "next/dynamic"
-import type { ComponentType, ReactNode } from "react"
-
-/**
- * One live mount per registry item for the docs home monitor. Each engine
- * loads only when its feed is selected, and unmounts (freeing its WebGL
- * context) when another one takes over.
- */
-function feed<P extends object>(
-  load: () => Promise<ComponentType<P>>
-): ComponentType<P> {
-  return dynamic(load, { ssr: false, loading: () => null })
-}
-
-const AsciiFluid = feed(() =>
-  import("@/registry/ascii-fluid/ascii-fluid").then((m) => m.AsciiFluid)
-)
-const AsciiLogo = feed(() =>
-  import("@/registry/ascii-logo/ascii-logo").then((m) => m.AsciiLogo)
-)
-const Dithered404 = feed(() =>
-  import("@/registry/dithered-404/dithered-404").then((m) => m.Dithered404)
-)
-const GooeyColorPicker = feed(() =>
-  import("@/registry/gooey-color-picker/gooey-color-picker").then(
-    (m) => m.GooeyColorPicker
-  )
-)
-const LiveOrb = feed(() =>
-  import("@/registry/live-orb/live-orb").then((m) => m.LiveOrb)
-)
-const LogoBurst = feed(() =>
-  import("@/registry/logo-burst/logo-burst").then((m) => m.LogoBurst)
-)
-const PhosphorScore = feed(() =>
-  import("@/registry/phosphor-score/phosphor-score").then(
-    (m) => m.PhosphorScore
-  )
-)
-const RadiantLines = feed(() =>
-  import("@/registry/radiant-lines/radiant-lines").then((m) => m.RadiantLines)
-)
-const ShaderFire = feed(() =>
-  import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
-)
-const ShaderGradient = feed(() =>
-  import("@/registry/shader-gradient/shader-gradient").then(
-    (m) => m.ShaderGradient
-  )
-)
-const ShaderSky = feed(() =>
-  import("@/registry/shader-sky/shader-sky").then((m) => m.ShaderSky)
-)
-const TangleFooter = feed(() =>
-  import("@/registry/tangle-footer/tangle-footer").then((m) => m.TangleFooter)
-)
-
-const FEEDS: Record<string, () => ReactNode> = {
-  "ascii-fluid": () => <AsciiFluid className="absolute inset-0" />,
-  "ascii-logo": () => <AsciiLogo className="absolute inset-0" />,
-  "dithered-404": () => <Dithered404 className="absolute inset-0" />,
-  "gooey-color-picker": () => (
-    <div className="flex size-full items-center justify-center">
-      <GooeyColorPicker defaultValue={{ h: 210, s: 90, l: 55, a: 1 }} />
-    </div>
-  ),
-  "live-orb": () => (
-    <div className="flex size-full items-center justify-center bg-[#0A0A0B]">
-      <LiveOrb size={220} />
-    </div>
-  ),
-  "logo-burst": () => <LogoBurst />,
-  "phosphor-score": () => <PhosphorScore />,
-  "radiant-lines": () => <RadiantLines />,
-  "shader-fire": () => <ShaderFire className="absolute inset-0" />,
-  "shader-gradient": () => <ShaderGradient className="absolute inset-0" />,
-  "shader-sky": () => <ShaderSky className="absolute inset-0" />,
-  "tangle-footer": () => (
-    <div className="flex size-full flex-col justify-end bg-[#EFEAE2] dark:bg-[#121210]">
-      <TangleFooter background="transparent" />
-    </div>
-  ),
-}
-
-/** Renders the live feed for a registry item, or `fallback` if it has none. */
-export function MonitorFeed({
-  slug,
-  fallback,
-}: {
-  slug: string
-  fallback: ReactNode
-}) {
-  const render = FEEDS[slug]
-  return render ? render() : fallback
-}
diff --git a/content/docs/index.mdx b/content/docs/index.mdx
deleted file mode 100644
index acce353..0000000
--- a/content/docs/index.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Introduction
-description: Opinionated UI components for people who ship. A shadcn registry.
----
-
-**23rd** is a [shadcn/ui](https://ui.shadcn.com) registry of opinionated components. Install what you need through the CLI — React or Svelte 5 — then customize the source in your project. The registry is free. Optional monthly [sponsorships](/sponsors) ($20–$250/mo, billed by Creem) put your logo and link on the sponsors page, not extra components.
-
-Made by **radiumcoders** (Jay). Support: [radiumcoders@gmail.com](mailto:radiumcoders@gmail.com).
-
-## What this is
-
-A curated set of components with strong defaults — less boilerplate, clearer decisions, and a look that stays consistent across projects. Install what you need through the shadcn CLI (React or Svelte 5), then customize in your own codebase like any other registry item.
-
-## Why opinionated
-
-Most component kits hand you every option. 23rd picks a direction: spacing, radius, interaction patterns, and composition rules that already feel finished. You can still override anything — you just start from a sharper baseline.
-
-## Next steps
-
-- [Getting Started](/docs/getting-started) — add the registry and install a component
-- [Sponsors](/sponsors) — monthly sponsorships ($20–$250/mo via Creem) for logo placement; the registry stays free
-- [ASCII Logo](/docs/components/ascii-logo) — interactive ASCII wordmark that scatters and falls
-- [Shader Gradient](/docs/components/shader-gradient) — quiet wash behind a landing hero
-- [Shader Fire](/docs/components/shader-fire) — sparse fire tongues under a landing hero
-- [Shader Sky](/docs/components/shader-sky) — clear blue or rain, optional window glass
-- [Logo Burst](/docs/components/logo-burst) — hair-line tentacles explode from the center, then breathe
-- [Phosphor Score](/docs/components/phosphor-score) — vertical CRT sheet music that falls and flares
-- [Radiant Lines](/docs/components/radiant-lines) — hyperspace starfield background
-- [Dithered 404](/docs/components/dithered-404) — Bayer-pixel 404 that burns under a fireball cursor
-- [Folio](/docs/components/folio) — the page leans back on scroll, then springs flat
diff --git a/content/docs/meta.json b/content/docs/meta.json
index db492da..9e89ddc 100644
--- a/content/docs/meta.json
+++ b/content/docs/meta.json
@@ -1,4 +1,4 @@
 {
   "title": "Documentation",
-  "pages": ["index", "getting-started", "...components"]
+  "pages": ["getting-started", "...components"]
 }
diff --git a/lib/tree.ts b/lib/tree.ts
index 7854645..cebb04e 100644
--- a/lib/tree.ts
+++ b/lib/tree.ts
@@ -29,34 +29,3 @@ export function flattenPageTree(root: Root): PageTreeItem[] {
   root.children.forEach(visit)
   return items
 }
-
-export interface PageTreeSection {
-  /** Separator label from `meta.json`, or `null` for pages before the first one. */
-  name: string | null
-  items: PageTreeItem[]
-}
-
-/** Pages grouped under the `---Label---` separators they follow. */
-export function sectionPageTree(root: Root): PageTreeSection[] {
-  const sections: PageTreeSection[] = [{ name: null, items: [] }]
-
-  function visit(node: Root["children"][number]) {
-    if (node.type === "separator") {
-      const name = extractName(node)
-      if (name) sections.push({ name, items: [] })
-    } else if (node.type === "page" && !node.external) {
-      sections.at(-1)!.items.push({ title: extractName(node), url: node.url })
-    } else if (node.type === "folder") {
-      if (node.index) {
-        sections.at(-1)!.items.push({
-          title: extractName(node.index),
-          url: node.index.url,
-        })
-      }
-      node.children.forEach(visit)
-    }
-  }
-
-  root.children.forEach(visit)
-  return sections.filter((section) => section.items.length > 0)
-}
diff --git a/next.config.mjs b/next.config.mjs
index 7d412c7..a2e64f3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -11,10 +11,16 @@ const config = {
   },
   async redirects() {
     return [
+      // Temporary until the landing page lands at `/`.
       {
         source: "/",
-        destination: "/docs",
-        permanent: true,
+        destination: "/docs/getting-started",
+        permanent: false,
+      },
+      {
+        source: "/docs",
+        destination: "/docs/getting-started",
+        permanent: false,
       },
       {
         source: "/pricing",
diff --git a/scripts/og-lib.mjs b/scripts/og-lib.mjs
index 4c25348..165c2fd 100644
--- a/scripts/og-lib.mjs
+++ b/scripts/og-lib.mjs
@@ -76,6 +76,16 @@ export async function listDocsOgPages(root = process.cwd()) {
     })
   }
 
+  // The root card is the site-wide default OG image, with or without a docs index page.
+  if (!pages.some((page) => page.slug.length === 0)) {
+    pages.unshift({
+      file: null,
+      slug: [],
+      title: INDEX_TITLE,
+      description: INDEX_TAGLINE,
+    })
+  }
+
   return pages
 }
 

From 7b5ce31be98ee6026ebe89eb5d33b4dfc7fcb436 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:39:51 +0530
Subject: [PATCH 10/49] Stop the page outline from tracking scroll.

On this page is now a plain list of links: no highlight that chases the reading position, no auto-scrolling track.
---
 components/docs-toc.tsx | 52 +++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/components/docs-toc.tsx b/components/docs-toc.tsx
index ffd6bb1..47e8dea 100644
--- a/components/docs-toc.tsx
+++ b/components/docs-toc.tsx
@@ -1,37 +1,39 @@
-"use client"
-
 import type { TOCItemType } from "fumadocs-core/toc"
-import { TOCProvider, TOCScrollArea } from "fumadocs-ui/components/toc"
-import { TOCItem, TOCItems } from "fumadocs-ui/components/toc/clerk"
 import Link from "next/link"
 import { RiArrowRightUpLine, RiHeartFill } from "@remixicon/react"
 
+import { cn } from "@/lib/utils"
+
 /**
- * Right rail on the bench, outside the page sheet: the page outline, with
- * the sponsor slot underneath.
+ * Right rail on the bench, outside the page sheet: a plain page outline (no
+ * scroll tracking), with the sponsor slot underneath.
  */
 export function DocsToc({ items }: { items: TOCItemType[] }) {
   return (
-    <aside className="sticky top-0 hidden h-svh w-56 shrink-0 flex-col gap-6 pt-14 pb-6 xl:flex">
+    <aside className="sticky top-0 hidden w-56 shrink-0 flex-col gap-6 pt-14 xl:flex">
       {items.length > 0 ? (
-        <TOCProvider toc={items}>
-          <div className="flex min-h-0 flex-col">
-            <p className="mb-1 text-[13px] text-muted-foreground">
-              On this page
-            </p>
-            <TOCScrollArea>
-              <TOCItems>
-                {items.map((item) => (
-                  <TOCItem
-                    key={item.url}
-                    item={item}
-                    className="text-[13px] data-[active=true]:text-foreground"
-                  />
-                ))}
-              </TOCItems>
-            </TOCScrollArea>
-          </div>
-        </TOCProvider>
+        <nav aria-label="On this page">
+          <p className="mb-3 text-[13px] text-muted-foreground">
+            On this page
+          </p>
+          <ul className="flex flex-col border-s">
+            {items.map((item) => (
+              <li key={item.url}>
+                <a
+                  href={item.url}
+                  className={cn(
+                    "-ms-px block border-s border-transparent py-1.5 text-[13px] text-muted-foreground transition-colors hover:border-foreground hover:text-foreground",
+                    item.depth <= 2 && "ps-3.5",
+                    item.depth === 3 && "ps-6",
+                    item.depth >= 4 && "ps-8"
+                  )}
+                >
+                  {item.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
       ) : null}
 
       <Link

From 2364f051253e633d4d7274e7126c94e0fd6adcee Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 21:49:24 +0530
Subject: [PATCH 11/49] Rebuild Phosphor Score as a clean grand staff that
 keeps flaring.

Flares no longer stop after the first loop or skip at speed, beams run straight with every stem meeting them, ledger lines, chords and hairpins are engraved correctly, the loop seam no longer collides, the playhead sits clear of the edge fade (now drawn in-canvas instead of stacked backdrop blurs), dark mode no longer flashes light, and the engine pauses off-screen and holds a still frame under reduced motion.
---
 content/docs/components/phosphor-score.mdx    |   30 +-
 public/r/phosphor-score-svelte.json           |    2 +-
 public/r/phosphor-score.json                  |    2 +-
 .../phosphor-score/phosphor-score-demo.tsx    |   18 +-
 .../phosphor-score/phosphor-score-vanilla.ts  | 1205 +++++++++--------
 registry/phosphor-score/phosphor-score.svelte |   67 +-
 registry/phosphor-score/phosphor-score.tsx    |   98 +-
 7 files changed, 674 insertions(+), 748 deletions(-)

diff --git a/content/docs/components/phosphor-score.mdx b/content/docs/components/phosphor-score.mdx
index 6392580..a54da2a 100644
--- a/content/docs/components/phosphor-score.mdx
+++ b/content/docs/components/phosphor-score.mdx
@@ -1,11 +1,11 @@
 ---
 title: Phosphor Score
-description: Vertical CRT sheet music — notes slide down the staves, bloom at the playhead, then exit in a flare.
+description: Vertical CRT sheet music — notes slide down a grand staff, bloom and flare at the playhead, then fade with a phosphor afterglow.
 ---
 
 import { PhosphorScoreDemo } from "@/registry/phosphor-score/phosphor-score-demo"
 
-A falling score, not a piano roll. Two vertical staves, beamed runs, dynamics, and a scan line: notes dim on the way down, bloom in the phosphor color as they play, then flare out. Default `theme="auto"` follows the site — phosphor on black, forest ink on the page background. `glow` is 0–100 (default `50`) and stays a tight halo on the note. Press `d` to toggle.
+A falling score, not a piano roll. A grand staff of beamed runs, chords, slurs and dynamics scrolls down to a playhead: each note brightens as it arrives, blooms and flares as it plays, then fades with a phosphor afterglow. Default `theme="auto"` follows the site — phosphor on black, forest ink on the page background. `glow` is 0–100 (default `50`) and stays a tight halo on the note. Change **Seed** to crossfade to a new score. Press `d` to toggle the theme.
 
 ## Preview
 
@@ -21,7 +21,7 @@ Or install straight from the public GitHub source registry:
 
 ## Usage
 
-Give the parent a size. The canvas fills the parent.
+Give the parent a size. The canvas fills the parent and fades out at its top and bottom edges on its own.
 
 <FrameworkCode>
   <FrameworkReact>
@@ -69,20 +69,20 @@ Lock a theme or push the bloom. Omit `color` to follow light / dark.
   </FrameworkSvelte>
 </FrameworkCode>
 
-`prefers-reduced-motion: reduce` freezes the scroll and the camera drift, and keeps a still frame of the score.
+`prefers-reduced-motion: reduce` holds a still frame of the score and stops drawing. The animation also pauses while the canvas is off-screen or the tab is hidden.
 
 ## Props
 
-| Prop        | Type                          | Default                                 |
-| ----------- | ----------------------------- | --------------------------------------- |
-| `color`     | `string`                      | theme phosphor / forest ink             |
-| `glow`      | `number`                      | `50` — 0–100, halo size at the playhead |
-| `speed`     | `number`                      | `1.35` — beats per second               |
-| `density`   | `number`                      | `1` — how packed the notation is        |
-| `sway`      | `boolean`                     | `true` — slow camera drift              |
-| `seed`      | `number`                      | `23`                                    |
-| `theme`     | `"light" \| "dark" \| "auto"` | `"auto"`                                |
-| `className` | `string`                      | React only                              |
-| `class`     | `string`                      | Svelte only                             |
+| Prop        | Type                          | Default                                         |
+| ----------- | ----------------------------- | ----------------------------------------------- |
+| `color`     | `string`                      | theme phosphor / forest ink — any CSS color     |
+| `glow`      | `number`                      | `50` — 0–100, halo size at the playhead         |
+| `speed`     | `number`                      | `1.35` — beats per second                       |
+| `density`   | `number`                      | `1` — `0.35`–`1.85`, how packed the notation is |
+| `sway`      | `boolean`                     | `true` — slow camera drift                      |
+| `seed`      | `number`                      | `23` — a new seed crossfades to a new score     |
+| `theme`     | `"light" \| "dark" \| "auto"` | `"auto"`                                        |
+| `className` | `string`                      | React only                                      |
+| `class`     | `string`                      | Svelte only                                     |
 
 Omit `color` and `theme="auto"` picks phosphor green on dark, forest ink on light. The canvas is transparent in light mode so the parent background shows through.
diff --git a/public/r/phosphor-score-svelte.json b/public/r/phosphor-score-svelte.json
index 582b854..10b080e 100644
--- a/public/r/phosphor-score-svelte.json
+++ b/public/r/phosphor-score-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/phosphor-score/phosphor-score.svelte",
-      "content": "<script module lang=\"ts\">\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo\n   * and exit flare — kept small so it sits on the note, not a disc.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\nconst LOOP_BEATS = 48\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Note = {\n  t: number\n  pitch: number\n  dur: number\n  staff: 0 | 1\n  beam: number\n  acc: -1 | 0 | 1\n}\n\ntype Mark = {\n  t: number\n  staff: 0 | 1\n  text: string\n  pitch: number\n}\n\ntype Hairpin = {\n  t: number\n  dur: number\n  staff: 0 | 1\n  open: boolean\n}\n\ntype Slur = {\n  t0: number\n  t1: number\n  p0: number\n  p1: number\n  staff: 0 | 1\n}\n\ntype Link = {\n  t: number\n  p0: number\n  p1: number\n}\n\ntype Dust = {\n  x: number\n  y: number\n  z: number\n  s: number\n  a: number\n}\n\ntype Flare = {\n  x: number\n  y: number\n  age: number\n  life: number\n  size: number\n}\n\ntype Rgb = [number, number, number]\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction wrapDelta(t: number, now: number, loop: number) {\n  let d = t - now\n  d = ((((d + loop / 2) % loop) + loop) % loop) - loop / 2\n  return d\n}\n\nfunction parseColor(input?: string): Rgb {\n  const raw = (input ?? DEFAULT_COLOR).trim()\n  if (/^#[0-9a-fA-F]{6}$/.test(raw)) {\n    return [\n      parseInt(raw.slice(1, 3), 16),\n      parseInt(raw.slice(3, 5), 16),\n      parseInt(raw.slice(5, 7), 16),\n    ]\n  }\n  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {\n    return [\n      parseInt(raw[1]! + raw[1], 16),\n      parseInt(raw[2]! + raw[2], 16),\n      parseInt(raw[3]! + raw[3], 16),\n    ]\n  }\n  return [77, 255, 106]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp(a, 0, 1)})`\n}\n\nfunction glowOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return DEFAULT_GLOW\n  return clamp(value, 0, 100)\n}\n\nfunction speedOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return DEFAULT_SPEED\n  return clamp(value, 0.15, 4)\n}\n\nfunction densityOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) {\n    return DEFAULT_DENSITY\n  }\n  return clamp(value, 0.35, 1.85)\n}\n\nfunction seedOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return DEFAULT_SEED\n  return Math.round(value) >>> 0\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\ntype Score = {\n  notes: Note[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n  links: Link[]\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n  const links: Link[] = []\n  let group = 1\n  const dens = densityOf(density)\n\n  const pick = <T>(list: readonly T[]) => list[Math.floor(rng() * list.length)]!\n\n  const pushNote = (\n    t: number,\n    pitch: number,\n    dur: number,\n    staff: 0 | 1,\n    beam: number\n  ) => {\n    notes.push({\n      t,\n      pitch: clamp(pitch, -3, 11),\n      dur,\n      staff,\n      beam,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    })\n  }\n\n  const addRun = (\n    staff: 0 | 1,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number,\n    dir: number\n  ) => {\n    const beam = group++\n    let p = pitch\n    for (let i = 0; i < count; i++) {\n      if (rng() > 0.12 / dens) pushNote(start + i * step, p, step, staff, beam)\n      const hop = rng() < 0.18 ? 2 : 1\n      p += dir * hop\n      if (p > 10 || p < -2) dir *= -1\n    }\n    if (count >= 4 && rng() < 0.45) {\n      slurs.push({\n        t0: start,\n        t1: start + (count - 1) * step,\n        p0: pitch,\n        p1: p,\n        staff,\n      })\n    }\n  }\n\n  const addArp = (staff: 0 | 1, start: number, root: number, step: number) => {\n    const pattern = [0, 2, 4, 7, 4, 2, 0, -1]\n    const beam = group++\n    for (let i = 0; i < pattern.length; i++) {\n      pushNote(start + i * step, root + pattern[i]!, step, staff, beam)\n    }\n  }\n\n  const addChord = (staff: 0 | 1, t: number, root: number) => {\n    const beam = -group++\n    pushNote(t, root, 1, staff, beam)\n    pushNote(t, root + 2, 1, staff, beam)\n    if (rng() < 0.7) pushNote(t, root + 4, 1, staff, beam)\n  }\n\n  let t = 0\n  while (t < LOOP_BEATS - 1) {\n    const kind = rng()\n    const leftBusy = rng() < 0.55 + dens * 0.15\n    const runLen = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n    const step = rng() < 0.28 * dens ? 0.125 : 0.25\n    const startPitch = Math.floor(rng() * 7) + (leftBusy ? 1 : 0)\n\n    if (kind < 0.5) {\n      addRun(\n        leftBusy ? 0 : 1,\n        t,\n        startPitch,\n        runLen,\n        step,\n        rng() < 0.5 ? 1 : -1\n      )\n      if (rng() < 0.55 * dens) {\n        addChord(leftBusy ? 1 : 0, t, 2 + Math.floor(rng() * 4))\n      }\n      t += runLen * step\n    } else if (kind < 0.72) {\n      addArp(0, t, 1 + Math.floor(rng() * 5), 0.25)\n      if (rng() < 0.7 * dens) {\n        addRun(1, t, 0 + Math.floor(rng() * 4), 4, 0.5, rng() < 0.5 ? 1 : -1)\n      }\n      t += 2\n    } else if (kind < 0.86) {\n      addChord(0, t, 3 + Math.floor(rng() * 4))\n      addChord(1, t, Math.floor(rng() * 4))\n      if (rng() < 0.5) {\n        links.push({\n          t,\n          p0: 4,\n          p1: 4,\n        })\n      }\n      t += rng() < 0.5 ? 1 : 2\n    } else {\n      t += rng() < 0.5 ? 0.5 : 1\n    }\n\n    if (rng() < 0.18) {\n      marks.push({\n        t,\n        staff: rng() < 0.5 ? 0 : 1,\n        text: pick(DYNAMICS),\n        pitch: rng() < 0.5 ? -3.6 : 11.4,\n      })\n    }\n    if (rng() < 0.12) {\n      hairpins.push({\n        t,\n        dur: 2 + Math.floor(rng() * 3),\n        staff: rng() < 0.5 ? 0 : 1,\n        open: rng() < 0.5,\n      })\n    }\n  }\n\n  return { notes, marks, hairpins, slurs, links }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  const dust: Dust[] = []\n  for (let i = 0; i < 90; i++) {\n    dust.push({\n      x: (rng() - 0.5) * 2,\n      y: (rng() - 0.5) * 2,\n      z: rng(),\n      s: 0.4 + rng() * 1.4,\n      a: 0.08 + rng() * 0.22,\n    })\n  }\n  return dust\n}\n\n/**\n * Vertical phosphor sheet music — notation falls toward a playhead,\n * blooms, then exits in a flare. Canvas 2D, CRT-green by default.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  const size = { w: 0, h: 0 }\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let dust = makeDust(seedOf(options.seed))\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb = parseColor(resolveColor(options.color, dark))\n  options.onThemeChange?.(dark)\n  const flares: Flare[] = []\n  const hit = new Set<number>()\n  let reduce = false\n  let raf = 0\n  let running = true\n  let lastFrame = performance.now()\n  let elapsed = 8\n  let clock = 0\n  let dtSmooth = 1 / 60\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    size.w = w\n    size.h = h\n    canvas.width = Math.floor(w * dpr)\n    canvas.height = Math.floor(h * dpr)\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    rgb = parseColor(resolveColor(options.color, dark))\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const rebuild = () => {\n    score = generateScore(seedOf(options.seed), densityOf(options.density))\n    dust = makeDust(seedOf(options.seed))\n    rgb = parseColor(resolveColor(options.color, dark))\n    hit.clear()\n    flares.length = 0\n  }\n\n  type Pt = { x: number; y: number; s: number; z: number }\n\n  const cam = { x: 0, y: 0, z: 0 }\n  let frameFit = 0.78\n\n  const project = (x: number, y: number): Pt => {\n    const cosZ = Math.cos(cam.z)\n    const sinZ = Math.sin(cam.z)\n    const rx = x * cosZ - y * sinZ + cam.y\n    const ry = x * sinZ + y * cosZ + cam.x\n    const s = frameFit\n    return {\n      x: size.w * 0.5 + rx * s,\n      y: size.h * 0.5 + ry * s,\n      s,\n      z: 0,\n    }\n  }\n\n  const staffCenter = (staff: 0 | 1, gap: number) => (staff === 0 ? -gap : gap)\n\n  const pitchX = (staff: 0 | 1, pitch: number, gap: number, sp: number) =>\n    staffCenter(staff, gap) + (pitch - 4) * (sp * 0.5)\n\n  const timeY = (delta: number, ppb: number, playY: number) =>\n    playY - delta * ppb\n\n  const nearPlay = (delta: number) => {\n    if (delta > 0.55) return 0\n    if (delta > 0) return 1 - delta / 0.55\n    if (delta > -0.28) return 1\n    if (delta > -1.35) return 1 - (-delta - 0.28) / 1.07\n    return 0\n  }\n\n  const drawOval = (pt: Pt, r: number, fill: string) => {\n    ctx.save()\n    ctx.translate(pt.x, pt.y)\n    ctx.rotate(-0.38)\n    ctx.scale(1, 0.7)\n    ctx.beginPath()\n    ctx.arc(0, 0, r * pt.s, 0, Math.PI * 2)\n    ctx.fillStyle = fill\n    ctx.fill()\n    ctx.restore()\n  }\n\n  const glowBlob = (pt: Pt, radius: number, alpha: number) => {\n    const r = Math.max(1.2, radius * pt.s)\n    const g = ctx.createRadialGradient(pt.x, pt.y, 0, pt.x, pt.y, r)\n    g.addColorStop(0, rgba(rgb, alpha))\n    g.addColorStop(0.28, rgba(rgb, alpha * 0.42))\n    g.addColorStop(0.62, rgba(rgb, alpha * 0.1))\n    g.addColorStop(1, rgba(rgb, 0))\n    ctx.fillStyle = g\n    ctx.beginPath()\n    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2)\n    ctx.fill()\n  }\n\n  const frame = (now: number) => {\n    if (!running) return\n    const raw = Math.min(0.05, (now - lastFrame) / 1000)\n    lastFrame = now\n    dtSmooth += (raw - dtSmooth) * 0.2\n    const dt = dtSmooth\n    clock += dt\n    if (!reduce) elapsed += dt * speedOf(options.speed)\n    const beat = elapsed % LOOP_BEATS\n\n    const w = size.w\n    const h = size.h\n    const swayOn = options.sway !== false && !reduce\n    cam.x = swayOn ? Math.sin(clock * 0.31) * 8 : 0\n    cam.y = swayOn ? Math.cos(clock * 0.23) * 10 : 0\n    cam.z = 0\n    frameFit = 0.78\n\n    const pad = Math.max(28, Math.min(w, h) * 0.1)\n    const innerW = Math.max(1, w - pad * 2)\n    const innerH = Math.max(1, h - pad * 2)\n    let sp = clamp(Math.min(innerW, innerH) * 0.028, 10, 28)\n    const maxHalf = innerW / 2 / frameFit\n    let gap = maxHalf * 0.4\n    if (gap < sp * 7) {\n      sp = clamp(maxHalf * 0.4 / 7, 10, 28)\n      gap = maxHalf * 0.4\n    }\n    gap = Math.max(sp * 7, gap)\n    const topY = -innerH / 2 / frameFit\n    const playY = (innerH / 2 - sp * 2) / frameFit\n    const ppb = Math.max(28, (playY - topY) / 7.6)\n    const bloom = glowOf(options.glow) / 50\n    const color = parseColor(resolveColor(options.color, dark))\n    rgb = color\n\n    ctx.imageSmoothingEnabled = true\n    ctx.globalCompositeOperation = \"source-over\"\n    if (dark) {\n      ctx.fillStyle = DARK_BG\n      ctx.fillRect(0, 0, w, h)\n    } else {\n      ctx.clearRect(0, 0, w, h)\n    }\n\n    ctx.save()\n    ctx.globalAlpha = 1\n    for (const d of dust) {\n      const px = ((d.x + 1) * 0.5 + clock * 0.01 * d.z) % 1\n      const py = ((d.y + 1) * 0.5 + elapsed * 0.004 * (0.3 + d.z)) % 1\n      ctx.fillStyle = rgba(color, dark ? d.a : d.a * 0.28)\n      ctx.fillRect(px * w, py * h, d.s, d.s)\n    }\n    ctx.restore()\n\n    const visMin = (playY - innerH / 2 / frameFit) / ppb\n    const visMax = (playY - topY) / ppb\n\n    const inView = (t: number) => {\n      const d = wrapDelta(t, beat, LOOP_BEATS)\n      return d < visMax && d > visMin\n    }\n\n    const staffY0 = topY - h * 0.4 / frameFit\n    const staffY1 = playY + h * 0.25 / frameFit\n    ctx.lineCap = \"butt\"\n    ctx.lineJoin = \"miter\"\n    ctx.strokeStyle = rgba(color, 0.22)\n    ctx.lineWidth = 1\n    for (const staff of [0, 1] as const) {\n      for (let line = 0; line < 5; line++) {\n        const x = pitchX(staff, line * 2, gap, sp)\n        const a = project(x, staffY0)\n        const b = project(x, staffY1)\n        ctx.beginPath()\n        ctx.moveTo(a.x, a.y)\n        ctx.lineTo(b.x, b.y)\n        ctx.stroke()\n      }\n    }\n\n    ctx.lineCap = \"round\"\n    ctx.lineJoin = \"round\"\n\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      if (!inView(bar)) continue\n      const d = wrapDelta(bar, beat, LOOP_BEATS)\n      const y = timeY(d, ppb, playY)\n      const alpha = 0.14 + nearPlay(d) * 0.2\n      for (const staff of [0, 1] as const) {\n        const a = project(pitchX(staff, 0, gap, sp), y)\n        const b = project(pitchX(staff, 8, gap, sp), y)\n        ctx.strokeStyle = rgba(color, alpha)\n        ctx.lineWidth = 1\n        ctx.beginPath()\n        ctx.moveTo(a.x, a.y)\n        ctx.lineTo(b.x, b.y)\n        ctx.stroke()\n      }\n    }\n\n    ctx.font = `italic ${Math.round(clamp(sp * 1.15, 9, 14))}px Georgia, \"Times New Roman\", serif`\n    ctx.textBaseline = \"middle\"\n    for (const mark of score.marks) {\n      if (!inView(mark.t)) continue\n      const d = wrapDelta(mark.t, beat, LOOP_BEATS)\n      const pt = project(\n        pitchX(mark.staff, mark.pitch, gap, sp),\n        timeY(d, ppb, playY)\n      )\n      ctx.fillStyle = rgba(color, 0.28 + nearPlay(d) * 0.45)\n      ctx.fillText(mark.text, pt.x, pt.y)\n    }\n\n    for (const pin of score.hairpins) {\n      const t1 = pin.t + pin.dur\n      if (!inView(pin.t) && !inView(t1)) continue\n      const d0 = wrapDelta(pin.t, beat, LOOP_BEATS)\n      const d1 = wrapDelta(t1, beat, LOOP_BEATS)\n      const staff = pin.staff\n      const outer = staff === 0 ? -4.6 : 12.6\n      const inner = staff === 0 ? -3.4 : 11.4\n      const y0 = timeY(d0, ppb, playY)\n      const y1 = timeY(d1, ppb, playY)\n      const xOuter0 = pitchX(staff, pin.open ? outer : inner, gap, sp)\n      const xOuter1 = pitchX(staff, pin.open ? inner : outer, gap, sp)\n      const xMid = pitchX(staff, (outer + inner) / 2, gap, sp)\n      const a = project(xOuter0, y0)\n      const b = project(xOuter1, y1)\n      const c = project(xMid, y0)\n      const e = project(xMid, y1)\n      ctx.strokeStyle = rgba(color, 0.22)\n      ctx.lineWidth = 1\n      ctx.beginPath()\n      ctx.moveTo(a.x, a.y)\n      ctx.lineTo(b.x, b.y)\n      ctx.moveTo(c.x, c.y)\n      ctx.lineTo(e.x, e.y)\n      ctx.stroke()\n    }\n\n    for (const slur of score.slurs) {\n      if (!inView(slur.t0) && !inView(slur.t1)) continue\n      const d0 = wrapDelta(slur.t0, beat, LOOP_BEATS)\n      const d1 = wrapDelta(slur.t1, beat, LOOP_BEATS)\n      const side = slur.staff === 0 ? -1.8 : 1.8\n      const a = project(\n        pitchX(slur.staff, slur.p0 + side, gap, sp),\n        timeY(d0, ppb, playY)\n      )\n      const b = project(\n        pitchX(slur.staff, slur.p1 + side, gap, sp),\n        timeY(d1, ppb, playY)\n      )\n      const midT = (slur.t0 + slur.t1) / 2\n      const midP = (slur.p0 + slur.p1) / 2 + side * 1.6\n      const c = project(\n        pitchX(slur.staff, midP, gap, sp),\n        timeY(wrapDelta(midT, beat, LOOP_BEATS), ppb, playY)\n      )\n      ctx.strokeStyle = rgba(color, 0.2)\n      ctx.lineWidth = 1.1\n      ctx.beginPath()\n      ctx.moveTo(a.x, a.y)\n      ctx.quadraticCurveTo(c.x, c.y, b.x, b.y)\n      ctx.stroke()\n    }\n\n    for (const link of score.links) {\n      if (!inView(link.t)) continue\n      const d = wrapDelta(link.t, beat, LOOP_BEATS)\n      const y = timeY(d, ppb, playY)\n      const a = project(pitchX(0, link.p0, gap, sp), y)\n      const b = project(pitchX(1, link.p1, gap, sp), y)\n      ctx.strokeStyle = rgba(color, 0.12 + nearPlay(d) * 0.18)\n      ctx.lineWidth = 1\n      ctx.beginPath()\n      ctx.moveTo(a.x, a.y)\n      ctx.lineTo(b.x, b.y)\n      ctx.stroke()\n    }\n\n    const groups = new Map<number, Note[]>()\n    for (const note of score.notes) {\n      if (note.beam <= 0) continue\n      if (!inView(note.t)) continue\n      const list = groups.get(note.beam)\n      if (list) list.push(note)\n      else groups.set(note.beam, [note])\n    }\n\n    const stemTip = (note: Note, d: number) => {\n      const dir = note.staff === 0 ? -1 : 1\n      const y = timeY(d, ppb, playY)\n      const x0 = pitchX(note.staff, note.pitch, gap, sp)\n      const x1 = pitchX(note.staff, note.pitch + dir * 6.4, gap, sp)\n      return {\n        head: project(x0, y),\n        tip: project(x1, y),\n        d,\n      }\n    }\n\n    for (const note of score.notes) {\n      if (!inView(note.t)) continue\n      const d = wrapDelta(note.t, beat, LOOP_BEATS)\n      const { head, tip } = stemTip(note, d)\n      const intens = nearPlay(d)\n      ctx.strokeStyle = rgba(color, 0.22 + intens * 0.45)\n      ctx.lineWidth = 1 * head.s\n      ctx.beginPath()\n      ctx.moveTo(head.x, head.y)\n      ctx.lineTo(tip.x, tip.y)\n      ctx.stroke()\n    }\n\n    for (const [, groupNotes] of groups) {\n      if (groupNotes.length < 2) continue\n      groupNotes.sort((a, b) => a.t - b.t)\n      const first = groupNotes[0]!\n      const last = groupNotes[groupNotes.length - 1]!\n      const a = stemTip(first, wrapDelta(first.t, beat, LOOP_BEATS))\n      const b = stemTip(last, wrapDelta(last.t, beat, LOOP_BEATS))\n      const intens = Math.max(nearPlay(a.d), nearPlay(b.d))\n      ctx.strokeStyle = rgba(color, 0.28 + intens * 0.5)\n      ctx.lineWidth = Math.max(1.6, sp * 0.18) * ((a.tip.s + b.tip.s) * 0.5)\n      ctx.beginPath()\n      ctx.moveTo(a.tip.x, a.tip.y)\n      ctx.lineTo(b.tip.x, b.tip.y)\n      ctx.stroke()\n      if (first.dur <= 0.13) {\n        const oy = (first.staff === 0 ? -1 : 1) * 3.2\n        ctx.beginPath()\n        ctx.moveTo(a.tip.x, a.tip.y + oy)\n        ctx.lineTo(b.tip.x, b.tip.y + oy)\n        ctx.stroke()\n      }\n    }\n\n    const playYScreen = project(0, playY).y\n    ctx.save()\n    ctx.lineCap = \"butt\"\n    ctx.strokeStyle = rgba(color, (dark ? 0.22 : 0.16) * Math.min(1, bloom))\n    ctx.lineWidth = 2\n    ctx.beginPath()\n    ctx.moveTo(0, playYScreen)\n    ctx.lineTo(w, playYScreen)\n    ctx.stroke()\n    ctx.strokeStyle = rgba(color, (dark ? 0.7 : 0.45) * Math.min(1, bloom))\n    ctx.lineWidth = 0.75\n    ctx.beginPath()\n    ctx.moveTo(0, playYScreen)\n    ctx.lineTo(w, playYScreen)\n    ctx.stroke()\n    ctx.restore()\n\n    const bloomOp = dark ? \"lighter\" : \"source-over\"\n    ctx.globalCompositeOperation = bloomOp\n\n    for (const note of score.notes) {\n      const d = wrapDelta(note.t, beat, LOOP_BEATS)\n      if (d > visMax || d < visMin) continue\n      const y = timeY(d, ppb, playY)\n      const x = pitchX(note.staff, note.pitch, gap, sp)\n      const pt = project(x, y)\n      const intens = nearPlay(d)\n      const upcoming = d > 0 ? clamp(1 - d / 10, 0.18, 0.55) : 0.2\n      const headR = Math.max(2.4, sp * 0.38)\n      const alpha = upcoming + intens * 0.8\n\n      if (note.acc !== 0 && d > -0.4) {\n        const accPt = project(x, y - sp * 0.9)\n        ctx.fillStyle = rgba(color, 0.25 + intens * 0.5)\n        ctx.font = `${Math.round(sp * 1.1)}px Georgia, serif`\n        ctx.fillText(note.acc > 0 ? \"#\" : \"b\", accPt.x - 4, accPt.y)\n      }\n\n      if (note.pitch < 0 || note.pitch > 8) {\n        const ledgerPitch = note.pitch < 0 ? -2 : 10\n        const lx0 = pitchX(note.staff, ledgerPitch - 0.9, gap, sp)\n        const lx1 = pitchX(note.staff, ledgerPitch + 0.9, gap, sp)\n        const la = project(lx0, y)\n        const lb = project(lx1, y)\n        ctx.strokeStyle = rgba(color, 0.2 + intens * 0.3)\n        ctx.lineWidth = 1\n        ctx.beginPath()\n        ctx.moveTo(la.x, la.y)\n        ctx.lineTo(lb.x, lb.y)\n        ctx.stroke()\n      }\n\n      if (intens > 0.04 && bloom > 0) {\n        const halo = (5 + intens * 9) * bloom\n        glowBlob(pt, halo, (dark ? 0.55 : 0.28) * intens * Math.min(1, bloom))\n      }\n\n      ctx.globalCompositeOperation = \"source-over\"\n      ctx.save()\n      if (intens > 0.2 && bloom > 0) {\n        ctx.shadowColor = rgba(color, dark ? 0.9 : 0.45)\n        ctx.shadowBlur = (3.5 + intens * 5) * bloom\n      }\n      drawOval(pt, headR, rgba(color, clamp(alpha, 0.2, 1)))\n      ctx.restore()\n      ctx.globalCompositeOperation = bloomOp\n\n      if (d <= 0 && d > -0.08 && intens > 0.7) {\n        const id = (note.t * 1000 + note.staff * 17 + note.pitch) | 0\n        if (!hit.has(id)) {\n          hit.add(id)\n          flares.push({\n            x,\n            y: playY,\n            age: 0,\n            life: 0.38,\n            size: 10,\n          })\n          if (hit.size > 400) hit.clear()\n        }\n      }\n    }\n\n    for (let i = flares.length - 1; i >= 0; i--) {\n      const flare = flares[i]!\n      flare.age += dt\n      const t = flare.age / flare.life\n      if (t >= 1) {\n        flares.splice(i, 1)\n        continue\n      }\n      const pt = project(flare.x, flare.y)\n      const fade = Math.sin((1 - t) * Math.PI)\n      glowBlob(pt, (7 + t * 6) * bloom, (dark ? 0.55 : 0.28) * fade)\n      ctx.save()\n      ctx.translate(pt.x, pt.y)\n      ctx.rotate(cam.z)\n      const flareW = 22 * bloom * (1 + t * 0.4) * pt.s\n      const flareH = 1.4 * pt.s\n      const fg = ctx.createLinearGradient(-flareW, 0, flareW, 0)\n      fg.addColorStop(0, rgba(color, 0))\n      fg.addColorStop(0.5, rgba(color, (dark ? 0.7 : 0.4) * fade))\n      fg.addColorStop(1, rgba(color, 0))\n      ctx.fillStyle = fg\n      ctx.fillRect(-flareW, -flareH, flareW * 2, flareH * 2)\n      ctx.restore()\n    }\n\n    ctx.globalCompositeOperation = \"source-over\"\n\n    raf = requestAnimationFrame(frame)\n  }\n\n  raf = requestAnimationFrame(frame)\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDens = densityOf(options.density)\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      rgb = parseColor(resolveColor(options.color, dark))\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDens\n      ) {\n        rebuild()\n      }\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<PhosphorScoreOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    glow = DEFAULT_GLOW,\n    speed = DEFAULT_SPEED,\n    density = DEFAULT_DENSITY,\n    sway = true,\n    seed = DEFAULT_SEED,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: PhosphorScoreInstance | null = null\n\n  onMount(() => {\n    isDark = resolveDark(theme)\n    if (!canvas) return\n    instance = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"phosphor-score\"\n  role=\"img\"\n  aria-label=\"Falling phosphor sheet music\"\n  class={cn(\"absolute inset-0 overflow-hidden bg-background\", className)}\n  style={isDark ? `background-color: ${DARK_BG}` : \"\"}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-40 backdrop-blur-xl mask-[linear-gradient(to_bottom,black,transparent)]\"\n  ></div>\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 top-0 z-10 h-24 backdrop-blur-md mask-[linear-gradient(to_bottom,black,transparent)]\"\n  ></div>\n  <div\n    aria-hidden=\"true\"\n    class={cn(\n      \"pointer-events-none absolute inset-x-0 top-0 z-10 h-28\",\n      !isDark && \"bg-linear-to-b from-background/65 to-transparent\"\n    )}\n    style={isDark\n      ? \"background-image: linear-gradient(to bottom, rgba(5,5,5,0.7), transparent)\"\n      : \"\"}\n  ></div>\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-10 h-40 backdrop-blur-xl mask-[linear-gradient(to_top,black,transparent)]\"\n  ></div>\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 backdrop-blur-md mask-[linear-gradient(to_top,black,transparent)]\"\n  ></div>\n  <div\n    aria-hidden=\"true\"\n    class={cn(\n      \"pointer-events-none absolute inset-x-0 bottom-0 z-10 h-28\",\n      !isDark && \"bg-linear-to-t from-background/65 to-transparent\"\n    )}\n    style={isDark\n      ? \"background-image: linear-gradient(to top, rgba(5,5,5,0.7), transparent)\"\n      : \"\"}\n  ></div>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  function line(x0: number, y0: number, x1: number, y1: number) {\n    ctx!.beginPath()\n    ctx!.moveTo(x0, y0)\n    ctx!.lineTo(x1, y1)\n    ctx!.stroke()\n  }\n\n  function drawStaves(l: Layout) {\n    const { h } = size\n    ctx!.lineCap = \"butt\"\n    ctx!.lineWidth = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, 0, x, h)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      const d = wrapDelta(bar, beat)\n      const y = yOf(l, d)\n      if (y < -4 || y > h + 4) continue\n      ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n      line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const { h } = size\n    const minD = (l.playY - h - l.ppb) / l.ppb\n    const maxD = (l.playY + l.ppb) / l.ppb\n    const inView = (d: number) => d >= minD && d <= maxD\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      const d = wrapDelta(mark.t, beat)\n      if (!inView(d)) continue\n      ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n      ctx!.fillText(mark.text, l.cx, yOf(l, d) + sp * 0.9)\n    }\n    ctx!.lineWidth = 1\n    for (const pin of s.hairpins) {\n      const d0 = wrapDelta(pin.t, beat)\n      const d1 = d0 + pin.dur\n      if (!inView(d0) && !inView(d1)) continue\n      const narrow = pin.opening ? d0 : d1\n      const wide = pin.opening ? d1 : d0\n      const half = sp * 0.9\n      ctx!.strokeStyle = rgba(\n        rgb,\n        alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n      )\n      ctx!.beginPath()\n      ctx!.moveTo(l.cx - half, yOf(l, wide))\n      ctx!.lineTo(l.cx, yOf(l, narrow))\n      ctx!.lineTo(l.cx + half, yOf(l, wide))\n      ctx!.stroke()\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    ctx!.lineWidth = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const d0 = wrapDelta(slur.first.t, beat)\n      const d1 = d0 + (slur.last.t - slur.first.t)\n      if (!inView(d0) && !inView(d1)) continue\n      const inward = slur.staff === 0 ? 1 : -1\n      const y0 = yOf(l, d0)\n      const y1 = yOf(l, d1)\n      const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n      const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n      const edge =\n        inward > 0\n          ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n          : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5)\n      ctx!.beginPath()\n      ctx!.moveTo(x0, y0)\n      ctx!.quadraticCurveTo(xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      ctx!.stroke()\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const d0 = wrapDelta(stem.t0, beat)\n      const d1 = d0 + (stem.t1 - stem.t0)\n      if (!inView(d0) && !inView(d1)) continue\n      const out = stem.staff === 0 ? -1 : 1\n      const tipX = xOf(l, stem.staff, stem.tip)\n      ctx!.lineWidth = stemW\n      if (stem.chord) {\n        // One stem through the chord, from the innermost head out to the tip.\n        const inner =\n          out < 0\n            ? Math.max(...stem.notes.map((n) => n.pitch))\n            : Math.min(...stem.notes.map((n) => n.pitch))\n        const y = yOf(l, d0) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n        line(xOf(l, stem.staff, inner), y, tipX, y)\n        continue\n      }\n      for (const n of stem.notes) {\n        const d = d0 + (n.t - stem.t0)\n        const y = yOf(l, d) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n        line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n      }\n      if (stem.beams === 0) continue\n      const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n      ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n      ctx!.lineWidth = sp * 0.36\n      const yA = yOf(l, d0) + side + stemW / 2\n      const yB = yOf(l, d1) + side - stemW / 2\n      const offset = sp * 0.18 * out\n      line(tipX - offset, yA, tipX - offset, yB)\n      if (stem.beams === 2) {\n        const x2 = tipX - offset - out * sp * 0.75\n        line(x2, yA, x2, yB)\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    ctx!.lineWidth = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const y = yOf(l, d)\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n      const from = n.pitch < 0 ? -2 : 10\n      const step = n.pitch < 0 ? -2 : 2\n      for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n        const x = xOf(l, n.staff, p)\n        line(x, y - ry * 1.7, x, y + ry * 1.7)\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        const d = wrapDelta(n.t, beat)\n        const lit = litAt(d)\n        if (lit < 0.03 || !inView(d)) continue\n        const r = sp * (1.1 + lit * 1.5) * bloom\n        ctx!.globalAlpha =\n          lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n        ctx!.drawImage(\n          glowSprite,\n          xOf(l, n.staff, n.pitch) - r,\n          yOf(l, d) - r,\n          r * 2,\n          r * 2\n        )\n      }\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const x = xOf(l, n.staff, n.pitch)\n      const y = yOf(l, d)\n      const color = rgba(rgb, alphaAt(d))\n      ctx!.beginPath()\n      ctx!.ellipse(x, y, rx, ry, 0.35, 0, Math.PI * 2)\n      if (n.hollow) {\n        ctx!.strokeStyle = color\n        ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n        ctx!.stroke()\n      } else {\n        ctx!.fillStyle = color\n        ctx!.fill()\n      }\n      if (n.acc !== 0) {\n        ctx!.fillStyle = color\n        ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", x, y + ry + sp * 0.95)\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const { w } = size\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      ctx!.globalAlpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      ctx!.drawImage(glowSprite, 0, y - band, w, band * 2)\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    ctx!.lineWidth = 1\n    line(0, y, w, y)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.8 : 0.4)\n      ctx!.drawImage(glowSprite, x - r, l.playY - r, r * 2, r * 2)\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.9 : 0.5)\n      ctx!.drawImage(glowSprite, x - streak, l.playY - 1.5, streak * 2, 3)\n    }\n    ctx!.globalAlpha = 1\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  interface Props extends Omit<PhosphorScoreOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    glow = DEFAULT_GLOW,\n    speed = DEFAULT_SPEED,\n    density = DEFAULT_DENSITY,\n    sway = true,\n    seed = DEFAULT_SEED,\n    theme = \"auto\",\n  }: Props = $props()\n\n  /**\n   * Background before the first frame, so dark mode never flashes light.\n   * `#050505` is `DARK_BG`; Tailwind needs the literal.\n   */\n  const SURFACE: Record<PhosphorScoreTheme, string> = {\n    auto: \"bg-background dark:bg-[#050505]\",\n    dark: \"bg-[#050505]\",\n    light: \"bg-background\",\n  }\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: PhosphorScoreInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"phosphor-score\"\n  role=\"img\"\n  aria-label=\"Falling phosphor sheet music\"\n  class={[\n    \"absolute inset-0 overflow-hidden\",\n    SURFACE[theme] ?? SURFACE.auto,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \")}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/phosphor-score.svelte"
     }
diff --git a/public/r/phosphor-score.json b/public/r/phosphor-score.json
index 429840e..3a40724 100644
--- a/public/r/phosphor-score.json
+++ b/public/r/phosphor-score.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/phosphor-score/phosphor-score.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo\n   * and exit flare — kept small so it sits on the note, not a disc.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\nconst LOOP_BEATS = 48\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Note = {\n  t: number\n  pitch: number\n  dur: number\n  staff: 0 | 1\n  beam: number\n  acc: -1 | 0 | 1\n}\n\ntype Mark = {\n  t: number\n  staff: 0 | 1\n  text: string\n  pitch: number\n}\n\ntype Hairpin = {\n  t: number\n  dur: number\n  staff: 0 | 1\n  open: boolean\n}\n\ntype Slur = {\n  t0: number\n  t1: number\n  p0: number\n  p1: number\n  staff: 0 | 1\n}\n\ntype Link = {\n  t: number\n  p0: number\n  p1: number\n}\n\ntype Dust = {\n  x: number\n  y: number\n  z: number\n  s: number\n  a: number\n}\n\ntype Flare = {\n  x: number\n  y: number\n  age: number\n  life: number\n  size: number\n}\n\ntype Rgb = [number, number, number]\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction wrapDelta(t: number, now: number, loop: number) {\n  let d = t - now\n  d = ((((d + loop / 2) % loop) + loop) % loop) - loop / 2\n  return d\n}\n\nfunction parseColor(input?: string): Rgb {\n  const raw = (input ?? DEFAULT_COLOR).trim()\n  if (/^#[0-9a-fA-F]{6}$/.test(raw)) {\n    return [\n      parseInt(raw.slice(1, 3), 16),\n      parseInt(raw.slice(3, 5), 16),\n      parseInt(raw.slice(5, 7), 16),\n    ]\n  }\n  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {\n    return [\n      parseInt(raw[1]! + raw[1], 16),\n      parseInt(raw[2]! + raw[2], 16),\n      parseInt(raw[3]! + raw[3], 16),\n    ]\n  }\n  return [77, 255, 106]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp(a, 0, 1)})`\n}\n\nfunction glowOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return DEFAULT_GLOW\n  return clamp(value, 0, 100)\n}\n\nfunction speedOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return DEFAULT_SPEED\n  return clamp(value, 0.15, 4)\n}\n\nfunction densityOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) {\n    return DEFAULT_DENSITY\n  }\n  return clamp(value, 0.35, 1.85)\n}\n\nfunction seedOf(value?: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return DEFAULT_SEED\n  return Math.round(value) >>> 0\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\ntype Score = {\n  notes: Note[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n  links: Link[]\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n  const links: Link[] = []\n  let group = 1\n  const dens = densityOf(density)\n\n  const pick = <T>(list: readonly T[]) => list[Math.floor(rng() * list.length)]!\n\n  const pushNote = (\n    t: number,\n    pitch: number,\n    dur: number,\n    staff: 0 | 1,\n    beam: number\n  ) => {\n    notes.push({\n      t,\n      pitch: clamp(pitch, -3, 11),\n      dur,\n      staff,\n      beam,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    })\n  }\n\n  const addRun = (\n    staff: 0 | 1,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number,\n    dir: number\n  ) => {\n    const beam = group++\n    let p = pitch\n    for (let i = 0; i < count; i++) {\n      if (rng() > 0.12 / dens) pushNote(start + i * step, p, step, staff, beam)\n      const hop = rng() < 0.18 ? 2 : 1\n      p += dir * hop\n      if (p > 10 || p < -2) dir *= -1\n    }\n    if (count >= 4 && rng() < 0.45) {\n      slurs.push({\n        t0: start,\n        t1: start + (count - 1) * step,\n        p0: pitch,\n        p1: p,\n        staff,\n      })\n    }\n  }\n\n  const addArp = (staff: 0 | 1, start: number, root: number, step: number) => {\n    const pattern = [0, 2, 4, 7, 4, 2, 0, -1]\n    const beam = group++\n    for (let i = 0; i < pattern.length; i++) {\n      pushNote(start + i * step, root + pattern[i]!, step, staff, beam)\n    }\n  }\n\n  const addChord = (staff: 0 | 1, t: number, root: number) => {\n    const beam = -group++\n    pushNote(t, root, 1, staff, beam)\n    pushNote(t, root + 2, 1, staff, beam)\n    if (rng() < 0.7) pushNote(t, root + 4, 1, staff, beam)\n  }\n\n  let t = 0\n  while (t < LOOP_BEATS - 1) {\n    const kind = rng()\n    const leftBusy = rng() < 0.55 + dens * 0.15\n    const runLen = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n    const step = rng() < 0.28 * dens ? 0.125 : 0.25\n    const startPitch = Math.floor(rng() * 7) + (leftBusy ? 1 : 0)\n\n    if (kind < 0.5) {\n      addRun(\n        leftBusy ? 0 : 1,\n        t,\n        startPitch,\n        runLen,\n        step,\n        rng() < 0.5 ? 1 : -1\n      )\n      if (rng() < 0.55 * dens) {\n        addChord(leftBusy ? 1 : 0, t, 2 + Math.floor(rng() * 4))\n      }\n      t += runLen * step\n    } else if (kind < 0.72) {\n      addArp(0, t, 1 + Math.floor(rng() * 5), 0.25)\n      if (rng() < 0.7 * dens) {\n        addRun(1, t, 0 + Math.floor(rng() * 4), 4, 0.5, rng() < 0.5 ? 1 : -1)\n      }\n      t += 2\n    } else if (kind < 0.86) {\n      addChord(0, t, 3 + Math.floor(rng() * 4))\n      addChord(1, t, Math.floor(rng() * 4))\n      if (rng() < 0.5) {\n        links.push({\n          t,\n          p0: 4,\n          p1: 4,\n        })\n      }\n      t += rng() < 0.5 ? 1 : 2\n    } else {\n      t += rng() < 0.5 ? 0.5 : 1\n    }\n\n    if (rng() < 0.18) {\n      marks.push({\n        t,\n        staff: rng() < 0.5 ? 0 : 1,\n        text: pick(DYNAMICS),\n        pitch: rng() < 0.5 ? -3.6 : 11.4,\n      })\n    }\n    if (rng() < 0.12) {\n      hairpins.push({\n        t,\n        dur: 2 + Math.floor(rng() * 3),\n        staff: rng() < 0.5 ? 0 : 1,\n        open: rng() < 0.5,\n      })\n    }\n  }\n\n  return { notes, marks, hairpins, slurs, links }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  const dust: Dust[] = []\n  for (let i = 0; i < 90; i++) {\n    dust.push({\n      x: (rng() - 0.5) * 2,\n      y: (rng() - 0.5) * 2,\n      z: rng(),\n      s: 0.4 + rng() * 1.4,\n      a: 0.08 + rng() * 0.22,\n    })\n  }\n  return dust\n}\n\n/**\n * Vertical phosphor sheet music — notation falls toward a playhead,\n * blooms, then exits in a flare. Canvas 2D, CRT-green by default.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  const size = { w: 0, h: 0 }\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let dust = makeDust(seedOf(options.seed))\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb = parseColor(resolveColor(options.color, dark))\n  options.onThemeChange?.(dark)\n  const flares: Flare[] = []\n  const hit = new Set<number>()\n  let reduce = false\n  let raf = 0\n  let running = true\n  let lastFrame = performance.now()\n  let elapsed = 8\n  let clock = 0\n  let dtSmooth = 1 / 60\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    size.w = w\n    size.h = h\n    canvas.width = Math.floor(w * dpr)\n    canvas.height = Math.floor(h * dpr)\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    rgb = parseColor(resolveColor(options.color, dark))\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const rebuild = () => {\n    score = generateScore(seedOf(options.seed), densityOf(options.density))\n    dust = makeDust(seedOf(options.seed))\n    rgb = parseColor(resolveColor(options.color, dark))\n    hit.clear()\n    flares.length = 0\n  }\n\n  type Pt = { x: number; y: number; s: number; z: number }\n\n  const cam = { x: 0, y: 0, z: 0 }\n  let frameFit = 0.78\n\n  const project = (x: number, y: number): Pt => {\n    const cosZ = Math.cos(cam.z)\n    const sinZ = Math.sin(cam.z)\n    const rx = x * cosZ - y * sinZ + cam.y\n    const ry = x * sinZ + y * cosZ + cam.x\n    const s = frameFit\n    return {\n      x: size.w * 0.5 + rx * s,\n      y: size.h * 0.5 + ry * s,\n      s,\n      z: 0,\n    }\n  }\n\n  const staffCenter = (staff: 0 | 1, gap: number) => (staff === 0 ? -gap : gap)\n\n  const pitchX = (staff: 0 | 1, pitch: number, gap: number, sp: number) =>\n    staffCenter(staff, gap) + (pitch - 4) * (sp * 0.5)\n\n  const timeY = (delta: number, ppb: number, playY: number) =>\n    playY - delta * ppb\n\n  const nearPlay = (delta: number) => {\n    if (delta > 0.55) return 0\n    if (delta > 0) return 1 - delta / 0.55\n    if (delta > -0.28) return 1\n    if (delta > -1.35) return 1 - (-delta - 0.28) / 1.07\n    return 0\n  }\n\n  const drawOval = (pt: Pt, r: number, fill: string) => {\n    ctx.save()\n    ctx.translate(pt.x, pt.y)\n    ctx.rotate(-0.38)\n    ctx.scale(1, 0.7)\n    ctx.beginPath()\n    ctx.arc(0, 0, r * pt.s, 0, Math.PI * 2)\n    ctx.fillStyle = fill\n    ctx.fill()\n    ctx.restore()\n  }\n\n  const glowBlob = (pt: Pt, radius: number, alpha: number) => {\n    const r = Math.max(1.2, radius * pt.s)\n    const g = ctx.createRadialGradient(pt.x, pt.y, 0, pt.x, pt.y, r)\n    g.addColorStop(0, rgba(rgb, alpha))\n    g.addColorStop(0.28, rgba(rgb, alpha * 0.42))\n    g.addColorStop(0.62, rgba(rgb, alpha * 0.1))\n    g.addColorStop(1, rgba(rgb, 0))\n    ctx.fillStyle = g\n    ctx.beginPath()\n    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2)\n    ctx.fill()\n  }\n\n  const frame = (now: number) => {\n    if (!running) return\n    const raw = Math.min(0.05, (now - lastFrame) / 1000)\n    lastFrame = now\n    dtSmooth += (raw - dtSmooth) * 0.2\n    const dt = dtSmooth\n    clock += dt\n    if (!reduce) elapsed += dt * speedOf(options.speed)\n    const beat = elapsed % LOOP_BEATS\n\n    const w = size.w\n    const h = size.h\n    const swayOn = options.sway !== false && !reduce\n    cam.x = swayOn ? Math.sin(clock * 0.31) * 8 : 0\n    cam.y = swayOn ? Math.cos(clock * 0.23) * 10 : 0\n    cam.z = 0\n    frameFit = 0.78\n\n    const pad = Math.max(28, Math.min(w, h) * 0.1)\n    const innerW = Math.max(1, w - pad * 2)\n    const innerH = Math.max(1, h - pad * 2)\n    let sp = clamp(Math.min(innerW, innerH) * 0.028, 10, 28)\n    const maxHalf = innerW / 2 / frameFit\n    let gap = maxHalf * 0.4\n    if (gap < sp * 7) {\n      sp = clamp(maxHalf * 0.4 / 7, 10, 28)\n      gap = maxHalf * 0.4\n    }\n    gap = Math.max(sp * 7, gap)\n    const topY = -innerH / 2 / frameFit\n    const playY = (innerH / 2 - sp * 2) / frameFit\n    const ppb = Math.max(28, (playY - topY) / 7.6)\n    const bloom = glowOf(options.glow) / 50\n    const color = parseColor(resolveColor(options.color, dark))\n    rgb = color\n\n    ctx.imageSmoothingEnabled = true\n    ctx.globalCompositeOperation = \"source-over\"\n    if (dark) {\n      ctx.fillStyle = DARK_BG\n      ctx.fillRect(0, 0, w, h)\n    } else {\n      ctx.clearRect(0, 0, w, h)\n    }\n\n    ctx.save()\n    ctx.globalAlpha = 1\n    for (const d of dust) {\n      const px = ((d.x + 1) * 0.5 + clock * 0.01 * d.z) % 1\n      const py = ((d.y + 1) * 0.5 + elapsed * 0.004 * (0.3 + d.z)) % 1\n      ctx.fillStyle = rgba(color, dark ? d.a : d.a * 0.28)\n      ctx.fillRect(px * w, py * h, d.s, d.s)\n    }\n    ctx.restore()\n\n    const visMin = (playY - innerH / 2 / frameFit) / ppb\n    const visMax = (playY - topY) / ppb\n\n    const inView = (t: number) => {\n      const d = wrapDelta(t, beat, LOOP_BEATS)\n      return d < visMax && d > visMin\n    }\n\n    const staffY0 = topY - h * 0.4 / frameFit\n    const staffY1 = playY + h * 0.25 / frameFit\n    ctx.lineCap = \"butt\"\n    ctx.lineJoin = \"miter\"\n    ctx.strokeStyle = rgba(color, 0.22)\n    ctx.lineWidth = 1\n    for (const staff of [0, 1] as const) {\n      for (let line = 0; line < 5; line++) {\n        const x = pitchX(staff, line * 2, gap, sp)\n        const a = project(x, staffY0)\n        const b = project(x, staffY1)\n        ctx.beginPath()\n        ctx.moveTo(a.x, a.y)\n        ctx.lineTo(b.x, b.y)\n        ctx.stroke()\n      }\n    }\n\n    ctx.lineCap = \"round\"\n    ctx.lineJoin = \"round\"\n\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      if (!inView(bar)) continue\n      const d = wrapDelta(bar, beat, LOOP_BEATS)\n      const y = timeY(d, ppb, playY)\n      const alpha = 0.14 + nearPlay(d) * 0.2\n      for (const staff of [0, 1] as const) {\n        const a = project(pitchX(staff, 0, gap, sp), y)\n        const b = project(pitchX(staff, 8, gap, sp), y)\n        ctx.strokeStyle = rgba(color, alpha)\n        ctx.lineWidth = 1\n        ctx.beginPath()\n        ctx.moveTo(a.x, a.y)\n        ctx.lineTo(b.x, b.y)\n        ctx.stroke()\n      }\n    }\n\n    ctx.font = `italic ${Math.round(clamp(sp * 1.15, 9, 14))}px Georgia, \"Times New Roman\", serif`\n    ctx.textBaseline = \"middle\"\n    for (const mark of score.marks) {\n      if (!inView(mark.t)) continue\n      const d = wrapDelta(mark.t, beat, LOOP_BEATS)\n      const pt = project(\n        pitchX(mark.staff, mark.pitch, gap, sp),\n        timeY(d, ppb, playY)\n      )\n      ctx.fillStyle = rgba(color, 0.28 + nearPlay(d) * 0.45)\n      ctx.fillText(mark.text, pt.x, pt.y)\n    }\n\n    for (const pin of score.hairpins) {\n      const t1 = pin.t + pin.dur\n      if (!inView(pin.t) && !inView(t1)) continue\n      const d0 = wrapDelta(pin.t, beat, LOOP_BEATS)\n      const d1 = wrapDelta(t1, beat, LOOP_BEATS)\n      const staff = pin.staff\n      const outer = staff === 0 ? -4.6 : 12.6\n      const inner = staff === 0 ? -3.4 : 11.4\n      const y0 = timeY(d0, ppb, playY)\n      const y1 = timeY(d1, ppb, playY)\n      const xOuter0 = pitchX(staff, pin.open ? outer : inner, gap, sp)\n      const xOuter1 = pitchX(staff, pin.open ? inner : outer, gap, sp)\n      const xMid = pitchX(staff, (outer + inner) / 2, gap, sp)\n      const a = project(xOuter0, y0)\n      const b = project(xOuter1, y1)\n      const c = project(xMid, y0)\n      const e = project(xMid, y1)\n      ctx.strokeStyle = rgba(color, 0.22)\n      ctx.lineWidth = 1\n      ctx.beginPath()\n      ctx.moveTo(a.x, a.y)\n      ctx.lineTo(b.x, b.y)\n      ctx.moveTo(c.x, c.y)\n      ctx.lineTo(e.x, e.y)\n      ctx.stroke()\n    }\n\n    for (const slur of score.slurs) {\n      if (!inView(slur.t0) && !inView(slur.t1)) continue\n      const d0 = wrapDelta(slur.t0, beat, LOOP_BEATS)\n      const d1 = wrapDelta(slur.t1, beat, LOOP_BEATS)\n      const side = slur.staff === 0 ? -1.8 : 1.8\n      const a = project(\n        pitchX(slur.staff, slur.p0 + side, gap, sp),\n        timeY(d0, ppb, playY)\n      )\n      const b = project(\n        pitchX(slur.staff, slur.p1 + side, gap, sp),\n        timeY(d1, ppb, playY)\n      )\n      const midT = (slur.t0 + slur.t1) / 2\n      const midP = (slur.p0 + slur.p1) / 2 + side * 1.6\n      const c = project(\n        pitchX(slur.staff, midP, gap, sp),\n        timeY(wrapDelta(midT, beat, LOOP_BEATS), ppb, playY)\n      )\n      ctx.strokeStyle = rgba(color, 0.2)\n      ctx.lineWidth = 1.1\n      ctx.beginPath()\n      ctx.moveTo(a.x, a.y)\n      ctx.quadraticCurveTo(c.x, c.y, b.x, b.y)\n      ctx.stroke()\n    }\n\n    for (const link of score.links) {\n      if (!inView(link.t)) continue\n      const d = wrapDelta(link.t, beat, LOOP_BEATS)\n      const y = timeY(d, ppb, playY)\n      const a = project(pitchX(0, link.p0, gap, sp), y)\n      const b = project(pitchX(1, link.p1, gap, sp), y)\n      ctx.strokeStyle = rgba(color, 0.12 + nearPlay(d) * 0.18)\n      ctx.lineWidth = 1\n      ctx.beginPath()\n      ctx.moveTo(a.x, a.y)\n      ctx.lineTo(b.x, b.y)\n      ctx.stroke()\n    }\n\n    const groups = new Map<number, Note[]>()\n    for (const note of score.notes) {\n      if (note.beam <= 0) continue\n      if (!inView(note.t)) continue\n      const list = groups.get(note.beam)\n      if (list) list.push(note)\n      else groups.set(note.beam, [note])\n    }\n\n    const stemTip = (note: Note, d: number) => {\n      const dir = note.staff === 0 ? -1 : 1\n      const y = timeY(d, ppb, playY)\n      const x0 = pitchX(note.staff, note.pitch, gap, sp)\n      const x1 = pitchX(note.staff, note.pitch + dir * 6.4, gap, sp)\n      return {\n        head: project(x0, y),\n        tip: project(x1, y),\n        d,\n      }\n    }\n\n    for (const note of score.notes) {\n      if (!inView(note.t)) continue\n      const d = wrapDelta(note.t, beat, LOOP_BEATS)\n      const { head, tip } = stemTip(note, d)\n      const intens = nearPlay(d)\n      ctx.strokeStyle = rgba(color, 0.22 + intens * 0.45)\n      ctx.lineWidth = 1 * head.s\n      ctx.beginPath()\n      ctx.moveTo(head.x, head.y)\n      ctx.lineTo(tip.x, tip.y)\n      ctx.stroke()\n    }\n\n    for (const [, groupNotes] of groups) {\n      if (groupNotes.length < 2) continue\n      groupNotes.sort((a, b) => a.t - b.t)\n      const first = groupNotes[0]!\n      const last = groupNotes[groupNotes.length - 1]!\n      const a = stemTip(first, wrapDelta(first.t, beat, LOOP_BEATS))\n      const b = stemTip(last, wrapDelta(last.t, beat, LOOP_BEATS))\n      const intens = Math.max(nearPlay(a.d), nearPlay(b.d))\n      ctx.strokeStyle = rgba(color, 0.28 + intens * 0.5)\n      ctx.lineWidth = Math.max(1.6, sp * 0.18) * ((a.tip.s + b.tip.s) * 0.5)\n      ctx.beginPath()\n      ctx.moveTo(a.tip.x, a.tip.y)\n      ctx.lineTo(b.tip.x, b.tip.y)\n      ctx.stroke()\n      if (first.dur <= 0.13) {\n        const oy = (first.staff === 0 ? -1 : 1) * 3.2\n        ctx.beginPath()\n        ctx.moveTo(a.tip.x, a.tip.y + oy)\n        ctx.lineTo(b.tip.x, b.tip.y + oy)\n        ctx.stroke()\n      }\n    }\n\n    const playYScreen = project(0, playY).y\n    ctx.save()\n    ctx.lineCap = \"butt\"\n    ctx.strokeStyle = rgba(color, (dark ? 0.22 : 0.16) * Math.min(1, bloom))\n    ctx.lineWidth = 2\n    ctx.beginPath()\n    ctx.moveTo(0, playYScreen)\n    ctx.lineTo(w, playYScreen)\n    ctx.stroke()\n    ctx.strokeStyle = rgba(color, (dark ? 0.7 : 0.45) * Math.min(1, bloom))\n    ctx.lineWidth = 0.75\n    ctx.beginPath()\n    ctx.moveTo(0, playYScreen)\n    ctx.lineTo(w, playYScreen)\n    ctx.stroke()\n    ctx.restore()\n\n    const bloomOp = dark ? \"lighter\" : \"source-over\"\n    ctx.globalCompositeOperation = bloomOp\n\n    for (const note of score.notes) {\n      const d = wrapDelta(note.t, beat, LOOP_BEATS)\n      if (d > visMax || d < visMin) continue\n      const y = timeY(d, ppb, playY)\n      const x = pitchX(note.staff, note.pitch, gap, sp)\n      const pt = project(x, y)\n      const intens = nearPlay(d)\n      const upcoming = d > 0 ? clamp(1 - d / 10, 0.18, 0.55) : 0.2\n      const headR = Math.max(2.4, sp * 0.38)\n      const alpha = upcoming + intens * 0.8\n\n      if (note.acc !== 0 && d > -0.4) {\n        const accPt = project(x, y - sp * 0.9)\n        ctx.fillStyle = rgba(color, 0.25 + intens * 0.5)\n        ctx.font = `${Math.round(sp * 1.1)}px Georgia, serif`\n        ctx.fillText(note.acc > 0 ? \"#\" : \"b\", accPt.x - 4, accPt.y)\n      }\n\n      if (note.pitch < 0 || note.pitch > 8) {\n        const ledgerPitch = note.pitch < 0 ? -2 : 10\n        const lx0 = pitchX(note.staff, ledgerPitch - 0.9, gap, sp)\n        const lx1 = pitchX(note.staff, ledgerPitch + 0.9, gap, sp)\n        const la = project(lx0, y)\n        const lb = project(lx1, y)\n        ctx.strokeStyle = rgba(color, 0.2 + intens * 0.3)\n        ctx.lineWidth = 1\n        ctx.beginPath()\n        ctx.moveTo(la.x, la.y)\n        ctx.lineTo(lb.x, lb.y)\n        ctx.stroke()\n      }\n\n      if (intens > 0.04 && bloom > 0) {\n        const halo = (5 + intens * 9) * bloom\n        glowBlob(pt, halo, (dark ? 0.55 : 0.28) * intens * Math.min(1, bloom))\n      }\n\n      ctx.globalCompositeOperation = \"source-over\"\n      ctx.save()\n      if (intens > 0.2 && bloom > 0) {\n        ctx.shadowColor = rgba(color, dark ? 0.9 : 0.45)\n        ctx.shadowBlur = (3.5 + intens * 5) * bloom\n      }\n      drawOval(pt, headR, rgba(color, clamp(alpha, 0.2, 1)))\n      ctx.restore()\n      ctx.globalCompositeOperation = bloomOp\n\n      if (d <= 0 && d > -0.08 && intens > 0.7) {\n        const id = (note.t * 1000 + note.staff * 17 + note.pitch) | 0\n        if (!hit.has(id)) {\n          hit.add(id)\n          flares.push({\n            x,\n            y: playY,\n            age: 0,\n            life: 0.38,\n            size: 10,\n          })\n          if (hit.size > 400) hit.clear()\n        }\n      }\n    }\n\n    for (let i = flares.length - 1; i >= 0; i--) {\n      const flare = flares[i]!\n      flare.age += dt\n      const t = flare.age / flare.life\n      if (t >= 1) {\n        flares.splice(i, 1)\n        continue\n      }\n      const pt = project(flare.x, flare.y)\n      const fade = Math.sin((1 - t) * Math.PI)\n      glowBlob(pt, (7 + t * 6) * bloom, (dark ? 0.55 : 0.28) * fade)\n      ctx.save()\n      ctx.translate(pt.x, pt.y)\n      ctx.rotate(cam.z)\n      const flareW = 22 * bloom * (1 + t * 0.4) * pt.s\n      const flareH = 1.4 * pt.s\n      const fg = ctx.createLinearGradient(-flareW, 0, flareW, 0)\n      fg.addColorStop(0, rgba(color, 0))\n      fg.addColorStop(0.5, rgba(color, (dark ? 0.7 : 0.4) * fade))\n      fg.addColorStop(1, rgba(color, 0))\n      ctx.fillStyle = fg\n      ctx.fillRect(-flareW, -flareH, flareW * 2, flareH * 2)\n      ctx.restore()\n    }\n\n    ctx.globalCompositeOperation = \"source-over\"\n\n    raf = requestAnimationFrame(frame)\n  }\n\n  raf = requestAnimationFrame(frame)\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDens = densityOf(options.density)\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      rgb = parseColor(resolveColor(options.color, dark))\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDens\n      ) {\n        rebuild()\n      }\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type PhosphorScoreProps = Omit<PhosphorScoreOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\nfunction PhosphorEdgeFade({\n  edge,\n  dark,\n}: {\n  edge: \"top\" | \"bottom\"\n  dark: boolean\n}) {\n  const isTop = edge === \"top\"\n  const pos = isTop ? \"top-0\" : \"bottom-0\"\n  const mask = isTop\n    ? \"mask-[linear-gradient(to_bottom,black,transparent)]\"\n    : \"mask-[linear-gradient(to_top,black,transparent)]\"\n  return (\n    <>\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 z-10 h-40 backdrop-blur-xl\",\n          pos,\n          mask\n        )}\n      />\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 z-10 h-24 backdrop-blur-md\",\n          pos,\n          mask\n        )}\n      />\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 z-10 h-28\",\n          pos,\n          !dark &&\n            (isTop\n              ? \"bg-linear-to-b from-background/65 to-transparent\"\n              : \"bg-linear-to-t from-background/65 to-transparent\")\n        )}\n        style={\n          dark\n            ? {\n                backgroundImage: isTop\n                  ? `linear-gradient(to bottom, rgba(5,5,5,0.7), transparent)`\n                  : `linear-gradient(to top, rgba(5,5,5,0.7), transparent)`,\n              }\n            : undefined\n        }\n      />\n    </>\n  )\n}\n\n/**\n * Vertical phosphor sheet music — notes fall toward a playhead, bloom,\n * then exit in a flare. Follows light and dark.\n */\nexport function PhosphorScore({\n  className,\n  color,\n  glow = DEFAULT_GLOW,\n  speed = DEFAULT_SPEED,\n  density = DEFAULT_DENSITY,\n  sway = true,\n  seed = DEFAULT_SEED,\n  theme = \"auto\",\n}: PhosphorScoreProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<PhosphorScoreInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [color, glow, speed, density, sway, seed, theme])\n\n  return (\n    <div\n      data-slot=\"phosphor-score\"\n      role=\"img\"\n      aria-label=\"Falling phosphor sheet music\"\n      className={cn(\"absolute inset-0 overflow-hidden bg-background\", className)}\n      style={isDark ? { backgroundColor: DARK_BG } : undefined}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n      <PhosphorEdgeFade edge=\"top\" dark={isDark} />\n      <PhosphorEdgeFade edge=\"bottom\" dark={isDark} />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  function line(x0: number, y0: number, x1: number, y1: number) {\n    ctx!.beginPath()\n    ctx!.moveTo(x0, y0)\n    ctx!.lineTo(x1, y1)\n    ctx!.stroke()\n  }\n\n  function drawStaves(l: Layout) {\n    const { h } = size\n    ctx!.lineCap = \"butt\"\n    ctx!.lineWidth = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, 0, x, h)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      const d = wrapDelta(bar, beat)\n      const y = yOf(l, d)\n      if (y < -4 || y > h + 4) continue\n      ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n      line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const { h } = size\n    const minD = (l.playY - h - l.ppb) / l.ppb\n    const maxD = (l.playY + l.ppb) / l.ppb\n    const inView = (d: number) => d >= minD && d <= maxD\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      const d = wrapDelta(mark.t, beat)\n      if (!inView(d)) continue\n      ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n      ctx!.fillText(mark.text, l.cx, yOf(l, d) + sp * 0.9)\n    }\n    ctx!.lineWidth = 1\n    for (const pin of s.hairpins) {\n      const d0 = wrapDelta(pin.t, beat)\n      const d1 = d0 + pin.dur\n      if (!inView(d0) && !inView(d1)) continue\n      const narrow = pin.opening ? d0 : d1\n      const wide = pin.opening ? d1 : d0\n      const half = sp * 0.9\n      ctx!.strokeStyle = rgba(\n        rgb,\n        alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n      )\n      ctx!.beginPath()\n      ctx!.moveTo(l.cx - half, yOf(l, wide))\n      ctx!.lineTo(l.cx, yOf(l, narrow))\n      ctx!.lineTo(l.cx + half, yOf(l, wide))\n      ctx!.stroke()\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    ctx!.lineWidth = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const d0 = wrapDelta(slur.first.t, beat)\n      const d1 = d0 + (slur.last.t - slur.first.t)\n      if (!inView(d0) && !inView(d1)) continue\n      const inward = slur.staff === 0 ? 1 : -1\n      const y0 = yOf(l, d0)\n      const y1 = yOf(l, d1)\n      const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n      const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n      const edge =\n        inward > 0\n          ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n          : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5)\n      ctx!.beginPath()\n      ctx!.moveTo(x0, y0)\n      ctx!.quadraticCurveTo(xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      ctx!.stroke()\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const d0 = wrapDelta(stem.t0, beat)\n      const d1 = d0 + (stem.t1 - stem.t0)\n      if (!inView(d0) && !inView(d1)) continue\n      const out = stem.staff === 0 ? -1 : 1\n      const tipX = xOf(l, stem.staff, stem.tip)\n      ctx!.lineWidth = stemW\n      if (stem.chord) {\n        // One stem through the chord, from the innermost head out to the tip.\n        const inner =\n          out < 0\n            ? Math.max(...stem.notes.map((n) => n.pitch))\n            : Math.min(...stem.notes.map((n) => n.pitch))\n        const y = yOf(l, d0) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n        line(xOf(l, stem.staff, inner), y, tipX, y)\n        continue\n      }\n      for (const n of stem.notes) {\n        const d = d0 + (n.t - stem.t0)\n        const y = yOf(l, d) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n        line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n      }\n      if (stem.beams === 0) continue\n      const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n      ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n      ctx!.lineWidth = sp * 0.36\n      const yA = yOf(l, d0) + side + stemW / 2\n      const yB = yOf(l, d1) + side - stemW / 2\n      const offset = sp * 0.18 * out\n      line(tipX - offset, yA, tipX - offset, yB)\n      if (stem.beams === 2) {\n        const x2 = tipX - offset - out * sp * 0.75\n        line(x2, yA, x2, yB)\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    ctx!.lineWidth = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const y = yOf(l, d)\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n      const from = n.pitch < 0 ? -2 : 10\n      const step = n.pitch < 0 ? -2 : 2\n      for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n        const x = xOf(l, n.staff, p)\n        line(x, y - ry * 1.7, x, y + ry * 1.7)\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        const d = wrapDelta(n.t, beat)\n        const lit = litAt(d)\n        if (lit < 0.03 || !inView(d)) continue\n        const r = sp * (1.1 + lit * 1.5) * bloom\n        ctx!.globalAlpha =\n          lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n        ctx!.drawImage(\n          glowSprite,\n          xOf(l, n.staff, n.pitch) - r,\n          yOf(l, d) - r,\n          r * 2,\n          r * 2\n        )\n      }\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const x = xOf(l, n.staff, n.pitch)\n      const y = yOf(l, d)\n      const color = rgba(rgb, alphaAt(d))\n      ctx!.beginPath()\n      ctx!.ellipse(x, y, rx, ry, 0.35, 0, Math.PI * 2)\n      if (n.hollow) {\n        ctx!.strokeStyle = color\n        ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n        ctx!.stroke()\n      } else {\n        ctx!.fillStyle = color\n        ctx!.fill()\n      }\n      if (n.acc !== 0) {\n        ctx!.fillStyle = color\n        ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", x, y + ry + sp * 0.95)\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const { w } = size\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      ctx!.globalAlpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      ctx!.drawImage(glowSprite, 0, y - band, w, band * 2)\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    ctx!.lineWidth = 1\n    line(0, y, w, y)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.8 : 0.4)\n      ctx!.drawImage(glowSprite, x - r, l.playY - r, r * 2, r * 2)\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.9 : 0.5)\n      ctx!.drawImage(glowSprite, x - streak, l.playY - 1.5, streak * 2, 3)\n    }\n    ctx!.globalAlpha = 1\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type PhosphorScoreProps = Omit<PhosphorScoreOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Background before the first frame, so dark mode never flashes light.\n * `#050505` is `DARK_BG`; Tailwind needs the literal.\n */\nconst SURFACE: Record<PhosphorScoreTheme, string> = {\n  auto: \"bg-background dark:bg-[#050505]\",\n  dark: \"bg-[#050505]\",\n  light: \"bg-background\",\n}\n\n/**\n * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,\n * each note blooms and flares as it plays, then fades with an afterglow.\n * Follows light and dark.\n */\nexport function PhosphorScore({\n  className,\n  color,\n  glow = DEFAULT_GLOW,\n  speed = DEFAULT_SPEED,\n  density = DEFAULT_DENSITY,\n  sway = true,\n  seed = DEFAULT_SEED,\n  theme = \"auto\",\n}: PhosphorScoreProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<PhosphorScoreInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n  }, [color, glow, speed, density, sway, seed, theme])\n\n  return (\n    <div\n      data-slot=\"phosphor-score\"\n      role=\"img\"\n      aria-label=\"Falling phosphor sheet music\"\n      className={cn(\n        \"absolute inset-0 overflow-hidden\",\n        SURFACE[theme] ?? SURFACE.auto,\n        className\n      )}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/phosphor-score.tsx"
     }
diff --git a/registry/phosphor-score/phosphor-score-demo.tsx b/registry/phosphor-score/phosphor-score-demo.tsx
index 5737f75..b078fbd 100644
--- a/registry/phosphor-score/phosphor-score-demo.tsx
+++ b/registry/phosphor-score/phosphor-score-demo.tsx
@@ -12,10 +12,10 @@ import { ComponentPreview } from "@/components/component-preview"
 import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
-  DARK_BG,
   DARK_COLOR,
   DEFAULT_DENSITY,
   DEFAULT_GLOW,
+  DEFAULT_SEED,
   DEFAULT_SPEED,
   LIGHT_COLOR,
   PhosphorScore,
@@ -39,6 +39,7 @@ export function PhosphorScoreDemo() {
       glow: DEFAULT_GLOW,
       speed: DEFAULT_SPEED,
       density: DEFAULT_DENSITY,
+      seed: DEFAULT_SEED,
       sway: true,
     }),
     [stock]
@@ -63,15 +64,13 @@ export function PhosphorScoreDemo() {
         title="Phosphor Score"
         stageClassName="min-h-0 overflow-hidden p-0"
       >
-        <div
-          className="relative h-[56svh] w-full overflow-hidden rounded-[inherit] bg-background"
-          style={theme === "dark" ? { backgroundColor: DARK_BG } : undefined}
-        >
+        <div className="relative h-[56svh] w-full overflow-hidden rounded-[inherit]">
           <PhosphorScore
             color={useAutoColor ? undefined : props.color}
             glow={props.glow}
             speed={props.speed}
             density={props.density}
+            seed={props.seed}
             sway={props.sway}
             theme="auto"
           />
@@ -88,6 +87,7 @@ export function PhosphorScoreDemo() {
           speed: props.speed === DEFAULT_SPEED ? undefined : props.speed,
           density:
             props.density === DEFAULT_DENSITY ? undefined : props.density,
+          seed: props.seed === DEFAULT_SEED ? undefined : props.seed,
           sway: props.sway ? undefined : false,
         }}
       >
@@ -120,6 +120,14 @@ export function PhosphorScoreDemo() {
           step={0.05}
           onChange={(v) => updateProp("density", v)}
         />
+        <ControlSlider
+          label="Seed"
+          value={props.seed}
+          min={1}
+          max={99}
+          step={1}
+          onChange={(v) => updateProp("seed", v)}
+        />
         <ControlSwitch
           label="Sway"
           description="Slow camera drift around the plane"
diff --git a/registry/phosphor-score/phosphor-score-vanilla.ts b/registry/phosphor-score/phosphor-score-vanilla.ts
index ec3fad0..86925aa 100644
--- a/registry/phosphor-score/phosphor-score-vanilla.ts
+++ b/registry/phosphor-score/phosphor-score-vanilla.ts
@@ -2,18 +2,18 @@ export type PhosphorScoreTheme = "light" | "dark" | "auto"
 
 export type PhosphorScoreOptions = {
   /**
-   * Ink / phosphor color. Omit to follow `theme`
+   * Ink / phosphor color, any CSS color. Omit to follow `theme`
    * (`LIGHT_COLOR` / `DARK_COLOR`).
    */
   color?: string
   /**
-   * Bloom amount, 0–100. Default `50`. Scales the playhead halo
-   * and exit flare — kept small so it sits on the note, not a disc.
+   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the
+   * flare a note leaves as it plays.
    */
   glow?: number
   /** Scroll speed in beats per second. Default `1.35`. */
   speed?: number
-  /** How packed the notation is. Default `1`. */
+  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */
   density?: number
   /** Slow camera drift. Default `true`. */
   sway?: boolean
@@ -47,63 +47,67 @@ export const DEFAULT_SPEED = 1.35
 export const DEFAULT_DENSITY = 1
 export const DEFAULT_SEED = 23
 
+/** Length of the generated score; it loops seamlessly. */
 const LOOP_BEATS = 48
+/** Nothing is written in the last half beat, so the loop seam never collides. */
+const LOOP_END = LOOP_BEATS - 0.5
+/** Stem length in half-spaces (3.5 staff spaces). */
+const STEM = 7
+/** Playhead height as a share of the canvas; the rest below is afterglow. */
+const PLAYHEAD = 0.7
+/** Share of the height faded out at the top and bottom edges. */
+const EDGE_FADE = 0.16
+/** Seconds to crossfade when `seed` or `density` regenerates the score. */
+const REBUILD_FADE = 0.35
+/** Seconds a flare lasts after its note plays. */
+const FLARE_LIFE = 0.5
+const MAX_FLARES = 48
 const DYNAMICS = ["pp", "p", "mp", "mf", "f", "ff"] as const
 
+type Staff = 0 | 1
+type Rgb = [number, number, number]
+
 type Note = {
   t: number
+  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */
   pitch: number
-  dur: number
-  staff: 0 | 1
-  beam: number
+  staff: Staff
+  /** Half notes and longer draw hollow heads. */
+  hollow: boolean
   acc: -1 | 0 | 1
 }
 
-type Mark = {
-  t: number
-  staff: 0 | 1
-  text: string
-  pitch: number
-}
-
-type Hairpin = {
-  t: number
-  dur: number
-  staff: 0 | 1
-  open: boolean
-}
-
-type Slur = {
+/**
+ * A stem carrier: a beamed group, a chord, or a lone note. Stems point
+ * away from the middle of the system, so beams sit on the outer side and
+ * dynamics have the space between the staves to themselves.
+ */
+type Stem = {
+  staff: Staff
+  notes: Note[]
   t0: number
   t1: number
-  p0: number
-  p1: number
-  staff: 0 | 1
-}
-
-type Link = {
-  t: number
-  p0: number
-  p1: number
+  /** Where the stems end (and the beam runs), in half-spaces. */
+  tip: number
+  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */
+  beams: 0 | 1 | 2
+  chord: boolean
 }
 
-type Dust = {
-  x: number
-  y: number
-  z: number
-  s: number
-  a: number
-}
+type Mark = { t: number; text: string }
+type Hairpin = { t: number; dur: number; opening: boolean }
+type Slur = { staff: Staff; first: Note; last: Note }
 
-type Flare = {
-  x: number
-  y: number
-  age: number
-  life: number
-  size: number
+type Score = {
+  notes: Note[]
+  stems: Stem[]
+  marks: Mark[]
+  hairpins: Hairpin[]
+  slurs: Slur[]
 }
 
-type Rgb = [number, number, number]
+type Dust = { x: number; y: number; z: number; s: number; a: number }
+type Flare = { staff: Staff; pitch: number; age: number }
 
 function mulberry32(seed: number) {
   let a = seed >>> 0
@@ -120,56 +124,26 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value))
 }
 
-function wrapDelta(t: number, now: number, loop: number) {
-  let d = t - now
-  d = ((((d + loop / 2) % loop) + loop) % loop) - loop / 2
-  return d
-}
-
-function parseColor(input?: string): Rgb {
-  const raw = (input ?? DEFAULT_COLOR).trim()
-  if (/^#[0-9a-fA-F]{6}$/.test(raw)) {
-    return [
-      parseInt(raw.slice(1, 3), 16),
-      parseInt(raw.slice(3, 5), 16),
-      parseInt(raw.slice(5, 7), 16),
-    ]
-  }
-  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {
-    return [
-      parseInt(raw[1]! + raw[1], 16),
-      parseInt(raw[2]! + raw[2], 16),
-      parseInt(raw[3]! + raw[3], 16),
-    ]
-  }
-  return [77, 255, 106]
-}
-
-function rgba(rgb: Rgb, a: number) {
-  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp(a, 0, 1)})`
-}
-
-function glowOf(value?: number) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_GLOW
-  return clamp(value, 0, 100)
+/** Signed beats from `now` to `t`, taking the shorter way round the loop. */
+function wrapDelta(t: number, now: number) {
+  const d = t - now
+  return (
+    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -
+    LOOP_BEATS / 2
+  )
 }
 
-function speedOf(value?: number) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_SPEED
-  return clamp(value, 0.15, 4)
+function numberOr(value: unknown, fallback: number, min: number, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+  return clamp(value, min, max)
 }
 
-function densityOf(value?: number) {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return DEFAULT_DENSITY
-  }
-  return clamp(value, 0.35, 1.85)
-}
-
-function seedOf(value?: number) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_SEED
-  return Math.round(value) >>> 0
-}
+const glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)
+const speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)
+const densityOf = (value?: number) =>
+  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)
+const seedOf = (value?: number) =>
+  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0
 
 function themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {
   return value === "light" || value === "dark" || value === "auto"
@@ -210,166 +184,220 @@ export function resolveBg(dark: boolean) {
   return dark ? DARK_BG : LIGHT_BG
 }
 
-type Score = {
-  notes: Note[]
-  marks: Mark[]
-  hairpins: Hairpin[]
-  slurs: Slur[]
-  links: Link[]
+/** Any CSS color → rgb, using the canvas' own parser. */
+function parseColor(
+  ctx: CanvasRenderingContext2D,
+  input: string,
+  fallback: string
+): Rgb {
+  ctx.fillStyle = fallback
+  ctx.fillStyle = input
+  const value = String(ctx.fillStyle)
+  if (value.startsWith("#") && value.length === 7) {
+    return [
+      parseInt(value.slice(1, 3), 16),
+      parseInt(value.slice(3, 5), 16),
+      parseInt(value.slice(5, 7), 16),
+    ]
+  }
+  const parts = value.match(/[\d.]+/g)?.map(Number) ?? []
+  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]
+}
+
+function rgba(rgb: Rgb, a: number) {
+  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`
 }
 
 function generateScore(seed: number, density: number): Score {
   const rng = mulberry32(seed)
   const notes: Note[] = []
+  const stems: Stem[] = []
   const marks: Mark[] = []
   const hairpins: Hairpin[] = []
   const slurs: Slur[] = []
-  const links: Link[] = []
-  let group = 1
-  const dens = densityOf(density)
 
-  const pick = <T>(list: readonly T[]) => list[Math.floor(rng() * list.length)]!
-
-  const pushNote = (
-    t: number,
-    pitch: number,
-    dur: number,
-    staff: 0 | 1,
-    beam: number
-  ) => {
-    notes.push({
+  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {
+    const n: Note = {
       t,
-      pitch: clamp(pitch, -3, 11),
-      dur,
+      pitch: clamp(Math.round(pitch), -3, 11),
       staff,
-      beam,
+      hollow,
       acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,
+    }
+    notes.push(n)
+    return n
+  }
+
+  const addStem = (
+    staff: Staff,
+    list: Note[],
+    beams: Stem["beams"],
+    chord = false
+  ) => {
+    const pitches = list.map((n) => n.pitch)
+    const tip =
+      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM
+    stems.push({
+      staff,
+      notes: list,
+      t0: list[0]!.t,
+      t1: list[list.length - 1]!.t,
+      tip,
+      beams: list.length > 1 && !chord ? beams : 0,
+      chord,
     })
   }
 
-  const addRun = (
-    staff: 0 | 1,
+  const run = (
+    staff: Staff,
     start: number,
     pitch: number,
     count: number,
-    step: number,
-    dir: number
+    step: number
   ) => {
-    const beam = group++
+    let dir = rng() < 0.5 ? 1 : -1
     let p = pitch
+    const list: Note[] = []
     for (let i = 0; i < count; i++) {
-      if (rng() > 0.12 / dens) pushNote(start + i * step, p, step, staff, beam)
-      const hop = rng() < 0.18 ? 2 : 1
-      p += dir * hop
-      if (p > 10 || p < -2) dir *= -1
+      if (i === 0 || rng() > 0.12 / density)
+        list.push(note(start + i * step, p, staff))
+      p += dir * (rng() < 0.18 ? 2 : 1)
+      if (p >= 10 || p <= -2) {
+        dir = -dir
+        p = clamp(p, -2, 10)
+      }
     }
-    if (count >= 4 && rng() < 0.45) {
-      slurs.push({
-        t0: start,
-        t1: start + (count - 1) * step,
-        p0: pitch,
-        p1: p,
-        staff,
-      })
+    // A run thinned down to one note is drawn as a lone quarter.
+    addStem(staff, list, step <= 0.25 ? 2 : 1)
+    if (list.length >= 4 && rng() < 0.45) {
+      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })
     }
   }
 
-  const addArp = (staff: 0 | 1, start: number, root: number, step: number) => {
-    const pattern = [0, 2, 4, 7, 4, 2, 0, -1]
-    const beam = group++
-    for (let i = 0; i < pattern.length; i++) {
-      pushNote(start + i * step, root + pattern[i]!, step, staff, beam)
-    }
+  const arpeggio = (
+    staff: Staff,
+    start: number,
+    root: number,
+    step: number
+  ) => {
+    const shape = [0, 2, 4, 7, 4, 2, 0, -1]
+    const list = shape.map((offset, i) =>
+      note(start + i * step, root + offset, staff)
+    )
+    addStem(staff, list, step <= 0.25 ? 2 : 1)
   }
 
-  const addChord = (staff: 0 | 1, t: number, root: number) => {
-    const beam = -group++
-    pushNote(t, root, 1, staff, beam)
-    pushNote(t, root + 2, 1, staff, beam)
-    if (rng() < 0.7) pushNote(t, root + 4, 1, staff, beam)
+  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {
+    const list = [
+      note(t, root, staff, hollow),
+      note(t, root + 2, staff, hollow),
+    ]
+    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))
+    addStem(staff, list, 0, true)
   }
 
   let t = 0
-  while (t < LOOP_BEATS - 1) {
+  while (t < LOOP_END) {
+    const room = LOOP_END - t
     const kind = rng()
-    const leftBusy = rng() < 0.55 + dens * 0.15
-    const runLen = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4
-    const step = rng() < 0.28 * dens ? 0.125 : 0.25
-    const startPitch = Math.floor(rng() * 7) + (leftBusy ? 1 : 0)
+    const lead: Staff = rng() < 0.55 ? 0 : 1
+    const other: Staff = lead === 0 ? 1 : 0
+    const phraseStart = t
 
     if (kind < 0.5) {
-      addRun(
-        leftBusy ? 0 : 1,
-        t,
-        startPitch,
-        runLen,
-        step,
-        rng() < 0.5 ? 1 : -1
-      )
-      if (rng() < 0.55 * dens) {
-        addChord(leftBusy ? 1 : 0, t, 2 + Math.floor(rng() * 4))
+      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4
+      const step = rng() < 0.35 * density ? 0.25 : 0.5
+      const length = count * step
+      if (length > room) break
+      run(lead, t, Math.floor(rng() * 7) + 1, count, step)
+      if (rng() < 0.55 * density) {
+        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)
       }
-      t += runLen * step
+      t += length
     } else if (kind < 0.72) {
-      addArp(0, t, 1 + Math.floor(rng() * 5), 0.25)
-      if (rng() < 0.7 * dens) {
-        addRun(1, t, 0 + Math.floor(rng() * 4), 4, 0.5, rng() < 0.5 ? 1 : -1)
-      }
+      if (room < 2) break
+      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)
+      if (rng() < 0.7 * density)
+        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)
       t += 2
-    } else if (kind < 0.86) {
-      addChord(0, t, 3 + Math.floor(rng() * 4))
-      addChord(1, t, Math.floor(rng() * 4))
-      if (rng() < 0.5) {
-        links.push({
-          t,
-          p0: 4,
-          p1: 4,
-        })
-      }
-      t += rng() < 0.5 ? 1 : 2
+    } else if (kind < 0.88) {
+      const hollow = rng() < 0.45
+      const length = hollow ? 2 : 1
+      if (length > room) break
+      chord(0, t, 2 + Math.floor(rng() * 4), hollow)
+      chord(1, t, Math.floor(rng() * 4), hollow)
+      t += length
     } else {
-      t += rng() < 0.5 ? 0.5 : 1
+      // A rest. Sparser scores rest longer.
+      t += density < 0.8 ? 1 : 0.5
+      continue
     }
 
-    if (rng() < 0.18) {
+    if (rng() < 0.2)
       marks.push({
-        t,
-        staff: rng() < 0.5 ? 0 : 1,
-        text: pick(DYNAMICS),
-        pitch: rng() < 0.5 ? -3.6 : 11.4,
-      })
-    }
-    if (rng() < 0.12) {
-      hairpins.push({
-        t,
-        dur: 2 + Math.floor(rng() * 3),
-        staff: rng() < 0.5 ? 0 : 1,
-        open: rng() < 0.5,
+        t: phraseStart,
+        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,
       })
+    if (rng() < 0.14) {
+      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)
+      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })
     }
   }
 
-  return { notes, marks, hairpins, slurs, links }
+  return { notes, stems, marks, hairpins, slurs }
 }
 
 function makeDust(seed: number): Dust[] {
   const rng = mulberry32(seed ^ 0x9e3779b9)
-  const dust: Dust[] = []
-  for (let i = 0; i < 90; i++) {
-    dust.push({
-      x: (rng() - 0.5) * 2,
-      y: (rng() - 0.5) * 2,
-      z: rng(),
-      s: 0.4 + rng() * 1.4,
-      a: 0.08 + rng() * 0.22,
-    })
+  return Array.from({ length: 90 }, () => ({
+    x: rng(),
+    y: rng(),
+    z: rng(),
+    s: 0.4 + rng() * 1.4,
+    a: 0.08 + rng() * 0.22,
+  }))
+}
+
+/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */
+function makeGlowSprite(rgb: Rgb) {
+  const size = 64
+  const sprite = document.createElement("canvas")
+  sprite.width = size
+  sprite.height = size
+  const g = sprite.getContext("2d")
+  if (!g) return sprite
+  const grad = g.createRadialGradient(
+    size / 2,
+    size / 2,
+    0,
+    size / 2,
+    size / 2,
+    size / 2
+  )
+  grad.addColorStop(0, rgba(rgb, 1))
+  grad.addColorStop(0.25, rgba(rgb, 0.45))
+  grad.addColorStop(0.6, rgba(rgb, 0.1))
+  grad.addColorStop(1, rgba(rgb, 0))
+  g.fillStyle = grad
+  g.fillRect(0, 0, size, size)
+  return sprite
+}
+
+/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */
+function litAt(d: number) {
+  if (d > 0.3) return 0
+  if (d >= 0) {
+    const k = 1 - d / 0.3
+    return k * k
   }
-  return dust
+  return Math.exp(d * 2.4)
 }
 
 /**
- * Vertical phosphor sheet music — notation falls toward a playhead,
- * blooms, then exits in a flare. Canvas 2D, CRT-green by default.
+ * Vertical phosphor sheet music: a grand staff scrolls down toward a
+ * playhead, each note blooms and flares as it plays, then fades with a
+ * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and
+ * holds a still frame under `prefers-reduced-motion`.
  */
 export function createPhosphorScore(
   canvas: HTMLCanvasElement,
@@ -388,21 +416,35 @@ export function createPhosphorScore(
   const ctx = canvas.getContext("2d", { alpha: true })
   if (!ctx) return null
 
-  const size = { w: 0, h: 0 }
   let score = generateScore(seedOf(options.seed), densityOf(options.density))
+  let previous: Score | null = null
+  let rebuildAge = REBUILD_FADE
   let dust = makeDust(seedOf(options.seed))
+
   let dark = resolveDark(themeOf(options.theme))
-  let rgb = parseColor(resolveColor(options.color, dark))
+  let rgb: Rgb = [0, 0, 0]
+  let glowSprite = document.createElement("canvas")
+  const recolor = () => {
+    rgb = parseColor(
+      ctx,
+      resolveColor(options.color, dark),
+      dark ? DARK_COLOR : LIGHT_COLOR
+    )
+    glowSprite = makeGlowSprite(rgb)
+  }
+  recolor()
   options.onThemeChange?.(dark)
+
   const flares: Flare[] = []
-  const hit = new Set<number>()
+  const size = { w: 0, h: 0, dpr: 1 }
   let reduce = false
-  let raf = 0
+  let onScreen = true
   let running = true
-  let lastFrame = performance.now()
-  let elapsed = 8
+  let raf = 0
+  let lastFrame = 0
+  // Start a few bars in, so the first frame already has notes at the playhead.
+  let beat = 8
   let clock = 0
-  let dtSmooth = 1 / 60
 
   const resize = () => {
     const parent = canvas.parentElement
@@ -410,467 +452,427 @@ export function createPhosphorScore(
     const dpr = Math.min(window.devicePixelRatio || 1, 2)
     const w = parent.clientWidth
     const h = parent.clientHeight
+    if (w === size.w && h === size.h && dpr === size.dpr) return
     size.w = w
     size.h = h
-    canvas.width = Math.floor(w * dpr)
-    canvas.height = Math.floor(h * dpr)
+    size.dpr = dpr
+    canvas.width = Math.max(1, Math.floor(w * dpr))
+    canvas.height = Math.max(1, Math.floor(h * dpr))
     canvas.style.width = `${w}px`
     canvas.style.height = `${h}px`
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    wake()
   }
 
-  resize()
-  const ro = new ResizeObserver(resize)
-  if (canvas.parentElement) ro.observe(canvas.parentElement)
+  const shouldAnimate = () =>
+    running && onScreen && !reduce && document.visibilityState !== "hidden"
 
-  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
-  const onReduce = () => {
-    reduce = mqReduce.matches
+  function wake() {
+    if (!running || raf) return
+    lastFrame = performance.now()
+    raf = requestAnimationFrame(tick)
   }
-  onReduce()
-  mqReduce.addEventListener("change", onReduce)
 
   const syncTheme = () => {
     const next = resolveDark(themeOf(options.theme))
     if (next === dark) return
     dark = next
-    rgb = parseColor(resolveColor(options.color, dark))
+    recolor()
     options.onThemeChange?.(dark)
+    wake()
+  }
+
+  const ro = new ResizeObserver(resize)
+  if (canvas.parentElement) ro.observe(canvas.parentElement)
+
+  const io = new IntersectionObserver(([entry]) => {
+    onScreen = entry?.isIntersecting ?? true
+    wake()
+  })
+  io.observe(canvas)
+
+  const onVisibility = () => wake()
+  document.addEventListener("visibilitychange", onVisibility)
+
+  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
+  const onReduce = () => {
+    reduce = mqReduce.matches
+    wake()
   }
+  reduce = mqReduce.matches
+  mqReduce.addEventListener("change", onReduce)
+
   const mo = new MutationObserver(syncTheme)
   mo.observe(document.documentElement, {
     attributes: true,
-    attributeFilter: ["class", "data-theme", "style"],
+    attributeFilter: ["class", "data-theme"],
   })
   const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
   mqDark.addEventListener("change", syncTheme)
 
-  const rebuild = () => {
-    score = generateScore(seedOf(options.seed), densityOf(options.density))
-    dust = makeDust(seedOf(options.seed))
-    rgb = parseColor(resolveColor(options.color, dark))
-    hit.clear()
-    flares.length = 0
-  }
+  function tick(now: number) {
+    raf = 0
+    if (!running) return
+    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()
 
-  type Pt = { x: number; y: number; s: number; z: number }
-
-  const cam = { x: 0, y: 0, z: 0 }
-  let frameFit = 0.78
-
-  const project = (x: number, y: number): Pt => {
-    const cosZ = Math.cos(cam.z)
-    const sinZ = Math.sin(cam.z)
-    const rx = x * cosZ - y * sinZ + cam.y
-    const ry = x * sinZ + y * cosZ + cam.x
-    const s = frameFit
-    return {
-      x: size.w * 0.5 + rx * s,
-      y: size.h * 0.5 + ry * s,
-      s,
-      z: 0,
+    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))
+    lastFrame = now
+    const animate = shouldAnimate()
+    const before = beat
+    if (animate) {
+      clock += dt
+      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS
+      rebuildAge += dt
+      spawnFlares(before, beat)
+    } else {
+      rebuildAge = REBUILD_FADE
+      flares.length = 0
+    }
+    for (let i = flares.length - 1; i >= 0; i--) {
+      flares[i]!.age += dt
+      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)
     }
-  }
-
-  const staffCenter = (staff: 0 | 1, gap: number) => (staff === 0 ? -gap : gap)
-
-  const pitchX = (staff: 0 | 1, pitch: number, gap: number, sp: number) =>
-    staffCenter(staff, gap) + (pitch - 4) * (sp * 0.5)
-
-  const timeY = (delta: number, ppb: number, playY: number) =>
-    playY - delta * ppb
 
-  const nearPlay = (delta: number) => {
-    if (delta > 0.55) return 0
-    if (delta > 0) return 1 - delta / 0.55
-    if (delta > -0.28) return 1
-    if (delta > -1.35) return 1 - (-delta - 0.28) / 1.07
-    return 0
+    draw()
+    if (animate) raf = requestAnimationFrame(tick)
   }
 
-  const drawOval = (pt: Pt, r: number, fill: string) => {
-    ctx.save()
-    ctx.translate(pt.x, pt.y)
-    ctx.rotate(-0.38)
-    ctx.scale(1, 0.7)
-    ctx.beginPath()
-    ctx.arc(0, 0, r * pt.s, 0, Math.PI * 2)
-    ctx.fillStyle = fill
-    ctx.fill()
-    ctx.restore()
+  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */
+  function spawnFlares(from: number, to: number) {
+    const span = wrapDelta(to, from)
+    if (span <= 0) return
+    for (const n of score.notes) {
+      const d = wrapDelta(n.t, from)
+      if (d > 0 && d <= span) {
+        if (flares.length >= MAX_FLARES) flares.shift()
+        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })
+      }
+    }
   }
 
-  const glowBlob = (pt: Pt, radius: number, alpha: number) => {
-    const r = Math.max(1.2, radius * pt.s)
-    const g = ctx.createRadialGradient(pt.x, pt.y, 0, pt.x, pt.y, r)
-    g.addColorStop(0, rgba(rgb, alpha))
-    g.addColorStop(0.28, rgba(rgb, alpha * 0.42))
-    g.addColorStop(0.62, rgba(rgb, alpha * 0.1))
-    g.addColorStop(1, rgba(rgb, 0))
-    ctx.fillStyle = g
-    ctx.beginPath()
-    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2)
-    ctx.fill()
-  }
+  function draw() {
+    const { w, h, dpr } = size
+    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx!.globalCompositeOperation = "source-over"
+    ctx!.globalAlpha = 1
+    if (dark) {
+      ctx!.fillStyle = DARK_BG
+      ctx!.fillRect(0, 0, w, h)
+    } else {
+      ctx!.clearRect(0, 0, w, h)
+    }
+    if (w < 2 || h < 2) return
 
-  const frame = (now: number) => {
-    if (!running) return
-    const raw = Math.min(0.05, (now - lastFrame) / 1000)
-    lastFrame = now
-    dtSmooth += (raw - dtSmooth) * 0.2
-    const dt = dtSmooth
-    clock += dt
-    if (!reduce) elapsed += dt * speedOf(options.speed)
-    const beat = elapsed % LOOP_BEATS
-
-    const w = size.w
-    const h = size.h
     const swayOn = options.sway !== false && !reduce
-    cam.x = swayOn ? Math.sin(clock * 0.31) * 8 : 0
-    cam.y = swayOn ? Math.cos(clock * 0.23) * 10 : 0
-    cam.z = 0
-    frameFit = 0.78
-
-    const pad = Math.max(28, Math.min(w, h) * 0.1)
-    const innerW = Math.max(1, w - pad * 2)
-    const innerH = Math.max(1, h - pad * 2)
-    let sp = clamp(Math.min(innerW, innerH) * 0.028, 10, 28)
-    const maxHalf = innerW / 2 / frameFit
-    let gap = maxHalf * 0.4
-    if (gap < sp * 7) {
-      sp = clamp(maxHalf * 0.4 / 7, 10, 28)
-      gap = maxHalf * 0.4
+    const cam = {
+      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,
+      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,
     }
-    gap = Math.max(sp * 7, gap)
-    const topY = -innerH / 2 / frameFit
-    const playY = (innerH / 2 - sp * 2) / frameFit
-    const ppb = Math.max(28, (playY - topY) / 7.6)
-    const bloom = glowOf(options.glow) / 50
-    const color = parseColor(resolveColor(options.color, dark))
-    rgb = color
-
-    ctx.imageSmoothingEnabled = true
-    ctx.globalCompositeOperation = "source-over"
-    if (dark) {
-      ctx.fillStyle = DARK_BG
-      ctx.fillRect(0, 0, w, h)
-    } else {
-      ctx.clearRect(0, 0, w, h)
+    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)
+    const layout = {
+      sp,
+      gap: clamp(w * 0.16, sp * 6.5, sp * 12),
+      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),
+      cx: w / 2 + cam.x,
+      playY: h * PLAYHEAD + cam.y,
     }
+    const bloom = glowOf(options.glow) / 50
 
-    ctx.save()
-    ctx.globalAlpha = 1
+    // Dust drifts in screen space, beneath everything.
     for (const d of dust) {
-      const px = ((d.x + 1) * 0.5 + clock * 0.01 * d.z) % 1
-      const py = ((d.y + 1) * 0.5 + elapsed * 0.004 * (0.3 + d.z)) % 1
-      ctx.fillStyle = rgba(color, dark ? d.a : d.a * 0.28)
-      ctx.fillRect(px * w, py * h, d.s, d.s)
+      const px = (d.x + clock * 0.01 * d.z) % 1
+      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1
+      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)
+      ctx!.fillRect(px * w, py * h, d.s, d.s)
     }
-    ctx.restore()
 
-    const visMin = (playY - innerH / 2 / frameFit) / ppb
-    const visMax = (playY - topY) / ppb
+    drawStaves(layout)
 
-    const inView = (t: number) => {
-      const d = wrapDelta(t, beat, LOOP_BEATS)
-      return d < visMax && d > visMin
-    }
+    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1
+    if (previous && fade >= 1) previous = null
+    if (previous) drawScore(previous, layout, 1 - fade, 0)
+    drawScore(score, layout, fade, bloom)
+
+    drawPlayhead(layout, bloom)
+    drawFlares(layout, bloom)
+    drawEdgeFade(w, h)
+  }
+
+  type Layout = {
+    sp: number
+    gap: number
+    ppb: number
+    cx: number
+    playY: number
+  }
+
+  const xOf = (l: Layout, staff: Staff, pitch: number) =>
+    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)
+  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb
+
+  function line(x0: number, y0: number, x1: number, y1: number) {
+    ctx!.beginPath()
+    ctx!.moveTo(x0, y0)
+    ctx!.lineTo(x1, y1)
+    ctx!.stroke()
+  }
 
-    const staffY0 = topY - h * 0.4 / frameFit
-    const staffY1 = playY + h * 0.25 / frameFit
-    ctx.lineCap = "butt"
-    ctx.lineJoin = "miter"
-    ctx.strokeStyle = rgba(color, 0.22)
-    ctx.lineWidth = 1
+  function drawStaves(l: Layout) {
+    const { h } = size
+    ctx!.lineCap = "butt"
+    ctx!.lineWidth = 1
+    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)
     for (const staff of [0, 1] as const) {
-      for (let line = 0; line < 5; line++) {
-        const x = pitchX(staff, line * 2, gap, sp)
-        const a = project(x, staffY0)
-        const b = project(x, staffY1)
-        ctx.beginPath()
-        ctx.moveTo(a.x, a.y)
-        ctx.lineTo(b.x, b.y)
-        ctx.stroke()
+      for (let p = 0; p <= 8; p += 2) {
+        const x = Math.round(xOf(l, staff, p)) + 0.5
+        line(x, 0, x, h)
       }
     }
-
-    ctx.lineCap = "round"
-    ctx.lineJoin = "round"
-
+    // Bar lines every four beats, through both staves like a grand staff.
     for (let bar = 0; bar < LOOP_BEATS; bar += 4) {
-      if (!inView(bar)) continue
-      const d = wrapDelta(bar, beat, LOOP_BEATS)
-      const y = timeY(d, ppb, playY)
-      const alpha = 0.14 + nearPlay(d) * 0.2
-      for (const staff of [0, 1] as const) {
-        const a = project(pitchX(staff, 0, gap, sp), y)
-        const b = project(pitchX(staff, 8, gap, sp), y)
-        ctx.strokeStyle = rgba(color, alpha)
-        ctx.lineWidth = 1
-        ctx.beginPath()
-        ctx.moveTo(a.x, a.y)
-        ctx.lineTo(b.x, b.y)
-        ctx.stroke()
-      }
+      const d = wrapDelta(bar, beat)
+      const y = yOf(l, d)
+      if (y < -4 || y > h + 4) continue
+      ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)
+      line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)
     }
+  }
 
-    ctx.font = `italic ${Math.round(clamp(sp * 1.15, 9, 14))}px Georgia, "Times New Roman", serif`
-    ctx.textBaseline = "middle"
-    for (const mark of score.marks) {
-      if (!inView(mark.t)) continue
-      const d = wrapDelta(mark.t, beat, LOOP_BEATS)
-      const pt = project(
-        pitchX(mark.staff, mark.pitch, gap, sp),
-        timeY(d, ppb, playY)
-      )
-      ctx.fillStyle = rgba(color, 0.28 + nearPlay(d) * 0.45)
-      ctx.fillText(mark.text, pt.x, pt.y)
+  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {
+    if (opacity <= 0) return
+    const { h } = size
+    const minD = (l.playY - h - l.ppb) / l.ppb
+    const maxD = (l.playY + l.ppb) / l.ppb
+    const inView = (d: number) => d >= minD && d <= maxD
+    const base = (d: number) =>
+      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3
+    const alphaAt = (d: number) => {
+      const b = base(d)
+      return (b + (1 - b) * litAt(d)) * opacity
     }
-
-    for (const pin of score.hairpins) {
-      const t1 = pin.t + pin.dur
-      if (!inView(pin.t) && !inView(t1)) continue
-      const d0 = wrapDelta(pin.t, beat, LOOP_BEATS)
-      const d1 = wrapDelta(t1, beat, LOOP_BEATS)
-      const staff = pin.staff
-      const outer = staff === 0 ? -4.6 : 12.6
-      const inner = staff === 0 ? -3.4 : 11.4
-      const y0 = timeY(d0, ppb, playY)
-      const y1 = timeY(d1, ppb, playY)
-      const xOuter0 = pitchX(staff, pin.open ? outer : inner, gap, sp)
-      const xOuter1 = pitchX(staff, pin.open ? inner : outer, gap, sp)
-      const xMid = pitchX(staff, (outer + inner) / 2, gap, sp)
-      const a = project(xOuter0, y0)
-      const b = project(xOuter1, y1)
-      const c = project(xMid, y0)
-      const e = project(xMid, y1)
-      ctx.strokeStyle = rgba(color, 0.22)
-      ctx.lineWidth = 1
-      ctx.beginPath()
-      ctx.moveTo(a.x, a.y)
-      ctx.lineTo(b.x, b.y)
-      ctx.moveTo(c.x, c.y)
-      ctx.lineTo(e.x, e.y)
-      ctx.stroke()
+    const sp = l.sp
+    const rx = sp * 0.5
+    const ry = sp * 0.64
+
+    ctx!.lineCap = "butt"
+
+    // Dynamics and hairpins share the space between the staves.
+    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, "Times New Roman", serif`
+    ctx!.textAlign = "center"
+    ctx!.textBaseline = "middle"
+    for (const mark of s.marks) {
+      const d = wrapDelta(mark.t, beat)
+      if (!inView(d)) continue
+      ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)
+      ctx!.fillText(mark.text, l.cx, yOf(l, d) + sp * 0.9)
     }
-
-    for (const slur of score.slurs) {
-      if (!inView(slur.t0) && !inView(slur.t1)) continue
-      const d0 = wrapDelta(slur.t0, beat, LOOP_BEATS)
-      const d1 = wrapDelta(slur.t1, beat, LOOP_BEATS)
-      const side = slur.staff === 0 ? -1.8 : 1.8
-      const a = project(
-        pitchX(slur.staff, slur.p0 + side, gap, sp),
-        timeY(d0, ppb, playY)
-      )
-      const b = project(
-        pitchX(slur.staff, slur.p1 + side, gap, sp),
-        timeY(d1, ppb, playY)
+    ctx!.lineWidth = 1
+    for (const pin of s.hairpins) {
+      const d0 = wrapDelta(pin.t, beat)
+      const d1 = d0 + pin.dur
+      if (!inView(d0) && !inView(d1)) continue
+      const narrow = pin.opening ? d0 : d1
+      const wide = pin.opening ? d1 : d0
+      const half = sp * 0.9
+      ctx!.strokeStyle = rgba(
+        rgb,
+        alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6
       )
-      const midT = (slur.t0 + slur.t1) / 2
-      const midP = (slur.p0 + slur.p1) / 2 + side * 1.6
-      const c = project(
-        pitchX(slur.staff, midP, gap, sp),
-        timeY(wrapDelta(midT, beat, LOOP_BEATS), ppb, playY)
-      )
-      ctx.strokeStyle = rgba(color, 0.2)
-      ctx.lineWidth = 1.1
-      ctx.beginPath()
-      ctx.moveTo(a.x, a.y)
-      ctx.quadraticCurveTo(c.x, c.y, b.x, b.y)
-      ctx.stroke()
+      ctx!.beginPath()
+      ctx!.moveTo(l.cx - half, yOf(l, wide))
+      ctx!.lineTo(l.cx, yOf(l, narrow))
+      ctx!.lineTo(l.cx + half, yOf(l, wide))
+      ctx!.stroke()
     }
 
-    for (const link of score.links) {
-      if (!inView(link.t)) continue
-      const d = wrapDelta(link.t, beat, LOOP_BEATS)
-      const y = timeY(d, ppb, playY)
-      const a = project(pitchX(0, link.p0, gap, sp), y)
-      const b = project(pitchX(1, link.p1, gap, sp), y)
-      ctx.strokeStyle = rgba(color, 0.12 + nearPlay(d) * 0.18)
-      ctx.lineWidth = 1
-      ctx.beginPath()
-      ctx.moveTo(a.x, a.y)
-      ctx.lineTo(b.x, b.y)
-      ctx.stroke()
+    // Slurs curve on the inner side, opposite the stems.
+    ctx!.lineWidth = Math.max(1, sp * 0.1)
+    for (const slur of s.slurs) {
+      const d0 = wrapDelta(slur.first.t, beat)
+      const d1 = d0 + (slur.last.t - slur.first.t)
+      if (!inView(d0) && !inView(d1)) continue
+      const inward = slur.staff === 0 ? 1 : -1
+      const y0 = yOf(l, d0)
+      const y1 = yOf(l, d1)
+      const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)
+      const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)
+      const edge =
+        inward > 0
+          ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5
+          : Math.min(slur.first.pitch, slur.last.pitch) - 3.5
+      ctx!.strokeStyle = rgba(rgb, alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5)
+      ctx!.beginPath()
+      ctx!.moveTo(x0, y0)
+      ctx!.quadraticCurveTo(xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)
+      ctx!.stroke()
     }
 
-    const groups = new Map<number, Note[]>()
-    for (const note of score.notes) {
-      if (note.beam <= 0) continue
-      if (!inView(note.t)) continue
-      const list = groups.get(note.beam)
-      if (list) list.push(note)
-      else groups.set(note.beam, [note])
-    }
-
-    const stemTip = (note: Note, d: number) => {
-      const dir = note.staff === 0 ? -1 : 1
-      const y = timeY(d, ppb, playY)
-      const x0 = pitchX(note.staff, note.pitch, gap, sp)
-      const x1 = pitchX(note.staff, note.pitch + dir * 6.4, gap, sp)
-      return {
-        head: project(x0, y),
-        tip: project(x1, y),
-        d,
+    // Stems and beams. A stem runs along the pitch axis from the side of its
+    // head (the time axis is "across" here), out to the beam.
+    const stemW = Math.max(1, sp * 0.11)
+    const side = -ry * 0.8
+    for (const stem of s.stems) {
+      const d0 = wrapDelta(stem.t0, beat)
+      const d1 = d0 + (stem.t1 - stem.t0)
+      if (!inView(d0) && !inView(d1)) continue
+      const out = stem.staff === 0 ? -1 : 1
+      const tipX = xOf(l, stem.staff, stem.tip)
+      ctx!.lineWidth = stemW
+      if (stem.chord) {
+        // One stem through the chord, from the innermost head out to the tip.
+        const inner =
+          out < 0
+            ? Math.max(...stem.notes.map((n) => n.pitch))
+            : Math.min(...stem.notes.map((n) => n.pitch))
+        const y = yOf(l, d0) + side
+        ctx!.strokeStyle = rgba(rgb, alphaAt(d0))
+        line(xOf(l, stem.staff, inner), y, tipX, y)
+        continue
       }
-    }
-
-    for (const note of score.notes) {
-      if (!inView(note.t)) continue
-      const d = wrapDelta(note.t, beat, LOOP_BEATS)
-      const { head, tip } = stemTip(note, d)
-      const intens = nearPlay(d)
-      ctx.strokeStyle = rgba(color, 0.22 + intens * 0.45)
-      ctx.lineWidth = 1 * head.s
-      ctx.beginPath()
-      ctx.moveTo(head.x, head.y)
-      ctx.lineTo(tip.x, tip.y)
-      ctx.stroke()
-    }
-
-    for (const [, groupNotes] of groups) {
-      if (groupNotes.length < 2) continue
-      groupNotes.sort((a, b) => a.t - b.t)
-      const first = groupNotes[0]!
-      const last = groupNotes[groupNotes.length - 1]!
-      const a = stemTip(first, wrapDelta(first.t, beat, LOOP_BEATS))
-      const b = stemTip(last, wrapDelta(last.t, beat, LOOP_BEATS))
-      const intens = Math.max(nearPlay(a.d), nearPlay(b.d))
-      ctx.strokeStyle = rgba(color, 0.28 + intens * 0.5)
-      ctx.lineWidth = Math.max(1.6, sp * 0.18) * ((a.tip.s + b.tip.s) * 0.5)
-      ctx.beginPath()
-      ctx.moveTo(a.tip.x, a.tip.y)
-      ctx.lineTo(b.tip.x, b.tip.y)
-      ctx.stroke()
-      if (first.dur <= 0.13) {
-        const oy = (first.staff === 0 ? -1 : 1) * 3.2
-        ctx.beginPath()
-        ctx.moveTo(a.tip.x, a.tip.y + oy)
-        ctx.lineTo(b.tip.x, b.tip.y + oy)
-        ctx.stroke()
+      for (const n of stem.notes) {
+        const d = d0 + (n.t - stem.t0)
+        const y = yOf(l, d) + side
+        ctx!.strokeStyle = rgba(rgb, alphaAt(d))
+        line(xOf(l, stem.staff, n.pitch), y, tipX, y)
       }
-    }
-
-    const playYScreen = project(0, playY).y
-    ctx.save()
-    ctx.lineCap = "butt"
-    ctx.strokeStyle = rgba(color, (dark ? 0.22 : 0.16) * Math.min(1, bloom))
-    ctx.lineWidth = 2
-    ctx.beginPath()
-    ctx.moveTo(0, playYScreen)
-    ctx.lineTo(w, playYScreen)
-    ctx.stroke()
-    ctx.strokeStyle = rgba(color, (dark ? 0.7 : 0.45) * Math.min(1, bloom))
-    ctx.lineWidth = 0.75
-    ctx.beginPath()
-    ctx.moveTo(0, playYScreen)
-    ctx.lineTo(w, playYScreen)
-    ctx.stroke()
-    ctx.restore()
-
-    const bloomOp = dark ? "lighter" : "source-over"
-    ctx.globalCompositeOperation = bloomOp
-
-    for (const note of score.notes) {
-      const d = wrapDelta(note.t, beat, LOOP_BEATS)
-      if (d > visMax || d < visMin) continue
-      const y = timeY(d, ppb, playY)
-      const x = pitchX(note.staff, note.pitch, gap, sp)
-      const pt = project(x, y)
-      const intens = nearPlay(d)
-      const upcoming = d > 0 ? clamp(1 - d / 10, 0.18, 0.55) : 0.2
-      const headR = Math.max(2.4, sp * 0.38)
-      const alpha = upcoming + intens * 0.8
-
-      if (note.acc !== 0 && d > -0.4) {
-        const accPt = project(x, y - sp * 0.9)
-        ctx.fillStyle = rgba(color, 0.25 + intens * 0.5)
-        ctx.font = `${Math.round(sp * 1.1)}px Georgia, serif`
-        ctx.fillText(note.acc > 0 ? "#" : "b", accPt.x - 4, accPt.y)
+      if (stem.beams === 0) continue
+      const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0
+      ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))
+      ctx!.lineWidth = sp * 0.36
+      const yA = yOf(l, d0) + side + stemW / 2
+      const yB = yOf(l, d1) + side - stemW / 2
+      const offset = sp * 0.18 * out
+      line(tipX - offset, yA, tipX - offset, yB)
+      if (stem.beams === 2) {
+        const x2 = tipX - offset - out * sp * 0.75
+        line(x2, yA, x2, yB)
       }
+    }
 
-      if (note.pitch < 0 || note.pitch > 8) {
-        const ledgerPitch = note.pitch < 0 ? -2 : 10
-        const lx0 = pitchX(note.staff, ledgerPitch - 0.9, gap, sp)
-        const lx1 = pitchX(note.staff, ledgerPitch + 0.9, gap, sp)
-        const la = project(lx0, y)
-        const lb = project(lx1, y)
-        ctx.strokeStyle = rgba(color, 0.2 + intens * 0.3)
-        ctx.lineWidth = 1
-        ctx.beginPath()
-        ctx.moveTo(la.x, la.y)
-        ctx.lineTo(lb.x, lb.y)
-        ctx.stroke()
+    // Ledger lines, parallel to the staff lines.
+    ctx!.lineWidth = 1
+    for (const n of s.notes) {
+      if (n.pitch > -2 && n.pitch < 10) continue
+      const d = wrapDelta(n.t, beat)
+      if (!inView(d)) continue
+      const y = yOf(l, d)
+      ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)
+      const from = n.pitch < 0 ? -2 : 10
+      const step = n.pitch < 0 ? -2 : 2
+      for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {
+        const x = xOf(l, n.staff, p)
+        line(x, y - ry * 1.7, x, y + ry * 1.7)
       }
+    }
 
-      if (intens > 0.04 && bloom > 0) {
-        const halo = (5 + intens * 9) * bloom
-        glowBlob(pt, halo, (dark ? 0.55 : 0.28) * intens * Math.min(1, bloom))
+    // Glow under the heads that are playing.
+    if (bloom > 0) {
+      ctx!.globalCompositeOperation = dark ? "lighter" : "source-over"
+      for (const n of s.notes) {
+        const d = wrapDelta(n.t, beat)
+        const lit = litAt(d)
+        if (lit < 0.03 || !inView(d)) continue
+        const r = sp * (1.1 + lit * 1.5) * bloom
+        ctx!.globalAlpha =
+          lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity
+        ctx!.drawImage(
+          glowSprite,
+          xOf(l, n.staff, n.pitch) - r,
+          yOf(l, d) - r,
+          r * 2,
+          r * 2
+        )
       }
+      ctx!.globalAlpha = 1
+      ctx!.globalCompositeOperation = "source-over"
+    }
 
-      ctx.globalCompositeOperation = "source-over"
-      ctx.save()
-      if (intens > 0.2 && bloom > 0) {
-        ctx.shadowColor = rgba(color, dark ? 0.9 : 0.45)
-        ctx.shadowBlur = (3.5 + intens * 5) * bloom
+    // Noteheads, with accidentals just before them in reading order (below).
+    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, "Times New Roman", serif`
+    for (const n of s.notes) {
+      const d = wrapDelta(n.t, beat)
+      if (!inView(d)) continue
+      const x = xOf(l, n.staff, n.pitch)
+      const y = yOf(l, d)
+      const color = rgba(rgb, alphaAt(d))
+      ctx!.beginPath()
+      ctx!.ellipse(x, y, rx, ry, 0.35, 0, Math.PI * 2)
+      if (n.hollow) {
+        ctx!.strokeStyle = color
+        ctx!.lineWidth = Math.max(1.2, sp * 0.16)
+        ctx!.stroke()
+      } else {
+        ctx!.fillStyle = color
+        ctx!.fill()
       }
-      drawOval(pt, headR, rgba(color, clamp(alpha, 0.2, 1)))
-      ctx.restore()
-      ctx.globalCompositeOperation = bloomOp
-
-      if (d <= 0 && d > -0.08 && intens > 0.7) {
-        const id = (note.t * 1000 + note.staff * 17 + note.pitch) | 0
-        if (!hit.has(id)) {
-          hit.add(id)
-          flares.push({
-            x,
-            y: playY,
-            age: 0,
-            life: 0.38,
-            size: 10,
-          })
-          if (hit.size > 400) hit.clear()
-        }
+      if (n.acc !== 0) {
+        ctx!.fillStyle = color
+        ctx!.fillText(n.acc > 0 ? "♯" : "♭", x, y + ry + sp * 0.95)
       }
     }
+  }
 
-    for (let i = flares.length - 1; i >= 0; i--) {
-      const flare = flares[i]!
-      flare.age += dt
-      const t = flare.age / flare.life
-      if (t >= 1) {
-        flares.splice(i, 1)
-        continue
-      }
-      const pt = project(flare.x, flare.y)
-      const fade = Math.sin((1 - t) * Math.PI)
-      glowBlob(pt, (7 + t * 6) * bloom, (dark ? 0.55 : 0.28) * fade)
-      ctx.save()
-      ctx.translate(pt.x, pt.y)
-      ctx.rotate(cam.z)
-      const flareW = 22 * bloom * (1 + t * 0.4) * pt.s
-      const flareH = 1.4 * pt.s
-      const fg = ctx.createLinearGradient(-flareW, 0, flareW, 0)
-      fg.addColorStop(0, rgba(color, 0))
-      fg.addColorStop(0.5, rgba(color, (dark ? 0.7 : 0.4) * fade))
-      fg.addColorStop(1, rgba(color, 0))
-      ctx.fillStyle = fg
-      ctx.fillRect(-flareW, -flareH, flareW * 2, flareH * 2)
-      ctx.restore()
+  function drawPlayhead(l: Layout, bloom: number) {
+    const { w } = size
+    const y = Math.round(l.playY) + 0.5
+    if (bloom > 0) {
+      ctx!.globalCompositeOperation = dark ? "lighter" : "source-over"
+      ctx!.globalAlpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)
+      const band = l.sp * 1.4 * Math.max(0.6, bloom)
+      ctx!.drawImage(glowSprite, 0, y - band, w, band * 2)
+      ctx!.globalAlpha = 1
+      ctx!.globalCompositeOperation = "source-over"
     }
+    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)
+    ctx!.lineWidth = 1
+    line(0, y, w, y)
+  }
 
-    ctx.globalCompositeOperation = "source-over"
+  function drawFlares(l: Layout, bloom: number) {
+    if (flares.length === 0 || bloom <= 0) return
+    ctx!.globalCompositeOperation = dark ? "lighter" : "source-over"
+    for (const f of flares) {
+      const k = f.age / FLARE_LIFE
+      const fade = (1 - k) * (1 - k)
+      const x = xOf(l, f.staff, f.pitch)
+      const r = l.sp * (1.6 + k * 1.4) * bloom
+      ctx!.globalAlpha = fade * (dark ? 0.8 : 0.4)
+      ctx!.drawImage(glowSprite, x - r, l.playY - r, r * 2, r * 2)
+      // A streak along the playhead.
+      const streak = l.sp * (2.5 + k * 3) * bloom
+      ctx!.globalAlpha = fade * (dark ? 0.9 : 0.5)
+      ctx!.drawImage(glowSprite, x - streak, l.playY - 1.5, streak * 2, 3)
+    }
+    ctx!.globalAlpha = 1
+    ctx!.globalCompositeOperation = "source-over"
+  }
 
-    raf = requestAnimationFrame(frame)
+  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */
+  function drawEdgeFade(w: number, h: number) {
+    const f = h * EDGE_FADE
+    const solid = dark ? "rgba(5,5,5,1)" : "rgba(0,0,0,1)"
+    const clear = dark ? "rgba(5,5,5,0)" : "rgba(0,0,0,0)"
+    ctx!.globalCompositeOperation = dark ? "source-over" : "destination-out"
+    const top = ctx!.createLinearGradient(0, 0, 0, f)
+    top.addColorStop(0, solid)
+    top.addColorStop(1, clear)
+    ctx!.fillStyle = top
+    ctx!.fillRect(0, 0, w, f)
+    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)
+    bottom.addColorStop(0, clear)
+    bottom.addColorStop(1, solid)
+    ctx!.fillStyle = bottom
+    ctx!.fillRect(0, h - f, w, f)
+    ctx!.globalCompositeOperation = "source-over"
   }
 
-  raf = requestAnimationFrame(frame)
+  resize()
+  wake()
 
   return {
     setOptions(next) {
       const prevSeed = seedOf(options.seed)
-      const prevDens = densityOf(options.density)
+      const prevDensity = densityOf(options.density)
+      const prevColor = options.color
       options = {
         ...options,
         ...next,
@@ -878,19 +880,28 @@ export function createPhosphorScore(
         theme: themeOf(next.theme ?? options.theme),
       }
       syncTheme()
-      rgb = parseColor(resolveColor(options.color, dark))
+      if (options.color !== prevColor) recolor()
       if (
         seedOf(options.seed) !== prevSeed ||
-        densityOf(options.density) !== prevDens
+        densityOf(options.density) !== prevDensity
       ) {
-        rebuild()
+        // Crossfade from the old score instead of cutting.
+        previous = reduce ? null : score
+        rebuildAge = reduce ? REBUILD_FADE : 0
+        score = generateScore(seedOf(options.seed), densityOf(options.density))
+        dust = makeDust(seedOf(options.seed))
+        flares.length = 0
       }
+      wake()
     },
     destroy() {
       running = false
       cancelAnimationFrame(raf)
+      raf = 0
       ro.disconnect()
+      io.disconnect()
       mo.disconnect()
+      document.removeEventListener("visibilitychange", onVisibility)
       mqReduce.removeEventListener("change", onReduce)
       mqDark.removeEventListener("change", syncTheme)
     },
diff --git a/registry/phosphor-score/phosphor-score.svelte b/registry/phosphor-score/phosphor-score.svelte
index 3dba72e..af42847 100644
--- a/registry/phosphor-score/phosphor-score.svelte
+++ b/registry/phosphor-score/phosphor-score.svelte
@@ -5,20 +5,15 @@
   import { onMount } from "svelte"
   import {
     createPhosphorScore,
-    DARK_BG,
     DEFAULT_DENSITY,
     DEFAULT_GLOW,
     DEFAULT_SEED,
     DEFAULT_SPEED,
-    resolveDark,
     type PhosphorScoreInstance,
     type PhosphorScoreOptions,
+    type PhosphorScoreTheme,
   } from "./phosphor-score-vanilla"
 
-  function cn(...parts: Array<string | false | null | undefined>) {
-    return parts.filter(Boolean).join(" ")
-  }
-
   interface Props extends Omit<PhosphorScoreOptions, "onThemeChange"> {
     class?: string
   }
@@ -34,12 +29,20 @@
     theme = "auto",
   }: Props = $props()
 
+  /**
+   * Background before the first frame, so dark mode never flashes light.
+   * `#050505` is `DARK_BG`; Tailwind needs the literal.
+   */
+  const SURFACE: Record<PhosphorScoreTheme, string> = {
+    auto: "bg-background dark:bg-[#050505]",
+    dark: "bg-[#050505]",
+    light: "bg-background",
+  }
+
   let canvas: HTMLCanvasElement | undefined = $state()
-  let isDark = $state(false)
   let instance: PhosphorScoreInstance | null = null
 
   onMount(() => {
-    isDark = resolveDark(theme)
     if (!canvas) return
     instance = createPhosphorScore(canvas, {
       color,
@@ -49,9 +52,6 @@
       sway,
       seed,
       theme,
-      onThemeChange: (dark) => {
-        isDark = dark
-      },
     })
     return () => {
       instance?.destroy()
@@ -76,44 +76,13 @@
   data-slot="phosphor-score"
   role="img"
   aria-label="Falling phosphor sheet music"
-  class={cn("absolute inset-0 overflow-hidden bg-background", className)}
-  style={isDark ? `background-color: ${DARK_BG}` : ""}
+  class={[
+    "absolute inset-0 overflow-hidden",
+    SURFACE[theme] ?? SURFACE.auto,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ")}
 >
   <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-x-0 top-0 z-10 h-40 backdrop-blur-xl mask-[linear-gradient(to_bottom,black,transparent)]"
-  ></div>
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 backdrop-blur-md mask-[linear-gradient(to_bottom,black,transparent)]"
-  ></div>
-  <div
-    aria-hidden="true"
-    class={cn(
-      "pointer-events-none absolute inset-x-0 top-0 z-10 h-28",
-      !isDark && "bg-linear-to-b from-background/65 to-transparent"
-    )}
-    style={isDark
-      ? "background-image: linear-gradient(to bottom, rgba(5,5,5,0.7), transparent)"
-      : ""}
-  ></div>
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-40 backdrop-blur-xl mask-[linear-gradient(to_top,black,transparent)]"
-  ></div>
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-24 backdrop-blur-md mask-[linear-gradient(to_top,black,transparent)]"
-  ></div>
-  <div
-    aria-hidden="true"
-    class={cn(
-      "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-28",
-      !isDark && "bg-linear-to-t from-background/65 to-transparent"
-    )}
-    style={isDark
-      ? "background-image: linear-gradient(to top, rgba(5,5,5,0.7), transparent)"
-      : ""}
-  ></div>
 </div>
diff --git a/registry/phosphor-score/phosphor-score.tsx b/registry/phosphor-score/phosphor-score.tsx
index b5b86e9..d312478 100644
--- a/registry/phosphor-score/phosphor-score.tsx
+++ b/registry/phosphor-score/phosphor-score.tsx
@@ -1,19 +1,18 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef } from "react"
 
 import { cn } from "@/lib/utils"
 
 import {
   createPhosphorScore,
-  DARK_BG,
   DEFAULT_DENSITY,
   DEFAULT_GLOW,
   DEFAULT_SEED,
   DEFAULT_SPEED,
-  resolveDark,
   type PhosphorScoreInstance,
   type PhosphorScoreOptions,
+  type PhosphorScoreTheme,
 } from "./phosphor-score-vanilla"
 
 export {
@@ -39,63 +38,20 @@ export type PhosphorScoreProps = Omit<PhosphorScoreOptions, "onThemeChange"> & {
   className?: string
 }
 
-function PhosphorEdgeFade({
-  edge,
-  dark,
-}: {
-  edge: "top" | "bottom"
-  dark: boolean
-}) {
-  const isTop = edge === "top"
-  const pos = isTop ? "top-0" : "bottom-0"
-  const mask = isTop
-    ? "mask-[linear-gradient(to_bottom,black,transparent)]"
-    : "mask-[linear-gradient(to_top,black,transparent)]"
-  return (
-    <>
-      <div
-        aria-hidden
-        className={cn(
-          "pointer-events-none absolute inset-x-0 z-10 h-40 backdrop-blur-xl",
-          pos,
-          mask
-        )}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          "pointer-events-none absolute inset-x-0 z-10 h-24 backdrop-blur-md",
-          pos,
-          mask
-        )}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          "pointer-events-none absolute inset-x-0 z-10 h-28",
-          pos,
-          !dark &&
-            (isTop
-              ? "bg-linear-to-b from-background/65 to-transparent"
-              : "bg-linear-to-t from-background/65 to-transparent")
-        )}
-        style={
-          dark
-            ? {
-                backgroundImage: isTop
-                  ? `linear-gradient(to bottom, rgba(5,5,5,0.7), transparent)`
-                  : `linear-gradient(to top, rgba(5,5,5,0.7), transparent)`,
-              }
-            : undefined
-        }
-      />
-    </>
-  )
+/**
+ * Background before the first frame, so dark mode never flashes light.
+ * `#050505` is `DARK_BG`; Tailwind needs the literal.
+ */
+const SURFACE: Record<PhosphorScoreTheme, string> = {
+  auto: "bg-background dark:bg-[#050505]",
+  dark: "bg-[#050505]",
+  light: "bg-background",
 }
 
 /**
- * Vertical phosphor sheet music — notes fall toward a playhead, bloom,
- * then exit in a flare. Follows light and dark.
+ * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,
+ * each note blooms and flares as it plays, then fades with an afterglow.
+ * Follows light and dark.
  */
 export function PhosphorScore({
   className,
@@ -109,23 +65,6 @@ export function PhosphorScore({
 }: PhosphorScoreProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const instanceRef = useRef<PhosphorScoreInstance | null>(null)
-  const [isDark, setIsDark] = useState(false)
-
-  useEffect(() => {
-    const sync = () => setIsDark(resolveDark(theme))
-    sync()
-    const mo = new MutationObserver(sync)
-    mo.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"],
-    })
-    const mq = window.matchMedia("(prefers-color-scheme: dark)")
-    mq.addEventListener("change", sync)
-    return () => {
-      mo.disconnect()
-      mq.removeEventListener("change", sync)
-    }
-  }, [theme])
 
   useEffect(() => {
     const canvas = canvasRef.current
@@ -138,7 +77,6 @@ export function PhosphorScore({
       sway,
       seed,
       theme,
-      onThemeChange: setIsDark,
     })
     return () => {
       instanceRef.current?.destroy()
@@ -157,7 +95,6 @@ export function PhosphorScore({
       sway,
       seed,
       theme,
-      onThemeChange: setIsDark,
     })
   }, [color, glow, speed, density, sway, seed, theme])
 
@@ -166,12 +103,13 @@ export function PhosphorScore({
       data-slot="phosphor-score"
       role="img"
       aria-label="Falling phosphor sheet music"
-      className={cn("absolute inset-0 overflow-hidden bg-background", className)}
-      style={isDark ? { backgroundColor: DARK_BG } : undefined}
+      className={cn(
+        "absolute inset-0 overflow-hidden",
+        SURFACE[theme] ?? SURFACE.auto,
+        className
+      )}
     >
       <canvas ref={canvasRef} className="absolute inset-0 size-full" />
-      <PhosphorEdgeFade edge="top" dark={isDark} />
-      <PhosphorEdgeFade edge="bottom" dark={isDark} />
     </div>
   )
 }

From a1e36969c68a08247ad217071928c3f4d1905035 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:14:26 +0530
Subject: [PATCH 12/49] Let Phosphor Score tilt and spin with rotateX, rotateY
 and rotateZ.

The engine projects the score plane in perspective about the playhead,
fades it into the distance, and repeats the loop at steep tilts. All
three default to 0, which draws exactly as before. The demo gets three
sliders and the docs a viewing-angle example and props rows.
---
 content/docs/components/phosphor-score.mdx    |  42 +-
 public/r/phosphor-score-svelte.json           |   2 +-
 public/r/phosphor-score.json                  |   2 +-
 .../phosphor-score/phosphor-score-demo.tsx    |  33 +
 .../phosphor-score/phosphor-score-vanilla.ts  | 574 +++++++++++++-----
 registry/phosphor-score/phosphor-score.svelte |   9 +
 registry/phosphor-score/phosphor-score.tsx    |  22 +-
 7 files changed, 530 insertions(+), 154 deletions(-)

diff --git a/content/docs/components/phosphor-score.mdx b/content/docs/components/phosphor-score.mdx
index a54da2a..23627f1 100644
--- a/content/docs/components/phosphor-score.mdx
+++ b/content/docs/components/phosphor-score.mdx
@@ -69,20 +69,40 @@ Lock a theme or push the bloom. Omit `color` to follow light / dark.
   </FrameworkSvelte>
 </FrameworkCode>
 
+Change the viewing angle. The plane turns about the playhead in perspective, like CSS `rotateX()` `rotateY()` `rotateZ()`, and fades out as it recedes.
+
+<FrameworkCode>
+  <FrameworkReact>
+    ```tsx
+    <PhosphorScore rotateX={50} />
+    <PhosphorScore rotateX={35} rotateY={-20} rotateZ={8} />
+    ```
+  </FrameworkReact>
+  <FrameworkSvelte>
+    ```svelte
+    <PhosphorScore rotateX={50} />
+    <PhosphorScore rotateX={35} rotateY={-20} rotateZ={8} />
+    ```
+  </FrameworkSvelte>
+</FrameworkCode>
+
 `prefers-reduced-motion: reduce` holds a still frame of the score and stops drawing. The animation also pauses while the canvas is off-screen or the tab is hidden.
 
 ## Props
 
-| Prop        | Type                          | Default                                         |
-| ----------- | ----------------------------- | ----------------------------------------------- |
-| `color`     | `string`                      | theme phosphor / forest ink — any CSS color     |
-| `glow`      | `number`                      | `50` — 0–100, halo size at the playhead         |
-| `speed`     | `number`                      | `1.35` — beats per second                       |
-| `density`   | `number`                      | `1` — `0.35`–`1.85`, how packed the notation is |
-| `sway`      | `boolean`                     | `true` — slow camera drift                      |
-| `seed`      | `number`                      | `23` — a new seed crossfades to a new score     |
-| `theme`     | `"light" \| "dark" \| "auto"` | `"auto"`                                        |
-| `className` | `string`                      | React only                                      |
-| `class`     | `string`                      | Svelte only                                     |
+| Prop        | Type                          | Default                                          |
+| ----------- | ----------------------------- | ------------------------------------------------ |
+| `color`     | `string`                      | theme phosphor / forest ink — any CSS color      |
+| `glow`      | `number`                      | `50` — 0–100, halo size at the playhead          |
+| `speed`     | `number`                      | `1.35` — beats per second                        |
+| `density`   | `number`                      | `1` — `0.35`–`1.85`, how packed the notation is  |
+| `sway`      | `boolean`                     | `true` — slow camera drift                       |
+| `seed`      | `number`                      | `23` — a new seed crossfades to a new score      |
+| `rotateX`   | `number`                      | `0` — degrees, `-70`–`70`, tips the top away     |
+| `rotateY`   | `number`                      | `0` — degrees, `-70`–`70`, swings the right away |
+| `rotateZ`   | `number`                      | `0` — degrees, spins the plane clockwise         |
+| `theme`     | `"light" \| "dark" \| "auto"` | `"auto"`                                         |
+| `className` | `string`                      | React only                                       |
+| `class`     | `string`                      | Svelte only                                      |
 
 Omit `color` and `theme="auto"` picks phosphor green on dark, forest ink on light. The canvas is transparent in light mode so the parent background shows through.
diff --git a/public/r/phosphor-score-svelte.json b/public/r/phosphor-score-svelte.json
index 10b080e..e9358c2 100644
--- a/public/r/phosphor-score-svelte.json
+++ b/public/r/phosphor-score-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/phosphor-score/phosphor-score.svelte",
-      "content": "<script module lang=\"ts\">\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  function line(x0: number, y0: number, x1: number, y1: number) {\n    ctx!.beginPath()\n    ctx!.moveTo(x0, y0)\n    ctx!.lineTo(x1, y1)\n    ctx!.stroke()\n  }\n\n  function drawStaves(l: Layout) {\n    const { h } = size\n    ctx!.lineCap = \"butt\"\n    ctx!.lineWidth = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, 0, x, h)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      const d = wrapDelta(bar, beat)\n      const y = yOf(l, d)\n      if (y < -4 || y > h + 4) continue\n      ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n      line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const { h } = size\n    const minD = (l.playY - h - l.ppb) / l.ppb\n    const maxD = (l.playY + l.ppb) / l.ppb\n    const inView = (d: number) => d >= minD && d <= maxD\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      const d = wrapDelta(mark.t, beat)\n      if (!inView(d)) continue\n      ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n      ctx!.fillText(mark.text, l.cx, yOf(l, d) + sp * 0.9)\n    }\n    ctx!.lineWidth = 1\n    for (const pin of s.hairpins) {\n      const d0 = wrapDelta(pin.t, beat)\n      const d1 = d0 + pin.dur\n      if (!inView(d0) && !inView(d1)) continue\n      const narrow = pin.opening ? d0 : d1\n      const wide = pin.opening ? d1 : d0\n      const half = sp * 0.9\n      ctx!.strokeStyle = rgba(\n        rgb,\n        alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n      )\n      ctx!.beginPath()\n      ctx!.moveTo(l.cx - half, yOf(l, wide))\n      ctx!.lineTo(l.cx, yOf(l, narrow))\n      ctx!.lineTo(l.cx + half, yOf(l, wide))\n      ctx!.stroke()\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    ctx!.lineWidth = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const d0 = wrapDelta(slur.first.t, beat)\n      const d1 = d0 + (slur.last.t - slur.first.t)\n      if (!inView(d0) && !inView(d1)) continue\n      const inward = slur.staff === 0 ? 1 : -1\n      const y0 = yOf(l, d0)\n      const y1 = yOf(l, d1)\n      const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n      const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n      const edge =\n        inward > 0\n          ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n          : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5)\n      ctx!.beginPath()\n      ctx!.moveTo(x0, y0)\n      ctx!.quadraticCurveTo(xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      ctx!.stroke()\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const d0 = wrapDelta(stem.t0, beat)\n      const d1 = d0 + (stem.t1 - stem.t0)\n      if (!inView(d0) && !inView(d1)) continue\n      const out = stem.staff === 0 ? -1 : 1\n      const tipX = xOf(l, stem.staff, stem.tip)\n      ctx!.lineWidth = stemW\n      if (stem.chord) {\n        // One stem through the chord, from the innermost head out to the tip.\n        const inner =\n          out < 0\n            ? Math.max(...stem.notes.map((n) => n.pitch))\n            : Math.min(...stem.notes.map((n) => n.pitch))\n        const y = yOf(l, d0) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n        line(xOf(l, stem.staff, inner), y, tipX, y)\n        continue\n      }\n      for (const n of stem.notes) {\n        const d = d0 + (n.t - stem.t0)\n        const y = yOf(l, d) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n        line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n      }\n      if (stem.beams === 0) continue\n      const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n      ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n      ctx!.lineWidth = sp * 0.36\n      const yA = yOf(l, d0) + side + stemW / 2\n      const yB = yOf(l, d1) + side - stemW / 2\n      const offset = sp * 0.18 * out\n      line(tipX - offset, yA, tipX - offset, yB)\n      if (stem.beams === 2) {\n        const x2 = tipX - offset - out * sp * 0.75\n        line(x2, yA, x2, yB)\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    ctx!.lineWidth = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const y = yOf(l, d)\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n      const from = n.pitch < 0 ? -2 : 10\n      const step = n.pitch < 0 ? -2 : 2\n      for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n        const x = xOf(l, n.staff, p)\n        line(x, y - ry * 1.7, x, y + ry * 1.7)\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        const d = wrapDelta(n.t, beat)\n        const lit = litAt(d)\n        if (lit < 0.03 || !inView(d)) continue\n        const r = sp * (1.1 + lit * 1.5) * bloom\n        ctx!.globalAlpha =\n          lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n        ctx!.drawImage(\n          glowSprite,\n          xOf(l, n.staff, n.pitch) - r,\n          yOf(l, d) - r,\n          r * 2,\n          r * 2\n        )\n      }\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const x = xOf(l, n.staff, n.pitch)\n      const y = yOf(l, d)\n      const color = rgba(rgb, alphaAt(d))\n      ctx!.beginPath()\n      ctx!.ellipse(x, y, rx, ry, 0.35, 0, Math.PI * 2)\n      if (n.hollow) {\n        ctx!.strokeStyle = color\n        ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n        ctx!.stroke()\n      } else {\n        ctx!.fillStyle = color\n        ctx!.fill()\n      }\n      if (n.acc !== 0) {\n        ctx!.fillStyle = color\n        ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", x, y + ry + sp * 0.95)\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const { w } = size\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      ctx!.globalAlpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      ctx!.drawImage(glowSprite, 0, y - band, w, band * 2)\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    ctx!.lineWidth = 1\n    line(0, y, w, y)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.8 : 0.4)\n      ctx!.drawImage(glowSprite, x - r, l.playY - r, r * 2, r * 2)\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.9 : 0.5)\n      ctx!.drawImage(glowSprite, x - streak, l.playY - 1.5, streak * 2, 3)\n    }\n    ctx!.globalAlpha = 1\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  interface Props extends Omit<PhosphorScoreOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    glow = DEFAULT_GLOW,\n    speed = DEFAULT_SPEED,\n    density = DEFAULT_DENSITY,\n    sway = true,\n    seed = DEFAULT_SEED,\n    theme = \"auto\",\n  }: Props = $props()\n\n  /**\n   * Background before the first frame, so dark mode never flashes light.\n   * `#050505` is `DARK_BG`; Tailwind needs the literal.\n   */\n  const SURFACE: Record<PhosphorScoreTheme, string> = {\n    auto: \"bg-background dark:bg-[#050505]\",\n    dark: \"bg-[#050505]\",\n    light: \"bg-background\",\n  }\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: PhosphorScoreInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"phosphor-score\"\n  role=\"img\"\n  aria-label=\"Falling phosphor sheet music\"\n  class={[\n    \"absolute inset-0 overflow-hidden\",\n    SURFACE[theme] ?? SURFACE.auto,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \")}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.\n   * Positive tips the incoming notes away. Default `0`.\n   */\n  rotateX?: number\n  /**\n   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.\n   * Positive swings the right side away. Default `0`.\n   */\n  rotateY?: number\n  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */\n  rotateZ?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\n/** `rotateX` / `rotateY` stop short of edge-on. */\nconst MAX_TILT = 70\n/** Camera distance as a multiple of the canvas' longer side. */\nconst PERSPECTIVE = 1.2\n/** Depth scale where the plane has fully faded into the distance. */\nconst FAR_SCALE = 0.12\n/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */\nconst FOG_RANGE = 0.3\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nconst tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)\nconst spinOf = (value?: number) => {\n  const deg = numberOr(value, 0, -Infinity, Infinity)\n  return ((((deg + 180) % 360) + 360) % 360) - 180\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * How the score plane sits in front of the camera. Plane coordinates are\n * the unrotated canvas pixels; it turns about the playhead, which is also\n * where perspective converges.\n */\ntype View = {\n  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */\n  m: number[]\n  ox: number\n  oy: number\n  /** Camera distance. */\n  cam: number\n  /** No depth variation across the plane, so nothing foreshortens or fogs. */\n  depthless: boolean\n  /** Bounds of the plane that are on screen and not lost in the distance. */\n  x0: number\n  x1: number\n  y0: number\n  y1: number\n}\n\nfunction makeView(\n  w: number,\n  h: number,\n  rotateX: number,\n  rotateY: number,\n  rotateZ: number\n): View {\n  const rad = Math.PI / 180\n  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]\n  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]\n  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]\n  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.\n  const m = [\n    cy * cz,\n    -cy * sz,\n    sy,\n    sx * sy * cz + cx * sz,\n    -sx * sy * sz + cx * cz,\n    -sx * cy,\n    -cx * sy * cz + sx * sz,\n    cx * sy * sz + sx * cz,\n    cx * cy,\n  ]\n  const ox = w / 2\n  const oy = h * PLAYHEAD\n  const cam = Math.max(w, h) * PERSPECTIVE\n  const view: View = {\n    m,\n    ox,\n    oy,\n    cam,\n    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,\n    x0: 0,\n    x1: w,\n    y0: 0,\n    y1: h,\n  }\n  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view\n\n  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the\n  // plane. Along a ray through screen point (u, v) the plane is hit at\n  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so\n  // \"not too far\" is a straight line on screen and clips the rectangle.\n  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]\n  const far = (u: number, v: number) =>\n    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v\n  const corners: [number, number][] = [\n    [-ox, -oy],\n    [w - ox, -oy],\n    [w - ox, h - oy],\n    [-ox, h - oy],\n  ]\n  const kept: [number, number][] = []\n  corners.forEach((a, i) => {\n    const b = corners[(i + 1) % corners.length]!\n    const fa = far(a[0], a[1])\n    const fb = far(b[0], b[1])\n    if (fa >= 0) kept.push(a)\n    if (fa >= 0 !== fb >= 0) {\n      const k = fa / (fa - fb)\n      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])\n    }\n  })\n\n  view.x0 = view.y0 = Infinity\n  view.x1 = view.y1 = -Infinity\n  for (const [u, v] of kept) {\n    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)\n    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]\n    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox\n    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy\n    view.x0 = Math.min(view.x0, px)\n    view.x1 = Math.max(view.x1, px)\n    view.y0 = Math.min(view.y0, py)\n    view.y1 = Math.max(view.y1, py)\n  }\n  return view\n}\n\n/** Fades the plane out as it recedes toward `FAR_SCALE`. */\nfunction fogOf(scale: number) {\n  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)\n  return k * k * (3 - 2 * k)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n  let view = makeView(1, 1, 0, 0, 0)\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    view = makeView(\n      w,\n      h,\n      tiltOf(options.rotateX),\n      tiltOf(options.rotateY),\n      spinOf(options.rotateZ)\n    )\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  /**\n   * Every beat offset at which something at time `t`, lasting `len` beats,\n   * is in view. Usually one; a steep tilt can see several loops ahead.\n   */\n  function spots(l: Layout, t: number, len = 0) {\n    const minD = (l.playY - view.y1 - l.ppb) / l.ppb\n    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb\n    const first = wrapDelta(t, beat)\n    const out: number[] = []\n    const from = Math.ceil((minD - len - first) / LOOP_BEATS)\n    const to = Math.floor((maxD - first) / LOOP_BEATS)\n    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)\n    return out\n  }\n\n  /**\n   * Plane point → screen `[x, y, scale]`, where scale is how much the\n   * perspective enlarges it there. Scale is `0` behind the camera.\n   */\n  function project(x: number, y: number): [number, number, number] {\n    const { m, ox, oy, cam } = view\n    const px = x - ox\n    const py = y - oy\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return [0, 0, 0]\n    const s = cam / (cam - z)\n    return [\n      ox + (m[0]! * px + m[1]! * py) * s,\n      oy + (m[3]! * px + m[4]! * py) * s,\n      s,\n    ]\n  }\n\n  /**\n   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or\n   * glow drawn around the origin tilts and foreshortens with the score.\n   * Returns the distance fog there; `leave()` restores screen space.\n   */\n  function enter(x: number, y: number) {\n    const { m, ox, oy, cam } = view\n    const { dpr } = size\n    const px = x - ox\n    const py = y - oy\n    const qx = m[0]! * px + m[1]! * py\n    const qy = m[3]! * px + m[4]! * py\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return 0\n    const s = cam / (cam - z)\n    // Jacobian of the projection: how a unit step along the plane lands on screen.\n    const k = (s * s) / cam\n    ctx!.setTransform(\n      dpr * (s * m[0]! + qx * k * m[6]!),\n      dpr * (s * m[3]! + qy * k * m[6]!),\n      dpr * (s * m[1]! + qx * k * m[7]!),\n      dpr * (s * m[4]! + qy * k * m[7]!),\n      dpr * (ox + qx * s),\n      dpr * (oy + qy * s)\n    )\n    return fogOf(s)\n  }\n\n  function leave() {\n    const { dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalAlpha = 1\n  }\n\n  /** Plane stroke width; `line` and `polyline` scale it with depth. */\n  let lw = 1\n\n  /**\n   * A straight stroke on the plane. Long ones pass `segments` so the fog\n   * can thin them as they recede.\n   */\n  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {\n    const n = view.depthless ? 1 : segments\n    for (let i = 0; i < n; i++) {\n      const a = i / n\n      const b = (i + 1) / n\n      polyline([\n        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],\n        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],\n      ])\n    }\n  }\n\n  function polyline(points: [number, number][]) {\n    let scale = 0\n    ctx!.beginPath()\n    for (const [i, [x, y]] of points.entries()) {\n      const p = project(x, y)\n      if (p[2] <= 0) return\n      scale += p[2]\n      if (i === 0) ctx!.moveTo(p[0], p[1])\n      else ctx!.lineTo(p[0], p[1])\n    }\n    scale /= points.length\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** A quadratic curve on the plane; its control point is projected too. */\n  function curve(\n    x0: number,\n    y0: number,\n    cx: number,\n    cy: number,\n    x1: number,\n    y1: number\n  ) {\n    const a = project(x0, y0)\n    const c = project(cx, cy)\n    const b = project(x1, y1)\n    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return\n    const scale = (a[2] + b[2]) / 2\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.beginPath()\n    ctx!.moveTo(a[0], a[1])\n    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */\n  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {\n    const fog = enter(x, y)\n    if (fog > 0) {\n      ctx!.globalAlpha = alpha * fog\n      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)\n    }\n    leave()\n  }\n\n  function drawStaves(l: Layout) {\n    ctx!.lineCap = \"butt\"\n    lw = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, view.y0, x, view.y1, 16)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      for (const d of spots(l, bar)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n      }\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      for (const d of spots(l, mark.t)) {\n        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)\n        if (fog > 0) {\n          ctx!.globalAlpha = fog\n          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n          ctx!.fillText(mark.text, 0, 0)\n        }\n        leave()\n      }\n    }\n    lw = 1\n    for (const pin of s.hairpins) {\n      for (const d0 of spots(l, pin.t, pin.dur)) {\n        const d1 = d0 + pin.dur\n        const narrow = pin.opening ? d0 : d1\n        const wide = pin.opening ? d1 : d0\n        const half = sp * 0.9\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n        )\n        polyline([\n          [l.cx - half, yOf(l, wide)],\n          [l.cx, yOf(l, narrow)],\n          [l.cx + half, yOf(l, wide)],\n        ])\n      }\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    lw = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const len = slur.last.t - slur.first.t\n      for (const d0 of spots(l, slur.first.t, len)) {\n        const d1 = d0 + len\n        const inward = slur.staff === 0 ? 1 : -1\n        const y0 = yOf(l, d0)\n        const y1 = yOf(l, d1)\n        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n        const edge =\n          inward > 0\n            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5\n        )\n        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      }\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const len = stem.t1 - stem.t0\n      for (const d0 of spots(l, stem.t0, len)) {\n        const d1 = d0 + len\n        const out = stem.staff === 0 ? -1 : 1\n        const tipX = xOf(l, stem.staff, stem.tip)\n        lw = stemW\n        if (stem.chord) {\n          // One stem through the chord, from the innermost head out to the tip.\n          const inner =\n            out < 0\n              ? Math.max(...stem.notes.map((n) => n.pitch))\n              : Math.min(...stem.notes.map((n) => n.pitch))\n          const y = yOf(l, d0) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n          line(xOf(l, stem.staff, inner), y, tipX, y)\n          continue\n        }\n        for (const n of stem.notes) {\n          const d = d0 + (n.t - stem.t0)\n          const y = yOf(l, d) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n          line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n        }\n        if (stem.beams === 0) continue\n        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n        lw = sp * 0.36\n        const yA = yOf(l, d0) + side + stemW / 2\n        const yB = yOf(l, d1) + side - stemW / 2\n        const offset = sp * 0.18 * out\n        line(tipX - offset, yA, tipX - offset, yB)\n        if (stem.beams === 2) {\n          const x2 = tipX - offset - out * sp * 0.75\n          line(x2, yA, x2, yB)\n        }\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    lw = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      for (const d of spots(l, n.t)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n        const from = n.pitch < 0 ? -2 : 10\n        const step = n.pitch < 0 ? -2 : 2\n        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n          const x = xOf(l, n.staff, p)\n          line(x, y - ry * 1.7, x, y + ry * 1.7)\n        }\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        for (const d of spots(l, n.t)) {\n          const lit = litAt(d)\n          if (lit < 0.03) continue\n          const r = sp * (1.1 + lit * 1.5) * bloom\n          glow(\n            xOf(l, n.staff, n.pitch),\n            yOf(l, d),\n            r,\n            r,\n            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n          )\n        }\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      for (const d of spots(l, n.t)) {\n        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))\n        if (fog <= 0) {\n          leave()\n          continue\n        }\n        ctx!.globalAlpha = fog\n        const color = rgba(rgb, alphaAt(d))\n        ctx!.beginPath()\n        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)\n        if (n.hollow) {\n          ctx!.strokeStyle = color\n          ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n          ctx!.stroke()\n        } else {\n          ctx!.fillStyle = color\n          ctx!.fill()\n        }\n        if (n.acc !== 0) {\n          ctx!.fillStyle = color\n          ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", 0, ry + sp * 0.95)\n        }\n        leave()\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      // In slices, so the band follows the perspective across the plane.\n      const slices = view.depthless ? 1 : 24\n      const span = (view.x1 - view.x0) / slices\n      const src = glowSprite.width / slices\n      for (let i = 0; i < slices; i++) {\n        const fog = enter(view.x0 + (i + 0.5) * span, y)\n        if (fog > 0) {\n          ctx!.globalAlpha = alpha * fog\n          ctx!.drawImage(\n            glowSprite,\n            i * src,\n            0,\n            src,\n            glowSprite.height,\n            -span / 2,\n            -band,\n            span,\n            band * 2\n          )\n        }\n        leave()\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    lw = 1\n    line(view.x0, y, view.x1, y, 12)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))\n    }\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  interface Props extends Omit<PhosphorScoreOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    glow = DEFAULT_GLOW,\n    speed = DEFAULT_SPEED,\n    density = DEFAULT_DENSITY,\n    sway = true,\n    seed = DEFAULT_SEED,\n    rotateX = 0,\n    rotateY = 0,\n    rotateZ = 0,\n    theme = \"auto\",\n  }: Props = $props()\n\n  /**\n   * Background before the first frame, so dark mode never flashes light.\n   * `#050505` is `DARK_BG`; Tailwind needs the literal.\n   */\n  const SURFACE: Record<PhosphorScoreTheme, string> = {\n    auto: \"bg-background dark:bg-[#050505]\",\n    dark: \"bg-[#050505]\",\n    light: \"bg-background\",\n  }\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: PhosphorScoreInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"phosphor-score\"\n  role=\"img\"\n  aria-label=\"Falling phosphor sheet music\"\n  class={[\n    \"absolute inset-0 overflow-hidden\",\n    SURFACE[theme] ?? SURFACE.auto,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \")}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/phosphor-score.svelte"
     }
diff --git a/public/r/phosphor-score.json b/public/r/phosphor-score.json
index 3a40724..c1ef102 100644
--- a/public/r/phosphor-score.json
+++ b/public/r/phosphor-score.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/phosphor-score/phosphor-score.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  function line(x0: number, y0: number, x1: number, y1: number) {\n    ctx!.beginPath()\n    ctx!.moveTo(x0, y0)\n    ctx!.lineTo(x1, y1)\n    ctx!.stroke()\n  }\n\n  function drawStaves(l: Layout) {\n    const { h } = size\n    ctx!.lineCap = \"butt\"\n    ctx!.lineWidth = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, 0, x, h)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      const d = wrapDelta(bar, beat)\n      const y = yOf(l, d)\n      if (y < -4 || y > h + 4) continue\n      ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n      line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const { h } = size\n    const minD = (l.playY - h - l.ppb) / l.ppb\n    const maxD = (l.playY + l.ppb) / l.ppb\n    const inView = (d: number) => d >= minD && d <= maxD\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      const d = wrapDelta(mark.t, beat)\n      if (!inView(d)) continue\n      ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n      ctx!.fillText(mark.text, l.cx, yOf(l, d) + sp * 0.9)\n    }\n    ctx!.lineWidth = 1\n    for (const pin of s.hairpins) {\n      const d0 = wrapDelta(pin.t, beat)\n      const d1 = d0 + pin.dur\n      if (!inView(d0) && !inView(d1)) continue\n      const narrow = pin.opening ? d0 : d1\n      const wide = pin.opening ? d1 : d0\n      const half = sp * 0.9\n      ctx!.strokeStyle = rgba(\n        rgb,\n        alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n      )\n      ctx!.beginPath()\n      ctx!.moveTo(l.cx - half, yOf(l, wide))\n      ctx!.lineTo(l.cx, yOf(l, narrow))\n      ctx!.lineTo(l.cx + half, yOf(l, wide))\n      ctx!.stroke()\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    ctx!.lineWidth = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const d0 = wrapDelta(slur.first.t, beat)\n      const d1 = d0 + (slur.last.t - slur.first.t)\n      if (!inView(d0) && !inView(d1)) continue\n      const inward = slur.staff === 0 ? 1 : -1\n      const y0 = yOf(l, d0)\n      const y1 = yOf(l, d1)\n      const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n      const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n      const edge =\n        inward > 0\n          ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n          : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5)\n      ctx!.beginPath()\n      ctx!.moveTo(x0, y0)\n      ctx!.quadraticCurveTo(xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      ctx!.stroke()\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const d0 = wrapDelta(stem.t0, beat)\n      const d1 = d0 + (stem.t1 - stem.t0)\n      if (!inView(d0) && !inView(d1)) continue\n      const out = stem.staff === 0 ? -1 : 1\n      const tipX = xOf(l, stem.staff, stem.tip)\n      ctx!.lineWidth = stemW\n      if (stem.chord) {\n        // One stem through the chord, from the innermost head out to the tip.\n        const inner =\n          out < 0\n            ? Math.max(...stem.notes.map((n) => n.pitch))\n            : Math.min(...stem.notes.map((n) => n.pitch))\n        const y = yOf(l, d0) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n        line(xOf(l, stem.staff, inner), y, tipX, y)\n        continue\n      }\n      for (const n of stem.notes) {\n        const d = d0 + (n.t - stem.t0)\n        const y = yOf(l, d) + side\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n        line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n      }\n      if (stem.beams === 0) continue\n      const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n      ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n      ctx!.lineWidth = sp * 0.36\n      const yA = yOf(l, d0) + side + stemW / 2\n      const yB = yOf(l, d1) + side - stemW / 2\n      const offset = sp * 0.18 * out\n      line(tipX - offset, yA, tipX - offset, yB)\n      if (stem.beams === 2) {\n        const x2 = tipX - offset - out * sp * 0.75\n        line(x2, yA, x2, yB)\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    ctx!.lineWidth = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const y = yOf(l, d)\n      ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n      const from = n.pitch < 0 ? -2 : 10\n      const step = n.pitch < 0 ? -2 : 2\n      for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n        const x = xOf(l, n.staff, p)\n        line(x, y - ry * 1.7, x, y + ry * 1.7)\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        const d = wrapDelta(n.t, beat)\n        const lit = litAt(d)\n        if (lit < 0.03 || !inView(d)) continue\n        const r = sp * (1.1 + lit * 1.5) * bloom\n        ctx!.globalAlpha =\n          lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n        ctx!.drawImage(\n          glowSprite,\n          xOf(l, n.staff, n.pitch) - r,\n          yOf(l, d) - r,\n          r * 2,\n          r * 2\n        )\n      }\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      const d = wrapDelta(n.t, beat)\n      if (!inView(d)) continue\n      const x = xOf(l, n.staff, n.pitch)\n      const y = yOf(l, d)\n      const color = rgba(rgb, alphaAt(d))\n      ctx!.beginPath()\n      ctx!.ellipse(x, y, rx, ry, 0.35, 0, Math.PI * 2)\n      if (n.hollow) {\n        ctx!.strokeStyle = color\n        ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n        ctx!.stroke()\n      } else {\n        ctx!.fillStyle = color\n        ctx!.fill()\n      }\n      if (n.acc !== 0) {\n        ctx!.fillStyle = color\n        ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", x, y + ry + sp * 0.95)\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const { w } = size\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      ctx!.globalAlpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      ctx!.drawImage(glowSprite, 0, y - band, w, band * 2)\n      ctx!.globalAlpha = 1\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    ctx!.lineWidth = 1\n    line(0, y, w, y)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.8 : 0.4)\n      ctx!.drawImage(glowSprite, x - r, l.playY - r, r * 2, r * 2)\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      ctx!.globalAlpha = fade * (dark ? 0.9 : 0.5)\n      ctx!.drawImage(glowSprite, x - streak, l.playY - 1.5, streak * 2, 3)\n    }\n    ctx!.globalAlpha = 1\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type PhosphorScoreProps = Omit<PhosphorScoreOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Background before the first frame, so dark mode never flashes light.\n * `#050505` is `DARK_BG`; Tailwind needs the literal.\n */\nconst SURFACE: Record<PhosphorScoreTheme, string> = {\n  auto: \"bg-background dark:bg-[#050505]\",\n  dark: \"bg-[#050505]\",\n  light: \"bg-background\",\n}\n\n/**\n * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,\n * each note blooms and flares as it plays, then fades with an afterglow.\n * Follows light and dark.\n */\nexport function PhosphorScore({\n  className,\n  color,\n  glow = DEFAULT_GLOW,\n  speed = DEFAULT_SPEED,\n  density = DEFAULT_DENSITY,\n  sway = true,\n  seed = DEFAULT_SEED,\n  theme = \"auto\",\n}: PhosphorScoreProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<PhosphorScoreInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      theme,\n    })\n  }, [color, glow, speed, density, sway, seed, theme])\n\n  return (\n    <div\n      data-slot=\"phosphor-score\"\n      role=\"img\"\n      aria-label=\"Falling phosphor sheet music\"\n      className={cn(\n        \"absolute inset-0 overflow-hidden\",\n        SURFACE[theme] ?? SURFACE.auto,\n        className\n      )}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.\n   * Positive tips the incoming notes away. Default `0`.\n   */\n  rotateX?: number\n  /**\n   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.\n   * Positive swings the right side away. Default `0`.\n   */\n  rotateY?: number\n  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */\n  rotateZ?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\n/** `rotateX` / `rotateY` stop short of edge-on. */\nconst MAX_TILT = 70\n/** Camera distance as a multiple of the canvas' longer side. */\nconst PERSPECTIVE = 1.2\n/** Depth scale where the plane has fully faded into the distance. */\nconst FAR_SCALE = 0.12\n/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */\nconst FOG_RANGE = 0.3\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nconst tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)\nconst spinOf = (value?: number) => {\n  const deg = numberOr(value, 0, -Infinity, Infinity)\n  return ((((deg + 180) % 360) + 360) % 360) - 180\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * How the score plane sits in front of the camera. Plane coordinates are\n * the unrotated canvas pixels; it turns about the playhead, which is also\n * where perspective converges.\n */\ntype View = {\n  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */\n  m: number[]\n  ox: number\n  oy: number\n  /** Camera distance. */\n  cam: number\n  /** No depth variation across the plane, so nothing foreshortens or fogs. */\n  depthless: boolean\n  /** Bounds of the plane that are on screen and not lost in the distance. */\n  x0: number\n  x1: number\n  y0: number\n  y1: number\n}\n\nfunction makeView(\n  w: number,\n  h: number,\n  rotateX: number,\n  rotateY: number,\n  rotateZ: number\n): View {\n  const rad = Math.PI / 180\n  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]\n  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]\n  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]\n  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.\n  const m = [\n    cy * cz,\n    -cy * sz,\n    sy,\n    sx * sy * cz + cx * sz,\n    -sx * sy * sz + cx * cz,\n    -sx * cy,\n    -cx * sy * cz + sx * sz,\n    cx * sy * sz + sx * cz,\n    cx * cy,\n  ]\n  const ox = w / 2\n  const oy = h * PLAYHEAD\n  const cam = Math.max(w, h) * PERSPECTIVE\n  const view: View = {\n    m,\n    ox,\n    oy,\n    cam,\n    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,\n    x0: 0,\n    x1: w,\n    y0: 0,\n    y1: h,\n  }\n  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view\n\n  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the\n  // plane. Along a ray through screen point (u, v) the plane is hit at\n  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so\n  // \"not too far\" is a straight line on screen and clips the rectangle.\n  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]\n  const far = (u: number, v: number) =>\n    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v\n  const corners: [number, number][] = [\n    [-ox, -oy],\n    [w - ox, -oy],\n    [w - ox, h - oy],\n    [-ox, h - oy],\n  ]\n  const kept: [number, number][] = []\n  corners.forEach((a, i) => {\n    const b = corners[(i + 1) % corners.length]!\n    const fa = far(a[0], a[1])\n    const fb = far(b[0], b[1])\n    if (fa >= 0) kept.push(a)\n    if (fa >= 0 !== fb >= 0) {\n      const k = fa / (fa - fb)\n      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])\n    }\n  })\n\n  view.x0 = view.y0 = Infinity\n  view.x1 = view.y1 = -Infinity\n  for (const [u, v] of kept) {\n    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)\n    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]\n    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox\n    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy\n    view.x0 = Math.min(view.x0, px)\n    view.x1 = Math.max(view.x1, px)\n    view.y0 = Math.min(view.y0, py)\n    view.y1 = Math.max(view.y1, py)\n  }\n  return view\n}\n\n/** Fades the plane out as it recedes toward `FAR_SCALE`. */\nfunction fogOf(scale: number) {\n  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)\n  return k * k * (3 - 2 * k)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n  let view = makeView(1, 1, 0, 0, 0)\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    view = makeView(\n      w,\n      h,\n      tiltOf(options.rotateX),\n      tiltOf(options.rotateY),\n      spinOf(options.rotateZ)\n    )\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  /**\n   * Every beat offset at which something at time `t`, lasting `len` beats,\n   * is in view. Usually one; a steep tilt can see several loops ahead.\n   */\n  function spots(l: Layout, t: number, len = 0) {\n    const minD = (l.playY - view.y1 - l.ppb) / l.ppb\n    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb\n    const first = wrapDelta(t, beat)\n    const out: number[] = []\n    const from = Math.ceil((minD - len - first) / LOOP_BEATS)\n    const to = Math.floor((maxD - first) / LOOP_BEATS)\n    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)\n    return out\n  }\n\n  /**\n   * Plane point → screen `[x, y, scale]`, where scale is how much the\n   * perspective enlarges it there. Scale is `0` behind the camera.\n   */\n  function project(x: number, y: number): [number, number, number] {\n    const { m, ox, oy, cam } = view\n    const px = x - ox\n    const py = y - oy\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return [0, 0, 0]\n    const s = cam / (cam - z)\n    return [\n      ox + (m[0]! * px + m[1]! * py) * s,\n      oy + (m[3]! * px + m[4]! * py) * s,\n      s,\n    ]\n  }\n\n  /**\n   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or\n   * glow drawn around the origin tilts and foreshortens with the score.\n   * Returns the distance fog there; `leave()` restores screen space.\n   */\n  function enter(x: number, y: number) {\n    const { m, ox, oy, cam } = view\n    const { dpr } = size\n    const px = x - ox\n    const py = y - oy\n    const qx = m[0]! * px + m[1]! * py\n    const qy = m[3]! * px + m[4]! * py\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return 0\n    const s = cam / (cam - z)\n    // Jacobian of the projection: how a unit step along the plane lands on screen.\n    const k = (s * s) / cam\n    ctx!.setTransform(\n      dpr * (s * m[0]! + qx * k * m[6]!),\n      dpr * (s * m[3]! + qy * k * m[6]!),\n      dpr * (s * m[1]! + qx * k * m[7]!),\n      dpr * (s * m[4]! + qy * k * m[7]!),\n      dpr * (ox + qx * s),\n      dpr * (oy + qy * s)\n    )\n    return fogOf(s)\n  }\n\n  function leave() {\n    const { dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalAlpha = 1\n  }\n\n  /** Plane stroke width; `line` and `polyline` scale it with depth. */\n  let lw = 1\n\n  /**\n   * A straight stroke on the plane. Long ones pass `segments` so the fog\n   * can thin them as they recede.\n   */\n  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {\n    const n = view.depthless ? 1 : segments\n    for (let i = 0; i < n; i++) {\n      const a = i / n\n      const b = (i + 1) / n\n      polyline([\n        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],\n        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],\n      ])\n    }\n  }\n\n  function polyline(points: [number, number][]) {\n    let scale = 0\n    ctx!.beginPath()\n    for (const [i, [x, y]] of points.entries()) {\n      const p = project(x, y)\n      if (p[2] <= 0) return\n      scale += p[2]\n      if (i === 0) ctx!.moveTo(p[0], p[1])\n      else ctx!.lineTo(p[0], p[1])\n    }\n    scale /= points.length\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** A quadratic curve on the plane; its control point is projected too. */\n  function curve(\n    x0: number,\n    y0: number,\n    cx: number,\n    cy: number,\n    x1: number,\n    y1: number\n  ) {\n    const a = project(x0, y0)\n    const c = project(cx, cy)\n    const b = project(x1, y1)\n    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return\n    const scale = (a[2] + b[2]) / 2\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.beginPath()\n    ctx!.moveTo(a[0], a[1])\n    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */\n  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {\n    const fog = enter(x, y)\n    if (fog > 0) {\n      ctx!.globalAlpha = alpha * fog\n      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)\n    }\n    leave()\n  }\n\n  function drawStaves(l: Layout) {\n    ctx!.lineCap = \"butt\"\n    lw = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, view.y0, x, view.y1, 16)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      for (const d of spots(l, bar)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n      }\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      for (const d of spots(l, mark.t)) {\n        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)\n        if (fog > 0) {\n          ctx!.globalAlpha = fog\n          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n          ctx!.fillText(mark.text, 0, 0)\n        }\n        leave()\n      }\n    }\n    lw = 1\n    for (const pin of s.hairpins) {\n      for (const d0 of spots(l, pin.t, pin.dur)) {\n        const d1 = d0 + pin.dur\n        const narrow = pin.opening ? d0 : d1\n        const wide = pin.opening ? d1 : d0\n        const half = sp * 0.9\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n        )\n        polyline([\n          [l.cx - half, yOf(l, wide)],\n          [l.cx, yOf(l, narrow)],\n          [l.cx + half, yOf(l, wide)],\n        ])\n      }\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    lw = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const len = slur.last.t - slur.first.t\n      for (const d0 of spots(l, slur.first.t, len)) {\n        const d1 = d0 + len\n        const inward = slur.staff === 0 ? 1 : -1\n        const y0 = yOf(l, d0)\n        const y1 = yOf(l, d1)\n        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n        const edge =\n          inward > 0\n            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5\n        )\n        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      }\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const len = stem.t1 - stem.t0\n      for (const d0 of spots(l, stem.t0, len)) {\n        const d1 = d0 + len\n        const out = stem.staff === 0 ? -1 : 1\n        const tipX = xOf(l, stem.staff, stem.tip)\n        lw = stemW\n        if (stem.chord) {\n          // One stem through the chord, from the innermost head out to the tip.\n          const inner =\n            out < 0\n              ? Math.max(...stem.notes.map((n) => n.pitch))\n              : Math.min(...stem.notes.map((n) => n.pitch))\n          const y = yOf(l, d0) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n          line(xOf(l, stem.staff, inner), y, tipX, y)\n          continue\n        }\n        for (const n of stem.notes) {\n          const d = d0 + (n.t - stem.t0)\n          const y = yOf(l, d) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n          line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n        }\n        if (stem.beams === 0) continue\n        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n        lw = sp * 0.36\n        const yA = yOf(l, d0) + side + stemW / 2\n        const yB = yOf(l, d1) + side - stemW / 2\n        const offset = sp * 0.18 * out\n        line(tipX - offset, yA, tipX - offset, yB)\n        if (stem.beams === 2) {\n          const x2 = tipX - offset - out * sp * 0.75\n          line(x2, yA, x2, yB)\n        }\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    lw = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      for (const d of spots(l, n.t)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n        const from = n.pitch < 0 ? -2 : 10\n        const step = n.pitch < 0 ? -2 : 2\n        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n          const x = xOf(l, n.staff, p)\n          line(x, y - ry * 1.7, x, y + ry * 1.7)\n        }\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        for (const d of spots(l, n.t)) {\n          const lit = litAt(d)\n          if (lit < 0.03) continue\n          const r = sp * (1.1 + lit * 1.5) * bloom\n          glow(\n            xOf(l, n.staff, n.pitch),\n            yOf(l, d),\n            r,\n            r,\n            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n          )\n        }\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      for (const d of spots(l, n.t)) {\n        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))\n        if (fog <= 0) {\n          leave()\n          continue\n        }\n        ctx!.globalAlpha = fog\n        const color = rgba(rgb, alphaAt(d))\n        ctx!.beginPath()\n        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)\n        if (n.hollow) {\n          ctx!.strokeStyle = color\n          ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n          ctx!.stroke()\n        } else {\n          ctx!.fillStyle = color\n          ctx!.fill()\n        }\n        if (n.acc !== 0) {\n          ctx!.fillStyle = color\n          ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", 0, ry + sp * 0.95)\n        }\n        leave()\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      // In slices, so the band follows the perspective across the plane.\n      const slices = view.depthless ? 1 : 24\n      const span = (view.x1 - view.x0) / slices\n      const src = glowSprite.width / slices\n      for (let i = 0; i < slices; i++) {\n        const fog = enter(view.x0 + (i + 0.5) * span, y)\n        if (fog > 0) {\n          ctx!.globalAlpha = alpha * fog\n          ctx!.drawImage(\n            glowSprite,\n            i * src,\n            0,\n            src,\n            glowSprite.height,\n            -span / 2,\n            -band,\n            span,\n            band * 2\n          )\n        }\n        leave()\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    lw = 1\n    line(view.x0, y, view.x1, y, 12)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))\n    }\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type PhosphorScoreProps = Omit<PhosphorScoreOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Background before the first frame, so dark mode never flashes light.\n * `#050505` is `DARK_BG`; Tailwind needs the literal.\n */\nconst SURFACE: Record<PhosphorScoreTheme, string> = {\n  auto: \"bg-background dark:bg-[#050505]\",\n  dark: \"bg-[#050505]\",\n  light: \"bg-background\",\n}\n\n/**\n * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,\n * each note blooms and flares as it plays, then fades with an afterglow.\n * Follows light and dark.\n */\nexport function PhosphorScore({\n  className,\n  color,\n  glow = DEFAULT_GLOW,\n  speed = DEFAULT_SPEED,\n  density = DEFAULT_DENSITY,\n  sway = true,\n  seed = DEFAULT_SEED,\n  rotateX = 0,\n  rotateY = 0,\n  rotateZ = 0,\n  theme = \"auto\",\n}: PhosphorScoreProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<PhosphorScoreInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n  }, [\n    color,\n    glow,\n    speed,\n    density,\n    sway,\n    seed,\n    rotateX,\n    rotateY,\n    rotateZ,\n    theme,\n  ])\n\n  return (\n    <div\n      data-slot=\"phosphor-score\"\n      role=\"img\"\n      aria-label=\"Falling phosphor sheet music\"\n      className={cn(\n        \"absolute inset-0 overflow-hidden\",\n        SURFACE[theme] ?? SURFACE.auto,\n        className\n      )}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/phosphor-score.tsx"
     }
diff --git a/registry/phosphor-score/phosphor-score-demo.tsx b/registry/phosphor-score/phosphor-score-demo.tsx
index b078fbd..f0fd517 100644
--- a/registry/phosphor-score/phosphor-score-demo.tsx
+++ b/registry/phosphor-score/phosphor-score-demo.tsx
@@ -40,6 +40,9 @@ export function PhosphorScoreDemo() {
       speed: DEFAULT_SPEED,
       density: DEFAULT_DENSITY,
       seed: DEFAULT_SEED,
+      rotateX: 0,
+      rotateY: 0,
+      rotateZ: 0,
       sway: true,
     }),
     [stock]
@@ -71,6 +74,9 @@ export function PhosphorScoreDemo() {
             speed={props.speed}
             density={props.density}
             seed={props.seed}
+            rotateX={props.rotateX}
+            rotateY={props.rotateY}
+            rotateZ={props.rotateZ}
             sway={props.sway}
             theme="auto"
           />
@@ -88,6 +94,9 @@ export function PhosphorScoreDemo() {
           density:
             props.density === DEFAULT_DENSITY ? undefined : props.density,
           seed: props.seed === DEFAULT_SEED ? undefined : props.seed,
+          rotateX: props.rotateX || undefined,
+          rotateY: props.rotateY || undefined,
+          rotateZ: props.rotateZ || undefined,
           sway: props.sway ? undefined : false,
         }}
       >
@@ -128,6 +137,30 @@ export function PhosphorScoreDemo() {
           step={1}
           onChange={(v) => updateProp("seed", v)}
         />
+        <ControlSlider
+          label="Rotate X"
+          value={props.rotateX}
+          min={-70}
+          max={70}
+          step={1}
+          onChange={(v) => updateProp("rotateX", v)}
+        />
+        <ControlSlider
+          label="Rotate Y"
+          value={props.rotateY}
+          min={-70}
+          max={70}
+          step={1}
+          onChange={(v) => updateProp("rotateY", v)}
+        />
+        <ControlSlider
+          label="Rotate Z"
+          value={props.rotateZ}
+          min={-180}
+          max={180}
+          step={1}
+          onChange={(v) => updateProp("rotateZ", v)}
+        />
         <ControlSwitch
           label="Sway"
           description="Slow camera drift around the plane"
diff --git a/registry/phosphor-score/phosphor-score-vanilla.ts b/registry/phosphor-score/phosphor-score-vanilla.ts
index 86925aa..4572af4 100644
--- a/registry/phosphor-score/phosphor-score-vanilla.ts
+++ b/registry/phosphor-score/phosphor-score-vanilla.ts
@@ -19,6 +19,18 @@ export type PhosphorScoreOptions = {
   sway?: boolean
   /** Deterministic score. Default `23`. */
   seed?: number
+  /**
+   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.
+   * Positive tips the incoming notes away. Default `0`.
+   */
+  rotateX?: number
+  /**
+   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.
+   * Positive swings the right side away. Default `0`.
+   */
+  rotateY?: number
+  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */
+  rotateZ?: number
   /**
    * Palette mode. Default `auto` follows shadcn / next-themes
    * (`html.dark` class).
@@ -62,6 +74,14 @@ const REBUILD_FADE = 0.35
 /** Seconds a flare lasts after its note plays. */
 const FLARE_LIFE = 0.5
 const MAX_FLARES = 48
+/** `rotateX` / `rotateY` stop short of edge-on. */
+const MAX_TILT = 70
+/** Camera distance as a multiple of the canvas' longer side. */
+const PERSPECTIVE = 1.2
+/** Depth scale where the plane has fully faded into the distance. */
+const FAR_SCALE = 0.12
+/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */
+const FOG_RANGE = 0.3
 const DYNAMICS = ["pp", "p", "mp", "mf", "f", "ff"] as const
 
 type Staff = 0 | 1
@@ -145,6 +165,12 @@ const densityOf = (value?: number) =>
 const seedOf = (value?: number) =>
   Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0
 
+const tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)
+const spinOf = (value?: number) => {
+  const deg = numberOr(value, 0, -Infinity, Infinity)
+  return ((((deg + 180) % 360) + 360) % 360) - 180
+}
+
 function themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {
   return value === "light" || value === "dark" || value === "auto"
     ? value
@@ -393,6 +419,112 @@ function litAt(d: number) {
   return Math.exp(d * 2.4)
 }
 
+/**
+ * How the score plane sits in front of the camera. Plane coordinates are
+ * the unrotated canvas pixels; it turns about the playhead, which is also
+ * where perspective converges.
+ */
+type View = {
+  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */
+  m: number[]
+  ox: number
+  oy: number
+  /** Camera distance. */
+  cam: number
+  /** No depth variation across the plane, so nothing foreshortens or fogs. */
+  depthless: boolean
+  /** Bounds of the plane that are on screen and not lost in the distance. */
+  x0: number
+  x1: number
+  y0: number
+  y1: number
+}
+
+function makeView(
+  w: number,
+  h: number,
+  rotateX: number,
+  rotateY: number,
+  rotateZ: number
+): View {
+  const rad = Math.PI / 180
+  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]
+  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]
+  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]
+  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.
+  const m = [
+    cy * cz,
+    -cy * sz,
+    sy,
+    sx * sy * cz + cx * sz,
+    -sx * sy * sz + cx * cz,
+    -sx * cy,
+    -cx * sy * cz + sx * sz,
+    cx * sy * sz + sx * cz,
+    cx * cy,
+  ]
+  const ox = w / 2
+  const oy = h * PLAYHEAD
+  const cam = Math.max(w, h) * PERSPECTIVE
+  const view: View = {
+    m,
+    ox,
+    oy,
+    cam,
+    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,
+    x0: 0,
+    x1: w,
+    y0: 0,
+    y1: h,
+  }
+  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view
+
+  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the
+  // plane. Along a ray through screen point (u, v) the plane is hit at
+  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so
+  // "not too far" is a straight line on screen and clips the rectangle.
+  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]
+  const far = (u: number, v: number) =>
+    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v
+  const corners: [number, number][] = [
+    [-ox, -oy],
+    [w - ox, -oy],
+    [w - ox, h - oy],
+    [-ox, h - oy],
+  ]
+  const kept: [number, number][] = []
+  corners.forEach((a, i) => {
+    const b = corners[(i + 1) % corners.length]!
+    const fa = far(a[0], a[1])
+    const fb = far(b[0], b[1])
+    if (fa >= 0) kept.push(a)
+    if (fa >= 0 !== fb >= 0) {
+      const k = fa / (fa - fb)
+      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])
+    }
+  })
+
+  view.x0 = view.y0 = Infinity
+  view.x1 = view.y1 = -Infinity
+  for (const [u, v] of kept) {
+    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)
+    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]
+    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox
+    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy
+    view.x0 = Math.min(view.x0, px)
+    view.x1 = Math.max(view.x1, px)
+    view.y0 = Math.min(view.y0, py)
+    view.y1 = Math.max(view.y1, py)
+  }
+  return view
+}
+
+/** Fades the plane out as it recedes toward `FAR_SCALE`. */
+function fogOf(scale: number) {
+  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)
+  return k * k * (3 - 2 * k)
+}
+
 /**
  * Vertical phosphor sheet music: a grand staff scrolls down toward a
  * playhead, each note blooms and flares as it plays, then fades with a
@@ -445,6 +577,7 @@ export function createPhosphorScore(
   // Start a few bars in, so the first frame already has notes at the playhead.
   let beat = 8
   let clock = 0
+  let view = makeView(1, 1, 0, 0, 0)
 
   const resize = () => {
     const parent = canvas.parentElement
@@ -562,6 +695,13 @@ export function createPhosphorScore(
     }
     if (w < 2 || h < 2) return
 
+    view = makeView(
+      w,
+      h,
+      tiltOf(options.rotateX),
+      tiltOf(options.rotateY),
+      spinOf(options.rotateZ)
+    )
     const swayOn = options.sway !== false && !reduce
     const cam = {
       x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,
@@ -609,40 +749,168 @@ export function createPhosphorScore(
     l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)
   const yOf = (l: Layout, d: number) => l.playY - d * l.ppb
 
-  function line(x0: number, y0: number, x1: number, y1: number) {
+  /**
+   * Every beat offset at which something at time `t`, lasting `len` beats,
+   * is in view. Usually one; a steep tilt can see several loops ahead.
+   */
+  function spots(l: Layout, t: number, len = 0) {
+    const minD = (l.playY - view.y1 - l.ppb) / l.ppb
+    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb
+    const first = wrapDelta(t, beat)
+    const out: number[] = []
+    const from = Math.ceil((minD - len - first) / LOOP_BEATS)
+    const to = Math.floor((maxD - first) / LOOP_BEATS)
+    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)
+    return out
+  }
+
+  /**
+   * Plane point → screen `[x, y, scale]`, where scale is how much the
+   * perspective enlarges it there. Scale is `0` behind the camera.
+   */
+  function project(x: number, y: number): [number, number, number] {
+    const { m, ox, oy, cam } = view
+    const px = x - ox
+    const py = y - oy
+    const z = m[6]! * px + m[7]! * py
+    if (cam - z < cam * 0.02) return [0, 0, 0]
+    const s = cam / (cam - z)
+    return [
+      ox + (m[0]! * px + m[1]! * py) * s,
+      oy + (m[3]! * px + m[4]! * py) * s,
+      s,
+    ]
+  }
+
+  /**
+   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or
+   * glow drawn around the origin tilts and foreshortens with the score.
+   * Returns the distance fog there; `leave()` restores screen space.
+   */
+  function enter(x: number, y: number) {
+    const { m, ox, oy, cam } = view
+    const { dpr } = size
+    const px = x - ox
+    const py = y - oy
+    const qx = m[0]! * px + m[1]! * py
+    const qy = m[3]! * px + m[4]! * py
+    const z = m[6]! * px + m[7]! * py
+    if (cam - z < cam * 0.02) return 0
+    const s = cam / (cam - z)
+    // Jacobian of the projection: how a unit step along the plane lands on screen.
+    const k = (s * s) / cam
+    ctx!.setTransform(
+      dpr * (s * m[0]! + qx * k * m[6]!),
+      dpr * (s * m[3]! + qy * k * m[6]!),
+      dpr * (s * m[1]! + qx * k * m[7]!),
+      dpr * (s * m[4]! + qy * k * m[7]!),
+      dpr * (ox + qx * s),
+      dpr * (oy + qy * s)
+    )
+    return fogOf(s)
+  }
+
+  function leave() {
+    const { dpr } = size
+    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx!.globalAlpha = 1
+  }
+
+  /** Plane stroke width; `line` and `polyline` scale it with depth. */
+  let lw = 1
+
+  /**
+   * A straight stroke on the plane. Long ones pass `segments` so the fog
+   * can thin them as they recede.
+   */
+  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {
+    const n = view.depthless ? 1 : segments
+    for (let i = 0; i < n; i++) {
+      const a = i / n
+      const b = (i + 1) / n
+      polyline([
+        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],
+        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],
+      ])
+    }
+  }
+
+  function polyline(points: [number, number][]) {
+    let scale = 0
     ctx!.beginPath()
-    ctx!.moveTo(x0, y0)
-    ctx!.lineTo(x1, y1)
+    for (const [i, [x, y]] of points.entries()) {
+      const p = project(x, y)
+      if (p[2] <= 0) return
+      scale += p[2]
+      if (i === 0) ctx!.moveTo(p[0], p[1])
+      else ctx!.lineTo(p[0], p[1])
+    }
+    scale /= points.length
+    const fog = fogOf(scale)
+    if (fog <= 0) return
+    ctx!.globalAlpha = fog
+    ctx!.lineWidth = lw * scale
     ctx!.stroke()
+    ctx!.globalAlpha = 1
+  }
+
+  /** A quadratic curve on the plane; its control point is projected too. */
+  function curve(
+    x0: number,
+    y0: number,
+    cx: number,
+    cy: number,
+    x1: number,
+    y1: number
+  ) {
+    const a = project(x0, y0)
+    const c = project(cx, cy)
+    const b = project(x1, y1)
+    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return
+    const scale = (a[2] + b[2]) / 2
+    const fog = fogOf(scale)
+    if (fog <= 0) return
+    ctx!.globalAlpha = fog
+    ctx!.lineWidth = lw * scale
+    ctx!.beginPath()
+    ctx!.moveTo(a[0], a[1])
+    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])
+    ctx!.stroke()
+    ctx!.globalAlpha = 1
+  }
+
+  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */
+  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {
+    const fog = enter(x, y)
+    if (fog > 0) {
+      ctx!.globalAlpha = alpha * fog
+      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)
+    }
+    leave()
   }
 
   function drawStaves(l: Layout) {
-    const { h } = size
     ctx!.lineCap = "butt"
-    ctx!.lineWidth = 1
+    lw = 1
     ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)
     for (const staff of [0, 1] as const) {
       for (let p = 0; p <= 8; p += 2) {
         const x = Math.round(xOf(l, staff, p)) + 0.5
-        line(x, 0, x, h)
+        line(x, view.y0, x, view.y1, 16)
       }
     }
     // Bar lines every four beats, through both staves like a grand staff.
     for (let bar = 0; bar < LOOP_BEATS; bar += 4) {
-      const d = wrapDelta(bar, beat)
-      const y = yOf(l, d)
-      if (y < -4 || y > h + 4) continue
-      ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)
-      line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)
+      for (const d of spots(l, bar)) {
+        const y = yOf(l, d)
+        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)
+        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)
+      }
     }
   }
 
   function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {
     if (opacity <= 0) return
-    const { h } = size
-    const minD = (l.playY - h - l.ppb) / l.ppb
-    const maxD = (l.playY + l.ppb) / l.ppb
-    const inView = (d: number) => d >= minD && d <= maxD
     const base = (d: number) =>
       d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3
     const alphaAt = (d: number) => {
@@ -660,50 +928,56 @@ export function createPhosphorScore(
     ctx!.textAlign = "center"
     ctx!.textBaseline = "middle"
     for (const mark of s.marks) {
-      const d = wrapDelta(mark.t, beat)
-      if (!inView(d)) continue
-      ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)
-      ctx!.fillText(mark.text, l.cx, yOf(l, d) + sp * 0.9)
+      for (const d of spots(l, mark.t)) {
+        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)
+        if (fog > 0) {
+          ctx!.globalAlpha = fog
+          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)
+          ctx!.fillText(mark.text, 0, 0)
+        }
+        leave()
+      }
     }
-    ctx!.lineWidth = 1
+    lw = 1
     for (const pin of s.hairpins) {
-      const d0 = wrapDelta(pin.t, beat)
-      const d1 = d0 + pin.dur
-      if (!inView(d0) && !inView(d1)) continue
-      const narrow = pin.opening ? d0 : d1
-      const wide = pin.opening ? d1 : d0
-      const half = sp * 0.9
-      ctx!.strokeStyle = rgba(
-        rgb,
-        alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6
-      )
-      ctx!.beginPath()
-      ctx!.moveTo(l.cx - half, yOf(l, wide))
-      ctx!.lineTo(l.cx, yOf(l, narrow))
-      ctx!.lineTo(l.cx + half, yOf(l, wide))
-      ctx!.stroke()
+      for (const d0 of spots(l, pin.t, pin.dur)) {
+        const d1 = d0 + pin.dur
+        const narrow = pin.opening ? d0 : d1
+        const wide = pin.opening ? d1 : d0
+        const half = sp * 0.9
+        ctx!.strokeStyle = rgba(
+          rgb,
+          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6
+        )
+        polyline([
+          [l.cx - half, yOf(l, wide)],
+          [l.cx, yOf(l, narrow)],
+          [l.cx + half, yOf(l, wide)],
+        ])
+      }
     }
 
     // Slurs curve on the inner side, opposite the stems.
-    ctx!.lineWidth = Math.max(1, sp * 0.1)
+    lw = Math.max(1, sp * 0.1)
     for (const slur of s.slurs) {
-      const d0 = wrapDelta(slur.first.t, beat)
-      const d1 = d0 + (slur.last.t - slur.first.t)
-      if (!inView(d0) && !inView(d1)) continue
-      const inward = slur.staff === 0 ? 1 : -1
-      const y0 = yOf(l, d0)
-      const y1 = yOf(l, d1)
-      const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)
-      const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)
-      const edge =
-        inward > 0
-          ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5
-          : Math.min(slur.first.pitch, slur.last.pitch) - 3.5
-      ctx!.strokeStyle = rgba(rgb, alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5)
-      ctx!.beginPath()
-      ctx!.moveTo(x0, y0)
-      ctx!.quadraticCurveTo(xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)
-      ctx!.stroke()
+      const len = slur.last.t - slur.first.t
+      for (const d0 of spots(l, slur.first.t, len)) {
+        const d1 = d0 + len
+        const inward = slur.staff === 0 ? 1 : -1
+        const y0 = yOf(l, d0)
+        const y1 = yOf(l, d1)
+        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)
+        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)
+        const edge =
+          inward > 0
+            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5
+            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5
+        ctx!.strokeStyle = rgba(
+          rgb,
+          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5
+        )
+        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)
+      }
     }
 
     // Stems and beams. A stem runs along the pitch axis from the side of its
@@ -711,56 +985,57 @@ export function createPhosphorScore(
     const stemW = Math.max(1, sp * 0.11)
     const side = -ry * 0.8
     for (const stem of s.stems) {
-      const d0 = wrapDelta(stem.t0, beat)
-      const d1 = d0 + (stem.t1 - stem.t0)
-      if (!inView(d0) && !inView(d1)) continue
-      const out = stem.staff === 0 ? -1 : 1
-      const tipX = xOf(l, stem.staff, stem.tip)
-      ctx!.lineWidth = stemW
-      if (stem.chord) {
-        // One stem through the chord, from the innermost head out to the tip.
-        const inner =
-          out < 0
-            ? Math.max(...stem.notes.map((n) => n.pitch))
-            : Math.min(...stem.notes.map((n) => n.pitch))
-        const y = yOf(l, d0) + side
-        ctx!.strokeStyle = rgba(rgb, alphaAt(d0))
-        line(xOf(l, stem.staff, inner), y, tipX, y)
-        continue
-      }
-      for (const n of stem.notes) {
-        const d = d0 + (n.t - stem.t0)
-        const y = yOf(l, d) + side
-        ctx!.strokeStyle = rgba(rgb, alphaAt(d))
-        line(xOf(l, stem.staff, n.pitch), y, tipX, y)
-      }
-      if (stem.beams === 0) continue
-      const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0
-      ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))
-      ctx!.lineWidth = sp * 0.36
-      const yA = yOf(l, d0) + side + stemW / 2
-      const yB = yOf(l, d1) + side - stemW / 2
-      const offset = sp * 0.18 * out
-      line(tipX - offset, yA, tipX - offset, yB)
-      if (stem.beams === 2) {
-        const x2 = tipX - offset - out * sp * 0.75
-        line(x2, yA, x2, yB)
+      const len = stem.t1 - stem.t0
+      for (const d0 of spots(l, stem.t0, len)) {
+        const d1 = d0 + len
+        const out = stem.staff === 0 ? -1 : 1
+        const tipX = xOf(l, stem.staff, stem.tip)
+        lw = stemW
+        if (stem.chord) {
+          // One stem through the chord, from the innermost head out to the tip.
+          const inner =
+            out < 0
+              ? Math.max(...stem.notes.map((n) => n.pitch))
+              : Math.min(...stem.notes.map((n) => n.pitch))
+          const y = yOf(l, d0) + side
+          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))
+          line(xOf(l, stem.staff, inner), y, tipX, y)
+          continue
+        }
+        for (const n of stem.notes) {
+          const d = d0 + (n.t - stem.t0)
+          const y = yOf(l, d) + side
+          ctx!.strokeStyle = rgba(rgb, alphaAt(d))
+          line(xOf(l, stem.staff, n.pitch), y, tipX, y)
+        }
+        if (stem.beams === 0) continue
+        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0
+        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))
+        lw = sp * 0.36
+        const yA = yOf(l, d0) + side + stemW / 2
+        const yB = yOf(l, d1) + side - stemW / 2
+        const offset = sp * 0.18 * out
+        line(tipX - offset, yA, tipX - offset, yB)
+        if (stem.beams === 2) {
+          const x2 = tipX - offset - out * sp * 0.75
+          line(x2, yA, x2, yB)
+        }
       }
     }
 
     // Ledger lines, parallel to the staff lines.
-    ctx!.lineWidth = 1
+    lw = 1
     for (const n of s.notes) {
       if (n.pitch > -2 && n.pitch < 10) continue
-      const d = wrapDelta(n.t, beat)
-      if (!inView(d)) continue
-      const y = yOf(l, d)
-      ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)
-      const from = n.pitch < 0 ? -2 : 10
-      const step = n.pitch < 0 ? -2 : 2
-      for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {
-        const x = xOf(l, n.staff, p)
-        line(x, y - ry * 1.7, x, y + ry * 1.7)
+      for (const d of spots(l, n.t)) {
+        const y = yOf(l, d)
+        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)
+        const from = n.pitch < 0 ? -2 : 10
+        const step = n.pitch < 0 ? -2 : 2
+        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {
+          const x = xOf(l, n.staff, p)
+          line(x, y - ry * 1.7, x, y + ry * 1.7)
+        }
       }
     }
 
@@ -768,63 +1043,85 @@ export function createPhosphorScore(
     if (bloom > 0) {
       ctx!.globalCompositeOperation = dark ? "lighter" : "source-over"
       for (const n of s.notes) {
-        const d = wrapDelta(n.t, beat)
-        const lit = litAt(d)
-        if (lit < 0.03 || !inView(d)) continue
-        const r = sp * (1.1 + lit * 1.5) * bloom
-        ctx!.globalAlpha =
-          lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity
-        ctx!.drawImage(
-          glowSprite,
-          xOf(l, n.staff, n.pitch) - r,
-          yOf(l, d) - r,
-          r * 2,
-          r * 2
-        )
+        for (const d of spots(l, n.t)) {
+          const lit = litAt(d)
+          if (lit < 0.03) continue
+          const r = sp * (1.1 + lit * 1.5) * bloom
+          glow(
+            xOf(l, n.staff, n.pitch),
+            yOf(l, d),
+            r,
+            r,
+            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity
+          )
+        }
       }
-      ctx!.globalAlpha = 1
       ctx!.globalCompositeOperation = "source-over"
     }
 
     // Noteheads, with accidentals just before them in reading order (below).
     ctx!.font = `${Math.round(sp * 1.5)}px Georgia, "Times New Roman", serif`
     for (const n of s.notes) {
-      const d = wrapDelta(n.t, beat)
-      if (!inView(d)) continue
-      const x = xOf(l, n.staff, n.pitch)
-      const y = yOf(l, d)
-      const color = rgba(rgb, alphaAt(d))
-      ctx!.beginPath()
-      ctx!.ellipse(x, y, rx, ry, 0.35, 0, Math.PI * 2)
-      if (n.hollow) {
-        ctx!.strokeStyle = color
-        ctx!.lineWidth = Math.max(1.2, sp * 0.16)
-        ctx!.stroke()
-      } else {
-        ctx!.fillStyle = color
-        ctx!.fill()
-      }
-      if (n.acc !== 0) {
-        ctx!.fillStyle = color
-        ctx!.fillText(n.acc > 0 ? "♯" : "♭", x, y + ry + sp * 0.95)
+      for (const d of spots(l, n.t)) {
+        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))
+        if (fog <= 0) {
+          leave()
+          continue
+        }
+        ctx!.globalAlpha = fog
+        const color = rgba(rgb, alphaAt(d))
+        ctx!.beginPath()
+        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)
+        if (n.hollow) {
+          ctx!.strokeStyle = color
+          ctx!.lineWidth = Math.max(1.2, sp * 0.16)
+          ctx!.stroke()
+        } else {
+          ctx!.fillStyle = color
+          ctx!.fill()
+        }
+        if (n.acc !== 0) {
+          ctx!.fillStyle = color
+          ctx!.fillText(n.acc > 0 ? "♯" : "♭", 0, ry + sp * 0.95)
+        }
+        leave()
       }
     }
   }
 
   function drawPlayhead(l: Layout, bloom: number) {
-    const { w } = size
     const y = Math.round(l.playY) + 0.5
     if (bloom > 0) {
       ctx!.globalCompositeOperation = dark ? "lighter" : "source-over"
-      ctx!.globalAlpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)
+      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)
       const band = l.sp * 1.4 * Math.max(0.6, bloom)
-      ctx!.drawImage(glowSprite, 0, y - band, w, band * 2)
-      ctx!.globalAlpha = 1
+      // In slices, so the band follows the perspective across the plane.
+      const slices = view.depthless ? 1 : 24
+      const span = (view.x1 - view.x0) / slices
+      const src = glowSprite.width / slices
+      for (let i = 0; i < slices; i++) {
+        const fog = enter(view.x0 + (i + 0.5) * span, y)
+        if (fog > 0) {
+          ctx!.globalAlpha = alpha * fog
+          ctx!.drawImage(
+            glowSprite,
+            i * src,
+            0,
+            src,
+            glowSprite.height,
+            -span / 2,
+            -band,
+            span,
+            band * 2
+          )
+        }
+        leave()
+      }
       ctx!.globalCompositeOperation = "source-over"
     }
     ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)
-    ctx!.lineWidth = 1
-    line(0, y, w, y)
+    lw = 1
+    line(view.x0, y, view.x1, y, 12)
   }
 
   function drawFlares(l: Layout, bloom: number) {
@@ -835,14 +1132,11 @@ export function createPhosphorScore(
       const fade = (1 - k) * (1 - k)
       const x = xOf(l, f.staff, f.pitch)
       const r = l.sp * (1.6 + k * 1.4) * bloom
-      ctx!.globalAlpha = fade * (dark ? 0.8 : 0.4)
-      ctx!.drawImage(glowSprite, x - r, l.playY - r, r * 2, r * 2)
+      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))
       // A streak along the playhead.
       const streak = l.sp * (2.5 + k * 3) * bloom
-      ctx!.globalAlpha = fade * (dark ? 0.9 : 0.5)
-      ctx!.drawImage(glowSprite, x - streak, l.playY - 1.5, streak * 2, 3)
+      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))
     }
-    ctx!.globalAlpha = 1
     ctx!.globalCompositeOperation = "source-over"
   }
 
diff --git a/registry/phosphor-score/phosphor-score.svelte b/registry/phosphor-score/phosphor-score.svelte
index af42847..7b2cdaf 100644
--- a/registry/phosphor-score/phosphor-score.svelte
+++ b/registry/phosphor-score/phosphor-score.svelte
@@ -26,6 +26,9 @@
     density = DEFAULT_DENSITY,
     sway = true,
     seed = DEFAULT_SEED,
+    rotateX = 0,
+    rotateY = 0,
+    rotateZ = 0,
     theme = "auto",
   }: Props = $props()
 
@@ -51,6 +54,9 @@
       density,
       sway,
       seed,
+      rotateX,
+      rotateY,
+      rotateZ,
       theme,
     })
     return () => {
@@ -67,6 +73,9 @@
       density,
       sway,
       seed,
+      rotateX,
+      rotateY,
+      rotateZ,
       theme,
     })
   })
diff --git a/registry/phosphor-score/phosphor-score.tsx b/registry/phosphor-score/phosphor-score.tsx
index d312478..cdd5f88 100644
--- a/registry/phosphor-score/phosphor-score.tsx
+++ b/registry/phosphor-score/phosphor-score.tsx
@@ -61,6 +61,9 @@ export function PhosphorScore({
   density = DEFAULT_DENSITY,
   sway = true,
   seed = DEFAULT_SEED,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
   theme = "auto",
 }: PhosphorScoreProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -76,6 +79,9 @@ export function PhosphorScore({
       density,
       sway,
       seed,
+      rotateX,
+      rotateY,
+      rotateZ,
       theme,
     })
     return () => {
@@ -94,9 +100,23 @@ export function PhosphorScore({
       density,
       sway,
       seed,
+      rotateX,
+      rotateY,
+      rotateZ,
       theme,
     })
-  }, [color, glow, speed, density, sway, seed, theme])
+  }, [
+    color,
+    glow,
+    speed,
+    density,
+    sway,
+    seed,
+    rotateX,
+    rotateY,
+    rotateZ,
+    theme,
+  ])
 
   return (
     <div

From 59b59e162820decbcc06034d074168797994c360 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:14:26 +0530
Subject: [PATCH 13/49] Animate the page outline with an SVG rail.

The rail draws in and steps inward for nested headings, a lit segment
glides to the hovered item, a triad pulse runs to the clicked heading,
and a small scope trace heads the list. Still no scroll tracking; all
motion stops under prefers-reduced-motion.
---
 app/globals.css                 |  30 ++++
 components/docs-toc-outline.tsx | 234 ++++++++++++++++++++++++++++++++
 components/docs-toc.tsx         |  31 +----
 3 files changed, 268 insertions(+), 27 deletions(-)
 create mode 100644 components/docs-toc-outline.tsx

diff --git a/app/globals.css b/app/globals.css
index e00cbac..51f695a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -56,6 +56,36 @@
     --radius-3xl: calc(var(--radius) * 1.25);
     --radius-4xl: calc(var(--radius) * 1.3);
     --animate-sidebar-open-blur: sidebar-open-blur 280ms cubic-bezier(0.22, 1, 0.36, 1);
+    --animate-toc-rail: toc-rail 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    --animate-toc-item: toc-item 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    --animate-toc-scope: toc-scope 1.1s linear infinite;
+}
+
+/* On this page — the SVG rail draws in, rows follow it, the scope trace runs. */
+@keyframes toc-rail {
+    from {
+        stroke-dashoffset: 1;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes toc-item {
+    from {
+        opacity: 0;
+        translate: -3px 0;
+    }
+    to {
+        opacity: 1;
+        translate: 0 0;
+    }
+}
+
+@keyframes toc-scope {
+    to {
+        transform: translateX(-12px);
+    }
 }
 
 @keyframes sidebar-open-blur {
diff --git a/components/docs-toc-outline.tsx b/components/docs-toc-outline.tsx
new file mode 100644
index 0000000..4d07cf8
--- /dev/null
+++ b/components/docs-toc-outline.tsx
@@ -0,0 +1,234 @@
+"use client"
+
+import { useLayoutEffect, useRef, useState } from "react"
+import type { TOCItemType } from "fumadocs-core/toc"
+
+import { cn } from "@/lib/utils"
+
+/** Rail x per heading depth; the rail steps inward for nested headings. */
+function railX(depth: number) {
+  if (depth <= 2) return 0.5
+  if (depth === 3) return 10.5
+  return 18.5
+}
+
+/** Room each step's diagonal takes out of the rows it joins. */
+const STEP = 6
+/** Length of each triad dash in the click pulse. */
+const PULSE = 8
+
+type Rail = {
+  d: string
+  total: number
+  /** Where each item's stretch of rail starts and ends, along the path. */
+  spans: [number, number][]
+  height: number
+}
+
+function buildRail(list: HTMLUListElement, items: TOCItemType[]): Rail | null {
+  const rows = Array.from(list.children) as HTMLElement[]
+  if (rows.length === 0 || rows.length !== items.length) return null
+  const xs = items.map((item) => railX(item.depth))
+  const points: [number, number][] = []
+  const spans: [number, number][] = []
+  let total = 0
+  const to = (x: number, y: number) => {
+    const last = points[points.length - 1]
+    if (last) total += Math.hypot(x - last[0], y - last[1])
+    points.push([x, y])
+    return total
+  }
+  rows.forEach((row, i) => {
+    const x = xs[i]!
+    const top = row.offsetTop
+    const bottom = top + row.offsetHeight
+    const stepIn = i > 0 && xs[i - 1] !== x
+    const stepOut = i < rows.length - 1 && xs[i + 1] !== x
+    const start = to(x, top + (stepIn ? STEP : 0))
+    const end = to(x, bottom - (stepOut ? STEP : 0))
+    spans.push([start, end])
+  })
+  return {
+    d: points.map(([x, y], i) => `${i ? "L" : "M"}${x} ${y}`).join(""),
+    total,
+    spans,
+    height: list.offsetHeight,
+  }
+}
+
+/**
+ * The page outline. An SVG rail draws itself in and steps inward for nested
+ * headings; a lit segment glides along it to the hovered item, and clicking
+ * sends a triad pulse down the rail to the heading you jumped to. No scroll
+ * tracking.
+ */
+export function DocsTocOutline({ items }: { items: TOCItemType[] }) {
+  const listRef = useRef<HTMLUListElement>(null)
+  const pulseRefs = useRef<(SVGPathElement | null)[]>([])
+  const [rail, setRail] = useState<Rail | null>(null)
+  const [hover, setHover] = useState<number | null>(null)
+  const [lit, setLit] = useState(0)
+
+  useLayoutEffect(() => {
+    const list = listRef.current
+    if (!list) return
+    const measure = () => setRail(buildRail(list, items))
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(list)
+    return () => ro.disconnect()
+  }, [items])
+
+  function enter(index: number) {
+    setHover(index)
+    setLit(index)
+  }
+
+  function pulse(index: number) {
+    const span = rail?.spans[index]
+    if (!rail || !span) return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    const target = (span[0] + span[1]) / 2 + PULSE / 2
+    const duration = Math.min(900, 380 + target * 1.2)
+    pulseRefs.current.forEach((path, i) => {
+      path?.animate(
+        [
+          { strokeDashoffset: PULSE, opacity: 1 },
+          { strokeDashoffset: -(target - PULSE), opacity: 1, offset: 0.75 },
+          { strokeDashoffset: -(target - PULSE), opacity: 0 },
+        ],
+        {
+          duration,
+          delay: (2 - i) * 45,
+          easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+          fill: "backwards",
+        }
+      )
+    })
+  }
+
+  const span = rail?.spans[lit]
+  const litLength = span ? Math.max(0, span[1] - span[0]) : 0
+
+  return (
+    <nav
+      aria-label="On this page"
+      className="group/toc"
+      onMouseLeave={() => setHover(null)}
+    >
+      <p className="mb-3 flex items-center gap-2 text-[13px] text-muted-foreground">
+        <ScopeTrace />
+        On this page
+      </p>
+      <div className="relative">
+        {rail ? (
+          <svg
+            aria-hidden
+            width={20}
+            height={rail.height}
+            className="pointer-events-none absolute top-0 left-0 overflow-visible"
+          >
+            <path
+              d={rail.d}
+              pathLength={1}
+              fill="none"
+              stroke="var(--rule)"
+              strokeDasharray={1}
+              className="motion-safe:animate-toc-rail"
+            />
+            <path
+              d={rail.d}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeDasharray={`${litLength} ${rail.total + litLength}`}
+              strokeDashoffset={-(span?.[0] ?? 0)}
+              className={cn(
+                "text-foreground transition-[stroke-dashoffset,stroke-dasharray,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+                hover === null && "opacity-0"
+              )}
+            />
+            {["--triad-r", "--triad-g", "--triad-b"].map((color, i) => (
+              <path
+                key={color}
+                ref={(node) => {
+                  pulseRefs.current[i] = node
+                }}
+                d={rail.d}
+                fill="none"
+                stroke={`var(${color})`}
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeDasharray={`${PULSE} ${rail.total + PULSE}`}
+                opacity={0}
+                className="dark:mix-blend-screen"
+              />
+            ))}
+          </svg>
+        ) : null}
+        <ul ref={listRef} className="relative flex flex-col">
+          {items.map((item, i) => (
+            <li
+              key={item.url}
+              style={{ animationDelay: `${Math.min(i * 45, 540)}ms` }}
+              className="motion-safe:animate-toc-item"
+            >
+              <a
+                href={item.url}
+                onMouseEnter={() => enter(i)}
+                onFocus={() => enter(i)}
+                onBlur={() => setHover(null)}
+                onClick={() => pulse(i)}
+                className={cn(
+                  "block py-1.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none",
+                  item.depth <= 2 && "ps-3.5",
+                  item.depth === 3 && "ps-6",
+                  item.depth >= 4 && "ps-8"
+                )}
+              >
+                {item.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  )
+}
+
+/**
+ * A little oscilloscope trace. It draws in once, then runs while the
+ * outline is hovered.
+ */
+function ScopeTrace() {
+  // Two periods of a sine, so sliding by one period loops seamlessly.
+  const wave = Array.from({ length: 33 }, (_, i) => {
+    const x = i * 0.75
+    const y = 5 - Math.sin((i / 16) * Math.PI * 2) * 3.2
+    return `${i ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`
+  }).join("")
+  return (
+    <svg
+      aria-hidden
+      width={14}
+      height={10}
+      viewBox="0 0 12 10"
+      className="shrink-0 overflow-hidden"
+    >
+      <g className="[animation-play-state:paused] group-hover/toc:[animation-play-state:running] motion-safe:animate-toc-scope">
+        <path
+          d={wave}
+          pathLength={1}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={1.2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={1}
+          className="motion-safe:animate-toc-rail"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/docs-toc.tsx b/components/docs-toc.tsx
index 47e8dea..009895a 100644
--- a/components/docs-toc.tsx
+++ b/components/docs-toc.tsx
@@ -2,39 +2,16 @@ import type { TOCItemType } from "fumadocs-core/toc"
 import Link from "next/link"
 import { RiArrowRightUpLine, RiHeartFill } from "@remixicon/react"
 
-import { cn } from "@/lib/utils"
+import { DocsTocOutline } from "@/components/docs-toc-outline"
 
 /**
- * Right rail on the bench, outside the page sheet: a plain page outline (no
- * scroll tracking), with the sponsor slot underneath.
+ * Right rail on the bench, outside the page sheet: the animated page outline
+ * (no scroll tracking), with the sponsor slot underneath.
  */
 export function DocsToc({ items }: { items: TOCItemType[] }) {
   return (
     <aside className="sticky top-0 hidden w-56 shrink-0 flex-col gap-6 pt-14 xl:flex">
-      {items.length > 0 ? (
-        <nav aria-label="On this page">
-          <p className="mb-3 text-[13px] text-muted-foreground">
-            On this page
-          </p>
-          <ul className="flex flex-col border-s">
-            {items.map((item) => (
-              <li key={item.url}>
-                <a
-                  href={item.url}
-                  className={cn(
-                    "-ms-px block border-s border-transparent py-1.5 text-[13px] text-muted-foreground transition-colors hover:border-foreground hover:text-foreground",
-                    item.depth <= 2 && "ps-3.5",
-                    item.depth === 3 && "ps-6",
-                    item.depth >= 4 && "ps-8"
-                  )}
-                >
-                  {item.title}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      ) : null}
+      {items.length > 0 ? <DocsTocOutline items={items} /> : null}
 
       <Link
         href="/sponsors"

From fa4445968fb5dff7ded6b008d8fcd8397079960c Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:21:11 +0530
Subject: [PATCH 14/49] Rebuild Stretchy Footer on one shared engine.

A vanilla engine now drives input, springs, the page lift and a canvas
aurora for both React and Svelte, so the React build no longer needs
motion. The pull follows a rubber-band curve that scrolling back up
retraces, trackpad momentum releases early and can't re-pull, nested
scrollers keep their wheel, and each column springs on its own so the
edge ripples. The self-scrolling mode keeps the aurora on the viewport
floor instead of letting it scroll away.
---
 content/docs/components/stretchy-footer.mdx   |  11 +-
 public/r/registry.json                        |   3 -
 public/r/stretchy-footer-svelte.json          |   2 +-
 public/r/stretchy-footer.json                 |   5 +-
 registry/stretchy-footer/registry.json        |   1 -
 .../stretchy-footer/stretchy-footer-demo.tsx  |  23 +-
 .../stretchy-footer-spring-vanilla.ts         | 112 ----
 .../stretchy-footer-vanilla.ts                | 578 ++++++++++++++++--
 .../stretchy-footer/stretchy-footer.svelte    | 428 +++----------
 registry/stretchy-footer/stretchy-footer.tsx  | 453 +++-----------
 tests/registry.test.mjs                       |  12 +-
 11 files changed, 698 insertions(+), 930 deletions(-)
 delete mode 100644 registry/stretchy-footer/stretchy-footer-spring-vanilla.ts

diff --git a/content/docs/components/stretchy-footer.mdx b/content/docs/components/stretchy-footer.mdx
index 86cd75d..419fdd9 100644
--- a/content/docs/components/stretchy-footer.mdx
+++ b/content/docs/components/stretchy-footer.mdx
@@ -5,7 +5,7 @@ description: Dia-style rubber overscroll — pull past the bottom and a rainbow
 
 import { StretchyFooterDemo } from "@/registry/stretchy-footer/stretchy-footer-demo"
 
-Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page rolls up from the bottom and the aurora fills the stretch. Swap palettes, blur, glow, and snap below.
+Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page lifts on a spring and an aurora of blurred columns stretches up to fill the gap. Every column has its own spring, so the top edge ripples as it snaps back. Swap palettes, blur, glow, and snap below.
 
 ## Preview
 
@@ -21,7 +21,7 @@ Or install straight from the public GitHub source registry:
 
 ## Usage
 
-Use it as the scroll viewport. Put your page (and a normal footer block) in children. Wheel / touch past the bottom stretches the aurora; idle or release snaps it back. Honors `prefers-reduced-motion` (no stretch).
+Use it as the scroll viewport. Put your page (and a normal footer block) in children. Wheel or touch past the bottom stretches the aurora with a rubber-band falloff; scrolling back up retraces it, and letting go snaps it home. Trackpad momentum can't re-pull it, and nested scrollers such as code blocks keep their own wheel. Honors `prefers-reduced-motion` (no stretch). One vanilla engine drives both the React and Svelte versions, and it doesn't need `motion`.
 
 <FrameworkCode>
   <FrameworkReact>
@@ -107,8 +107,9 @@ export function DocsChrome() {
 | `stiffness` | `number` | `380` |
 | `damping` | `number` | `32` |
 | `columns` | `number` | `48` |
-| `blur` | `number` | `14` |
-| `glow` | `number` | `0.22` |
-| `label` | `string` | `Stretchy overflow` |
+| `blur` | `number` | `14` — px |
+| `glow` | `number` | `0.22` — floor bloom, 0–1 |
+| `label` | `string` | `Stretchy overflow` — scroll region label |
+| `demoId` | `string` | — pairs with `playStretchyFooterDemo({ target })` |
 | `className` | `string` | React only |
 | `class` | `string` | Svelte only |
diff --git a/public/r/registry.json b/public/r/registry.json
index 11e7949..6b3e7a1 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -325,9 +325,6 @@
       "name": "stretchy-footer",
       "title": "Stretchy Footer",
       "description": "Dia-style rubber overscroll — rainbow aurora stretches up past the bottom, then snaps back.",
-      "dependencies": [
-        "motion"
-      ],
       "files": [
         {
           "path": "registry/stretchy-footer/stretchy-footer.tsx",
diff --git a/public/r/stretchy-footer-svelte.json b/public/r/stretchy-footer-svelte.json
index 275dcbc..c896169 100644
--- a/public/r/stretchy-footer-svelte.json
+++ b/public/r/stretchy-footer-svelte.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/stretchy-footer/stretchy-footer.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_COLORS = [\n  \"#FF3B30\",\n  \"#FF9500\",\n  \"#FFCC00\",\n  \"#34C759\",\n  \"#00C7BE\",\n  \"#32ADE6\",\n  \"#007AFF\",\n  \"#5856D6\",\n  \"#AF52DE\",\n  \"#FF2D55\",\n]\n\nexport const DEFAULT_COLUMNS = 48\n/** Gaussian blur on the aurora bars, in px. */\nexport const DEFAULT_BLUR = 14\n/** White floor bloom opacity (0–1). */\nexport const DEFAULT_GLOW = 0.22\nexport const WHEEL_IDLE_MS = 90\nexport const PULL_GAIN = 0.7\nexport const POP_BOOST = 1.45\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  if (root) {\n    const max = Math.max(0, root.scrollHeight - root.clientHeight)\n    root.scrollTo({ top: max, behavior: \"smooth\" })\n    const started = performance.now()\n    while (performance.now() - started < 2000) {\n      if (root.scrollTop >= max - 2) break\n      await new Promise<void>((r) => window.setTimeout(r, 32))\n    }\n    root.scrollTo({ top: max })\n    return\n  }\n\n  const max = Math.max(\n    0,\n    document.documentElement.scrollHeight - window.innerHeight\n  )\n  window.scrollTo({ top: max, behavior: \"smooth\" })\n  const started = performance.now()\n  while (performance.now() - started < 2000) {\n    const top = window.scrollY || document.documentElement.scrollTop\n    if (top >= max - 2) break\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  window.scrollTo({ top: max })\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n\n  await scrollToEnd(detail.scrollRoot)\n\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, {\n      detail,\n    })\n  )\n\n  const hold = detail.holdMs ?? 700\n  // Travel out + hold + spring home\n  await new Promise<void>((r) => window.setTimeout(r, hold + 900))\n}\n\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return Math.exp(-t * t * 2.2)\n}\n\n/** Stable rgba() for SSR — avoids hex/rgb serialization mismatches. */\nexport function hexToRgba(hex: string, alpha: number): string {\n  const raw = hex.replace(\"#\", \"\")\n  const full =\n    raw.length === 3\n      ? raw\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : raw.slice(0, 6)\n  const r = Number.parseInt(full.slice(0, 2), 16)\n  const g = Number.parseInt(full.slice(2, 4), 16)\n  const b = Number.parseInt(full.slice(4, 6), 16)\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`\n}\n\nexport function applyResistance(current: number, delta: number, max: number): number {\n  if (max <= 0) return 0\n  const t = Math.min(1, Math.max(0, current / max))\n  const falloff = (1 - t) * (1 - t * 0.35)\n  const pop = current < 40 ? POP_BOOST : 1\n  return Math.min(max, Math.max(0, current + delta * PULL_GAIN * falloff * pop))\n}\n\nexport function elementAtBottom(el: HTMLElement, slack = 1): boolean {\n  return el.scrollTop + el.clientHeight >= el.scrollHeight - slack\n}\n\nexport function windowAtBottom(slack = 1): boolean {\n  const doc = document.documentElement\n  return window.scrollY + window.innerHeight >= doc.scrollHeight - slack\n}\n\n\nexport type SpringOptions = {\n  stiffness: number\n  damping: number\n  mass: number\n  restDelta?: number\n  restSpeed?: number\n  /** Start position. Default `0`. */\n  initial?: number\n}\n\nexport type Spring = {\n  set: (value: number) => void\n  get: () => number\n  onChange: (fn: (value: number) => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Damped spring for the Svelte port (React keeps motion springs).\n * Semi-implicit Euler with a 60 Hz substep.\n */\nexport function createSpring({\n  stiffness,\n  damping,\n  mass,\n  restDelta = 0.2,\n  restSpeed = 0.2,\n  initial = 0,\n}: SpringOptions): Spring {\n  let current = initial\n  let target = initial\n  let velocity = 0\n  let raf = 0\n  let lastTime = 0\n  const listeners = new Set<(value: number) => void>()\n\n  function emit() {\n    for (const fn of listeners) fn(current)\n  }\n\n  function integrate(dt: number) {\n    const springForce = -stiffness * (current - target)\n    const dampingForce = -damping * velocity\n    const accel = (springForce + dampingForce) / mass\n    velocity += accel * dt\n    current += velocity * dt\n  }\n\n  function tick(now: number) {\n    if (!lastTime) lastTime = now\n    let remaining = Math.min((now - lastTime) / 1000, 0.064)\n    lastTime = now\n\n    const step = 1 / 60\n    while (remaining > 0) {\n      integrate(Math.min(step, remaining))\n      remaining -= step\n    }\n\n    const settled =\n      Math.abs(current - target) < restDelta && Math.abs(velocity) < restSpeed\n\n    if (settled) {\n      current = target\n      velocity = 0\n      raf = 0\n      lastTime = 0\n      emit()\n      return\n    }\n\n    emit()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function start() {\n    if (!raf) {\n      lastTime = 0\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  return {\n    set(value) {\n      target = value\n      if (\n        Math.abs(current - target) < restDelta &&\n        Math.abs(velocity) < restSpeed\n      ) {\n        current = target\n        velocity = 0\n        emit()\n        return\n      }\n      start()\n    },\n    get() {\n      return current\n    },\n    onChange(fn) {\n      listeners.add(fn)\n      return () => {\n        listeners.delete(fn)\n      }\n    },\n    destroy() {\n      if (raf) cancelAnimationFrame(raf)\n      raf = 0\n      listeners.clear()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props {\n    class?: string\n    /**\n     * Page content inside the overflow scroller.\n     * Ignored when `scrollEl` / `windowScroll` paint overlay-only.\n     */\n    children?: import(\"svelte\").Snippet\n    /**\n     * External scroll container. When set, this component only paints the\n     * aurora overlay and binds overscroll listeners to that element.\n     * When omitted (and `windowScroll` is false), this component *is* the scroller.\n     */\n    scrollEl?: HTMLElement\n    /**\n     * Bind overscroll to the window and paint a fixed bottom aurora.\n     * Use on full pages (e.g. the component docs) instead of a nested scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element that lifts with the stretch (CSS selector).\n     * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.\n     */\n    contentSelector?: string\n    /** Peak stretch in px. Default `280`. */\n    maxStretch?: number\n    /** Spectrum stops across the aurora columns. */\n    colors?: string[]\n    /** Spring stiffness. Default `380`. */\n    stiffness?: number\n    /** Spring damping. Default `32`. */\n    damping?: number\n    /** How many vertical aurora bars. Default `48`. */\n    columns?: number\n    /** Gaussian blur on the aurora bars, in px. Default `14`. */\n    blur?: number\n    /** White floor bloom opacity (0–1). Default `0.22`. */\n    glow?: number\n    /** Accessible label for the decorative field. */\n    label?: string\n    /**\n     * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n     * animates footers whose `demoId` matches.\n     */\n    demoId?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    scrollEl,\n    windowScroll = false,\n    contentSelector = \"[data-stretchy-page]\",\n    maxStretch = 280,\n    colors = DEFAULT_COLORS,\n    stiffness = 380,\n    damping = 32,\n    columns = DEFAULT_COLUMNS,\n    blur = DEFAULT_BLUR,\n    glow = DEFAULT_GLOW,\n    label = \"Stretchy overflow\",\n    demoId,\n  }: Props = $props()\n\n  let mounted = $state(false)\n  let reduceMotion = $state(false)\n  let demoPlaying = $state(false)\n  let progress = $state(0)\n  let fieldOpacity = $state(0)\n  let pageY = $state(0)\n  let internalEl: HTMLDivElement | undefined = $state()\n\n  let pull = 0\n  let demoPlayingRef = false\n  let spring: Spring | null = null\n  let rolledEl: HTMLElement | null = null\n  let touchStartY = 0\n  let touchStretch0 = 0\n  let wheelTimer: ReturnType<typeof setTimeout> | null = null\n  let demoTimer: ReturnType<typeof setTimeout> | null = null\n\n  const reduce = $derived(mounted && reduceMotion && !demoPlaying)\n  const blurPx = $derived(Math.max(0, blur))\n  const glowAlpha = $derived(Math.min(1, Math.max(0, glow)))\n\n  const bars = $derived.by(() => {\n    const count = Math.max(8, Math.min(96, Math.floor(columns)))\n    return Array.from({ length: count }, (_, i) => {\n      const color = colors[i % colors.length]!\n      const heightPct = Math.max(28, columnScale(i, count) * 100).toFixed(2)\n      return {\n        key: i,\n        height: `${heightPct}%`,\n        backgroundImage: `linear-gradient(to top, ${hexToRgba(color, 1)} 0%, ${hexToRgba(color, 0.6)} 45%, rgba(0, 0, 0, 0) 100%)`,\n      }\n    })\n  })\n\n  function applyVisuals(v: number) {\n    const p =\n      maxStretch <= 0 ? 0 : Math.min(1, Math.max(0, v / maxStretch))\n    progress = p\n    pageY = -v\n    fieldOpacity = p <= 0 ? 0 : p >= 0.08 ? 1 : p / 0.08\n\n    if (reduceMotion && !demoPlayingRef) return\n    if (!windowScroll && !scrollEl) return\n\n    if (!rolledEl?.isConnected) {\n      rolledEl = document.querySelector(contentSelector)\n    }\n    const el = rolledEl\n    if (!el) return\n\n    const y = -Math.max(0, v)\n    el.style.transformOrigin = \"50% 100%\"\n    el.style.willChange = \"transform\"\n    el.style.transform = `translate3d(0, ${y}px, 0)`\n\n    if (v < 0.2) {\n      el.style.transform = \"translate3d(0, 0, 0)\"\n      el.style.willChange = \"\"\n    }\n  }\n\n  function pullTo(next: number) {\n    pull = next\n    spring?.set(next)\n  }\n\n  onMount(() => {\n    mounted = true\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n    const applyReduce = () => {\n      reduceMotion = mq.matches\n    }\n    applyReduce()\n    mq.addEventListener(\"change\", applyReduce)\n    return () => {\n      mq.removeEventListener(\"change\", applyReduce)\n      if (rolledEl) {\n        rolledEl.style.transform = \"\"\n        rolledEl.style.transformOrigin = \"\"\n        rolledEl.style.willChange = \"\"\n      }\n    }\n  })\n\n  function portalToBody(node: HTMLElement) {\n    document.body.appendChild(node)\n    return {\n      destroy() {\n        node.remove()\n      },\n    }\n  }\n\n  $effect(() => {\n    const s = createSpring({\n      stiffness,\n      damping,\n      mass: 0.35,\n      initial: pull,\n    })\n    spring = s\n    const unsub = s.onChange((v) => {\n      applyVisuals(v)\n    })\n    return () => {\n      unsub()\n      s.destroy()\n      if (spring === s) spring = null\n    }\n  })\n\n  $effect(() => {\n    const clearDemoTimer = () => {\n      if (demoTimer) {\n        clearTimeout(demoTimer)\n        demoTimer = null\n      }\n    }\n\n    const onPlay = (event: Event) => {\n      const detail =\n        (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n      if (detail.target != null && detail.target !== demoId) return\n      if (detail.target == null && demoId != null) return\n\n      const amount = detail.amount ?? 0.82\n      const holdMs = detail.holdMs ?? 700\n\n      if (wheelTimer) {\n        clearTimeout(wheelTimer)\n        wheelTimer = null\n      }\n      clearDemoTimer()\n      demoPlayingRef = true\n      demoPlaying = true\n      pullTo(Math.min(maxStretch, Math.max(0, maxStretch * amount)))\n      demoTimer = setTimeout(() => {\n        demoTimer = null\n        pullTo(0)\n        window.setTimeout(() => {\n          demoPlayingRef = false\n          demoPlaying = false\n        }, 500)\n      }, holdMs)\n    }\n\n    window.addEventListener(STRETCHY_FOOTER_PLAY, onPlay)\n    return () => {\n      clearDemoTimer()\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlay)\n    }\n  })\n\n  $effect(() => {\n    if (reduceMotion) return\n\n    let target: { kind: \"window\" } | { kind: \"element\"; el: HTMLElement } | null =\n      null\n    if (windowScroll) {\n      target = { kind: \"window\" }\n    } else {\n      const el = scrollEl ?? internalEl\n      if (el) target = { kind: \"element\", el }\n    }\n    if (!target) return\n\n    const prevOverscroll =\n      target.kind === \"window\"\n        ? document.documentElement.style.overscrollBehaviorY\n        : target.el.style.overscrollBehaviorY\n    if (target.kind === \"window\") {\n      document.documentElement.style.overscrollBehaviorY = \"none\"\n    } else {\n      target.el.style.overscrollBehaviorY = \"none\"\n    }\n\n    const isAtBottom = () =>\n      target.kind === \"window\" ? windowAtBottom() : elementAtBottom(target.el)\n\n    const clearWheelTimer = () => {\n      if (wheelTimer) {\n        clearTimeout(wheelTimer)\n        wheelTimer = null\n      }\n    }\n\n    const snapBack = () => {\n      clearWheelTimer()\n      pullTo(0)\n    }\n\n    const onWheel = (event: WheelEvent) => {\n      if (demoTimer) {\n        clearTimeout(demoTimer)\n        demoTimer = null\n        demoPlaying = false\n        demoPlayingRef = false\n      }\n      const current = pull\n      const scrollingDown = event.deltaY > 0\n      const scrollingUp = event.deltaY < 0\n      const stretchNow = spring?.get() ?? 0\n\n      if (current > 0.5 || stretchNow > 0.5) {\n        event.preventDefault()\n        if (scrollingUp) {\n          const next = Math.max(0, current + event.deltaY * PULL_GAIN)\n          if (next <= 0.5) {\n            snapBack()\n            return\n          }\n          pullTo(next)\n        } else if (scrollingDown) {\n          pullTo(applyResistance(current, event.deltaY, maxStretch))\n        }\n        clearWheelTimer()\n        wheelTimer = setTimeout(snapBack, WHEEL_IDLE_MS)\n        return\n      }\n\n      if (scrollingDown && isAtBottom()) {\n        event.preventDefault()\n        pullTo(applyResistance(0, event.deltaY, maxStretch))\n        clearWheelTimer()\n        wheelTimer = setTimeout(snapBack, WHEEL_IDLE_MS)\n      }\n    }\n\n    const onTouchStart = (event: TouchEvent) => {\n      const t = event.touches[0]\n      if (!t) return\n      if (demoTimer) {\n        clearTimeout(demoTimer)\n        demoTimer = null\n        demoPlaying = false\n        demoPlayingRef = false\n      }\n      touchStartY = t.clientY\n      touchStretch0 = pull\n    }\n\n    const onTouchMove = (event: TouchEvent) => {\n      const t = event.touches[0]\n      if (!t) return\n      const dy = touchStartY - t.clientY\n      const current = pull\n      const stretchNow = spring?.get() ?? 0\n\n      if (current > 0.5 || stretchNow > 0.5 || (dy > 0 && isAtBottom())) {\n        if (event.cancelable) event.preventDefault()\n        const boost = current < 40 ? POP_BOOST : 1\n        const fromRest = touchStretch0 + dy * PULL_GAIN * boost\n        pullTo(Math.min(maxStretch, Math.max(0, fromRest)))\n      }\n    }\n\n    const onTouchEnd = () => {\n      const stretchNow = spring?.get() ?? 0\n      if (pull > 0.5 || stretchNow > 0.5) snapBack()\n    }\n\n    const optsWheel = { passive: false }\n    const optsTouchStart = { passive: true }\n    const optsTouchMove = { passive: false }\n\n    if (target.kind === \"window\") {\n      window.addEventListener(\"wheel\", onWheel, optsWheel)\n      window.addEventListener(\"touchstart\", onTouchStart, optsTouchStart)\n      window.addEventListener(\"touchmove\", onTouchMove, optsTouchMove)\n      window.addEventListener(\"touchend\", onTouchEnd)\n      window.addEventListener(\"touchcancel\", onTouchEnd)\n    } else {\n      const el = target.el\n      el.addEventListener(\"wheel\", onWheel, optsWheel)\n      el.addEventListener(\"touchstart\", onTouchStart, optsTouchStart)\n      el.addEventListener(\"touchmove\", onTouchMove, optsTouchMove)\n      el.addEventListener(\"touchend\", onTouchEnd)\n      el.addEventListener(\"touchcancel\", onTouchEnd)\n    }\n\n    return () => {\n      clearWheelTimer()\n      if (target.kind === \"window\") {\n        document.documentElement.style.overscrollBehaviorY = prevOverscroll\n        window.removeEventListener(\"wheel\", onWheel)\n        window.removeEventListener(\"touchstart\", onTouchStart)\n        window.removeEventListener(\"touchmove\", onTouchMove)\n        window.removeEventListener(\"touchend\", onTouchEnd)\n        window.removeEventListener(\"touchcancel\", onTouchEnd)\n      } else {\n        target.el.style.overscrollBehaviorY = prevOverscroll\n        const el = target.el\n        el.removeEventListener(\"wheel\", onWheel)\n        el.removeEventListener(\"touchstart\", onTouchStart)\n        el.removeEventListener(\"touchmove\", onTouchMove)\n        el.removeEventListener(\"touchend\", onTouchEnd)\n        el.removeEventListener(\"touchcancel\", onTouchEnd)\n      }\n    }\n  })\n</script>\n\n{#snippet aurora()}\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n    style=\"height: {maxStretch}px;\"\n  >\n    <div\n      class=\"absolute inset-x-0 bottom-0 h-full w-full origin-bottom will-change-transform\"\n      style=\"transform: scaleY({reduce ? 0 : progress}); opacity: {reduce\n        ? 0\n        : fieldOpacity};\"\n    >\n      <div\n        class=\"absolute inset-0 flex items-end justify-stretch\"\n        style=\"filter: blur({blurPx}px); transform: scaleY(1.08);\"\n      >\n        {#each bars as bar (bar.key)}\n          <div\n            class=\"min-w-0 flex-1\"\n            style=\"height: {bar.height}; background-image: {bar.backgroundImage};\"\n          ></div>\n        {/each}\n      </div>\n\n      <div\n        class=\"absolute inset-x-0 bottom-0 h-1/2\"\n        style=\"background-image: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,255,255,{glowAlpha}), rgba(0, 0, 0, 0) 70%);\"\n      ></div>\n    </div>\n  </div>\n{/snippet}\n\n{#if windowScroll}\n  {#if mounted}\n    <div\n      use:portalToBody\n      data-slot=\"stretchy-footer\"\n      aria-label={label}\n      class={cn(\n        \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n        className\n      )}\n      style=\"height: {maxStretch}px;\"\n    >\n      {@render aurora()}\n    </div>\n  {/if}\n{:else if scrollEl}\n  <div\n    data-slot=\"stretchy-footer\"\n    aria-label={label}\n    class={cn(\"pointer-events-none absolute inset-x-0 bottom-0\", className)}\n    style=\"height: {maxStretch}px;\"\n  >\n    {@render aurora()}\n  </div>\n{:else}\n  <div\n    bind:this={internalEl}\n    data-slot=\"stretchy-footer\"\n    aria-label={label}\n    class={cn(\n      \"relative isolate overflow-y-auto overflow-x-hidden overscroll-none\",\n      className\n    )}\n  >\n    <div\n      class=\"relative z-10 min-h-full will-change-transform\"\n      style=\"transform: translateY({pageY}px);\"\n    >\n      {@render children?.()}\n    </div>\n    {@render aurora()}\n  </div>\n{/if}\n",
+      "content": "<script module lang=\"ts\">\nexport const DEFAULT_COLORS = [\n  \"#FF3B30\",\n  \"#FF9500\",\n  \"#FFCC00\",\n  \"#34C759\",\n  \"#00C7BE\",\n  \"#32ADE6\",\n  \"#007AFF\",\n  \"#5856D6\",\n  \"#AF52DE\",\n  \"#FF2D55\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 48\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 14\n/** White floor bloom opacity (0–1). */\nexport const DEFAULT_GLOW = 0.22\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Shortest column as a share of the stretch. */\nconst MIN_COLUMN = 0.28\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /** Spectrum stops across the aurora columns, any CSS colors. */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns. Default `48`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `14`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0.22`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Bell curve across the columns: tall in the middle, short at the edges. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return Math.exp(-t * t * 2.2)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\n/** A vertical strip of `color`: solid at the floor, fading out at the top. */\nfunction makeStrip(color: string) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = 64\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  g.fillStyle = color\n  g.fillRect(0, 0, 1, 64)\n  const fade = g.createLinearGradient(0, 0, 0, 64)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(0.55, \"rgba(0,0,0,0.6)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, 64)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while an aurora of blurred columns stretches up\n * from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 8, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strips: HTMLCanvasElement[] = []\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = Math.max(MIN_COLUMN, columnScale(i, count))\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrips = () => {\n    const colors = options.colors?.length ? options.colors : DEFAULT_COLORS\n    strips = colors.map(makeStrip)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      const strip = strips[i % strips.length]!\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(strip, 0, 63, 1, 1, x0, floor, x1 - x0, bottom - floor)\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrips()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrips()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends StretchyFooterOptions {\n    class?: string\n    /**\n     * Page content inside the overflow scroller.\n     * Ignored when `scrollEl` / `windowScroll` paint overlay-only.\n     */\n    children?: import(\"svelte\").Snippet\n    /**\n     * External scroll container. When set, this component only paints the\n     * aurora overlay and binds overscroll to that element.\n     * When omitted (and `windowScroll` is false), this component *is* the scroller.\n     */\n    scrollEl?: HTMLElement\n    /**\n     * Bind overscroll to the window and paint a fixed bottom aurora.\n     * Use on full pages instead of a nested scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element that lifts with the stretch (CSS selector).\n     * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.\n     */\n    contentSelector?: string\n    /** Accessible label for the scroll region. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    scrollEl,\n    windowScroll = false,\n    contentSelector = \"[data-stretchy-page]\",\n    maxStretch = DEFAULT_MAX_STRETCH,\n    colors = DEFAULT_COLORS,\n    stiffness = DEFAULT_STIFFNESS,\n    damping = DEFAULT_DAMPING,\n    columns = DEFAULT_COLUMNS,\n    blur = DEFAULT_BLUR,\n    glow = DEFAULT_GLOW,\n    label = \"Stretchy overflow\",\n    demoId,\n  }: Props = $props()\n\n  let mounted = $state(false)\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let scroller: HTMLDivElement | undefined = $state()\n  let content: HTMLDivElement | undefined = $state()\n  let instance: StretchyFooterInstance | null = null\n\n  onMount(() => {\n    mounted = true\n  })\n\n  // Remount only when the wiring changes; options stream in below.\n  $effect(() => {\n    const target = windowScroll ? window : (scrollEl ?? scroller)\n    if (!canvas || !target) return\n    const lifted = windowScroll || scrollEl ? contentSelector : content\n    const next = createStretchyFooter(\n      { canvas, scroller: target, content: lifted },\n      untrack(() => ({\n        maxStretch,\n        colors,\n        stiffness,\n        damping,\n        columns,\n        blur,\n        glow,\n        demoId,\n      }))\n    )\n    instance = next\n    return () => {\n      next?.destroy()\n      if (instance === next) instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  })\n\n  function portalToBody(node: HTMLElement) {\n    document.body.appendChild(node)\n    return {\n      destroy() {\n        node.remove()\n      },\n    }\n  }\n</script>\n\n{#snippet aurora()}\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n    style=\"height: {maxStretch}px;\"\n  >\n    <canvas bind:this={canvas} class=\"invisible absolute\"></canvas>\n  </div>\n{/snippet}\n\n{#if windowScroll}\n  {#if mounted}\n    <!-- Portal so `fixed` stays on the viewport — the lifted page is\n         transformed and would otherwise pin it to the content. -->\n    <div\n      use:portalToBody\n      data-slot=\"stretchy-footer\"\n      class={cn(\"pointer-events-none fixed inset-x-0 bottom-0 z-50\", className)}\n      style=\"height: {maxStretch}px;\"\n    >\n      {@render aurora()}\n    </div>\n  {/if}\n{:else if scrollEl}\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"pointer-events-none absolute inset-x-0 bottom-0\", className)}\n    style=\"height: {maxStretch}px;\"\n  >\n    {@render aurora()}\n  </div>\n{:else}\n  <!-- The aurora sits beside the scroller, not in it, so it stays on the\n       viewport floor instead of scrolling away with the content. -->\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"relative isolate overflow-hidden\", className)}\n  >\n    <div\n      bind:this={scroller}\n      role=\"region\"\n      aria-label={label}\n      class=\"h-full overflow-x-hidden overflow-y-auto\"\n    >\n      <div bind:this={content} class=\"relative z-10 min-h-full\">\n        {@render children?.()}\n      </div>\n    </div>\n    {@render aurora()}\n  </div>\n{/if}\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/stretchy-footer.svelte"
     }
diff --git a/public/r/stretchy-footer.json b/public/r/stretchy-footer.json
index bc00a2a..41513f9 100644
--- a/public/r/stretchy-footer.json
+++ b/public/r/stretchy-footer.json
@@ -3,13 +3,10 @@
   "name": "stretchy-footer",
   "title": "Stretchy Footer",
   "description": "Dia-style rubber overscroll — rainbow aurora stretches up past the bottom, then snaps back.",
-  "dependencies": [
-    "motion"
-  ],
   "files": [
     {
       "path": "registry/stretchy-footer/stretchy-footer.tsx",
-      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  motion,\n  useMotionValue,\n  useMotionValueEvent,\n  useReducedMotion,\n  useSpring,\n  useTransform,\n} from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_COLORS = [\n  \"#FF3B30\",\n  \"#FF9500\",\n  \"#FFCC00\",\n  \"#34C759\",\n  \"#00C7BE\",\n  \"#32ADE6\",\n  \"#007AFF\",\n  \"#5856D6\",\n  \"#AF52DE\",\n  \"#FF2D55\",\n]\n\nexport const DEFAULT_COLUMNS = 48\n/** Gaussian blur on the aurora bars, in px. */\nexport const DEFAULT_BLUR = 14\n/** White floor bloom opacity (0–1). */\nexport const DEFAULT_GLOW = 0.22\nexport const WHEEL_IDLE_MS = 90\nexport const PULL_GAIN = 0.7\nexport const POP_BOOST = 1.45\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  if (root) {\n    const max = Math.max(0, root.scrollHeight - root.clientHeight)\n    root.scrollTo({ top: max, behavior: \"smooth\" })\n    const started = performance.now()\n    while (performance.now() - started < 2000) {\n      if (root.scrollTop >= max - 2) break\n      await new Promise<void>((r) => window.setTimeout(r, 32))\n    }\n    root.scrollTo({ top: max })\n    return\n  }\n\n  const max = Math.max(\n    0,\n    document.documentElement.scrollHeight - window.innerHeight\n  )\n  window.scrollTo({ top: max, behavior: \"smooth\" })\n  const started = performance.now()\n  while (performance.now() - started < 2000) {\n    const top = window.scrollY || document.documentElement.scrollTop\n    if (top >= max - 2) break\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  window.scrollTo({ top: max })\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n\n  await scrollToEnd(detail.scrollRoot)\n\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, {\n      detail,\n    })\n  )\n\n  const hold = detail.holdMs ?? 700\n  // Travel out + hold + spring home\n  await new Promise<void>((r) => window.setTimeout(r, hold + 900))\n}\n\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return Math.exp(-t * t * 2.2)\n}\n\n/** Stable rgba() for SSR — avoids hex/rgb serialization mismatches. */\nexport function hexToRgba(hex: string, alpha: number): string {\n  const raw = hex.replace(\"#\", \"\")\n  const full =\n    raw.length === 3\n      ? raw\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : raw.slice(0, 6)\n  const r = Number.parseInt(full.slice(0, 2), 16)\n  const g = Number.parseInt(full.slice(2, 4), 16)\n  const b = Number.parseInt(full.slice(4, 6), 16)\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`\n}\n\nexport function applyResistance(current: number, delta: number, max: number): number {\n  if (max <= 0) return 0\n  const t = Math.min(1, Math.max(0, current / max))\n  const falloff = (1 - t) * (1 - t * 0.35)\n  const pop = current < 40 ? POP_BOOST : 1\n  return Math.min(max, Math.max(0, current + delta * PULL_GAIN * falloff * pop))\n}\n\nexport function elementAtBottom(el: HTMLElement, slack = 1): boolean {\n  return el.scrollTop + el.clientHeight >= el.scrollHeight - slack\n}\n\nexport function windowAtBottom(slack = 1): boolean {\n  const doc = document.documentElement\n  return window.scrollY + window.innerHeight >= doc.scrollHeight - slack\n}\n\nexport type StretchyFooterProps = {\n  className?: string\n  /**\n   * Page content inside the overflow scroller.\n   * Ignored when `scrollRef` / `windowScroll` paint overlay-only.\n   */\n  children?: ReactNode\n  /**\n   * External scroll container. When set, this component only paints the\n   * aurora overlay and binds overscroll listeners to that element.\n   * When omitted (and `windowScroll` is false), this component *is* the scroller.\n   */\n  scrollRef?: RefObject<HTMLElement | null>\n  /**\n   * Bind overscroll to the window and paint a fixed bottom aurora.\n   * Use on full pages (e.g. the component docs) instead of a nested scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element that lifts with the stretch (CSS selector).\n   * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.\n   */\n  contentSelector?: string\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /** Spectrum stops across the aurora columns. */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many vertical aurora bars. Default `48`. */\n  columns?: number\n  /** Gaussian blur on the aurora bars, in px. Default `14`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0.22`. */\n  glow?: number\n  /** Accessible label for the decorative field. */\n  label?: string\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * animates footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\ntype OverscrollTarget =\n  | { kind: \"element\"; el: HTMLElement }\n  | { kind: \"window\" }\n\n/**\n * Dia-style stretchy overflow — overscroll past the bottom and a rainbow\n * field scaleY-stretches from the floor while the page lifts with it.\n * GPU transforms only (no height animation) for a clean, snappy rubber band.\n */\nexport function StretchyFooter({\n  className,\n  children,\n  scrollRef,\n  windowScroll = false,\n  contentSelector = \"[data-stretchy-page]\",\n  maxStretch = 280,\n  colors = DEFAULT_COLORS,\n  stiffness = 380,\n  damping = 32,\n  columns = DEFAULT_COLUMNS,\n  blur = DEFAULT_BLUR,\n  glow = DEFAULT_GLOW,\n  label = \"Stretchy overflow\",\n  demoId,\n}: StretchyFooterProps) {\n  const reduceMotion = useReducedMotion() ?? false\n  const internalRef = useRef<HTMLDivElement>(null)\n  const pull = useMotionValue(0)\n  const stretch = useSpring(pull, {\n    stiffness,\n    damping,\n    mass: 0.35,\n    restDelta: 0.2,\n    restSpeed: 0.2,\n  })\n  const touchStartY = useRef(0)\n  const touchStretch0 = useRef(0)\n  const wheelTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const demoTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const demoPlayingRef = useRef(false)\n  const rolledEl = useRef<HTMLElement | null>(null)\n  const [mounted, setMounted] = useState(false)\n  /** User-triggered demo — plays even when prefers-reduced-motion is on. */\n  const [demoPlaying, setDemoPlaying] = useState(false)\n  demoPlayingRef.current = demoPlaying\n  // Gate on `mounted` so prefers-reduced-motion can't mismatch SSR HTML.\n  const reduce = mounted && reduceMotion && !demoPlaying\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  // 0 → 1 progress drives scaleY (compositor-friendly).\n  const progress = useTransform(stretch, (v) =>\n    maxStretch <= 0 ? 0 : Math.min(1, Math.max(0, v / maxStretch))\n  )\n  const pageY = useTransform(stretch, (v) => -v)\n  const fieldOpacity = useTransform(progress, [0, 0.08, 0.2], [0, 1, 1])\n\n  const blurPx = Math.max(0, blur)\n  const glowAlpha = Math.min(1, Math.max(0, glow))\n\n  const bars = useMemo(() => {\n    const count = Math.max(8, Math.min(96, Math.floor(columns)))\n    return Array.from({ length: count }, (_, i) => {\n      const color = colors[i % colors.length]!\n      const heightPct = Math.max(28, columnScale(i, count) * 100).toFixed(2)\n      return {\n        key: i,\n        height: `${heightPct}%`,\n        backgroundImage: `linear-gradient(to top, ${hexToRgba(color, 1)} 0%, ${hexToRgba(color, 0.6)} 45%, rgba(0, 0, 0, 0) 100%)`,\n      }\n    })\n  }, [colors, columns])\n\n  // Lift the page in lockstep with the stretch — translate only, no 3D.\n  useMotionValueEvent(stretch, \"change\", (v) => {\n    if (reduceMotion && !demoPlayingRef.current) return\n    if (!windowScroll && !scrollRef) return\n\n    if (!rolledEl.current?.isConnected) {\n      rolledEl.current = document.querySelector(\n        contentSelector\n      ) as HTMLElement | null\n    }\n    const el = rolledEl.current\n    if (!el) return\n\n    const y = -Math.max(0, v)\n    el.style.transformOrigin = \"50% 100%\"\n    el.style.willChange = \"transform\"\n    el.style.transform = `translate3d(0, ${y}px, 0)`\n\n    if (v < 0.2) {\n      el.style.transform = \"translate3d(0, 0, 0)\"\n      el.style.willChange = \"\"\n    }\n  })\n\n  useEffect(() => {\n    return () => {\n      const el = rolledEl.current\n      if (!el) return\n      el.style.transform = \"\"\n      el.style.transformOrigin = \"\"\n      el.style.willChange = \"\"\n    }\n  }, [])\n\n  // Always listen for docs \"Show effect\" — drives pull directly (no fake wheels).\n  useEffect(() => {\n    const clearDemoTimer = () => {\n      if (demoTimer.current) {\n        clearTimeout(demoTimer.current)\n        demoTimer.current = null\n      }\n    }\n\n    const onPlay = (event: Event) => {\n      const detail =\n        (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n      if (detail.target != null && detail.target !== demoId) return\n      // Scoped footers ignore broadcast plays without a target.\n      if (detail.target == null && demoId != null) return\n\n      const amount = detail.amount ?? 0.82\n      const holdMs = detail.holdMs ?? 700\n\n      if (wheelTimer.current) {\n        clearTimeout(wheelTimer.current)\n        wheelTimer.current = null\n      }\n      clearDemoTimer()\n      demoPlayingRef.current = true\n      setDemoPlaying(true)\n      pull.set(Math.min(maxStretch, Math.max(0, maxStretch * amount)))\n      demoTimer.current = setTimeout(() => {\n        demoTimer.current = null\n        pull.set(0)\n        // Wait for the spring to settle before re-honoring reduced motion.\n        window.setTimeout(() => {\n          demoPlayingRef.current = false\n          setDemoPlaying(false)\n        }, 500)\n      }, holdMs)\n    }\n\n    window.addEventListener(STRETCHY_FOOTER_PLAY, onPlay)\n    return () => {\n      clearDemoTimer()\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlay)\n    }\n  }, [demoId, maxStretch, pull])\n\n  useEffect(() => {\n    if (reduceMotion) return\n\n    let target: OverscrollTarget | null = null\n    if (windowScroll) {\n      target = { kind: \"window\" }\n    } else {\n      const el = scrollRef?.current ?? internalRef.current\n      if (el) target = { kind: \"element\", el }\n    }\n    if (!target) return\n\n    // Kill browser rubber-band so it doesn't fight ours.\n    const prevOverscroll =\n      target.kind === \"window\"\n        ? document.documentElement.style.overscrollBehaviorY\n        : target.el.style.overscrollBehaviorY\n    if (target.kind === \"window\") {\n      document.documentElement.style.overscrollBehaviorY = \"none\"\n    } else {\n      target.el.style.overscrollBehaviorY = \"none\"\n    }\n\n    const isAtBottom = () =>\n      target.kind === \"window\" ? windowAtBottom() : elementAtBottom(target.el)\n\n    const clearWheelTimer = () => {\n      if (wheelTimer.current) {\n        clearTimeout(wheelTimer.current)\n        wheelTimer.current = null\n      }\n    }\n\n    const pullTo = (next: number) => {\n      pull.set(next)\n    }\n\n    const snapBack = () => {\n      clearWheelTimer()\n      pull.set(0)\n    }\n\n    const onWheel = (event: WheelEvent) => {\n      if (demoTimer.current) {\n        clearTimeout(demoTimer.current)\n        demoTimer.current = null\n        setDemoPlaying(false)\n      }\n      const current = pull.get()\n      const scrollingDown = event.deltaY > 0\n      const scrollingUp = event.deltaY < 0\n\n      if (current > 0.5 || stretch.get() > 0.5) {\n        event.preventDefault()\n        if (scrollingUp) {\n          const next = Math.max(0, current + event.deltaY * PULL_GAIN)\n          if (next <= 0.5) {\n            snapBack()\n            return\n          }\n          pullTo(next)\n        } else if (scrollingDown) {\n          pullTo(applyResistance(current, event.deltaY, maxStretch))\n        }\n        clearWheelTimer()\n        wheelTimer.current = setTimeout(snapBack, WHEEL_IDLE_MS)\n        return\n      }\n\n      if (scrollingDown && isAtBottom()) {\n        event.preventDefault()\n        pullTo(applyResistance(0, event.deltaY, maxStretch))\n        clearWheelTimer()\n        wheelTimer.current = setTimeout(snapBack, WHEEL_IDLE_MS)\n      }\n    }\n\n    const onTouchStart = (event: TouchEvent) => {\n      const t = event.touches[0]\n      if (!t) return\n      if (demoTimer.current) {\n        clearTimeout(demoTimer.current)\n        demoTimer.current = null\n        setDemoPlaying(false)\n      }\n      touchStartY.current = t.clientY\n      touchStretch0.current = pull.get()\n    }\n\n    const onTouchMove = (event: TouchEvent) => {\n      const t = event.touches[0]\n      if (!t) return\n      const dy = touchStartY.current - t.clientY\n      const current = pull.get()\n\n      if (current > 0.5 || stretch.get() > 0.5 || (dy > 0 && isAtBottom())) {\n        if (event.cancelable) event.preventDefault()\n        const boost = current < 40 ? POP_BOOST : 1\n        const fromRest = touchStretch0.current + dy * PULL_GAIN * boost\n        pullTo(Math.min(maxStretch, Math.max(0, fromRest)))\n      }\n    }\n\n    const onTouchEnd = () => {\n      if (pull.get() > 0.5 || stretch.get() > 0.5) snapBack()\n    }\n\n    const optsWheel = { passive: false } as const\n    const optsTouchStart = { passive: true } as const\n    const optsTouchMove = { passive: false } as const\n\n    if (target.kind === \"window\") {\n      window.addEventListener(\"wheel\", onWheel, optsWheel)\n      window.addEventListener(\"touchstart\", onTouchStart, optsTouchStart)\n      window.addEventListener(\"touchmove\", onTouchMove, optsTouchMove)\n      window.addEventListener(\"touchend\", onTouchEnd)\n      window.addEventListener(\"touchcancel\", onTouchEnd)\n    } else {\n      const el = target.el\n      el.addEventListener(\"wheel\", onWheel, optsWheel)\n      el.addEventListener(\"touchstart\", onTouchStart, optsTouchStart)\n      el.addEventListener(\"touchmove\", onTouchMove, optsTouchMove)\n      el.addEventListener(\"touchend\", onTouchEnd)\n      el.addEventListener(\"touchcancel\", onTouchEnd)\n    }\n\n    return () => {\n      clearWheelTimer()\n      if (target.kind === \"window\") {\n        document.documentElement.style.overscrollBehaviorY = prevOverscroll\n        window.removeEventListener(\"wheel\", onWheel)\n        window.removeEventListener(\"touchstart\", onTouchStart)\n        window.removeEventListener(\"touchmove\", onTouchMove)\n        window.removeEventListener(\"touchend\", onTouchEnd)\n        window.removeEventListener(\"touchcancel\", onTouchEnd)\n      } else {\n        target.el.style.overscrollBehaviorY = prevOverscroll\n        const el = target.el\n        el.removeEventListener(\"wheel\", onWheel)\n        el.removeEventListener(\"touchstart\", onTouchStart)\n        el.removeEventListener(\"touchmove\", onTouchMove)\n        el.removeEventListener(\"touchend\", onTouchEnd)\n        el.removeEventListener(\"touchcancel\", onTouchEnd)\n      }\n    }\n  }, [reduceMotion, scrollRef, windowScroll, maxStretch, pull, stretch])\n\n  const aurora = (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n      style={{ height: maxStretch }}\n    >\n      <motion.div\n        className=\"absolute inset-x-0 bottom-0 h-full w-full origin-bottom will-change-transform\"\n        style={{\n          scaleY: reduce ? 0 : progress,\n          opacity: reduce ? 0 : fieldOpacity,\n        }}\n      >\n        {/* Single blur layer — cheaper than per-bar filters */}\n        <div\n          className=\"absolute inset-0 flex items-end justify-stretch\"\n          style={{ filter: `blur(${blurPx}px)`, transform: \"scaleY(1.08)\" }}\n        >\n          {bars.map((bar) => (\n            <div\n              key={bar.key}\n              className=\"min-w-0 flex-1\"\n              style={{\n                height: bar.height,\n                backgroundImage: bar.backgroundImage,\n              }}\n            />\n          ))}\n        </div>\n\n        {/* Soft floor bloom */}\n        <div\n          className=\"absolute inset-x-0 bottom-0 h-1/2\"\n          style={{\n            backgroundImage: `radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,255,255,${glowAlpha}), rgba(0, 0, 0, 0) 70%)`,\n          }}\n        />\n      </motion.div>\n    </div>\n  )\n\n  if (windowScroll) {\n    if (!mounted) return null\n\n    // Portal to body so `fixed` stays on the viewport — a transformed\n    // ancestor (the rolling page) would otherwise pin it to the content.\n    return createPortal(\n      <div\n        data-slot=\"stretchy-footer\"\n        aria-label={label}\n        className={cn(\n          \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>,\n      document.body\n    )\n  }\n\n  if (scrollRef) {\n    return (\n      <div\n        data-slot=\"stretchy-footer\"\n        aria-label={label}\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 bottom-0\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={internalRef}\n      data-slot=\"stretchy-footer\"\n      aria-label={label}\n      className={cn(\n        \"relative isolate overflow-y-auto overflow-x-hidden overscroll-none\",\n        className\n      )}\n    >\n      <motion.div\n        className=\"relative z-10 min-h-full will-change-transform\"\n        style={{ y: pageY }}\n      >\n        {children}\n      </motion.div>\n      {aurora}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_COLORS = [\n  \"#FF3B30\",\n  \"#FF9500\",\n  \"#FFCC00\",\n  \"#34C759\",\n  \"#00C7BE\",\n  \"#32ADE6\",\n  \"#007AFF\",\n  \"#5856D6\",\n  \"#AF52DE\",\n  \"#FF2D55\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 48\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 14\n/** White floor bloom opacity (0–1). */\nexport const DEFAULT_GLOW = 0.22\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Shortest column as a share of the stretch. */\nconst MIN_COLUMN = 0.28\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /** Spectrum stops across the aurora columns, any CSS colors. */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns. Default `48`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `14`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0.22`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Bell curve across the columns: tall in the middle, short at the edges. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return Math.exp(-t * t * 2.2)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\n/** A vertical strip of `color`: solid at the floor, fading out at the top. */\nfunction makeStrip(color: string) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = 64\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  g.fillStyle = color\n  g.fillRect(0, 0, 1, 64)\n  const fade = g.createLinearGradient(0, 0, 0, 64)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(0.55, \"rgba(0,0,0,0.6)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, 64)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while an aurora of blurred columns stretches up\n * from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 8, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strips: HTMLCanvasElement[] = []\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = Math.max(MIN_COLUMN, columnScale(i, count))\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrips = () => {\n    const colors = options.colors?.length ? options.colors : DEFAULT_COLORS\n    strips = colors.map(makeStrip)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      const strip = strips[i % strips.length]!\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(strip, 0, 63, 1, 1, x0, floor, x1 - x0, bottom - floor)\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrips()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrips()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\nexport type StretchyFooterProps = StretchyFooterOptions & {\n  className?: string\n  /**\n   * Page content inside the overflow scroller.\n   * Ignored when `scrollRef` / `windowScroll` paint overlay-only.\n   */\n  children?: ReactNode\n  /**\n   * External scroll container. When set, this component only paints the\n   * aurora overlay and binds overscroll to that element.\n   * When omitted (and `windowScroll` is false), this component *is* the scroller.\n   */\n  scrollRef?: RefObject<HTMLElement | null>\n  /**\n   * Bind overscroll to the window and paint a fixed bottom aurora.\n   * Use on full pages instead of a nested scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element that lifts with the stretch (CSS selector).\n   * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.\n   */\n  contentSelector?: string\n  /** Accessible label for the scroll region. */\n  label?: string\n}\n\nconst noopSubscribe = () => () => {}\n\n/**\n * Dia-style stretchy overflow — overscroll past the bottom and a rainbow\n * aurora stretches up from the floor while the page lifts with it, then\n * springs back with a wobble. Honors `prefers-reduced-motion`.\n */\nexport function StretchyFooter({\n  className,\n  children,\n  scrollRef,\n  windowScroll = false,\n  contentSelector = \"[data-stretchy-page]\",\n  maxStretch = DEFAULT_MAX_STRETCH,\n  colors = DEFAULT_COLORS,\n  stiffness = DEFAULT_STIFFNESS,\n  damping = DEFAULT_DAMPING,\n  columns = DEFAULT_COLUMNS,\n  blur = DEFAULT_BLUR,\n  glow = DEFAULT_GLOW,\n  label = \"Stretchy overflow\",\n  demoId,\n}: StretchyFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<StretchyFooterInstance | null>(null)\n  // The window aurora portals to <body>, which only exists on the client.\n  const onClient = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  )\n  const portalHost = windowScroll && onClient ? document.body : null\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const scroller = windowScroll\n      ? window\n      : (scrollRef?.current ?? scrollerRef.current)\n    if (!canvas || !scroller) return\n    const content =\n      windowScroll || scrollRef ? contentSelector : contentRef.current\n    instanceRef.current = createStretchyFooter(\n      { canvas, scroller, content },\n      { maxStretch, colors, stiffness, damping, columns, blur, glow, demoId }\n    )\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Options stream in through setOptions; only the wiring remounts.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, scrollRef, contentSelector, portalHost])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  }, [maxStretch, colors, stiffness, damping, columns, blur, glow, demoId])\n\n  const aurora = (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n      style={{ height: maxStretch }}\n    >\n      <canvas ref={canvasRef} className=\"invisible absolute\" />\n    </div>\n  )\n\n  if (windowScroll) {\n    if (!portalHost) return null\n    // Portal so `fixed` stays on the viewport — the lifted page is\n    // transformed and would otherwise pin it to the content.\n    return createPortal(\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>,\n      portalHost\n    )\n  }\n\n  if (scrollRef) {\n    return (\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 bottom-0\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>\n    )\n  }\n\n  // The aurora sits beside the scroller, not in it, so it stays on the\n  // viewport floor instead of scrolling away with the content.\n  return (\n    <div\n      data-slot=\"stretchy-footer\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n    >\n      <div\n        ref={scrollerRef}\n        role=\"region\"\n        aria-label={label}\n        className=\"h-full overflow-x-hidden overflow-y-auto\"\n      >\n        <div ref={contentRef} className=\"relative z-10 min-h-full\">\n          {children}\n        </div>\n      </div>\n      {aurora}\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/stretchy-footer.tsx"
     }
diff --git a/registry/stretchy-footer/registry.json b/registry/stretchy-footer/registry.json
index 966ca53..a088a7f 100644
--- a/registry/stretchy-footer/registry.json
+++ b/registry/stretchy-footer/registry.json
@@ -6,7 +6,6 @@
       "type": "registry:ui",
       "title": "Stretchy Footer",
       "description": "Dia-style rubber overscroll — rainbow aurora stretches up past the bottom, then snaps back.",
-      "dependencies": ["motion"],
       "files": [
         {
           "path": "stretchy-footer.tsx",
diff --git a/registry/stretchy-footer/stretchy-footer-demo.tsx b/registry/stretchy-footer/stretchy-footer-demo.tsx
index 0ed426a..057a728 100644
--- a/registry/stretchy-footer/stretchy-footer-demo.tsx
+++ b/registry/stretchy-footer/stretchy-footer-demo.tsx
@@ -11,16 +11,16 @@ import {
 import { ComponentPreview } from "@/components/component-preview"
 import { Button } from "@/components/ui/button"
 import { usePreviewProps } from "@/hooks/use-preview-props"
-import {
-  playStretchyFooterDemo,
-  StretchyFooter,
-} from "@/registry/stretchy-footer/stretchy-footer"
 import {
   DEFAULT_BLUR,
   DEFAULT_COLORS,
   DEFAULT_COLUMNS,
   DEFAULT_GLOW,
-} from "@/registry/stretchy-footer/stretchy-footer-vanilla"
+  DEFAULT_MAX_STRETCH,
+  DEFAULT_STIFFNESS,
+  playStretchyFooterDemo,
+  StretchyFooter,
+} from "@/registry/stretchy-footer/stretchy-footer"
 
 const PREVIEW_DEMO_ID = "stretchy-footer-preview"
 
@@ -49,7 +49,7 @@ export function StretchyFooterDemo() {
       colors: SPECTRUM,
       maxStretch: 220,
       columns: DEFAULT_COLUMNS,
-      stiffness: 380,
+      stiffness: DEFAULT_STIFFNESS,
       blur: DEFAULT_BLUR,
       glow: DEFAULT_GLOW,
     }),
@@ -82,7 +82,6 @@ export function StretchyFooterDemo() {
       >
         <div className="relative h-[56svh] w-full overflow-hidden rounded-[inherit] bg-background">
           <StretchyFooter
-            key={props.stiffness}
             demoId={PREVIEW_DEMO_ID}
             scrollRef={scrollerRef}
             contentSelector="[data-stretchy-preview]"
@@ -97,7 +96,7 @@ export function StretchyFooterDemo() {
 
           <div
             ref={scrollerRef}
-            className="no-scrollbar relative z-10 h-full overflow-y-auto overscroll-contain"
+            className="relative z-10 no-scrollbar h-full overflow-y-auto overscroll-contain"
           >
             <div
               data-stretchy-preview
@@ -132,10 +131,14 @@ export function StretchyFooterDemo() {
           colors: colorsEqual(props.colors, DEFAULT_COLORS)
             ? undefined
             : props.colors,
-          maxStretch: props.maxStretch === 280 ? undefined : props.maxStretch,
+          maxStretch:
+            props.maxStretch === DEFAULT_MAX_STRETCH
+              ? undefined
+              : props.maxStretch,
           columns:
             props.columns === DEFAULT_COLUMNS ? undefined : props.columns,
-          stiffness: props.stiffness === 380 ? undefined : props.stiffness,
+          stiffness:
+            props.stiffness === DEFAULT_STIFFNESS ? undefined : props.stiffness,
           blur: props.blur === DEFAULT_BLUR ? undefined : props.blur,
           glow: props.glow === DEFAULT_GLOW ? undefined : props.glow,
         }}
diff --git a/registry/stretchy-footer/stretchy-footer-spring-vanilla.ts b/registry/stretchy-footer/stretchy-footer-spring-vanilla.ts
deleted file mode 100644
index 40823aa..0000000
--- a/registry/stretchy-footer/stretchy-footer-spring-vanilla.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-export type SpringOptions = {
-  stiffness: number
-  damping: number
-  mass: number
-  restDelta?: number
-  restSpeed?: number
-  /** Start position. Default `0`. */
-  initial?: number
-}
-
-export type Spring = {
-  set: (value: number) => void
-  get: () => number
-  onChange: (fn: (value: number) => void) => () => void
-  destroy: () => void
-}
-
-/**
- * Damped spring for the Svelte port (React keeps motion springs).
- * Semi-implicit Euler with a 60 Hz substep.
- */
-export function createSpring({
-  stiffness,
-  damping,
-  mass,
-  restDelta = 0.2,
-  restSpeed = 0.2,
-  initial = 0,
-}: SpringOptions): Spring {
-  let current = initial
-  let target = initial
-  let velocity = 0
-  let raf = 0
-  let lastTime = 0
-  const listeners = new Set<(value: number) => void>()
-
-  function emit() {
-    for (const fn of listeners) fn(current)
-  }
-
-  function integrate(dt: number) {
-    const springForce = -stiffness * (current - target)
-    const dampingForce = -damping * velocity
-    const accel = (springForce + dampingForce) / mass
-    velocity += accel * dt
-    current += velocity * dt
-  }
-
-  function tick(now: number) {
-    if (!lastTime) lastTime = now
-    let remaining = Math.min((now - lastTime) / 1000, 0.064)
-    lastTime = now
-
-    const step = 1 / 60
-    while (remaining > 0) {
-      integrate(Math.min(step, remaining))
-      remaining -= step
-    }
-
-    const settled =
-      Math.abs(current - target) < restDelta && Math.abs(velocity) < restSpeed
-
-    if (settled) {
-      current = target
-      velocity = 0
-      raf = 0
-      lastTime = 0
-      emit()
-      return
-    }
-
-    emit()
-    raf = requestAnimationFrame(tick)
-  }
-
-  function start() {
-    if (!raf) {
-      lastTime = 0
-      raf = requestAnimationFrame(tick)
-    }
-  }
-
-  return {
-    set(value) {
-      target = value
-      if (
-        Math.abs(current - target) < restDelta &&
-        Math.abs(velocity) < restSpeed
-      ) {
-        current = target
-        velocity = 0
-        emit()
-        return
-      }
-      start()
-    },
-    get() {
-      return current
-    },
-    onChange(fn) {
-      listeners.add(fn)
-      return () => {
-        listeners.delete(fn)
-      }
-    },
-    destroy() {
-      if (raf) cancelAnimationFrame(raf)
-      raf = 0
-      listeners.clear()
-    },
-  }
-}
diff --git a/registry/stretchy-footer/stretchy-footer-vanilla.ts b/registry/stretchy-footer/stretchy-footer-vanilla.ts
index 82bf9ea..688c56f 100644
--- a/registry/stretchy-footer/stretchy-footer-vanilla.ts
+++ b/registry/stretchy-footer/stretchy-footer-vanilla.ts
@@ -11,18 +11,66 @@ export const DEFAULT_COLORS = [
   "#FF2D55",
 ]
 
+export const DEFAULT_MAX_STRETCH = 280
 export const DEFAULT_COLUMNS = 48
-/** Gaussian blur on the aurora bars, in px. */
+/** Gaussian blur on the aurora, in px. */
 export const DEFAULT_BLUR = 14
 /** White floor bloom opacity (0–1). */
 export const DEFAULT_GLOW = 0.22
-export const WHEEL_IDLE_MS = 90
-export const PULL_GAIN = 0.7
-export const POP_BOOST = 1.45
+export const DEFAULT_STIFFNESS = 380
+export const DEFAULT_DAMPING = 32
 
 /** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */
 export const STRETCHY_FOOTER_PLAY = "stretchy-footer:play"
 
+/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */
+const RUBBER = 0.9
+/** Wheel silence that counts as letting go, in ms. */
+const RELEASE_MS = 110
+/** After letting go, wheel events closer together than this are momentum. */
+const MOMENTUM_GAP_MS = 180
+/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */
+const COAST_EVENTS = 6
+const MASS = 0.35
+const REST = 0.15
+/** Shortest column as a share of the stretch. */
+const MIN_COLUMN = 0.28
+/** Field opacity ramps in over this share of `maxStretch`. */
+const FADE_IN = 0.08
+/** Physics substep, in seconds. */
+const STEP = 1 / 120
+
+export type StretchyFooterOptions = {
+  /** Peak stretch in px. Default `280`. */
+  maxStretch?: number
+  /** Spectrum stops across the aurora columns, any CSS colors. */
+  colors?: string[]
+  /** Spring stiffness. Default `380`. */
+  stiffness?: number
+  /** Spring damping. Default `32`. */
+  damping?: number
+  /** How many aurora columns. Default `48`. */
+  columns?: number
+  /** Gaussian blur on the aurora, in px. Default `14`. */
+  blur?: number
+  /** White floor bloom opacity (0–1). Default `0.22`. */
+  glow?: number
+  /**
+   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only
+   * plays footers whose `demoId` matches.
+   */
+  demoId?: string
+}
+
+export type StretchyFooterMount = {
+  /** Canvas the aurora paints into. Its parent sets the width. */
+  canvas: HTMLCanvasElement
+  /** Where overscroll is read: a scroll container, or `window`. */
+  scroller: HTMLElement | Window
+  /** Lifts with the stretch: an element, or a selector looked up when needed. */
+  content?: HTMLElement | string | null
+}
+
 export type StretchyFooterPlayDetail = {
   /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */
   amount?: number
@@ -34,31 +82,25 @@ export type StretchyFooterPlayDetail = {
   scrollRoot?: HTMLElement | null
 }
 
-export async function scrollToEnd(root?: HTMLElement | null) {
-  if (root) {
-    const max = Math.max(0, root.scrollHeight - root.clientHeight)
-    root.scrollTo({ top: max, behavior: "smooth" })
-    const started = performance.now()
-    while (performance.now() - started < 2000) {
-      if (root.scrollTop >= max - 2) break
-      await new Promise<void>((r) => window.setTimeout(r, 32))
-    }
-    root.scrollTo({ top: max })
-    return
-  }
+export type StretchyFooterInstance = {
+  setOptions: (options: Partial<StretchyFooterOptions>) => void
+  /** Stretch and snap back, even under `prefers-reduced-motion`. */
+  play: (detail?: Pick<StretchyFooterPlayDetail, "amount" | "holdMs">) => void
+  destroy: () => void
+}
 
-  const max = Math.max(
-    0,
-    document.documentElement.scrollHeight - window.innerHeight
-  )
-  window.scrollTo({ top: max, behavior: "smooth" })
+export async function scrollToEnd(root?: HTMLElement | null) {
+  const el = root ?? document.documentElement
+  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)
+  const top = () => (root ? root.scrollTop : window.scrollY)
+  const scroll = (behavior: ScrollBehavior) =>
+    (root ?? window).scrollTo({ top: max(), behavior })
+  scroll("smooth")
   const started = performance.now()
-  while (performance.now() - started < 2000) {
-    const top = window.scrollY || document.documentElement.scrollTop
-    if (top >= max - 2) break
+  while (performance.now() - started < 2000 && top() < max() - 2) {
     await new Promise<void>((r) => window.setTimeout(r, 32))
   }
-  window.scrollTo({ top: max })
+  scroll("instant")
 }
 
 /** Scroll to the end, then play the stretch on matching footers. */
@@ -66,55 +108,473 @@ export async function playStretchyFooterDemo(
   detail: StretchyFooterPlayDetail = {}
 ) {
   if (typeof window === "undefined") return
-
   await scrollToEnd(detail.scrollRoot)
-
   window.dispatchEvent(
-    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, {
-      detail,
-    })
+    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })
+  )
+  // Travel out, hold, spring home.
+  await new Promise<void>((r) =>
+    window.setTimeout(r, (detail.holdMs ?? 700) + 900)
   )
-
-  const hold = detail.holdMs ?? 700
-  // Travel out + hold + spring home
-  await new Promise<void>((r) => window.setTimeout(r, hold + 900))
 }
 
+/** Bell curve across the columns: tall in the middle, short at the edges. */
 export function columnScale(index: number, count: number): number {
   if (count <= 1) return 1
   const t = (index / (count - 1)) * 2 - 1
   return Math.exp(-t * t * 2.2)
 }
 
-/** Stable rgba() for SSR — avoids hex/rgb serialization mismatches. */
-export function hexToRgba(hex: string, alpha: number): string {
-  const raw = hex.replace("#", "")
-  const full =
-    raw.length === 3
-      ? raw
-          .split("")
-          .map((c) => c + c)
-          .join("")
-      : raw.slice(0, 6)
-  const r = Number.parseInt(full.slice(0, 2), 16)
-  const g = Number.parseInt(full.slice(2, 4), 16)
-  const b = Number.parseInt(full.slice(4, 6), 16)
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+/** Overscroll distance → stretch. Linear at first, never past `max`. */
+export function rubberBand(distance: number, max: number): number {
+  if (max <= 0 || distance <= 0) return 0
+  return max * (1 - 1 / ((distance * RUBBER) / max + 1))
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function numberOr(value: unknown, fallback: number, min: number, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+  return clamp(value, min, max)
+}
+
+/** Wheel delta in px, whatever unit the device reports in. */
+function wheelPixels(event: WheelEvent) {
+  if (event.deltaMode === 1) return event.deltaY * 16
+  if (event.deltaMode === 2) return event.deltaY * window.innerHeight
+  return event.deltaY
+}
+
+/**
+ * True when something between `target` and the scroller can still scroll
+ * in that direction — a code block or a menu gets the wheel, not us.
+ */
+function nestedCanScroll(
+  target: EventTarget | null,
+  root: Element,
+  dy: number
+) {
+  let el = target instanceof Element ? target : null
+  while (el && el !== root && el !== document.documentElement) {
+    if (el.scrollHeight > el.clientHeight + 1) {
+      const overflow = getComputedStyle(el).overflowY
+      if (overflow === "auto" || overflow === "scroll") {
+        const room =
+          dy > 0
+            ? el.scrollHeight - el.clientHeight - el.scrollTop
+            : el.scrollTop
+        if (room > 1) return true
+      }
+    }
+    el = el.parentElement
+  }
+  return false
 }
 
-export function applyResistance(current: number, delta: number, max: number): number {
-  if (max <= 0) return 0
-  const t = Math.min(1, Math.max(0, current / max))
-  const falloff = (1 - t) * (1 - t * 0.35)
-  const pop = current < 40 ? POP_BOOST : 1
-  return Math.min(max, Math.max(0, current + delta * PULL_GAIN * falloff * pop))
+/** A vertical strip of `color`: solid at the floor, fading out at the top. */
+function makeStrip(color: string) {
+  const strip = document.createElement("canvas")
+  strip.width = 1
+  strip.height = 64
+  const g = strip.getContext("2d")
+  if (!g) return strip
+  g.fillStyle = color
+  g.fillRect(0, 0, 1, 64)
+  const fade = g.createLinearGradient(0, 0, 0, 64)
+  fade.addColorStop(0, "rgba(0,0,0,0)")
+  fade.addColorStop(0.55, "rgba(0,0,0,0.6)")
+  fade.addColorStop(1, "rgba(0,0,0,1)")
+  g.globalCompositeOperation = "destination-in"
+  g.fillStyle = fade
+  g.fillRect(0, 0, 1, 64)
+  return strip
 }
 
-export function elementAtBottom(el: HTMLElement, slack = 1): boolean {
-  return el.scrollTop + el.clientHeight >= el.scrollHeight - slack
+/** Half a white radial glow, flat side down, for the floor bloom. */
+function makeBloom() {
+  const bloom = document.createElement("canvas")
+  bloom.width = 128
+  bloom.height = 64
+  const g = bloom.getContext("2d")
+  if (!g) return bloom
+  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)
+  grad.addColorStop(0, "rgba(255,255,255,1)")
+  grad.addColorStop(1, "rgba(255,255,255,0)")
+  g.fillStyle = grad
+  g.fillRect(0, 0, 128, 64)
+  return bloom
 }
 
-export function windowAtBottom(slack = 1): boolean {
-  const doc = document.documentElement
-  return window.scrollY + window.innerHeight >= doc.scrollHeight - slack
+type Spring = { x: number; v: number; target: number }
+
+function stepSpring(s: Spring, k: number, c: number, dt: number) {
+  const accel = (-k * (s.x - s.target) - c * s.v) / MASS
+  s.v += accel * dt
+  s.x += s.v * dt
+}
+
+const atRest = (s: Spring) =>
+  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST
+
+/**
+ * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the
+ * content lifts on a spring while an aurora of blurred columns stretches up
+ * from the floor; each column has its own spring, so the edge wobbles as it
+ * snaps back. Idle unless stretched.
+ */
+export function createStretchyFooter(
+  mount: StretchyFooterMount,
+  initial: StretchyFooterOptions = {}
+): StretchyFooterInstance | null {
+  const { canvas, scroller } = mount
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return null
+
+  let options: StretchyFooterOptions = { ...initial }
+  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)
+  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)
+  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)
+  const stiffnessOf = () =>
+    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)
+  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)
+  const countOf = () =>
+    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 8, 96))
+
+  /** Overscroll the user has put in, in px. The stretch is its rubber band. */
+  let distance = 0
+  /** `play()` holds the stretch here, overriding the gesture. */
+  let forced: number | null = null
+  const lift: Spring = { x: 0, v: 0, target: 0 }
+  let columns: (Spring & { share: number })[] = []
+  let strips: HTMLCanvasElement[] = []
+  const bloom = makeBloom()
+
+  const rebuildColumns = () => {
+    const count = countOf()
+    const target = lift.target
+    columns = Array.from({ length: count }, (_, i) => {
+      const share = Math.max(MIN_COLUMN, columnScale(i, count))
+      return { x: lift.x * share, v: 0, target: target * share, share }
+    })
+  }
+  const rebuildStrips = () => {
+    const colors = options.colors?.length ? options.colors : DEFAULT_COLORS
+    strips = colors.map(makeStrip)
+  }
+
+  const size = { w: 0, pad: 0, scale: 1 }
+  const layout = () => {
+    const parent = canvas.parentElement
+    const blur = blurOf()
+    const max = maxOf()
+    // Room past the edges, so the blur doesn't fade the sides and floor.
+    const pad = Math.ceil(blur * 2)
+    // Blurred anyway — half resolution is plenty and half the fill.
+    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)
+    size.w = (parent?.clientWidth ?? 0) + pad * 2
+    size.pad = pad
+    size.scale = scale
+    canvas.width = Math.max(1, Math.ceil(size.w * scale))
+    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))
+    Object.assign(canvas.style, {
+      position: "absolute",
+      left: `${-pad}px`,
+      bottom: `${-pad}px`,
+      width: `${size.w}px`,
+      height: `${max + pad}px`,
+      filter: blur > 0 ? `blur(${blur}px)` : "",
+      pointerEvents: "none",
+    })
+    draw()
+  }
+
+  // The page element that rides the stretch.
+  let lifted: HTMLElement | null = null
+  let liftedTransform = ""
+  const contentEl = () => {
+    const content = mount.content
+    if (!content) return null
+    if (typeof content !== "string") return content
+    if (lifted?.isConnected && lifted.matches(content)) return lifted
+    const scope = scroller instanceof HTMLElement ? scroller : document
+    return (
+      scope.querySelector<HTMLElement>(content) ??
+      document.querySelector<HTMLElement>(content)
+    )
+  }
+  const liftContent = (y: number) => {
+    const el = contentEl()
+    if (el !== lifted) {
+      if (lifted) lifted.style.transform = liftedTransform
+      lifted = el
+      liftedTransform = el?.style.transform ?? ""
+    }
+    if (!lifted) return
+    if (y > 0.2) {
+      lifted.style.transform = `translate3d(0, ${-y}px, 0)`
+      lifted.style.willChange = "transform"
+    } else {
+      lifted.style.transform = liftedTransform
+      lifted.style.willChange = ""
+    }
+  }
+
+  function draw() {
+    const stretch = Math.max(0, lift.x)
+    liftContent(stretch)
+    const max = maxOf()
+    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)
+    canvas.style.visibility = visible ? "visible" : "hidden"
+    if (!visible) return
+
+    const { w, pad, scale } = size
+    const floor = max * scale
+    const bottom = canvas.height
+    ctx!.setTransform(1, 0, 0, 1, 0, 0)
+    ctx!.clearRect(0, 0, canvas.width, canvas.height)
+    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)
+
+    // Columns span the visible width; the outer two run on into the pad.
+    const count = columns.length
+    const inner = (w - pad * 2) * scale
+    const edge = (i: number) =>
+      i <= 0
+        ? 0
+        : i >= count
+          ? canvas.width
+          : Math.round(pad * scale + (inner * i) / count)
+    for (let i = 0; i < count; i++) {
+      const h = Math.max(0, columns[i]!.x) * scale
+      if (h < 0.5) continue
+      const x0 = edge(i)
+      const x1 = edge(i + 1)
+      const strip = strips[i % strips.length]!
+      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)
+      ctx!.drawImage(strip, 0, 63, 1, 1, x0, floor, x1 - x0, bottom - floor)
+    }
+
+    const glow = glowOf()
+    if (glow > 0) {
+      const rx = inner * 0.49
+      const ry = stretch * 0.35 * scale
+      ctx!.globalAlpha *= glow
+      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)
+    }
+    ctx!.globalAlpha = 1
+  }
+
+  let raf = 0
+  let last = 0
+  const retarget = () => {
+    const max = maxOf()
+    const target = forced ?? rubberBand(distance, max)
+    lift.target = target
+    for (const column of columns) column.target = target * column.share
+    if (!raf) {
+      last = performance.now()
+      raf = requestAnimationFrame(frame)
+    }
+  }
+
+  function frame(now: number) {
+    raf = 0
+    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
+    last = now
+    const k = stiffnessOf()
+    const c = dampingOf()
+    const steps = Math.max(1, Math.ceil(dt / STEP))
+    for (let n = 0; n < steps; n++) {
+      stepSpring(lift, k, c, dt / steps)
+      for (const column of columns) {
+        // Short edge columns are softer and bouncier than the middle, so the
+        // top edge ripples out from the centre.
+        const ck = k * (0.6 + 0.4 * column.share)
+        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)
+      }
+    }
+    const settled = atRest(lift) && columns.every(atRest)
+    if (settled) {
+      lift.x = lift.target
+      lift.v = 0
+      for (const column of columns) {
+        column.x = column.target
+        column.v = 0
+      }
+    }
+    draw()
+    if (!settled) raf = requestAnimationFrame(frame)
+  }
+
+  // Gestures.
+  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
+  let reduce = mqReduce.matches
+  let releaseTimer = 0
+  let holdTimer = 0
+  let lastWheel = 0
+  let lastDelta = 0
+  let coasting = 0
+  let cooling = false
+  let lastTouchY = 0
+
+  const root =
+    scroller instanceof HTMLElement ? scroller : document.documentElement
+  const atBottom = () =>
+    root.scrollTop + root.clientHeight >= root.scrollHeight - 2
+
+  const release = () => {
+    window.clearTimeout(releaseTimer)
+    releaseTimer = 0
+    if (distance <= 0) return
+    distance = 0
+    cooling = true
+    retarget()
+  }
+  const stopPlay = () => {
+    if (forced === null) return
+    window.clearTimeout(holdTimer)
+    forced = null
+    retarget()
+  }
+
+  const onWheel = (event: WheelEvent) => {
+    if (reduce || event.ctrlKey) return
+    const dy = wheelPixels(event)
+    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return
+    stopPlay()
+    const now = performance.now()
+    const gap = now - lastWheel
+    lastWheel = now
+
+    if (distance > 0) {
+      event.preventDefault()
+      // A trackpad coasting out: deltas shrink every event. Treat it as
+      // letting go instead of holding the stretch until momentum ends.
+      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0
+      lastDelta = dy
+      if (coasting >= COAST_EVENTS) {
+        release()
+        return
+      }
+      distance = Math.max(0, distance + dy)
+      retarget()
+      window.clearTimeout(releaseTimer)
+      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)
+      return
+    }
+
+    // Momentum still arriving after a release shouldn't pull again.
+    if (cooling) {
+      if (gap < MOMENTUM_GAP_MS) return
+      cooling = false
+    }
+    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {
+      event.preventDefault()
+      distance = dy
+      lastDelta = dy
+      coasting = 0
+      retarget()
+      releaseTimer = window.setTimeout(release, RELEASE_MS)
+    }
+  }
+
+  const onTouchStart = (event: TouchEvent) => {
+    const touch = event.touches[0]
+    if (!touch) return
+    stopPlay()
+    cooling = false
+    lastTouchY = touch.clientY
+  }
+  const onTouchMove = (event: TouchEvent) => {
+    const touch = event.touches[0]
+    if (!touch || reduce) return
+    const dy = lastTouchY - touch.clientY
+    lastTouchY = touch.clientY
+    if (
+      distance > 0 ||
+      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))
+    ) {
+      if (event.cancelable) event.preventDefault()
+      distance = Math.max(0, distance + dy)
+      retarget()
+    }
+  }
+  const onTouchEnd = () => release()
+
+  const onPlayEvent = (event: Event) => {
+    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}
+    // Scoped footers only answer their own demo; unscoped ones, broadcasts.
+    if ((detail.target ?? null) !== (options.demoId ?? null)) return
+    instance.play(detail)
+  }
+
+  const onReduce = () => {
+    reduce = mqReduce.matches
+    if (reduce) release()
+  }
+
+  const target: HTMLElement | Window = scroller
+  const prevOverscroll = root.style.overscrollBehaviorY
+  // The browser's own rubber band would fight ours.
+  root.style.overscrollBehaviorY = "none"
+  target.addEventListener("wheel", onWheel as EventListener, { passive: false })
+  target.addEventListener("touchstart", onTouchStart as EventListener, {
+    passive: true,
+  })
+  target.addEventListener("touchmove", onTouchMove as EventListener, {
+    passive: false,
+  })
+  target.addEventListener("touchend", onTouchEnd)
+  target.addEventListener("touchcancel", onTouchEnd)
+  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)
+  mqReduce.addEventListener("change", onReduce)
+  const ro = new ResizeObserver(layout)
+  if (canvas.parentElement) ro.observe(canvas.parentElement)
+
+  rebuildStrips()
+  rebuildColumns()
+  layout()
+
+  const instance: StretchyFooterInstance = {
+    setOptions(next) {
+      const prevColors = options.colors
+      const prevMax = maxOf()
+      const prevBlur = blurOf()
+      options = { ...options, ...next }
+      if (options.colors !== prevColors) rebuildStrips()
+      if (countOf() !== columns.length) rebuildColumns()
+      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()
+      if (forced !== null) forced = Math.min(forced, maxOf())
+      retarget()
+    },
+    play({ amount = 0.82, holdMs = 700 } = {}) {
+      window.clearTimeout(releaseTimer)
+      window.clearTimeout(holdTimer)
+      distance = 0
+      forced = maxOf() * clamp(amount, 0, 1)
+      retarget()
+      holdTimer = window.setTimeout(stopPlay, holdMs)
+    },
+    destroy() {
+      cancelAnimationFrame(raf)
+      raf = 0
+      window.clearTimeout(releaseTimer)
+      window.clearTimeout(holdTimer)
+      root.style.overscrollBehaviorY = prevOverscroll
+      target.removeEventListener("wheel", onWheel as EventListener)
+      target.removeEventListener("touchstart", onTouchStart as EventListener)
+      target.removeEventListener("touchmove", onTouchMove as EventListener)
+      target.removeEventListener("touchend", onTouchEnd)
+      target.removeEventListener("touchcancel", onTouchEnd)
+      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)
+      mqReduce.removeEventListener("change", onReduce)
+      ro.disconnect()
+      if (lifted) {
+        lifted.style.transform = liftedTransform
+        lifted.style.willChange = ""
+      }
+    },
+  }
+  return instance
 }
diff --git a/registry/stretchy-footer/stretchy-footer.svelte b/registry/stretchy-footer/stretchy-footer.svelte
index 64336d2..91f7b58 100644
--- a/registry/stretchy-footer/stretchy-footer.svelte
+++ b/registry/stretchy-footer/stretchy-footer.svelte
@@ -2,30 +2,25 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from "svelte"
+  import { onMount, untrack } from "svelte"
   import {
-    applyResistance,
-    columnScale,
+    createStretchyFooter,
     DEFAULT_BLUR,
     DEFAULT_COLORS,
     DEFAULT_COLUMNS,
+    DEFAULT_DAMPING,
     DEFAULT_GLOW,
-    elementAtBottom,
-    hexToRgba,
-    POP_BOOST,
-    PULL_GAIN,
-    STRETCHY_FOOTER_PLAY,
-    WHEEL_IDLE_MS,
-    windowAtBottom,
-    type StretchyFooterPlayDetail,
+    DEFAULT_MAX_STRETCH,
+    DEFAULT_STIFFNESS,
+    type StretchyFooterInstance,
+    type StretchyFooterOptions,
   } from "./stretchy-footer-vanilla"
-  import { createSpring, type Spring } from "./stretchy-footer-spring-vanilla"
 
   function cn(...parts: Array<string | false | null | undefined>) {
     return parts.filter(Boolean).join(" ")
   }
 
-  interface Props {
+  interface Props extends StretchyFooterOptions {
     class?: string
     /**
      * Page content inside the overflow scroller.
@@ -34,13 +29,13 @@
     children?: import("svelte").Snippet
     /**
      * External scroll container. When set, this component only paints the
-     * aurora overlay and binds overscroll listeners to that element.
+     * aurora overlay and binds overscroll to that element.
      * When omitted (and `windowScroll` is false), this component *is* the scroller.
      */
     scrollEl?: HTMLElement
     /**
      * Bind overscroll to the window and paint a fixed bottom aurora.
-     * Use on full pages (e.g. the component docs) instead of a nested scroller.
+     * Use on full pages instead of a nested scroller.
      */
     windowScroll?: boolean
     /**
@@ -48,27 +43,8 @@
      * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.
      */
     contentSelector?: string
-    /** Peak stretch in px. Default `280`. */
-    maxStretch?: number
-    /** Spectrum stops across the aurora columns. */
-    colors?: string[]
-    /** Spring stiffness. Default `380`. */
-    stiffness?: number
-    /** Spring damping. Default `32`. */
-    damping?: number
-    /** How many vertical aurora bars. Default `48`. */
-    columns?: number
-    /** Gaussian blur on the aurora bars, in px. Default `14`. */
-    blur?: number
-    /** White floor bloom opacity (0–1). Default `0.22`. */
-    glow?: number
-    /** Accessible label for the decorative field. */
+    /** Accessible label for the scroll region. */
     label?: string
-    /**
-     * Optional id for docs demos. `playStretchyFooterDemo({ target })` only
-     * animates footers whose `demoId` matches.
-     */
-    demoId?: string
   }
 
   let {
@@ -77,10 +53,10 @@
     scrollEl,
     windowScroll = false,
     contentSelector = "[data-stretchy-page]",
-    maxStretch = 280,
+    maxStretch = DEFAULT_MAX_STRETCH,
     colors = DEFAULT_COLORS,
-    stiffness = 380,
-    damping = 32,
+    stiffness = DEFAULT_STIFFNESS,
+    damping = DEFAULT_DAMPING,
     columns = DEFAULT_COLUMNS,
     blur = DEFAULT_BLUR,
     glow = DEFAULT_GLOW,
@@ -89,89 +65,53 @@
   }: Props = $props()
 
   let mounted = $state(false)
-  let reduceMotion = $state(false)
-  let demoPlaying = $state(false)
-  let progress = $state(0)
-  let fieldOpacity = $state(0)
-  let pageY = $state(0)
-  let internalEl: HTMLDivElement | undefined = $state()
-
-  let pull = 0
-  let demoPlayingRef = false
-  let spring: Spring | null = null
-  let rolledEl: HTMLElement | null = null
-  let touchStartY = 0
-  let touchStretch0 = 0
-  let wheelTimer: ReturnType<typeof setTimeout> | null = null
-  let demoTimer: ReturnType<typeof setTimeout> | null = null
-
-  const reduce = $derived(mounted && reduceMotion && !demoPlaying)
-  const blurPx = $derived(Math.max(0, blur))
-  const glowAlpha = $derived(Math.min(1, Math.max(0, glow)))
-
-  const bars = $derived.by(() => {
-    const count = Math.max(8, Math.min(96, Math.floor(columns)))
-    return Array.from({ length: count }, (_, i) => {
-      const color = colors[i % colors.length]!
-      const heightPct = Math.max(28, columnScale(i, count) * 100).toFixed(2)
-      return {
-        key: i,
-        height: `${heightPct}%`,
-        backgroundImage: `linear-gradient(to top, ${hexToRgba(color, 1)} 0%, ${hexToRgba(color, 0.6)} 45%, rgba(0, 0, 0, 0) 100%)`,
-      }
-    })
-  })
-
-  function applyVisuals(v: number) {
-    const p =
-      maxStretch <= 0 ? 0 : Math.min(1, Math.max(0, v / maxStretch))
-    progress = p
-    pageY = -v
-    fieldOpacity = p <= 0 ? 0 : p >= 0.08 ? 1 : p / 0.08
-
-    if (reduceMotion && !demoPlayingRef) return
-    if (!windowScroll && !scrollEl) return
-
-    if (!rolledEl?.isConnected) {
-      rolledEl = document.querySelector(contentSelector)
-    }
-    const el = rolledEl
-    if (!el) return
-
-    const y = -Math.max(0, v)
-    el.style.transformOrigin = "50% 100%"
-    el.style.willChange = "transform"
-    el.style.transform = `translate3d(0, ${y}px, 0)`
-
-    if (v < 0.2) {
-      el.style.transform = "translate3d(0, 0, 0)"
-      el.style.willChange = ""
-    }
-  }
-
-  function pullTo(next: number) {
-    pull = next
-    spring?.set(next)
-  }
+  let canvas: HTMLCanvasElement | undefined = $state()
+  let scroller: HTMLDivElement | undefined = $state()
+  let content: HTMLDivElement | undefined = $state()
+  let instance: StretchyFooterInstance | null = null
 
   onMount(() => {
     mounted = true
-    const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
-    const applyReduce = () => {
-      reduceMotion = mq.matches
-    }
-    applyReduce()
-    mq.addEventListener("change", applyReduce)
+  })
+
+  // Remount only when the wiring changes; options stream in below.
+  $effect(() => {
+    const target = windowScroll ? window : (scrollEl ?? scroller)
+    if (!canvas || !target) return
+    const lifted = windowScroll || scrollEl ? contentSelector : content
+    const next = createStretchyFooter(
+      { canvas, scroller: target, content: lifted },
+      untrack(() => ({
+        maxStretch,
+        colors,
+        stiffness,
+        damping,
+        columns,
+        blur,
+        glow,
+        demoId,
+      }))
+    )
+    instance = next
     return () => {
-      mq.removeEventListener("change", applyReduce)
-      if (rolledEl) {
-        rolledEl.style.transform = ""
-        rolledEl.style.transformOrigin = ""
-        rolledEl.style.willChange = ""
-      }
+      next?.destroy()
+      if (instance === next) instance = null
     }
   })
 
+  $effect(() => {
+    instance?.setOptions({
+      maxStretch,
+      colors,
+      stiffness,
+      damping,
+      columns,
+      blur,
+      glow,
+      demoId,
+    })
+  })
+
   function portalToBody(node: HTMLElement) {
     document.body.appendChild(node)
     return {
@@ -180,214 +120,6 @@
       },
     }
   }
-
-  $effect(() => {
-    const s = createSpring({
-      stiffness,
-      damping,
-      mass: 0.35,
-      initial: pull,
-    })
-    spring = s
-    const unsub = s.onChange((v) => {
-      applyVisuals(v)
-    })
-    return () => {
-      unsub()
-      s.destroy()
-      if (spring === s) spring = null
-    }
-  })
-
-  $effect(() => {
-    const clearDemoTimer = () => {
-      if (demoTimer) {
-        clearTimeout(demoTimer)
-        demoTimer = null
-      }
-    }
-
-    const onPlay = (event: Event) => {
-      const detail =
-        (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}
-      if (detail.target != null && detail.target !== demoId) return
-      if (detail.target == null && demoId != null) return
-
-      const amount = detail.amount ?? 0.82
-      const holdMs = detail.holdMs ?? 700
-
-      if (wheelTimer) {
-        clearTimeout(wheelTimer)
-        wheelTimer = null
-      }
-      clearDemoTimer()
-      demoPlayingRef = true
-      demoPlaying = true
-      pullTo(Math.min(maxStretch, Math.max(0, maxStretch * amount)))
-      demoTimer = setTimeout(() => {
-        demoTimer = null
-        pullTo(0)
-        window.setTimeout(() => {
-          demoPlayingRef = false
-          demoPlaying = false
-        }, 500)
-      }, holdMs)
-    }
-
-    window.addEventListener(STRETCHY_FOOTER_PLAY, onPlay)
-    return () => {
-      clearDemoTimer()
-      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlay)
-    }
-  })
-
-  $effect(() => {
-    if (reduceMotion) return
-
-    let target: { kind: "window" } | { kind: "element"; el: HTMLElement } | null =
-      null
-    if (windowScroll) {
-      target = { kind: "window" }
-    } else {
-      const el = scrollEl ?? internalEl
-      if (el) target = { kind: "element", el }
-    }
-    if (!target) return
-
-    const prevOverscroll =
-      target.kind === "window"
-        ? document.documentElement.style.overscrollBehaviorY
-        : target.el.style.overscrollBehaviorY
-    if (target.kind === "window") {
-      document.documentElement.style.overscrollBehaviorY = "none"
-    } else {
-      target.el.style.overscrollBehaviorY = "none"
-    }
-
-    const isAtBottom = () =>
-      target.kind === "window" ? windowAtBottom() : elementAtBottom(target.el)
-
-    const clearWheelTimer = () => {
-      if (wheelTimer) {
-        clearTimeout(wheelTimer)
-        wheelTimer = null
-      }
-    }
-
-    const snapBack = () => {
-      clearWheelTimer()
-      pullTo(0)
-    }
-
-    const onWheel = (event: WheelEvent) => {
-      if (demoTimer) {
-        clearTimeout(demoTimer)
-        demoTimer = null
-        demoPlaying = false
-        demoPlayingRef = false
-      }
-      const current = pull
-      const scrollingDown = event.deltaY > 0
-      const scrollingUp = event.deltaY < 0
-      const stretchNow = spring?.get() ?? 0
-
-      if (current > 0.5 || stretchNow > 0.5) {
-        event.preventDefault()
-        if (scrollingUp) {
-          const next = Math.max(0, current + event.deltaY * PULL_GAIN)
-          if (next <= 0.5) {
-            snapBack()
-            return
-          }
-          pullTo(next)
-        } else if (scrollingDown) {
-          pullTo(applyResistance(current, event.deltaY, maxStretch))
-        }
-        clearWheelTimer()
-        wheelTimer = setTimeout(snapBack, WHEEL_IDLE_MS)
-        return
-      }
-
-      if (scrollingDown && isAtBottom()) {
-        event.preventDefault()
-        pullTo(applyResistance(0, event.deltaY, maxStretch))
-        clearWheelTimer()
-        wheelTimer = setTimeout(snapBack, WHEEL_IDLE_MS)
-      }
-    }
-
-    const onTouchStart = (event: TouchEvent) => {
-      const t = event.touches[0]
-      if (!t) return
-      if (demoTimer) {
-        clearTimeout(demoTimer)
-        demoTimer = null
-        demoPlaying = false
-        demoPlayingRef = false
-      }
-      touchStartY = t.clientY
-      touchStretch0 = pull
-    }
-
-    const onTouchMove = (event: TouchEvent) => {
-      const t = event.touches[0]
-      if (!t) return
-      const dy = touchStartY - t.clientY
-      const current = pull
-      const stretchNow = spring?.get() ?? 0
-
-      if (current > 0.5 || stretchNow > 0.5 || (dy > 0 && isAtBottom())) {
-        if (event.cancelable) event.preventDefault()
-        const boost = current < 40 ? POP_BOOST : 1
-        const fromRest = touchStretch0 + dy * PULL_GAIN * boost
-        pullTo(Math.min(maxStretch, Math.max(0, fromRest)))
-      }
-    }
-
-    const onTouchEnd = () => {
-      const stretchNow = spring?.get() ?? 0
-      if (pull > 0.5 || stretchNow > 0.5) snapBack()
-    }
-
-    const optsWheel = { passive: false }
-    const optsTouchStart = { passive: true }
-    const optsTouchMove = { passive: false }
-
-    if (target.kind === "window") {
-      window.addEventListener("wheel", onWheel, optsWheel)
-      window.addEventListener("touchstart", onTouchStart, optsTouchStart)
-      window.addEventListener("touchmove", onTouchMove, optsTouchMove)
-      window.addEventListener("touchend", onTouchEnd)
-      window.addEventListener("touchcancel", onTouchEnd)
-    } else {
-      const el = target.el
-      el.addEventListener("wheel", onWheel, optsWheel)
-      el.addEventListener("touchstart", onTouchStart, optsTouchStart)
-      el.addEventListener("touchmove", onTouchMove, optsTouchMove)
-      el.addEventListener("touchend", onTouchEnd)
-      el.addEventListener("touchcancel", onTouchEnd)
-    }
-
-    return () => {
-      clearWheelTimer()
-      if (target.kind === "window") {
-        document.documentElement.style.overscrollBehaviorY = prevOverscroll
-        window.removeEventListener("wheel", onWheel)
-        window.removeEventListener("touchstart", onTouchStart)
-        window.removeEventListener("touchmove", onTouchMove)
-        window.removeEventListener("touchend", onTouchEnd)
-        window.removeEventListener("touchcancel", onTouchEnd)
-      } else {
-        target.el.style.overscrollBehaviorY = prevOverscroll
-        const el = target.el
-        el.removeEventListener("wheel", onWheel)
-        el.removeEventListener("touchstart", onTouchStart)
-        el.removeEventListener("touchmove", onTouchMove)
-        el.removeEventListener("touchend", onTouchEnd)
-        el.removeEventListener("touchcancel", onTouchEnd)
-      }
-    }
-  })
 </script>
 
 {#snippet aurora()}
@@ -396,42 +128,18 @@
     class="pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden"
     style="height: {maxStretch}px;"
   >
-    <div
-      class="absolute inset-x-0 bottom-0 h-full w-full origin-bottom will-change-transform"
-      style="transform: scaleY({reduce ? 0 : progress}); opacity: {reduce
-        ? 0
-        : fieldOpacity};"
-    >
-      <div
-        class="absolute inset-0 flex items-end justify-stretch"
-        style="filter: blur({blurPx}px); transform: scaleY(1.08);"
-      >
-        {#each bars as bar (bar.key)}
-          <div
-            class="min-w-0 flex-1"
-            style="height: {bar.height}; background-image: {bar.backgroundImage};"
-          ></div>
-        {/each}
-      </div>
-
-      <div
-        class="absolute inset-x-0 bottom-0 h-1/2"
-        style="background-image: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,255,255,{glowAlpha}), rgba(0, 0, 0, 0) 70%);"
-      ></div>
-    </div>
+    <canvas bind:this={canvas} class="invisible absolute"></canvas>
   </div>
 {/snippet}
 
 {#if windowScroll}
   {#if mounted}
+    <!-- Portal so `fixed` stays on the viewport — the lifted page is
+         transformed and would otherwise pin it to the content. -->
     <div
       use:portalToBody
       data-slot="stretchy-footer"
-      aria-label={label}
-      class={cn(
-        "pointer-events-none fixed inset-x-0 bottom-0 z-50",
-        className
-      )}
+      class={cn("pointer-events-none fixed inset-x-0 bottom-0 z-50", className)}
       style="height: {maxStretch}px;"
     >
       {@render aurora()}
@@ -440,27 +148,27 @@
 {:else if scrollEl}
   <div
     data-slot="stretchy-footer"
-    aria-label={label}
     class={cn("pointer-events-none absolute inset-x-0 bottom-0", className)}
     style="height: {maxStretch}px;"
   >
     {@render aurora()}
   </div>
 {:else}
+  <!-- The aurora sits beside the scroller, not in it, so it stays on the
+       viewport floor instead of scrolling away with the content. -->
   <div
-    bind:this={internalEl}
     data-slot="stretchy-footer"
-    aria-label={label}
-    class={cn(
-      "relative isolate overflow-y-auto overflow-x-hidden overscroll-none",
-      className
-    )}
+    class={cn("relative isolate overflow-hidden", className)}
   >
     <div
-      class="relative z-10 min-h-full will-change-transform"
-      style="transform: translateY({pageY}px);"
+      bind:this={scroller}
+      role="region"
+      aria-label={label}
+      class="h-full overflow-x-hidden overflow-y-auto"
     >
-      {@render children?.()}
+      <div bind:this={content} class="relative z-10 min-h-full">
+        {@render children?.()}
+      </div>
     </div>
     {@render aurora()}
   </div>
diff --git a/registry/stretchy-footer/stretchy-footer.tsx b/registry/stretchy-footer/stretchy-footer.tsx
index 49fc4a2..08db1c5 100644
--- a/registry/stretchy-footer/stretchy-footer.tsx
+++ b/registry/stretchy-footer/stretchy-footer.tsx
@@ -2,48 +2,46 @@
 
 import {
   useEffect,
-  useMemo,
   useRef,
-  useState,
+  useSyncExternalStore,
   type ReactNode,
   type RefObject,
 } from "react"
 import { createPortal } from "react-dom"
-import {
-  motion,
-  useMotionValue,
-  useMotionValueEvent,
-  useReducedMotion,
-  useSpring,
-  useTransform,
-} from "motion/react"
 
 import { cn } from "@/lib/utils"
 
 import {
-  applyResistance,
-  columnScale,
+  createStretchyFooter,
   DEFAULT_BLUR,
   DEFAULT_COLORS,
   DEFAULT_COLUMNS,
+  DEFAULT_DAMPING,
   DEFAULT_GLOW,
-  elementAtBottom,
-  hexToRgba,
-  POP_BOOST,
-  PULL_GAIN,
-  STRETCHY_FOOTER_PLAY,
-  WHEEL_IDLE_MS,
-  windowAtBottom,
-  type StretchyFooterPlayDetail,
+  DEFAULT_MAX_STRETCH,
+  DEFAULT_STIFFNESS,
+  type StretchyFooterInstance,
+  type StretchyFooterOptions,
 } from "./stretchy-footer-vanilla"
 
 export {
+  DEFAULT_BLUR,
+  DEFAULT_COLORS,
+  DEFAULT_COLUMNS,
+  DEFAULT_DAMPING,
+  DEFAULT_GLOW,
+  DEFAULT_MAX_STRETCH,
+  DEFAULT_STIFFNESS,
   playStretchyFooterDemo,
   STRETCHY_FOOTER_PLAY,
 } from "./stretchy-footer-vanilla"
-export type { StretchyFooterPlayDetail } from "./stretchy-footer-vanilla"
+export type {
+  StretchyFooterInstance,
+  StretchyFooterOptions,
+  StretchyFooterPlayDetail,
+} from "./stretchy-footer-vanilla"
 
-export type StretchyFooterProps = {
+export type StretchyFooterProps = StretchyFooterOptions & {
   className?: string
   /**
    * Page content inside the overflow scroller.
@@ -52,13 +50,13 @@ export type StretchyFooterProps = {
   children?: ReactNode
   /**
    * External scroll container. When set, this component only paints the
-   * aurora overlay and binds overscroll listeners to that element.
+   * aurora overlay and binds overscroll to that element.
    * When omitted (and `windowScroll` is false), this component *is* the scroller.
    */
   scrollRef?: RefObject<HTMLElement | null>
   /**
    * Bind overscroll to the window and paint a fixed bottom aurora.
-   * Use on full pages (e.g. the component docs) instead of a nested scroller.
+   * Use on full pages instead of a nested scroller.
    */
   windowScroll?: boolean
   /**
@@ -66,37 +64,16 @@ export type StretchyFooterProps = {
    * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.
    */
   contentSelector?: string
-  /** Peak stretch in px. Default `280`. */
-  maxStretch?: number
-  /** Spectrum stops across the aurora columns. */
-  colors?: string[]
-  /** Spring stiffness. Default `380`. */
-  stiffness?: number
-  /** Spring damping. Default `32`. */
-  damping?: number
-  /** How many vertical aurora bars. Default `48`. */
-  columns?: number
-  /** Gaussian blur on the aurora bars, in px. Default `14`. */
-  blur?: number
-  /** White floor bloom opacity (0–1). Default `0.22`. */
-  glow?: number
-  /** Accessible label for the decorative field. */
+  /** Accessible label for the scroll region. */
   label?: string
-  /**
-   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only
-   * animates footers whose `demoId` matches.
-   */
-  demoId?: string
 }
 
-type OverscrollTarget =
-  | { kind: "element"; el: HTMLElement }
-  | { kind: "window" }
+const noopSubscribe = () => () => {}
 
 /**
  * Dia-style stretchy overflow — overscroll past the bottom and a rainbow
- * field scaleY-stretches from the floor while the page lifts with it.
- * GPU transforms only (no height animation) for a clean, snappy rubber band.
+ * aurora stretches up from the floor while the page lifts with it, then
+ * springs back with a wobble. Honors `prefers-reduced-motion`.
  */
 export function StretchyFooter({
   className,
@@ -104,291 +81,60 @@ export function StretchyFooter({
   scrollRef,
   windowScroll = false,
   contentSelector = "[data-stretchy-page]",
-  maxStretch = 280,
+  maxStretch = DEFAULT_MAX_STRETCH,
   colors = DEFAULT_COLORS,
-  stiffness = 380,
-  damping = 32,
+  stiffness = DEFAULT_STIFFNESS,
+  damping = DEFAULT_DAMPING,
   columns = DEFAULT_COLUMNS,
   blur = DEFAULT_BLUR,
   glow = DEFAULT_GLOW,
   label = "Stretchy overflow",
   demoId,
 }: StretchyFooterProps) {
-  const reduceMotion = useReducedMotion() ?? false
-  const internalRef = useRef<HTMLDivElement>(null)
-  const pull = useMotionValue(0)
-  const stretch = useSpring(pull, {
-    stiffness,
-    damping,
-    mass: 0.35,
-    restDelta: 0.2,
-    restSpeed: 0.2,
-  })
-  const touchStartY = useRef(0)
-  const touchStretch0 = useRef(0)
-  const wheelTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const demoTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const demoPlayingRef = useRef(false)
-  const rolledEl = useRef<HTMLElement | null>(null)
-  const [mounted, setMounted] = useState(false)
-  /** User-triggered demo — plays even when prefers-reduced-motion is on. */
-  const [demoPlaying, setDemoPlaying] = useState(false)
-  demoPlayingRef.current = demoPlaying
-  // Gate on `mounted` so prefers-reduced-motion can't mismatch SSR HTML.
-  const reduce = mounted && reduceMotion && !demoPlaying
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  // 0 → 1 progress drives scaleY (compositor-friendly).
-  const progress = useTransform(stretch, (v) =>
-    maxStretch <= 0 ? 0 : Math.min(1, Math.max(0, v / maxStretch))
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const instanceRef = useRef<StretchyFooterInstance | null>(null)
+  // The window aurora portals to <body>, which only exists on the client.
+  const onClient = useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
   )
-  const pageY = useTransform(stretch, (v) => -v)
-  const fieldOpacity = useTransform(progress, [0, 0.08, 0.2], [0, 1, 1])
-
-  const blurPx = Math.max(0, blur)
-  const glowAlpha = Math.min(1, Math.max(0, glow))
-
-  const bars = useMemo(() => {
-    const count = Math.max(8, Math.min(96, Math.floor(columns)))
-    return Array.from({ length: count }, (_, i) => {
-      const color = colors[i % colors.length]!
-      const heightPct = Math.max(28, columnScale(i, count) * 100).toFixed(2)
-      return {
-        key: i,
-        height: `${heightPct}%`,
-        backgroundImage: `linear-gradient(to top, ${hexToRgba(color, 1)} 0%, ${hexToRgba(color, 0.6)} 45%, rgba(0, 0, 0, 0) 100%)`,
-      }
-    })
-  }, [colors, columns])
-
-  // Lift the page in lockstep with the stretch — translate only, no 3D.
-  useMotionValueEvent(stretch, "change", (v) => {
-    if (reduceMotion && !demoPlayingRef.current) return
-    if (!windowScroll && !scrollRef) return
-
-    if (!rolledEl.current?.isConnected) {
-      rolledEl.current = document.querySelector(
-        contentSelector
-      ) as HTMLElement | null
-    }
-    const el = rolledEl.current
-    if (!el) return
-
-    const y = -Math.max(0, v)
-    el.style.transformOrigin = "50% 100%"
-    el.style.willChange = "transform"
-    el.style.transform = `translate3d(0, ${y}px, 0)`
-
-    if (v < 0.2) {
-      el.style.transform = "translate3d(0, 0, 0)"
-      el.style.willChange = ""
-    }
-  })
+  const portalHost = windowScroll && onClient ? document.body : null
 
   useEffect(() => {
+    const canvas = canvasRef.current
+    const scroller = windowScroll
+      ? window
+      : (scrollRef?.current ?? scrollerRef.current)
+    if (!canvas || !scroller) return
+    const content =
+      windowScroll || scrollRef ? contentSelector : contentRef.current
+    instanceRef.current = createStretchyFooter(
+      { canvas, scroller, content },
+      { maxStretch, colors, stiffness, damping, columns, blur, glow, demoId }
+    )
     return () => {
-      const el = rolledEl.current
-      if (!el) return
-      el.style.transform = ""
-      el.style.transformOrigin = ""
-      el.style.willChange = ""
-    }
-  }, [])
-
-  // Always listen for docs "Show effect" — drives pull directly (no fake wheels).
-  useEffect(() => {
-    const clearDemoTimer = () => {
-      if (demoTimer.current) {
-        clearTimeout(demoTimer.current)
-        demoTimer.current = null
-      }
-    }
-
-    const onPlay = (event: Event) => {
-      const detail =
-        (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}
-      if (detail.target != null && detail.target !== demoId) return
-      // Scoped footers ignore broadcast plays without a target.
-      if (detail.target == null && demoId != null) return
-
-      const amount = detail.amount ?? 0.82
-      const holdMs = detail.holdMs ?? 700
-
-      if (wheelTimer.current) {
-        clearTimeout(wheelTimer.current)
-        wheelTimer.current = null
-      }
-      clearDemoTimer()
-      demoPlayingRef.current = true
-      setDemoPlaying(true)
-      pull.set(Math.min(maxStretch, Math.max(0, maxStretch * amount)))
-      demoTimer.current = setTimeout(() => {
-        demoTimer.current = null
-        pull.set(0)
-        // Wait for the spring to settle before re-honoring reduced motion.
-        window.setTimeout(() => {
-          demoPlayingRef.current = false
-          setDemoPlaying(false)
-        }, 500)
-      }, holdMs)
-    }
-
-    window.addEventListener(STRETCHY_FOOTER_PLAY, onPlay)
-    return () => {
-      clearDemoTimer()
-      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlay)
+      instanceRef.current?.destroy()
+      instanceRef.current = null
     }
-  }, [demoId, maxStretch, pull])
+    // Options stream in through setOptions; only the wiring remounts.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowScroll, scrollRef, contentSelector, portalHost])
 
   useEffect(() => {
-    if (reduceMotion) return
-
-    let target: OverscrollTarget | null = null
-    if (windowScroll) {
-      target = { kind: "window" }
-    } else {
-      const el = scrollRef?.current ?? internalRef.current
-      if (el) target = { kind: "element", el }
-    }
-    if (!target) return
-
-    // Kill browser rubber-band so it doesn't fight ours.
-    const prevOverscroll =
-      target.kind === "window"
-        ? document.documentElement.style.overscrollBehaviorY
-        : target.el.style.overscrollBehaviorY
-    if (target.kind === "window") {
-      document.documentElement.style.overscrollBehaviorY = "none"
-    } else {
-      target.el.style.overscrollBehaviorY = "none"
-    }
-
-    const isAtBottom = () =>
-      target.kind === "window" ? windowAtBottom() : elementAtBottom(target.el)
-
-    const clearWheelTimer = () => {
-      if (wheelTimer.current) {
-        clearTimeout(wheelTimer.current)
-        wheelTimer.current = null
-      }
-    }
-
-    const pullTo = (next: number) => {
-      pull.set(next)
-    }
-
-    const snapBack = () => {
-      clearWheelTimer()
-      pull.set(0)
-    }
-
-    const onWheel = (event: WheelEvent) => {
-      if (demoTimer.current) {
-        clearTimeout(demoTimer.current)
-        demoTimer.current = null
-        setDemoPlaying(false)
-      }
-      const current = pull.get()
-      const scrollingDown = event.deltaY > 0
-      const scrollingUp = event.deltaY < 0
-
-      if (current > 0.5 || stretch.get() > 0.5) {
-        event.preventDefault()
-        if (scrollingUp) {
-          const next = Math.max(0, current + event.deltaY * PULL_GAIN)
-          if (next <= 0.5) {
-            snapBack()
-            return
-          }
-          pullTo(next)
-        } else if (scrollingDown) {
-          pullTo(applyResistance(current, event.deltaY, maxStretch))
-        }
-        clearWheelTimer()
-        wheelTimer.current = setTimeout(snapBack, WHEEL_IDLE_MS)
-        return
-      }
-
-      if (scrollingDown && isAtBottom()) {
-        event.preventDefault()
-        pullTo(applyResistance(0, event.deltaY, maxStretch))
-        clearWheelTimer()
-        wheelTimer.current = setTimeout(snapBack, WHEEL_IDLE_MS)
-      }
-    }
-
-    const onTouchStart = (event: TouchEvent) => {
-      const t = event.touches[0]
-      if (!t) return
-      if (demoTimer.current) {
-        clearTimeout(demoTimer.current)
-        demoTimer.current = null
-        setDemoPlaying(false)
-      }
-      touchStartY.current = t.clientY
-      touchStretch0.current = pull.get()
-    }
-
-    const onTouchMove = (event: TouchEvent) => {
-      const t = event.touches[0]
-      if (!t) return
-      const dy = touchStartY.current - t.clientY
-      const current = pull.get()
-
-      if (current > 0.5 || stretch.get() > 0.5 || (dy > 0 && isAtBottom())) {
-        if (event.cancelable) event.preventDefault()
-        const boost = current < 40 ? POP_BOOST : 1
-        const fromRest = touchStretch0.current + dy * PULL_GAIN * boost
-        pullTo(Math.min(maxStretch, Math.max(0, fromRest)))
-      }
-    }
-
-    const onTouchEnd = () => {
-      if (pull.get() > 0.5 || stretch.get() > 0.5) snapBack()
-    }
-
-    const optsWheel = { passive: false } as const
-    const optsTouchStart = { passive: true } as const
-    const optsTouchMove = { passive: false } as const
-
-    if (target.kind === "window") {
-      window.addEventListener("wheel", onWheel, optsWheel)
-      window.addEventListener("touchstart", onTouchStart, optsTouchStart)
-      window.addEventListener("touchmove", onTouchMove, optsTouchMove)
-      window.addEventListener("touchend", onTouchEnd)
-      window.addEventListener("touchcancel", onTouchEnd)
-    } else {
-      const el = target.el
-      el.addEventListener("wheel", onWheel, optsWheel)
-      el.addEventListener("touchstart", onTouchStart, optsTouchStart)
-      el.addEventListener("touchmove", onTouchMove, optsTouchMove)
-      el.addEventListener("touchend", onTouchEnd)
-      el.addEventListener("touchcancel", onTouchEnd)
-    }
-
-    return () => {
-      clearWheelTimer()
-      if (target.kind === "window") {
-        document.documentElement.style.overscrollBehaviorY = prevOverscroll
-        window.removeEventListener("wheel", onWheel)
-        window.removeEventListener("touchstart", onTouchStart)
-        window.removeEventListener("touchmove", onTouchMove)
-        window.removeEventListener("touchend", onTouchEnd)
-        window.removeEventListener("touchcancel", onTouchEnd)
-      } else {
-        target.el.style.overscrollBehaviorY = prevOverscroll
-        const el = target.el
-        el.removeEventListener("wheel", onWheel)
-        el.removeEventListener("touchstart", onTouchStart)
-        el.removeEventListener("touchmove", onTouchMove)
-        el.removeEventListener("touchend", onTouchEnd)
-        el.removeEventListener("touchcancel", onTouchEnd)
-      }
-    }
-  }, [reduceMotion, scrollRef, windowScroll, maxStretch, pull, stretch])
+    instanceRef.current?.setOptions({
+      maxStretch,
+      colors,
+      stiffness,
+      damping,
+      columns,
+      blur,
+      glow,
+      demoId,
+    })
+  }, [maxStretch, colors, stiffness, damping, columns, blur, glow, demoId])
 
   const aurora = (
     <div
@@ -396,50 +142,17 @@ export function StretchyFooter({
       className="pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden"
       style={{ height: maxStretch }}
     >
-      <motion.div
-        className="absolute inset-x-0 bottom-0 h-full w-full origin-bottom will-change-transform"
-        style={{
-          scaleY: reduce ? 0 : progress,
-          opacity: reduce ? 0 : fieldOpacity,
-        }}
-      >
-        {/* Single blur layer — cheaper than per-bar filters */}
-        <div
-          className="absolute inset-0 flex items-end justify-stretch"
-          style={{ filter: `blur(${blurPx}px)`, transform: "scaleY(1.08)" }}
-        >
-          {bars.map((bar) => (
-            <div
-              key={bar.key}
-              className="min-w-0 flex-1"
-              style={{
-                height: bar.height,
-                backgroundImage: bar.backgroundImage,
-              }}
-            />
-          ))}
-        </div>
-
-        {/* Soft floor bloom */}
-        <div
-          className="absolute inset-x-0 bottom-0 h-1/2"
-          style={{
-            backgroundImage: `radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,255,255,${glowAlpha}), rgba(0, 0, 0, 0) 70%)`,
-          }}
-        />
-      </motion.div>
+      <canvas ref={canvasRef} className="invisible absolute" />
     </div>
   )
 
   if (windowScroll) {
-    if (!mounted) return null
-
-    // Portal to body so `fixed` stays on the viewport — a transformed
-    // ancestor (the rolling page) would otherwise pin it to the content.
+    if (!portalHost) return null
+    // Portal so `fixed` stays on the viewport — the lifted page is
+    // transformed and would otherwise pin it to the content.
     return createPortal(
       <div
         data-slot="stretchy-footer"
-        aria-label={label}
         className={cn(
           "pointer-events-none fixed inset-x-0 bottom-0 z-50",
           className
@@ -448,7 +161,7 @@ export function StretchyFooter({
       >
         {aurora}
       </div>,
-      document.body
+      portalHost
     )
   }
 
@@ -456,7 +169,6 @@ export function StretchyFooter({
     return (
       <div
         data-slot="stretchy-footer"
-        aria-label={label}
         className={cn(
           "pointer-events-none absolute inset-x-0 bottom-0",
           className
@@ -468,22 +180,23 @@ export function StretchyFooter({
     )
   }
 
+  // The aurora sits beside the scroller, not in it, so it stays on the
+  // viewport floor instead of scrolling away with the content.
   return (
     <div
-      ref={internalRef}
       data-slot="stretchy-footer"
-      aria-label={label}
-      className={cn(
-        "relative isolate overflow-y-auto overflow-x-hidden overscroll-none",
-        className
-      )}
+      className={cn("relative isolate overflow-hidden", className)}
     >
-      <motion.div
-        className="relative z-10 min-h-full will-change-transform"
-        style={{ y: pageY }}
+      <div
+        ref={scrollerRef}
+        role="region"
+        aria-label={label}
+        className="h-full overflow-x-hidden overflow-y-auto"
       >
-        {children}
-      </motion.div>
+        <div ref={contentRef} className="relative z-10 min-h-full">
+          {children}
+        </div>
+      </div>
       {aurora}
     </div>
   )
diff --git a/tests/registry.test.mjs b/tests/registry.test.mjs
index 6cd2f26..799b738 100644
--- a/tests/registry.test.mjs
+++ b/tests/registry.test.mjs
@@ -137,12 +137,14 @@ test("detectVanillaImports finds every sibling *-vanilla specifier", () => {
   ])
 })
 
-test("published stretchy-footer-svelte inlines both vanilla engines", () => {
+test("published stretchy-footer inlines the shared engine", () => {
   const dir = join(ROOT, "registry/stretchy-footer")
-  const out = publishedFileContent(dir, "stretchy-footer.svelte")
-  assert.doesNotMatch(out, /from\s+["']\.\/[^"']+-vanilla["']/)
-  assert.match(out, /export function createSpring/)
-  assert.match(out, /export function applyResistance/)
+  for (const file of ["stretchy-footer.tsx", "stretchy-footer.svelte"]) {
+    const out = publishedFileContent(dir, file)
+    assert.doesNotMatch(out, /from\s+["']\.\/[^"']+-vanilla["']/)
+    assert.doesNotMatch(out, /from\s+["']motion/)
+    assert.match(out, /export function createStretchyFooter/)
+  }
 })
 
 test("makeStandalone keeps framework imports while dropping two vanilla engines", () => {

From 308be77bc28031a90a7e69aba0e3c4251794928f Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:26:06 +0530
Subject: [PATCH 15/49] Give Stretchy Footer the stepped gradient aurora.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nine wide columns step down from the middle like a pyramid, and each
carries the same top-to-floor gradient — magenta through sunlight to
deep navy — squeezed to its own height. colors now lists those stops;
the demo palettes follow, and the floor bloom is off by default.
---
 content/docs/components/stretchy-footer.mdx   |  38 +++----
 public/r/stretchy-footer-svelte.json          |   2 +-
 public/r/stretchy-footer.json                 |   2 +-
 .../stretchy-footer/stretchy-footer-demo.tsx  |  48 ++++++--
 .../stretchy-footer-vanilla.ts                | 106 +++++++++++-------
 5 files changed, 124 insertions(+), 72 deletions(-)

diff --git a/content/docs/components/stretchy-footer.mdx b/content/docs/components/stretchy-footer.mdx
index 419fdd9..23c9acf 100644
--- a/content/docs/components/stretchy-footer.mdx
+++ b/content/docs/components/stretchy-footer.mdx
@@ -5,7 +5,7 @@ description: Dia-style rubber overscroll — pull past the bottom and a rainbow
 
 import { StretchyFooterDemo } from "@/registry/stretchy-footer/stretchy-footer-demo"
 
-Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page lifts on a spring and an aurora of blurred columns stretches up to fill the gap. Every column has its own spring, so the top edge ripples as it snaps back. Swap palettes, blur, glow, and snap below.
+Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page lifts on a spring and a stepped pyramid of blurred gradient columns (magenta through sunlight to deep navy) stretches up to fill the gap. Every column has its own spring, so the top edge ripples as it snaps back. Swap palettes, blur, glow, and snap below.
 
 ## Preview
 
@@ -95,21 +95,21 @@ export function DocsChrome() {
 
 ## Props
 
-| Prop | Type | Default |
-| --- | --- | --- |
-| `children` | `ReactNode` / snippet | — |
-| `scrollRef` | `RefObject<HTMLElement \| null>` | React — self as scroller |
-| `scrollEl` | `HTMLElement` | Svelte — self as scroller |
-| `windowScroll` | `boolean` | `false` |
-| `contentSelector` | `string` | `[data-stretchy-page]` |
-| `maxStretch` | `number` | `280` |
-| `colors` | `string[]` | spectrum red → pink |
-| `stiffness` | `number` | `380` |
-| `damping` | `number` | `32` |
-| `columns` | `number` | `48` |
-| `blur` | `number` | `14` — px |
-| `glow` | `number` | `0.22` — floor bloom, 0–1 |
-| `label` | `string` | `Stretchy overflow` — scroll region label |
-| `demoId` | `string` | — pairs with `playStretchyFooterDemo({ target })` |
-| `className` | `string` | React only |
-| `class` | `string` | Svelte only |
+| Prop              | Type                             | Default                                           |
+| ----------------- | -------------------------------- | ------------------------------------------------- |
+| `children`        | `ReactNode` / snippet            | —                                                 |
+| `scrollRef`       | `RefObject<HTMLElement \| null>` | React — self as scroller                          |
+| `scrollEl`        | `HTMLElement`                    | Svelte — self as scroller                         |
+| `windowScroll`    | `boolean`                        | `false`                                           |
+| `contentSelector` | `string`                         | `[data-stretchy-page]`                            |
+| `maxStretch`      | `number`                         | `280`                                             |
+| `colors`          | `string[]`                       | magenta → navy — gradient stops, top to floor     |
+| `stiffness`       | `number`                         | `380`                                             |
+| `damping`         | `number`                         | `32`                                              |
+| `columns`         | `number`                         | `9` — steps down from the middle                  |
+| `blur`            | `number`                         | `16` — px                                         |
+| `glow`            | `number`                         | `0` — white floor bloom, 0–1                      |
+| `label`           | `string`                         | `Stretchy overflow` — scroll region label         |
+| `demoId`          | `string`                         | — pairs with `playStretchyFooterDemo({ target })` |
+| `className`       | `string`                         | React only                                        |
+| `class`           | `string`                         | Svelte only                                       |
diff --git a/public/r/stretchy-footer-svelte.json b/public/r/stretchy-footer-svelte.json
index c896169..d472ed2 100644
--- a/public/r/stretchy-footer-svelte.json
+++ b/public/r/stretchy-footer-svelte.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/stretchy-footer/stretchy-footer.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_COLORS = [\n  \"#FF3B30\",\n  \"#FF9500\",\n  \"#FFCC00\",\n  \"#34C759\",\n  \"#00C7BE\",\n  \"#32ADE6\",\n  \"#007AFF\",\n  \"#5856D6\",\n  \"#AF52DE\",\n  \"#FF2D55\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 48\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 14\n/** White floor bloom opacity (0–1). */\nexport const DEFAULT_GLOW = 0.22\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Shortest column as a share of the stretch. */\nconst MIN_COLUMN = 0.28\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /** Spectrum stops across the aurora columns, any CSS colors. */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns. Default `48`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `14`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0.22`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Bell curve across the columns: tall in the middle, short at the edges. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return Math.exp(-t * t * 2.2)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\n/** A vertical strip of `color`: solid at the floor, fading out at the top. */\nfunction makeStrip(color: string) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = 64\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  g.fillStyle = color\n  g.fillRect(0, 0, 1, 64)\n  const fade = g.createLinearGradient(0, 0, 0, 64)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(0.55, \"rgba(0,0,0,0.6)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, 64)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while an aurora of blurred columns stretches up\n * from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 8, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strips: HTMLCanvasElement[] = []\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = Math.max(MIN_COLUMN, columnScale(i, count))\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrips = () => {\n    const colors = options.colors?.length ? options.colors : DEFAULT_COLORS\n    strips = colors.map(makeStrip)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      const strip = strips[i % strips.length]!\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(strip, 0, 63, 1, 1, x0, floor, x1 - x0, bottom - floor)\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrips()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrips()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends StretchyFooterOptions {\n    class?: string\n    /**\n     * Page content inside the overflow scroller.\n     * Ignored when `scrollEl` / `windowScroll` paint overlay-only.\n     */\n    children?: import(\"svelte\").Snippet\n    /**\n     * External scroll container. When set, this component only paints the\n     * aurora overlay and binds overscroll to that element.\n     * When omitted (and `windowScroll` is false), this component *is* the scroller.\n     */\n    scrollEl?: HTMLElement\n    /**\n     * Bind overscroll to the window and paint a fixed bottom aurora.\n     * Use on full pages instead of a nested scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element that lifts with the stretch (CSS selector).\n     * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.\n     */\n    contentSelector?: string\n    /** Accessible label for the scroll region. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    scrollEl,\n    windowScroll = false,\n    contentSelector = \"[data-stretchy-page]\",\n    maxStretch = DEFAULT_MAX_STRETCH,\n    colors = DEFAULT_COLORS,\n    stiffness = DEFAULT_STIFFNESS,\n    damping = DEFAULT_DAMPING,\n    columns = DEFAULT_COLUMNS,\n    blur = DEFAULT_BLUR,\n    glow = DEFAULT_GLOW,\n    label = \"Stretchy overflow\",\n    demoId,\n  }: Props = $props()\n\n  let mounted = $state(false)\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let scroller: HTMLDivElement | undefined = $state()\n  let content: HTMLDivElement | undefined = $state()\n  let instance: StretchyFooterInstance | null = null\n\n  onMount(() => {\n    mounted = true\n  })\n\n  // Remount only when the wiring changes; options stream in below.\n  $effect(() => {\n    const target = windowScroll ? window : (scrollEl ?? scroller)\n    if (!canvas || !target) return\n    const lifted = windowScroll || scrollEl ? contentSelector : content\n    const next = createStretchyFooter(\n      { canvas, scroller: target, content: lifted },\n      untrack(() => ({\n        maxStretch,\n        colors,\n        stiffness,\n        damping,\n        columns,\n        blur,\n        glow,\n        demoId,\n      }))\n    )\n    instance = next\n    return () => {\n      next?.destroy()\n      if (instance === next) instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  })\n\n  function portalToBody(node: HTMLElement) {\n    document.body.appendChild(node)\n    return {\n      destroy() {\n        node.remove()\n      },\n    }\n  }\n</script>\n\n{#snippet aurora()}\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n    style=\"height: {maxStretch}px;\"\n  >\n    <canvas bind:this={canvas} class=\"invisible absolute\"></canvas>\n  </div>\n{/snippet}\n\n{#if windowScroll}\n  {#if mounted}\n    <!-- Portal so `fixed` stays on the viewport — the lifted page is\n         transformed and would otherwise pin it to the content. -->\n    <div\n      use:portalToBody\n      data-slot=\"stretchy-footer\"\n      class={cn(\"pointer-events-none fixed inset-x-0 bottom-0 z-50\", className)}\n      style=\"height: {maxStretch}px;\"\n    >\n      {@render aurora()}\n    </div>\n  {/if}\n{:else if scrollEl}\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"pointer-events-none absolute inset-x-0 bottom-0\", className)}\n    style=\"height: {maxStretch}px;\"\n  >\n    {@render aurora()}\n  </div>\n{:else}\n  <!-- The aurora sits beside the scroller, not in it, so it stays on the\n       viewport floor instead of scrolling away with the content. -->\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"relative isolate overflow-hidden\", className)}\n  >\n    <div\n      bind:this={scroller}\n      role=\"region\"\n      aria-label={label}\n      class=\"h-full overflow-x-hidden overflow-y-auto\"\n    >\n      <div bind:this={content} class=\"relative z-10 min-h-full\">\n        {@render children?.()}\n      </div>\n    </div>\n    {@render aurora()}\n  </div>\n{/if}\n",
+      "content": "<script module lang=\"ts\">\n/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */\nexport const DEFAULT_COLORS = [\n  \"#FF1AE6\",\n  \"#FF2E5E\",\n  \"#FF8A1A\",\n  \"#FFC81F\",\n  \"#E2E6EC\",\n  \"#8DB6E6\",\n  \"#2F74DC\",\n  \"#1459E3\",\n  \"#1C2566\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 9\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 16\n/** White floor bloom opacity (0–1). Off by default. */\nexport const DEFAULT_GLOW = 0\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Edge columns stand this share of the centre one; the rest step evenly. */\nconst EDGE_COLUMN = 0.55\n/** The top of each column fades in over this share of its height. */\nconst TOP_FADE = 0.12\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /**\n   * Gradient stops from the top of each column down to the floor, any CSS\n   * colors. Every column carries the whole gradient, squeezed to its height.\n   */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns, stepping down from the middle. Default `9`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `16`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Stepped pyramid: the middle column is tallest, each step out is shorter. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return 1 - (1 - EDGE_COLUMN) * Math.abs(t)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\nconst STRIP = 256\n\n/**\n * One column's gradient, `colors` spread from just under the top to the\n * floor, with the top fading in. Columns stretch it to their own height.\n */\nfunction makeStrip(colors: string[]) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = STRIP\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  const bands = g.createLinearGradient(0, 0, 0, STRIP)\n  colors.forEach((color, i) => {\n    const at = colors.length > 1 ? i / (colors.length - 1) : 1\n    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)\n  })\n  g.fillStyle = bands\n  g.fillRect(0, 0, 1, STRIP)\n  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, STRIP)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while a stepped pyramid of blurred gradient\n * columns stretches up from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strip = document.createElement(\"canvas\")\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = columnScale(i, count)\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrip = () => {\n    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(\n        strip,\n        0,\n        STRIP - 1,\n        1,\n        1,\n        x0,\n        floor,\n        x1 - x0,\n        bottom - floor\n      )\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrip()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrip()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends StretchyFooterOptions {\n    class?: string\n    /**\n     * Page content inside the overflow scroller.\n     * Ignored when `scrollEl` / `windowScroll` paint overlay-only.\n     */\n    children?: import(\"svelte\").Snippet\n    /**\n     * External scroll container. When set, this component only paints the\n     * aurora overlay and binds overscroll to that element.\n     * When omitted (and `windowScroll` is false), this component *is* the scroller.\n     */\n    scrollEl?: HTMLElement\n    /**\n     * Bind overscroll to the window and paint a fixed bottom aurora.\n     * Use on full pages instead of a nested scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element that lifts with the stretch (CSS selector).\n     * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.\n     */\n    contentSelector?: string\n    /** Accessible label for the scroll region. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    scrollEl,\n    windowScroll = false,\n    contentSelector = \"[data-stretchy-page]\",\n    maxStretch = DEFAULT_MAX_STRETCH,\n    colors = DEFAULT_COLORS,\n    stiffness = DEFAULT_STIFFNESS,\n    damping = DEFAULT_DAMPING,\n    columns = DEFAULT_COLUMNS,\n    blur = DEFAULT_BLUR,\n    glow = DEFAULT_GLOW,\n    label = \"Stretchy overflow\",\n    demoId,\n  }: Props = $props()\n\n  let mounted = $state(false)\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let scroller: HTMLDivElement | undefined = $state()\n  let content: HTMLDivElement | undefined = $state()\n  let instance: StretchyFooterInstance | null = null\n\n  onMount(() => {\n    mounted = true\n  })\n\n  // Remount only when the wiring changes; options stream in below.\n  $effect(() => {\n    const target = windowScroll ? window : (scrollEl ?? scroller)\n    if (!canvas || !target) return\n    const lifted = windowScroll || scrollEl ? contentSelector : content\n    const next = createStretchyFooter(\n      { canvas, scroller: target, content: lifted },\n      untrack(() => ({\n        maxStretch,\n        colors,\n        stiffness,\n        damping,\n        columns,\n        blur,\n        glow,\n        demoId,\n      }))\n    )\n    instance = next\n    return () => {\n      next?.destroy()\n      if (instance === next) instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  })\n\n  function portalToBody(node: HTMLElement) {\n    document.body.appendChild(node)\n    return {\n      destroy() {\n        node.remove()\n      },\n    }\n  }\n</script>\n\n{#snippet aurora()}\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n    style=\"height: {maxStretch}px;\"\n  >\n    <canvas bind:this={canvas} class=\"invisible absolute\"></canvas>\n  </div>\n{/snippet}\n\n{#if windowScroll}\n  {#if mounted}\n    <!-- Portal so `fixed` stays on the viewport — the lifted page is\n         transformed and would otherwise pin it to the content. -->\n    <div\n      use:portalToBody\n      data-slot=\"stretchy-footer\"\n      class={cn(\"pointer-events-none fixed inset-x-0 bottom-0 z-50\", className)}\n      style=\"height: {maxStretch}px;\"\n    >\n      {@render aurora()}\n    </div>\n  {/if}\n{:else if scrollEl}\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"pointer-events-none absolute inset-x-0 bottom-0\", className)}\n    style=\"height: {maxStretch}px;\"\n  >\n    {@render aurora()}\n  </div>\n{:else}\n  <!-- The aurora sits beside the scroller, not in it, so it stays on the\n       viewport floor instead of scrolling away with the content. -->\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"relative isolate overflow-hidden\", className)}\n  >\n    <div\n      bind:this={scroller}\n      role=\"region\"\n      aria-label={label}\n      class=\"h-full overflow-x-hidden overflow-y-auto\"\n    >\n      <div bind:this={content} class=\"relative z-10 min-h-full\">\n        {@render children?.()}\n      </div>\n    </div>\n    {@render aurora()}\n  </div>\n{/if}\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/stretchy-footer.svelte"
     }
diff --git a/public/r/stretchy-footer.json b/public/r/stretchy-footer.json
index 41513f9..e42eeb7 100644
--- a/public/r/stretchy-footer.json
+++ b/public/r/stretchy-footer.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/stretchy-footer/stretchy-footer.tsx",
-      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_COLORS = [\n  \"#FF3B30\",\n  \"#FF9500\",\n  \"#FFCC00\",\n  \"#34C759\",\n  \"#00C7BE\",\n  \"#32ADE6\",\n  \"#007AFF\",\n  \"#5856D6\",\n  \"#AF52DE\",\n  \"#FF2D55\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 48\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 14\n/** White floor bloom opacity (0–1). */\nexport const DEFAULT_GLOW = 0.22\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Shortest column as a share of the stretch. */\nconst MIN_COLUMN = 0.28\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /** Spectrum stops across the aurora columns, any CSS colors. */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns. Default `48`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `14`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0.22`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Bell curve across the columns: tall in the middle, short at the edges. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return Math.exp(-t * t * 2.2)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\n/** A vertical strip of `color`: solid at the floor, fading out at the top. */\nfunction makeStrip(color: string) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = 64\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  g.fillStyle = color\n  g.fillRect(0, 0, 1, 64)\n  const fade = g.createLinearGradient(0, 0, 0, 64)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(0.55, \"rgba(0,0,0,0.6)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, 64)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while an aurora of blurred columns stretches up\n * from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 8, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strips: HTMLCanvasElement[] = []\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = Math.max(MIN_COLUMN, columnScale(i, count))\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrips = () => {\n    const colors = options.colors?.length ? options.colors : DEFAULT_COLORS\n    strips = colors.map(makeStrip)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      const strip = strips[i % strips.length]!\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(strip, 0, 63, 1, 1, x0, floor, x1 - x0, bottom - floor)\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrips()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrips()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\nexport type StretchyFooterProps = StretchyFooterOptions & {\n  className?: string\n  /**\n   * Page content inside the overflow scroller.\n   * Ignored when `scrollRef` / `windowScroll` paint overlay-only.\n   */\n  children?: ReactNode\n  /**\n   * External scroll container. When set, this component only paints the\n   * aurora overlay and binds overscroll to that element.\n   * When omitted (and `windowScroll` is false), this component *is* the scroller.\n   */\n  scrollRef?: RefObject<HTMLElement | null>\n  /**\n   * Bind overscroll to the window and paint a fixed bottom aurora.\n   * Use on full pages instead of a nested scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element that lifts with the stretch (CSS selector).\n   * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.\n   */\n  contentSelector?: string\n  /** Accessible label for the scroll region. */\n  label?: string\n}\n\nconst noopSubscribe = () => () => {}\n\n/**\n * Dia-style stretchy overflow — overscroll past the bottom and a rainbow\n * aurora stretches up from the floor while the page lifts with it, then\n * springs back with a wobble. Honors `prefers-reduced-motion`.\n */\nexport function StretchyFooter({\n  className,\n  children,\n  scrollRef,\n  windowScroll = false,\n  contentSelector = \"[data-stretchy-page]\",\n  maxStretch = DEFAULT_MAX_STRETCH,\n  colors = DEFAULT_COLORS,\n  stiffness = DEFAULT_STIFFNESS,\n  damping = DEFAULT_DAMPING,\n  columns = DEFAULT_COLUMNS,\n  blur = DEFAULT_BLUR,\n  glow = DEFAULT_GLOW,\n  label = \"Stretchy overflow\",\n  demoId,\n}: StretchyFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<StretchyFooterInstance | null>(null)\n  // The window aurora portals to <body>, which only exists on the client.\n  const onClient = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  )\n  const portalHost = windowScroll && onClient ? document.body : null\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const scroller = windowScroll\n      ? window\n      : (scrollRef?.current ?? scrollerRef.current)\n    if (!canvas || !scroller) return\n    const content =\n      windowScroll || scrollRef ? contentSelector : contentRef.current\n    instanceRef.current = createStretchyFooter(\n      { canvas, scroller, content },\n      { maxStretch, colors, stiffness, damping, columns, blur, glow, demoId }\n    )\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Options stream in through setOptions; only the wiring remounts.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, scrollRef, contentSelector, portalHost])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  }, [maxStretch, colors, stiffness, damping, columns, blur, glow, demoId])\n\n  const aurora = (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n      style={{ height: maxStretch }}\n    >\n      <canvas ref={canvasRef} className=\"invisible absolute\" />\n    </div>\n  )\n\n  if (windowScroll) {\n    if (!portalHost) return null\n    // Portal so `fixed` stays on the viewport — the lifted page is\n    // transformed and would otherwise pin it to the content.\n    return createPortal(\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>,\n      portalHost\n    )\n  }\n\n  if (scrollRef) {\n    return (\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 bottom-0\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>\n    )\n  }\n\n  // The aurora sits beside the scroller, not in it, so it stays on the\n  // viewport floor instead of scrolling away with the content.\n  return (\n    <div\n      data-slot=\"stretchy-footer\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n    >\n      <div\n        ref={scrollerRef}\n        role=\"region\"\n        aria-label={label}\n        className=\"h-full overflow-x-hidden overflow-y-auto\"\n      >\n        <div ref={contentRef} className=\"relative z-10 min-h-full\">\n          {children}\n        </div>\n      </div>\n      {aurora}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { cn } from \"@/lib/utils\"\n\n/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */\nexport const DEFAULT_COLORS = [\n  \"#FF1AE6\",\n  \"#FF2E5E\",\n  \"#FF8A1A\",\n  \"#FFC81F\",\n  \"#E2E6EC\",\n  \"#8DB6E6\",\n  \"#2F74DC\",\n  \"#1459E3\",\n  \"#1C2566\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 9\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 16\n/** White floor bloom opacity (0–1). Off by default. */\nexport const DEFAULT_GLOW = 0\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Edge columns stand this share of the centre one; the rest step evenly. */\nconst EDGE_COLUMN = 0.55\n/** The top of each column fades in over this share of its height. */\nconst TOP_FADE = 0.12\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /**\n   * Gradient stops from the top of each column down to the floor, any CSS\n   * colors. Every column carries the whole gradient, squeezed to its height.\n   */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns, stepping down from the middle. Default `9`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `16`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Stepped pyramid: the middle column is tallest, each step out is shorter. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return 1 - (1 - EDGE_COLUMN) * Math.abs(t)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\nconst STRIP = 256\n\n/**\n * One column's gradient, `colors` spread from just under the top to the\n * floor, with the top fading in. Columns stretch it to their own height.\n */\nfunction makeStrip(colors: string[]) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = STRIP\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  const bands = g.createLinearGradient(0, 0, 0, STRIP)\n  colors.forEach((color, i) => {\n    const at = colors.length > 1 ? i / (colors.length - 1) : 1\n    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)\n  })\n  g.fillStyle = bands\n  g.fillRect(0, 0, 1, STRIP)\n  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, STRIP)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while a stepped pyramid of blurred gradient\n * columns stretches up from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strip = document.createElement(\"canvas\")\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = columnScale(i, count)\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrip = () => {\n    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(\n        strip,\n        0,\n        STRIP - 1,\n        1,\n        1,\n        x0,\n        floor,\n        x1 - x0,\n        bottom - floor\n      )\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrip()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrip()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\nexport type StretchyFooterProps = StretchyFooterOptions & {\n  className?: string\n  /**\n   * Page content inside the overflow scroller.\n   * Ignored when `scrollRef` / `windowScroll` paint overlay-only.\n   */\n  children?: ReactNode\n  /**\n   * External scroll container. When set, this component only paints the\n   * aurora overlay and binds overscroll to that element.\n   * When omitted (and `windowScroll` is false), this component *is* the scroller.\n   */\n  scrollRef?: RefObject<HTMLElement | null>\n  /**\n   * Bind overscroll to the window and paint a fixed bottom aurora.\n   * Use on full pages instead of a nested scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element that lifts with the stretch (CSS selector).\n   * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.\n   */\n  contentSelector?: string\n  /** Accessible label for the scroll region. */\n  label?: string\n}\n\nconst noopSubscribe = () => () => {}\n\n/**\n * Dia-style stretchy overflow — overscroll past the bottom and a rainbow\n * aurora stretches up from the floor while the page lifts with it, then\n * springs back with a wobble. Honors `prefers-reduced-motion`.\n */\nexport function StretchyFooter({\n  className,\n  children,\n  scrollRef,\n  windowScroll = false,\n  contentSelector = \"[data-stretchy-page]\",\n  maxStretch = DEFAULT_MAX_STRETCH,\n  colors = DEFAULT_COLORS,\n  stiffness = DEFAULT_STIFFNESS,\n  damping = DEFAULT_DAMPING,\n  columns = DEFAULT_COLUMNS,\n  blur = DEFAULT_BLUR,\n  glow = DEFAULT_GLOW,\n  label = \"Stretchy overflow\",\n  demoId,\n}: StretchyFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<StretchyFooterInstance | null>(null)\n  // The window aurora portals to <body>, which only exists on the client.\n  const onClient = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  )\n  const portalHost = windowScroll && onClient ? document.body : null\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const scroller = windowScroll\n      ? window\n      : (scrollRef?.current ?? scrollerRef.current)\n    if (!canvas || !scroller) return\n    const content =\n      windowScroll || scrollRef ? contentSelector : contentRef.current\n    instanceRef.current = createStretchyFooter(\n      { canvas, scroller, content },\n      { maxStretch, colors, stiffness, damping, columns, blur, glow, demoId }\n    )\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Options stream in through setOptions; only the wiring remounts.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, scrollRef, contentSelector, portalHost])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  }, [maxStretch, colors, stiffness, damping, columns, blur, glow, demoId])\n\n  const aurora = (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n      style={{ height: maxStretch }}\n    >\n      <canvas ref={canvasRef} className=\"invisible absolute\" />\n    </div>\n  )\n\n  if (windowScroll) {\n    if (!portalHost) return null\n    // Portal so `fixed` stays on the viewport — the lifted page is\n    // transformed and would otherwise pin it to the content.\n    return createPortal(\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>,\n      portalHost\n    )\n  }\n\n  if (scrollRef) {\n    return (\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 bottom-0\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>\n    )\n  }\n\n  // The aurora sits beside the scroller, not in it, so it stays on the\n  // viewport floor instead of scrolling away with the content.\n  return (\n    <div\n      data-slot=\"stretchy-footer\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n    >\n      <div\n        ref={scrollerRef}\n        role=\"region\"\n        aria-label={label}\n        className=\"h-full overflow-x-hidden overflow-y-auto\"\n      >\n        <div ref={contentRef} className=\"relative z-10 min-h-full\">\n          {children}\n        </div>\n      </div>\n      {aurora}\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/stretchy-footer.tsx"
     }
diff --git a/registry/stretchy-footer/stretchy-footer-demo.tsx b/registry/stretchy-footer/stretchy-footer-demo.tsx
index 057a728..edd3fb2 100644
--- a/registry/stretchy-footer/stretchy-footer-demo.tsx
+++ b/registry/stretchy-footer/stretchy-footer-demo.tsx
@@ -24,10 +24,40 @@ import {
 
 const PREVIEW_DEMO_ID = "stretchy-footer-preview"
 
-const SPECTRUM = ["#FF3B30", "#FFCC00", "#34C759", "#007AFF", "#AF52DE"]
-const SUNSET = ["#FF4D00", "#FF8A5B", "#FFC857", "#E63946", "#9B2226"]
-const OCEAN = ["#012A4A", "#01497C", "#2A9D8F", "#48CAE4", "#90E0EF"]
-const NEON = ["#F72585", "#B5179E", "#7209B7", "#4361EE", "#4CC9F0"]
+// Gradient stops, top of each column to the floor — nine, like the default.
+const SUNSET = [
+  "#FFE8A3",
+  "#FFD166",
+  "#FFA94D",
+  "#FF7B3D",
+  "#FF3D6E",
+  "#D6246E",
+  "#B5179E",
+  "#3A0CA3",
+  "#10002B",
+]
+const OCEAN = [
+  "#F1FCFD",
+  "#CAF0F8",
+  "#90E0EF",
+  "#48CAE4",
+  "#00B4D8",
+  "#0096C7",
+  "#0077B6",
+  "#023E8A",
+  "#03045E",
+]
+const NEON = [
+  "#B8F2FF",
+  "#4CC9F0",
+  "#4895EF",
+  "#4361EE",
+  "#7209B7",
+  "#B5179E",
+  "#F72585",
+  "#FF9E00",
+  "#1A0B2E",
+]
 
 function norm(hex: string) {
   return hex.trim().toUpperCase()
@@ -46,7 +76,7 @@ export function StretchyFooterDemo() {
 
   const defaults = useMemo(
     () => ({
-      colors: SPECTRUM,
+      colors: DEFAULT_COLORS,
       maxStretch: 220,
       columns: DEFAULT_COLUMNS,
       stiffness: DEFAULT_STIFFNESS,
@@ -146,7 +176,7 @@ export function StretchyFooterDemo() {
         <ControlColors
           label="Palette"
           colors={props.colors}
-          palettes={[SPECTRUM, SUNSET, OCEAN, NEON]}
+          palettes={[DEFAULT_COLORS, SUNSET, OCEAN, NEON]}
           onChange={(colors) => updateProp("colors", colors)}
         />
         <ControlSlider
@@ -160,9 +190,9 @@ export function StretchyFooterDemo() {
         <ControlSlider
           label="Columns"
           value={props.columns}
-          min={12}
-          max={80}
-          step={4}
+          min={3}
+          max={25}
+          step={2}
           onChange={(v) => updateProp("columns", v)}
         />
         <ControlSlider
diff --git a/registry/stretchy-footer/stretchy-footer-vanilla.ts b/registry/stretchy-footer/stretchy-footer-vanilla.ts
index 688c56f..43994ae 100644
--- a/registry/stretchy-footer/stretchy-footer-vanilla.ts
+++ b/registry/stretchy-footer/stretchy-footer-vanilla.ts
@@ -1,22 +1,22 @@
+/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */
 export const DEFAULT_COLORS = [
-  "#FF3B30",
-  "#FF9500",
-  "#FFCC00",
-  "#34C759",
-  "#00C7BE",
-  "#32ADE6",
-  "#007AFF",
-  "#5856D6",
-  "#AF52DE",
-  "#FF2D55",
+  "#FF1AE6",
+  "#FF2E5E",
+  "#FF8A1A",
+  "#FFC81F",
+  "#E2E6EC",
+  "#8DB6E6",
+  "#2F74DC",
+  "#1459E3",
+  "#1C2566",
 ]
 
 export const DEFAULT_MAX_STRETCH = 280
-export const DEFAULT_COLUMNS = 48
+export const DEFAULT_COLUMNS = 9
 /** Gaussian blur on the aurora, in px. */
-export const DEFAULT_BLUR = 14
-/** White floor bloom opacity (0–1). */
-export const DEFAULT_GLOW = 0.22
+export const DEFAULT_BLUR = 16
+/** White floor bloom opacity (0–1). Off by default. */
+export const DEFAULT_GLOW = 0
 export const DEFAULT_STIFFNESS = 380
 export const DEFAULT_DAMPING = 32
 
@@ -33,8 +33,10 @@ const MOMENTUM_GAP_MS = 180
 const COAST_EVENTS = 6
 const MASS = 0.35
 const REST = 0.15
-/** Shortest column as a share of the stretch. */
-const MIN_COLUMN = 0.28
+/** Edge columns stand this share of the centre one; the rest step evenly. */
+const EDGE_COLUMN = 0.55
+/** The top of each column fades in over this share of its height. */
+const TOP_FADE = 0.12
 /** Field opacity ramps in over this share of `maxStretch`. */
 const FADE_IN = 0.08
 /** Physics substep, in seconds. */
@@ -43,17 +45,20 @@ const STEP = 1 / 120
 export type StretchyFooterOptions = {
   /** Peak stretch in px. Default `280`. */
   maxStretch?: number
-  /** Spectrum stops across the aurora columns, any CSS colors. */
+  /**
+   * Gradient stops from the top of each column down to the floor, any CSS
+   * colors. Every column carries the whole gradient, squeezed to its height.
+   */
   colors?: string[]
   /** Spring stiffness. Default `380`. */
   stiffness?: number
   /** Spring damping. Default `32`. */
   damping?: number
-  /** How many aurora columns. Default `48`. */
+  /** How many aurora columns, stepping down from the middle. Default `9`. */
   columns?: number
-  /** Gaussian blur on the aurora, in px. Default `14`. */
+  /** Gaussian blur on the aurora, in px. Default `16`. */
   blur?: number
-  /** White floor bloom opacity (0–1). Default `0.22`. */
+  /** White floor bloom opacity (0–1). Default `0`. */
   glow?: number
   /**
    * Optional id for docs demos. `playStretchyFooterDemo({ target })` only
@@ -118,11 +123,11 @@ export async function playStretchyFooterDemo(
   )
 }
 
-/** Bell curve across the columns: tall in the middle, short at the edges. */
+/** Stepped pyramid: the middle column is tallest, each step out is shorter. */
 export function columnScale(index: number, count: number): number {
   if (count <= 1) return 1
   const t = (index / (count - 1)) * 2 - 1
-  return Math.exp(-t * t * 2.2)
+  return 1 - (1 - EDGE_COLUMN) * Math.abs(t)
 }
 
 /** Overscroll distance → stretch. Linear at first, never past `max`. */
@@ -173,22 +178,31 @@ function nestedCanScroll(
   return false
 }
 
-/** A vertical strip of `color`: solid at the floor, fading out at the top. */
-function makeStrip(color: string) {
+const STRIP = 256
+
+/**
+ * One column's gradient, `colors` spread from just under the top to the
+ * floor, with the top fading in. Columns stretch it to their own height.
+ */
+function makeStrip(colors: string[]) {
   const strip = document.createElement("canvas")
   strip.width = 1
-  strip.height = 64
+  strip.height = STRIP
   const g = strip.getContext("2d")
   if (!g) return strip
-  g.fillStyle = color
-  g.fillRect(0, 0, 1, 64)
-  const fade = g.createLinearGradient(0, 0, 0, 64)
+  const bands = g.createLinearGradient(0, 0, 0, STRIP)
+  colors.forEach((color, i) => {
+    const at = colors.length > 1 ? i / (colors.length - 1) : 1
+    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)
+  })
+  g.fillStyle = bands
+  g.fillRect(0, 0, 1, STRIP)
+  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)
   fade.addColorStop(0, "rgba(0,0,0,0)")
-  fade.addColorStop(0.55, "rgba(0,0,0,0.6)")
   fade.addColorStop(1, "rgba(0,0,0,1)")
   g.globalCompositeOperation = "destination-in"
   g.fillStyle = fade
-  g.fillRect(0, 0, 1, 64)
+  g.fillRect(0, 0, 1, STRIP)
   return strip
 }
 
@@ -220,8 +234,8 @@ const atRest = (s: Spring) =>
 
 /**
  * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the
- * content lifts on a spring while an aurora of blurred columns stretches up
- * from the floor; each column has its own spring, so the edge wobbles as it
+ * content lifts on a spring while a stepped pyramid of blurred gradient
+ * columns stretches up from the floor; each column has its own spring, so the edge wobbles as it
  * snaps back. Idle unless stretched.
  */
 export function createStretchyFooter(
@@ -240,7 +254,7 @@ export function createStretchyFooter(
     numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)
   const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)
   const countOf = () =>
-    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 8, 96))
+    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))
 
   /** Overscroll the user has put in, in px. The stretch is its rubber band. */
   let distance = 0
@@ -248,20 +262,19 @@ export function createStretchyFooter(
   let forced: number | null = null
   const lift: Spring = { x: 0, v: 0, target: 0 }
   let columns: (Spring & { share: number })[] = []
-  let strips: HTMLCanvasElement[] = []
+  let strip = document.createElement("canvas")
   const bloom = makeBloom()
 
   const rebuildColumns = () => {
     const count = countOf()
     const target = lift.target
     columns = Array.from({ length: count }, (_, i) => {
-      const share = Math.max(MIN_COLUMN, columnScale(i, count))
+      const share = columnScale(i, count)
       return { x: lift.x * share, v: 0, target: target * share, share }
     })
   }
-  const rebuildStrips = () => {
-    const colors = options.colors?.length ? options.colors : DEFAULT_COLORS
-    strips = colors.map(makeStrip)
+  const rebuildStrip = () => {
+    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)
   }
 
   const size = { w: 0, pad: 0, scale: 1 }
@@ -350,9 +363,18 @@ export function createStretchyFooter(
       if (h < 0.5) continue
       const x0 = edge(i)
       const x1 = edge(i + 1)
-      const strip = strips[i % strips.length]!
       ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)
-      ctx!.drawImage(strip, 0, 63, 1, 1, x0, floor, x1 - x0, bottom - floor)
+      ctx!.drawImage(
+        strip,
+        0,
+        STRIP - 1,
+        1,
+        1,
+        x0,
+        floor,
+        x1 - x0,
+        bottom - floor
+      )
     }
 
     const glow = glowOf()
@@ -532,7 +554,7 @@ export function createStretchyFooter(
   const ro = new ResizeObserver(layout)
   if (canvas.parentElement) ro.observe(canvas.parentElement)
 
-  rebuildStrips()
+  rebuildStrip()
   rebuildColumns()
   layout()
 
@@ -542,7 +564,7 @@ export function createStretchyFooter(
       const prevMax = maxOf()
       const prevBlur = blurOf()
       options = { ...options, ...next }
-      if (options.colors !== prevColors) rebuildStrips()
+      if (options.colors !== prevColors) rebuildStrip()
       if (countOf() !== columns.length) rebuildColumns()
       if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()
       if (forced !== null) forced = Math.min(forced, maxOf())

From cf1c11f3521eb1060e4dd018f7d776667efe623a Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:36:06 +0530
Subject: [PATCH 16/49] Rebuild Tangle Footer as tangled text vines.

Vines run the width of the footer and curl into loops off a wandering
baseline (a rolling pen, sized and curled by slow noise). Each is cut
into short pieces with random stacking and a gap cut around every
piece, so vines weave over and under each other and themselves. The
copy runs along the ribbons as a marquee, and the vines grow in when
first seen. Drawn on one canvas with cached paths; drops motion, adds
vines, speed, thickness and theme.
---
 content/docs/components/tangle-footer.mdx     |  34 +-
 public/r/registry.json                        |   7 +-
 public/r/tangle-footer-svelte.json            |   4 +-
 public/r/tangle-footer.json                   |   7 +-
 registry/tangle-footer/registry.json          |   5 +-
 registry/tangle-footer/tangle-footer-demo.tsx |  41 +-
 .../tangle-footer/tangle-footer-vanilla.ts    | 581 ++++++++++++++----
 registry/tangle-footer/tangle-footer.svelte   | 188 ++----
 registry/tangle-footer/tangle-footer.tsx      | 221 +++----
 9 files changed, 679 insertions(+), 409 deletions(-)

diff --git a/content/docs/components/tangle-footer.mdx b/content/docs/components/tangle-footer.mdx
index bf45a18..1805579 100644
--- a/content/docs/components/tangle-footer.mdx
+++ b/content/docs/components/tangle-footer.mdx
@@ -1,11 +1,11 @@
 ---
 title: Tangle Footer
-description: Five nested circular text rings — concentric semicircle loops with smooth marquee copy on slim ribbons. Theme-aware light and dark.
+description: Tangled text vines — ribbons curl into loops and weave over and under each other while your copy runs along them.
 ---
 
 import { TangleFooterDemo } from "@/registry/tangle-footer/tangle-footer-demo"
 
-Five concentric rings as an **upper semicircle** — outer diameter spans the parent width (`max-w-7xl`) when height is left at the default (half width). A shorter `height` scales the nest down so the arches stay complete. Rings rotate for a continuous marquee. Colors follow the site theme (`html.dark`) unless you override them. Press `d` to toggle.
+Vines run the width of the footer, curling into loops of every size off a wandering baseline. Each one is cut into short pieces with a random stacking order, so the vines pass over and under each other — and themselves — with a thin gap where they cross. Your phrases run along the ribbons as a slow marquee, through every loop. The vines grow in the first time the footer is seen. Change **Seed** for a new tangle. Press `d` to toggle the theme.
 
 ## Preview
 
@@ -21,7 +21,7 @@ Or install straight from the public GitHub source registry:
 
 ## Usage
 
-Wrap in `max-w-7xl` (or any width constraint). The outer semicircle fills that width; pass phrases via `lines` (one per ring).
+Drop it at the bottom of the page. It fills the width it's given at `height` px tall; pass phrases via `lines` and each vine picks one or two.
 
 <FrameworkCode>
   <FrameworkReact>
@@ -66,14 +66,20 @@ export function SiteFooter() {
 
 ## Props
 
-| Prop         | Type       | Default                             |
-| ------------ | ---------- | ----------------------------------- |
-| `lines`      | `string[]` | built-in phrases                    |
-| `ribbon`     | `string`   | theme (`#141414` / `#E8E4DC`)       |
-| `textColor`  | `string`   | theme (`#F4F0E8` / `#161616`)       |
-| `background` | `string`   | theme (`#EFEAE2` / `#121210`)       |
-| `height`     | `number`   | half of measured width (semicircle) |
-| `seed`       | `number`   | `23`                                |
-| `label`      | `string`   | `Site footer`                       |
-| `className`  | `string`   | React only                          |
-| `class`      | `string`   | Svelte only                         |
+| Prop         | Type                          | Default                                |
+| ------------ | ----------------------------- | -------------------------------------- |
+| `lines`      | `string[]`                    | built-in phrases                       |
+| `ribbon`     | `string`                      | theme (`#141414` / `#E8E4DC`)          |
+| `textColor`  | `string`                      | theme (`#F4F0E8` / `#161616`)          |
+| `background` | `string`                      | theme (`#EFEAE2` / `#121210`)          |
+| `height`     | `number`                      | `320` — px                             |
+| `vines`      | `number`                      | `4` — `1`–`12`                         |
+| `speed`      | `number`                      | `36` — px per second along the vines   |
+| `thickness`  | `number`                      | scales with width — ribbon width in px |
+| `seed`       | `number`                      | `23` — a new seed is a new tangle      |
+| `theme`      | `"light" \| "dark" \| "auto"` | `"auto"`                               |
+| `label`      | `string`                      | `Site footer`                          |
+| `className`  | `string`                      | React only                             |
+| `class`      | `string`                      | Svelte only                            |
+
+`prefers-reduced-motion: reduce` shows the grown tangle with the copy standing still. The animation also pauses while the footer is off-screen or the tab is hidden.
diff --git a/public/r/registry.json b/public/r/registry.json
index 6b3e7a1..ac43b08 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -351,10 +351,7 @@
     {
       "name": "tangle-footer",
       "title": "Tangle Footer",
-      "description": "A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.",
-      "dependencies": [
-        "motion"
-      ],
+      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
       "files": [
         {
           "path": "registry/tangle-footer/tangle-footer.tsx",
@@ -367,7 +364,7 @@
     {
       "name": "tangle-footer-svelte",
       "title": "Tangle Footer",
-      "description": "A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.",
+      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
       "dependencies": [],
       "files": [
         {
diff --git a/public/r/tangle-footer-svelte.json b/public/r/tangle-footer-svelte.json
index 3d5e576..95df94e 100644
--- a/public/r/tangle-footer-svelte.json
+++ b/public/r/tangle-footer-svelte.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tangle-footer-svelte",
   "title": "Tangle Footer",
-  "description": "A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.",
+  "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
   "dependencies": [],
   "files": [
     {
       "path": "registry/tangle-footer/tangle-footer.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_LINES = [\n  \"Ship something opinionated — less boilerplate, clearer decisions.\",\n  \"Knows what’s going on. Can you check in with them and see what’s next.\",\n  \"The new timeline should be ready by Friday, although it’s probably going to slip.\",\n  \"Open the docs, grab a component, and make it yours in the codebase.\",\n  \"Radiant lines, shader wash, gooey picker — install what you need and move.\",\n]\n\nexport type Ring = {\n  d: string\n  cx: number\n  cy: number\n  strokeWidth: number\n  fontSize: number\n  /** Text repeated enough to blanket the full circumference. */\n  text: string\n  /** Seconds for one full revolution. */\n  duration: number\n  /** Fraction of a turn (0–1) to offset the starting rotation. */\n  phase: number\n  reverse: boolean\n}\n\nexport type TangleFooterOptions = {\n  /** Phrases sampled randomly onto rings. */\n  lines?: string[]\n  /**\n   * Ribbon (stroke) color. Omit for theme-aware defaults\n   * (near-black in light, soft cream in dark).\n   */\n  ribbon?: string\n  /**\n   * Text fill on the ribbons. Omit for theme-aware defaults\n   * (cream in light, near-black in dark).\n   */\n  textColor?: string\n  /**\n   * Field behind the rings. Omit for theme-aware defaults\n   * (warm cream in light, near-black in dark). Pass `\"transparent\"`\n   * when the parent already paints the stage.\n   */\n  background?: string\n  /**\n   * Band height in px. Omit to use half the measured width\n   * (upper semicircle of a full-width nest). When set shorter\n   * than that, the nest scales down to fit so rings stay intact.\n   */\n  height?: number\n  /** Seed for random line / marquee assignment across rings. */\n  seed?: number\n  /** Accessible label. */\n  label?: string\n}\n\nexport const RING_COUNT = 5\n\nexport const K = 0.5522847498\nexport const STROKE = 28\n\n/** Mulberry32 — deterministic PRNG so rings stay stable across re-renders. */\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\n/** Perfect circle as four cubics (container clips to the upper half). */\nexport function circlePath(cx: number, cy: number, r: number): string {\n  const o = r * K\n  return [\n    `M ${(cx + r).toFixed(1)} ${cy.toFixed(1)}`,\n    `C ${(cx + r).toFixed(1)} ${(cy + o).toFixed(1)} ${(cx + o).toFixed(1)} ${(cy + r).toFixed(1)} ${cx.toFixed(1)} ${(cy + r).toFixed(1)}`,\n    `C ${(cx - o).toFixed(1)} ${(cy + r).toFixed(1)} ${(cx - r).toFixed(1)} ${(cy + o).toFixed(1)} ${(cx - r).toFixed(1)} ${cy.toFixed(1)}`,\n    `C ${(cx - r).toFixed(1)} ${(cy - o).toFixed(1)} ${(cx - o).toFixed(1)} ${(cy - r).toFixed(1)} ${cx.toFixed(1)} ${(cy - r).toFixed(1)}`,\n    `C ${(cx + o).toFixed(1)} ${(cy - r).toFixed(1)} ${(cx + r).toFixed(1)} ${(cy - o).toFixed(1)} ${(cx + r).toFixed(1)} ${cy.toFixed(1)}`,\n  ].join(\" \")\n}\n\n/**\n * Tile copy so the ring is fully blanketed with no visible gap.\n * Rotation makes the loop seamless, so we only need to cover the\n * circumference — no exact tile-width matching required.\n */\nexport function buildRingCopy(\n  line: string,\n  other: string,\n  mix: boolean,\n  circumference: number,\n  fontSize: number\n): string {\n  const unit = mix\n    ? `${line}   ·   ${other}   ·   `\n    : `${line}   ·   ${line}   ·   ${other}   ·   `\n  // Bold + letter-spacing runs wider than 0.5em — over-estimate so we never underfill.\n  const unitWidth = Math.max(unit.length * fontSize * 0.72, 1)\n  const repeats = Math.max(3, Math.ceil(circumference / unitWidth) + 1)\n  return unit.repeat(repeats)\n}\n\n/**\n * Five concentric circles nested as an upper semicircle.\n * Outer radius fits both width and band height so a short band\n * still shows complete arches instead of an equatorial clip.\n */\nexport function buildRings(\n  width: number,\n  bandHeight: number,\n  lines: string[],\n  seed: number\n): Ring[] {\n  const rand = mulberry32(seed)\n  const cx = width / 2\n  const cy = bandHeight\n  const strokePad = STROKE / 2 + 2\n  // Full-width nest needs height ≈ width/2; if the band is shorter,\n  // shrink the nest so the upper semicircle stays fully visible.\n  const outer = Math.max(\n    Math.min(width / 2 - strokePad, bandHeight - strokePad),\n    STROKE * 4\n  )\n  const radii = Array.from(\n    { length: RING_COUNT },\n    (_, i) => (outer * (i + 1)) / RING_COUNT\n  )\n\n  const fontSize = Math.min(24, Math.max(16, width * 0.022))\n  const pool = lines.length > 0 ? lines : DEFAULT_LINES\n\n  return radii.map((r, i) => {\n    const line = pool[Math.floor(rand() * pool.length)]!\n    const other = pool[Math.floor(rand() * pool.length)]!\n    const circumference = 2 * Math.PI * r\n    const text = buildRingCopy(\n      line,\n      other,\n      rand() > 0.45,\n      circumference,\n      fontSize\n    )\n\n    return {\n      d: circlePath(cx, cy, r),\n      cx,\n      cy,\n      strokeWidth: STROKE,\n      fontSize,\n      text,\n      // Keep angular pace lively but readable; outer rings a touch slower.\n      duration: 42 + i * 8 + rand() * 10,\n      phase: rand(),\n      // Alternate direction each ring (inner → outer)\n      reverse: i % 2 === 1,\n    }\n  })\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TangleFooterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    lines = DEFAULT_LINES,\n    ribbon,\n    textColor,\n    background,\n    height,\n    seed = 23,\n    label = \"Site footer\",\n  }: Props = $props()\n\n  let uid = $state(\"\")\n  let rootEl: HTMLElement | undefined = $state()\n  let width = $state(0)\n  let paused = $state(false)\n  let reduce = $state(false)\n\n  const bandHeight = $derived(height ?? (width > 0 ? width / 2 : 0))\n  const rings = $derived(\n    width > 0 && bandHeight > 0\n      ? buildRings(width, bandHeight, lines, seed)\n      : []\n  )\n  const showSvg = $derived(uid !== \"\" && width > 0 && bandHeight > 0)\n\n  onMount(() => {\n    uid =\n      typeof crypto !== \"undefined\" && \"randomUUID\" in crypto\n        ? crypto.randomUUID().replace(/-/g, \"\")\n        : `tangle${Date.now().toString(36)}`\n\n    const el = rootEl\n    if (!el) return\n\n    const measure = () => {\n      width = el.clientWidth\n    }\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(el)\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        paused = !(entry?.isIntersecting ?? true)\n      },\n      { rootMargin: \"64px\", threshold: 0 }\n    )\n    io.observe(el)\n\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n    const applyReduce = () => {\n      reduce = mq.matches\n    }\n    applyReduce()\n    mq.addEventListener(\"change\", applyReduce)\n\n    return () => {\n      ro.disconnect()\n      io.disconnect()\n      mq.removeEventListener(\"change\", applyReduce)\n    }\n  })\n</script>\n\n<footer\n  bind:this={rootEl}\n  data-slot=\"tangle-footer\"\n  aria-label={label}\n  class={cn(\n    \"relative w-full overflow-hidden\",\n    background === undefined && \"bg-[#EFEAE2] dark:bg-[#121210]\",\n    ribbon == null && \"[--tangle-ribbon:#141414] dark:[--tangle-ribbon:#E8E4DC]\",\n    textColor == null &&\n      \"[--tangle-text:#F4F0E8] dark:[--tangle-text:#161616]\",\n    className\n  )}\n  style:background={background}\n  style:height={bandHeight > 0 ? `${bandHeight}px` : undefined}\n  style:aspect-ratio={height == null ? \"2 / 1\" : undefined}\n>\n  {#if showSvg}\n    <svg\n      class=\"absolute inset-0 size-full\"\n      class:tangle-enter={!reduce}\n      viewBox=\"0 0 {width} {bandHeight}\"\n      preserveAspectRatio=\"xMidYMax slice\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        {#each rings as ring, i}\n          <path id=\"{uid}-path-{i}\" d={ring.d} fill=\"none\"></path>\n        {/each}\n      </defs>\n\n      {#each rings as ring, i}\n        {@const pathId = `${uid}-path-${i}`}\n        <g\n          style={reduce\n            ? undefined\n            : `transform-box: view-box; transform-origin: ${ring.cx}px ${ring.cy}px; animation: tangle-spin ${ring.duration}s linear infinite; animation-direction: ${ring.reverse ? \"reverse\" : \"normal\"}; animation-delay: ${-ring.phase * ring.duration}s; animation-play-state: ${paused ? \"paused\" : \"running\"}; will-change: transform;`}\n        >\n          <use\n            href=\"#{pathId}\"\n            stroke-width={ring.strokeWidth}\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            fill=\"none\"\n            style=\"stroke: {ribbon ?? 'var(--tangle-ribbon)'};\"\n          ></use>\n          <text\n            font-size={ring.fontSize}\n            font-family=\"ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif\"\n            font-weight=\"700\"\n            letter-spacing=\"0.05em\"\n            dominant-baseline=\"central\"\n            style=\"fill: {textColor ??\n              'var(--tangle-text)'}; user-select: none; pointer-events: none;\"\n          >\n            <textPath href=\"#{pathId}\" startOffset=\"0\" method=\"align\"\n              >{ring.text}</textPath\n            >\n          </text>\n        </g>\n      {/each}\n    </svg>\n  {/if}\n\n  <p class=\"sr-only\">{lines.join(\" \")}</p>\n</footer>\n\n<style>\n  @keyframes tangle-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes tangle-enter {\n    from {\n      opacity: 0;\n      transform: translateY(12px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .tangle-enter {\n    animation: tangle-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;\n  }\n</style>\n",
+      "content": "<script module lang=\"ts\">\nexport const DEFAULT_LINES = [\n  \"Ship something opinionated — less boilerplate, clearer decisions.\",\n  \"Knows what’s going on. Can you check in with them and see what’s next.\",\n  \"The new timeline should be ready by Friday, although it’s probably going to slip.\",\n  \"Open the docs, grab a component, and make it yours in the codebase.\",\n  \"Radiant lines, shader wash, gooey picker — install what you need and move.\",\n]\n\nexport type TangleFooterTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type TangleFooterOptions = {\n  /** Phrases that run along the vines. */\n  lines?: string[]\n  /** Ribbon color. Omit to follow `theme` (ink on light, cream on dark). */\n  ribbon?: string\n  /** Lettering on the ribbons. Omit to follow `theme`. */\n  textColor?: string\n  /** How many vines. Default `4`. */\n  vines?: number\n  /** Marquee speed along the vines, in px per second. Default `36`. */\n  speed?: number\n  /** Ribbon width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: TangleFooterTheme\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const LIGHT_RIBBON = \"#141414\"\nexport const LIGHT_TEXT = \"#F4F0E8\"\nexport const LIGHT_BG = \"#EFEAE2\"\nexport const DARK_RIBBON = \"#E8E4DC\"\nexport const DARK_TEXT = \"#161616\"\nexport const DARK_BG = \"#121210\"\nexport const DEFAULT_VINES = 4\nexport const DEFAULT_SPEED = 36\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Arc length in px. */\n  length: number\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n  /** The copy that repeats along this vine. */\n  text: string\n  /** Marquee speed multiplier and starting offset (0–1 of the copy). */\n  pace: number\n  phase: number\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** Ribbon width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.019, 16, 28)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: {\n    vines?: number\n    thickness?: number\n    seed?: number\n    lines?: string[]\n  } = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const w = numberOr(options.thickness, autoThickness(width), 6, 80)\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  const pool = options.lines?.filter((line) => line.trim()) ?? []\n  const lines = pool.length ? pool : DEFAULT_LINES\n  // Pieces short enough that the two strands of any loop land in different\n  // pieces, so a loop can cross over itself.\n  const piece = w * 4\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.6 + (v / Math.max(1, count - 1)) * 0.3)\n    const wheel0 = Math.max(w * 1.2, height * (0.07 + rand() * 0.04))\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.2 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves.\n      let spoke = wheel * (1.5 + 1.05 * curl(s))\n      // Open any loop too tight to read, then keep it under the top edge.\n      if (spoke > wheel) spoke = Math.max(spoke, w * 2.3)\n      spoke = Math.min(spoke, Math.max(w, (y0 - w * 0.6) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so text and pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n    const depths = cuts.slice(0, -1).map(() => rand())\n\n    const line = lines[Math.floor(rand() * lines.length)]!\n    const other = lines[Math.floor(rand() * lines.length)]!\n    const text =\n      line === other ? `${line}   ·   ` : `${line}   ·   ${other}   ·   `\n\n    return {\n      points: Float32Array.from(points),\n      length: (samples - 1) * STEP,\n      cuts,\n      depths,\n      text,\n      pace: 0.8 + rand() * 0.4,\n      phase: rand(),\n    }\n  })\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: TangleFooterTheme = \"auto\"): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\ntype Glyph = { ch: string; adv: number }\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled text vines on a canvas. The vines grow in from the left the first\n * time they're seen, then the copy runs along them. Pauses off-screen and in\n * hidden tabs; holds still under `prefers-reduced-motion`.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  let glyphs: Glyph[][] = []\n  let units: number[] = []\n  /** Cached gap and ribbon paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; ribbon: Path2D }[][] = []\n  let thickness = 20\n  let font = \"\"\n  let dark = resolveDark(options.theme)\n  let grow = 0\n  let clock = 0\n  let seen = false\n  let onScreen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 6, 80)\n    vines = buildVines(w, h, { ...options, thickness })\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        ribbon: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n    const family = getComputedStyle(canvas).fontFamily || \"sans-serif\"\n    font = `700 ${Math.round(thickness * 0.5)}px ${family}`\n    ctx.font = font\n    const widths = new Map<string, number>()\n    glyphs = vines.map((vine) =>\n      Array.from(vine.text).map((ch) => {\n        let adv = widths.get(ch)\n        if (adv === undefined) {\n          adv = ctx.measureText(ch).width\n          widths.set(ch, adv)\n        }\n        return { ch, adv }\n      })\n    )\n    units = glyphs.map((list) => list.reduce((sum, g) => sum + g.adv, 0))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const last = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, last)\n    const to = clamp(Math.ceil(b), 0, last)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length) return\n\n    const ribbon = options.ribbon?.trim() || (dark ? DARK_RIBBON : LIGHT_RIBBON)\n    const ink = options.textColor?.trim() || (dark ? DARK_TEXT : LIGHT_TEXT)\n    const halo = Math.max(2.5, thickness * 0.16)\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 400)\n    const eased = 1 - (1 - grow) ** 3\n\n    // Lay the copy along each vine and hand every glyph to the pieces it\n    // touches, so a piece drawn on top never clips a neighbour's letters.\n    const placed: [number, number][][][] = vines.map((vine) =>\n      vine.depths.map(() => [])\n    )\n    vines.forEach((vine, v) => {\n      const list = glyphs[v]!\n      const unit = units[v]!\n      if (!list.length || unit <= 0) return\n      const reach = vine.length * eased\n      const shift = (clock * speed * vine.pace + vine.phase * unit) % unit\n      let at = -shift\n      let i = 0\n      while (at < reach) {\n        const adv = list[i]!.adv\n        if (at + adv > 0 && list[i]!.ch !== \" \") {\n          const mid = at + adv / 2\n          if (mid < reach) {\n            // Pieces are evenly spaced, so the ones a glyph spans are direct.\n            const per = vine.cuts[1]! - vine.cuts[0]!\n            const lastPiece = vine.depths.length - 1\n            const k0 = Math.min(\n              lastPiece,\n              Math.floor(Math.max(0, at) / STEP / per)\n            )\n            const k1 = Math.min(lastPiece, Math.floor((at + adv) / STEP / per))\n            for (let k = k0; k <= k1; k++) placed[v]![k]!.push([mid, i])\n          }\n        }\n        at += adv\n        i = (i + 1) % list.length\n      }\n    })\n\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"butt\"\n    ctx!.font = font\n    ctx!.textBaseline = \"middle\"\n    ctx!.textAlign = \"center\"\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = (vine.length * eased) / STEP\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const whole = b <= reach\n      const path = whole\n        ? paths[v]![index]!\n        : {\n            gap: tracePath(vine, a, reach),\n            ribbon: tracePath(vine, a - 1, reach),\n          }\n\n      // Cut a gap around this piece, so whatever it crosses reads as beneath.\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = thickness + halo * 2\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.strokeStyle = ribbon\n      ctx!.lineWidth = thickness\n      // The ribbon runs a sample past each end, hiding the seam between pieces.\n      ctx!.stroke(path.ribbon)\n\n      ctx!.fillStyle = ink\n      const p = vine.points\n      const lastSample = p.length / 2 - 1\n      for (const [mid, gi] of placed[v]![index]!) {\n        const s = mid / STEP\n        const i0 = clamp(Math.floor(s), 0, lastSample - 1)\n        const k = s - i0\n        const x0 = p[i0 * 2]!\n        const y0 = p[i0 * 2 + 1]!\n        const x1 = p[i0 * 2 + 2]!\n        const y1 = p[i0 * 2 + 3]!\n        const angle = Math.atan2(y1 - y0, x1 - x0)\n        const cos = Math.cos(angle)\n        const sin = Math.sin(angle)\n        ctx!.setTransform(\n          dpr * cos,\n          dpr * sin,\n          -dpr * sin,\n          dpr * cos,\n          dpr * (x0 + (x1 - x0) * k),\n          dpr * (y0 + (y1 - y0) * k)\n        )\n        ctx!.fillText(glyphs[v]![gi]!.ch, 0, 0)\n      }\n      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    }\n  }\n\n  const animating = () =>\n    onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const moving = animating()\n    if (reduce) grow = 1\n    else if (seen && moving) grow = Math.min(1, grow + dt / GROW_S)\n    if (moving) clock += dt\n    draw()\n    if (moving) raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme)\n    if (next === dark) return\n    dark = next\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      onScreen = entry?.isIntersecting ?? true\n      if (onScreen) seen = true\n      wake()\n    },\n    { rootMargin: \"64px\" }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n  // Canvas text can't wait on a web font by itself.\n  document.fonts?.ready.then(() => {\n    rebuild()\n    wake()\n  })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      syncTheme()\n      if (\n        prev.lines !== options.lines ||\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TangleFooterOptions {\n    class?: string\n    /**\n     * Field behind the vines. Omit for theme-aware defaults (warm cream on\n     * light, near-black on dark). Pass `\"transparent\"` when the parent\n     * already paints the stage.\n     */\n    background?: string\n    /** Footer height in px. Default `320`. */\n    height?: number\n    /** Accessible label. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    lines = DEFAULT_LINES,\n    ribbon,\n    textColor,\n    background,\n    height = 320,\n    vines = DEFAULT_VINES,\n    speed = DEFAULT_SPEED,\n    thickness,\n    seed = DEFAULT_SEED,\n    theme = \"auto\",\n    label = \"Site footer\",\n  }: Props = $props()\n\n  /** Stage color before and behind the canvas; hex literals for Tailwind. */\n  const SURFACE: Record<TangleFooterTheme, string> = {\n    auto: \"bg-[#EFEAE2] dark:bg-[#121210]\",\n    dark: \"bg-[#121210]\",\n    light: \"bg-[#EFEAE2]\",\n  }\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: TangleFooterInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createTangleFooter(\n      canvas,\n      untrack(() => ({\n        lines,\n        ribbon,\n        textColor,\n        vines,\n        speed,\n        thickness,\n        seed,\n        theme,\n      }))\n    )\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      lines,\n      ribbon,\n      textColor,\n      vines,\n      speed,\n      thickness,\n      seed,\n      theme,\n    })\n  })\n</script>\n\n<footer\n  data-slot=\"tangle-footer\"\n  aria-label={label}\n  class={cn(\n    \"relative w-full overflow-hidden\",\n    background === undefined && (SURFACE[theme] ?? SURFACE.auto),\n    className\n  )}\n  style:background={background}\n  style:height=\"{height}px\"\n>\n  <canvas bind:this={canvas} aria-hidden=\"true\" class=\"absolute inset-0 size-full\"\n  ></canvas>\n  <p class=\"sr-only\">{lines.join(\" \")}</p>\n</footer>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/tangle-footer.svelte"
     }
diff --git a/public/r/tangle-footer.json b/public/r/tangle-footer.json
index 50f6ffa..5c38bd4 100644
--- a/public/r/tangle-footer.json
+++ b/public/r/tangle-footer.json
@@ -2,14 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tangle-footer",
   "title": "Tangle Footer",
-  "description": "A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.",
-  "dependencies": [
-    "motion"
-  ],
+  "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
   "files": [
     {
       "path": "registry/tangle-footer/tangle-footer.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_LINES = [\n  \"Ship something opinionated — less boilerplate, clearer decisions.\",\n  \"Knows what’s going on. Can you check in with them and see what’s next.\",\n  \"The new timeline should be ready by Friday, although it’s probably going to slip.\",\n  \"Open the docs, grab a component, and make it yours in the codebase.\",\n  \"Radiant lines, shader wash, gooey picker — install what you need and move.\",\n]\n\nexport type Ring = {\n  d: string\n  cx: number\n  cy: number\n  strokeWidth: number\n  fontSize: number\n  /** Text repeated enough to blanket the full circumference. */\n  text: string\n  /** Seconds for one full revolution. */\n  duration: number\n  /** Fraction of a turn (0–1) to offset the starting rotation. */\n  phase: number\n  reverse: boolean\n}\n\nexport type TangleFooterOptions = {\n  /** Phrases sampled randomly onto rings. */\n  lines?: string[]\n  /**\n   * Ribbon (stroke) color. Omit for theme-aware defaults\n   * (near-black in light, soft cream in dark).\n   */\n  ribbon?: string\n  /**\n   * Text fill on the ribbons. Omit for theme-aware defaults\n   * (cream in light, near-black in dark).\n   */\n  textColor?: string\n  /**\n   * Field behind the rings. Omit for theme-aware defaults\n   * (warm cream in light, near-black in dark). Pass `\"transparent\"`\n   * when the parent already paints the stage.\n   */\n  background?: string\n  /**\n   * Band height in px. Omit to use half the measured width\n   * (upper semicircle of a full-width nest). When set shorter\n   * than that, the nest scales down to fit so rings stay intact.\n   */\n  height?: number\n  /** Seed for random line / marquee assignment across rings. */\n  seed?: number\n  /** Accessible label. */\n  label?: string\n}\n\nexport const RING_COUNT = 5\n\nexport const K = 0.5522847498\nexport const STROKE = 28\n\n/** Mulberry32 — deterministic PRNG so rings stay stable across re-renders. */\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\n/** Perfect circle as four cubics (container clips to the upper half). */\nexport function circlePath(cx: number, cy: number, r: number): string {\n  const o = r * K\n  return [\n    `M ${(cx + r).toFixed(1)} ${cy.toFixed(1)}`,\n    `C ${(cx + r).toFixed(1)} ${(cy + o).toFixed(1)} ${(cx + o).toFixed(1)} ${(cy + r).toFixed(1)} ${cx.toFixed(1)} ${(cy + r).toFixed(1)}`,\n    `C ${(cx - o).toFixed(1)} ${(cy + r).toFixed(1)} ${(cx - r).toFixed(1)} ${(cy + o).toFixed(1)} ${(cx - r).toFixed(1)} ${cy.toFixed(1)}`,\n    `C ${(cx - r).toFixed(1)} ${(cy - o).toFixed(1)} ${(cx - o).toFixed(1)} ${(cy - r).toFixed(1)} ${cx.toFixed(1)} ${(cy - r).toFixed(1)}`,\n    `C ${(cx + o).toFixed(1)} ${(cy - r).toFixed(1)} ${(cx + r).toFixed(1)} ${(cy - o).toFixed(1)} ${(cx + r).toFixed(1)} ${cy.toFixed(1)}`,\n  ].join(\" \")\n}\n\n/**\n * Tile copy so the ring is fully blanketed with no visible gap.\n * Rotation makes the loop seamless, so we only need to cover the\n * circumference — no exact tile-width matching required.\n */\nexport function buildRingCopy(\n  line: string,\n  other: string,\n  mix: boolean,\n  circumference: number,\n  fontSize: number\n): string {\n  const unit = mix\n    ? `${line}   ·   ${other}   ·   `\n    : `${line}   ·   ${line}   ·   ${other}   ·   `\n  // Bold + letter-spacing runs wider than 0.5em — over-estimate so we never underfill.\n  const unitWidth = Math.max(unit.length * fontSize * 0.72, 1)\n  const repeats = Math.max(3, Math.ceil(circumference / unitWidth) + 1)\n  return unit.repeat(repeats)\n}\n\n/**\n * Five concentric circles nested as an upper semicircle.\n * Outer radius fits both width and band height so a short band\n * still shows complete arches instead of an equatorial clip.\n */\nexport function buildRings(\n  width: number,\n  bandHeight: number,\n  lines: string[],\n  seed: number\n): Ring[] {\n  const rand = mulberry32(seed)\n  const cx = width / 2\n  const cy = bandHeight\n  const strokePad = STROKE / 2 + 2\n  // Full-width nest needs height ≈ width/2; if the band is shorter,\n  // shrink the nest so the upper semicircle stays fully visible.\n  const outer = Math.max(\n    Math.min(width / 2 - strokePad, bandHeight - strokePad),\n    STROKE * 4\n  )\n  const radii = Array.from(\n    { length: RING_COUNT },\n    (_, i) => (outer * (i + 1)) / RING_COUNT\n  )\n\n  const fontSize = Math.min(24, Math.max(16, width * 0.022))\n  const pool = lines.length > 0 ? lines : DEFAULT_LINES\n\n  return radii.map((r, i) => {\n    const line = pool[Math.floor(rand() * pool.length)]!\n    const other = pool[Math.floor(rand() * pool.length)]!\n    const circumference = 2 * Math.PI * r\n    const text = buildRingCopy(\n      line,\n      other,\n      rand() > 0.45,\n      circumference,\n      fontSize\n    )\n\n    return {\n      d: circlePath(cx, cy, r),\n      cx,\n      cy,\n      strokeWidth: STROKE,\n      fontSize,\n      text,\n      // Keep angular pace lively but readable; outer rings a touch slower.\n      duration: 42 + i * 8 + rand() * 10,\n      phase: rand(),\n      // Alternate direction each ring (inner → outer)\n      reverse: i % 2 === 1,\n    }\n  })\n}\n\nexport type TangleFooterProps = TangleFooterOptions & {\n  className?: string\n}\n\n/**\n * Footer of five nested text rings — full-width upper semicircle.\n * The marquee is a continuous rotation of each ring around its center.\n * A full turn is inherently seamless, so it runs on GPU-friendly CSS\n * transforms with no per-frame layout work.\n */\nexport function TangleFooter({\n  className,\n  lines = DEFAULT_LINES,\n  ribbon,\n  textColor,\n  background,\n  height,\n  seed = 23,\n  label = \"Site footer\",\n}: TangleFooterProps) {\n  const reduce = useReducedMotion() ?? false\n  const uid = useId().replace(/:/g, \"\")\n  const rootRef = useRef<HTMLElement>(null)\n  const [width, setWidth] = useState(0)\n  const [paused, setPaused] = useState(false)\n\n  useEffect(() => {\n    const el = rootRef.current\n    if (!el) return\n\n    const measure = () => {\n      setWidth(el.clientWidth)\n    }\n\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  // Pause the animation while off-screen so it never wastes frames.\n  useEffect(() => {\n    const el = rootRef.current\n    if (!el) return\n\n    const io = new IntersectionObserver(\n      ([entry]) => setPaused(!(entry?.isIntersecting ?? true)),\n      { rootMargin: \"64px\", threshold: 0 }\n    )\n    io.observe(el)\n    return () => io.disconnect()\n  }, [])\n\n  const bandHeight = height ?? (width > 0 ? width / 2 : 0)\n  const rings = useMemo(\n    () =>\n      width > 0 && bandHeight > 0\n        ? buildRings(width, bandHeight, lines, seed)\n        : [],\n    [width, bandHeight, lines, seed]\n  )\n\n  const spinName = `tangle-spin-${uid}`\n\n  return (\n    <footer\n      ref={rootRef}\n      data-slot=\"tangle-footer\"\n      aria-label={label}\n      className={cn(\n        \"relative w-full overflow-hidden\",\n        // Theme tokens — skipped when explicit color props are passed\n        background === undefined && \"bg-[#EFEAE2] dark:bg-[#121210]\",\n        ribbon == null &&\n          \"[--tangle-ribbon:#141414] dark:[--tangle-ribbon:#E8E4DC]\",\n        textColor == null &&\n          \"[--tangle-text:#F4F0E8] dark:[--tangle-text:#161616]\",\n        className\n      )}\n      style={{\n        background,\n        height: bandHeight > 0 ? bandHeight : undefined,\n        aspectRatio: height == null ? \"2 / 1\" : undefined,\n      }}\n    >\n      <style>{`@keyframes ${spinName}{to{transform:rotate(360deg)}}`}</style>\n\n      {width > 0 && bandHeight > 0 ? (\n        <motion.svg\n          className=\"absolute inset-0 size-full\"\n          viewBox={`0 0 ${width} ${bandHeight}`}\n          preserveAspectRatio=\"xMidYMax slice\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          initial={reduce ? false : { opacity: 0, y: 12 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}\n        >\n          <defs>\n            {rings.map((ring, i) => (\n              <path\n                key={`def-${i}`}\n                id={`${uid}-path-${i}`}\n                d={ring.d}\n                fill=\"none\"\n              />\n            ))}\n          </defs>\n\n          {rings.map((ring, i) => {\n            const pathId = `${uid}-path-${i}`\n            return (\n              <g\n                key={`ring-${i}`}\n                style={\n                  reduce\n                    ? undefined\n                    : {\n                        transformBox: \"view-box\",\n                        transformOrigin: `${ring.cx}px ${ring.cy}px`,\n                        animation: `${spinName} ${ring.duration}s linear infinite`,\n                        animationDirection: ring.reverse ? \"reverse\" : \"normal\",\n                        animationDelay: `${-ring.phase * ring.duration}s`,\n                        animationPlayState: paused ? \"paused\" : \"running\",\n                        willChange: \"transform\",\n                      }\n                }\n              >\n                <use\n                  href={`#${pathId}`}\n                  strokeWidth={ring.strokeWidth}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  fill=\"none\"\n                  style={{\n                    // Live CSS so `var(--tangle-ribbon)` tracks `html.dark`.\n                    stroke: ribbon ?? \"var(--tangle-ribbon)\",\n                  }}\n                />\n                <text\n                  fontSize={ring.fontSize}\n                  fontFamily=\"ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif\"\n                  fontWeight={700}\n                  letterSpacing=\"0.05em\"\n                  dominantBaseline=\"central\"\n                  style={{\n                    fill: textColor ?? \"var(--tangle-text)\",\n                    userSelect: \"none\",\n                    pointerEvents: \"none\",\n                  }}\n                >\n                  <textPath href={`#${pathId}`} startOffset=\"0\" method=\"align\">\n                    {ring.text}\n                  </textPath>\n                </text>\n              </g>\n            )\n          })}\n        </motion.svg>\n      ) : null}\n\n      <p className=\"sr-only\">{lines.join(\" \")}</p>\n    </footer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_LINES = [\n  \"Ship something opinionated — less boilerplate, clearer decisions.\",\n  \"Knows what’s going on. Can you check in with them and see what’s next.\",\n  \"The new timeline should be ready by Friday, although it’s probably going to slip.\",\n  \"Open the docs, grab a component, and make it yours in the codebase.\",\n  \"Radiant lines, shader wash, gooey picker — install what you need and move.\",\n]\n\nexport type TangleFooterTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type TangleFooterOptions = {\n  /** Phrases that run along the vines. */\n  lines?: string[]\n  /** Ribbon color. Omit to follow `theme` (ink on light, cream on dark). */\n  ribbon?: string\n  /** Lettering on the ribbons. Omit to follow `theme`. */\n  textColor?: string\n  /** How many vines. Default `4`. */\n  vines?: number\n  /** Marquee speed along the vines, in px per second. Default `36`. */\n  speed?: number\n  /** Ribbon width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: TangleFooterTheme\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const LIGHT_RIBBON = \"#141414\"\nexport const LIGHT_TEXT = \"#F4F0E8\"\nexport const LIGHT_BG = \"#EFEAE2\"\nexport const DARK_RIBBON = \"#E8E4DC\"\nexport const DARK_TEXT = \"#161616\"\nexport const DARK_BG = \"#121210\"\nexport const DEFAULT_VINES = 4\nexport const DEFAULT_SPEED = 36\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Arc length in px. */\n  length: number\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n  /** The copy that repeats along this vine. */\n  text: string\n  /** Marquee speed multiplier and starting offset (0–1 of the copy). */\n  pace: number\n  phase: number\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** Ribbon width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.019, 16, 28)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: {\n    vines?: number\n    thickness?: number\n    seed?: number\n    lines?: string[]\n  } = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const w = numberOr(options.thickness, autoThickness(width), 6, 80)\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  const pool = options.lines?.filter((line) => line.trim()) ?? []\n  const lines = pool.length ? pool : DEFAULT_LINES\n  // Pieces short enough that the two strands of any loop land in different\n  // pieces, so a loop can cross over itself.\n  const piece = w * 4\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.6 + (v / Math.max(1, count - 1)) * 0.3)\n    const wheel0 = Math.max(w * 1.2, height * (0.07 + rand() * 0.04))\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.2 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves.\n      let spoke = wheel * (1.5 + 1.05 * curl(s))\n      // Open any loop too tight to read, then keep it under the top edge.\n      if (spoke > wheel) spoke = Math.max(spoke, w * 2.3)\n      spoke = Math.min(spoke, Math.max(w, (y0 - w * 0.6) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so text and pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n    const depths = cuts.slice(0, -1).map(() => rand())\n\n    const line = lines[Math.floor(rand() * lines.length)]!\n    const other = lines[Math.floor(rand() * lines.length)]!\n    const text =\n      line === other ? `${line}   ·   ` : `${line}   ·   ${other}   ·   `\n\n    return {\n      points: Float32Array.from(points),\n      length: (samples - 1) * STEP,\n      cuts,\n      depths,\n      text,\n      pace: 0.8 + rand() * 0.4,\n      phase: rand(),\n    }\n  })\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: TangleFooterTheme = \"auto\"): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\ntype Glyph = { ch: string; adv: number }\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled text vines on a canvas. The vines grow in from the left the first\n * time they're seen, then the copy runs along them. Pauses off-screen and in\n * hidden tabs; holds still under `prefers-reduced-motion`.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  let glyphs: Glyph[][] = []\n  let units: number[] = []\n  /** Cached gap and ribbon paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; ribbon: Path2D }[][] = []\n  let thickness = 20\n  let font = \"\"\n  let dark = resolveDark(options.theme)\n  let grow = 0\n  let clock = 0\n  let seen = false\n  let onScreen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 6, 80)\n    vines = buildVines(w, h, { ...options, thickness })\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        ribbon: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n    const family = getComputedStyle(canvas).fontFamily || \"sans-serif\"\n    font = `700 ${Math.round(thickness * 0.5)}px ${family}`\n    ctx.font = font\n    const widths = new Map<string, number>()\n    glyphs = vines.map((vine) =>\n      Array.from(vine.text).map((ch) => {\n        let adv = widths.get(ch)\n        if (adv === undefined) {\n          adv = ctx.measureText(ch).width\n          widths.set(ch, adv)\n        }\n        return { ch, adv }\n      })\n    )\n    units = glyphs.map((list) => list.reduce((sum, g) => sum + g.adv, 0))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const last = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, last)\n    const to = clamp(Math.ceil(b), 0, last)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length) return\n\n    const ribbon = options.ribbon?.trim() || (dark ? DARK_RIBBON : LIGHT_RIBBON)\n    const ink = options.textColor?.trim() || (dark ? DARK_TEXT : LIGHT_TEXT)\n    const halo = Math.max(2.5, thickness * 0.16)\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 400)\n    const eased = 1 - (1 - grow) ** 3\n\n    // Lay the copy along each vine and hand every glyph to the pieces it\n    // touches, so a piece drawn on top never clips a neighbour's letters.\n    const placed: [number, number][][][] = vines.map((vine) =>\n      vine.depths.map(() => [])\n    )\n    vines.forEach((vine, v) => {\n      const list = glyphs[v]!\n      const unit = units[v]!\n      if (!list.length || unit <= 0) return\n      const reach = vine.length * eased\n      const shift = (clock * speed * vine.pace + vine.phase * unit) % unit\n      let at = -shift\n      let i = 0\n      while (at < reach) {\n        const adv = list[i]!.adv\n        if (at + adv > 0 && list[i]!.ch !== \" \") {\n          const mid = at + adv / 2\n          if (mid < reach) {\n            // Pieces are evenly spaced, so the ones a glyph spans are direct.\n            const per = vine.cuts[1]! - vine.cuts[0]!\n            const lastPiece = vine.depths.length - 1\n            const k0 = Math.min(\n              lastPiece,\n              Math.floor(Math.max(0, at) / STEP / per)\n            )\n            const k1 = Math.min(lastPiece, Math.floor((at + adv) / STEP / per))\n            for (let k = k0; k <= k1; k++) placed[v]![k]!.push([mid, i])\n          }\n        }\n        at += adv\n        i = (i + 1) % list.length\n      }\n    })\n\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"butt\"\n    ctx!.font = font\n    ctx!.textBaseline = \"middle\"\n    ctx!.textAlign = \"center\"\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = (vine.length * eased) / STEP\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const whole = b <= reach\n      const path = whole\n        ? paths[v]![index]!\n        : {\n            gap: tracePath(vine, a, reach),\n            ribbon: tracePath(vine, a - 1, reach),\n          }\n\n      // Cut a gap around this piece, so whatever it crosses reads as beneath.\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = thickness + halo * 2\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.strokeStyle = ribbon\n      ctx!.lineWidth = thickness\n      // The ribbon runs a sample past each end, hiding the seam between pieces.\n      ctx!.stroke(path.ribbon)\n\n      ctx!.fillStyle = ink\n      const p = vine.points\n      const lastSample = p.length / 2 - 1\n      for (const [mid, gi] of placed[v]![index]!) {\n        const s = mid / STEP\n        const i0 = clamp(Math.floor(s), 0, lastSample - 1)\n        const k = s - i0\n        const x0 = p[i0 * 2]!\n        const y0 = p[i0 * 2 + 1]!\n        const x1 = p[i0 * 2 + 2]!\n        const y1 = p[i0 * 2 + 3]!\n        const angle = Math.atan2(y1 - y0, x1 - x0)\n        const cos = Math.cos(angle)\n        const sin = Math.sin(angle)\n        ctx!.setTransform(\n          dpr * cos,\n          dpr * sin,\n          -dpr * sin,\n          dpr * cos,\n          dpr * (x0 + (x1 - x0) * k),\n          dpr * (y0 + (y1 - y0) * k)\n        )\n        ctx!.fillText(glyphs[v]![gi]!.ch, 0, 0)\n      }\n      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    }\n  }\n\n  const animating = () =>\n    onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const moving = animating()\n    if (reduce) grow = 1\n    else if (seen && moving) grow = Math.min(1, grow + dt / GROW_S)\n    if (moving) clock += dt\n    draw()\n    if (moving) raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme)\n    if (next === dark) return\n    dark = next\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      onScreen = entry?.isIntersecting ?? true\n      if (onScreen) seen = true\n      wake()\n    },\n    { rootMargin: \"64px\" }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n  // Canvas text can't wait on a web font by itself.\n  document.fonts?.ready.then(() => {\n    rebuild()\n    wake()\n  })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      syncTheme()\n      if (\n        prev.lines !== options.lines ||\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type TangleFooterProps = TangleFooterOptions & {\n  className?: string\n  /**\n   * Field behind the vines. Omit for theme-aware defaults (warm cream on\n   * light, near-black on dark). Pass `\"transparent\"` when the parent\n   * already paints the stage.\n   */\n  background?: string\n  /** Footer height in px. Default `320`. */\n  height?: number\n  /** Accessible label. */\n  label?: string\n}\n\n/** Stage color before and behind the canvas; hex literals for Tailwind. */\nconst SURFACE: Record<TangleFooterTheme, string> = {\n  auto: \"bg-[#EFEAE2] dark:bg-[#121210]\",\n  dark: \"bg-[#121210]\",\n  light: \"bg-[#EFEAE2]\",\n}\n\n/**\n * A footer of tangled vines — thick ribbons that curl into loops and weave\n * over and under each other, with your copy running along them. The vines\n * grow in the first time the footer is seen.\n */\nexport function TangleFooter({\n  className,\n  lines = DEFAULT_LINES,\n  ribbon,\n  textColor,\n  background,\n  height = 320,\n  vines = DEFAULT_VINES,\n  speed = DEFAULT_SPEED,\n  thickness,\n  seed = DEFAULT_SEED,\n  theme = \"auto\",\n  label = \"Site footer\",\n}: TangleFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<TangleFooterInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createTangleFooter(canvas, {\n      lines,\n      ribbon,\n      textColor,\n      vines,\n      speed,\n      thickness,\n      seed,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      lines,\n      ribbon,\n      textColor,\n      vines,\n      speed,\n      thickness,\n      seed,\n      theme,\n    })\n  }, [lines, ribbon, textColor, vines, speed, thickness, seed, theme])\n\n  return (\n    <footer\n      data-slot=\"tangle-footer\"\n      aria-label={label}\n      className={cn(\n        \"relative w-full overflow-hidden\",\n        background === undefined && (SURFACE[theme] ?? SURFACE.auto),\n        className\n      )}\n      style={{ background, height }}\n    >\n      <canvas\n        ref={canvasRef}\n        aria-hidden\n        className=\"absolute inset-0 size-full\"\n      />\n      <p className=\"sr-only\">{lines.join(\" \")}</p>\n    </footer>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/tangle-footer.tsx"
     }
diff --git a/registry/tangle-footer/registry.json b/registry/tangle-footer/registry.json
index 83afe73..92a7f66 100644
--- a/registry/tangle-footer/registry.json
+++ b/registry/tangle-footer/registry.json
@@ -5,8 +5,7 @@
       "name": "tangle-footer",
       "type": "registry:ui",
       "title": "Tangle Footer",
-      "description": "A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.",
-      "dependencies": ["motion"],
+      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
       "files": [
         {
           "path": "tangle-footer.tsx",
@@ -19,7 +18,7 @@
       "name": "tangle-footer-svelte",
       "type": "registry:ui",
       "title": "Tangle Footer",
-      "description": "A footer of tangled SVG ribbons — thick dark strokes with white text running along each path via textPath.",
+      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
       "files": [
         {
           "path": "tangle-footer.svelte",
diff --git a/registry/tangle-footer/tangle-footer-demo.tsx b/registry/tangle-footer/tangle-footer-demo.tsx
index 2640817..35e4d82 100644
--- a/registry/tangle-footer/tangle-footer-demo.tsx
+++ b/registry/tangle-footer/tangle-footer-demo.tsx
@@ -11,7 +11,12 @@ import { ComponentPreview } from "@/components/component-preview"
 import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import { cn } from "@/lib/utils"
-import { TangleFooter } from "@/registry/tangle-footer/tangle-footer"
+import {
+  DEFAULT_SEED,
+  DEFAULT_SPEED,
+  DEFAULT_VINES,
+  TangleFooter,
+} from "@/registry/tangle-footer/tangle-footer"
 
 /** Matches TangleFooter theme defaults (uppercase for color inputs). */
 const LIGHT = {
@@ -66,8 +71,10 @@ export function TangleFooterDemo() {
 
   const defaults = useMemo(
     () => ({
-      height: 280,
-      seed: 23,
+      height: 320,
+      vines: DEFAULT_VINES,
+      speed: DEFAULT_SPEED,
+      seed: DEFAULT_SEED,
       ribbon: palette.ribbon,
       textColor: palette.textColor,
       stage: palette.stage,
@@ -120,6 +127,8 @@ export function TangleFooterDemo() {
             <TangleFooter
               background="transparent"
               height={props.height}
+              vines={props.vines}
+              speed={props.speed}
               seed={props.seed}
               ribbon={useAutoTheme ? undefined : props.ribbon}
               textColor={useAutoTheme ? undefined : props.textColor}
@@ -134,8 +143,10 @@ export function TangleFooterDemo() {
         onReset={resetProps}
         component="TangleFooter"
         snippetProps={{
-          height: props.height,
-          seed: props.seed,
+          height: props.height === 320 ? undefined : props.height,
+          vines: props.vines === DEFAULT_VINES ? undefined : props.vines,
+          speed: props.speed === DEFAULT_SPEED ? undefined : props.speed,
+          seed: props.seed === DEFAULT_SEED ? undefined : props.seed,
           ribbon: useAutoTheme ? undefined : props.ribbon,
           textColor: useAutoTheme ? undefined : props.textColor,
         }}
@@ -158,11 +169,27 @@ export function TangleFooterDemo() {
         <ControlSlider
           label="Height"
           value={props.height}
-          min={160}
-          max={420}
+          min={200}
+          max={480}
           step={10}
           onChange={(v) => updateProp("height", v)}
         />
+        <ControlSlider
+          label="Vines"
+          value={props.vines}
+          min={1}
+          max={8}
+          step={1}
+          onChange={(v) => updateProp("vines", v)}
+        />
+        <ControlSlider
+          label="Speed"
+          value={props.speed}
+          min={0}
+          max={120}
+          step={2}
+          onChange={(v) => updateProp("speed", v)}
+        />
         <ControlSlider
           label="Seed"
           value={props.seed}
diff --git a/registry/tangle-footer/tangle-footer-vanilla.ts b/registry/tangle-footer/tangle-footer-vanilla.ts
index d60fe9c..3c9503a 100644
--- a/registry/tangle-footer/tangle-footer-vanilla.ts
+++ b/registry/tangle-footer/tangle-footer-vanilla.ts
@@ -6,58 +6,68 @@ export const DEFAULT_LINES = [
   "Radiant lines, shader wash, gooey picker — install what you need and move.",
 ]
 
-export type Ring = {
-  d: string
-  cx: number
-  cy: number
-  strokeWidth: number
-  fontSize: number
-  /** Text repeated enough to blanket the full circumference. */
-  text: string
-  /** Seconds for one full revolution. */
-  duration: number
-  /** Fraction of a turn (0–1) to offset the starting rotation. */
-  phase: number
-  reverse: boolean
-}
+export type TangleFooterTheme = "light" | "dark" | "auto"
 
 export type TangleFooterOptions = {
-  /** Phrases sampled randomly onto rings. */
+  /** Phrases that run along the vines. */
   lines?: string[]
-  /**
-   * Ribbon (stroke) color. Omit for theme-aware defaults
-   * (near-black in light, soft cream in dark).
-   */
+  /** Ribbon color. Omit to follow `theme` (ink on light, cream on dark). */
   ribbon?: string
-  /**
-   * Text fill on the ribbons. Omit for theme-aware defaults
-   * (cream in light, near-black in dark).
-   */
+  /** Lettering on the ribbons. Omit to follow `theme`. */
   textColor?: string
+  /** How many vines. Default `4`. */
+  vines?: number
+  /** Marquee speed along the vines, in px per second. Default `36`. */
+  speed?: number
+  /** Ribbon width in px. Omit to scale with the footer width. */
+  thickness?: number
+  /** Deterministic tangle. Default `23`. */
+  seed?: number
   /**
-   * Field behind the rings. Omit for theme-aware defaults
-   * (warm cream in light, near-black in dark). Pass `"transparent"`
-   * when the parent already paints the stage.
-   */
-  background?: string
-  /**
-   * Band height in px. Omit to use half the measured width
-   * (upper semicircle of a full-width nest). When set shorter
-   * than that, the nest scales down to fit so rings stay intact.
+   * Palette mode. Default `auto` follows shadcn / next-themes
+   * (`html.dark` class).
    */
-  height?: number
-  /** Seed for random line / marquee assignment across rings. */
-  seed?: number
-  /** Accessible label. */
-  label?: string
+  theme?: TangleFooterTheme
+}
+
+export type TangleFooterInstance = {
+  setOptions: (options: Partial<TangleFooterOptions>) => void
+  destroy: () => void
 }
 
-export const RING_COUNT = 5
+export const LIGHT_RIBBON = "#141414"
+export const LIGHT_TEXT = "#F4F0E8"
+export const LIGHT_BG = "#EFEAE2"
+export const DARK_RIBBON = "#E8E4DC"
+export const DARK_TEXT = "#161616"
+export const DARK_BG = "#121210"
+export const DEFAULT_VINES = 4
+export const DEFAULT_SPEED = 36
+export const DEFAULT_SEED = 23
 
-export const K = 0.5522847498
-export const STROKE = 28
+/** Spacing of the resampled vine, in px. */
+const STEP = 2
+/** Vines start and end this share of the width past each side. */
+const OVERHANG = 0.12
+/** Seconds for the vines to grow in. */
+const GROW_S = 1.8
+
+export type Vine = {
+  /** x, y pairs spaced `STEP` apart along the vine. */
+  points: Float32Array
+  /** Arc length in px. */
+  length: number
+  /** Where each piece of the vine starts, in samples, plus the end. */
+  cuts: number[]
+  /** Stacking order of each piece; higher draws on top. */
+  depths: number[]
+  /** The copy that repeats along this vine. */
+  text: string
+  /** Marquee speed multiplier and starting offset (0–1 of the copy). */
+  pace: number
+  phase: number
+}
 
-/** Mulberry32 — deterministic PRNG so rings stay stable across re-renders. */
 export function mulberry32(seed: number) {
   let t = seed >>> 0
   return () => {
@@ -68,92 +78,433 @@ export function mulberry32(seed: number) {
   }
 }
 
-/** Perfect circle as four cubics (container clips to the upper half). */
-export function circlePath(cx: number, cy: number, r: number): string {
-  const o = r * K
-  return [
-    `M ${(cx + r).toFixed(1)} ${cy.toFixed(1)}`,
-    `C ${(cx + r).toFixed(1)} ${(cy + o).toFixed(1)} ${(cx + o).toFixed(1)} ${(cy + r).toFixed(1)} ${cx.toFixed(1)} ${(cy + r).toFixed(1)}`,
-    `C ${(cx - o).toFixed(1)} ${(cy + r).toFixed(1)} ${(cx - r).toFixed(1)} ${(cy + o).toFixed(1)} ${(cx - r).toFixed(1)} ${cy.toFixed(1)}`,
-    `C ${(cx - r).toFixed(1)} ${(cy - o).toFixed(1)} ${(cx - o).toFixed(1)} ${(cy - r).toFixed(1)} ${cx.toFixed(1)} ${(cy - r).toFixed(1)}`,
-    `C ${(cx + o).toFixed(1)} ${(cy - r).toFixed(1)} ${(cx + r).toFixed(1)} ${(cy - o).toFixed(1)} ${(cx + r).toFixed(1)} ${cy.toFixed(1)}`,
-  ].join(" ")
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
 }
 
-/**
- * Tile copy so the ring is fully blanketed with no visible gap.
- * Rotation makes the loop seamless, so we only need to cover the
- * circumference — no exact tile-width matching required.
- */
-export function buildRingCopy(
-  line: string,
-  other: string,
-  mix: boolean,
-  circumference: number,
-  fontSize: number
-): string {
-  const unit = mix
-    ? `${line}   ·   ${other}   ·   `
-    : `${line}   ·   ${line}   ·   ${other}   ·   `
-  // Bold + letter-spacing runs wider than 0.5em — over-estimate so we never underfill.
-  const unitWidth = Math.max(unit.length * fontSize * 0.72, 1)
-  const repeats = Math.max(3, Math.ceil(circumference / unitWidth) + 1)
-  return unit.repeat(repeats)
+function numberOr(value: unknown, fallback: number, min: number, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+  return clamp(value, min, max)
+}
+
+/** Smooth wander in −1…1 from three detuned sines. */
+function wander(rand: () => number, scale: number) {
+  const waves = Array.from({ length: 3 }, (_, i) => ({
+    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,
+    p: rand() * Math.PI * 2,
+    a: 1 / (i + 1),
+  }))
+  const total = waves.reduce((sum, w) => sum + w.a, 0)
+  return (s: number) =>
+    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total
+}
+
+/** Ribbon width that suits a footer this wide. */
+export function autoThickness(width: number) {
+  return clamp(width * 0.019, 16, 28)
 }
 
 /**
- * Five concentric circles nested as an upper semicircle.
- * Outer radius fits both width and band height so a short band
- * still shows complete arches instead of an equatorial clip.
+ * Lays out the tangle. Each vine is a wheel rolling left to right with a
+ * pen on a spoke longer than the wheel (a prolate trochoid): where the pen
+ * outruns the wheel it curls back into a loop, so loops rise off a
+ * wandering baseline. Wheel size and spoke length drift along the vine,
+ * so some curls are big, some small, some just a wave.
+ *
+ * Every vine is cut into short pieces with random stacking, so vines pass
+ * over and under each other — and themselves — like a real tangle.
  */
-export function buildRings(
+export function buildVines(
   width: number,
-  bandHeight: number,
-  lines: string[],
-  seed: number
-): Ring[] {
-  const rand = mulberry32(seed)
-  const cx = width / 2
-  const cy = bandHeight
-  const strokePad = STROKE / 2 + 2
-  // Full-width nest needs height ≈ width/2; if the band is shorter,
-  // shrink the nest so the upper semicircle stays fully visible.
-  const outer = Math.max(
-    Math.min(width / 2 - strokePad, bandHeight - strokePad),
-    STROKE * 4
-  )
-  const radii = Array.from(
-    { length: RING_COUNT },
-    (_, i) => (outer * (i + 1)) / RING_COUNT
-  )
+  height: number,
+  options: {
+    vines?: number
+    thickness?: number
+    seed?: number
+    lines?: string[]
+  } = {}
+): Vine[] {
+  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))
+  const w = numberOr(options.thickness, autoThickness(width), 6, 80)
+  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))
+  const pool = options.lines?.filter((line) => line.trim()) ?? []
+  const lines = pool.length ? pool : DEFAULT_LINES
+  // Pieces short enough that the two strands of any loop land in different
+  // pieces, so a loop can cross over itself.
+  const piece = w * 4
 
-  const fontSize = Math.min(24, Math.max(16, width * 0.022))
-  const pool = lines.length > 0 ? lines : DEFAULT_LINES
-
-  return radii.map((r, i) => {
-    const line = pool[Math.floor(rand() * pool.length)]!
-    const other = pool[Math.floor(rand() * pool.length)]!
-    const circumference = 2 * Math.PI * r
-    const text = buildRingCopy(
-      line,
-      other,
-      rand() > 0.45,
-      circumference,
-      fontSize
-    )
+  return Array.from({ length: count }, (_, v) => {
+    const rand = mulberry32(seed * 7919 + v * 104729)
+    const scale = width * (0.18 + rand() * 0.12)
+    const baseline = wander(rand, scale * 1.6)
+    const size = wander(rand, scale)
+    const curl = wander(rand, scale * 0.8)
+    // Spread the vines through the lower band; loops climb from there.
+    const floor = height * (0.6 + (v / Math.max(1, count - 1)) * 0.3)
+    const wheel0 = Math.max(w * 1.2, height * (0.07 + rand() * 0.04))
+
+    const raw: number[] = []
+    let phi = rand() * Math.PI * 2
+    const start = -width * OVERHANG
+    const end = width * (1 + OVERHANG)
+    for (let s = start; s <= end; s += 1) {
+      const y0 = floor + height * 0.2 * baseline(s)
+      const wheel = wheel0 * (1 + 0.45 * size(s))
+      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the
+      // loop closes round. Below 1 the vine just waves.
+      let spoke = wheel * (1.5 + 1.05 * curl(s))
+      // Open any loop too tight to read, then keep it under the top edge.
+      if (spoke > wheel) spoke = Math.max(spoke, w * 2.3)
+      spoke = Math.min(spoke, Math.max(w, (y0 - w * 0.6) / 2))
+      phi += 1 / wheel
+      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))
+    }
+
+    // Resample to even spacing so text and pieces are measured in px.
+    const points: number[] = [raw[0]!, raw[1]!]
+    let carry = 0
+    for (let i = 2; i < raw.length; i += 2) {
+      const ax = raw[i - 2]!
+      const ay = raw[i - 1]!
+      const bx = raw[i]!
+      const by = raw[i + 1]!
+      const seg = Math.hypot(bx - ax, by - ay)
+      let at = STEP - carry
+      while (at <= seg) {
+        const k = at / seg
+        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)
+        at += STEP
+      }
+      carry = seg - (at - STEP)
+    }
+
+    const samples = points.length / 2
+    const per = Math.max(2, Math.round(piece / STEP))
+    const cuts: number[] = []
+    for (let i = 0; i < samples - 1; i += per) cuts.push(i)
+    cuts.push(samples - 1)
+    const depths = cuts.slice(0, -1).map(() => rand())
+
+    const line = lines[Math.floor(rand() * lines.length)]!
+    const other = lines[Math.floor(rand() * lines.length)]!
+    const text =
+      line === other ? `${line}   ·   ` : `${line}   ·   ${other}   ·   `
 
     return {
-      d: circlePath(cx, cy, r),
-      cx,
-      cy,
-      strokeWidth: STROKE,
-      fontSize,
+      points: Float32Array.from(points),
+      length: (samples - 1) * STEP,
+      cuts,
+      depths,
       text,
-      // Keep angular pace lively but readable; outer rings a touch slower.
-      duration: 42 + i * 8 + rand() * 10,
+      pace: 0.8 + rand() * 0.4,
       phase: rand(),
-      // Alternate direction each ring (inner → outer)
-      reverse: i % 2 === 1,
     }
   })
 }
+
+/** Resolves shadcn / next-themes dark mode (`attribute="class"` → `html.dark`). */
+export function isDarkTheme(): boolean {
+  if (typeof document === "undefined") return false
+  const root = document.documentElement
+  if (root.classList.contains("dark")) return true
+  if (root.classList.contains("light")) return false
+  const dataTheme = root.getAttribute("data-theme")
+  if (dataTheme === "dark") return true
+  if (dataTheme === "light") return false
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+}
+
+export function resolveDark(theme: TangleFooterTheme = "auto"): boolean {
+  if (theme === "dark") return true
+  if (theme === "light") return false
+  return isDarkTheme()
+}
+
+type Glyph = { ch: string; adv: number }
+type Piece = { vine: number; index: number; depth: number }
+
+/**
+ * Tangled text vines on a canvas. The vines grow in from the left the first
+ * time they're seen, then the copy runs along them. Pauses off-screen and in
+ * hidden tabs; holds still under `prefers-reduced-motion`.
+ */
+export function createTangleFooter(
+  canvas: HTMLCanvasElement,
+  initial: TangleFooterOptions = {}
+): TangleFooterInstance | null {
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return null
+
+  let options: TangleFooterOptions = { ...initial }
+  const size = { w: 0, h: 0, dpr: 1 }
+  let vines: Vine[] = []
+  let order: Piece[] = []
+  let glyphs: Glyph[][] = []
+  let units: number[] = []
+  /** Cached gap and ribbon paths per piece; the geometry never moves. */
+  let paths: { gap: Path2D; ribbon: Path2D }[][] = []
+  let thickness = 20
+  let font = ""
+  let dark = resolveDark(options.theme)
+  let grow = 0
+  let clock = 0
+  let seen = false
+  let onScreen = false
+  let raf = 0
+  let last = 0
+
+  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
+  let reduce = mqReduce.matches
+
+  const rebuild = () => {
+    const { w, h } = size
+    if (w < 2 || h < 2) return
+    thickness = numberOr(options.thickness, autoThickness(w), 6, 80)
+    vines = buildVines(w, h, { ...options, thickness })
+    paths = vines.map((vine) =>
+      vine.depths.map((_, k) => ({
+        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),
+        ribbon: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),
+      }))
+    )
+    order = vines
+      .flatMap((vine, v) =>
+        vine.depths.map((depth, index) => ({ vine: v, index, depth }))
+      )
+      .sort((a, b) => a.depth - b.depth)
+    const family = getComputedStyle(canvas).fontFamily || "sans-serif"
+    font = `700 ${Math.round(thickness * 0.5)}px ${family}`
+    ctx.font = font
+    const widths = new Map<string, number>()
+    glyphs = vines.map((vine) =>
+      Array.from(vine.text).map((ch) => {
+        let adv = widths.get(ch)
+        if (adv === undefined) {
+          adv = ctx.measureText(ch).width
+          widths.set(ch, adv)
+        }
+        return { ch, adv }
+      })
+    )
+    units = glyphs.map((list) => list.reduce((sum, g) => sum + g.adv, 0))
+  }
+
+  const resize = () => {
+    const parent = canvas.parentElement
+    if (!parent) return
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    const w = parent.clientWidth
+    const h = parent.clientHeight
+    if (w === size.w && h === size.h && dpr === size.dpr) return
+    Object.assign(size, { w, h, dpr })
+    canvas.width = Math.max(1, Math.floor(w * dpr))
+    canvas.height = Math.max(1, Math.floor(h * dpr))
+    rebuild()
+    wake()
+  }
+
+  /** The stretch of a vine from sample `a` to `b` as a path. */
+  function tracePath(vine: Vine, a: number, b: number) {
+    const p = vine.points
+    const last = p.length / 2 - 1
+    const from = clamp(Math.floor(a), 0, last)
+    const to = clamp(Math.ceil(b), 0, last)
+    const path = new Path2D()
+    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)
+    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)
+    return path
+  }
+
+  function draw() {
+    const { w, h, dpr } = size
+    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx!.clearRect(0, 0, w, h)
+    if (!vines.length) return
+
+    const ribbon = options.ribbon?.trim() || (dark ? DARK_RIBBON : LIGHT_RIBBON)
+    const ink = options.textColor?.trim() || (dark ? DARK_TEXT : LIGHT_TEXT)
+    const halo = Math.max(2.5, thickness * 0.16)
+    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 400)
+    const eased = 1 - (1 - grow) ** 3
+
+    // Lay the copy along each vine and hand every glyph to the pieces it
+    // touches, so a piece drawn on top never clips a neighbour's letters.
+    const placed: [number, number][][][] = vines.map((vine) =>
+      vine.depths.map(() => [])
+    )
+    vines.forEach((vine, v) => {
+      const list = glyphs[v]!
+      const unit = units[v]!
+      if (!list.length || unit <= 0) return
+      const reach = vine.length * eased
+      const shift = (clock * speed * vine.pace + vine.phase * unit) % unit
+      let at = -shift
+      let i = 0
+      while (at < reach) {
+        const adv = list[i]!.adv
+        if (at + adv > 0 && list[i]!.ch !== " ") {
+          const mid = at + adv / 2
+          if (mid < reach) {
+            // Pieces are evenly spaced, so the ones a glyph spans are direct.
+            const per = vine.cuts[1]! - vine.cuts[0]!
+            const lastPiece = vine.depths.length - 1
+            const k0 = Math.min(
+              lastPiece,
+              Math.floor(Math.max(0, at) / STEP / per)
+            )
+            const k1 = Math.min(lastPiece, Math.floor((at + adv) / STEP / per))
+            for (let k = k0; k <= k1; k++) placed[v]![k]!.push([mid, i])
+          }
+        }
+        at += adv
+        i = (i + 1) % list.length
+      }
+    })
+
+    ctx!.lineJoin = "round"
+    ctx!.lineCap = "butt"
+    ctx!.font = font
+    ctx!.textBaseline = "middle"
+    ctx!.textAlign = "center"
+    for (const { vine: v, index } of order) {
+      const vine = vines[v]!
+      const reach = (vine.length * eased) / STEP
+      const a = vine.cuts[index]!
+      if (a >= reach) continue
+      const b = vine.cuts[index + 1]!
+      // Only the growing tip needs a fresh path.
+      const whole = b <= reach
+      const path = whole
+        ? paths[v]![index]!
+        : {
+            gap: tracePath(vine, a, reach),
+            ribbon: tracePath(vine, a - 1, reach),
+          }
+
+      // Cut a gap around this piece, so whatever it crosses reads as beneath.
+      ctx!.globalCompositeOperation = "destination-out"
+      ctx!.lineWidth = thickness + halo * 2
+      ctx!.stroke(path.gap)
+      ctx!.globalCompositeOperation = "source-over"
+      ctx!.strokeStyle = ribbon
+      ctx!.lineWidth = thickness
+      // The ribbon runs a sample past each end, hiding the seam between pieces.
+      ctx!.stroke(path.ribbon)
+
+      ctx!.fillStyle = ink
+      const p = vine.points
+      const lastSample = p.length / 2 - 1
+      for (const [mid, gi] of placed[v]![index]!) {
+        const s = mid / STEP
+        const i0 = clamp(Math.floor(s), 0, lastSample - 1)
+        const k = s - i0
+        const x0 = p[i0 * 2]!
+        const y0 = p[i0 * 2 + 1]!
+        const x1 = p[i0 * 2 + 2]!
+        const y1 = p[i0 * 2 + 3]!
+        const angle = Math.atan2(y1 - y0, x1 - x0)
+        const cos = Math.cos(angle)
+        const sin = Math.sin(angle)
+        ctx!.setTransform(
+          dpr * cos,
+          dpr * sin,
+          -dpr * sin,
+          dpr * cos,
+          dpr * (x0 + (x1 - x0) * k),
+          dpr * (y0 + (y1 - y0) * k)
+        )
+        ctx!.fillText(glyphs[v]![gi]!.ch, 0, 0)
+      }
+      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
+    }
+  }
+
+  const animating = () =>
+    onScreen && !reduce && document.visibilityState !== "hidden"
+
+  function wake() {
+    if (raf) return
+    last = performance.now()
+    raf = requestAnimationFrame(tick)
+  }
+
+  function tick(now: number) {
+    raf = 0
+    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
+    last = now
+    const moving = animating()
+    if (reduce) grow = 1
+    else if (seen && moving) grow = Math.min(1, grow + dt / GROW_S)
+    if (moving) clock += dt
+    draw()
+    if (moving) raf = requestAnimationFrame(tick)
+  }
+
+  const syncTheme = () => {
+    const next = resolveDark(options.theme)
+    if (next === dark) return
+    dark = next
+    wake()
+  }
+
+  const ro = new ResizeObserver(resize)
+  if (canvas.parentElement) ro.observe(canvas.parentElement)
+  const io = new IntersectionObserver(
+    ([entry]) => {
+      onScreen = entry?.isIntersecting ?? true
+      if (onScreen) seen = true
+      wake()
+    },
+    { rootMargin: "64px" }
+  )
+  io.observe(canvas)
+  const onVisibility = () => wake()
+  document.addEventListener("visibilitychange", onVisibility)
+  const onReduce = () => {
+    reduce = mqReduce.matches
+    wake()
+  }
+  mqReduce.addEventListener("change", onReduce)
+  const mo = new MutationObserver(syncTheme)
+  mo.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme"],
+  })
+  const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
+  mqDark.addEventListener("change", syncTheme)
+  // Canvas text can't wait on a web font by itself.
+  document.fonts?.ready.then(() => {
+    rebuild()
+    wake()
+  })
+
+  resize()
+  wake()
+
+  return {
+    setOptions(next) {
+      const prev = options
+      options = { ...options, ...next }
+      syncTheme()
+      if (
+        prev.lines !== options.lines ||
+        prev.vines !== options.vines ||
+        prev.seed !== options.seed ||
+        prev.thickness !== options.thickness
+      ) {
+        rebuild()
+      }
+      wake()
+    },
+    destroy() {
+      cancelAnimationFrame(raf)
+      raf = 0
+      ro.disconnect()
+      io.disconnect()
+      mo.disconnect()
+      document.removeEventListener("visibilitychange", onVisibility)
+      mqReduce.removeEventListener("change", onReduce)
+      mqDark.removeEventListener("change", syncTheme)
+    },
+  }
+}
diff --git a/registry/tangle-footer/tangle-footer.svelte b/registry/tangle-footer/tangle-footer.svelte
index 9e8e2c7..f0762ae 100644
--- a/registry/tangle-footer/tangle-footer.svelte
+++ b/registry/tangle-footer/tangle-footer.svelte
@@ -2,11 +2,16 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from "svelte"
+  import { onMount, untrack } from "svelte"
   import {
-    buildRings,
+    createTangleFooter,
     DEFAULT_LINES,
+    DEFAULT_SEED,
+    DEFAULT_SPEED,
+    DEFAULT_VINES,
+    type TangleFooterInstance,
     type TangleFooterOptions,
+    type TangleFooterTheme,
   } from "./tangle-footer-vanilla"
 
   function cn(...parts: Array<string | false | null | undefined>) {
@@ -15,6 +20,16 @@
 
   interface Props extends TangleFooterOptions {
     class?: string
+    /**
+     * Field behind the vines. Omit for theme-aware defaults (warm cream on
+     * light, near-black on dark). Pass `"transparent"` when the parent
+     * already paints the stage.
+     */
+    background?: string
+    /** Footer height in px. Default `320`. */
+    height?: number
+    /** Accessible label. */
+    label?: string
   }
 
   let {
@@ -23,149 +38,72 @@
     ribbon,
     textColor,
     background,
-    height,
-    seed = 23,
+    height = 320,
+    vines = DEFAULT_VINES,
+    speed = DEFAULT_SPEED,
+    thickness,
+    seed = DEFAULT_SEED,
+    theme = "auto",
     label = "Site footer",
   }: Props = $props()
 
-  let uid = $state("")
-  let rootEl: HTMLElement | undefined = $state()
-  let width = $state(0)
-  let paused = $state(false)
-  let reduce = $state(false)
+  /** Stage color before and behind the canvas; hex literals for Tailwind. */
+  const SURFACE: Record<TangleFooterTheme, string> = {
+    auto: "bg-[#EFEAE2] dark:bg-[#121210]",
+    dark: "bg-[#121210]",
+    light: "bg-[#EFEAE2]",
+  }
 
-  const bandHeight = $derived(height ?? (width > 0 ? width / 2 : 0))
-  const rings = $derived(
-    width > 0 && bandHeight > 0
-      ? buildRings(width, bandHeight, lines, seed)
-      : []
-  )
-  const showSvg = $derived(uid !== "" && width > 0 && bandHeight > 0)
+  let canvas: HTMLCanvasElement | undefined = $state()
+  let instance: TangleFooterInstance | null = null
 
   onMount(() => {
-    uid =
-      typeof crypto !== "undefined" && "randomUUID" in crypto
-        ? crypto.randomUUID().replace(/-/g, "")
-        : `tangle${Date.now().toString(36)}`
-
-    const el = rootEl
-    if (!el) return
-
-    const measure = () => {
-      width = el.clientWidth
-    }
-    measure()
-    const ro = new ResizeObserver(measure)
-    ro.observe(el)
-
-    const io = new IntersectionObserver(
-      ([entry]) => {
-        paused = !(entry?.isIntersecting ?? true)
-      },
-      { rootMargin: "64px", threshold: 0 }
+    if (!canvas) return
+    instance = createTangleFooter(
+      canvas,
+      untrack(() => ({
+        lines,
+        ribbon,
+        textColor,
+        vines,
+        speed,
+        thickness,
+        seed,
+        theme,
+      }))
     )
-    io.observe(el)
-
-    const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
-    const applyReduce = () => {
-      reduce = mq.matches
-    }
-    applyReduce()
-    mq.addEventListener("change", applyReduce)
-
     return () => {
-      ro.disconnect()
-      io.disconnect()
-      mq.removeEventListener("change", applyReduce)
+      instance?.destroy()
+      instance = null
     }
   })
+
+  $effect(() => {
+    instance?.setOptions({
+      lines,
+      ribbon,
+      textColor,
+      vines,
+      speed,
+      thickness,
+      seed,
+      theme,
+    })
+  })
 </script>
 
 <footer
-  bind:this={rootEl}
   data-slot="tangle-footer"
   aria-label={label}
   class={cn(
     "relative w-full overflow-hidden",
-    background === undefined && "bg-[#EFEAE2] dark:bg-[#121210]",
-    ribbon == null && "[--tangle-ribbon:#141414] dark:[--tangle-ribbon:#E8E4DC]",
-    textColor == null &&
-      "[--tangle-text:#F4F0E8] dark:[--tangle-text:#161616]",
+    background === undefined && (SURFACE[theme] ?? SURFACE.auto),
     className
   )}
   style:background={background}
-  style:height={bandHeight > 0 ? `${bandHeight}px` : undefined}
-  style:aspect-ratio={height == null ? "2 / 1" : undefined}
+  style:height="{height}px"
 >
-  {#if showSvg}
-    <svg
-      class="absolute inset-0 size-full"
-      class:tangle-enter={!reduce}
-      viewBox="0 0 {width} {bandHeight}"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        {#each rings as ring, i}
-          <path id="{uid}-path-{i}" d={ring.d} fill="none"></path>
-        {/each}
-      </defs>
-
-      {#each rings as ring, i}
-        {@const pathId = `${uid}-path-${i}`}
-        <g
-          style={reduce
-            ? undefined
-            : `transform-box: view-box; transform-origin: ${ring.cx}px ${ring.cy}px; animation: tangle-spin ${ring.duration}s linear infinite; animation-direction: ${ring.reverse ? "reverse" : "normal"}; animation-delay: ${-ring.phase * ring.duration}s; animation-play-state: ${paused ? "paused" : "running"}; will-change: transform;`}
-        >
-          <use
-            href="#{pathId}"
-            stroke-width={ring.strokeWidth}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            fill="none"
-            style="stroke: {ribbon ?? 'var(--tangle-ribbon)'};"
-          ></use>
-          <text
-            font-size={ring.fontSize}
-            font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif"
-            font-weight="700"
-            letter-spacing="0.05em"
-            dominant-baseline="central"
-            style="fill: {textColor ??
-              'var(--tangle-text)'}; user-select: none; pointer-events: none;"
-          >
-            <textPath href="#{pathId}" startOffset="0" method="align"
-              >{ring.text}</textPath
-            >
-          </text>
-        </g>
-      {/each}
-    </svg>
-  {/if}
-
+  <canvas bind:this={canvas} aria-hidden="true" class="absolute inset-0 size-full"
+  ></canvas>
   <p class="sr-only">{lines.join(" ")}</p>
 </footer>
-
-<style>
-  @keyframes tangle-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes tangle-enter {
-    from {
-      opacity: 0;
-      transform: translateY(12px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .tangle-enter {
-    animation: tangle-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-</style>
diff --git a/registry/tangle-footer/tangle-footer.tsx b/registry/tangle-footer/tangle-footer.tsx
index b30c166..f39053e 100644
--- a/registry/tangle-footer/tangle-footer.tsx
+++ b/registry/tangle-footer/tangle-footer.tsx
@@ -1,25 +1,63 @@
 "use client"
 
-import { useEffect, useId, useMemo, useRef, useState } from "react"
-import { motion, useReducedMotion } from "motion/react"
+import { useEffect, useRef } from "react"
 
 import { cn } from "@/lib/utils"
 
 import {
-  buildRings,
+  createTangleFooter,
   DEFAULT_LINES,
+  DEFAULT_SEED,
+  DEFAULT_SPEED,
+  DEFAULT_VINES,
+  type TangleFooterInstance,
   type TangleFooterOptions,
+  type TangleFooterTheme,
+} from "./tangle-footer-vanilla"
+
+export {
+  DARK_BG,
+  DARK_RIBBON,
+  DARK_TEXT,
+  DEFAULT_LINES,
+  DEFAULT_SEED,
+  DEFAULT_SPEED,
+  DEFAULT_VINES,
+  LIGHT_BG,
+  LIGHT_RIBBON,
+  LIGHT_TEXT,
+} from "./tangle-footer-vanilla"
+export type {
+  TangleFooterInstance,
+  TangleFooterOptions,
+  TangleFooterTheme,
 } from "./tangle-footer-vanilla"
 
 export type TangleFooterProps = TangleFooterOptions & {
   className?: string
+  /**
+   * Field behind the vines. Omit for theme-aware defaults (warm cream on
+   * light, near-black on dark). Pass `"transparent"` when the parent
+   * already paints the stage.
+   */
+  background?: string
+  /** Footer height in px. Default `320`. */
+  height?: number
+  /** Accessible label. */
+  label?: string
+}
+
+/** Stage color before and behind the canvas; hex literals for Tailwind. */
+const SURFACE: Record<TangleFooterTheme, string> = {
+  auto: "bg-[#EFEAE2] dark:bg-[#121210]",
+  dark: "bg-[#121210]",
+  light: "bg-[#EFEAE2]",
 }
 
 /**
- * Footer of five nested text rings — full-width upper semicircle.
- * The marquee is a continuous rotation of each ring around its center.
- * A full turn is inherently seamless, so it runs on GPU-friendly CSS
- * transforms with no per-frame layout work.
+ * A footer of tangled vines — thick ribbons that curl into loops and weave
+ * over and under each other, with your copy running along them. The vines
+ * grow in the first time the footer is seen.
  */
 export function TangleFooter({
   className,
@@ -27,150 +65,67 @@ export function TangleFooter({
   ribbon,
   textColor,
   background,
-  height,
-  seed = 23,
+  height = 320,
+  vines = DEFAULT_VINES,
+  speed = DEFAULT_SPEED,
+  thickness,
+  seed = DEFAULT_SEED,
+  theme = "auto",
   label = "Site footer",
 }: TangleFooterProps) {
-  const reduce = useReducedMotion() ?? false
-  const uid = useId().replace(/:/g, "")
-  const rootRef = useRef<HTMLElement>(null)
-  const [width, setWidth] = useState(0)
-  const [paused, setPaused] = useState(false)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const instanceRef = useRef<TangleFooterInstance | null>(null)
 
   useEffect(() => {
-    const el = rootRef.current
-    if (!el) return
-
-    const measure = () => {
-      setWidth(el.clientWidth)
+    const canvas = canvasRef.current
+    if (!canvas) return
+    instanceRef.current = createTangleFooter(canvas, {
+      lines,
+      ribbon,
+      textColor,
+      vines,
+      speed,
+      thickness,
+      seed,
+      theme,
+    })
+    return () => {
+      instanceRef.current?.destroy()
+      instanceRef.current = null
     }
-
-    measure()
-    const ro = new ResizeObserver(measure)
-    ro.observe(el)
-    return () => ro.disconnect()
+    // Engine reads live options via setOptions; mount once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Pause the animation while off-screen so it never wastes frames.
   useEffect(() => {
-    const el = rootRef.current
-    if (!el) return
-
-    const io = new IntersectionObserver(
-      ([entry]) => setPaused(!(entry?.isIntersecting ?? true)),
-      { rootMargin: "64px", threshold: 0 }
-    )
-    io.observe(el)
-    return () => io.disconnect()
-  }, [])
-
-  const bandHeight = height ?? (width > 0 ? width / 2 : 0)
-  const rings = useMemo(
-    () =>
-      width > 0 && bandHeight > 0
-        ? buildRings(width, bandHeight, lines, seed)
-        : [],
-    [width, bandHeight, lines, seed]
-  )
-
-  const spinName = `tangle-spin-${uid}`
+    instanceRef.current?.setOptions({
+      lines,
+      ribbon,
+      textColor,
+      vines,
+      speed,
+      thickness,
+      seed,
+      theme,
+    })
+  }, [lines, ribbon, textColor, vines, speed, thickness, seed, theme])
 
   return (
     <footer
-      ref={rootRef}
       data-slot="tangle-footer"
       aria-label={label}
       className={cn(
         "relative w-full overflow-hidden",
-        // Theme tokens — skipped when explicit color props are passed
-        background === undefined && "bg-[#EFEAE2] dark:bg-[#121210]",
-        ribbon == null &&
-          "[--tangle-ribbon:#141414] dark:[--tangle-ribbon:#E8E4DC]",
-        textColor == null &&
-          "[--tangle-text:#F4F0E8] dark:[--tangle-text:#161616]",
+        background === undefined && (SURFACE[theme] ?? SURFACE.auto),
         className
       )}
-      style={{
-        background,
-        height: bandHeight > 0 ? bandHeight : undefined,
-        aspectRatio: height == null ? "2 / 1" : undefined,
-      }}
+      style={{ background, height }}
     >
-      <style>{`@keyframes ${spinName}{to{transform:rotate(360deg)}}`}</style>
-
-      {width > 0 && bandHeight > 0 ? (
-        <motion.svg
-          className="absolute inset-0 size-full"
-          viewBox={`0 0 ${width} ${bandHeight}`}
-          preserveAspectRatio="xMidYMax slice"
-          xmlns="http://www.w3.org/2000/svg"
-          initial={reduce ? false : { opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
-        >
-          <defs>
-            {rings.map((ring, i) => (
-              <path
-                key={`def-${i}`}
-                id={`${uid}-path-${i}`}
-                d={ring.d}
-                fill="none"
-              />
-            ))}
-          </defs>
-
-          {rings.map((ring, i) => {
-            const pathId = `${uid}-path-${i}`
-            return (
-              <g
-                key={`ring-${i}`}
-                style={
-                  reduce
-                    ? undefined
-                    : {
-                        transformBox: "view-box",
-                        transformOrigin: `${ring.cx}px ${ring.cy}px`,
-                        animation: `${spinName} ${ring.duration}s linear infinite`,
-                        animationDirection: ring.reverse ? "reverse" : "normal",
-                        animationDelay: `${-ring.phase * ring.duration}s`,
-                        animationPlayState: paused ? "paused" : "running",
-                        willChange: "transform",
-                      }
-                }
-              >
-                <use
-                  href={`#${pathId}`}
-                  strokeWidth={ring.strokeWidth}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  fill="none"
-                  style={{
-                    // Live CSS so `var(--tangle-ribbon)` tracks `html.dark`.
-                    stroke: ribbon ?? "var(--tangle-ribbon)",
-                  }}
-                />
-                <text
-                  fontSize={ring.fontSize}
-                  fontFamily="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif"
-                  fontWeight={700}
-                  letterSpacing="0.05em"
-                  dominantBaseline="central"
-                  style={{
-                    fill: textColor ?? "var(--tangle-text)",
-                    userSelect: "none",
-                    pointerEvents: "none",
-                  }}
-                >
-                  <textPath href={`#${pathId}`} startOffset="0" method="align">
-                    {ring.text}
-                  </textPath>
-                </text>
-              </g>
-            )
-          })}
-        </motion.svg>
-      ) : null}
-
+      <canvas
+        ref={canvasRef}
+        aria-hidden
+        className="absolute inset-0 size-full"
+      />
       <p className="sr-only">{lines.join(" ")}</p>
     </footer>
   )

From 63aa454dbd350292c826c0c3051bcb438260db93 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:41:47 +0530
Subject: [PATCH 17/49] Strip Tangle Footer down to clean tangled lines.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

No text and no stage palette: thin pen-line vines in the text color on
a transparent footer, so it follows light and dark on any page. Loops
snap between round curls and soft waves instead of teardrops and cusps,
crossings keep a hairline over-under gap, and the vines grow in once
then hold still — no frames after that. Props are height, vines,
thickness, color and seed.
---
 content/docs/components/tangle-footer.mdx     |  58 +--
 public/r/registry.json                        |   4 +-
 public/r/tangle-footer-svelte.json            |   4 +-
 public/r/tangle-footer.json                   |   4 +-
 registry/tangle-footer/registry.json          |   4 +-
 registry/tangle-footer/tangle-footer-demo.tsx | 150 ++------
 .../tangle-footer/tangle-footer-vanilla.ts    | 337 +++++-------------
 registry/tangle-footer/tangle-footer.svelte   |  57 +--
 registry/tangle-footer/tangle-footer.tsx      |  75 +---
 9 files changed, 144 insertions(+), 549 deletions(-)

diff --git a/content/docs/components/tangle-footer.mdx b/content/docs/components/tangle-footer.mdx
index 1805579..31b01db 100644
--- a/content/docs/components/tangle-footer.mdx
+++ b/content/docs/components/tangle-footer.mdx
@@ -1,11 +1,11 @@
 ---
 title: Tangle Footer
-description: Tangled text vines — ribbons curl into loops and weave over and under each other while your copy runs along them.
+description: Tangled vines for the bottom of a page — clean pen lines that curl into loops and cross over and under each other.
 ---
 
 import { TangleFooterDemo } from "@/registry/tangle-footer/tangle-footer-demo"
 
-Vines run the width of the footer, curling into loops of every size off a wandering baseline. Each one is cut into short pieces with a random stacking order, so the vines pass over and under each other — and themselves — with a thin gap where they cross. Your phrases run along the ribbons as a slow marquee, through every loop. The vines grow in the first time the footer is seen. Change **Seed** for a new tangle. Press `d` to toggle the theme.
+A few vines run the width of the footer, curling into round loops off a wandering baseline and relaxing into waves between them. Where lines cross, the one on top clears a hairline gap around itself, so every crossing reads as over or under — including loops crossing themselves. It's transparent and drawn in the text color, so it sits on any page and follows light and dark. The vines grow in once, the first time the footer is seen, then hold still. Change **Seed** for a new tangle.
 
 ## Preview
 
@@ -21,27 +21,15 @@ Or install straight from the public GitHub source registry:
 
 ## Usage
 
-Drop it at the bottom of the page. It fills the width it's given at `height` px tall; pass phrases via `lines` and each vine picks one or two.
+Put it at the bottom of the page. It fills the width it's given, `height` px tall, in the current text color — set `className="text-muted-foreground"` (or `color`) to change it.
 
 <FrameworkCode>
   <FrameworkReact>
 ```tsx
-"use client"
-
 import { TangleFooter } from "@/components/ui/tangle-footer"
 
 export function SiteFooter() {
-  return (
-    <div className="mx-auto w-full max-w-7xl">
-      <TangleFooter
-        lines={[
-          "Ship something opinionated — less boilerplate, clearer decisions.",
-          "Knows what’s going on. Can you check in with them and see what’s next.",
-          "The new timeline should be ready by Friday, although it’s probably going to slip.",
-        ]}
-      />
-    </div>
-  )
+  return <TangleFooter className="text-foreground" />
 }
 ```
   </FrameworkReact>
@@ -51,35 +39,21 @@ export function SiteFooter() {
   import TangleFooter from "$lib/components/ui/tangle-footer.svelte"
 </script>
 
-<div class="mx-auto w-full max-w-7xl">
-  <TangleFooter
-    lines={[
-      "Ship something opinionated — less boilerplate, clearer decisions.",
-      "Knows what’s going on. Can you check in with them and see what’s next.",
-      "The new timeline should be ready by Friday, although it’s probably going to slip.",
-    ]}
-  />
-</div>
+<TangleFooter class="text-foreground" />
 ```
   </FrameworkSvelte>
 </FrameworkCode>
 
 ## Props
 
-| Prop         | Type                          | Default                                |
-| ------------ | ----------------------------- | -------------------------------------- |
-| `lines`      | `string[]`                    | built-in phrases                       |
-| `ribbon`     | `string`                      | theme (`#141414` / `#E8E4DC`)          |
-| `textColor`  | `string`                      | theme (`#F4F0E8` / `#161616`)          |
-| `background` | `string`                      | theme (`#EFEAE2` / `#121210`)          |
-| `height`     | `number`                      | `320` — px                             |
-| `vines`      | `number`                      | `4` — `1`–`12`                         |
-| `speed`      | `number`                      | `36` — px per second along the vines   |
-| `thickness`  | `number`                      | scales with width — ribbon width in px |
-| `seed`       | `number`                      | `23` — a new seed is a new tangle      |
-| `theme`      | `"light" \| "dark" \| "auto"` | `"auto"`                               |
-| `label`      | `string`                      | `Site footer`                          |
-| `className`  | `string`                      | React only                             |
-| `class`      | `string`                      | Svelte only                            |
-
-`prefers-reduced-motion: reduce` shows the grown tangle with the copy standing still. The animation also pauses while the footer is off-screen or the tab is hidden.
+| Prop        | Type     | Default                                       |
+| ----------- | -------- | --------------------------------------------- |
+| `height`    | `number` | `320` — px                                    |
+| `vines`     | `number` | `3` — `1`–`12`                                |
+| `thickness` | `number` | scales with width — line width in px          |
+| `color`     | `string` | `currentColor`                                |
+| `seed`      | `number` | `23` — a new seed grows a new tangle          |
+| `className` | `string` | React only                                    |
+| `class`     | `string` | Svelte only                                   |
+
+`prefers-reduced-motion: reduce` skips the grow-in and shows the finished tangle.
diff --git a/public/r/registry.json b/public/r/registry.json
index ac43b08..1d8b40c 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -351,7 +351,7 @@
     {
       "name": "tangle-footer",
       "title": "Tangle Footer",
-      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
+      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
       "files": [
         {
           "path": "registry/tangle-footer/tangle-footer.tsx",
@@ -364,7 +364,7 @@
     {
       "name": "tangle-footer-svelte",
       "title": "Tangle Footer",
-      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
+      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
       "dependencies": [],
       "files": [
         {
diff --git a/public/r/tangle-footer-svelte.json b/public/r/tangle-footer-svelte.json
index 95df94e..9cfbb9a 100644
--- a/public/r/tangle-footer-svelte.json
+++ b/public/r/tangle-footer-svelte.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tangle-footer-svelte",
   "title": "Tangle Footer",
-  "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
+  "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
   "dependencies": [],
   "files": [
     {
       "path": "registry/tangle-footer/tangle-footer.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_LINES = [\n  \"Ship something opinionated — less boilerplate, clearer decisions.\",\n  \"Knows what’s going on. Can you check in with them and see what’s next.\",\n  \"The new timeline should be ready by Friday, although it’s probably going to slip.\",\n  \"Open the docs, grab a component, and make it yours in the codebase.\",\n  \"Radiant lines, shader wash, gooey picker — install what you need and move.\",\n]\n\nexport type TangleFooterTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type TangleFooterOptions = {\n  /** Phrases that run along the vines. */\n  lines?: string[]\n  /** Ribbon color. Omit to follow `theme` (ink on light, cream on dark). */\n  ribbon?: string\n  /** Lettering on the ribbons. Omit to follow `theme`. */\n  textColor?: string\n  /** How many vines. Default `4`. */\n  vines?: number\n  /** Marquee speed along the vines, in px per second. Default `36`. */\n  speed?: number\n  /** Ribbon width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: TangleFooterTheme\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const LIGHT_RIBBON = \"#141414\"\nexport const LIGHT_TEXT = \"#F4F0E8\"\nexport const LIGHT_BG = \"#EFEAE2\"\nexport const DARK_RIBBON = \"#E8E4DC\"\nexport const DARK_TEXT = \"#161616\"\nexport const DARK_BG = \"#121210\"\nexport const DEFAULT_VINES = 4\nexport const DEFAULT_SPEED = 36\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Arc length in px. */\n  length: number\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n  /** The copy that repeats along this vine. */\n  text: string\n  /** Marquee speed multiplier and starting offset (0–1 of the copy). */\n  pace: number\n  phase: number\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** Ribbon width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.019, 16, 28)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: {\n    vines?: number\n    thickness?: number\n    seed?: number\n    lines?: string[]\n  } = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const w = numberOr(options.thickness, autoThickness(width), 6, 80)\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  const pool = options.lines?.filter((line) => line.trim()) ?? []\n  const lines = pool.length ? pool : DEFAULT_LINES\n  // Pieces short enough that the two strands of any loop land in different\n  // pieces, so a loop can cross over itself.\n  const piece = w * 4\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.6 + (v / Math.max(1, count - 1)) * 0.3)\n    const wheel0 = Math.max(w * 1.2, height * (0.07 + rand() * 0.04))\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.2 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves.\n      let spoke = wheel * (1.5 + 1.05 * curl(s))\n      // Open any loop too tight to read, then keep it under the top edge.\n      if (spoke > wheel) spoke = Math.max(spoke, w * 2.3)\n      spoke = Math.min(spoke, Math.max(w, (y0 - w * 0.6) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so text and pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n    const depths = cuts.slice(0, -1).map(() => rand())\n\n    const line = lines[Math.floor(rand() * lines.length)]!\n    const other = lines[Math.floor(rand() * lines.length)]!\n    const text =\n      line === other ? `${line}   ·   ` : `${line}   ·   ${other}   ·   `\n\n    return {\n      points: Float32Array.from(points),\n      length: (samples - 1) * STEP,\n      cuts,\n      depths,\n      text,\n      pace: 0.8 + rand() * 0.4,\n      phase: rand(),\n    }\n  })\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: TangleFooterTheme = \"auto\"): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\ntype Glyph = { ch: string; adv: number }\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled text vines on a canvas. The vines grow in from the left the first\n * time they're seen, then the copy runs along them. Pauses off-screen and in\n * hidden tabs; holds still under `prefers-reduced-motion`.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  let glyphs: Glyph[][] = []\n  let units: number[] = []\n  /** Cached gap and ribbon paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; ribbon: Path2D }[][] = []\n  let thickness = 20\n  let font = \"\"\n  let dark = resolveDark(options.theme)\n  let grow = 0\n  let clock = 0\n  let seen = false\n  let onScreen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 6, 80)\n    vines = buildVines(w, h, { ...options, thickness })\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        ribbon: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n    const family = getComputedStyle(canvas).fontFamily || \"sans-serif\"\n    font = `700 ${Math.round(thickness * 0.5)}px ${family}`\n    ctx.font = font\n    const widths = new Map<string, number>()\n    glyphs = vines.map((vine) =>\n      Array.from(vine.text).map((ch) => {\n        let adv = widths.get(ch)\n        if (adv === undefined) {\n          adv = ctx.measureText(ch).width\n          widths.set(ch, adv)\n        }\n        return { ch, adv }\n      })\n    )\n    units = glyphs.map((list) => list.reduce((sum, g) => sum + g.adv, 0))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const last = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, last)\n    const to = clamp(Math.ceil(b), 0, last)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length) return\n\n    const ribbon = options.ribbon?.trim() || (dark ? DARK_RIBBON : LIGHT_RIBBON)\n    const ink = options.textColor?.trim() || (dark ? DARK_TEXT : LIGHT_TEXT)\n    const halo = Math.max(2.5, thickness * 0.16)\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 400)\n    const eased = 1 - (1 - grow) ** 3\n\n    // Lay the copy along each vine and hand every glyph to the pieces it\n    // touches, so a piece drawn on top never clips a neighbour's letters.\n    const placed: [number, number][][][] = vines.map((vine) =>\n      vine.depths.map(() => [])\n    )\n    vines.forEach((vine, v) => {\n      const list = glyphs[v]!\n      const unit = units[v]!\n      if (!list.length || unit <= 0) return\n      const reach = vine.length * eased\n      const shift = (clock * speed * vine.pace + vine.phase * unit) % unit\n      let at = -shift\n      let i = 0\n      while (at < reach) {\n        const adv = list[i]!.adv\n        if (at + adv > 0 && list[i]!.ch !== \" \") {\n          const mid = at + adv / 2\n          if (mid < reach) {\n            // Pieces are evenly spaced, so the ones a glyph spans are direct.\n            const per = vine.cuts[1]! - vine.cuts[0]!\n            const lastPiece = vine.depths.length - 1\n            const k0 = Math.min(\n              lastPiece,\n              Math.floor(Math.max(0, at) / STEP / per)\n            )\n            const k1 = Math.min(lastPiece, Math.floor((at + adv) / STEP / per))\n            for (let k = k0; k <= k1; k++) placed[v]![k]!.push([mid, i])\n          }\n        }\n        at += adv\n        i = (i + 1) % list.length\n      }\n    })\n\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"butt\"\n    ctx!.font = font\n    ctx!.textBaseline = \"middle\"\n    ctx!.textAlign = \"center\"\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = (vine.length * eased) / STEP\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const whole = b <= reach\n      const path = whole\n        ? paths[v]![index]!\n        : {\n            gap: tracePath(vine, a, reach),\n            ribbon: tracePath(vine, a - 1, reach),\n          }\n\n      // Cut a gap around this piece, so whatever it crosses reads as beneath.\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = thickness + halo * 2\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.strokeStyle = ribbon\n      ctx!.lineWidth = thickness\n      // The ribbon runs a sample past each end, hiding the seam between pieces.\n      ctx!.stroke(path.ribbon)\n\n      ctx!.fillStyle = ink\n      const p = vine.points\n      const lastSample = p.length / 2 - 1\n      for (const [mid, gi] of placed[v]![index]!) {\n        const s = mid / STEP\n        const i0 = clamp(Math.floor(s), 0, lastSample - 1)\n        const k = s - i0\n        const x0 = p[i0 * 2]!\n        const y0 = p[i0 * 2 + 1]!\n        const x1 = p[i0 * 2 + 2]!\n        const y1 = p[i0 * 2 + 3]!\n        const angle = Math.atan2(y1 - y0, x1 - x0)\n        const cos = Math.cos(angle)\n        const sin = Math.sin(angle)\n        ctx!.setTransform(\n          dpr * cos,\n          dpr * sin,\n          -dpr * sin,\n          dpr * cos,\n          dpr * (x0 + (x1 - x0) * k),\n          dpr * (y0 + (y1 - y0) * k)\n        )\n        ctx!.fillText(glyphs[v]![gi]!.ch, 0, 0)\n      }\n      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    }\n  }\n\n  const animating = () =>\n    onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const moving = animating()\n    if (reduce) grow = 1\n    else if (seen && moving) grow = Math.min(1, grow + dt / GROW_S)\n    if (moving) clock += dt\n    draw()\n    if (moving) raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme)\n    if (next === dark) return\n    dark = next\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      onScreen = entry?.isIntersecting ?? true\n      if (onScreen) seen = true\n      wake()\n    },\n    { rootMargin: \"64px\" }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n  // Canvas text can't wait on a web font by itself.\n  document.fonts?.ready.then(() => {\n    rebuild()\n    wake()\n  })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      syncTheme()\n      if (\n        prev.lines !== options.lines ||\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TangleFooterOptions {\n    class?: string\n    /**\n     * Field behind the vines. Omit for theme-aware defaults (warm cream on\n     * light, near-black on dark). Pass `\"transparent\"` when the parent\n     * already paints the stage.\n     */\n    background?: string\n    /** Footer height in px. Default `320`. */\n    height?: number\n    /** Accessible label. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    lines = DEFAULT_LINES,\n    ribbon,\n    textColor,\n    background,\n    height = 320,\n    vines = DEFAULT_VINES,\n    speed = DEFAULT_SPEED,\n    thickness,\n    seed = DEFAULT_SEED,\n    theme = \"auto\",\n    label = \"Site footer\",\n  }: Props = $props()\n\n  /** Stage color before and behind the canvas; hex literals for Tailwind. */\n  const SURFACE: Record<TangleFooterTheme, string> = {\n    auto: \"bg-[#EFEAE2] dark:bg-[#121210]\",\n    dark: \"bg-[#121210]\",\n    light: \"bg-[#EFEAE2]\",\n  }\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: TangleFooterInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createTangleFooter(\n      canvas,\n      untrack(() => ({\n        lines,\n        ribbon,\n        textColor,\n        vines,\n        speed,\n        thickness,\n        seed,\n        theme,\n      }))\n    )\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      lines,\n      ribbon,\n      textColor,\n      vines,\n      speed,\n      thickness,\n      seed,\n      theme,\n    })\n  })\n</script>\n\n<footer\n  data-slot=\"tangle-footer\"\n  aria-label={label}\n  class={cn(\n    \"relative w-full overflow-hidden\",\n    background === undefined && (SURFACE[theme] ?? SURFACE.auto),\n    className\n  )}\n  style:background={background}\n  style:height=\"{height}px\"\n>\n  <canvas bind:this={canvas} aria-hidden=\"true\" class=\"absolute inset-0 size-full\"\n  ></canvas>\n  <p class=\"sr-only\">{lines.join(\" \")}</p>\n</footer>\n",
+      "content": "<script module lang=\"ts\">\nexport type TangleFooterOptions = {\n  /** Line color, any CSS color. Omit to use the text color (`currentColor`). */\n  color?: string\n  /** How many vines. Default `3`. */\n  vines?: number\n  /** Line width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const DEFAULT_VINES = 3\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** A pen-line width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.0021, 1.75, 3.5)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: Pick<TangleFooterOptions, \"vines\" | \"seed\"> = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  // Smallest loop the wheel sizes produce (spoke ≈ 2 wheels at the low end).\n  const minLoop = height * 0.14\n  // Pieces shorter than half the smallest loop, so the two strands of any\n  // loop land in different pieces and the loop can cross over itself.\n  const piece = minLoop * 1.5\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.62 + (v / Math.max(1, count - 1)) * 0.28)\n    const wheel0 = height * (0.1 + rand() * 0.05)\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.18 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves. The ratio snaps\n      // quickly between the two, since loops just past 1 read as thin\n      // teardrops and waves just under 1 as sharp cusps.\n      const c = curl(s)\n      const k = clamp((c + 0.1) / 0.25, 0, 1)\n      let spoke = wheel * (0.7 + 1.35 * k * k * (3 - 2 * k) + 0.25 * c)\n      // Keep every loop under the top edge.\n      spoke = Math.min(spoke, Math.max(minLoop * 0.5, (y0 - height * 0.06) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n\n    return {\n      points: Float32Array.from(points),\n      cuts,\n      depths: cuts.slice(0, -1).map(() => rand()),\n    }\n  })\n}\n\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled pen-line vines on a transparent canvas, in the text color by\n * default. They grow in from the left the first time they're seen, then\n * hold still — nothing runs after that. Redraws on resize and theme change.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  /** Cached gap and line paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; line: Path2D }[][] = []\n  let thickness = 2\n  let grow = 0\n  let seen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const end = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, end)\n    const to = clamp(Math.ceil(b), 0, end)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 0.5, 24)\n    vines = buildVines(w, h, options)\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        // A sample past each end hides the seam between pieces.\n        line: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length || grow <= 0) return\n\n    const eased = 1 - (1 - grow) ** 3\n    // Clear space each side of a line where it crosses over another.\n    const gap = thickness + Math.max(2, thickness * 1.1) * 2\n    ctx!.strokeStyle =\n      options.color?.trim() || getComputedStyle(canvas).color || \"#000\"\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"round\"\n\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = ((vine.points.length / 2 - 1) * eased) | 0\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const path =\n        b <= reach\n          ? paths[v]![index]!\n          : {\n              gap: tracePath(vine, a, reach),\n              line: tracePath(vine, a - 1, reach),\n            }\n\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = gap\n      ctx!.lineCap = \"butt\"\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.lineWidth = thickness\n      ctx!.lineCap = \"round\"\n      ctx!.stroke(path.line)\n    }\n  }\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (mqReduce.matches) grow = seen ? 1 : grow\n    else if (seen && document.visibilityState !== \"hidden\")\n      grow = Math.min(1, grow + dt / GROW_S)\n    draw()\n    // Frames only while growing; afterwards it's a still drawing.\n    if (seen && grow < 1) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (!entry?.isIntersecting || seen) return\n      seen = true\n      io.disconnect()\n      wake()\n    },\n    { threshold: 0.25 }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  // `currentColor` follows the theme; redraw when it flips.\n  const mo = new MutationObserver(() => wake())\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", wake)\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n        // A new tangle grows in again.\n        if (!mqReduce.matches) grow = 0\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqDark.removeEventListener(\"change\", wake)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TangleFooterOptions {\n    class?: string\n    /** Footer height in px. Default `320`. */\n    height?: number\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    height = 320,\n    vines = DEFAULT_VINES,\n    thickness,\n    seed = DEFAULT_SEED,\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: TangleFooterInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createTangleFooter(\n      canvas,\n      untrack(() => ({ color, vines, thickness, seed }))\n    )\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({ color, vines, thickness, seed })\n  })\n</script>\n\n<footer\n  data-slot=\"tangle-footer\"\n  class={cn(\"relative w-full overflow-hidden\", className)}\n  style:height=\"{height}px\"\n>\n  <canvas bind:this={canvas} aria-hidden=\"true\" class=\"absolute inset-0 size-full\"\n  ></canvas>\n</footer>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/tangle-footer.svelte"
     }
diff --git a/public/r/tangle-footer.json b/public/r/tangle-footer.json
index 5c38bd4..70d6be0 100644
--- a/public/r/tangle-footer.json
+++ b/public/r/tangle-footer.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tangle-footer",
   "title": "Tangle Footer",
-  "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
+  "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
   "files": [
     {
       "path": "registry/tangle-footer/tangle-footer.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_LINES = [\n  \"Ship something opinionated — less boilerplate, clearer decisions.\",\n  \"Knows what’s going on. Can you check in with them and see what’s next.\",\n  \"The new timeline should be ready by Friday, although it’s probably going to slip.\",\n  \"Open the docs, grab a component, and make it yours in the codebase.\",\n  \"Radiant lines, shader wash, gooey picker — install what you need and move.\",\n]\n\nexport type TangleFooterTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type TangleFooterOptions = {\n  /** Phrases that run along the vines. */\n  lines?: string[]\n  /** Ribbon color. Omit to follow `theme` (ink on light, cream on dark). */\n  ribbon?: string\n  /** Lettering on the ribbons. Omit to follow `theme`. */\n  textColor?: string\n  /** How many vines. Default `4`. */\n  vines?: number\n  /** Marquee speed along the vines, in px per second. Default `36`. */\n  speed?: number\n  /** Ribbon width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: TangleFooterTheme\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const LIGHT_RIBBON = \"#141414\"\nexport const LIGHT_TEXT = \"#F4F0E8\"\nexport const LIGHT_BG = \"#EFEAE2\"\nexport const DARK_RIBBON = \"#E8E4DC\"\nexport const DARK_TEXT = \"#161616\"\nexport const DARK_BG = \"#121210\"\nexport const DEFAULT_VINES = 4\nexport const DEFAULT_SPEED = 36\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Arc length in px. */\n  length: number\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n  /** The copy that repeats along this vine. */\n  text: string\n  /** Marquee speed multiplier and starting offset (0–1 of the copy). */\n  pace: number\n  phase: number\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** Ribbon width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.019, 16, 28)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: {\n    vines?: number\n    thickness?: number\n    seed?: number\n    lines?: string[]\n  } = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const w = numberOr(options.thickness, autoThickness(width), 6, 80)\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  const pool = options.lines?.filter((line) => line.trim()) ?? []\n  const lines = pool.length ? pool : DEFAULT_LINES\n  // Pieces short enough that the two strands of any loop land in different\n  // pieces, so a loop can cross over itself.\n  const piece = w * 4\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.6 + (v / Math.max(1, count - 1)) * 0.3)\n    const wheel0 = Math.max(w * 1.2, height * (0.07 + rand() * 0.04))\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.2 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves.\n      let spoke = wheel * (1.5 + 1.05 * curl(s))\n      // Open any loop too tight to read, then keep it under the top edge.\n      if (spoke > wheel) spoke = Math.max(spoke, w * 2.3)\n      spoke = Math.min(spoke, Math.max(w, (y0 - w * 0.6) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so text and pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n    const depths = cuts.slice(0, -1).map(() => rand())\n\n    const line = lines[Math.floor(rand() * lines.length)]!\n    const other = lines[Math.floor(rand() * lines.length)]!\n    const text =\n      line === other ? `${line}   ·   ` : `${line}   ·   ${other}   ·   `\n\n    return {\n      points: Float32Array.from(points),\n      length: (samples - 1) * STEP,\n      cuts,\n      depths,\n      text,\n      pace: 0.8 + rand() * 0.4,\n      phase: rand(),\n    }\n  })\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: TangleFooterTheme = \"auto\"): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\ntype Glyph = { ch: string; adv: number }\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled text vines on a canvas. The vines grow in from the left the first\n * time they're seen, then the copy runs along them. Pauses off-screen and in\n * hidden tabs; holds still under `prefers-reduced-motion`.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  let glyphs: Glyph[][] = []\n  let units: number[] = []\n  /** Cached gap and ribbon paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; ribbon: Path2D }[][] = []\n  let thickness = 20\n  let font = \"\"\n  let dark = resolveDark(options.theme)\n  let grow = 0\n  let clock = 0\n  let seen = false\n  let onScreen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 6, 80)\n    vines = buildVines(w, h, { ...options, thickness })\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        ribbon: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n    const family = getComputedStyle(canvas).fontFamily || \"sans-serif\"\n    font = `700 ${Math.round(thickness * 0.5)}px ${family}`\n    ctx.font = font\n    const widths = new Map<string, number>()\n    glyphs = vines.map((vine) =>\n      Array.from(vine.text).map((ch) => {\n        let adv = widths.get(ch)\n        if (adv === undefined) {\n          adv = ctx.measureText(ch).width\n          widths.set(ch, adv)\n        }\n        return { ch, adv }\n      })\n    )\n    units = glyphs.map((list) => list.reduce((sum, g) => sum + g.adv, 0))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const last = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, last)\n    const to = clamp(Math.ceil(b), 0, last)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length) return\n\n    const ribbon = options.ribbon?.trim() || (dark ? DARK_RIBBON : LIGHT_RIBBON)\n    const ink = options.textColor?.trim() || (dark ? DARK_TEXT : LIGHT_TEXT)\n    const halo = Math.max(2.5, thickness * 0.16)\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 400)\n    const eased = 1 - (1 - grow) ** 3\n\n    // Lay the copy along each vine and hand every glyph to the pieces it\n    // touches, so a piece drawn on top never clips a neighbour's letters.\n    const placed: [number, number][][][] = vines.map((vine) =>\n      vine.depths.map(() => [])\n    )\n    vines.forEach((vine, v) => {\n      const list = glyphs[v]!\n      const unit = units[v]!\n      if (!list.length || unit <= 0) return\n      const reach = vine.length * eased\n      const shift = (clock * speed * vine.pace + vine.phase * unit) % unit\n      let at = -shift\n      let i = 0\n      while (at < reach) {\n        const adv = list[i]!.adv\n        if (at + adv > 0 && list[i]!.ch !== \" \") {\n          const mid = at + adv / 2\n          if (mid < reach) {\n            // Pieces are evenly spaced, so the ones a glyph spans are direct.\n            const per = vine.cuts[1]! - vine.cuts[0]!\n            const lastPiece = vine.depths.length - 1\n            const k0 = Math.min(\n              lastPiece,\n              Math.floor(Math.max(0, at) / STEP / per)\n            )\n            const k1 = Math.min(lastPiece, Math.floor((at + adv) / STEP / per))\n            for (let k = k0; k <= k1; k++) placed[v]![k]!.push([mid, i])\n          }\n        }\n        at += adv\n        i = (i + 1) % list.length\n      }\n    })\n\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"butt\"\n    ctx!.font = font\n    ctx!.textBaseline = \"middle\"\n    ctx!.textAlign = \"center\"\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = (vine.length * eased) / STEP\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const whole = b <= reach\n      const path = whole\n        ? paths[v]![index]!\n        : {\n            gap: tracePath(vine, a, reach),\n            ribbon: tracePath(vine, a - 1, reach),\n          }\n\n      // Cut a gap around this piece, so whatever it crosses reads as beneath.\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = thickness + halo * 2\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.strokeStyle = ribbon\n      ctx!.lineWidth = thickness\n      // The ribbon runs a sample past each end, hiding the seam between pieces.\n      ctx!.stroke(path.ribbon)\n\n      ctx!.fillStyle = ink\n      const p = vine.points\n      const lastSample = p.length / 2 - 1\n      for (const [mid, gi] of placed[v]![index]!) {\n        const s = mid / STEP\n        const i0 = clamp(Math.floor(s), 0, lastSample - 1)\n        const k = s - i0\n        const x0 = p[i0 * 2]!\n        const y0 = p[i0 * 2 + 1]!\n        const x1 = p[i0 * 2 + 2]!\n        const y1 = p[i0 * 2 + 3]!\n        const angle = Math.atan2(y1 - y0, x1 - x0)\n        const cos = Math.cos(angle)\n        const sin = Math.sin(angle)\n        ctx!.setTransform(\n          dpr * cos,\n          dpr * sin,\n          -dpr * sin,\n          dpr * cos,\n          dpr * (x0 + (x1 - x0) * k),\n          dpr * (y0 + (y1 - y0) * k)\n        )\n        ctx!.fillText(glyphs[v]![gi]!.ch, 0, 0)\n      }\n      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    }\n  }\n\n  const animating = () =>\n    onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const moving = animating()\n    if (reduce) grow = 1\n    else if (seen && moving) grow = Math.min(1, grow + dt / GROW_S)\n    if (moving) clock += dt\n    draw()\n    if (moving) raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme)\n    if (next === dark) return\n    dark = next\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      onScreen = entry?.isIntersecting ?? true\n      if (onScreen) seen = true\n      wake()\n    },\n    { rootMargin: \"64px\" }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n  // Canvas text can't wait on a web font by itself.\n  document.fonts?.ready.then(() => {\n    rebuild()\n    wake()\n  })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      syncTheme()\n      if (\n        prev.lines !== options.lines ||\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type TangleFooterProps = TangleFooterOptions & {\n  className?: string\n  /**\n   * Field behind the vines. Omit for theme-aware defaults (warm cream on\n   * light, near-black on dark). Pass `\"transparent\"` when the parent\n   * already paints the stage.\n   */\n  background?: string\n  /** Footer height in px. Default `320`. */\n  height?: number\n  /** Accessible label. */\n  label?: string\n}\n\n/** Stage color before and behind the canvas; hex literals for Tailwind. */\nconst SURFACE: Record<TangleFooterTheme, string> = {\n  auto: \"bg-[#EFEAE2] dark:bg-[#121210]\",\n  dark: \"bg-[#121210]\",\n  light: \"bg-[#EFEAE2]\",\n}\n\n/**\n * A footer of tangled vines — thick ribbons that curl into loops and weave\n * over and under each other, with your copy running along them. The vines\n * grow in the first time the footer is seen.\n */\nexport function TangleFooter({\n  className,\n  lines = DEFAULT_LINES,\n  ribbon,\n  textColor,\n  background,\n  height = 320,\n  vines = DEFAULT_VINES,\n  speed = DEFAULT_SPEED,\n  thickness,\n  seed = DEFAULT_SEED,\n  theme = \"auto\",\n  label = \"Site footer\",\n}: TangleFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<TangleFooterInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createTangleFooter(canvas, {\n      lines,\n      ribbon,\n      textColor,\n      vines,\n      speed,\n      thickness,\n      seed,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      lines,\n      ribbon,\n      textColor,\n      vines,\n      speed,\n      thickness,\n      seed,\n      theme,\n    })\n  }, [lines, ribbon, textColor, vines, speed, thickness, seed, theme])\n\n  return (\n    <footer\n      data-slot=\"tangle-footer\"\n      aria-label={label}\n      className={cn(\n        \"relative w-full overflow-hidden\",\n        background === undefined && (SURFACE[theme] ?? SURFACE.auto),\n        className\n      )}\n      style={{ background, height }}\n    >\n      <canvas\n        ref={canvasRef}\n        aria-hidden\n        className=\"absolute inset-0 size-full\"\n      />\n      <p className=\"sr-only\">{lines.join(\" \")}</p>\n    </footer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type TangleFooterOptions = {\n  /** Line color, any CSS color. Omit to use the text color (`currentColor`). */\n  color?: string\n  /** How many vines. Default `3`. */\n  vines?: number\n  /** Line width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const DEFAULT_VINES = 3\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** A pen-line width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.0021, 1.75, 3.5)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: Pick<TangleFooterOptions, \"vines\" | \"seed\"> = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  // Smallest loop the wheel sizes produce (spoke ≈ 2 wheels at the low end).\n  const minLoop = height * 0.14\n  // Pieces shorter than half the smallest loop, so the two strands of any\n  // loop land in different pieces and the loop can cross over itself.\n  const piece = minLoop * 1.5\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.62 + (v / Math.max(1, count - 1)) * 0.28)\n    const wheel0 = height * (0.1 + rand() * 0.05)\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.18 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves. The ratio snaps\n      // quickly between the two, since loops just past 1 read as thin\n      // teardrops and waves just under 1 as sharp cusps.\n      const c = curl(s)\n      const k = clamp((c + 0.1) / 0.25, 0, 1)\n      let spoke = wheel * (0.7 + 1.35 * k * k * (3 - 2 * k) + 0.25 * c)\n      // Keep every loop under the top edge.\n      spoke = Math.min(spoke, Math.max(minLoop * 0.5, (y0 - height * 0.06) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n\n    return {\n      points: Float32Array.from(points),\n      cuts,\n      depths: cuts.slice(0, -1).map(() => rand()),\n    }\n  })\n}\n\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled pen-line vines on a transparent canvas, in the text color by\n * default. They grow in from the left the first time they're seen, then\n * hold still — nothing runs after that. Redraws on resize and theme change.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  /** Cached gap and line paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; line: Path2D }[][] = []\n  let thickness = 2\n  let grow = 0\n  let seen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const end = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, end)\n    const to = clamp(Math.ceil(b), 0, end)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 0.5, 24)\n    vines = buildVines(w, h, options)\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        // A sample past each end hides the seam between pieces.\n        line: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length || grow <= 0) return\n\n    const eased = 1 - (1 - grow) ** 3\n    // Clear space each side of a line where it crosses over another.\n    const gap = thickness + Math.max(2, thickness * 1.1) * 2\n    ctx!.strokeStyle =\n      options.color?.trim() || getComputedStyle(canvas).color || \"#000\"\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"round\"\n\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = ((vine.points.length / 2 - 1) * eased) | 0\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const path =\n        b <= reach\n          ? paths[v]![index]!\n          : {\n              gap: tracePath(vine, a, reach),\n              line: tracePath(vine, a - 1, reach),\n            }\n\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = gap\n      ctx!.lineCap = \"butt\"\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.lineWidth = thickness\n      ctx!.lineCap = \"round\"\n      ctx!.stroke(path.line)\n    }\n  }\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (mqReduce.matches) grow = seen ? 1 : grow\n    else if (seen && document.visibilityState !== \"hidden\")\n      grow = Math.min(1, grow + dt / GROW_S)\n    draw()\n    // Frames only while growing; afterwards it's a still drawing.\n    if (seen && grow < 1) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (!entry?.isIntersecting || seen) return\n      seen = true\n      io.disconnect()\n      wake()\n    },\n    { threshold: 0.25 }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  // `currentColor` follows the theme; redraw when it flips.\n  const mo = new MutationObserver(() => wake())\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", wake)\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n        // A new tangle grows in again.\n        if (!mqReduce.matches) grow = 0\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqDark.removeEventListener(\"change\", wake)\n    },\n  }\n}\n\nexport type TangleFooterProps = TangleFooterOptions & {\n  className?: string\n  /** Footer height in px. Default `320`. */\n  height?: number\n}\n\n/**\n * A footer of tangled vines — pen lines that curl into loops and cross over\n * and under each other. Transparent, in the text color, so it sits on any\n * page and follows light and dark. Grows in once when first seen.\n */\nexport function TangleFooter({\n  className,\n  color,\n  height = 320,\n  vines = DEFAULT_VINES,\n  thickness,\n  seed = DEFAULT_SEED,\n}: TangleFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<TangleFooterInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createTangleFooter(canvas, {\n      color,\n      vines,\n      thickness,\n      seed,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({ color, vines, thickness, seed })\n  }, [color, vines, thickness, seed])\n\n  return (\n    <footer\n      data-slot=\"tangle-footer\"\n      className={cn(\"relative w-full overflow-hidden\", className)}\n      style={{ height }}\n    >\n      <canvas\n        ref={canvasRef}\n        aria-hidden\n        className=\"absolute inset-0 size-full\"\n      />\n    </footer>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/tangle-footer.tsx"
     }
diff --git a/registry/tangle-footer/registry.json b/registry/tangle-footer/registry.json
index 92a7f66..db60ff8 100644
--- a/registry/tangle-footer/registry.json
+++ b/registry/tangle-footer/registry.json
@@ -5,7 +5,7 @@
       "name": "tangle-footer",
       "type": "registry:ui",
       "title": "Tangle Footer",
-      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
+      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
       "files": [
         {
           "path": "tangle-footer.tsx",
@@ -18,7 +18,7 @@
       "name": "tangle-footer-svelte",
       "type": "registry:ui",
       "title": "Tangle Footer",
-      "description": "A footer of tangled vines — ribbons curl into loops and weave over and under each other, with your copy running along them.",
+      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
       "files": [
         {
           "path": "tangle-footer.svelte",
diff --git a/registry/tangle-footer/tangle-footer-demo.tsx b/registry/tangle-footer/tangle-footer-demo.tsx
index 35e4d82..e68399e 100644
--- a/registry/tangle-footer/tangle-footer-demo.tsx
+++ b/registry/tangle-footer/tangle-footer-demo.tsx
@@ -1,113 +1,38 @@
 "use client"
 
-import { useLayoutEffect, useMemo } from "react"
+import { useMemo } from "react"
 
 import {
   ComponentControls,
-  ControlColor,
   ControlSlider,
 } from "@/components/component-controls"
 import { ComponentPreview } from "@/components/component-preview"
-import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
-import { cn } from "@/lib/utils"
 import {
   DEFAULT_SEED,
-  DEFAULT_SPEED,
   DEFAULT_VINES,
   TangleFooter,
 } from "@/registry/tangle-footer/tangle-footer"
 
-/** Matches TangleFooter theme defaults (uppercase for color inputs). */
-const LIGHT = {
-  ribbon: "#141414",
-  textColor: "#F4F0E8",
-  stage: "#EFEAE2",
-}
-const DARK = {
-  ribbon: "#E8E4DC",
-  textColor: "#161616",
-  stage: "#121210",
-}
-
-type ThemePalette = typeof LIGHT
-
-function norm(hex: string) {
-  return hex.trim().toUpperCase()
-}
-
-function matchesPalette(
-  ribbon: string,
-  textColor: string,
-  stage: string,
-  palette: ThemePalette
-) {
-  return (
-    norm(ribbon) === norm(palette.ribbon) &&
-    norm(textColor) === norm(palette.textColor) &&
-    norm(stage) === norm(palette.stage)
-  )
-}
-
-/** True when colors are still one of the built-in theme triples. */
-function isStockThemePalette(ribbon: string, textColor: string, stage: string) {
-  return (
-    matchesPalette(ribbon, textColor, stage, LIGHT) ||
-    matchesPalette(ribbon, textColor, stage, DARK)
-  )
-}
-
-const LINES = [
-  "Ship something opinionated — less boilerplate, clearer decisions. ",
-  "Knows what’s going on. Can you check in with them and see what’s next. ",
-  "The new timeline should be ready by Friday, although it’s probably going to slip. ",
-  "Open the docs, grab a component, and make it yours in the codebase. ",
-  "Radiant lines, shader wash, gooey picker — install what you need and move. ",
-]
+/** Where the Thickness slider sits while the footer picks its own width. */
+const AUTO_THICKNESS = 2.5
 
 export function TangleFooterDemo() {
-  const theme = useHydratedTheme()
-  const palette: ThemePalette = theme === "dark" ? DARK : LIGHT
-
   const defaults = useMemo(
     () => ({
       height: 320,
       vines: DEFAULT_VINES,
-      speed: DEFAULT_SPEED,
+      thickness: AUTO_THICKNESS,
       seed: DEFAULT_SEED,
-      ribbon: palette.ribbon,
-      textColor: palette.textColor,
-      stage: palette.stage,
     }),
-    [palette]
+    []
   )
 
-  const { props, updateProp, resetProps, hasChanges, setProps } =
+  const { props, updateProp, resetProps, hasChanges } =
     usePreviewProps(defaults)
 
-  // Keep stock ribbon/text/stage on the active theme until the user picks custom colors.
-  useLayoutEffect(() => {
-    setProps((prev) => {
-      if (!isStockThemePalette(prev.ribbon, prev.textColor, prev.stage)) {
-        return prev
-      }
-      if (matchesPalette(prev.ribbon, prev.textColor, prev.stage, palette)) {
-        return prev
-      }
-      return {
-        ...prev,
-        ribbon: palette.ribbon,
-        textColor: palette.textColor,
-        stage: palette.stage,
-      }
-    })
-  }, [palette, setProps])
-
-  const useAutoTheme = isStockThemePalette(
-    props.ribbon,
-    props.textColor,
-    props.stage
-  )
+  const thickness =
+    props.thickness === AUTO_THICKNESS ? undefined : props.thickness
 
   return (
     <>
@@ -116,25 +41,13 @@ export function TangleFooterDemo() {
         stageClassName="min-h-0 overflow-hidden p-0"
         align="start"
       >
-        <div
-          className={cn(
-            "flex h-[56svh] w-full flex-col justify-end overflow-hidden rounded-[inherit]",
-            useAutoTheme && "bg-[#EFEAE2] dark:bg-[#121210]"
-          )}
-          style={useAutoTheme ? undefined : { backgroundColor: props.stage }}
-        >
-          <div className="w-full max-w-7xl self-center">
-            <TangleFooter
-              background="transparent"
-              height={props.height}
-              vines={props.vines}
-              speed={props.speed}
-              seed={props.seed}
-              ribbon={useAutoTheme ? undefined : props.ribbon}
-              textColor={useAutoTheme ? undefined : props.textColor}
-              lines={LINES}
-            />
-          </div>
+        <div className="flex h-[56svh] w-full flex-col justify-end overflow-hidden rounded-[inherit] bg-background text-foreground">
+          <TangleFooter
+            height={props.height}
+            vines={props.vines}
+            thickness={thickness}
+            seed={props.seed}
+          />
         </div>
       </ComponentPreview>
 
@@ -145,31 +58,14 @@ export function TangleFooterDemo() {
         snippetProps={{
           height: props.height === 320 ? undefined : props.height,
           vines: props.vines === DEFAULT_VINES ? undefined : props.vines,
-          speed: props.speed === DEFAULT_SPEED ? undefined : props.speed,
+          thickness,
           seed: props.seed === DEFAULT_SEED ? undefined : props.seed,
-          ribbon: useAutoTheme ? undefined : props.ribbon,
-          textColor: useAutoTheme ? undefined : props.textColor,
         }}
       >
-        <ControlColor
-          label="Stage"
-          value={props.stage}
-          onChange={(v) => updateProp("stage", v)}
-        />
-        <ControlColor
-          label="Ribbon"
-          value={props.ribbon}
-          onChange={(v) => updateProp("ribbon", v)}
-        />
-        <ControlColor
-          label="Text"
-          value={props.textColor}
-          onChange={(v) => updateProp("textColor", v)}
-        />
         <ControlSlider
           label="Height"
           value={props.height}
-          min={200}
+          min={160}
           max={480}
           step={10}
           onChange={(v) => updateProp("height", v)}
@@ -183,12 +79,12 @@ export function TangleFooterDemo() {
           onChange={(v) => updateProp("vines", v)}
         />
         <ControlSlider
-          label="Speed"
-          value={props.speed}
-          min={0}
-          max={120}
-          step={2}
-          onChange={(v) => updateProp("speed", v)}
+          label="Thickness"
+          value={props.thickness}
+          min={1}
+          max={6}
+          step={0.25}
+          onChange={(v) => updateProp("thickness", v)}
         />
         <ControlSlider
           label="Seed"
diff --git a/registry/tangle-footer/tangle-footer-vanilla.ts b/registry/tangle-footer/tangle-footer-vanilla.ts
index 3c9503a..f16905a 100644
--- a/registry/tangle-footer/tangle-footer-vanilla.ts
+++ b/registry/tangle-footer/tangle-footer-vanilla.ts
@@ -1,33 +1,12 @@
-export const DEFAULT_LINES = [
-  "Ship something opinionated — less boilerplate, clearer decisions.",
-  "Knows what’s going on. Can you check in with them and see what’s next.",
-  "The new timeline should be ready by Friday, although it’s probably going to slip.",
-  "Open the docs, grab a component, and make it yours in the codebase.",
-  "Radiant lines, shader wash, gooey picker — install what you need and move.",
-]
-
-export type TangleFooterTheme = "light" | "dark" | "auto"
-
 export type TangleFooterOptions = {
-  /** Phrases that run along the vines. */
-  lines?: string[]
-  /** Ribbon color. Omit to follow `theme` (ink on light, cream on dark). */
-  ribbon?: string
-  /** Lettering on the ribbons. Omit to follow `theme`. */
-  textColor?: string
-  /** How many vines. Default `4`. */
+  /** Line color, any CSS color. Omit to use the text color (`currentColor`). */
+  color?: string
+  /** How many vines. Default `3`. */
   vines?: number
-  /** Marquee speed along the vines, in px per second. Default `36`. */
-  speed?: number
-  /** Ribbon width in px. Omit to scale with the footer width. */
+  /** Line width in px. Omit to scale with the footer width. */
   thickness?: number
   /** Deterministic tangle. Default `23`. */
   seed?: number
-  /**
-   * Palette mode. Default `auto` follows shadcn / next-themes
-   * (`html.dark` class).
-   */
-  theme?: TangleFooterTheme
 }
 
 export type TangleFooterInstance = {
@@ -35,14 +14,7 @@ export type TangleFooterInstance = {
   destroy: () => void
 }
 
-export const LIGHT_RIBBON = "#141414"
-export const LIGHT_TEXT = "#F4F0E8"
-export const LIGHT_BG = "#EFEAE2"
-export const DARK_RIBBON = "#E8E4DC"
-export const DARK_TEXT = "#161616"
-export const DARK_BG = "#121210"
-export const DEFAULT_VINES = 4
-export const DEFAULT_SPEED = 36
+export const DEFAULT_VINES = 3
 export const DEFAULT_SEED = 23
 
 /** Spacing of the resampled vine, in px. */
@@ -55,17 +27,10 @@ const GROW_S = 1.8
 export type Vine = {
   /** x, y pairs spaced `STEP` apart along the vine. */
   points: Float32Array
-  /** Arc length in px. */
-  length: number
   /** Where each piece of the vine starts, in samples, plus the end. */
   cuts: number[]
   /** Stacking order of each piece; higher draws on top. */
   depths: number[]
-  /** The copy that repeats along this vine. */
-  text: string
-  /** Marquee speed multiplier and starting offset (0–1 of the copy). */
-  pace: number
-  phase: number
 }
 
 export function mulberry32(seed: number) {
@@ -99,9 +64,9 @@ function wander(rand: () => number, scale: number) {
     waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total
 }
 
-/** Ribbon width that suits a footer this wide. */
+/** A pen-line width that suits a footer this wide. */
 export function autoThickness(width: number) {
-  return clamp(width * 0.019, 16, 28)
+  return clamp(width * 0.0021, 1.75, 3.5)
 }
 
 /**
@@ -117,21 +82,15 @@ export function autoThickness(width: number) {
 export function buildVines(
   width: number,
   height: number,
-  options: {
-    vines?: number
-    thickness?: number
-    seed?: number
-    lines?: string[]
-  } = {}
+  options: Pick<TangleFooterOptions, "vines" | "seed"> = {}
 ): Vine[] {
   const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))
-  const w = numberOr(options.thickness, autoThickness(width), 6, 80)
   const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))
-  const pool = options.lines?.filter((line) => line.trim()) ?? []
-  const lines = pool.length ? pool : DEFAULT_LINES
-  // Pieces short enough that the two strands of any loop land in different
-  // pieces, so a loop can cross over itself.
-  const piece = w * 4
+  // Smallest loop the wheel sizes produce (spoke ≈ 2 wheels at the low end).
+  const minLoop = height * 0.14
+  // Pieces shorter than half the smallest loop, so the two strands of any
+  // loop land in different pieces and the loop can cross over itself.
+  const piece = minLoop * 1.5
 
   return Array.from({ length: count }, (_, v) => {
     const rand = mulberry32(seed * 7919 + v * 104729)
@@ -140,27 +99,30 @@ export function buildVines(
     const size = wander(rand, scale)
     const curl = wander(rand, scale * 0.8)
     // Spread the vines through the lower band; loops climb from there.
-    const floor = height * (0.6 + (v / Math.max(1, count - 1)) * 0.3)
-    const wheel0 = Math.max(w * 1.2, height * (0.07 + rand() * 0.04))
+    const floor = height * (0.62 + (v / Math.max(1, count - 1)) * 0.28)
+    const wheel0 = height * (0.1 + rand() * 0.05)
 
     const raw: number[] = []
     let phi = rand() * Math.PI * 2
     const start = -width * OVERHANG
     const end = width * (1 + OVERHANG)
     for (let s = start; s <= end; s += 1) {
-      const y0 = floor + height * 0.2 * baseline(s)
+      const y0 = floor + height * 0.18 * baseline(s)
       const wheel = wheel0 * (1 + 0.45 * size(s))
       // Past 1 the pen outruns the wheel and curls into a loop; near 2 the
-      // loop closes round. Below 1 the vine just waves.
-      let spoke = wheel * (1.5 + 1.05 * curl(s))
-      // Open any loop too tight to read, then keep it under the top edge.
-      if (spoke > wheel) spoke = Math.max(spoke, w * 2.3)
-      spoke = Math.min(spoke, Math.max(w, (y0 - w * 0.6) / 2))
+      // loop closes round. Below 1 the vine just waves. The ratio snaps
+      // quickly between the two, since loops just past 1 read as thin
+      // teardrops and waves just under 1 as sharp cusps.
+      const c = curl(s)
+      const k = clamp((c + 0.1) / 0.25, 0, 1)
+      let spoke = wheel * (0.7 + 1.35 * k * k * (3 - 2 * k) + 0.25 * c)
+      // Keep every loop under the top edge.
+      spoke = Math.min(spoke, Math.max(minLoop * 0.5, (y0 - height * 0.06) / 2))
       phi += 1 / wheel
       raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))
     }
 
-    // Resample to even spacing so text and pieces are measured in px.
+    // Resample to even spacing so pieces are measured in px.
     const points: number[] = [raw[0]!, raw[1]!]
     let carry = 0
     for (let i = 2; i < raw.length; i += 2) {
@@ -183,50 +145,21 @@ export function buildVines(
     const cuts: number[] = []
     for (let i = 0; i < samples - 1; i += per) cuts.push(i)
     cuts.push(samples - 1)
-    const depths = cuts.slice(0, -1).map(() => rand())
-
-    const line = lines[Math.floor(rand() * lines.length)]!
-    const other = lines[Math.floor(rand() * lines.length)]!
-    const text =
-      line === other ? `${line}   ·   ` : `${line}   ·   ${other}   ·   `
 
     return {
       points: Float32Array.from(points),
-      length: (samples - 1) * STEP,
       cuts,
-      depths,
-      text,
-      pace: 0.8 + rand() * 0.4,
-      phase: rand(),
+      depths: cuts.slice(0, -1).map(() => rand()),
     }
   })
 }
 
-/** Resolves shadcn / next-themes dark mode (`attribute="class"` → `html.dark`). */
-export function isDarkTheme(): boolean {
-  if (typeof document === "undefined") return false
-  const root = document.documentElement
-  if (root.classList.contains("dark")) return true
-  if (root.classList.contains("light")) return false
-  const dataTheme = root.getAttribute("data-theme")
-  if (dataTheme === "dark") return true
-  if (dataTheme === "light") return false
-  return window.matchMedia("(prefers-color-scheme: dark)").matches
-}
-
-export function resolveDark(theme: TangleFooterTheme = "auto"): boolean {
-  if (theme === "dark") return true
-  if (theme === "light") return false
-  return isDarkTheme()
-}
-
-type Glyph = { ch: string; adv: number }
 type Piece = { vine: number; index: number; depth: number }
 
 /**
- * Tangled text vines on a canvas. The vines grow in from the left the first
- * time they're seen, then the copy runs along them. Pauses off-screen and in
- * hidden tabs; holds still under `prefers-reduced-motion`.
+ * Tangled pen-line vines on a transparent canvas, in the text color by
+ * default. They grow in from the left the first time they're seen, then
+ * hold still — nothing runs after that. Redraws on resize and theme change.
  */
 export function createTangleFooter(
   canvas: HTMLCanvasElement,
@@ -239,32 +172,38 @@ export function createTangleFooter(
   const size = { w: 0, h: 0, dpr: 1 }
   let vines: Vine[] = []
   let order: Piece[] = []
-  let glyphs: Glyph[][] = []
-  let units: number[] = []
-  /** Cached gap and ribbon paths per piece; the geometry never moves. */
-  let paths: { gap: Path2D; ribbon: Path2D }[][] = []
-  let thickness = 20
-  let font = ""
-  let dark = resolveDark(options.theme)
+  /** Cached gap and line paths per piece; the geometry never moves. */
+  let paths: { gap: Path2D; line: Path2D }[][] = []
+  let thickness = 2
   let grow = 0
-  let clock = 0
   let seen = false
-  let onScreen = false
   let raf = 0
   let last = 0
 
   const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
-  let reduce = mqReduce.matches
+
+  /** The stretch of a vine from sample `a` to `b` as a path. */
+  function tracePath(vine: Vine, a: number, b: number) {
+    const p = vine.points
+    const end = p.length / 2 - 1
+    const from = clamp(Math.floor(a), 0, end)
+    const to = clamp(Math.ceil(b), 0, end)
+    const path = new Path2D()
+    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)
+    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)
+    return path
+  }
 
   const rebuild = () => {
     const { w, h } = size
     if (w < 2 || h < 2) return
-    thickness = numberOr(options.thickness, autoThickness(w), 6, 80)
-    vines = buildVines(w, h, { ...options, thickness })
+    thickness = numberOr(options.thickness, autoThickness(w), 0.5, 24)
+    vines = buildVines(w, h, options)
     paths = vines.map((vine) =>
       vine.depths.map((_, k) => ({
         gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),
-        ribbon: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),
+        // A sample past each end hides the seam between pieces.
+        line: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),
       }))
     )
     order = vines
@@ -272,21 +211,6 @@ export function createTangleFooter(
         vine.depths.map((depth, index) => ({ vine: v, index, depth }))
       )
       .sort((a, b) => a.depth - b.depth)
-    const family = getComputedStyle(canvas).fontFamily || "sans-serif"
-    font = `700 ${Math.round(thickness * 0.5)}px ${family}`
-    ctx.font = font
-    const widths = new Map<string, number>()
-    glyphs = vines.map((vine) =>
-      Array.from(vine.text).map((ch) => {
-        let adv = widths.get(ch)
-        if (adv === undefined) {
-          adv = ctx.measureText(ch).width
-          widths.set(ch, adv)
-        }
-        return { ch, adv }
-      })
-    )
-    units = glyphs.map((list) => list.reduce((sum, g) => sum + g.adv, 0))
   }
 
   const resize = () => {
@@ -303,125 +227,46 @@ export function createTangleFooter(
     wake()
   }
 
-  /** The stretch of a vine from sample `a` to `b` as a path. */
-  function tracePath(vine: Vine, a: number, b: number) {
-    const p = vine.points
-    const last = p.length / 2 - 1
-    const from = clamp(Math.floor(a), 0, last)
-    const to = clamp(Math.ceil(b), 0, last)
-    const path = new Path2D()
-    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)
-    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)
-    return path
-  }
-
   function draw() {
     const { w, h, dpr } = size
     ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
     ctx!.clearRect(0, 0, w, h)
-    if (!vines.length) return
+    if (!vines.length || grow <= 0) return
 
-    const ribbon = options.ribbon?.trim() || (dark ? DARK_RIBBON : LIGHT_RIBBON)
-    const ink = options.textColor?.trim() || (dark ? DARK_TEXT : LIGHT_TEXT)
-    const halo = Math.max(2.5, thickness * 0.16)
-    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 400)
     const eased = 1 - (1 - grow) ** 3
-
-    // Lay the copy along each vine and hand every glyph to the pieces it
-    // touches, so a piece drawn on top never clips a neighbour's letters.
-    const placed: [number, number][][][] = vines.map((vine) =>
-      vine.depths.map(() => [])
-    )
-    vines.forEach((vine, v) => {
-      const list = glyphs[v]!
-      const unit = units[v]!
-      if (!list.length || unit <= 0) return
-      const reach = vine.length * eased
-      const shift = (clock * speed * vine.pace + vine.phase * unit) % unit
-      let at = -shift
-      let i = 0
-      while (at < reach) {
-        const adv = list[i]!.adv
-        if (at + adv > 0 && list[i]!.ch !== " ") {
-          const mid = at + adv / 2
-          if (mid < reach) {
-            // Pieces are evenly spaced, so the ones a glyph spans are direct.
-            const per = vine.cuts[1]! - vine.cuts[0]!
-            const lastPiece = vine.depths.length - 1
-            const k0 = Math.min(
-              lastPiece,
-              Math.floor(Math.max(0, at) / STEP / per)
-            )
-            const k1 = Math.min(lastPiece, Math.floor((at + adv) / STEP / per))
-            for (let k = k0; k <= k1; k++) placed[v]![k]!.push([mid, i])
-          }
-        }
-        at += adv
-        i = (i + 1) % list.length
-      }
-    })
-
+    // Clear space each side of a line where it crosses over another.
+    const gap = thickness + Math.max(2, thickness * 1.1) * 2
+    ctx!.strokeStyle =
+      options.color?.trim() || getComputedStyle(canvas).color || "#000"
     ctx!.lineJoin = "round"
-    ctx!.lineCap = "butt"
-    ctx!.font = font
-    ctx!.textBaseline = "middle"
-    ctx!.textAlign = "center"
+    ctx!.lineCap = "round"
+
     for (const { vine: v, index } of order) {
       const vine = vines[v]!
-      const reach = (vine.length * eased) / STEP
+      const reach = ((vine.points.length / 2 - 1) * eased) | 0
       const a = vine.cuts[index]!
       if (a >= reach) continue
       const b = vine.cuts[index + 1]!
       // Only the growing tip needs a fresh path.
-      const whole = b <= reach
-      const path = whole
-        ? paths[v]![index]!
-        : {
-            gap: tracePath(vine, a, reach),
-            ribbon: tracePath(vine, a - 1, reach),
-          }
+      const path =
+        b <= reach
+          ? paths[v]![index]!
+          : {
+              gap: tracePath(vine, a, reach),
+              line: tracePath(vine, a - 1, reach),
+            }
 
-      // Cut a gap around this piece, so whatever it crosses reads as beneath.
       ctx!.globalCompositeOperation = "destination-out"
-      ctx!.lineWidth = thickness + halo * 2
+      ctx!.lineWidth = gap
+      ctx!.lineCap = "butt"
       ctx!.stroke(path.gap)
       ctx!.globalCompositeOperation = "source-over"
-      ctx!.strokeStyle = ribbon
       ctx!.lineWidth = thickness
-      // The ribbon runs a sample past each end, hiding the seam between pieces.
-      ctx!.stroke(path.ribbon)
-
-      ctx!.fillStyle = ink
-      const p = vine.points
-      const lastSample = p.length / 2 - 1
-      for (const [mid, gi] of placed[v]![index]!) {
-        const s = mid / STEP
-        const i0 = clamp(Math.floor(s), 0, lastSample - 1)
-        const k = s - i0
-        const x0 = p[i0 * 2]!
-        const y0 = p[i0 * 2 + 1]!
-        const x1 = p[i0 * 2 + 2]!
-        const y1 = p[i0 * 2 + 3]!
-        const angle = Math.atan2(y1 - y0, x1 - x0)
-        const cos = Math.cos(angle)
-        const sin = Math.sin(angle)
-        ctx!.setTransform(
-          dpr * cos,
-          dpr * sin,
-          -dpr * sin,
-          dpr * cos,
-          dpr * (x0 + (x1 - x0) * k),
-          dpr * (y0 + (y1 - y0) * k)
-        )
-        ctx!.fillText(glyphs[v]![gi]!.ch, 0, 0)
-      }
-      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx!.lineCap = "round"
+      ctx!.stroke(path.line)
     }
   }
 
-  const animating = () =>
-    onScreen && !reduce && document.visibilityState !== "hidden"
-
   function wake() {
     if (raf) return
     last = performance.now()
@@ -432,51 +277,36 @@ export function createTangleFooter(
     raf = 0
     const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
     last = now
-    const moving = animating()
-    if (reduce) grow = 1
-    else if (seen && moving) grow = Math.min(1, grow + dt / GROW_S)
-    if (moving) clock += dt
+    if (mqReduce.matches) grow = seen ? 1 : grow
+    else if (seen && document.visibilityState !== "hidden")
+      grow = Math.min(1, grow + dt / GROW_S)
     draw()
-    if (moving) raf = requestAnimationFrame(tick)
-  }
-
-  const syncTheme = () => {
-    const next = resolveDark(options.theme)
-    if (next === dark) return
-    dark = next
-    wake()
+    // Frames only while growing; afterwards it's a still drawing.
+    if (seen && grow < 1) raf = requestAnimationFrame(tick)
   }
 
   const ro = new ResizeObserver(resize)
   if (canvas.parentElement) ro.observe(canvas.parentElement)
   const io = new IntersectionObserver(
     ([entry]) => {
-      onScreen = entry?.isIntersecting ?? true
-      if (onScreen) seen = true
+      if (!entry?.isIntersecting || seen) return
+      seen = true
+      io.disconnect()
       wake()
     },
-    { rootMargin: "64px" }
+    { threshold: 0.25 }
   )
   io.observe(canvas)
   const onVisibility = () => wake()
   document.addEventListener("visibilitychange", onVisibility)
-  const onReduce = () => {
-    reduce = mqReduce.matches
-    wake()
-  }
-  mqReduce.addEventListener("change", onReduce)
-  const mo = new MutationObserver(syncTheme)
+  // `currentColor` follows the theme; redraw when it flips.
+  const mo = new MutationObserver(() => wake())
   mo.observe(document.documentElement, {
     attributes: true,
-    attributeFilter: ["class", "data-theme"],
+    attributeFilter: ["class", "data-theme", "style"],
   })
   const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
-  mqDark.addEventListener("change", syncTheme)
-  // Canvas text can't wait on a web font by itself.
-  document.fonts?.ready.then(() => {
-    rebuild()
-    wake()
-  })
+  mqDark.addEventListener("change", wake)
 
   resize()
   wake()
@@ -485,14 +315,14 @@ export function createTangleFooter(
     setOptions(next) {
       const prev = options
       options = { ...options, ...next }
-      syncTheme()
       if (
-        prev.lines !== options.lines ||
         prev.vines !== options.vines ||
         prev.seed !== options.seed ||
         prev.thickness !== options.thickness
       ) {
         rebuild()
+        // A new tangle grows in again.
+        if (!mqReduce.matches) grow = 0
       }
       wake()
     },
@@ -503,8 +333,7 @@ export function createTangleFooter(
       io.disconnect()
       mo.disconnect()
       document.removeEventListener("visibilitychange", onVisibility)
-      mqReduce.removeEventListener("change", onReduce)
-      mqDark.removeEventListener("change", syncTheme)
+      mqDark.removeEventListener("change", wake)
     },
   }
 }
diff --git a/registry/tangle-footer/tangle-footer.svelte b/registry/tangle-footer/tangle-footer.svelte
index f0762ae..4598b58 100644
--- a/registry/tangle-footer/tangle-footer.svelte
+++ b/registry/tangle-footer/tangle-footer.svelte
@@ -5,13 +5,10 @@
   import { onMount, untrack } from "svelte"
   import {
     createTangleFooter,
-    DEFAULT_LINES,
     DEFAULT_SEED,
-    DEFAULT_SPEED,
     DEFAULT_VINES,
     type TangleFooterInstance,
     type TangleFooterOptions,
-    type TangleFooterTheme,
   } from "./tangle-footer-vanilla"
 
   function cn(...parts: Array<string | false | null | undefined>) {
@@ -20,40 +17,19 @@
 
   interface Props extends TangleFooterOptions {
     class?: string
-    /**
-     * Field behind the vines. Omit for theme-aware defaults (warm cream on
-     * light, near-black on dark). Pass `"transparent"` when the parent
-     * already paints the stage.
-     */
-    background?: string
     /** Footer height in px. Default `320`. */
     height?: number
-    /** Accessible label. */
-    label?: string
   }
 
   let {
     class: className = "",
-    lines = DEFAULT_LINES,
-    ribbon,
-    textColor,
-    background,
+    color,
     height = 320,
     vines = DEFAULT_VINES,
-    speed = DEFAULT_SPEED,
     thickness,
     seed = DEFAULT_SEED,
-    theme = "auto",
-    label = "Site footer",
   }: Props = $props()
 
-  /** Stage color before and behind the canvas; hex literals for Tailwind. */
-  const SURFACE: Record<TangleFooterTheme, string> = {
-    auto: "bg-[#EFEAE2] dark:bg-[#121210]",
-    dark: "bg-[#121210]",
-    light: "bg-[#EFEAE2]",
-  }
-
   let canvas: HTMLCanvasElement | undefined = $state()
   let instance: TangleFooterInstance | null = null
 
@@ -61,16 +37,7 @@
     if (!canvas) return
     instance = createTangleFooter(
       canvas,
-      untrack(() => ({
-        lines,
-        ribbon,
-        textColor,
-        vines,
-        speed,
-        thickness,
-        seed,
-        theme,
-      }))
+      untrack(() => ({ color, vines, thickness, seed }))
     )
     return () => {
       instance?.destroy()
@@ -79,31 +46,15 @@
   })
 
   $effect(() => {
-    instance?.setOptions({
-      lines,
-      ribbon,
-      textColor,
-      vines,
-      speed,
-      thickness,
-      seed,
-      theme,
-    })
+    instance?.setOptions({ color, vines, thickness, seed })
   })
 </script>
 
 <footer
   data-slot="tangle-footer"
-  aria-label={label}
-  class={cn(
-    "relative w-full overflow-hidden",
-    background === undefined && (SURFACE[theme] ?? SURFACE.auto),
-    className
-  )}
-  style:background={background}
+  class={cn("relative w-full overflow-hidden", className)}
   style:height="{height}px"
 >
   <canvas bind:this={canvas} aria-hidden="true" class="absolute inset-0 size-full"
   ></canvas>
-  <p class="sr-only">{lines.join(" ")}</p>
 </footer>
diff --git a/registry/tangle-footer/tangle-footer.tsx b/registry/tangle-footer/tangle-footer.tsx
index f39053e..9c944a6 100644
--- a/registry/tangle-footer/tangle-footer.tsx
+++ b/registry/tangle-footer/tangle-footer.tsx
@@ -6,72 +6,36 @@ import { cn } from "@/lib/utils"
 
 import {
   createTangleFooter,
-  DEFAULT_LINES,
   DEFAULT_SEED,
-  DEFAULT_SPEED,
   DEFAULT_VINES,
   type TangleFooterInstance,
   type TangleFooterOptions,
-  type TangleFooterTheme,
 } from "./tangle-footer-vanilla"
 
-export {
-  DARK_BG,
-  DARK_RIBBON,
-  DARK_TEXT,
-  DEFAULT_LINES,
-  DEFAULT_SEED,
-  DEFAULT_SPEED,
-  DEFAULT_VINES,
-  LIGHT_BG,
-  LIGHT_RIBBON,
-  LIGHT_TEXT,
-} from "./tangle-footer-vanilla"
+export { DEFAULT_SEED, DEFAULT_VINES } from "./tangle-footer-vanilla"
 export type {
   TangleFooterInstance,
   TangleFooterOptions,
-  TangleFooterTheme,
 } from "./tangle-footer-vanilla"
 
 export type TangleFooterProps = TangleFooterOptions & {
   className?: string
-  /**
-   * Field behind the vines. Omit for theme-aware defaults (warm cream on
-   * light, near-black on dark). Pass `"transparent"` when the parent
-   * already paints the stage.
-   */
-  background?: string
   /** Footer height in px. Default `320`. */
   height?: number
-  /** Accessible label. */
-  label?: string
-}
-
-/** Stage color before and behind the canvas; hex literals for Tailwind. */
-const SURFACE: Record<TangleFooterTheme, string> = {
-  auto: "bg-[#EFEAE2] dark:bg-[#121210]",
-  dark: "bg-[#121210]",
-  light: "bg-[#EFEAE2]",
 }
 
 /**
- * A footer of tangled vines — thick ribbons that curl into loops and weave
- * over and under each other, with your copy running along them. The vines
- * grow in the first time the footer is seen.
+ * A footer of tangled vines — pen lines that curl into loops and cross over
+ * and under each other. Transparent, in the text color, so it sits on any
+ * page and follows light and dark. Grows in once when first seen.
  */
 export function TangleFooter({
   className,
-  lines = DEFAULT_LINES,
-  ribbon,
-  textColor,
-  background,
+  color,
   height = 320,
   vines = DEFAULT_VINES,
-  speed = DEFAULT_SPEED,
   thickness,
   seed = DEFAULT_SEED,
-  theme = "auto",
-  label = "Site footer",
 }: TangleFooterProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const instanceRef = useRef<TangleFooterInstance | null>(null)
@@ -80,14 +44,10 @@ export function TangleFooter({
     const canvas = canvasRef.current
     if (!canvas) return
     instanceRef.current = createTangleFooter(canvas, {
-      lines,
-      ribbon,
-      textColor,
+      color,
       vines,
-      speed,
       thickness,
       seed,
-      theme,
     })
     return () => {
       instanceRef.current?.destroy()
@@ -98,35 +58,20 @@ export function TangleFooter({
   }, [])
 
   useEffect(() => {
-    instanceRef.current?.setOptions({
-      lines,
-      ribbon,
-      textColor,
-      vines,
-      speed,
-      thickness,
-      seed,
-      theme,
-    })
-  }, [lines, ribbon, textColor, vines, speed, thickness, seed, theme])
+    instanceRef.current?.setOptions({ color, vines, thickness, seed })
+  }, [color, vines, thickness, seed])
 
   return (
     <footer
       data-slot="tangle-footer"
-      aria-label={label}
-      className={cn(
-        "relative w-full overflow-hidden",
-        background === undefined && (SURFACE[theme] ?? SURFACE.auto),
-        className
-      )}
-      style={{ background, height }}
+      className={cn("relative w-full overflow-hidden", className)}
+      style={{ height }}
     >
       <canvas
         ref={canvasRef}
         aria-hidden
         className="absolute inset-0 size-full"
       />
-      <p className="sr-only">{lines.join(" ")}</p>
     </footer>
   )
 }

From 332e1597c4c024fd47c5459e5233d93916073119 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:44:54 +0530
Subject: [PATCH 18/49] Remove Tangle Footer.

Drops the component, its docs page, registry items, OG image and every
mention in the README, Getting Started and the 23rd skill. The skill's
dependency table now lists motion for gooey-color-picker only, since
Stretchy Footer no longer needs it.
---
 .cursor/skills/23rd/SKILL.md                  |  37 +-
 .cursor/skills/23rd/apis.md                   |  24 --
 .cursor/skills/23rd/components.md             |  23 +-
 .cursor/skills/23rd/recipes.md                |  26 --
 README.md                                     |   1 -
 content/docs/components/meta.json             |   1 -
 content/docs/components/tangle-footer.mdx     |  59 ---
 content/docs/getting-started.mdx              |   4 +-
 .../docs/components/tangle-footer/image.png   | Bin 47033 -> 0 bytes
 public/r/registry.json                        |  27 --
 public/r/tangle-footer-svelte.json            |  16 -
 public/r/tangle-footer.json                   |  15 -
 registry.json                                 |   3 +-
 registry/tangle-footer/registry.json          |  32 --
 registry/tangle-footer/tangle-footer-demo.tsx | 100 ------
 .../tangle-footer/tangle-footer-vanilla.ts    | 339 ------------------
 registry/tangle-footer/tangle-footer.svelte   |  60 ----
 registry/tangle-footer/tangle-footer.tsx      |  77 ----
 skills/23rd/SKILL.md                          |  37 +-
 skills/23rd/apis.md                           |  24 --
 skills/23rd/components.md                     |  23 +-
 skills/23rd/recipes.md                        |  26 --
 22 files changed, 13 insertions(+), 941 deletions(-)
 delete mode 100644 content/docs/components/tangle-footer.mdx
 delete mode 100644 public/og/docs/components/tangle-footer/image.png
 delete mode 100644 public/r/tangle-footer-svelte.json
 delete mode 100644 public/r/tangle-footer.json
 delete mode 100644 registry/tangle-footer/registry.json
 delete mode 100644 registry/tangle-footer/tangle-footer-demo.tsx
 delete mode 100644 registry/tangle-footer/tangle-footer-vanilla.ts
 delete mode 100644 registry/tangle-footer/tangle-footer.svelte
 delete mode 100644 registry/tangle-footer/tangle-footer.tsx

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index 74c8f92..caca221 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -74,7 +74,7 @@ npm dependencies the registry declares:
 
 | Item | React | Svelte |
 | --- | --- | --- |
-| `gooey-color-picker`, `tangle-footer`, `stretchy-footer` | `motion` | none |
+| `gooey-color-picker` | `motion` | none |
 | every other item | none | none |
 
 Published index: `https://23rd.dev/r/registry.json`. Docs: `https://23rd.dev/docs`.
@@ -99,7 +99,6 @@ flowchart TD
   atmo -->|Hair-line explosion| lb[logo-burst]
   atmo -->|Falling sheet music| ps[phosphor-score]
   foot -->|Rubber overscroll aurora| st[stretchy-footer]
-  foot -->|Spinning text ribbons| tf[tangle-footer]
   mark -->|Eyes that track the pointer| orb[live-orb]
   mark -->|ASCII wordmark, click to scatter| al[ascii-logo]
 ```
@@ -109,11 +108,10 @@ Disambiguation that agents get wrong:
 | User says | Use | Not |
 | --- | --- | --- |
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
-| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker`, `tangle-footer` |
+| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
 | Fire, embers, heat under a hero | `shader-fire` | `dithered-404` unless the page is a 404 |
 | 404 that burns under the cursor | `dithered-404` | `shader-fire` |
-| Footer of nested spinning sentences | `tangle-footer` | `stretchy-footer` |
-| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `tangle-footer` |
+| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) |
 | Stars that speed up when you scroll | `radiant-lines` | `logo-burst` |
 | Logo explodes into lines | `logo-burst` | `ascii-logo` |
@@ -140,8 +138,6 @@ Same shell for `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorSc
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`TangleFooter` is a `<footer>`. It is not a background. Place it after the page.
-
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
 `LiveOrb` is a fixed square (`size`, default `280`). It does not fill the viewport. The body stays put; only the eyes move.
@@ -159,11 +155,10 @@ Exceptions:
 
 - Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
-- `TangleFooter` paints `--tangle-ribbon` and `--tangle-text` on itself when `ribbon` / `textColor` are omitted. Pass those props to override. `background` omitted uses `#EFEAE2` / `#121210`.
 - `PhosphorScore` canvas is transparent in light mode (`LIGHT_BG`) and `#050505` in dark mode (`DARK_BG`). A dark phosphor field is a hard rectangle. Clip the parent (`overflow-hidden rounded-*`) if the square edge matters. Open issue: the docs preview border looks boxed ([#28](https://github.com/radiumcoders/23rd.dev/issues/28)).
 - `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
-`prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch, no tangle spin). Do not add a `reducedMotion` prop.
+`prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
 
 ## Catalog
 
@@ -178,7 +173,6 @@ Categories match `content/docs/components/meta.json`.
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
 | `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
-| `tangle-footer` | Footers | Five nested SVG text ribbons | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
 | `ascii-logo` | Characters | ASCII wordmark: hover shove, click scatter / fall / gather | React + Svelte |
@@ -234,29 +228,6 @@ export function Accent() {
 }
 ```
 
-Ribbon footer (not an overscroll effect):
-
-```bash
-pnpm dlx shadcn@latest add @23rd/tangle-footer
-```
-
-```tsx
-"use client"
-
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function SiteFooter() {
-  return (
-    <TangleFooter
-      lines={[
-        "Ship something opinionated.",
-        "Install what you need and move.",
-      ]}
-    />
-  )
-}
-```
-
 Svelte equivalents use `class`, default imports, and `@23rd/<name>-svelte`. Full prop tables are in [apis.md](apis.md). More assemblies are in [recipes.md](recipes.md).
 
 ## Adding a component
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index bb992eb..34fa891 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -194,30 +194,6 @@ type ShaderSkyProps = {
 
 `skyFallback(colors, dark)` builds the CSS fallback. Custom `colors` do not swap.
 
-## tangle-footer
-
-```ts
-type TangleFooterProps = {
-  lines?: string[] // DEFAULT_LINES, five phrases
-  ribbon?: string
-  textColor?: string
-  background?: string // or "transparent"
-  height?: number // omit → half of measured width
-  seed?: number // 23
-  label?: string // "Site footer"
-  className?: string
-}
-```
-
-When `ribbon` / `textColor` are omitted the footer sets:
-
-- `--tangle-ribbon`: `#141414` / dark `#E8E4DC`
-- `--tangle-text`: `#F4F0E8` / dark `#161616`
-
-Stroke and fill read those variables. Field classes: `bg-[#EFEAE2] dark:bg-[#121210]` unless `background` is set.
-
-`RING_COUNT` is 5. Not a prop.
-
 ## stretchy-footer
 
 ```ts
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index 2dfce83..28cc556 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -195,34 +195,13 @@ export function Sky() {
 
 Pitfalls: `interactive` defaults false (unlike gradient and fire). Custom `colors` stay put. Light `#2478C8 #8ECBF2 #F7FBFF #C5D8EC`. Dark `#9AA3AD #C8CED4 #5C6570 #3F4750`.
 
-## tangle-footer
-
-Footer. Five nested semicircle ribbons of repeated text. GPU rotation, pauses off-screen.
-
-Best fit: a site footer that is the visual, with a few phrases.
-
-Not this: rubber-band overscroll (`stretchy-footer`), a hero background.
-
-Deps: React needs `motion`. Svelte has none. Key props: `lines`, `ribbon`, `textColor`, `background`, `height`, `seed` (23), `label` (`"Site footer"`).
-
-```tsx
-"use client"
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function Footer() {
-  return <TangleFooter lines={["Open the docs.", "Install what you need."]} />
-}
-```
-
-Pitfalls: default height is half the measured width (upper semicircle, aspect `2 / 1`). A shorter `height` scales the nest down. `background="transparent"` when the parent already paints the stage. Theme colors when props are omitted: ribbon `#141414` / `#E8E4DC`, text `#F4F0E8` / `#161616`, field `#EFEAE2` / `#121210`, via `--tangle-ribbon` and `--tangle-text`. Reduced motion skips the spin. Default lines are the five sentences in `DEFAULT_LINES`.
-
 ## stretchy-footer
 
 Footer behavior. Overscroll past the bottom stretches an aurora and lifts the page, then snaps back.
 
 Best fit: a Dia-like end of a long page. The component can be the scroller, or an overlay on window / element scroll.
 
-Not this: tilting the page (`folio`), spinning type (`tangle-footer`).
+Not this: tilting the page (`folio`).
 
 Deps: React needs `motion`. Svelte uses `stretchy-footer-spring-vanilla.ts` and declares no npm deps. Key props: `children`, `scrollRef` / Svelte `scrollEl`, `windowScroll` (false), `contentSelector` (`[data-stretchy-page]`), `maxStretch` (280), `colors`, `stiffness` (380), `damping` (32), `columns` (48), `blur` (14), `glow` (0.22), `label`, `demoId`.
 
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index 0338775..c93451b 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -99,31 +99,6 @@ export function NotFound() {
 
 `dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-fire`.
 
-## Ribbon footer
-
-`tangle-footer` after the page, not inside the hero.
-
-```tsx
-"use client"
-
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function Footer() {
-  return (
-    <TangleFooter
-      seed={23}
-      lines={[
-        "Ship something opinionated.",
-        "Less boilerplate, clearer decisions.",
-        "Install what you need and move.",
-      ]}
-    />
-  )
-}
-```
-
-On a colored parent, set `background="transparent"` so the cream/near-black field does not paint a second plate.
-
 ## Rubber overscroll
 
 Nested scroller (docs and previews):
@@ -248,7 +223,6 @@ export function Brand() {
 ## Anti-patterns
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.
-- `TangleFooter` inside a hero to “add motion.” It is a footer with a fixed semicircle height.
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
 - Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).
diff --git a/README.md b/README.md
index 7847e5b..a149d2d 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,6 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
-| [Tangle Footer](https://23rd.dev/docs/components/tangle-footer)           | `@23rd/tangle-footer`      | Nested SVG text ribbons as a footer                                                |
 
 ```tsx
 import { GooeyColorPicker } from "@/components/ui/gooey-color-picker"
diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json
index e49847f..e87cea2 100644
--- a/content/docs/components/meta.json
+++ b/content/docs/components/meta.json
@@ -11,7 +11,6 @@
     "shader-fire",
     "shader-sky",
     "---Footers---",
-    "tangle-footer",
     "stretchy-footer",
     "---Characters---",
     "live-orb",
diff --git a/content/docs/components/tangle-footer.mdx b/content/docs/components/tangle-footer.mdx
deleted file mode 100644
index 31b01db..0000000
--- a/content/docs/components/tangle-footer.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Tangle Footer
-description: Tangled vines for the bottom of a page — clean pen lines that curl into loops and cross over and under each other.
----
-
-import { TangleFooterDemo } from "@/registry/tangle-footer/tangle-footer-demo"
-
-A few vines run the width of the footer, curling into round loops off a wandering baseline and relaxing into waves between them. Where lines cross, the one on top clears a hairline gap around itself, so every crossing reads as over or under — including loops crossing themselves. It's transparent and drawn in the text color, so it sits on any page and follows light and dark. The vines grow in once, the first time the footer is seen, then hold still. Change **Seed** for a new tangle.
-
-## Preview
-
-<TangleFooterDemo />
-
-## Installation
-
-<CliCommand item="tangle-footer" />
-
-Or install straight from the public GitHub source registry:
-
-<CliCommand item="tangle-footer" github />
-
-## Usage
-
-Put it at the bottom of the page. It fills the width it's given, `height` px tall, in the current text color — set `className="text-muted-foreground"` (or `color`) to change it.
-
-<FrameworkCode>
-  <FrameworkReact>
-```tsx
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function SiteFooter() {
-  return <TangleFooter className="text-foreground" />
-}
-```
-  </FrameworkReact>
-  <FrameworkSvelte>
-```svelte
-<script>
-  import TangleFooter from "$lib/components/ui/tangle-footer.svelte"
-</script>
-
-<TangleFooter class="text-foreground" />
-```
-  </FrameworkSvelte>
-</FrameworkCode>
-
-## Props
-
-| Prop        | Type     | Default                                       |
-| ----------- | -------- | --------------------------------------------- |
-| `height`    | `number` | `320` — px                                    |
-| `vines`     | `number` | `3` — `1`–`12`                                |
-| `thickness` | `number` | scales with width — line width in px          |
-| `color`     | `string` | `currentColor`                                |
-| `seed`      | `number` | `23` — a new seed grows a new tangle          |
-| `className` | `string` | React only                                    |
-| `class`     | `string` | Svelte only                                   |
-
-`prefers-reduced-motion: reduce` skips the grow-in and shows the finished tangle.
diff --git a/content/docs/getting-started.mdx b/content/docs/getting-started.mdx
index ac841f8..56b9231 100644
--- a/content/docs/getting-started.mdx
+++ b/content/docs/getting-started.mdx
@@ -13,7 +13,7 @@ Or pull straight from the public GitHub source registry:
 
 <CliCommand item="shader-gradient" github />
 
-Swap `shader-gradient` for any item name — `shader-sky`, `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, `tangle-footer`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
+Swap `shader-gradient` for any item name — `shader-sky`, `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
 
 ## Use a background or shader
 
@@ -58,7 +58,7 @@ Shaders such as [Shader Gradient](/docs/components/shader-gradient), [Shader Fir
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Background | [Logo Burst](/docs/components/logo-burst), [Phosphor Score](/docs/components/phosphor-score), [Radiant Lines](/docs/components/radiant-lines), [ASCII Fluid](/docs/components/ascii-fluid) |
 | Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Fire](/docs/components/shader-fire), [Shader Sky](/docs/components/shader-sky)                                                |
-| Footers    | [Tangle Footer](/docs/components/tangle-footer), [Stretchy Footer](/docs/components/stretchy-footer)                                                                                       |
+| Footers    | [Stretchy Footer](/docs/components/stretchy-footer)                                                                                       |
 | Characters | [Live Orb](/docs/components/live-orb), [ASCII Logo](/docs/components/ascii-logo)                                                                                                           |
 | Pages      | [Dithered 404](/docs/components/dithered-404)                                                                                                                                              |
 | Components | [Gooey Color Picker](/docs/components/gooey-color-picker)                                                                                                                                  |
diff --git a/public/og/docs/components/tangle-footer/image.png b/public/og/docs/components/tangle-footer/image.png
deleted file mode 100644
index acba35de54a44c824684260ff2d3751a06f4477a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 47033
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%0AnX$cRVjk)J`0nQ&mJCkob1MJ_
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
LpDQqOx&6NY_#bB>

diff --git a/public/r/registry.json b/public/r/registry.json
index 1d8b40c..e259bc3 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -347,33 +347,6 @@
         }
       ],
       "type": "registry:ui"
-    },
-    {
-      "name": "tangle-footer",
-      "title": "Tangle Footer",
-      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
-      "files": [
-        {
-          "path": "registry/tangle-footer/tangle-footer.tsx",
-          "type": "registry:ui",
-          "target": "components/ui/tangle-footer.tsx"
-        }
-      ],
-      "type": "registry:ui"
-    },
-    {
-      "name": "tangle-footer-svelte",
-      "title": "Tangle Footer",
-      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
-      "dependencies": [],
-      "files": [
-        {
-          "path": "registry/tangle-footer/tangle-footer.svelte",
-          "type": "registry:file",
-          "target": "src/lib/components/ui/tangle-footer.svelte"
-        }
-      ],
-      "type": "registry:ui"
     }
   ]
 }
\ No newline at end of file
diff --git a/public/r/tangle-footer-svelte.json b/public/r/tangle-footer-svelte.json
deleted file mode 100644
index 9cfbb9a..0000000
--- a/public/r/tangle-footer-svelte.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "tangle-footer-svelte",
-  "title": "Tangle Footer",
-  "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
-  "dependencies": [],
-  "files": [
-    {
-      "path": "registry/tangle-footer/tangle-footer.svelte",
-      "content": "<script module lang=\"ts\">\nexport type TangleFooterOptions = {\n  /** Line color, any CSS color. Omit to use the text color (`currentColor`). */\n  color?: string\n  /** How many vines. Default `3`. */\n  vines?: number\n  /** Line width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const DEFAULT_VINES = 3\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** A pen-line width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.0021, 1.75, 3.5)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: Pick<TangleFooterOptions, \"vines\" | \"seed\"> = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  // Smallest loop the wheel sizes produce (spoke ≈ 2 wheels at the low end).\n  const minLoop = height * 0.14\n  // Pieces shorter than half the smallest loop, so the two strands of any\n  // loop land in different pieces and the loop can cross over itself.\n  const piece = minLoop * 1.5\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.62 + (v / Math.max(1, count - 1)) * 0.28)\n    const wheel0 = height * (0.1 + rand() * 0.05)\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.18 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves. The ratio snaps\n      // quickly between the two, since loops just past 1 read as thin\n      // teardrops and waves just under 1 as sharp cusps.\n      const c = curl(s)\n      const k = clamp((c + 0.1) / 0.25, 0, 1)\n      let spoke = wheel * (0.7 + 1.35 * k * k * (3 - 2 * k) + 0.25 * c)\n      // Keep every loop under the top edge.\n      spoke = Math.min(spoke, Math.max(minLoop * 0.5, (y0 - height * 0.06) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n\n    return {\n      points: Float32Array.from(points),\n      cuts,\n      depths: cuts.slice(0, -1).map(() => rand()),\n    }\n  })\n}\n\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled pen-line vines on a transparent canvas, in the text color by\n * default. They grow in from the left the first time they're seen, then\n * hold still — nothing runs after that. Redraws on resize and theme change.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  /** Cached gap and line paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; line: Path2D }[][] = []\n  let thickness = 2\n  let grow = 0\n  let seen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const end = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, end)\n    const to = clamp(Math.ceil(b), 0, end)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 0.5, 24)\n    vines = buildVines(w, h, options)\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        // A sample past each end hides the seam between pieces.\n        line: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length || grow <= 0) return\n\n    const eased = 1 - (1 - grow) ** 3\n    // Clear space each side of a line where it crosses over another.\n    const gap = thickness + Math.max(2, thickness * 1.1) * 2\n    ctx!.strokeStyle =\n      options.color?.trim() || getComputedStyle(canvas).color || \"#000\"\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"round\"\n\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = ((vine.points.length / 2 - 1) * eased) | 0\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const path =\n        b <= reach\n          ? paths[v]![index]!\n          : {\n              gap: tracePath(vine, a, reach),\n              line: tracePath(vine, a - 1, reach),\n            }\n\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = gap\n      ctx!.lineCap = \"butt\"\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.lineWidth = thickness\n      ctx!.lineCap = \"round\"\n      ctx!.stroke(path.line)\n    }\n  }\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (mqReduce.matches) grow = seen ? 1 : grow\n    else if (seen && document.visibilityState !== \"hidden\")\n      grow = Math.min(1, grow + dt / GROW_S)\n    draw()\n    // Frames only while growing; afterwards it's a still drawing.\n    if (seen && grow < 1) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (!entry?.isIntersecting || seen) return\n      seen = true\n      io.disconnect()\n      wake()\n    },\n    { threshold: 0.25 }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  // `currentColor` follows the theme; redraw when it flips.\n  const mo = new MutationObserver(() => wake())\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", wake)\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n        // A new tangle grows in again.\n        if (!mqReduce.matches) grow = 0\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqDark.removeEventListener(\"change\", wake)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TangleFooterOptions {\n    class?: string\n    /** Footer height in px. Default `320`. */\n    height?: number\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    height = 320,\n    vines = DEFAULT_VINES,\n    thickness,\n    seed = DEFAULT_SEED,\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: TangleFooterInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createTangleFooter(\n      canvas,\n      untrack(() => ({ color, vines, thickness, seed }))\n    )\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({ color, vines, thickness, seed })\n  })\n</script>\n\n<footer\n  data-slot=\"tangle-footer\"\n  class={cn(\"relative w-full overflow-hidden\", className)}\n  style:height=\"{height}px\"\n>\n  <canvas bind:this={canvas} aria-hidden=\"true\" class=\"absolute inset-0 size-full\"\n  ></canvas>\n</footer>\n",
-      "type": "registry:file",
-      "target": "src/lib/components/ui/tangle-footer.svelte"
-    }
-  ],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/public/r/tangle-footer.json b/public/r/tangle-footer.json
deleted file mode 100644
index 70d6be0..0000000
--- a/public/r/tangle-footer.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "tangle-footer",
-  "title": "Tangle Footer",
-  "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
-  "files": [
-    {
-      "path": "registry/tangle-footer/tangle-footer.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type TangleFooterOptions = {\n  /** Line color, any CSS color. Omit to use the text color (`currentColor`). */\n  color?: string\n  /** How many vines. Default `3`. */\n  vines?: number\n  /** Line width in px. Omit to scale with the footer width. */\n  thickness?: number\n  /** Deterministic tangle. Default `23`. */\n  seed?: number\n}\n\nexport type TangleFooterInstance = {\n  setOptions: (options: Partial<TangleFooterOptions>) => void\n  destroy: () => void\n}\n\nexport const DEFAULT_VINES = 3\nexport const DEFAULT_SEED = 23\n\n/** Spacing of the resampled vine, in px. */\nconst STEP = 2\n/** Vines start and end this share of the width past each side. */\nconst OVERHANG = 0.12\n/** Seconds for the vines to grow in. */\nconst GROW_S = 1.8\n\nexport type Vine = {\n  /** x, y pairs spaced `STEP` apart along the vine. */\n  points: Float32Array\n  /** Where each piece of the vine starts, in samples, plus the end. */\n  cuts: number[]\n  /** Stacking order of each piece; higher draws on top. */\n  depths: number[]\n}\n\nexport function mulberry32(seed: number) {\n  let t = seed >>> 0\n  return () => {\n    t += 0x6d2b79f5\n    let r = Math.imul(t ^ (t >>> 15), 1 | t)\n    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Smooth wander in −1…1 from three detuned sines. */\nfunction wander(rand: () => number, scale: number) {\n  const waves = Array.from({ length: 3 }, (_, i) => ({\n    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,\n    p: rand() * Math.PI * 2,\n    a: 1 / (i + 1),\n  }))\n  const total = waves.reduce((sum, w) => sum + w.a, 0)\n  return (s: number) =>\n    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total\n}\n\n/** A pen-line width that suits a footer this wide. */\nexport function autoThickness(width: number) {\n  return clamp(width * 0.0021, 1.75, 3.5)\n}\n\n/**\n * Lays out the tangle. Each vine is a wheel rolling left to right with a\n * pen on a spoke longer than the wheel (a prolate trochoid): where the pen\n * outruns the wheel it curls back into a loop, so loops rise off a\n * wandering baseline. Wheel size and spoke length drift along the vine,\n * so some curls are big, some small, some just a wave.\n *\n * Every vine is cut into short pieces with random stacking, so vines pass\n * over and under each other — and themselves — like a real tangle.\n */\nexport function buildVines(\n  width: number,\n  height: number,\n  options: Pick<TangleFooterOptions, \"vines\" | \"seed\"> = {}\n): Vine[] {\n  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))\n  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))\n  // Smallest loop the wheel sizes produce (spoke ≈ 2 wheels at the low end).\n  const minLoop = height * 0.14\n  // Pieces shorter than half the smallest loop, so the two strands of any\n  // loop land in different pieces and the loop can cross over itself.\n  const piece = minLoop * 1.5\n\n  return Array.from({ length: count }, (_, v) => {\n    const rand = mulberry32(seed * 7919 + v * 104729)\n    const scale = width * (0.18 + rand() * 0.12)\n    const baseline = wander(rand, scale * 1.6)\n    const size = wander(rand, scale)\n    const curl = wander(rand, scale * 0.8)\n    // Spread the vines through the lower band; loops climb from there.\n    const floor = height * (0.62 + (v / Math.max(1, count - 1)) * 0.28)\n    const wheel0 = height * (0.1 + rand() * 0.05)\n\n    const raw: number[] = []\n    let phi = rand() * Math.PI * 2\n    const start = -width * OVERHANG\n    const end = width * (1 + OVERHANG)\n    for (let s = start; s <= end; s += 1) {\n      const y0 = floor + height * 0.18 * baseline(s)\n      const wheel = wheel0 * (1 + 0.45 * size(s))\n      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the\n      // loop closes round. Below 1 the vine just waves. The ratio snaps\n      // quickly between the two, since loops just past 1 read as thin\n      // teardrops and waves just under 1 as sharp cusps.\n      const c = curl(s)\n      const k = clamp((c + 0.1) / 0.25, 0, 1)\n      let spoke = wheel * (0.7 + 1.35 * k * k * (3 - 2 * k) + 0.25 * c)\n      // Keep every loop under the top edge.\n      spoke = Math.min(spoke, Math.max(minLoop * 0.5, (y0 - height * 0.06) / 2))\n      phi += 1 / wheel\n      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))\n    }\n\n    // Resample to even spacing so pieces are measured in px.\n    const points: number[] = [raw[0]!, raw[1]!]\n    let carry = 0\n    for (let i = 2; i < raw.length; i += 2) {\n      const ax = raw[i - 2]!\n      const ay = raw[i - 1]!\n      const bx = raw[i]!\n      const by = raw[i + 1]!\n      const seg = Math.hypot(bx - ax, by - ay)\n      let at = STEP - carry\n      while (at <= seg) {\n        const k = at / seg\n        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)\n        at += STEP\n      }\n      carry = seg - (at - STEP)\n    }\n\n    const samples = points.length / 2\n    const per = Math.max(2, Math.round(piece / STEP))\n    const cuts: number[] = []\n    for (let i = 0; i < samples - 1; i += per) cuts.push(i)\n    cuts.push(samples - 1)\n\n    return {\n      points: Float32Array.from(points),\n      cuts,\n      depths: cuts.slice(0, -1).map(() => rand()),\n    }\n  })\n}\n\ntype Piece = { vine: number; index: number; depth: number }\n\n/**\n * Tangled pen-line vines on a transparent canvas, in the text color by\n * default. They grow in from the left the first time they're seen, then\n * hold still — nothing runs after that. Redraws on resize and theme change.\n */\nexport function createTangleFooter(\n  canvas: HTMLCanvasElement,\n  initial: TangleFooterOptions = {}\n): TangleFooterInstance | null {\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: TangleFooterOptions = { ...initial }\n  const size = { w: 0, h: 0, dpr: 1 }\n  let vines: Vine[] = []\n  let order: Piece[] = []\n  /** Cached gap and line paths per piece; the geometry never moves. */\n  let paths: { gap: Path2D; line: Path2D }[][] = []\n  let thickness = 2\n  let grow = 0\n  let seen = false\n  let raf = 0\n  let last = 0\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n\n  /** The stretch of a vine from sample `a` to `b` as a path. */\n  function tracePath(vine: Vine, a: number, b: number) {\n    const p = vine.points\n    const end = p.length / 2 - 1\n    const from = clamp(Math.floor(a), 0, end)\n    const to = clamp(Math.ceil(b), 0, end)\n    const path = new Path2D()\n    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)\n    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)\n    return path\n  }\n\n  const rebuild = () => {\n    const { w, h } = size\n    if (w < 2 || h < 2) return\n    thickness = numberOr(options.thickness, autoThickness(w), 0.5, 24)\n    vines = buildVines(w, h, options)\n    paths = vines.map((vine) =>\n      vine.depths.map((_, k) => ({\n        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),\n        // A sample past each end hides the seam between pieces.\n        line: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),\n      }))\n    )\n    order = vines\n      .flatMap((vine, v) =>\n        vine.depths.map((depth, index) => ({ vine: v, index, depth }))\n      )\n      .sort((a, b) => a.depth - b.depth)\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    Object.assign(size, { w, h, dpr })\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    rebuild()\n    wake()\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.clearRect(0, 0, w, h)\n    if (!vines.length || grow <= 0) return\n\n    const eased = 1 - (1 - grow) ** 3\n    // Clear space each side of a line where it crosses over another.\n    const gap = thickness + Math.max(2, thickness * 1.1) * 2\n    ctx!.strokeStyle =\n      options.color?.trim() || getComputedStyle(canvas).color || \"#000\"\n    ctx!.lineJoin = \"round\"\n    ctx!.lineCap = \"round\"\n\n    for (const { vine: v, index } of order) {\n      const vine = vines[v]!\n      const reach = ((vine.points.length / 2 - 1) * eased) | 0\n      const a = vine.cuts[index]!\n      if (a >= reach) continue\n      const b = vine.cuts[index + 1]!\n      // Only the growing tip needs a fresh path.\n      const path =\n        b <= reach\n          ? paths[v]![index]!\n          : {\n              gap: tracePath(vine, a, reach),\n              line: tracePath(vine, a - 1, reach),\n            }\n\n      ctx!.globalCompositeOperation = \"destination-out\"\n      ctx!.lineWidth = gap\n      ctx!.lineCap = \"butt\"\n      ctx!.stroke(path.gap)\n      ctx!.globalCompositeOperation = \"source-over\"\n      ctx!.lineWidth = thickness\n      ctx!.lineCap = \"round\"\n      ctx!.stroke(path.line)\n    }\n  }\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  function tick(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (mqReduce.matches) grow = seen ? 1 : grow\n    else if (seen && document.visibilityState !== \"hidden\")\n      grow = Math.min(1, grow + dt / GROW_S)\n    draw()\n    // Frames only while growing; afterwards it's a still drawing.\n    if (seen && grow < 1) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (!entry?.isIntersecting || seen) return\n      seen = true\n      io.disconnect()\n      wake()\n    },\n    { threshold: 0.25 }\n  )\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  // `currentColor` follows the theme; redraw when it flips.\n  const mo = new MutationObserver(() => wake())\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", wake)\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (\n        prev.vines !== options.vines ||\n        prev.seed !== options.seed ||\n        prev.thickness !== options.thickness\n      ) {\n        rebuild()\n        // A new tangle grows in again.\n        if (!mqReduce.matches) grow = 0\n      }\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqDark.removeEventListener(\"change\", wake)\n    },\n  }\n}\n\nexport type TangleFooterProps = TangleFooterOptions & {\n  className?: string\n  /** Footer height in px. Default `320`. */\n  height?: number\n}\n\n/**\n * A footer of tangled vines — pen lines that curl into loops and cross over\n * and under each other. Transparent, in the text color, so it sits on any\n * page and follows light and dark. Grows in once when first seen.\n */\nexport function TangleFooter({\n  className,\n  color,\n  height = 320,\n  vines = DEFAULT_VINES,\n  thickness,\n  seed = DEFAULT_SEED,\n}: TangleFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<TangleFooterInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createTangleFooter(canvas, {\n      color,\n      vines,\n      thickness,\n      seed,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({ color, vines, thickness, seed })\n  }, [color, vines, thickness, seed])\n\n  return (\n    <footer\n      data-slot=\"tangle-footer\"\n      className={cn(\"relative w-full overflow-hidden\", className)}\n      style={{ height }}\n    >\n      <canvas\n        ref={canvasRef}\n        aria-hidden\n        className=\"absolute inset-0 size-full\"\n      />\n    </footer>\n  )\n}\n",
-      "type": "registry:ui",
-      "target": "components/ui/tangle-footer.tsx"
-    }
-  ],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index 306b41f..9a353dc 100644
--- a/registry.json
+++ b/registry.json
@@ -15,7 +15,6 @@
     "registry/shader-fire/registry.json",
     "registry/shader-gradient/registry.json",
     "registry/shader-sky/registry.json",
-    "registry/stretchy-footer/registry.json",
-    "registry/tangle-footer/registry.json"
+    "registry/stretchy-footer/registry.json"
   ]
 }
diff --git a/registry/tangle-footer/registry.json b/registry/tangle-footer/registry.json
deleted file mode 100644
index db60ff8..0000000
--- a/registry/tangle-footer/registry.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry.json",
-  "items": [
-    {
-      "name": "tangle-footer",
-      "type": "registry:ui",
-      "title": "Tangle Footer",
-      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
-      "files": [
-        {
-          "path": "tangle-footer.tsx",
-          "type": "registry:ui",
-          "target": "components/ui/tangle-footer.tsx"
-        }
-      ]
-    },
-    {
-      "name": "tangle-footer-svelte",
-      "type": "registry:ui",
-      "title": "Tangle Footer",
-      "description": "A footer of tangled vines — clean pen lines that curl into loops and cross over and under each other.",
-      "files": [
-        {
-          "path": "tangle-footer.svelte",
-          "type": "registry:file",
-          "target": "src/lib/components/ui/tangle-footer.svelte"
-        }
-      ],
-      "dependencies": []
-    }
-  ]
-}
diff --git a/registry/tangle-footer/tangle-footer-demo.tsx b/registry/tangle-footer/tangle-footer-demo.tsx
deleted file mode 100644
index e68399e..0000000
--- a/registry/tangle-footer/tangle-footer-demo.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-
-import {
-  ComponentControls,
-  ControlSlider,
-} from "@/components/component-controls"
-import { ComponentPreview } from "@/components/component-preview"
-import { usePreviewProps } from "@/hooks/use-preview-props"
-import {
-  DEFAULT_SEED,
-  DEFAULT_VINES,
-  TangleFooter,
-} from "@/registry/tangle-footer/tangle-footer"
-
-/** Where the Thickness slider sits while the footer picks its own width. */
-const AUTO_THICKNESS = 2.5
-
-export function TangleFooterDemo() {
-  const defaults = useMemo(
-    () => ({
-      height: 320,
-      vines: DEFAULT_VINES,
-      thickness: AUTO_THICKNESS,
-      seed: DEFAULT_SEED,
-    }),
-    []
-  )
-
-  const { props, updateProp, resetProps, hasChanges } =
-    usePreviewProps(defaults)
-
-  const thickness =
-    props.thickness === AUTO_THICKNESS ? undefined : props.thickness
-
-  return (
-    <>
-      <ComponentPreview
-        title="Tangle Footer"
-        stageClassName="min-h-0 overflow-hidden p-0"
-        align="start"
-      >
-        <div className="flex h-[56svh] w-full flex-col justify-end overflow-hidden rounded-[inherit] bg-background text-foreground">
-          <TangleFooter
-            height={props.height}
-            vines={props.vines}
-            thickness={thickness}
-            seed={props.seed}
-          />
-        </div>
-      </ComponentPreview>
-
-      <ComponentControls
-        hasChanges={hasChanges}
-        onReset={resetProps}
-        component="TangleFooter"
-        snippetProps={{
-          height: props.height === 320 ? undefined : props.height,
-          vines: props.vines === DEFAULT_VINES ? undefined : props.vines,
-          thickness,
-          seed: props.seed === DEFAULT_SEED ? undefined : props.seed,
-        }}
-      >
-        <ControlSlider
-          label="Height"
-          value={props.height}
-          min={160}
-          max={480}
-          step={10}
-          onChange={(v) => updateProp("height", v)}
-        />
-        <ControlSlider
-          label="Vines"
-          value={props.vines}
-          min={1}
-          max={8}
-          step={1}
-          onChange={(v) => updateProp("vines", v)}
-        />
-        <ControlSlider
-          label="Thickness"
-          value={props.thickness}
-          min={1}
-          max={6}
-          step={0.25}
-          onChange={(v) => updateProp("thickness", v)}
-        />
-        <ControlSlider
-          label="Seed"
-          value={props.seed}
-          min={1}
-          max={100}
-          step={1}
-          onChange={(v) => updateProp("seed", v)}
-        />
-      </ComponentControls>
-    </>
-  )
-}
diff --git a/registry/tangle-footer/tangle-footer-vanilla.ts b/registry/tangle-footer/tangle-footer-vanilla.ts
deleted file mode 100644
index f16905a..0000000
--- a/registry/tangle-footer/tangle-footer-vanilla.ts
+++ /dev/null
@@ -1,339 +0,0 @@
-export type TangleFooterOptions = {
-  /** Line color, any CSS color. Omit to use the text color (`currentColor`). */
-  color?: string
-  /** How many vines. Default `3`. */
-  vines?: number
-  /** Line width in px. Omit to scale with the footer width. */
-  thickness?: number
-  /** Deterministic tangle. Default `23`. */
-  seed?: number
-}
-
-export type TangleFooterInstance = {
-  setOptions: (options: Partial<TangleFooterOptions>) => void
-  destroy: () => void
-}
-
-export const DEFAULT_VINES = 3
-export const DEFAULT_SEED = 23
-
-/** Spacing of the resampled vine, in px. */
-const STEP = 2
-/** Vines start and end this share of the width past each side. */
-const OVERHANG = 0.12
-/** Seconds for the vines to grow in. */
-const GROW_S = 1.8
-
-export type Vine = {
-  /** x, y pairs spaced `STEP` apart along the vine. */
-  points: Float32Array
-  /** Where each piece of the vine starts, in samples, plus the end. */
-  cuts: number[]
-  /** Stacking order of each piece; higher draws on top. */
-  depths: number[]
-}
-
-export function mulberry32(seed: number) {
-  let t = seed >>> 0
-  return () => {
-    t += 0x6d2b79f5
-    let r = Math.imul(t ^ (t >>> 15), 1 | t)
-    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r)
-    return ((r ^ (r >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-function clamp(value: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, value))
-}
-
-function numberOr(value: unknown, fallback: number, min: number, max: number) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
-  return clamp(value, min, max)
-}
-
-/** Smooth wander in −1…1 from three detuned sines. */
-function wander(rand: () => number, scale: number) {
-  const waves = Array.from({ length: 3 }, (_, i) => ({
-    f: ((0.6 + rand() * 0.8) * (i + 1)) / scale,
-    p: rand() * Math.PI * 2,
-    a: 1 / (i + 1),
-  }))
-  const total = waves.reduce((sum, w) => sum + w.a, 0)
-  return (s: number) =>
-    waves.reduce((sum, w) => sum + w.a * Math.sin(w.f * s + w.p), 0) / total
-}
-
-/** A pen-line width that suits a footer this wide. */
-export function autoThickness(width: number) {
-  return clamp(width * 0.0021, 1.75, 3.5)
-}
-
-/**
- * Lays out the tangle. Each vine is a wheel rolling left to right with a
- * pen on a spoke longer than the wheel (a prolate trochoid): where the pen
- * outruns the wheel it curls back into a loop, so loops rise off a
- * wandering baseline. Wheel size and spoke length drift along the vine,
- * so some curls are big, some small, some just a wave.
- *
- * Every vine is cut into short pieces with random stacking, so vines pass
- * over and under each other — and themselves — like a real tangle.
- */
-export function buildVines(
-  width: number,
-  height: number,
-  options: Pick<TangleFooterOptions, "vines" | "seed"> = {}
-): Vine[] {
-  const count = Math.round(numberOr(options.vines, DEFAULT_VINES, 1, 12))
-  const seed = Math.round(numberOr(options.seed, DEFAULT_SEED, 0, 2 ** 31))
-  // Smallest loop the wheel sizes produce (spoke ≈ 2 wheels at the low end).
-  const minLoop = height * 0.14
-  // Pieces shorter than half the smallest loop, so the two strands of any
-  // loop land in different pieces and the loop can cross over itself.
-  const piece = minLoop * 1.5
-
-  return Array.from({ length: count }, (_, v) => {
-    const rand = mulberry32(seed * 7919 + v * 104729)
-    const scale = width * (0.18 + rand() * 0.12)
-    const baseline = wander(rand, scale * 1.6)
-    const size = wander(rand, scale)
-    const curl = wander(rand, scale * 0.8)
-    // Spread the vines through the lower band; loops climb from there.
-    const floor = height * (0.62 + (v / Math.max(1, count - 1)) * 0.28)
-    const wheel0 = height * (0.1 + rand() * 0.05)
-
-    const raw: number[] = []
-    let phi = rand() * Math.PI * 2
-    const start = -width * OVERHANG
-    const end = width * (1 + OVERHANG)
-    for (let s = start; s <= end; s += 1) {
-      const y0 = floor + height * 0.18 * baseline(s)
-      const wheel = wheel0 * (1 + 0.45 * size(s))
-      // Past 1 the pen outruns the wheel and curls into a loop; near 2 the
-      // loop closes round. Below 1 the vine just waves. The ratio snaps
-      // quickly between the two, since loops just past 1 read as thin
-      // teardrops and waves just under 1 as sharp cusps.
-      const c = curl(s)
-      const k = clamp((c + 0.1) / 0.25, 0, 1)
-      let spoke = wheel * (0.7 + 1.35 * k * k * (3 - 2 * k) + 0.25 * c)
-      // Keep every loop under the top edge.
-      spoke = Math.min(spoke, Math.max(minLoop * 0.5, (y0 - height * 0.06) / 2))
-      phi += 1 / wheel
-      raw.push(s + spoke * Math.sin(phi), y0 - spoke * (1 - Math.cos(phi)))
-    }
-
-    // Resample to even spacing so pieces are measured in px.
-    const points: number[] = [raw[0]!, raw[1]!]
-    let carry = 0
-    for (let i = 2; i < raw.length; i += 2) {
-      const ax = raw[i - 2]!
-      const ay = raw[i - 1]!
-      const bx = raw[i]!
-      const by = raw[i + 1]!
-      const seg = Math.hypot(bx - ax, by - ay)
-      let at = STEP - carry
-      while (at <= seg) {
-        const k = at / seg
-        points.push(ax + (bx - ax) * k, ay + (by - ay) * k)
-        at += STEP
-      }
-      carry = seg - (at - STEP)
-    }
-
-    const samples = points.length / 2
-    const per = Math.max(2, Math.round(piece / STEP))
-    const cuts: number[] = []
-    for (let i = 0; i < samples - 1; i += per) cuts.push(i)
-    cuts.push(samples - 1)
-
-    return {
-      points: Float32Array.from(points),
-      cuts,
-      depths: cuts.slice(0, -1).map(() => rand()),
-    }
-  })
-}
-
-type Piece = { vine: number; index: number; depth: number }
-
-/**
- * Tangled pen-line vines on a transparent canvas, in the text color by
- * default. They grow in from the left the first time they're seen, then
- * hold still — nothing runs after that. Redraws on resize and theme change.
- */
-export function createTangleFooter(
-  canvas: HTMLCanvasElement,
-  initial: TangleFooterOptions = {}
-): TangleFooterInstance | null {
-  const ctx = canvas.getContext("2d")
-  if (!ctx) return null
-
-  let options: TangleFooterOptions = { ...initial }
-  const size = { w: 0, h: 0, dpr: 1 }
-  let vines: Vine[] = []
-  let order: Piece[] = []
-  /** Cached gap and line paths per piece; the geometry never moves. */
-  let paths: { gap: Path2D; line: Path2D }[][] = []
-  let thickness = 2
-  let grow = 0
-  let seen = false
-  let raf = 0
-  let last = 0
-
-  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
-
-  /** The stretch of a vine from sample `a` to `b` as a path. */
-  function tracePath(vine: Vine, a: number, b: number) {
-    const p = vine.points
-    const end = p.length / 2 - 1
-    const from = clamp(Math.floor(a), 0, end)
-    const to = clamp(Math.ceil(b), 0, end)
-    const path = new Path2D()
-    path.moveTo(p[from * 2]!, p[from * 2 + 1]!)
-    for (let i = from + 1; i <= to; i++) path.lineTo(p[i * 2]!, p[i * 2 + 1]!)
-    return path
-  }
-
-  const rebuild = () => {
-    const { w, h } = size
-    if (w < 2 || h < 2) return
-    thickness = numberOr(options.thickness, autoThickness(w), 0.5, 24)
-    vines = buildVines(w, h, options)
-    paths = vines.map((vine) =>
-      vine.depths.map((_, k) => ({
-        gap: tracePath(vine, vine.cuts[k]!, vine.cuts[k + 1]!),
-        // A sample past each end hides the seam between pieces.
-        line: tracePath(vine, vine.cuts[k]! - 1, vine.cuts[k + 1]! + 1),
-      }))
-    )
-    order = vines
-      .flatMap((vine, v) =>
-        vine.depths.map((depth, index) => ({ vine: v, index, depth }))
-      )
-      .sort((a, b) => a.depth - b.depth)
-  }
-
-  const resize = () => {
-    const parent = canvas.parentElement
-    if (!parent) return
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    const w = parent.clientWidth
-    const h = parent.clientHeight
-    if (w === size.w && h === size.h && dpr === size.dpr) return
-    Object.assign(size, { w, h, dpr })
-    canvas.width = Math.max(1, Math.floor(w * dpr))
-    canvas.height = Math.max(1, Math.floor(h * dpr))
-    rebuild()
-    wake()
-  }
-
-  function draw() {
-    const { w, h, dpr } = size
-    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
-    ctx!.clearRect(0, 0, w, h)
-    if (!vines.length || grow <= 0) return
-
-    const eased = 1 - (1 - grow) ** 3
-    // Clear space each side of a line where it crosses over another.
-    const gap = thickness + Math.max(2, thickness * 1.1) * 2
-    ctx!.strokeStyle =
-      options.color?.trim() || getComputedStyle(canvas).color || "#000"
-    ctx!.lineJoin = "round"
-    ctx!.lineCap = "round"
-
-    for (const { vine: v, index } of order) {
-      const vine = vines[v]!
-      const reach = ((vine.points.length / 2 - 1) * eased) | 0
-      const a = vine.cuts[index]!
-      if (a >= reach) continue
-      const b = vine.cuts[index + 1]!
-      // Only the growing tip needs a fresh path.
-      const path =
-        b <= reach
-          ? paths[v]![index]!
-          : {
-              gap: tracePath(vine, a, reach),
-              line: tracePath(vine, a - 1, reach),
-            }
-
-      ctx!.globalCompositeOperation = "destination-out"
-      ctx!.lineWidth = gap
-      ctx!.lineCap = "butt"
-      ctx!.stroke(path.gap)
-      ctx!.globalCompositeOperation = "source-over"
-      ctx!.lineWidth = thickness
-      ctx!.lineCap = "round"
-      ctx!.stroke(path.line)
-    }
-  }
-
-  function wake() {
-    if (raf) return
-    last = performance.now()
-    raf = requestAnimationFrame(tick)
-  }
-
-  function tick(now: number) {
-    raf = 0
-    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
-    last = now
-    if (mqReduce.matches) grow = seen ? 1 : grow
-    else if (seen && document.visibilityState !== "hidden")
-      grow = Math.min(1, grow + dt / GROW_S)
-    draw()
-    // Frames only while growing; afterwards it's a still drawing.
-    if (seen && grow < 1) raf = requestAnimationFrame(tick)
-  }
-
-  const ro = new ResizeObserver(resize)
-  if (canvas.parentElement) ro.observe(canvas.parentElement)
-  const io = new IntersectionObserver(
-    ([entry]) => {
-      if (!entry?.isIntersecting || seen) return
-      seen = true
-      io.disconnect()
-      wake()
-    },
-    { threshold: 0.25 }
-  )
-  io.observe(canvas)
-  const onVisibility = () => wake()
-  document.addEventListener("visibilitychange", onVisibility)
-  // `currentColor` follows the theme; redraw when it flips.
-  const mo = new MutationObserver(() => wake())
-  mo.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class", "data-theme", "style"],
-  })
-  const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
-  mqDark.addEventListener("change", wake)
-
-  resize()
-  wake()
-
-  return {
-    setOptions(next) {
-      const prev = options
-      options = { ...options, ...next }
-      if (
-        prev.vines !== options.vines ||
-        prev.seed !== options.seed ||
-        prev.thickness !== options.thickness
-      ) {
-        rebuild()
-        // A new tangle grows in again.
-        if (!mqReduce.matches) grow = 0
-      }
-      wake()
-    },
-    destroy() {
-      cancelAnimationFrame(raf)
-      raf = 0
-      ro.disconnect()
-      io.disconnect()
-      mo.disconnect()
-      document.removeEventListener("visibilitychange", onVisibility)
-      mqDark.removeEventListener("change", wake)
-    },
-  }
-}
diff --git a/registry/tangle-footer/tangle-footer.svelte b/registry/tangle-footer/tangle-footer.svelte
deleted file mode 100644
index 4598b58..0000000
--- a/registry/tangle-footer/tangle-footer.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script module lang="ts">
-</script>
-
-<script lang="ts">
-  import { onMount, untrack } from "svelte"
-  import {
-    createTangleFooter,
-    DEFAULT_SEED,
-    DEFAULT_VINES,
-    type TangleFooterInstance,
-    type TangleFooterOptions,
-  } from "./tangle-footer-vanilla"
-
-  function cn(...parts: Array<string | false | null | undefined>) {
-    return parts.filter(Boolean).join(" ")
-  }
-
-  interface Props extends TangleFooterOptions {
-    class?: string
-    /** Footer height in px. Default `320`. */
-    height?: number
-  }
-
-  let {
-    class: className = "",
-    color,
-    height = 320,
-    vines = DEFAULT_VINES,
-    thickness,
-    seed = DEFAULT_SEED,
-  }: Props = $props()
-
-  let canvas: HTMLCanvasElement | undefined = $state()
-  let instance: TangleFooterInstance | null = null
-
-  onMount(() => {
-    if (!canvas) return
-    instance = createTangleFooter(
-      canvas,
-      untrack(() => ({ color, vines, thickness, seed }))
-    )
-    return () => {
-      instance?.destroy()
-      instance = null
-    }
-  })
-
-  $effect(() => {
-    instance?.setOptions({ color, vines, thickness, seed })
-  })
-</script>
-
-<footer
-  data-slot="tangle-footer"
-  class={cn("relative w-full overflow-hidden", className)}
-  style:height="{height}px"
->
-  <canvas bind:this={canvas} aria-hidden="true" class="absolute inset-0 size-full"
-  ></canvas>
-</footer>
diff --git a/registry/tangle-footer/tangle-footer.tsx b/registry/tangle-footer/tangle-footer.tsx
deleted file mode 100644
index 9c944a6..0000000
--- a/registry/tangle-footer/tangle-footer.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client"
-
-import { useEffect, useRef } from "react"
-
-import { cn } from "@/lib/utils"
-
-import {
-  createTangleFooter,
-  DEFAULT_SEED,
-  DEFAULT_VINES,
-  type TangleFooterInstance,
-  type TangleFooterOptions,
-} from "./tangle-footer-vanilla"
-
-export { DEFAULT_SEED, DEFAULT_VINES } from "./tangle-footer-vanilla"
-export type {
-  TangleFooterInstance,
-  TangleFooterOptions,
-} from "./tangle-footer-vanilla"
-
-export type TangleFooterProps = TangleFooterOptions & {
-  className?: string
-  /** Footer height in px. Default `320`. */
-  height?: number
-}
-
-/**
- * A footer of tangled vines — pen lines that curl into loops and cross over
- * and under each other. Transparent, in the text color, so it sits on any
- * page and follows light and dark. Grows in once when first seen.
- */
-export function TangleFooter({
-  className,
-  color,
-  height = 320,
-  vines = DEFAULT_VINES,
-  thickness,
-  seed = DEFAULT_SEED,
-}: TangleFooterProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const instanceRef = useRef<TangleFooterInstance | null>(null)
-
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    instanceRef.current = createTangleFooter(canvas, {
-      color,
-      vines,
-      thickness,
-      seed,
-    })
-    return () => {
-      instanceRef.current?.destroy()
-      instanceRef.current = null
-    }
-    // Engine reads live options via setOptions; mount once.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    instanceRef.current?.setOptions({ color, vines, thickness, seed })
-  }, [color, vines, thickness, seed])
-
-  return (
-    <footer
-      data-slot="tangle-footer"
-      className={cn("relative w-full overflow-hidden", className)}
-      style={{ height }}
-    >
-      <canvas
-        ref={canvasRef}
-        aria-hidden
-        className="absolute inset-0 size-full"
-      />
-    </footer>
-  )
-}
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index 74c8f92..caca221 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -74,7 +74,7 @@ npm dependencies the registry declares:
 
 | Item | React | Svelte |
 | --- | --- | --- |
-| `gooey-color-picker`, `tangle-footer`, `stretchy-footer` | `motion` | none |
+| `gooey-color-picker` | `motion` | none |
 | every other item | none | none |
 
 Published index: `https://23rd.dev/r/registry.json`. Docs: `https://23rd.dev/docs`.
@@ -99,7 +99,6 @@ flowchart TD
   atmo -->|Hair-line explosion| lb[logo-burst]
   atmo -->|Falling sheet music| ps[phosphor-score]
   foot -->|Rubber overscroll aurora| st[stretchy-footer]
-  foot -->|Spinning text ribbons| tf[tangle-footer]
   mark -->|Eyes that track the pointer| orb[live-orb]
   mark -->|ASCII wordmark, click to scatter| al[ascii-logo]
 ```
@@ -109,11 +108,10 @@ Disambiguation that agents get wrong:
 | User says | Use | Not |
 | --- | --- | --- |
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
-| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker`, `tangle-footer` |
+| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
 | Fire, embers, heat under a hero | `shader-fire` | `dithered-404` unless the page is a 404 |
 | 404 that burns under the cursor | `dithered-404` | `shader-fire` |
-| Footer of nested spinning sentences | `tangle-footer` | `stretchy-footer` |
-| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `tangle-footer` |
+| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) |
 | Stars that speed up when you scroll | `radiant-lines` | `logo-burst` |
 | Logo explodes into lines | `logo-burst` | `ascii-logo` |
@@ -140,8 +138,6 @@ Same shell for `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorSc
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`TangleFooter` is a `<footer>`. It is not a background. Place it after the page.
-
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
 `LiveOrb` is a fixed square (`size`, default `280`). It does not fill the viewport. The body stays put; only the eyes move.
@@ -159,11 +155,10 @@ Exceptions:
 
 - Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
-- `TangleFooter` paints `--tangle-ribbon` and `--tangle-text` on itself when `ribbon` / `textColor` are omitted. Pass those props to override. `background` omitted uses `#EFEAE2` / `#121210`.
 - `PhosphorScore` canvas is transparent in light mode (`LIGHT_BG`) and `#050505` in dark mode (`DARK_BG`). A dark phosphor field is a hard rectangle. Clip the parent (`overflow-hidden rounded-*`) if the square edge matters. Open issue: the docs preview border looks boxed ([#28](https://github.com/radiumcoders/23rd.dev/issues/28)).
 - `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
-`prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch, no tangle spin). Do not add a `reducedMotion` prop.
+`prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
 
 ## Catalog
 
@@ -178,7 +173,6 @@ Categories match `content/docs/components/meta.json`.
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
 | `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
-| `tangle-footer` | Footers | Five nested SVG text ribbons | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
 | `ascii-logo` | Characters | ASCII wordmark: hover shove, click scatter / fall / gather | React + Svelte |
@@ -234,29 +228,6 @@ export function Accent() {
 }
 ```
 
-Ribbon footer (not an overscroll effect):
-
-```bash
-pnpm dlx shadcn@latest add @23rd/tangle-footer
-```
-
-```tsx
-"use client"
-
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function SiteFooter() {
-  return (
-    <TangleFooter
-      lines={[
-        "Ship something opinionated.",
-        "Install what you need and move.",
-      ]}
-    />
-  )
-}
-```
-
 Svelte equivalents use `class`, default imports, and `@23rd/<name>-svelte`. Full prop tables are in [apis.md](apis.md). More assemblies are in [recipes.md](recipes.md).
 
 ## Adding a component
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index bb992eb..34fa891 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -194,30 +194,6 @@ type ShaderSkyProps = {
 
 `skyFallback(colors, dark)` builds the CSS fallback. Custom `colors` do not swap.
 
-## tangle-footer
-
-```ts
-type TangleFooterProps = {
-  lines?: string[] // DEFAULT_LINES, five phrases
-  ribbon?: string
-  textColor?: string
-  background?: string // or "transparent"
-  height?: number // omit → half of measured width
-  seed?: number // 23
-  label?: string // "Site footer"
-  className?: string
-}
-```
-
-When `ribbon` / `textColor` are omitted the footer sets:
-
-- `--tangle-ribbon`: `#141414` / dark `#E8E4DC`
-- `--tangle-text`: `#F4F0E8` / dark `#161616`
-
-Stroke and fill read those variables. Field classes: `bg-[#EFEAE2] dark:bg-[#121210]` unless `background` is set.
-
-`RING_COUNT` is 5. Not a prop.
-
 ## stretchy-footer
 
 ```ts
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index 2dfce83..28cc556 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -195,34 +195,13 @@ export function Sky() {
 
 Pitfalls: `interactive` defaults false (unlike gradient and fire). Custom `colors` stay put. Light `#2478C8 #8ECBF2 #F7FBFF #C5D8EC`. Dark `#9AA3AD #C8CED4 #5C6570 #3F4750`.
 
-## tangle-footer
-
-Footer. Five nested semicircle ribbons of repeated text. GPU rotation, pauses off-screen.
-
-Best fit: a site footer that is the visual, with a few phrases.
-
-Not this: rubber-band overscroll (`stretchy-footer`), a hero background.
-
-Deps: React needs `motion`. Svelte has none. Key props: `lines`, `ribbon`, `textColor`, `background`, `height`, `seed` (23), `label` (`"Site footer"`).
-
-```tsx
-"use client"
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function Footer() {
-  return <TangleFooter lines={["Open the docs.", "Install what you need."]} />
-}
-```
-
-Pitfalls: default height is half the measured width (upper semicircle, aspect `2 / 1`). A shorter `height` scales the nest down. `background="transparent"` when the parent already paints the stage. Theme colors when props are omitted: ribbon `#141414` / `#E8E4DC`, text `#F4F0E8` / `#161616`, field `#EFEAE2` / `#121210`, via `--tangle-ribbon` and `--tangle-text`. Reduced motion skips the spin. Default lines are the five sentences in `DEFAULT_LINES`.
-
 ## stretchy-footer
 
 Footer behavior. Overscroll past the bottom stretches an aurora and lifts the page, then snaps back.
 
 Best fit: a Dia-like end of a long page. The component can be the scroller, or an overlay on window / element scroll.
 
-Not this: tilting the page (`folio`), spinning type (`tangle-footer`).
+Not this: tilting the page (`folio`).
 
 Deps: React needs `motion`. Svelte uses `stretchy-footer-spring-vanilla.ts` and declares no npm deps. Key props: `children`, `scrollRef` / Svelte `scrollEl`, `windowScroll` (false), `contentSelector` (`[data-stretchy-page]`), `maxStretch` (280), `colors`, `stiffness` (380), `damping` (32), `columns` (48), `blur` (14), `glow` (0.22), `label`, `demoId`.
 
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index 0338775..c93451b 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -99,31 +99,6 @@ export function NotFound() {
 
 `dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-fire`.
 
-## Ribbon footer
-
-`tangle-footer` after the page, not inside the hero.
-
-```tsx
-"use client"
-
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function Footer() {
-  return (
-    <TangleFooter
-      seed={23}
-      lines={[
-        "Ship something opinionated.",
-        "Less boilerplate, clearer decisions.",
-        "Install what you need and move.",
-      ]}
-    />
-  )
-}
-```
-
-On a colored parent, set `background="transparent"` so the cream/near-black field does not paint a second plate.
-
 ## Rubber overscroll
 
 Nested scroller (docs and previews):
@@ -248,7 +223,6 @@ export function Brand() {
 ## Anti-patterns
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.
-- `TangleFooter` inside a hero to “add motion.” It is a footer with a fixed semicircle height.
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
 - Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).

From 9c7ba8dcd08d1c245569865107d2bdfd82a3b6d7 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:48:04 +0530
Subject: [PATCH 19/49] Spring the sidebar marker between pages.

The triad is now one persistent marker that springs to the open page,
and page names slide aside for it instead of jumping. The old layoutId
swap needed the old and new marker mounted together, which the page's
view transition didn't reliably allow.
---
 components/docs-sidebar.tsx | 74 +++++++++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 19 deletions(-)

diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 2a5bbc7..04a10c0 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { LayoutGroup, motion, useReducedMotion } from "motion/react"
+import { animate, useReducedMotion } from "motion/react"
 
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
 import { Logo } from "@/components/logo"
@@ -60,21 +60,9 @@ const markSpring = {
   mass: 0.7,
 }
 
-/** The open page's marker; slides between items as you navigate. */
-function ActiveTriad() {
-  const reduce = useReducedMotion() ?? false
+/** Room the marker takes before the open page's name. */
+const MARK_GUTTER = "translate-x-[21px]"
 
-  return (
-    <motion.span
-      layoutId="docs-sidebar-active"
-      aria-hidden
-      className="me-2.5 flex shrink-0"
-      transition={reduce ? { duration: 0 } : markSpring}
-    >
-      <Triad />
-    </motion.span>
-  )
-}
 
 function PageItem({
   node,
@@ -92,10 +80,18 @@ function PageItem({
           <Link href={node.url} aria-label={String(node.name ?? "Page")} />
         }
         isActive={active}
+        data-docs-active={active || undefined}
         className="h-8 gap-0 rounded-lg bg-transparent px-2 font-normal text-foreground/70 transition-colors duration-150 hover:bg-transparent hover:text-foreground active:bg-transparent data-active:bg-transparent data-active:font-medium data-active:text-foreground data-active:hover:bg-transparent"
       >
-        {active ? <ActiveTriad /> : null}
-        <span className="min-w-0 truncate">{node.name}</span>
+        {/* The name steps aside for the marker instead of jumping. */}
+        <span
+          className={cn(
+            "min-w-0 truncate transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+            active && MARK_GUTTER
+          )}
+        >
+          {node.name}
+        </span>
       </SidebarMenuButton>
     </SidebarMenuItem>
   )
@@ -157,6 +153,12 @@ function NavItems({
   })
 }
 
+/**
+ * One marker for the whole list that springs to the open page. It stays
+ * mounted across navigations — a shared-layout swap would need both the
+ * old and new marker at once, which the page's view transition doesn't
+ * reliably allow.
+ */
 function NavList({
   nodes,
   pathname,
@@ -164,12 +166,46 @@ function NavList({
   nodes: TreeNode[]
   pathname: string
 }) {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const markRef = React.useRef<HTMLSpanElement>(null)
+  const placed = React.useRef(false)
+  const reduce = useReducedMotion() ?? false
+
+  React.useLayoutEffect(() => {
+    const list = listRef.current
+    const mark = markRef.current
+    if (!list || !mark) return
+    const active = list.querySelector<HTMLElement>("[data-docs-active]")
+    if (!active) {
+      mark.style.opacity = "0"
+      placed.current = false
+      return
+    }
+    const box = list.getBoundingClientRect()
+    const row = active.getBoundingClientRect()
+    const y = row.top - box.top + (row.height - mark.offsetHeight) / 2
+    mark.style.opacity = "1"
+    // Land in place on first paint; spring there on every page after.
+    const jump = !placed.current || reduce
+    placed.current = true
+    // Motion places it either way, so it always knows where the marker is.
+    const flight = animate(mark, { y }, jump ? { duration: 0 } : markSpring)
+    return () => flight.stop()
+  }, [pathname, reduce])
+
   return (
-    <LayoutGroup id="docs-sidebar-tabs">
+    <div ref={listRef} className="relative">
+      <span
+        ref={markRef}
+        aria-hidden
+        className="pointer-events-none absolute top-0 left-2 flex opacity-0"
+      >
+        <Triad />
+      </span>
       <SidebarMenu>
         <NavItems nodes={nodes} pathname={pathname} />
       </SidebarMenu>
-    </LayoutGroup>
+    </div>
   )
 }
 

From c0fb3b6af7c3aab0623cac92ec00f39680aa2b31 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:49:04 +0530
Subject: [PATCH 20/49] Round shader previews at the corners.

WebGL canvases and backdrop blurs get their own compositor layers,
which the stage's rounded overflow clip can miss, so their corners
showed square. The stage now clips with a rounded clip-path, and its
edge is an inset ring drawn over the content, since the clip would cut
an outer one.
---
 components/component-preview.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/component-preview.tsx b/components/component-preview.tsx
index 5f22057..2f8f8d2 100644
--- a/components/component-preview.tsx
+++ b/components/component-preview.tsx
@@ -45,7 +45,12 @@ export function ComponentPreview({
       <div
         style={screenTokens}
         className={cn(
-          "relative flex min-h-[36svh] w-full items-center justify-center overflow-hidden rounded-xl bg-background p-8 text-foreground ring-1 ring-border",
+          "relative isolate flex min-h-[36svh] w-full items-center justify-center overflow-hidden rounded-xl bg-background p-8 text-foreground",
+          // WebGL canvases and backdrop blurs sit on their own compositor
+          // layers, which a rounded overflow clip can miss; a clip-path
+          // rounds them too. It would clip an outer ring, so the edge is an
+          // inset ring drawn over everything instead.
+          "[clip-path:inset(0_round_var(--radius-xl))] after:pointer-events-none after:absolute after:inset-0 after:z-50 after:rounded-[inherit] after:ring-1 after:ring-border after:ring-inset",
           align === "start" && "items-start justify-start",
           align === "end" && "items-end justify-end",
           stageClassName

From f2ce31b5bdada35eaf2a22a65aaa7d6c332e89e9 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:53:55 +0530
Subject: [PATCH 21/49] Rethink Shader Gradient as a grainy liquid gradient.

The eight hand-placed pastel blobs give way to a palette that flows
through domain-warped noise, cycling through up to four colors and
blending in OKLab so neighbours stay clean. A new grain prop adds film
grain on a CSS-pixel grid, re-rolled at 24 fps. New light and dark
palettes, a pointer swirl that eases in and out, and it now pauses
off-screen and in hidden tabs and holds still under reduced motion.
---
 content/docs/components/shader-gradient.mdx   |  13 +-
 public/r/shader-gradient-svelte.json          |   2 +-
 public/r/shader-gradient.json                 |   2 +-
 .../shader-gradient/shader-gradient-demo.tsx  |  43 +-
 .../shader-gradient-vanilla.ts                | 510 ++++++++++--------
 .../shader-gradient/shader-gradient.svelte    |  13 +-
 registry/shader-gradient/shader-gradient.tsx  |  23 +-
 7 files changed, 342 insertions(+), 264 deletions(-)

diff --git a/content/docs/components/shader-gradient.mdx b/content/docs/components/shader-gradient.mdx
index 020763e..8835d3a 100644
--- a/content/docs/components/shader-gradient.mdx
+++ b/content/docs/components/shader-gradient.mdx
@@ -1,11 +1,11 @@
 ---
 title: Shader Gradient
-description: A quiet WebGL color wash for landing heroes, empty states, and marketing sections — sits behind UI, follows the theme, optional pointer follow.
+description: A grainy liquid gradient for landing heroes, empty states, and marketing sections — the palette flows under a film grain, follows the theme, and swirls around the pointer.
 ---
 
 import { ShaderGradientDemo } from "@/registry/shader-gradient/shader-gradient-demo"
 
-Not a standalone gradient. Use it as atmosphere behind a hero, wait screen, or empty state so the page feels finished without competing with the copy. Soft sky / sage / cream / lavender on paper in light mode; visible dusk hues in dark. Press `d` to toggle.
+Atmosphere behind a hero, wait screen, or empty state. Four colors flow through slow, warped noise — liquid bands that never read as a loop — and blend in OKLab, so neighbours stay clean instead of going muddy. A film grain sits on top (`grain`, 0–1), re-rolled at 24 fps like film. Some paper or ink breathes through so it never turns into wall-to-wall color. Peach, butter, sky and lilac on paper in light mode; blue, violet, magenta and coral on ink in dark. Press `d` to toggle.
 
 ## Preview
 
@@ -97,11 +97,12 @@ Force a palette if the parent theme should not drive it:
 
 | Prop | Type | Default |
 | --- | --- | --- |
-| `colors` | `string[]` | sky / sage / cream / lavender |
+| `colors` | `string[]` | theme palette — up to 4, cycled in order |
 | `speed` | `number` | `0.14` |
-| `blur` | `number` | `0.7` |
-| `intensity` | `number` | `0.95` |
-| `interactive` | `boolean` | `true` |
+| `blur` | `number` | `0.7` — 0–1, broader and calmer bands |
+| `intensity` | `number` | `0.95` — 0–1, lower shows more paper / ink |
+| `grain` | `number` | `0.35` — 0–1 film grain, `0` for none |
+| `interactive` | `boolean` | `true` — the flow swirls around the pointer |
 | `theme` | `"light" \| "dark" \| "auto"` | `auto` |
 | `className` | `string` | React only |
 | `class` | `string` | Svelte only |
diff --git a/public/r/shader-gradient-svelte.json b/public/r/shader-gradient-svelte.json
index 908b301..85c97d9 100644
--- a/public/r/shader-gradient-svelte.json
+++ b/public/r/shader-gradient-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-gradient/shader-gradient.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /** Up to 4 hex colors — order: sky, sage, cream, lavender */\n  colors?: string[]\n  /** Drift speed. Default 0.14 */\n  speed?: number\n  /** Wash softness / size 0–1. Default 0.7 */\n  blur?: number\n  /** Color strength 0–1. Default 0.95 */\n  intensity?: number\n  /** Follow pointer gently. Default true */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Airy hero wash — sky / sage / cream / lavender on paper */\nexport const LIGHT_COLORS = [\"#7CB4E0\", \"#B4D8C4\", \"#EFE4BC\", \"#D2D7EC\"]\n/**\n * Dusk hues that still read on slate — sky / sage / amber / lilac.\n * Bright enough to see, dark enough not to go pastel neon.\n */\nexport const DARK_COLORS = [\"#3A6FA0\", \"#2F6B52\", \"#8A6B32\", \"#4A4D7A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(60% 45% at 60% 20%, #8FC0E4 0%, transparent 70%)\",\n    \"radial-gradient(40% 50% at 90% 46%, #8FC0E4 0%, transparent 70%)\",\n    \"radial-gradient(30% 40% at 100% 60%, #BEDCCA 0%, transparent 70%)\",\n    \"radial-gradient(38% 46% at 4% 56%, #F0E7C4 0%, transparent 70%)\",\n    \"radial-gradient(28% 24% at 90% 74%, #F0E7C4 0%, transparent 70%)\",\n    \"radial-gradient(40% 38% at 32% 38%, #D5D9EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(60% 45% at 60% 20%, #3A6FA0 0%, transparent 70%)\",\n    \"radial-gradient(40% 50% at 90% 46%, #3A6FA0 0%, transparent 70%)\",\n    \"radial-gradient(30% 40% at 100% 60%, #2F6B52 0%, transparent 70%)\",\n    \"radial-gradient(38% 46% at 4% 56%, #8A6B32 0%, transparent 70%)\",\n    \"radial-gradient(28% 24% at 90% 74%, #8A6B32 0%, transparent 70%)\",\n    \"radial-gradient(40% 38% at 32% 38%, #4A4D7A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_dark;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Super-gaussian field — elliptical, rotatable, flat-topped.\n// The flat top is what stops each wash from showing a bright center dot.\nfloat smear(vec2 p, vec2 c, vec2 r, float ang, float plateau) {\n  vec2 d = p - c;\n  float s = sin(ang);\n  float co = cos(ang);\n  d = vec2(d.x * co + d.y * s, -d.x * s + d.y * co) / r;\n  return exp(-pow(dot(d, d) + 0.0001, plateau));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n\n  // Square-ish space so washes keep their shape on any container\n  vec2 st = vec2(uv.x * aspect, uv.y);\n\n  float t = u_time * u_speed;\n\n  // Low-frequency warp — gives the wash a watercolor edge instead of a clean ellipse\n  vec2 warp = vec2(\n    fbm(st * 1.2 + vec2(t * 0.22, t * 0.16)),\n    fbm(st * 1.2 + vec2(-t * 0.18, t * 0.2) + 5.3)\n  ) - 0.5;\n  st += warp * (0.07 + u_blur * 0.08);\n  st -= (u_mouse - 0.5) * 0.05;\n\n  float grow = 0.85 + u_blur * 0.4;\n\n  // Slow drift — long periods so it never reads as looping\n  vec2 d1 = vec2(sin(t * 0.71), cos(t * 0.53)) * 0.045;\n  vec2 d2 = vec2(cos(t * 0.61), sin(t * 0.83)) * 0.04;\n  vec2 d3 = vec2(sin(t * 0.49), cos(t * 0.77)) * 0.05;\n  vec2 d4 = vec2(cos(t * 0.87), sin(t * 0.59)) * 0.045;\n\n  // Big sky sweep across the upper right — the dominant mass\n  float g1 = smear(st, vec2((0.54 + d1.x) * aspect, 0.84 + d1.y),\n                   vec2(0.54, 0.30) * grow, -0.5, 1.9);\n  // Broad reinforcement, pulled toward the middle of the sweep\n  float g2 = smear(st, vec2((0.66 + d2.x) * aspect, 0.72 + d2.y),\n                   vec2(0.42, 0.30) * grow, -0.45, 1.9);\n  // Sky trailing down the right edge\n  float g3 = smear(st, vec2((0.92 + d2.y) * aspect, 0.50 + d2.x),\n                   vec2(0.26, 0.32) * grow, 0.3, 1.7);\n  // Sage green hugging the right edge\n  float g4 = smear(st, vec2((0.99 + d3.x) * aspect, 0.44 + d3.y),\n                   vec2(0.28, 0.34) * grow, 0.0, 1.7);\n  // Butter cream on the left and low right\n  float g5 = smear(st, vec2((0.06 + d4.x) * aspect, 0.44 + d4.y),\n                   vec2(0.34, 0.38) * grow, 0.4, 1.8);\n  float g6 = smear(st, vec2((0.86 + d1.y) * aspect, 0.22 + d1.x),\n                   vec2(0.28, 0.22) * grow, -0.2, 1.6);\n  // Lavender transition between the sky and the cream\n  float g7 = smear(st, vec2((0.32 + d3.y) * aspect, 0.60 + d3.x),\n                   vec2(0.32, 0.28) * grow, 0.2, 1.6);\n  // Very wide base tint so the middle never falls back to bare white\n  float g8 = smear(st, vec2((0.50 + d4.y) * aspect, 0.40 + d4.x),\n                   vec2(0.95, 0.80) * grow, 0.0, 1.2);\n\n  float w1 = g1 * 1.00;\n  float w2 = g2 * 0.45;\n  float w3 = g3 * 0.70;\n  float w4 = g4 * 0.95;\n  float w5 = g5 * 0.95;\n  float w6 = g6 * 0.85;\n  float w7 = g7 * 0.50;\n  float w8 = g8 * 0.30;\n\n  float sum = w1 + w2 + w3 + w4 + w5 + w6 + w7 + w8;\n\n  // Neutral pale cast — keeps the open middle from going dead white\n  vec3 base = mix(u_c4, u_c3, 0.5);\n\n  // Weighted average keeps hues clean — no successive-mix muddiness\n  vec3 tint =\n    (u_c1 * w1 + u_c1 * w2 + u_c1 * w3 + u_c2 * w4 +\n     u_c3 * w5 + u_c3 * w6 + u_c4 * w7 + base * w8) /\n    max(sum, 0.0001);\n\n  // Screen-style coverage so overlaps deepen smoothly instead of clipping\n  float cover = 1.0 -\n    (1.0 - clamp(w1, 0.0, 1.0)) * (1.0 - clamp(w2, 0.0, 1.0)) *\n    (1.0 - clamp(w3, 0.0, 1.0)) * (1.0 - clamp(w4, 0.0, 1.0)) *\n    (1.0 - clamp(w5, 0.0, 1.0)) * (1.0 - clamp(w6, 0.0, 1.0)) *\n    (1.0 - clamp(w7, 0.0, 1.0)) * (1.0 - clamp(w8, 0.0, 1.0));\n\n  // Let the lower left breathe back to bare paper / slate\n  float fade = smoothstep(-0.35, 0.55, uv.x * 0.42 + uv.y * 0.72);\n  cover *= fade * clamp(u_intensity, 0.0, 1.0);\n\n  vec3 col;\n  if (u_dark < 0.5) {\n    vec3 paper = vec3(0.988, 0.986, 0.982);\n    col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  } else {\n    // Near-black ink — dusk hues lift off the void without going neon\n    vec3 slate = vec3(0.03, 0.032, 0.042);\n    float glow = clamp(cover * 0.72, 0.0, 1.0);\n    col = mix(slate, tint, glow);\n  }\n\n  // Dither — kills banding across these very low-contrast ramps\n  col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.005;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.72, 0.86, 0.94]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Quiet WebGL atmosphere for heroes and empty states — soft-focus color\n * fields behind UI. Theme-aware light / dusk.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: Required<\n    Pick<\n      ShaderGradientOptions,\n      \"speed\" | \"blur\" | \"intensity\" | \"interactive\" | \"theme\"\n    >\n  > &\n    ShaderGradientOptions = {\n    speed: 0.14,\n    blur: 0.7,\n    intensity: 0.95,\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uBlur = gl.getUniformLocation(program, \"u_blur\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.14))\n    gl.uniform1f(uBlur, Math.min(1, Math.max(0, options.blur ?? 0.7)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.95)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderGradientOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.14,\n    blur = 0.7,\n    intensity = 0.95,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderGradientInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      interactive,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      interactive,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-gradient\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderGradientOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    blur = DEFAULT_BLUR,\n    intensity = DEFAULT_INTENSITY,\n    grain = DEFAULT_GRAIN,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderGradientInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-gradient\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-gradient.svelte"
     }
diff --git a/public/r/shader-gradient.json b/public/r/shader-gradient.json
index e6dc95d..62294d6 100644
--- a/public/r/shader-gradient.json
+++ b/public/r/shader-gradient.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-gradient/shader-gradient.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /** Up to 4 hex colors — order: sky, sage, cream, lavender */\n  colors?: string[]\n  /** Drift speed. Default 0.14 */\n  speed?: number\n  /** Wash softness / size 0–1. Default 0.7 */\n  blur?: number\n  /** Color strength 0–1. Default 0.95 */\n  intensity?: number\n  /** Follow pointer gently. Default true */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Airy hero wash — sky / sage / cream / lavender on paper */\nexport const LIGHT_COLORS = [\"#7CB4E0\", \"#B4D8C4\", \"#EFE4BC\", \"#D2D7EC\"]\n/**\n * Dusk hues that still read on slate — sky / sage / amber / lilac.\n * Bright enough to see, dark enough not to go pastel neon.\n */\nexport const DARK_COLORS = [\"#3A6FA0\", \"#2F6B52\", \"#8A6B32\", \"#4A4D7A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(60% 45% at 60% 20%, #8FC0E4 0%, transparent 70%)\",\n    \"radial-gradient(40% 50% at 90% 46%, #8FC0E4 0%, transparent 70%)\",\n    \"radial-gradient(30% 40% at 100% 60%, #BEDCCA 0%, transparent 70%)\",\n    \"radial-gradient(38% 46% at 4% 56%, #F0E7C4 0%, transparent 70%)\",\n    \"radial-gradient(28% 24% at 90% 74%, #F0E7C4 0%, transparent 70%)\",\n    \"radial-gradient(40% 38% at 32% 38%, #D5D9EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(60% 45% at 60% 20%, #3A6FA0 0%, transparent 70%)\",\n    \"radial-gradient(40% 50% at 90% 46%, #3A6FA0 0%, transparent 70%)\",\n    \"radial-gradient(30% 40% at 100% 60%, #2F6B52 0%, transparent 70%)\",\n    \"radial-gradient(38% 46% at 4% 56%, #8A6B32 0%, transparent 70%)\",\n    \"radial-gradient(28% 24% at 90% 74%, #8A6B32 0%, transparent 70%)\",\n    \"radial-gradient(40% 38% at 32% 38%, #4A4D7A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_dark;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Super-gaussian field — elliptical, rotatable, flat-topped.\n// The flat top is what stops each wash from showing a bright center dot.\nfloat smear(vec2 p, vec2 c, vec2 r, float ang, float plateau) {\n  vec2 d = p - c;\n  float s = sin(ang);\n  float co = cos(ang);\n  d = vec2(d.x * co + d.y * s, -d.x * s + d.y * co) / r;\n  return exp(-pow(dot(d, d) + 0.0001, plateau));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n\n  // Square-ish space so washes keep their shape on any container\n  vec2 st = vec2(uv.x * aspect, uv.y);\n\n  float t = u_time * u_speed;\n\n  // Low-frequency warp — gives the wash a watercolor edge instead of a clean ellipse\n  vec2 warp = vec2(\n    fbm(st * 1.2 + vec2(t * 0.22, t * 0.16)),\n    fbm(st * 1.2 + vec2(-t * 0.18, t * 0.2) + 5.3)\n  ) - 0.5;\n  st += warp * (0.07 + u_blur * 0.08);\n  st -= (u_mouse - 0.5) * 0.05;\n\n  float grow = 0.85 + u_blur * 0.4;\n\n  // Slow drift — long periods so it never reads as looping\n  vec2 d1 = vec2(sin(t * 0.71), cos(t * 0.53)) * 0.045;\n  vec2 d2 = vec2(cos(t * 0.61), sin(t * 0.83)) * 0.04;\n  vec2 d3 = vec2(sin(t * 0.49), cos(t * 0.77)) * 0.05;\n  vec2 d4 = vec2(cos(t * 0.87), sin(t * 0.59)) * 0.045;\n\n  // Big sky sweep across the upper right — the dominant mass\n  float g1 = smear(st, vec2((0.54 + d1.x) * aspect, 0.84 + d1.y),\n                   vec2(0.54, 0.30) * grow, -0.5, 1.9);\n  // Broad reinforcement, pulled toward the middle of the sweep\n  float g2 = smear(st, vec2((0.66 + d2.x) * aspect, 0.72 + d2.y),\n                   vec2(0.42, 0.30) * grow, -0.45, 1.9);\n  // Sky trailing down the right edge\n  float g3 = smear(st, vec2((0.92 + d2.y) * aspect, 0.50 + d2.x),\n                   vec2(0.26, 0.32) * grow, 0.3, 1.7);\n  // Sage green hugging the right edge\n  float g4 = smear(st, vec2((0.99 + d3.x) * aspect, 0.44 + d3.y),\n                   vec2(0.28, 0.34) * grow, 0.0, 1.7);\n  // Butter cream on the left and low right\n  float g5 = smear(st, vec2((0.06 + d4.x) * aspect, 0.44 + d4.y),\n                   vec2(0.34, 0.38) * grow, 0.4, 1.8);\n  float g6 = smear(st, vec2((0.86 + d1.y) * aspect, 0.22 + d1.x),\n                   vec2(0.28, 0.22) * grow, -0.2, 1.6);\n  // Lavender transition between the sky and the cream\n  float g7 = smear(st, vec2((0.32 + d3.y) * aspect, 0.60 + d3.x),\n                   vec2(0.32, 0.28) * grow, 0.2, 1.6);\n  // Very wide base tint so the middle never falls back to bare white\n  float g8 = smear(st, vec2((0.50 + d4.y) * aspect, 0.40 + d4.x),\n                   vec2(0.95, 0.80) * grow, 0.0, 1.2);\n\n  float w1 = g1 * 1.00;\n  float w2 = g2 * 0.45;\n  float w3 = g3 * 0.70;\n  float w4 = g4 * 0.95;\n  float w5 = g5 * 0.95;\n  float w6 = g6 * 0.85;\n  float w7 = g7 * 0.50;\n  float w8 = g8 * 0.30;\n\n  float sum = w1 + w2 + w3 + w4 + w5 + w6 + w7 + w8;\n\n  // Neutral pale cast — keeps the open middle from going dead white\n  vec3 base = mix(u_c4, u_c3, 0.5);\n\n  // Weighted average keeps hues clean — no successive-mix muddiness\n  vec3 tint =\n    (u_c1 * w1 + u_c1 * w2 + u_c1 * w3 + u_c2 * w4 +\n     u_c3 * w5 + u_c3 * w6 + u_c4 * w7 + base * w8) /\n    max(sum, 0.0001);\n\n  // Screen-style coverage so overlaps deepen smoothly instead of clipping\n  float cover = 1.0 -\n    (1.0 - clamp(w1, 0.0, 1.0)) * (1.0 - clamp(w2, 0.0, 1.0)) *\n    (1.0 - clamp(w3, 0.0, 1.0)) * (1.0 - clamp(w4, 0.0, 1.0)) *\n    (1.0 - clamp(w5, 0.0, 1.0)) * (1.0 - clamp(w6, 0.0, 1.0)) *\n    (1.0 - clamp(w7, 0.0, 1.0)) * (1.0 - clamp(w8, 0.0, 1.0));\n\n  // Let the lower left breathe back to bare paper / slate\n  float fade = smoothstep(-0.35, 0.55, uv.x * 0.42 + uv.y * 0.72);\n  cover *= fade * clamp(u_intensity, 0.0, 1.0);\n\n  vec3 col;\n  if (u_dark < 0.5) {\n    vec3 paper = vec3(0.988, 0.986, 0.982);\n    col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  } else {\n    // Near-black ink — dusk hues lift off the void without going neon\n    vec3 slate = vec3(0.03, 0.032, 0.042);\n    float glow = clamp(cover * 0.72, 0.0, 1.0);\n    col = mix(slate, tint, glow);\n  }\n\n  // Dither — kills banding across these very low-contrast ramps\n  col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.005;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.72, 0.86, 0.94]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Quiet WebGL atmosphere for heroes and empty states — soft-focus color\n * fields behind UI. Theme-aware light / dusk.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: Required<\n    Pick<\n      ShaderGradientOptions,\n      \"speed\" | \"blur\" | \"intensity\" | \"interactive\" | \"theme\"\n    >\n  > &\n    ShaderGradientOptions = {\n    speed: 0.14,\n    blur: 0.7,\n    intensity: 0.95,\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uBlur = gl.getUniformLocation(program, \"u_blur\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.14))\n    gl.uniform1f(uBlur, Math.min(1, Math.max(0, options.blur ?? 0.7)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.95)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderGradientProps = Omit<\n  ShaderGradientOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * Quiet WebGL atmosphere for heroes and empty states — soft-focus color\n * fields behind UI. Theme-aware light / dusk.\n */\nexport function ShaderGradient({\n  className,\n  colors,\n  speed = 0.14,\n  blur = 0.7,\n  intensity = 0.95,\n  interactive = true,\n  theme = \"auto\",\n}: ShaderGradientProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderGradientInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, blur, intensity, interactive, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-gradient\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderGradientProps = Omit<\n  ShaderGradientOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states — the palette flows\n * through slow warped noise under a film grain. Theme-aware.\n */\nexport function ShaderGradient({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  blur = DEFAULT_BLUR,\n  intensity = DEFAULT_INTENSITY,\n  grain = DEFAULT_GRAIN,\n  interactive = true,\n  theme = \"auto\",\n}: ShaderGradientProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderGradientInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, blur, intensity, grain, interactive, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-gradient\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-gradient.tsx"
     }
diff --git a/registry/shader-gradient/shader-gradient-demo.tsx b/registry/shader-gradient/shader-gradient-demo.tsx
index 89cf6a7..f33e7f5 100644
--- a/registry/shader-gradient/shader-gradient-demo.tsx
+++ b/registry/shader-gradient/shader-gradient-demo.tsx
@@ -14,6 +14,10 @@ import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
   DARK_COLORS,
+  DEFAULT_BLUR,
+  DEFAULT_GRAIN,
+  DEFAULT_INTENSITY,
+  DEFAULT_SPEED,
   LIGHT_COLORS,
   ShaderGradient,
 } from "@/registry/shader-gradient/shader-gradient"
@@ -38,9 +42,10 @@ export function ShaderGradientDemo() {
 
   const defaults = useMemo(
     () => ({
-      speed: 0.14,
-      blur: 0.7,
-      intensity: 0.95,
+      speed: DEFAULT_SPEED,
+      blur: DEFAULT_BLUR,
+      intensity: DEFAULT_INTENSITY,
+      grain: DEFAULT_GRAIN,
       interactive: true,
       colors: palette,
     }),
@@ -73,6 +78,7 @@ export function ShaderGradientDemo() {
             speed={props.speed}
             blur={props.blur}
             intensity={props.intensity}
+            grain={props.grain}
             interactive={props.interactive}
             colors={useAutoTheme ? undefined : props.colors}
           />
@@ -88,8 +94,8 @@ export function ShaderGradientDemo() {
               A first screen that already feels finished
             </h3>
             <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
-              Headline and a primary action sit on the wash. The shader stays
-              in the back.
+              Headline and a primary action sit on the wash. The shader stays in
+              the back.
             </p>
             <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
               <Button type="button">Install</Button>
@@ -110,10 +116,12 @@ export function ShaderGradientDemo() {
         onReset={resetProps}
         component="ShaderGradient"
         snippetProps={{
-          speed: props.speed,
-          blur: props.blur,
-          intensity: props.intensity,
-          interactive: props.interactive,
+          speed: props.speed === DEFAULT_SPEED ? undefined : props.speed,
+          blur: props.blur === DEFAULT_BLUR ? undefined : props.blur,
+          intensity:
+            props.intensity === DEFAULT_INTENSITY ? undefined : props.intensity,
+          grain: props.grain === DEFAULT_GRAIN ? undefined : props.grain,
+          interactive: props.interactive ? undefined : false,
           colors: useAutoTheme ? undefined : props.colors,
         }}
       >
@@ -122,9 +130,10 @@ export function ShaderGradientDemo() {
           colors={props.colors}
           palettes={[
             palette,
-            ["#E07A5F", "#F2CC8F", "#81B29A", "#3D405B"],
-            ["#0D1B2A", "#1B263B", "#415A77", "#778DA9"],
-            ["#F72585", "#7209B7", "#3A0CA3", "#4CC9F0"],
+            // Each cycles back to its first color, so neighbours stay close.
+            ["#FF6B6B", "#FFB36B", "#FFE08A", "#FF8FB1"],
+            ["#0B3D91", "#1F7A8C", "#6CC4A1", "#2E5EAA"],
+            ["#F72585", "#B5179E", "#7209B7", "#4361EE"],
           ]}
           onChange={(colors) => updateProp("colors", colors)}
         />
@@ -152,9 +161,17 @@ export function ShaderGradientDemo() {
           step={0.05}
           onChange={(v) => updateProp("intensity", v)}
         />
+        <ControlSlider
+          label="Grain"
+          value={props.grain}
+          min={0}
+          max={1}
+          step={0.05}
+          onChange={(v) => updateProp("grain", v)}
+        />
         <ControlSwitch
           label="Interactive"
-          description="Follow the pointer"
+          description="Swirl the flow around the pointer"
           checked={props.interactive}
           onChange={(v) => updateProp("interactive", v)}
         />
diff --git a/registry/shader-gradient/shader-gradient-vanilla.ts b/registry/shader-gradient/shader-gradient-vanilla.ts
index 7c2bfdd..6df15ab 100644
--- a/registry/shader-gradient/shader-gradient-vanilla.ts
+++ b/registry/shader-gradient/shader-gradient-vanilla.ts
@@ -1,15 +1,20 @@
 export type ShaderGradientTheme = "light" | "dark" | "auto"
 
 export type ShaderGradientOptions = {
-  /** Up to 4 hex colors — order: sky, sage, cream, lavender */
+  /**
+   * Up to 4 colors, any CSS hex. The flow cycles through them in order and
+   * back to the first, so neighbours should sit well together.
+   */
   colors?: string[]
-  /** Drift speed. Default 0.14 */
+  /** Flow speed. Default `0.14`. */
   speed?: number
-  /** Wash softness / size 0–1. Default 0.7 */
+  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */
   blur?: number
-  /** Color strength 0–1. Default 0.95 */
+  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */
   intensity?: number
-  /** Follow pointer gently. Default true */
+  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */
+  grain?: number
+  /** The flow swirls gently around the pointer. Default `true`. */
   interactive?: boolean
   /**
    * Palette mode. Default `auto` follows shadcn / next-themes
@@ -25,37 +30,41 @@ export type ShaderGradientInstance = {
   destroy: () => void
 }
 
-/** Airy hero wash — sky / sage / cream / lavender on paper */
-export const LIGHT_COLORS = ["#7CB4E0", "#B4D8C4", "#EFE4BC", "#D2D7EC"]
+/** Peach, butter, sky and lilac, flowing over warm paper. */
+export const LIGHT_COLORS = ["#F7A48B", "#F9D78E", "#9FCBF0", "#BBA9EE"]
 /**
- * Dusk hues that still read on slate — sky / sage / amber / lilac.
- * Bright enough to see, dark enough not to go pastel neon.
+ * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,
+ * so every blend on the cycle stays rich instead of passing through grey.
  */
-export const DARK_COLORS = ["#3A6FA0", "#2F6B52", "#8A6B32", "#4A4D7A"]
-
-export const LIGHT_FALLBACK = {
-  backgroundColor: "#FCFBF9",
-  backgroundImage: [
-    "radial-gradient(60% 45% at 60% 20%, #8FC0E4 0%, transparent 70%)",
-    "radial-gradient(40% 50% at 90% 46%, #8FC0E4 0%, transparent 70%)",
-    "radial-gradient(30% 40% at 100% 60%, #BEDCCA 0%, transparent 70%)",
-    "radial-gradient(38% 46% at 4% 56%, #F0E7C4 0%, transparent 70%)",
-    "radial-gradient(28% 24% at 90% 74%, #F0E7C4 0%, transparent 70%)",
-    "radial-gradient(40% 38% at 32% 38%, #D5D9EC 0%, transparent 70%)",
-  ].join(", "),
-} as const
-
-export const DARK_FALLBACK = {
-  backgroundColor: "#08090C",
-  backgroundImage: [
-    "radial-gradient(60% 45% at 60% 20%, #3A6FA0 0%, transparent 70%)",
-    "radial-gradient(40% 50% at 90% 46%, #3A6FA0 0%, transparent 70%)",
-    "radial-gradient(30% 40% at 100% 60%, #2F6B52 0%, transparent 70%)",
-    "radial-gradient(38% 46% at 4% 56%, #8A6B32 0%, transparent 70%)",
-    "radial-gradient(28% 24% at 90% 74%, #8A6B32 0%, transparent 70%)",
-    "radial-gradient(40% 38% at 32% 38%, #4A4D7A 0%, transparent 70%)",
-  ].join(", "),
-} as const
+export const DARK_COLORS = ["#2A3BD1", "#7A3FD6", "#C43A9A", "#F26D5B"]
+const LIGHT_BASE = "#FBF8F4"
+const DARK_BASE = "#07080B"
+
+export const DEFAULT_SPEED = 0.14
+export const DEFAULT_BLUR = 0.7
+export const DEFAULT_INTENSITY = 0.95
+export const DEFAULT_GRAIN = 0.35
+
+/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */
+const GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`
+
+function fallback(colors: string[], base: string) {
+  const [a, b, c, d] = colors
+  return {
+    backgroundColor: base,
+    backgroundImage: [
+      GRAIN_TILE,
+      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,
+      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,
+      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,
+      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,
+    ].join(", "),
+  } as const
+}
+
+/** Shown before the first frame and wherever WebGL isn't available. */
+export const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)
+export const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)
 
 const VERT = `
 attribute vec2 a_position;
@@ -69,36 +78,43 @@ precision highp float;
 
 uniform vec2 u_resolution;
 uniform float u_time;
-uniform float u_speed;
 uniform float u_blur;
 uniform float u_intensity;
-uniform float u_dark;
+uniform float u_grain;
+uniform float u_grainSeed;
+uniform float u_pixel;
+uniform float u_pointer;
+uniform vec2 u_mouse;
+// Palette stops and the paper / ink underneath, in OKLab.
+uniform vec3 u_c0;
 uniform vec3 u_c1;
 uniform vec3 u_c2;
 uniform vec3 u_c3;
-uniform vec3 u_c4;
-uniform vec2 u_mouse;
+uniform vec3 u_base;
 
+// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.
 float hash(vec2 p) {
-  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
 }
 
 float noise(vec2 p) {
   vec2 i = floor(p);
   vec2 f = fract(p);
-  float a = hash(i);
-  float b = hash(i + vec2(1.0, 0.0));
-  float c = hash(i + vec2(0.0, 1.0));
-  float d = hash(i + vec2(1.0, 1.0));
   vec2 u = f * f * (3.0 - 2.0 * f);
-  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
 }
 
 float fbm(vec2 p) {
   float v = 0.0;
   float a = 0.5;
   mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
-  for (int i = 0; i < 4; i++) {
+  for (int i = 0; i < 3; i++) {
     v += a * noise(p);
     p = m * p;
     a *= 0.5;
@@ -106,119 +122,103 @@ float fbm(vec2 p) {
   return v;
 }
 
-// Super-gaussian field — elliptical, rotatable, flat-topped.
-// The flat top is what stops each wash from showing a bright center dot.
-float smear(vec2 p, vec2 c, vec2 r, float ang, float plateau) {
-  vec2 d = p - c;
-  float s = sin(ang);
-  float co = cos(ang);
-  d = vec2(d.x * co + d.y * s, -d.x * s + d.y * co) / r;
-  return exp(-pow(dot(d, d) + 0.0001, plateau));
+// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any
+// two neighbouring weights always sum to one.
+float stop(float v, float at) {
+  float d = abs(v - at);
+  d = min(d, 1.0 - d);
+  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));
 }
 
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
-  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+vec3 palette(float v) {
+  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +
+         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);
+}
 
-  // Square-ish space so washes keep their shape on any container
-  vec2 st = vec2(uv.x * aspect, uv.y);
-
-  float t = u_time * u_speed;
-
-  // Low-frequency warp — gives the wash a watercolor edge instead of a clean ellipse
-  vec2 warp = vec2(
-    fbm(st * 1.2 + vec2(t * 0.22, t * 0.16)),
-    fbm(st * 1.2 + vec2(-t * 0.18, t * 0.2) + 5.3)
-  ) - 0.5;
-  st += warp * (0.07 + u_blur * 0.08);
-  st -= (u_mouse - 0.5) * 0.05;
-
-  float grow = 0.85 + u_blur * 0.4;
-
-  // Slow drift — long periods so it never reads as looping
-  vec2 d1 = vec2(sin(t * 0.71), cos(t * 0.53)) * 0.045;
-  vec2 d2 = vec2(cos(t * 0.61), sin(t * 0.83)) * 0.04;
-  vec2 d3 = vec2(sin(t * 0.49), cos(t * 0.77)) * 0.05;
-  vec2 d4 = vec2(cos(t * 0.87), sin(t * 0.59)) * 0.045;
-
-  // Big sky sweep across the upper right — the dominant mass
-  float g1 = smear(st, vec2((0.54 + d1.x) * aspect, 0.84 + d1.y),
-                   vec2(0.54, 0.30) * grow, -0.5, 1.9);
-  // Broad reinforcement, pulled toward the middle of the sweep
-  float g2 = smear(st, vec2((0.66 + d2.x) * aspect, 0.72 + d2.y),
-                   vec2(0.42, 0.30) * grow, -0.45, 1.9);
-  // Sky trailing down the right edge
-  float g3 = smear(st, vec2((0.92 + d2.y) * aspect, 0.50 + d2.x),
-                   vec2(0.26, 0.32) * grow, 0.3, 1.7);
-  // Sage green hugging the right edge
-  float g4 = smear(st, vec2((0.99 + d3.x) * aspect, 0.44 + d3.y),
-                   vec2(0.28, 0.34) * grow, 0.0, 1.7);
-  // Butter cream on the left and low right
-  float g5 = smear(st, vec2((0.06 + d4.x) * aspect, 0.44 + d4.y),
-                   vec2(0.34, 0.38) * grow, 0.4, 1.8);
-  float g6 = smear(st, vec2((0.86 + d1.y) * aspect, 0.22 + d1.x),
-                   vec2(0.28, 0.22) * grow, -0.2, 1.6);
-  // Lavender transition between the sky and the cream
-  float g7 = smear(st, vec2((0.32 + d3.y) * aspect, 0.60 + d3.x),
-                   vec2(0.32, 0.28) * grow, 0.2, 1.6);
-  // Very wide base tint so the middle never falls back to bare white
-  float g8 = smear(st, vec2((0.50 + d4.y) * aspect, 0.40 + d4.x),
-                   vec2(0.95, 0.80) * grow, 0.0, 1.2);
-
-  float w1 = g1 * 1.00;
-  float w2 = g2 * 0.45;
-  float w3 = g3 * 0.70;
-  float w4 = g4 * 0.95;
-  float w5 = g5 * 0.95;
-  float w6 = g6 * 0.85;
-  float w7 = g7 * 0.50;
-  float w8 = g8 * 0.30;
-
-  float sum = w1 + w2 + w3 + w4 + w5 + w6 + w7 + w8;
-
-  // Neutral pale cast — keeps the open middle from going dead white
-  vec3 base = mix(u_c4, u_c3, 0.5);
-
-  // Weighted average keeps hues clean — no successive-mix muddiness
-  vec3 tint =
-    (u_c1 * w1 + u_c1 * w2 + u_c1 * w3 + u_c2 * w4 +
-     u_c3 * w5 + u_c3 * w6 + u_c4 * w7 + base * w8) /
-    max(sum, 0.0001);
-
-  // Screen-style coverage so overlaps deepen smoothly instead of clipping
-  float cover = 1.0 -
-    (1.0 - clamp(w1, 0.0, 1.0)) * (1.0 - clamp(w2, 0.0, 1.0)) *
-    (1.0 - clamp(w3, 0.0, 1.0)) * (1.0 - clamp(w4, 0.0, 1.0)) *
-    (1.0 - clamp(w5, 0.0, 1.0)) * (1.0 - clamp(w6, 0.0, 1.0)) *
-    (1.0 - clamp(w7, 0.0, 1.0)) * (1.0 - clamp(w8, 0.0, 1.0));
-
-  // Let the lower left breathe back to bare paper / slate
-  float fade = smoothstep(-0.35, 0.55, uv.x * 0.42 + uv.y * 0.72);
-  cover *= fade * clamp(u_intensity, 0.0, 1.0);
-
-  vec3 col;
-  if (u_dark < 0.5) {
-    vec3 paper = vec3(0.988, 0.986, 0.982);
-    col = mix(paper, tint, clamp(cover, 0.0, 1.0));
-  } else {
-    // Near-black ink — dusk hues lift off the void without going neon
-    vec3 slate = vec3(0.03, 0.032, 0.042);
-    float glow = clamp(cover * 0.72, 0.0, 1.0);
-    col = mix(slate, tint, glow);
-  }
+vec3 oklabToLinear(vec3 c) {
+  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;
+  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;
+  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;
+  l = l * l * l;
+  m = m * m * m;
+  s = s * s * s;
+  return vec3(
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
+  );
+}
+
+vec3 linearToSrgb(vec3 c) {
+  c = clamp(c, 0.0, 1.0);
+  vec3 lo = c * 12.92;
+  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;
+  return mix(lo, hi, step(vec3(0.0031308), c));
+}
 
-  // Dither — kills banding across these very low-contrast ramps
-  col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.005;
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  float scale = mix(2.0, 0.8, u_blur);
+  vec2 p = vec2(uv.x * aspect, uv.y) * scale;
+  float t = u_time;
+
+  // A soft swirl around the pointer.
+  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;
+  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;
+
+  // Domain warping: noise fed back through itself twice gives slow,
+  // liquid bands that never read as a loop.
+  vec2 q = vec2(
+    fbm(p + vec2(0.0, 0.12 * t)),
+    fbm(p + vec2(5.2, 1.3) - 0.1 * t)
+  );
+  vec2 r = vec2(
+    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),
+    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)
+  );
+  float f = fbm(p + 2.0 * r);
+
+  // Where on the palette this pixel sits. The track is cyclic, so wrapping
+  // past the last color flows back into the first without a seam.
+  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);
+  vec3 lab = palette(v);
+
+  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.
+  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));
+  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));
+
+  vec3 col = linearToSrgb(oklabToLinear(lab));
+
+  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,
+  // more photographic distribution than flat white noise.
+  vec2 cell = floor(gl_FragCoord.xy / u_pixel);
+  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;
+  col += (g - 0.5) * u_grain * 0.2;
+  // Always a hair of dither, so the smooth ramps never band.
+  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;
 
   gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
 }
 `
 
 function isDev() {
-  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+  return (
+    typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+  )
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function numberOr(value: unknown, fallback: number, min: number, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+  return clamp(value, min, max)
 }
 
-function hexToRgb(hex: string): [number, number, number] {
+/** Hex → OKLab, so the shader can blend without going muddy. */
+function hexToOklab(hex: string): [number, number, number] {
   const h = hex.replace("#", "").trim()
   const full =
     h.length === 3
@@ -228,8 +228,20 @@ function hexToRgb(hex: string): [number, number, number] {
           .join("")
       : h.padEnd(6, "0").slice(0, 6)
   const n = Number.parseInt(full, 16)
-  if (Number.isNaN(n)) return [0.72, 0.86, 0.94]
-  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+  const srgb = Number.isNaN(n)
+    ? [0.5, 0.5, 0.5]
+    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+  const [r, g, b] = srgb.map((c) =>
+    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  ) as [number, number, number]
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  ]
 }
 
 /** Resolves shadcn / next-themes dark mode (`attribute="class"` → `html.dark`). */
@@ -269,31 +281,26 @@ function compile(gl: WebGLRenderingContext, type: number, source: string) {
 }
 
 /**
- * Quiet WebGL atmosphere for heroes and empty states — soft-focus color
- * fields behind UI. Theme-aware light / dusk.
+ * A grainy liquid gradient for heroes and empty states. The palette flows
+ * through slow domain-warped noise, blends in OKLab so neighbours never go
+ * muddy, and carries a film grain. Theme-aware; pauses off-screen and in
+ * hidden tabs; holds a still frame under `prefers-reduced-motion`.
  */
 export function createShaderGradient(
   canvas: HTMLCanvasElement,
   initial: ShaderGradientOptions = {}
 ): ShaderGradientInstance | null {
-  let options: Required<
-    Pick<
-      ShaderGradientOptions,
-      "speed" | "blur" | "intensity" | "interactive" | "theme"
-    >
-  > &
-    ShaderGradientOptions = {
-    speed: 0.14,
-    blur: 0.7,
-    intensity: 0.95,
+  let options: ShaderGradientOptions = {
     interactive: true,
     theme: "auto",
     ...initial,
   }
 
   const mouse = { x: 0.5, y: 0.5 }
-  const targetMouse = { x: 0.5, y: 0.5 }
-  let reduce = false
+  const target = { x: 0.5, y: 0.5 }
+  // Pointer pull eases in and out, so leaving the hero never snaps.
+  let pull = 0
+  let pullTarget = 0
   let dark = resolveDark(options.theme ?? "auto")
   options.onThemeChange?.(dark)
 
@@ -348,46 +355,110 @@ export function createShaderGradient(
   gl.enableVertexAttribArray(loc)
   gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
 
-  const uResolution = gl.getUniformLocation(program, "u_resolution")
-  const uTime = gl.getUniformLocation(program, "u_time")
-  const uSpeed = gl.getUniformLocation(program, "u_speed")
-  const uBlur = gl.getUniformLocation(program, "u_blur")
-  const uIntensity = gl.getUniformLocation(program, "u_intensity")
-  const uDark = gl.getUniformLocation(program, "u_dark")
-  const uC1 = gl.getUniformLocation(program, "u_c1")
-  const uC2 = gl.getUniformLocation(program, "u_c2")
-  const uC3 = gl.getUniformLocation(program, "u_c3")
-  const uC4 = gl.getUniformLocation(program, "u_c4")
-  const uMouse = gl.getUniformLocation(program, "u_mouse")
-
-  let raf = 0
-  let running = true
-  const start = performance.now()
-  let frozenTime = 0
-
+  const u = (name: string) => gl.getUniformLocation(program, name)
+  const uResolution = u("u_resolution")
+  const uTime = u("u_time")
+  const uBlur = u("u_blur")
+  const uIntensity = u("u_intensity")
+  const uGrain = u("u_grain")
+  const uGrainSeed = u("u_grainSeed")
+  const uPixel = u("u_pixel")
+  const uPointer = u("u_pointer")
+  const uMouse = u("u_mouse")
+  const uStops = [u("u_c0"), u("u_c1"), u("u_c2"), u("u_c3")]
+  const uBase = u("u_base")
+
+  // The gradient is soft enough that one sample per CSS pixel is plenty;
+  // it also keeps the grain the same size on every screen.
+  let pixel = 1
   const resize = () => {
     const parent = canvas.parentElement
     if (!parent) return
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
     const w = parent.clientWidth
     const h = parent.clientHeight
     if (w <= 0 || h <= 0) return
-    canvas.width = Math.max(1, Math.floor(w * dpr))
-    canvas.height = Math.max(1, Math.floor(h * dpr))
+    pixel = Math.min(window.devicePixelRatio || 1, 1)
+    canvas.width = Math.max(1, Math.floor(w * pixel))
+    canvas.height = Math.max(1, Math.floor(h * pixel))
     canvas.style.width = `${w}px`
     canvas.style.height = `${h}px`
     gl.viewport(0, 0, canvas.width, canvas.height)
+    wake()
   }
 
-  resize()
-  const ro = new ResizeObserver(resize)
-  if (canvas.parentElement) ro.observe(canvas.parentElement)
+  let colorsKey = ""
+  const syncColors = () => {
+    const source = options.colors?.length
+      ? options.colors
+      : dark
+        ? DARK_COLORS
+        : LIGHT_COLORS
+    const key = `${source.join()}|${dark}`
+    if (key === colorsKey) return
+    colorsKey = key
+    uStops.forEach((loc, i) => {
+      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))
+    })
+    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))
+  }
 
   const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
-  const onReduce = () => {
-    reduce = mqReduce.matches
+  let onScreen = true
+  let raf = 0
+  let last = 0
+  let clock = 0
+
+  const moving = () =>
+    onScreen && !mqReduce.matches && document.visibilityState !== "hidden"
+
+  function wake() {
+    if (raf) return
+    last = performance.now()
+    raf = requestAnimationFrame(tick)
+  }
+
+  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.
+  const tick = (now: number) => {
+    raf = 0
+    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
+    last = now
+    const live = moving()
+    if (live) clock += dt
+
+    mouse.x += (target.x - mouse.x) * 0.05
+    mouse.y += (target.y - mouse.y) * 0.05
+    pull += (pullTarget - pull) * 0.04
+
+    syncColors()
+    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)
+    gl.uniform2f(uResolution, canvas.width, canvas.height)
+    gl.uniform1f(uTime, clock * speed * 4)
+    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))
+    gl.uniform1f(
+      uIntensity,
+      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)
+    )
+    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))
+    // Grain re-rolls at 24 fps, like film, and holds still when paused.
+    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)
+    gl.uniform1f(uPixel, pixel)
+    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)
+    gl.uniform2f(uMouse, mouse.x, mouse.y)
+    gl.drawArrays(gl.TRIANGLES, 0, 6)
+
+    if (live) raf = requestAnimationFrame(tick)
   }
-  onReduce()
+
+  const ro = new ResizeObserver(resize)
+  if (canvas.parentElement) ro.observe(canvas.parentElement)
+  const io = new IntersectionObserver(([entry]) => {
+    onScreen = entry?.isIntersecting ?? true
+    wake()
+  })
+  io.observe(canvas)
+  const onVisibility = () => wake()
+  document.addEventListener("visibilitychange", onVisibility)
+  const onReduce = () => wake()
   mqReduce.addEventListener("change", onReduce)
 
   const syncTheme = () => {
@@ -395,6 +466,7 @@ export function createShaderGradient(
     if (next === dark) return
     dark = next
     options.onThemeChange?.(dark)
+    wake()
   }
   const mo = new MutationObserver(syncTheme)
   mo.observe(document.documentElement, {
@@ -405,66 +477,36 @@ export function createShaderGradient(
   mqDark.addEventListener("change", syncTheme)
 
   const onMove = (e: PointerEvent) => {
-    if (!options.interactive) return
-    const parent = canvas.parentElement
-    if (!parent) return
-    const rect = parent.getBoundingClientRect()
+    if (options.interactive === false) return
+    const rect = canvas.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return
-    targetMouse.x = (e.clientX - rect.left) / rect.width
-    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height
-  }
-  window.addEventListener("pointermove", onMove, { passive: true })
-
-  const tick = (now: number) => {
-    if (!running) return
-
-    if (reduce) {
-      if (frozenTime === 0) frozenTime = (now - start) / 1000
-    } else {
-      frozenTime = 0
+    const x = (e.clientX - rect.left) / rect.width
+    const y = 1 - (e.clientY - rect.top) / rect.height
+    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1
+    pullTarget = inside ? 1 : 0
+    if (inside) {
+      target.x = x
+      target.y = y
     }
-
-    const time = reduce ? frozenTime : (now - start) / 1000
-    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)
-    const palette = [0, 1, 2, 3].map((i) =>
-      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)
-    )
-
-    mouse.x += (targetMouse.x - mouse.x) * 0.03
-    mouse.y += (targetMouse.y - mouse.y) * 0.03
-
-    gl.uniform2f(uResolution, canvas.width, canvas.height)
-    gl.uniform1f(uTime, time)
-    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.14))
-    gl.uniform1f(uBlur, Math.min(1, Math.max(0, options.blur ?? 0.7)))
-    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.95)))
-    gl.uniform1f(uDark, dark ? 1 : 0)
-    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])
-    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])
-    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])
-    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])
-    gl.uniform2f(
-      uMouse,
-      options.interactive ? mouse.x : 0.5,
-      options.interactive ? mouse.y : 0.5
-    )
-
-    gl.drawArrays(gl.TRIANGLES, 0, 6)
-    raf = requestAnimationFrame(tick)
   }
+  window.addEventListener("pointermove", onMove, { passive: true })
 
-  raf = requestAnimationFrame(tick)
+  resize()
+  wake()
 
   return {
     setOptions(next) {
       options = { ...options, ...next }
       syncTheme()
+      wake()
     },
     destroy() {
-      running = false
       cancelAnimationFrame(raf)
+      raf = 0
       ro.disconnect()
+      io.disconnect()
       mo.disconnect()
+      document.removeEventListener("visibilitychange", onVisibility)
       mqReduce.removeEventListener("change", onReduce)
       mqDark.removeEventListener("change", syncTheme)
       window.removeEventListener("pointermove", onMove)
diff --git a/registry/shader-gradient/shader-gradient.svelte b/registry/shader-gradient/shader-gradient.svelte
index 1ea7c3e..e67e912 100644
--- a/registry/shader-gradient/shader-gradient.svelte
+++ b/registry/shader-gradient/shader-gradient.svelte
@@ -6,6 +6,10 @@
   import {
     createShaderGradient,
     DARK_FALLBACK,
+    DEFAULT_BLUR,
+    DEFAULT_GRAIN,
+    DEFAULT_INTENSITY,
+    DEFAULT_SPEED,
     LIGHT_FALLBACK,
     resolveDark,
     type ShaderGradientInstance,
@@ -23,9 +27,10 @@
   let {
     class: className = "",
     colors,
-    speed = 0.14,
-    blur = 0.7,
-    intensity = 0.95,
+    speed = DEFAULT_SPEED,
+    blur = DEFAULT_BLUR,
+    intensity = DEFAULT_INTENSITY,
+    grain = DEFAULT_GRAIN,
     interactive = true,
     theme = "auto",
   }: Props = $props()
@@ -58,6 +63,7 @@
       speed,
       blur,
       intensity,
+      grain,
       interactive,
       theme,
       onThemeChange: (dark) => {
@@ -82,6 +88,7 @@
       speed,
       blur,
       intensity,
+      grain,
       interactive,
       theme,
     })
diff --git a/registry/shader-gradient/shader-gradient.tsx b/registry/shader-gradient/shader-gradient.tsx
index fbb01eb..a153246 100644
--- a/registry/shader-gradient/shader-gradient.tsx
+++ b/registry/shader-gradient/shader-gradient.tsx
@@ -7,6 +7,10 @@ import { cn } from "@/lib/utils"
 import {
   createShaderGradient,
   DARK_FALLBACK,
+  DEFAULT_BLUR,
+  DEFAULT_GRAIN,
+  DEFAULT_INTENSITY,
+  DEFAULT_SPEED,
   LIGHT_FALLBACK,
   resolveDark,
   type ShaderGradientInstance,
@@ -16,6 +20,10 @@ import {
 export {
   DARK_COLORS,
   DARK_FALLBACK,
+  DEFAULT_BLUR,
+  DEFAULT_GRAIN,
+  DEFAULT_INTENSITY,
+  DEFAULT_SPEED,
   LIGHT_COLORS,
   LIGHT_FALLBACK,
 } from "./shader-gradient-vanilla"
@@ -33,15 +41,16 @@ export type ShaderGradientProps = Omit<
 }
 
 /**
- * Quiet WebGL atmosphere for heroes and empty states — soft-focus color
- * fields behind UI. Theme-aware light / dusk.
+ * A grainy liquid gradient for heroes and empty states — the palette flows
+ * through slow warped noise under a film grain. Theme-aware.
  */
 export function ShaderGradient({
   className,
   colors,
-  speed = 0.14,
-  blur = 0.7,
-  intensity = 0.95,
+  speed = DEFAULT_SPEED,
+  blur = DEFAULT_BLUR,
+  intensity = DEFAULT_INTENSITY,
+  grain = DEFAULT_GRAIN,
   interactive = true,
   theme = "auto",
 }: ShaderGradientProps) {
@@ -73,6 +82,7 @@ export function ShaderGradient({
       speed,
       blur,
       intensity,
+      grain,
       interactive,
       theme,
       onThemeChange: setIsDark,
@@ -91,11 +101,12 @@ export function ShaderGradient({
       speed,
       blur,
       intensity,
+      grain,
       interactive,
       theme,
       onThemeChange: setIsDark,
     })
-  }, [colors, speed, blur, intensity, interactive, theme])
+  }, [colors, speed, blur, intensity, grain, interactive, theme])
 
   const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK
 

From 5e3982ccccbc82382aa0e174531f760bc0d6ad45 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Sun, 27 Sep 2026 22:55:48 +0530
Subject: [PATCH 22/49] Toggle the hero copy on the gradient and fire previews.

A Copy switch hides the headline and buttons so the shader can be seen
on its own, matching the one Shader Sky already has.
---
 registry/shader-fire/shader-fire-demo.tsx     | 63 +++++++++++--------
 .../shader-gradient/shader-gradient-demo.tsx  | 63 +++++++++++--------
 2 files changed, 74 insertions(+), 52 deletions(-)

diff --git a/registry/shader-fire/shader-fire-demo.tsx b/registry/shader-fire/shader-fire-demo.tsx
index 741b485..48e12f2 100644
--- a/registry/shader-fire/shader-fire-demo.tsx
+++ b/registry/shader-fire/shader-fire-demo.tsx
@@ -42,6 +42,7 @@ export function ShaderFireDemo() {
       intensity: 0.55,
       height: 0.45,
       interactive: true,
+      overlay: true,
       dither: false,
       pixelSize: 1,
       colors: palette,
@@ -79,32 +80,36 @@ export function ShaderFireDemo() {
             pixelSize={props.pixelSize}
             colors={useAutoTheme ? undefined : props.colors}
           />
-          <div
-            aria-hidden
-            className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
-          />
-          <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
-            <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">
-              Atmosphere
-            </p>
-            <h3 className="mt-3 max-w-lg text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
-              Heat under the headline
-            </h3>
-            <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
-              Sparse tongues rise from the bottom. Copy stays in the quiet
-              middle; the fire stays a wash.
-            </p>
-            <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
-              <Button type="button">Install</Button>
-              <Button
-                type="button"
-                variant="outline"
-                className="bg-background/70 backdrop-blur-sm"
-              >
-                View API
-              </Button>
-            </div>
-          </div>
+          {props.overlay ? (
+            <>
+              <div
+                aria-hidden
+                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
+              />
+              <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
+                <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">
+                  Atmosphere
+                </p>
+                <h3 className="mt-3 max-w-lg text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
+                  Heat under the headline
+                </h3>
+                <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
+                  Sparse tongues rise from the bottom. Copy stays in the quiet
+                  middle; the fire stays a wash.
+                </p>
+                <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+                  <Button type="button">Install</Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="bg-background/70 backdrop-blur-sm"
+                  >
+                    View API
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : null}
         </div>
       </ComponentPreview>
 
@@ -157,6 +162,12 @@ export function ShaderFireDemo() {
           step={0.05}
           onChange={(v) => updateProp("height", v)}
         />
+        <ControlSwitch
+          label="Copy"
+          description="Headline over the fire"
+          checked={props.overlay}
+          onChange={(v) => updateProp("overlay", v)}
+        />
         <ControlSwitch
           label="Interactive"
           description="Heat follows the pointer"
diff --git a/registry/shader-gradient/shader-gradient-demo.tsx b/registry/shader-gradient/shader-gradient-demo.tsx
index f33e7f5..b37e01d 100644
--- a/registry/shader-gradient/shader-gradient-demo.tsx
+++ b/registry/shader-gradient/shader-gradient-demo.tsx
@@ -47,6 +47,7 @@ export function ShaderGradientDemo() {
       intensity: DEFAULT_INTENSITY,
       grain: DEFAULT_GRAIN,
       interactive: true,
+      overlay: true,
       colors: palette,
     }),
     [palette]
@@ -82,32 +83,36 @@ export function ShaderGradientDemo() {
             interactive={props.interactive}
             colors={useAutoTheme ? undefined : props.colors}
           />
-          <div
-            aria-hidden
-            className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
-          />
-          <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
-            <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">
-              Landing
-            </p>
-            <h3 className="mt-3 max-w-lg text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
-              A first screen that already feels finished
-            </h3>
-            <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
-              Headline and a primary action sit on the wash. The shader stays in
-              the back.
-            </p>
-            <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
-              <Button type="button">Install</Button>
-              <Button
-                type="button"
-                variant="outline"
-                className="bg-background/70 backdrop-blur-sm"
-              >
-                View API
-              </Button>
-            </div>
-          </div>
+          {props.overlay ? (
+            <>
+              <div
+                aria-hidden
+                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
+              />
+              <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
+                <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">
+                  Landing
+                </p>
+                <h3 className="mt-3 max-w-lg text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
+                  A first screen that already feels finished
+                </h3>
+                <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
+                  Headline and a primary action sit on the wash. The shader
+                  stays in the back.
+                </p>
+                <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+                  <Button type="button">Install</Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="bg-background/70 backdrop-blur-sm"
+                  >
+                    View API
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : null}
         </div>
       </ComponentPreview>
 
@@ -169,6 +174,12 @@ export function ShaderGradientDemo() {
           step={0.05}
           onChange={(v) => updateProp("grain", v)}
         />
+        <ControlSwitch
+          label="Copy"
+          description="Headline over the gradient"
+          checked={props.overlay}
+          onChange={(v) => updateProp("overlay", v)}
+        />
         <ControlSwitch
           label="Interactive"
           description="Swirl the flow around the pointer"

From fa2a4e4c9a57eca59b25eac7087180b215c32f52 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 12:31:55 +0530
Subject: [PATCH 23/49] Make Phosphor Score transparent in dark mode too.

Dark mode painted a solid #050505 slab that read as a hard square box
against the preview and any page. The canvas now clears in both themes
and fades its edges by erasing, so it sits on whatever the parent
paints; the wrappers stop painting a background of their own.

Closes #28
---
 .cursor/skills/23rd/SKILL.md                  |  2 +-
 .cursor/skills/23rd/apis.md                   |  2 +-
 .cursor/skills/23rd/components.md             |  2 +-
 .cursor/skills/23rd/recipes.md                |  1 -
 content/docs/components/phosphor-score.mdx    |  4 ++--
 public/r/phosphor-score-svelte.json           |  2 +-
 public/r/phosphor-score.json                  |  2 +-
 .../phosphor-score/phosphor-score-vanilla.ts  | 20 +++++++++----------
 registry/phosphor-score/phosphor-score.svelte | 12 -----------
 registry/phosphor-score/phosphor-score.tsx    | 17 +---------------
 skills/23rd/SKILL.md                          |  2 +-
 skills/23rd/apis.md                           |  2 +-
 skills/23rd/components.md                     |  2 +-
 skills/23rd/recipes.md                        |  1 -
 14 files changed, 20 insertions(+), 51 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index caca221..f08c1b9 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -155,7 +155,7 @@ Exceptions:
 
 - Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
-- `PhosphorScore` canvas is transparent in light mode (`LIGHT_BG`) and `#050505` in dark mode (`DARK_BG`). A dark phosphor field is a hard rectangle. Clip the parent (`overflow-hidden rounded-*`) if the square edge matters. Open issue: the docs preview border looks boxed ([#28](https://github.com/radiumcoders/23rd.dev/issues/28)).
+- `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
 - `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
 `prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index 34fa891..167c924 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -83,7 +83,7 @@ type PhosphorScoreProps = {
 }
 ```
 
-`DARK_COLOR` `#4DFF6A`, `LIGHT_COLOR` `#147A3A`, `DARK_BG` `#050505`, `LIGHT_BG` `"transparent"`. A set `color` replaces ink only. Background still follows dark vs light.
+`DARK_COLOR` `#4DFF6A`, `LIGHT_COLOR` `#147A3A`, `DARK_BG` and `LIGHT_BG` are both `"transparent"`. A set `color` replaces ink only.
 
 ## radiant-lines
 
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index 28cc556..a82b783 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -61,7 +61,7 @@ export function Score() {
 }
 ```
 
-Pitfalls: omit `color` so theme can swap (dark `#4DFF6A` on `#050505`, light `#147A3A` on a transparent canvas). Dark mode paints a solid `#050505` rectangle — clip the parent. Issue [#28](https://github.com/radiumcoders/23rd.dev/issues/28) is that square edge. The docs sentence “Press d to toggle” is not implemented on the component or the demo. Do not add a `d` shortcut.
+Pitfalls: omit `color` so theme can swap (dark `#4DFF6A`, light `#147A3A`). The canvas is transparent in both themes; the parent paints the background. Issue [#28](https://github.com/radiumcoders/23rd.dev/issues/28) is that square edge. The docs sentence “Press d to toggle” is not implemented on the component or the demo. Do not add a `d` shortcut.
 
 ## radiant-lines
 
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index c93451b..01b8143 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -226,6 +226,5 @@ export function Brand() {
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
 - Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).
-- `PhosphorScore` on a light card in dark mode without clipping. The canvas fills `#050505`.
 - Assuming `theme="auto"` recolors a shader after you passed `colors`. It will not.
 - Adding `variant` to anything but `LiveOrb`.
diff --git a/content/docs/components/phosphor-score.mdx b/content/docs/components/phosphor-score.mdx
index 23627f1..27ef6bf 100644
--- a/content/docs/components/phosphor-score.mdx
+++ b/content/docs/components/phosphor-score.mdx
@@ -5,7 +5,7 @@ description: Vertical CRT sheet music — notes slide down a grand staff, bloom
 
 import { PhosphorScoreDemo } from "@/registry/phosphor-score/phosphor-score-demo"
 
-A falling score, not a piano roll. A grand staff of beamed runs, chords, slurs and dynamics scrolls down to a playhead: each note brightens as it arrives, blooms and flares as it plays, then fades with a phosphor afterglow. Default `theme="auto"` follows the site — phosphor on black, forest ink on the page background. `glow` is 0–100 (default `50`) and stays a tight halo on the note. Change **Seed** to crossfade to a new score. Press `d` to toggle the theme.
+A falling score, not a piano roll. A grand staff of beamed runs, chords, slurs and dynamics scrolls down to a playhead: each note brightens as it arrives, blooms and flares as it plays, then fades with a phosphor afterglow. Default `theme="auto"` follows the site — phosphor green in dark, forest ink in light, both on the page background. `glow` is 0–100 (default `50`) and stays a tight halo on the note. Change **Seed** to crossfade to a new score. Press `d` to toggle the theme.
 
 ## Preview
 
@@ -105,4 +105,4 @@ Change the viewing angle. The plane turns about the playhead in perspective, lik
 | `className` | `string`                      | React only                                       |
 | `class`     | `string`                      | Svelte only                                      |
 
-Omit `color` and `theme="auto"` picks phosphor green on dark, forest ink on light. The canvas is transparent in light mode so the parent background shows through.
+Omit `color` and `theme="auto"` picks phosphor green on dark, forest ink on light. The canvas is transparent in both themes, so it sits on whatever background the parent paints.
diff --git a/public/r/phosphor-score-svelte.json b/public/r/phosphor-score-svelte.json
index e9358c2..3bbc7c0 100644
--- a/public/r/phosphor-score-svelte.json
+++ b/public/r/phosphor-score-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/phosphor-score/phosphor-score.svelte",
-      "content": "<script module lang=\"ts\">\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.\n   * Positive tips the incoming notes away. Default `0`.\n   */\n  rotateX?: number\n  /**\n   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.\n   * Positive swings the right side away. Default `0`.\n   */\n  rotateY?: number\n  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */\n  rotateZ?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\n/** `rotateX` / `rotateY` stop short of edge-on. */\nconst MAX_TILT = 70\n/** Camera distance as a multiple of the canvas' longer side. */\nconst PERSPECTIVE = 1.2\n/** Depth scale where the plane has fully faded into the distance. */\nconst FAR_SCALE = 0.12\n/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */\nconst FOG_RANGE = 0.3\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nconst tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)\nconst spinOf = (value?: number) => {\n  const deg = numberOr(value, 0, -Infinity, Infinity)\n  return ((((deg + 180) % 360) + 360) % 360) - 180\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * How the score plane sits in front of the camera. Plane coordinates are\n * the unrotated canvas pixels; it turns about the playhead, which is also\n * where perspective converges.\n */\ntype View = {\n  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */\n  m: number[]\n  ox: number\n  oy: number\n  /** Camera distance. */\n  cam: number\n  /** No depth variation across the plane, so nothing foreshortens or fogs. */\n  depthless: boolean\n  /** Bounds of the plane that are on screen and not lost in the distance. */\n  x0: number\n  x1: number\n  y0: number\n  y1: number\n}\n\nfunction makeView(\n  w: number,\n  h: number,\n  rotateX: number,\n  rotateY: number,\n  rotateZ: number\n): View {\n  const rad = Math.PI / 180\n  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]\n  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]\n  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]\n  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.\n  const m = [\n    cy * cz,\n    -cy * sz,\n    sy,\n    sx * sy * cz + cx * sz,\n    -sx * sy * sz + cx * cz,\n    -sx * cy,\n    -cx * sy * cz + sx * sz,\n    cx * sy * sz + sx * cz,\n    cx * cy,\n  ]\n  const ox = w / 2\n  const oy = h * PLAYHEAD\n  const cam = Math.max(w, h) * PERSPECTIVE\n  const view: View = {\n    m,\n    ox,\n    oy,\n    cam,\n    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,\n    x0: 0,\n    x1: w,\n    y0: 0,\n    y1: h,\n  }\n  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view\n\n  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the\n  // plane. Along a ray through screen point (u, v) the plane is hit at\n  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so\n  // \"not too far\" is a straight line on screen and clips the rectangle.\n  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]\n  const far = (u: number, v: number) =>\n    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v\n  const corners: [number, number][] = [\n    [-ox, -oy],\n    [w - ox, -oy],\n    [w - ox, h - oy],\n    [-ox, h - oy],\n  ]\n  const kept: [number, number][] = []\n  corners.forEach((a, i) => {\n    const b = corners[(i + 1) % corners.length]!\n    const fa = far(a[0], a[1])\n    const fb = far(b[0], b[1])\n    if (fa >= 0) kept.push(a)\n    if (fa >= 0 !== fb >= 0) {\n      const k = fa / (fa - fb)\n      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])\n    }\n  })\n\n  view.x0 = view.y0 = Infinity\n  view.x1 = view.y1 = -Infinity\n  for (const [u, v] of kept) {\n    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)\n    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]\n    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox\n    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy\n    view.x0 = Math.min(view.x0, px)\n    view.x1 = Math.max(view.x1, px)\n    view.y0 = Math.min(view.y0, py)\n    view.y1 = Math.max(view.y1, py)\n  }\n  return view\n}\n\n/** Fades the plane out as it recedes toward `FAR_SCALE`. */\nfunction fogOf(scale: number) {\n  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)\n  return k * k * (3 - 2 * k)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n  let view = makeView(1, 1, 0, 0, 0)\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    view = makeView(\n      w,\n      h,\n      tiltOf(options.rotateX),\n      tiltOf(options.rotateY),\n      spinOf(options.rotateZ)\n    )\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  /**\n   * Every beat offset at which something at time `t`, lasting `len` beats,\n   * is in view. Usually one; a steep tilt can see several loops ahead.\n   */\n  function spots(l: Layout, t: number, len = 0) {\n    const minD = (l.playY - view.y1 - l.ppb) / l.ppb\n    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb\n    const first = wrapDelta(t, beat)\n    const out: number[] = []\n    const from = Math.ceil((minD - len - first) / LOOP_BEATS)\n    const to = Math.floor((maxD - first) / LOOP_BEATS)\n    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)\n    return out\n  }\n\n  /**\n   * Plane point → screen `[x, y, scale]`, where scale is how much the\n   * perspective enlarges it there. Scale is `0` behind the camera.\n   */\n  function project(x: number, y: number): [number, number, number] {\n    const { m, ox, oy, cam } = view\n    const px = x - ox\n    const py = y - oy\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return [0, 0, 0]\n    const s = cam / (cam - z)\n    return [\n      ox + (m[0]! * px + m[1]! * py) * s,\n      oy + (m[3]! * px + m[4]! * py) * s,\n      s,\n    ]\n  }\n\n  /**\n   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or\n   * glow drawn around the origin tilts and foreshortens with the score.\n   * Returns the distance fog there; `leave()` restores screen space.\n   */\n  function enter(x: number, y: number) {\n    const { m, ox, oy, cam } = view\n    const { dpr } = size\n    const px = x - ox\n    const py = y - oy\n    const qx = m[0]! * px + m[1]! * py\n    const qy = m[3]! * px + m[4]! * py\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return 0\n    const s = cam / (cam - z)\n    // Jacobian of the projection: how a unit step along the plane lands on screen.\n    const k = (s * s) / cam\n    ctx!.setTransform(\n      dpr * (s * m[0]! + qx * k * m[6]!),\n      dpr * (s * m[3]! + qy * k * m[6]!),\n      dpr * (s * m[1]! + qx * k * m[7]!),\n      dpr * (s * m[4]! + qy * k * m[7]!),\n      dpr * (ox + qx * s),\n      dpr * (oy + qy * s)\n    )\n    return fogOf(s)\n  }\n\n  function leave() {\n    const { dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalAlpha = 1\n  }\n\n  /** Plane stroke width; `line` and `polyline` scale it with depth. */\n  let lw = 1\n\n  /**\n   * A straight stroke on the plane. Long ones pass `segments` so the fog\n   * can thin them as they recede.\n   */\n  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {\n    const n = view.depthless ? 1 : segments\n    for (let i = 0; i < n; i++) {\n      const a = i / n\n      const b = (i + 1) / n\n      polyline([\n        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],\n        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],\n      ])\n    }\n  }\n\n  function polyline(points: [number, number][]) {\n    let scale = 0\n    ctx!.beginPath()\n    for (const [i, [x, y]] of points.entries()) {\n      const p = project(x, y)\n      if (p[2] <= 0) return\n      scale += p[2]\n      if (i === 0) ctx!.moveTo(p[0], p[1])\n      else ctx!.lineTo(p[0], p[1])\n    }\n    scale /= points.length\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** A quadratic curve on the plane; its control point is projected too. */\n  function curve(\n    x0: number,\n    y0: number,\n    cx: number,\n    cy: number,\n    x1: number,\n    y1: number\n  ) {\n    const a = project(x0, y0)\n    const c = project(cx, cy)\n    const b = project(x1, y1)\n    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return\n    const scale = (a[2] + b[2]) / 2\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.beginPath()\n    ctx!.moveTo(a[0], a[1])\n    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */\n  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {\n    const fog = enter(x, y)\n    if (fog > 0) {\n      ctx!.globalAlpha = alpha * fog\n      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)\n    }\n    leave()\n  }\n\n  function drawStaves(l: Layout) {\n    ctx!.lineCap = \"butt\"\n    lw = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, view.y0, x, view.y1, 16)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      for (const d of spots(l, bar)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n      }\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      for (const d of spots(l, mark.t)) {\n        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)\n        if (fog > 0) {\n          ctx!.globalAlpha = fog\n          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n          ctx!.fillText(mark.text, 0, 0)\n        }\n        leave()\n      }\n    }\n    lw = 1\n    for (const pin of s.hairpins) {\n      for (const d0 of spots(l, pin.t, pin.dur)) {\n        const d1 = d0 + pin.dur\n        const narrow = pin.opening ? d0 : d1\n        const wide = pin.opening ? d1 : d0\n        const half = sp * 0.9\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n        )\n        polyline([\n          [l.cx - half, yOf(l, wide)],\n          [l.cx, yOf(l, narrow)],\n          [l.cx + half, yOf(l, wide)],\n        ])\n      }\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    lw = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const len = slur.last.t - slur.first.t\n      for (const d0 of spots(l, slur.first.t, len)) {\n        const d1 = d0 + len\n        const inward = slur.staff === 0 ? 1 : -1\n        const y0 = yOf(l, d0)\n        const y1 = yOf(l, d1)\n        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n        const edge =\n          inward > 0\n            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5\n        )\n        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      }\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const len = stem.t1 - stem.t0\n      for (const d0 of spots(l, stem.t0, len)) {\n        const d1 = d0 + len\n        const out = stem.staff === 0 ? -1 : 1\n        const tipX = xOf(l, stem.staff, stem.tip)\n        lw = stemW\n        if (stem.chord) {\n          // One stem through the chord, from the innermost head out to the tip.\n          const inner =\n            out < 0\n              ? Math.max(...stem.notes.map((n) => n.pitch))\n              : Math.min(...stem.notes.map((n) => n.pitch))\n          const y = yOf(l, d0) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n          line(xOf(l, stem.staff, inner), y, tipX, y)\n          continue\n        }\n        for (const n of stem.notes) {\n          const d = d0 + (n.t - stem.t0)\n          const y = yOf(l, d) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n          line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n        }\n        if (stem.beams === 0) continue\n        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n        lw = sp * 0.36\n        const yA = yOf(l, d0) + side + stemW / 2\n        const yB = yOf(l, d1) + side - stemW / 2\n        const offset = sp * 0.18 * out\n        line(tipX - offset, yA, tipX - offset, yB)\n        if (stem.beams === 2) {\n          const x2 = tipX - offset - out * sp * 0.75\n          line(x2, yA, x2, yB)\n        }\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    lw = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      for (const d of spots(l, n.t)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n        const from = n.pitch < 0 ? -2 : 10\n        const step = n.pitch < 0 ? -2 : 2\n        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n          const x = xOf(l, n.staff, p)\n          line(x, y - ry * 1.7, x, y + ry * 1.7)\n        }\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        for (const d of spots(l, n.t)) {\n          const lit = litAt(d)\n          if (lit < 0.03) continue\n          const r = sp * (1.1 + lit * 1.5) * bloom\n          glow(\n            xOf(l, n.staff, n.pitch),\n            yOf(l, d),\n            r,\n            r,\n            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n          )\n        }\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      for (const d of spots(l, n.t)) {\n        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))\n        if (fog <= 0) {\n          leave()\n          continue\n        }\n        ctx!.globalAlpha = fog\n        const color = rgba(rgb, alphaAt(d))\n        ctx!.beginPath()\n        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)\n        if (n.hollow) {\n          ctx!.strokeStyle = color\n          ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n          ctx!.stroke()\n        } else {\n          ctx!.fillStyle = color\n          ctx!.fill()\n        }\n        if (n.acc !== 0) {\n          ctx!.fillStyle = color\n          ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", 0, ry + sp * 0.95)\n        }\n        leave()\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      // In slices, so the band follows the perspective across the plane.\n      const slices = view.depthless ? 1 : 24\n      const span = (view.x1 - view.x0) / slices\n      const src = glowSprite.width / slices\n      for (let i = 0; i < slices; i++) {\n        const fog = enter(view.x0 + (i + 0.5) * span, y)\n        if (fog > 0) {\n          ctx!.globalAlpha = alpha * fog\n          ctx!.drawImage(\n            glowSprite,\n            i * src,\n            0,\n            src,\n            glowSprite.height,\n            -span / 2,\n            -band,\n            span,\n            band * 2\n          )\n        }\n        leave()\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    lw = 1\n    line(view.x0, y, view.x1, y, 12)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))\n    }\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  interface Props extends Omit<PhosphorScoreOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    glow = DEFAULT_GLOW,\n    speed = DEFAULT_SPEED,\n    density = DEFAULT_DENSITY,\n    sway = true,\n    seed = DEFAULT_SEED,\n    rotateX = 0,\n    rotateY = 0,\n    rotateZ = 0,\n    theme = \"auto\",\n  }: Props = $props()\n\n  /**\n   * Background before the first frame, so dark mode never flashes light.\n   * `#050505` is `DARK_BG`; Tailwind needs the literal.\n   */\n  const SURFACE: Record<PhosphorScoreTheme, string> = {\n    auto: \"bg-background dark:bg-[#050505]\",\n    dark: \"bg-[#050505]\",\n    light: \"bg-background\",\n  }\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: PhosphorScoreInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"phosphor-score\"\n  role=\"img\"\n  aria-label=\"Falling phosphor sheet music\"\n  class={[\n    \"absolute inset-0 overflow-hidden\",\n    SURFACE[theme] ?? SURFACE.auto,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \")}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.\n   * Positive tips the incoming notes away. Default `0`.\n   */\n  rotateX?: number\n  /**\n   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.\n   * Positive swings the right side away. Default `0`.\n   */\n  rotateY?: number\n  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */\n  rotateZ?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\n/** Transparent in both themes — the parent's background shows through. */\nexport const DARK_BG = \"transparent\"\n/** Transparent in both themes — the parent's background shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\n/** `rotateX` / `rotateY` stop short of edge-on. */\nconst MAX_TILT = 70\n/** Camera distance as a multiple of the canvas' longer side. */\nconst PERSPECTIVE = 1.2\n/** Depth scale where the plane has fully faded into the distance. */\nconst FAR_SCALE = 0.12\n/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */\nconst FOG_RANGE = 0.3\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nconst tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)\nconst spinOf = (value?: number) => {\n  const deg = numberOr(value, 0, -Infinity, Infinity)\n  return ((((deg + 180) % 360) + 360) % 360) - 180\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * How the score plane sits in front of the camera. Plane coordinates are\n * the unrotated canvas pixels; it turns about the playhead, which is also\n * where perspective converges.\n */\ntype View = {\n  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */\n  m: number[]\n  ox: number\n  oy: number\n  /** Camera distance. */\n  cam: number\n  /** No depth variation across the plane, so nothing foreshortens or fogs. */\n  depthless: boolean\n  /** Bounds of the plane that are on screen and not lost in the distance. */\n  x0: number\n  x1: number\n  y0: number\n  y1: number\n}\n\nfunction makeView(\n  w: number,\n  h: number,\n  rotateX: number,\n  rotateY: number,\n  rotateZ: number\n): View {\n  const rad = Math.PI / 180\n  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]\n  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]\n  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]\n  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.\n  const m = [\n    cy * cz,\n    -cy * sz,\n    sy,\n    sx * sy * cz + cx * sz,\n    -sx * sy * sz + cx * cz,\n    -sx * cy,\n    -cx * sy * cz + sx * sz,\n    cx * sy * sz + sx * cz,\n    cx * cy,\n  ]\n  const ox = w / 2\n  const oy = h * PLAYHEAD\n  const cam = Math.max(w, h) * PERSPECTIVE\n  const view: View = {\n    m,\n    ox,\n    oy,\n    cam,\n    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,\n    x0: 0,\n    x1: w,\n    y0: 0,\n    y1: h,\n  }\n  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view\n\n  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the\n  // plane. Along a ray through screen point (u, v) the plane is hit at\n  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so\n  // \"not too far\" is a straight line on screen and clips the rectangle.\n  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]\n  const far = (u: number, v: number) =>\n    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v\n  const corners: [number, number][] = [\n    [-ox, -oy],\n    [w - ox, -oy],\n    [w - ox, h - oy],\n    [-ox, h - oy],\n  ]\n  const kept: [number, number][] = []\n  corners.forEach((a, i) => {\n    const b = corners[(i + 1) % corners.length]!\n    const fa = far(a[0], a[1])\n    const fb = far(b[0], b[1])\n    if (fa >= 0) kept.push(a)\n    if (fa >= 0 !== fb >= 0) {\n      const k = fa / (fa - fb)\n      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])\n    }\n  })\n\n  view.x0 = view.y0 = Infinity\n  view.x1 = view.y1 = -Infinity\n  for (const [u, v] of kept) {\n    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)\n    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]\n    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox\n    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy\n    view.x0 = Math.min(view.x0, px)\n    view.x1 = Math.max(view.x1, px)\n    view.y0 = Math.min(view.y0, py)\n    view.y1 = Math.max(view.y1, py)\n  }\n  return view\n}\n\n/** Fades the plane out as it recedes toward `FAR_SCALE`. */\nfunction fogOf(scale: number) {\n  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)\n  return k * k * (3 - 2 * k)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n  let view = makeView(1, 1, 0, 0, 0)\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    ctx!.clearRect(0, 0, w, h)\n    if (w < 2 || h < 2) return\n\n    view = makeView(\n      w,\n      h,\n      tiltOf(options.rotateX),\n      tiltOf(options.rotateY),\n      spinOf(options.rotateZ)\n    )\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  /**\n   * Every beat offset at which something at time `t`, lasting `len` beats,\n   * is in view. Usually one; a steep tilt can see several loops ahead.\n   */\n  function spots(l: Layout, t: number, len = 0) {\n    const minD = (l.playY - view.y1 - l.ppb) / l.ppb\n    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb\n    const first = wrapDelta(t, beat)\n    const out: number[] = []\n    const from = Math.ceil((minD - len - first) / LOOP_BEATS)\n    const to = Math.floor((maxD - first) / LOOP_BEATS)\n    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)\n    return out\n  }\n\n  /**\n   * Plane point → screen `[x, y, scale]`, where scale is how much the\n   * perspective enlarges it there. Scale is `0` behind the camera.\n   */\n  function project(x: number, y: number): [number, number, number] {\n    const { m, ox, oy, cam } = view\n    const px = x - ox\n    const py = y - oy\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return [0, 0, 0]\n    const s = cam / (cam - z)\n    return [\n      ox + (m[0]! * px + m[1]! * py) * s,\n      oy + (m[3]! * px + m[4]! * py) * s,\n      s,\n    ]\n  }\n\n  /**\n   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or\n   * glow drawn around the origin tilts and foreshortens with the score.\n   * Returns the distance fog there; `leave()` restores screen space.\n   */\n  function enter(x: number, y: number) {\n    const { m, ox, oy, cam } = view\n    const { dpr } = size\n    const px = x - ox\n    const py = y - oy\n    const qx = m[0]! * px + m[1]! * py\n    const qy = m[3]! * px + m[4]! * py\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return 0\n    const s = cam / (cam - z)\n    // Jacobian of the projection: how a unit step along the plane lands on screen.\n    const k = (s * s) / cam\n    ctx!.setTransform(\n      dpr * (s * m[0]! + qx * k * m[6]!),\n      dpr * (s * m[3]! + qy * k * m[6]!),\n      dpr * (s * m[1]! + qx * k * m[7]!),\n      dpr * (s * m[4]! + qy * k * m[7]!),\n      dpr * (ox + qx * s),\n      dpr * (oy + qy * s)\n    )\n    return fogOf(s)\n  }\n\n  function leave() {\n    const { dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalAlpha = 1\n  }\n\n  /** Plane stroke width; `line` and `polyline` scale it with depth. */\n  let lw = 1\n\n  /**\n   * A straight stroke on the plane. Long ones pass `segments` so the fog\n   * can thin them as they recede.\n   */\n  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {\n    const n = view.depthless ? 1 : segments\n    for (let i = 0; i < n; i++) {\n      const a = i / n\n      const b = (i + 1) / n\n      polyline([\n        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],\n        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],\n      ])\n    }\n  }\n\n  function polyline(points: [number, number][]) {\n    let scale = 0\n    ctx!.beginPath()\n    for (const [i, [x, y]] of points.entries()) {\n      const p = project(x, y)\n      if (p[2] <= 0) return\n      scale += p[2]\n      if (i === 0) ctx!.moveTo(p[0], p[1])\n      else ctx!.lineTo(p[0], p[1])\n    }\n    scale /= points.length\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** A quadratic curve on the plane; its control point is projected too. */\n  function curve(\n    x0: number,\n    y0: number,\n    cx: number,\n    cy: number,\n    x1: number,\n    y1: number\n  ) {\n    const a = project(x0, y0)\n    const c = project(cx, cy)\n    const b = project(x1, y1)\n    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return\n    const scale = (a[2] + b[2]) / 2\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.beginPath()\n    ctx!.moveTo(a[0], a[1])\n    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */\n  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {\n    const fog = enter(x, y)\n    if (fog > 0) {\n      ctx!.globalAlpha = alpha * fog\n      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)\n    }\n    leave()\n  }\n\n  function drawStaves(l: Layout) {\n    ctx!.lineCap = \"butt\"\n    lw = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, view.y0, x, view.y1, 16)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      for (const d of spots(l, bar)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n      }\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      for (const d of spots(l, mark.t)) {\n        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)\n        if (fog > 0) {\n          ctx!.globalAlpha = fog\n          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n          ctx!.fillText(mark.text, 0, 0)\n        }\n        leave()\n      }\n    }\n    lw = 1\n    for (const pin of s.hairpins) {\n      for (const d0 of spots(l, pin.t, pin.dur)) {\n        const d1 = d0 + pin.dur\n        const narrow = pin.opening ? d0 : d1\n        const wide = pin.opening ? d1 : d0\n        const half = sp * 0.9\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n        )\n        polyline([\n          [l.cx - half, yOf(l, wide)],\n          [l.cx, yOf(l, narrow)],\n          [l.cx + half, yOf(l, wide)],\n        ])\n      }\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    lw = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const len = slur.last.t - slur.first.t\n      for (const d0 of spots(l, slur.first.t, len)) {\n        const d1 = d0 + len\n        const inward = slur.staff === 0 ? 1 : -1\n        const y0 = yOf(l, d0)\n        const y1 = yOf(l, d1)\n        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n        const edge =\n          inward > 0\n            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5\n        )\n        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      }\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const len = stem.t1 - stem.t0\n      for (const d0 of spots(l, stem.t0, len)) {\n        const d1 = d0 + len\n        const out = stem.staff === 0 ? -1 : 1\n        const tipX = xOf(l, stem.staff, stem.tip)\n        lw = stemW\n        if (stem.chord) {\n          // One stem through the chord, from the innermost head out to the tip.\n          const inner =\n            out < 0\n              ? Math.max(...stem.notes.map((n) => n.pitch))\n              : Math.min(...stem.notes.map((n) => n.pitch))\n          const y = yOf(l, d0) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n          line(xOf(l, stem.staff, inner), y, tipX, y)\n          continue\n        }\n        for (const n of stem.notes) {\n          const d = d0 + (n.t - stem.t0)\n          const y = yOf(l, d) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n          line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n        }\n        if (stem.beams === 0) continue\n        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n        lw = sp * 0.36\n        const yA = yOf(l, d0) + side + stemW / 2\n        const yB = yOf(l, d1) + side - stemW / 2\n        const offset = sp * 0.18 * out\n        line(tipX - offset, yA, tipX - offset, yB)\n        if (stem.beams === 2) {\n          const x2 = tipX - offset - out * sp * 0.75\n          line(x2, yA, x2, yB)\n        }\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    lw = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      for (const d of spots(l, n.t)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n        const from = n.pitch < 0 ? -2 : 10\n        const step = n.pitch < 0 ? -2 : 2\n        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n          const x = xOf(l, n.staff, p)\n          line(x, y - ry * 1.7, x, y + ry * 1.7)\n        }\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        for (const d of spots(l, n.t)) {\n          const lit = litAt(d)\n          if (lit < 0.03) continue\n          const r = sp * (1.1 + lit * 1.5) * bloom\n          glow(\n            xOf(l, n.staff, n.pitch),\n            yOf(l, d),\n            r,\n            r,\n            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n          )\n        }\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      for (const d of spots(l, n.t)) {\n        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))\n        if (fog <= 0) {\n          leave()\n          continue\n        }\n        ctx!.globalAlpha = fog\n        const color = rgba(rgb, alphaAt(d))\n        ctx!.beginPath()\n        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)\n        if (n.hollow) {\n          ctx!.strokeStyle = color\n          ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n          ctx!.stroke()\n        } else {\n          ctx!.fillStyle = color\n          ctx!.fill()\n        }\n        if (n.acc !== 0) {\n          ctx!.fillStyle = color\n          ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", 0, ry + sp * 0.95)\n        }\n        leave()\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      // In slices, so the band follows the perspective across the plane.\n      const slices = view.depthless ? 1 : 24\n      const span = (view.x1 - view.x0) / slices\n      const src = glowSprite.width / slices\n      for (let i = 0; i < slices; i++) {\n        const fog = enter(view.x0 + (i + 0.5) * span, y)\n        if (fog > 0) {\n          ctx!.globalAlpha = alpha * fog\n          ctx!.drawImage(\n            glowSprite,\n            i * src,\n            0,\n            src,\n            glowSprite.height,\n            -span / 2,\n            -band,\n            span,\n            band * 2\n          )\n        }\n        leave()\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    lw = 1\n    line(view.x0, y, view.x1, y, 12)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))\n    }\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    // Erase toward the edges rather than paint over them, so the fade\n    // lands on whatever background the parent has.\n    const solid = \"rgba(0,0,0,1)\"\n    const clear = \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  interface Props extends Omit<PhosphorScoreOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    glow = DEFAULT_GLOW,\n    speed = DEFAULT_SPEED,\n    density = DEFAULT_DENSITY,\n    sway = true,\n    seed = DEFAULT_SEED,\n    rotateX = 0,\n    rotateY = 0,\n    rotateZ = 0,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: PhosphorScoreInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"phosphor-score\"\n  role=\"img\"\n  aria-label=\"Falling phosphor sheet music\"\n  class={[\n    \"absolute inset-0 overflow-hidden\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \")}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/phosphor-score.svelte"
     }
diff --git a/public/r/phosphor-score.json b/public/r/phosphor-score.json
index c1ef102..ad5f331 100644
--- a/public/r/phosphor-score.json
+++ b/public/r/phosphor-score.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/phosphor-score/phosphor-score.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.\n   * Positive tips the incoming notes away. Default `0`.\n   */\n  rotateX?: number\n  /**\n   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.\n   * Positive swings the right side away. Default `0`.\n   */\n  rotateY?: number\n  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */\n  rotateZ?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\nexport const DARK_BG = \"#050505\"\n/** Light mode is transparent — the parent `bg-background` shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\n/** `rotateX` / `rotateY` stop short of edge-on. */\nconst MAX_TILT = 70\n/** Camera distance as a multiple of the canvas' longer side. */\nconst PERSPECTIVE = 1.2\n/** Depth scale where the plane has fully faded into the distance. */\nconst FAR_SCALE = 0.12\n/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */\nconst FOG_RANGE = 0.3\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nconst tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)\nconst spinOf = (value?: number) => {\n  const deg = numberOr(value, 0, -Infinity, Infinity)\n  return ((((deg + 180) % 360) + 360) % 360) - 180\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * How the score plane sits in front of the camera. Plane coordinates are\n * the unrotated canvas pixels; it turns about the playhead, which is also\n * where perspective converges.\n */\ntype View = {\n  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */\n  m: number[]\n  ox: number\n  oy: number\n  /** Camera distance. */\n  cam: number\n  /** No depth variation across the plane, so nothing foreshortens or fogs. */\n  depthless: boolean\n  /** Bounds of the plane that are on screen and not lost in the distance. */\n  x0: number\n  x1: number\n  y0: number\n  y1: number\n}\n\nfunction makeView(\n  w: number,\n  h: number,\n  rotateX: number,\n  rotateY: number,\n  rotateZ: number\n): View {\n  const rad = Math.PI / 180\n  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]\n  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]\n  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]\n  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.\n  const m = [\n    cy * cz,\n    -cy * sz,\n    sy,\n    sx * sy * cz + cx * sz,\n    -sx * sy * sz + cx * cz,\n    -sx * cy,\n    -cx * sy * cz + sx * sz,\n    cx * sy * sz + sx * cz,\n    cx * cy,\n  ]\n  const ox = w / 2\n  const oy = h * PLAYHEAD\n  const cam = Math.max(w, h) * PERSPECTIVE\n  const view: View = {\n    m,\n    ox,\n    oy,\n    cam,\n    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,\n    x0: 0,\n    x1: w,\n    y0: 0,\n    y1: h,\n  }\n  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view\n\n  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the\n  // plane. Along a ray through screen point (u, v) the plane is hit at\n  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so\n  // \"not too far\" is a straight line on screen and clips the rectangle.\n  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]\n  const far = (u: number, v: number) =>\n    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v\n  const corners: [number, number][] = [\n    [-ox, -oy],\n    [w - ox, -oy],\n    [w - ox, h - oy],\n    [-ox, h - oy],\n  ]\n  const kept: [number, number][] = []\n  corners.forEach((a, i) => {\n    const b = corners[(i + 1) % corners.length]!\n    const fa = far(a[0], a[1])\n    const fb = far(b[0], b[1])\n    if (fa >= 0) kept.push(a)\n    if (fa >= 0 !== fb >= 0) {\n      const k = fa / (fa - fb)\n      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])\n    }\n  })\n\n  view.x0 = view.y0 = Infinity\n  view.x1 = view.y1 = -Infinity\n  for (const [u, v] of kept) {\n    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)\n    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]\n    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox\n    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy\n    view.x0 = Math.min(view.x0, px)\n    view.x1 = Math.max(view.x1, px)\n    view.y0 = Math.min(view.y0, py)\n    view.y1 = Math.max(view.y1, py)\n  }\n  return view\n}\n\n/** Fades the plane out as it recedes toward `FAR_SCALE`. */\nfunction fogOf(scale: number) {\n  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)\n  return k * k * (3 - 2 * k)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n  let view = makeView(1, 1, 0, 0, 0)\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    if (dark) {\n      ctx!.fillStyle = DARK_BG\n      ctx!.fillRect(0, 0, w, h)\n    } else {\n      ctx!.clearRect(0, 0, w, h)\n    }\n    if (w < 2 || h < 2) return\n\n    view = makeView(\n      w,\n      h,\n      tiltOf(options.rotateX),\n      tiltOf(options.rotateY),\n      spinOf(options.rotateZ)\n    )\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  /**\n   * Every beat offset at which something at time `t`, lasting `len` beats,\n   * is in view. Usually one; a steep tilt can see several loops ahead.\n   */\n  function spots(l: Layout, t: number, len = 0) {\n    const minD = (l.playY - view.y1 - l.ppb) / l.ppb\n    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb\n    const first = wrapDelta(t, beat)\n    const out: number[] = []\n    const from = Math.ceil((minD - len - first) / LOOP_BEATS)\n    const to = Math.floor((maxD - first) / LOOP_BEATS)\n    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)\n    return out\n  }\n\n  /**\n   * Plane point → screen `[x, y, scale]`, where scale is how much the\n   * perspective enlarges it there. Scale is `0` behind the camera.\n   */\n  function project(x: number, y: number): [number, number, number] {\n    const { m, ox, oy, cam } = view\n    const px = x - ox\n    const py = y - oy\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return [0, 0, 0]\n    const s = cam / (cam - z)\n    return [\n      ox + (m[0]! * px + m[1]! * py) * s,\n      oy + (m[3]! * px + m[4]! * py) * s,\n      s,\n    ]\n  }\n\n  /**\n   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or\n   * glow drawn around the origin tilts and foreshortens with the score.\n   * Returns the distance fog there; `leave()` restores screen space.\n   */\n  function enter(x: number, y: number) {\n    const { m, ox, oy, cam } = view\n    const { dpr } = size\n    const px = x - ox\n    const py = y - oy\n    const qx = m[0]! * px + m[1]! * py\n    const qy = m[3]! * px + m[4]! * py\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return 0\n    const s = cam / (cam - z)\n    // Jacobian of the projection: how a unit step along the plane lands on screen.\n    const k = (s * s) / cam\n    ctx!.setTransform(\n      dpr * (s * m[0]! + qx * k * m[6]!),\n      dpr * (s * m[3]! + qy * k * m[6]!),\n      dpr * (s * m[1]! + qx * k * m[7]!),\n      dpr * (s * m[4]! + qy * k * m[7]!),\n      dpr * (ox + qx * s),\n      dpr * (oy + qy * s)\n    )\n    return fogOf(s)\n  }\n\n  function leave() {\n    const { dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalAlpha = 1\n  }\n\n  /** Plane stroke width; `line` and `polyline` scale it with depth. */\n  let lw = 1\n\n  /**\n   * A straight stroke on the plane. Long ones pass `segments` so the fog\n   * can thin them as they recede.\n   */\n  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {\n    const n = view.depthless ? 1 : segments\n    for (let i = 0; i < n; i++) {\n      const a = i / n\n      const b = (i + 1) / n\n      polyline([\n        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],\n        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],\n      ])\n    }\n  }\n\n  function polyline(points: [number, number][]) {\n    let scale = 0\n    ctx!.beginPath()\n    for (const [i, [x, y]] of points.entries()) {\n      const p = project(x, y)\n      if (p[2] <= 0) return\n      scale += p[2]\n      if (i === 0) ctx!.moveTo(p[0], p[1])\n      else ctx!.lineTo(p[0], p[1])\n    }\n    scale /= points.length\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** A quadratic curve on the plane; its control point is projected too. */\n  function curve(\n    x0: number,\n    y0: number,\n    cx: number,\n    cy: number,\n    x1: number,\n    y1: number\n  ) {\n    const a = project(x0, y0)\n    const c = project(cx, cy)\n    const b = project(x1, y1)\n    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return\n    const scale = (a[2] + b[2]) / 2\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.beginPath()\n    ctx!.moveTo(a[0], a[1])\n    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */\n  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {\n    const fog = enter(x, y)\n    if (fog > 0) {\n      ctx!.globalAlpha = alpha * fog\n      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)\n    }\n    leave()\n  }\n\n  function drawStaves(l: Layout) {\n    ctx!.lineCap = \"butt\"\n    lw = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, view.y0, x, view.y1, 16)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      for (const d of spots(l, bar)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n      }\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      for (const d of spots(l, mark.t)) {\n        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)\n        if (fog > 0) {\n          ctx!.globalAlpha = fog\n          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n          ctx!.fillText(mark.text, 0, 0)\n        }\n        leave()\n      }\n    }\n    lw = 1\n    for (const pin of s.hairpins) {\n      for (const d0 of spots(l, pin.t, pin.dur)) {\n        const d1 = d0 + pin.dur\n        const narrow = pin.opening ? d0 : d1\n        const wide = pin.opening ? d1 : d0\n        const half = sp * 0.9\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n        )\n        polyline([\n          [l.cx - half, yOf(l, wide)],\n          [l.cx, yOf(l, narrow)],\n          [l.cx + half, yOf(l, wide)],\n        ])\n      }\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    lw = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const len = slur.last.t - slur.first.t\n      for (const d0 of spots(l, slur.first.t, len)) {\n        const d1 = d0 + len\n        const inward = slur.staff === 0 ? 1 : -1\n        const y0 = yOf(l, d0)\n        const y1 = yOf(l, d1)\n        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n        const edge =\n          inward > 0\n            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5\n        )\n        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      }\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const len = stem.t1 - stem.t0\n      for (const d0 of spots(l, stem.t0, len)) {\n        const d1 = d0 + len\n        const out = stem.staff === 0 ? -1 : 1\n        const tipX = xOf(l, stem.staff, stem.tip)\n        lw = stemW\n        if (stem.chord) {\n          // One stem through the chord, from the innermost head out to the tip.\n          const inner =\n            out < 0\n              ? Math.max(...stem.notes.map((n) => n.pitch))\n              : Math.min(...stem.notes.map((n) => n.pitch))\n          const y = yOf(l, d0) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n          line(xOf(l, stem.staff, inner), y, tipX, y)\n          continue\n        }\n        for (const n of stem.notes) {\n          const d = d0 + (n.t - stem.t0)\n          const y = yOf(l, d) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n          line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n        }\n        if (stem.beams === 0) continue\n        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n        lw = sp * 0.36\n        const yA = yOf(l, d0) + side + stemW / 2\n        const yB = yOf(l, d1) + side - stemW / 2\n        const offset = sp * 0.18 * out\n        line(tipX - offset, yA, tipX - offset, yB)\n        if (stem.beams === 2) {\n          const x2 = tipX - offset - out * sp * 0.75\n          line(x2, yA, x2, yB)\n        }\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    lw = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      for (const d of spots(l, n.t)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n        const from = n.pitch < 0 ? -2 : 10\n        const step = n.pitch < 0 ? -2 : 2\n        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n          const x = xOf(l, n.staff, p)\n          line(x, y - ry * 1.7, x, y + ry * 1.7)\n        }\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        for (const d of spots(l, n.t)) {\n          const lit = litAt(d)\n          if (lit < 0.03) continue\n          const r = sp * (1.1 + lit * 1.5) * bloom\n          glow(\n            xOf(l, n.staff, n.pitch),\n            yOf(l, d),\n            r,\n            r,\n            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n          )\n        }\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      for (const d of spots(l, n.t)) {\n        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))\n        if (fog <= 0) {\n          leave()\n          continue\n        }\n        ctx!.globalAlpha = fog\n        const color = rgba(rgb, alphaAt(d))\n        ctx!.beginPath()\n        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)\n        if (n.hollow) {\n          ctx!.strokeStyle = color\n          ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n          ctx!.stroke()\n        } else {\n          ctx!.fillStyle = color\n          ctx!.fill()\n        }\n        if (n.acc !== 0) {\n          ctx!.fillStyle = color\n          ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", 0, ry + sp * 0.95)\n        }\n        leave()\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      // In slices, so the band follows the perspective across the plane.\n      const slices = view.depthless ? 1 : 24\n      const span = (view.x1 - view.x0) / slices\n      const src = glowSprite.width / slices\n      for (let i = 0; i < slices; i++) {\n        const fog = enter(view.x0 + (i + 0.5) * span, y)\n        if (fog > 0) {\n          ctx!.globalAlpha = alpha * fog\n          ctx!.drawImage(\n            glowSprite,\n            i * src,\n            0,\n            src,\n            glowSprite.height,\n            -span / 2,\n            -band,\n            span,\n            band * 2\n          )\n        }\n        leave()\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    lw = 1\n    line(view.x0, y, view.x1, y, 12)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))\n    }\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    const solid = dark ? \"rgba(5,5,5,1)\" : \"rgba(0,0,0,1)\"\n    const clear = dark ? \"rgba(5,5,5,0)\" : \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = dark ? \"source-over\" : \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type PhosphorScoreProps = Omit<PhosphorScoreOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Background before the first frame, so dark mode never flashes light.\n * `#050505` is `DARK_BG`; Tailwind needs the literal.\n */\nconst SURFACE: Record<PhosphorScoreTheme, string> = {\n  auto: \"bg-background dark:bg-[#050505]\",\n  dark: \"bg-[#050505]\",\n  light: \"bg-background\",\n}\n\n/**\n * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,\n * each note blooms and flares as it plays, then fades with an afterglow.\n * Follows light and dark.\n */\nexport function PhosphorScore({\n  className,\n  color,\n  glow = DEFAULT_GLOW,\n  speed = DEFAULT_SPEED,\n  density = DEFAULT_DENSITY,\n  sway = true,\n  seed = DEFAULT_SEED,\n  rotateX = 0,\n  rotateY = 0,\n  rotateZ = 0,\n  theme = \"auto\",\n}: PhosphorScoreProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<PhosphorScoreInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n  }, [\n    color,\n    glow,\n    speed,\n    density,\n    sway,\n    seed,\n    rotateX,\n    rotateY,\n    rotateZ,\n    theme,\n  ])\n\n  return (\n    <div\n      data-slot=\"phosphor-score\"\n      role=\"img\"\n      aria-label=\"Falling phosphor sheet music\"\n      className={cn(\n        \"absolute inset-0 overflow-hidden\",\n        SURFACE[theme] ?? SURFACE.auto,\n        className\n      )}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PhosphorScoreTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type PhosphorScoreOptions = {\n  /**\n   * Ink / phosphor color, any CSS color. Omit to follow `theme`\n   * (`LIGHT_COLOR` / `DARK_COLOR`).\n   */\n  color?: string\n  /**\n   * Bloom amount, 0–100. Default `50`. Scales the playhead halo and the\n   * flare a note leaves as it plays.\n   */\n  glow?: number\n  /** Scroll speed in beats per second. Default `1.35`. */\n  speed?: number\n  /** How packed the notation is, `0.35`–`1.85`. Default `1`. */\n  density?: number\n  /** Slow camera drift. Default `true`. */\n  sway?: boolean\n  /** Deterministic score. Default `23`. */\n  seed?: number\n  /**\n   * Tilt the plane about its horizontal axis, in degrees, `-70`–`70`.\n   * Positive tips the incoming notes away. Default `0`.\n   */\n  rotateX?: number\n  /**\n   * Turn the plane about its vertical axis, in degrees, `-70`–`70`.\n   * Positive swings the right side away. Default `0`.\n   */\n  rotateY?: number\n  /** Spin the plane in place, in degrees. Positive is clockwise. Default `0`. */\n  rotateZ?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: PhosphorScoreTheme\n  /** Fires whenever resolved dark mode changes. */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type PhosphorScoreInstance = {\n  setOptions: (options: Partial<PhosphorScoreOptions>) => void\n  destroy: () => void\n}\n\n/** Phosphor on black */\nexport const DARK_COLOR = \"#4DFF6A\"\n/** Forest ink on the page background */\nexport const LIGHT_COLOR = \"#147A3A\"\n/** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */\nexport const DEFAULT_COLOR = DARK_COLOR\n/** Transparent in both themes — the parent's background shows through. */\nexport const DARK_BG = \"transparent\"\n/** Transparent in both themes — the parent's background shows through. */\nexport const LIGHT_BG = \"transparent\"\nexport const DEFAULT_GLOW = 50\nexport const DEFAULT_SPEED = 1.35\nexport const DEFAULT_DENSITY = 1\nexport const DEFAULT_SEED = 23\n\n/** Length of the generated score; it loops seamlessly. */\nconst LOOP_BEATS = 48\n/** Nothing is written in the last half beat, so the loop seam never collides. */\nconst LOOP_END = LOOP_BEATS - 0.5\n/** Stem length in half-spaces (3.5 staff spaces). */\nconst STEM = 7\n/** Playhead height as a share of the canvas; the rest below is afterglow. */\nconst PLAYHEAD = 0.7\n/** Share of the height faded out at the top and bottom edges. */\nconst EDGE_FADE = 0.16\n/** Seconds to crossfade when `seed` or `density` regenerates the score. */\nconst REBUILD_FADE = 0.35\n/** Seconds a flare lasts after its note plays. */\nconst FLARE_LIFE = 0.5\nconst MAX_FLARES = 48\n/** `rotateX` / `rotateY` stop short of edge-on. */\nconst MAX_TILT = 70\n/** Camera distance as a multiple of the canvas' longer side. */\nconst PERSPECTIVE = 1.2\n/** Depth scale where the plane has fully faded into the distance. */\nconst FAR_SCALE = 0.12\n/** Depth-scale range over which the plane fades in from `FAR_SCALE`. */\nconst FOG_RANGE = 0.3\nconst DYNAMICS = [\"pp\", \"p\", \"mp\", \"mf\", \"f\", \"ff\"] as const\n\ntype Staff = 0 | 1\ntype Rgb = [number, number, number]\n\ntype Note = {\n  t: number\n  /** Staff position in half-spaces; the five lines sit on 0, 2, 4, 6, 8. */\n  pitch: number\n  staff: Staff\n  /** Half notes and longer draw hollow heads. */\n  hollow: boolean\n  acc: -1 | 0 | 1\n}\n\n/**\n * A stem carrier: a beamed group, a chord, or a lone note. Stems point\n * away from the middle of the system, so beams sit on the outer side and\n * dynamics have the space between the staves to themselves.\n */\ntype Stem = {\n  staff: Staff\n  notes: Note[]\n  t0: number\n  t1: number\n  /** Where the stems end (and the beam runs), in half-spaces. */\n  tip: number\n  /** 0 for chords and lone notes, 1 for eighths, 2 for sixteenths. */\n  beams: 0 | 1 | 2\n  chord: boolean\n}\n\ntype Mark = { t: number; text: string }\ntype Hairpin = { t: number; dur: number; opening: boolean }\ntype Slur = { staff: Staff; first: Note; last: Note }\n\ntype Score = {\n  notes: Note[]\n  stems: Stem[]\n  marks: Mark[]\n  hairpins: Hairpin[]\n  slurs: Slur[]\n}\n\ntype Dust = { x: number; y: number; z: number; s: number; a: number }\ntype Flare = { staff: Staff; pitch: number; age: number }\n\nfunction mulberry32(seed: number) {\n  let a = seed >>> 0\n  return () => {\n    a |= 0\n    a = (a + 0x6d2b79f5) | 0\n    let t = Math.imul(a ^ (a >>> 15), 1 | a)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\n/** Signed beats from `now` to `t`, taking the shorter way round the loop. */\nfunction wrapDelta(t: number, now: number) {\n  const d = t - now\n  return (\n    ((((d + LOOP_BEATS / 2) % LOOP_BEATS) + LOOP_BEATS) % LOOP_BEATS) -\n    LOOP_BEATS / 2\n  )\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\nconst glowOf = (value?: number) => numberOr(value, DEFAULT_GLOW, 0, 100)\nconst speedOf = (value?: number) => numberOr(value, DEFAULT_SPEED, 0.15, 4)\nconst densityOf = (value?: number) =>\n  numberOr(value, DEFAULT_DENSITY, 0.35, 1.85)\nconst seedOf = (value?: number) =>\n  Math.round(numberOr(value, DEFAULT_SEED, 0, 2 ** 32 - 1)) >>> 0\n\nconst tiltOf = (value?: number) => numberOr(value, 0, -MAX_TILT, MAX_TILT)\nconst spinOf = (value?: number) => {\n  const deg = numberOr(value, 0, -Infinity, Infinity)\n  return ((((deg + 180) % 360) + 360) % 360) - 180\n}\n\nfunction themeOf(value?: PhosphorScoreTheme): PhosphorScoreTheme {\n  return value === \"light\" || value === \"dark\" || value === \"auto\"\n    ? value\n    : \"auto\"\n}\n\nfunction optionalColor(value?: string) {\n  const next = value?.trim()\n  return next ? next : undefined\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: PhosphorScoreTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nexport function resolveColor(color: string | undefined, dark: boolean) {\n  const custom = optionalColor(color)\n  if (custom) return custom\n  return dark ? DARK_COLOR : LIGHT_COLOR\n}\n\nexport function resolveBg(dark: boolean) {\n  return dark ? DARK_BG : LIGHT_BG\n}\n\n/** Any CSS color → rgb, using the canvas' own parser. */\nfunction parseColor(\n  ctx: CanvasRenderingContext2D,\n  input: string,\n  fallback: string\n): Rgb {\n  ctx.fillStyle = fallback\n  ctx.fillStyle = input\n  const value = String(ctx.fillStyle)\n  if (value.startsWith(\"#\") && value.length === 7) {\n    return [\n      parseInt(value.slice(1, 3), 16),\n      parseInt(value.slice(3, 5), 16),\n      parseInt(value.slice(5, 7), 16),\n    ]\n  }\n  const parts = value.match(/[\\d.]+/g)?.map(Number) ?? []\n  return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0]\n}\n\nfunction rgba(rgb: Rgb, a: number) {\n  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${clamp(a, 0, 1)})`\n}\n\nfunction generateScore(seed: number, density: number): Score {\n  const rng = mulberry32(seed)\n  const notes: Note[] = []\n  const stems: Stem[] = []\n  const marks: Mark[] = []\n  const hairpins: Hairpin[] = []\n  const slurs: Slur[] = []\n\n  const note = (t: number, pitch: number, staff: Staff, hollow = false) => {\n    const n: Note = {\n      t,\n      pitch: clamp(Math.round(pitch), -3, 11),\n      staff,\n      hollow,\n      acc: rng() < 0.08 ? (rng() < 0.5 ? -1 : 1) : 0,\n    }\n    notes.push(n)\n    return n\n  }\n\n  const addStem = (\n    staff: Staff,\n    list: Note[],\n    beams: Stem[\"beams\"],\n    chord = false\n  ) => {\n    const pitches = list.map((n) => n.pitch)\n    const tip =\n      staff === 0 ? Math.min(...pitches) - STEM : Math.max(...pitches) + STEM\n    stems.push({\n      staff,\n      notes: list,\n      t0: list[0]!.t,\n      t1: list[list.length - 1]!.t,\n      tip,\n      beams: list.length > 1 && !chord ? beams : 0,\n      chord,\n    })\n  }\n\n  const run = (\n    staff: Staff,\n    start: number,\n    pitch: number,\n    count: number,\n    step: number\n  ) => {\n    let dir = rng() < 0.5 ? 1 : -1\n    let p = pitch\n    const list: Note[] = []\n    for (let i = 0; i < count; i++) {\n      if (i === 0 || rng() > 0.12 / density)\n        list.push(note(start + i * step, p, staff))\n      p += dir * (rng() < 0.18 ? 2 : 1)\n      if (p >= 10 || p <= -2) {\n        dir = -dir\n        p = clamp(p, -2, 10)\n      }\n    }\n    // A run thinned down to one note is drawn as a lone quarter.\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n    if (list.length >= 4 && rng() < 0.45) {\n      slurs.push({ staff, first: list[0]!, last: list[list.length - 1]! })\n    }\n  }\n\n  const arpeggio = (\n    staff: Staff,\n    start: number,\n    root: number,\n    step: number\n  ) => {\n    const shape = [0, 2, 4, 7, 4, 2, 0, -1]\n    const list = shape.map((offset, i) =>\n      note(start + i * step, root + offset, staff)\n    )\n    addStem(staff, list, step <= 0.25 ? 2 : 1)\n  }\n\n  const chord = (staff: Staff, t: number, root: number, hollow: boolean) => {\n    const list = [\n      note(t, root, staff, hollow),\n      note(t, root + 2, staff, hollow),\n    ]\n    if (rng() < 0.7) list.push(note(t, root + 4, staff, hollow))\n    addStem(staff, list, 0, true)\n  }\n\n  let t = 0\n  while (t < LOOP_END) {\n    const room = LOOP_END - t\n    const kind = rng()\n    const lead: Staff = rng() < 0.55 ? 0 : 1\n    const other: Staff = lead === 0 ? 1 : 0\n    const phraseStart = t\n\n    if (kind < 0.5) {\n      const count = rng() < 0.4 ? 8 : rng() < 0.55 ? 6 : 4\n      const step = rng() < 0.35 * density ? 0.25 : 0.5\n      const length = count * step\n      if (length > room) break\n      run(lead, t, Math.floor(rng() * 7) + 1, count, step)\n      if (rng() < 0.55 * density) {\n        chord(other, t, 1 + Math.floor(rng() * 4), length >= 2 && rng() < 0.5)\n      }\n      t += length\n    } else if (kind < 0.72) {\n      if (room < 2) break\n      arpeggio(lead, t, 1 + Math.floor(rng() * 4), 0.25)\n      if (rng() < 0.7 * density)\n        run(other, t, Math.floor(rng() * 4) + 1, 4, 0.5)\n      t += 2\n    } else if (kind < 0.88) {\n      const hollow = rng() < 0.45\n      const length = hollow ? 2 : 1\n      if (length > room) break\n      chord(0, t, 2 + Math.floor(rng() * 4), hollow)\n      chord(1, t, Math.floor(rng() * 4), hollow)\n      t += length\n    } else {\n      // A rest. Sparser scores rest longer.\n      t += density < 0.8 ? 1 : 0.5\n      continue\n    }\n\n    if (rng() < 0.2)\n      marks.push({\n        t: phraseStart,\n        text: DYNAMICS[Math.floor(rng() * DYNAMICS.length)]!,\n      })\n    if (rng() < 0.14) {\n      const dur = Math.min(2 + Math.floor(rng() * 3), LOOP_END - phraseStart)\n      if (dur >= 1) hairpins.push({ t: phraseStart, dur, opening: rng() < 0.5 })\n    }\n  }\n\n  return { notes, stems, marks, hairpins, slurs }\n}\n\nfunction makeDust(seed: number): Dust[] {\n  const rng = mulberry32(seed ^ 0x9e3779b9)\n  return Array.from({ length: 90 }, () => ({\n    x: rng(),\n    y: rng(),\n    z: rng(),\n    s: 0.4 + rng() * 1.4,\n    a: 0.08 + rng() * 0.22,\n  }))\n}\n\n/** A soft round glow in `rgb`, drawn once and stamped with `drawImage`. */\nfunction makeGlowSprite(rgb: Rgb) {\n  const size = 64\n  const sprite = document.createElement(\"canvas\")\n  sprite.width = size\n  sprite.height = size\n  const g = sprite.getContext(\"2d\")\n  if (!g) return sprite\n  const grad = g.createRadialGradient(\n    size / 2,\n    size / 2,\n    0,\n    size / 2,\n    size / 2,\n    size / 2\n  )\n  grad.addColorStop(0, rgba(rgb, 1))\n  grad.addColorStop(0.25, rgba(rgb, 0.45))\n  grad.addColorStop(0.6, rgba(rgb, 0.1))\n  grad.addColorStop(1, rgba(rgb, 0))\n  g.fillStyle = grad\n  g.fillRect(0, 0, size, size)\n  return sprite\n}\n\n/** Brightness at the playhead: ramps in just before, decays after (phosphor persistence). */\nfunction litAt(d: number) {\n  if (d > 0.3) return 0\n  if (d >= 0) {\n    const k = 1 - d / 0.3\n    return k * k\n  }\n  return Math.exp(d * 2.4)\n}\n\n/**\n * How the score plane sits in front of the camera. Plane coordinates are\n * the unrotated canvas pixels; it turns about the playhead, which is also\n * where perspective converges.\n */\ntype View = {\n  /** `rotateX · rotateY · rotateZ`, row-major, CSS axes (y down, z toward you). */\n  m: number[]\n  ox: number\n  oy: number\n  /** Camera distance. */\n  cam: number\n  /** No depth variation across the plane, so nothing foreshortens or fogs. */\n  depthless: boolean\n  /** Bounds of the plane that are on screen and not lost in the distance. */\n  x0: number\n  x1: number\n  y0: number\n  y1: number\n}\n\nfunction makeView(\n  w: number,\n  h: number,\n  rotateX: number,\n  rotateY: number,\n  rotateZ: number\n): View {\n  const rad = Math.PI / 180\n  const [cx, sx] = [Math.cos(rotateX * rad), Math.sin(rotateX * rad)]\n  const [cy, sy] = [Math.cos(rotateY * rad), Math.sin(rotateY * rad)]\n  const [cz, sz] = [Math.cos(rotateZ * rad), Math.sin(rotateZ * rad)]\n  // Rx · Ry · Rz, the order CSS applies `rotateX() rotateY() rotateZ()`.\n  const m = [\n    cy * cz,\n    -cy * sz,\n    sy,\n    sx * sy * cz + cx * sz,\n    -sx * sy * sz + cx * cz,\n    -sx * cy,\n    -cx * sy * cz + sx * sz,\n    cx * sy * sz + sx * cz,\n    cx * cy,\n  ]\n  const ox = w / 2\n  const oy = h * PLAYHEAD\n  const cam = Math.max(w, h) * PERSPECTIVE\n  const view: View = {\n    m,\n    ox,\n    oy,\n    cam,\n    depthless: Math.abs(m[6]!) + Math.abs(m[7]!) < 1e-6,\n    x0: 0,\n    x1: w,\n    y0: 0,\n    y1: h,\n  }\n  if (rotateX === 0 && rotateY === 0 && rotateZ === 0) return view\n\n  // The screen, less whatever lies beyond FAR_SCALE, traced back onto the\n  // plane. Along a ray through screen point (u, v) the plane is hit at\n  // t = m22·cam / (m22·cam − m02·u − m12·v), with depth scale 1 / t — so\n  // \"not too far\" is a straight line on screen and clips the rectangle.\n  const [m02, m12, m22] = [m[2]!, m[5]!, m[8]!]\n  const far = (u: number, v: number) =>\n    m22 * cam * (1 - FAR_SCALE) - m02 * u - m12 * v\n  const corners: [number, number][] = [\n    [-ox, -oy],\n    [w - ox, -oy],\n    [w - ox, h - oy],\n    [-ox, h - oy],\n  ]\n  const kept: [number, number][] = []\n  corners.forEach((a, i) => {\n    const b = corners[(i + 1) % corners.length]!\n    const fa = far(a[0], a[1])\n    const fb = far(b[0], b[1])\n    if (fa >= 0) kept.push(a)\n    if (fa >= 0 !== fb >= 0) {\n      const k = fa / (fa - fb)\n      kept.push([a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k])\n    }\n  })\n\n  view.x0 = view.y0 = Infinity\n  view.x1 = view.y1 = -Infinity\n  for (const [u, v] of kept) {\n    const t = (m22 * cam) / (m22 * cam - m02 * u - m12 * v)\n    const [wx, wy, wz] = [t * u, t * v, cam - t * cam]\n    const px = m[0]! * wx + m[3]! * wy + m[6]! * wz + ox\n    const py = m[1]! * wx + m[4]! * wy + m[7]! * wz + oy\n    view.x0 = Math.min(view.x0, px)\n    view.x1 = Math.max(view.x1, px)\n    view.y0 = Math.min(view.y0, py)\n    view.y1 = Math.max(view.y1, py)\n  }\n  return view\n}\n\n/** Fades the plane out as it recedes toward `FAR_SCALE`. */\nfunction fogOf(scale: number) {\n  const k = clamp((scale - FAR_SCALE) / FOG_RANGE, 0, 1)\n  return k * k * (3 - 2 * k)\n}\n\n/**\n * Vertical phosphor sheet music: a grand staff scrolls down toward a\n * playhead, each note blooms and flares as it plays, then fades with a\n * phosphor afterglow. Canvas 2D; pauses off-screen and in hidden tabs, and\n * holds a still frame under `prefers-reduced-motion`.\n */\nexport function createPhosphorScore(\n  canvas: HTMLCanvasElement,\n  initial: PhosphorScoreOptions = {}\n): PhosphorScoreInstance | null {\n  let options: PhosphorScoreOptions = {\n    glow: DEFAULT_GLOW,\n    speed: DEFAULT_SPEED,\n    density: DEFAULT_DENSITY,\n    seed: DEFAULT_SEED,\n    ...initial,\n    sway: initial.sway ?? true,\n    theme: themeOf(initial.theme),\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true })\n  if (!ctx) return null\n\n  let score = generateScore(seedOf(options.seed), densityOf(options.density))\n  let previous: Score | null = null\n  let rebuildAge = REBUILD_FADE\n  let dust = makeDust(seedOf(options.seed))\n\n  let dark = resolveDark(themeOf(options.theme))\n  let rgb: Rgb = [0, 0, 0]\n  let glowSprite = document.createElement(\"canvas\")\n  const recolor = () => {\n    rgb = parseColor(\n      ctx,\n      resolveColor(options.color, dark),\n      dark ? DARK_COLOR : LIGHT_COLOR\n    )\n    glowSprite = makeGlowSprite(rgb)\n  }\n  recolor()\n  options.onThemeChange?.(dark)\n\n  const flares: Flare[] = []\n  const size = { w: 0, h: 0, dpr: 1 }\n  let reduce = false\n  let onScreen = true\n  let running = true\n  let raf = 0\n  let lastFrame = 0\n  // Start a few bars in, so the first frame already has notes at the playhead.\n  let beat = 8\n  let clock = 0\n  let view = makeView(1, 1, 0, 0, 0)\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w === size.w && h === size.h && dpr === size.dpr) return\n    size.w = w\n    size.h = h\n    size.dpr = dpr\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    wake()\n  }\n\n  const shouldAnimate = () =>\n    running && onScreen && !reduce && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (!running || raf) return\n    lastFrame = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  const syncTheme = () => {\n    const next = resolveDark(themeOf(options.theme))\n    if (next === dark) return\n    dark = next\n    recolor()\n    options.onThemeChange?.(dark)\n    wake()\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    wake()\n  }\n  reduce = mqReduce.matches\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  function tick(now: number) {\n    raf = 0\n    if (!running) return\n    if (Math.min(window.devicePixelRatio || 1, 2) !== size.dpr) resize()\n\n    const dt = Math.min(0.05, Math.max(0, (now - lastFrame) / 1000))\n    lastFrame = now\n    const animate = shouldAnimate()\n    const before = beat\n    if (animate) {\n      clock += dt\n      beat = (beat + dt * speedOf(options.speed)) % LOOP_BEATS\n      rebuildAge += dt\n      spawnFlares(before, beat)\n    } else {\n      rebuildAge = REBUILD_FADE\n      flares.length = 0\n    }\n    for (let i = flares.length - 1; i >= 0; i--) {\n      flares[i]!.age += dt\n      if (flares[i]!.age >= FLARE_LIFE) flares.splice(i, 1)\n    }\n\n    draw()\n    if (animate) raf = requestAnimationFrame(tick)\n  }\n\n  /** Every note whose time was crossed since the last frame flares once — no frame can skip one. */\n  function spawnFlares(from: number, to: number) {\n    const span = wrapDelta(to, from)\n    if (span <= 0) return\n    for (const n of score.notes) {\n      const d = wrapDelta(n.t, from)\n      if (d > 0 && d <= span) {\n        if (flares.length >= MAX_FLARES) flares.shift()\n        flares.push({ staff: n.staff, pitch: n.pitch, age: 0 })\n      }\n    }\n  }\n\n  function draw() {\n    const { w, h, dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalCompositeOperation = \"source-over\"\n    ctx!.globalAlpha = 1\n    ctx!.clearRect(0, 0, w, h)\n    if (w < 2 || h < 2) return\n\n    view = makeView(\n      w,\n      h,\n      tiltOf(options.rotateX),\n      tiltOf(options.rotateY),\n      spinOf(options.rotateZ)\n    )\n    const swayOn = options.sway !== false && !reduce\n    const cam = {\n      x: swayOn ? Math.cos(clock * 0.23) * 10 : 0,\n      y: swayOn ? Math.sin(clock * 0.31) * 8 : 0,\n    }\n    const sp = clamp(Math.min(w, h) * 0.021, 5, 11)\n    const layout = {\n      sp,\n      gap: clamp(w * 0.16, sp * 6.5, sp * 12),\n      ppb: clamp(h * 0.15, sp * 5.2, sp * 11),\n      cx: w / 2 + cam.x,\n      playY: h * PLAYHEAD + cam.y,\n    }\n    const bloom = glowOf(options.glow) / 50\n\n    // Dust drifts in screen space, beneath everything.\n    for (const d of dust) {\n      const px = (d.x + clock * 0.01 * d.z) % 1\n      const py = (d.y + beat * 0.004 * (0.3 + d.z)) % 1\n      ctx!.fillStyle = rgba(rgb, dark ? d.a : d.a * 0.35)\n      ctx!.fillRect(px * w, py * h, d.s, d.s)\n    }\n\n    drawStaves(layout)\n\n    const fade = previous ? clamp(rebuildAge / REBUILD_FADE, 0, 1) : 1\n    if (previous && fade >= 1) previous = null\n    if (previous) drawScore(previous, layout, 1 - fade, 0)\n    drawScore(score, layout, fade, bloom)\n\n    drawPlayhead(layout, bloom)\n    drawFlares(layout, bloom)\n    drawEdgeFade(w, h)\n  }\n\n  type Layout = {\n    sp: number\n    gap: number\n    ppb: number\n    cx: number\n    playY: number\n  }\n\n  const xOf = (l: Layout, staff: Staff, pitch: number) =>\n    l.cx + (staff === 0 ? -l.gap : l.gap) + (pitch - 4) * (l.sp / 2)\n  const yOf = (l: Layout, d: number) => l.playY - d * l.ppb\n\n  /**\n   * Every beat offset at which something at time `t`, lasting `len` beats,\n   * is in view. Usually one; a steep tilt can see several loops ahead.\n   */\n  function spots(l: Layout, t: number, len = 0) {\n    const minD = (l.playY - view.y1 - l.ppb) / l.ppb\n    const maxD = (l.playY - view.y0 + l.ppb) / l.ppb\n    const first = wrapDelta(t, beat)\n    const out: number[] = []\n    const from = Math.ceil((minD - len - first) / LOOP_BEATS)\n    const to = Math.floor((maxD - first) / LOOP_BEATS)\n    for (let k = from; k <= to; k++) out.push(first + k * LOOP_BEATS)\n    return out\n  }\n\n  /**\n   * Plane point → screen `[x, y, scale]`, where scale is how much the\n   * perspective enlarges it there. Scale is `0` behind the camera.\n   */\n  function project(x: number, y: number): [number, number, number] {\n    const { m, ox, oy, cam } = view\n    const px = x - ox\n    const py = y - oy\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return [0, 0, 0]\n    const s = cam / (cam - z)\n    return [\n      ox + (m[0]! * px + m[1]! * py) * s,\n      oy + (m[3]! * px + m[4]! * py) * s,\n      s,\n    ]\n  }\n\n  /**\n   * Moves the canvas into the plane at `(x, y)`, so a notehead, glyph or\n   * glow drawn around the origin tilts and foreshortens with the score.\n   * Returns the distance fog there; `leave()` restores screen space.\n   */\n  function enter(x: number, y: number) {\n    const { m, ox, oy, cam } = view\n    const { dpr } = size\n    const px = x - ox\n    const py = y - oy\n    const qx = m[0]! * px + m[1]! * py\n    const qy = m[3]! * px + m[4]! * py\n    const z = m[6]! * px + m[7]! * py\n    if (cam - z < cam * 0.02) return 0\n    const s = cam / (cam - z)\n    // Jacobian of the projection: how a unit step along the plane lands on screen.\n    const k = (s * s) / cam\n    ctx!.setTransform(\n      dpr * (s * m[0]! + qx * k * m[6]!),\n      dpr * (s * m[3]! + qy * k * m[6]!),\n      dpr * (s * m[1]! + qx * k * m[7]!),\n      dpr * (s * m[4]! + qy * k * m[7]!),\n      dpr * (ox + qx * s),\n      dpr * (oy + qy * s)\n    )\n    return fogOf(s)\n  }\n\n  function leave() {\n    const { dpr } = size\n    ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx!.globalAlpha = 1\n  }\n\n  /** Plane stroke width; `line` and `polyline` scale it with depth. */\n  let lw = 1\n\n  /**\n   * A straight stroke on the plane. Long ones pass `segments` so the fog\n   * can thin them as they recede.\n   */\n  function line(x0: number, y0: number, x1: number, y1: number, segments = 1) {\n    const n = view.depthless ? 1 : segments\n    for (let i = 0; i < n; i++) {\n      const a = i / n\n      const b = (i + 1) / n\n      polyline([\n        [x0 + (x1 - x0) * a, y0 + (y1 - y0) * a],\n        [x0 + (x1 - x0) * b, y0 + (y1 - y0) * b],\n      ])\n    }\n  }\n\n  function polyline(points: [number, number][]) {\n    let scale = 0\n    ctx!.beginPath()\n    for (const [i, [x, y]] of points.entries()) {\n      const p = project(x, y)\n      if (p[2] <= 0) return\n      scale += p[2]\n      if (i === 0) ctx!.moveTo(p[0], p[1])\n      else ctx!.lineTo(p[0], p[1])\n    }\n    scale /= points.length\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** A quadratic curve on the plane; its control point is projected too. */\n  function curve(\n    x0: number,\n    y0: number,\n    cx: number,\n    cy: number,\n    x1: number,\n    y1: number\n  ) {\n    const a = project(x0, y0)\n    const c = project(cx, cy)\n    const b = project(x1, y1)\n    if (a[2] <= 0 || b[2] <= 0 || c[2] <= 0) return\n    const scale = (a[2] + b[2]) / 2\n    const fog = fogOf(scale)\n    if (fog <= 0) return\n    ctx!.globalAlpha = fog\n    ctx!.lineWidth = lw * scale\n    ctx!.beginPath()\n    ctx!.moveTo(a[0], a[1])\n    ctx!.quadraticCurveTo(c[0], c[1], b[0], b[1])\n    ctx!.stroke()\n    ctx!.globalAlpha = 1\n  }\n\n  /** The glow sprite, stretched to `rx` × `ry` around `(x, y)` on the plane. */\n  function glow(x: number, y: number, rx: number, ry: number, alpha: number) {\n    const fog = enter(x, y)\n    if (fog > 0) {\n      ctx!.globalAlpha = alpha * fog\n      ctx!.drawImage(glowSprite, -rx, -ry, rx * 2, ry * 2)\n    }\n    leave()\n  }\n\n  function drawStaves(l: Layout) {\n    ctx!.lineCap = \"butt\"\n    lw = 1\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.2 : 0.24)\n    for (const staff of [0, 1] as const) {\n      for (let p = 0; p <= 8; p += 2) {\n        const x = Math.round(xOf(l, staff, p)) + 0.5\n        line(x, view.y0, x, view.y1, 16)\n      }\n    }\n    // Bar lines every four beats, through both staves like a grand staff.\n    for (let bar = 0; bar < LOOP_BEATS; bar += 4) {\n      for (const d of spots(l, bar)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, (dark ? 0.16 : 0.2) + litAt(d) * 0.3)\n        line(xOf(l, 0, 0), y, xOf(l, 1, 8), y)\n      }\n    }\n  }\n\n  function drawScore(s: Score, l: Layout, opacity: number, bloom: number) {\n    if (opacity <= 0) return\n    const base = (d: number) =>\n      d >= 0 ? (dark ? 0.46 : 0.58) : dark ? 0.22 : 0.3\n    const alphaAt = (d: number) => {\n      const b = base(d)\n      return (b + (1 - b) * litAt(d)) * opacity\n    }\n    const sp = l.sp\n    const rx = sp * 0.5\n    const ry = sp * 0.64\n\n    ctx!.lineCap = \"butt\"\n\n    // Dynamics and hairpins share the space between the staves.\n    ctx!.font = `italic ${Math.round(clamp(sp * 1.3, 10, 17))}px Georgia, \"Times New Roman\", serif`\n    ctx!.textAlign = \"center\"\n    ctx!.textBaseline = \"middle\"\n    for (const mark of s.marks) {\n      for (const d of spots(l, mark.t)) {\n        const fog = enter(l.cx, yOf(l, d) + sp * 0.9)\n        if (fog > 0) {\n          ctx!.globalAlpha = fog\n          ctx!.fillStyle = rgba(rgb, alphaAt(d) * 0.85)\n          ctx!.fillText(mark.text, 0, 0)\n        }\n        leave()\n      }\n    }\n    lw = 1\n    for (const pin of s.hairpins) {\n      for (const d0 of spots(l, pin.t, pin.dur)) {\n        const d1 = d0 + pin.dur\n        const narrow = pin.opening ? d0 : d1\n        const wide = pin.opening ? d1 : d0\n        const half = sp * 0.9\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(Math.min(Math.abs(d0), Math.abs(d1))) * 0.6\n        )\n        polyline([\n          [l.cx - half, yOf(l, wide)],\n          [l.cx, yOf(l, narrow)],\n          [l.cx + half, yOf(l, wide)],\n        ])\n      }\n    }\n\n    // Slurs curve on the inner side, opposite the stems.\n    lw = Math.max(1, sp * 0.1)\n    for (const slur of s.slurs) {\n      const len = slur.last.t - slur.first.t\n      for (const d0 of spots(l, slur.first.t, len)) {\n        const d1 = d0 + len\n        const inward = slur.staff === 0 ? 1 : -1\n        const y0 = yOf(l, d0)\n        const y1 = yOf(l, d1)\n        const x0 = xOf(l, slur.staff, slur.first.pitch + inward * 2)\n        const x1 = xOf(l, slur.staff, slur.last.pitch + inward * 2)\n        const edge =\n          inward > 0\n            ? Math.max(slur.first.pitch, slur.last.pitch) + 3.5\n            : Math.min(slur.first.pitch, slur.last.pitch) - 3.5\n        ctx!.strokeStyle = rgba(\n          rgb,\n          alphaAt(d1 < 0 ? d1 : Math.max(0, d0)) * 0.5\n        )\n        curve(x0, y0, xOf(l, slur.staff, edge), (y0 + y1) / 2, x1, y1)\n      }\n    }\n\n    // Stems and beams. A stem runs along the pitch axis from the side of its\n    // head (the time axis is \"across\" here), out to the beam.\n    const stemW = Math.max(1, sp * 0.11)\n    const side = -ry * 0.8\n    for (const stem of s.stems) {\n      const len = stem.t1 - stem.t0\n      for (const d0 of spots(l, stem.t0, len)) {\n        const d1 = d0 + len\n        const out = stem.staff === 0 ? -1 : 1\n        const tipX = xOf(l, stem.staff, stem.tip)\n        lw = stemW\n        if (stem.chord) {\n          // One stem through the chord, from the innermost head out to the tip.\n          const inner =\n            out < 0\n              ? Math.max(...stem.notes.map((n) => n.pitch))\n              : Math.min(...stem.notes.map((n) => n.pitch))\n          const y = yOf(l, d0) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d0))\n          line(xOf(l, stem.staff, inner), y, tipX, y)\n          continue\n        }\n        for (const n of stem.notes) {\n          const d = d0 + (n.t - stem.t0)\n          const y = yOf(l, d) + side\n          ctx!.strokeStyle = rgba(rgb, alphaAt(d))\n          line(xOf(l, stem.staff, n.pitch), y, tipX, y)\n        }\n        if (stem.beams === 0) continue\n        const nearest = d1 < 0 ? d1 : d0 > 0 ? d0 : 0\n        ctx!.strokeStyle = rgba(rgb, alphaAt(nearest))\n        lw = sp * 0.36\n        const yA = yOf(l, d0) + side + stemW / 2\n        const yB = yOf(l, d1) + side - stemW / 2\n        const offset = sp * 0.18 * out\n        line(tipX - offset, yA, tipX - offset, yB)\n        if (stem.beams === 2) {\n          const x2 = tipX - offset - out * sp * 0.75\n          line(x2, yA, x2, yB)\n        }\n      }\n    }\n\n    // Ledger lines, parallel to the staff lines.\n    lw = 1\n    for (const n of s.notes) {\n      if (n.pitch > -2 && n.pitch < 10) continue\n      for (const d of spots(l, n.t)) {\n        const y = yOf(l, d)\n        ctx!.strokeStyle = rgba(rgb, alphaAt(d) * 0.7)\n        const from = n.pitch < 0 ? -2 : 10\n        const step = n.pitch < 0 ? -2 : 2\n        for (let p = from; step < 0 ? p >= n.pitch : p <= n.pitch; p += step) {\n          const x = xOf(l, n.staff, p)\n          line(x, y - ry * 1.7, x, y + ry * 1.7)\n        }\n      }\n    }\n\n    // Glow under the heads that are playing.\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      for (const n of s.notes) {\n        for (const d of spots(l, n.t)) {\n          const lit = litAt(d)\n          if (lit < 0.03) continue\n          const r = sp * (1.1 + lit * 1.5) * bloom\n          glow(\n            xOf(l, n.staff, n.pitch),\n            yOf(l, d),\n            r,\n            r,\n            lit * (dark ? 0.7 : 0.32) * Math.min(1, bloom) * opacity\n          )\n        }\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n\n    // Noteheads, with accidentals just before them in reading order (below).\n    ctx!.font = `${Math.round(sp * 1.5)}px Georgia, \"Times New Roman\", serif`\n    for (const n of s.notes) {\n      for (const d of spots(l, n.t)) {\n        const fog = enter(xOf(l, n.staff, n.pitch), yOf(l, d))\n        if (fog <= 0) {\n          leave()\n          continue\n        }\n        ctx!.globalAlpha = fog\n        const color = rgba(rgb, alphaAt(d))\n        ctx!.beginPath()\n        ctx!.ellipse(0, 0, rx, ry, 0.35, 0, Math.PI * 2)\n        if (n.hollow) {\n          ctx!.strokeStyle = color\n          ctx!.lineWidth = Math.max(1.2, sp * 0.16)\n          ctx!.stroke()\n        } else {\n          ctx!.fillStyle = color\n          ctx!.fill()\n        }\n        if (n.acc !== 0) {\n          ctx!.fillStyle = color\n          ctx!.fillText(n.acc > 0 ? \"♯\" : \"♭\", 0, ry + sp * 0.95)\n        }\n        leave()\n      }\n    }\n  }\n\n  function drawPlayhead(l: Layout, bloom: number) {\n    const y = Math.round(l.playY) + 0.5\n    if (bloom > 0) {\n      ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n      const alpha = (dark ? 0.35 : 0.12) * Math.min(1, bloom)\n      const band = l.sp * 1.4 * Math.max(0.6, bloom)\n      // In slices, so the band follows the perspective across the plane.\n      const slices = view.depthless ? 1 : 24\n      const span = (view.x1 - view.x0) / slices\n      const src = glowSprite.width / slices\n      for (let i = 0; i < slices; i++) {\n        const fog = enter(view.x0 + (i + 0.5) * span, y)\n        if (fog > 0) {\n          ctx!.globalAlpha = alpha * fog\n          ctx!.drawImage(\n            glowSprite,\n            i * src,\n            0,\n            src,\n            glowSprite.height,\n            -span / 2,\n            -band,\n            span,\n            band * 2\n          )\n        }\n        leave()\n      }\n      ctx!.globalCompositeOperation = \"source-over\"\n    }\n    ctx!.strokeStyle = rgba(rgb, dark ? 0.75 : 0.55)\n    lw = 1\n    line(view.x0, y, view.x1, y, 12)\n  }\n\n  function drawFlares(l: Layout, bloom: number) {\n    if (flares.length === 0 || bloom <= 0) return\n    ctx!.globalCompositeOperation = dark ? \"lighter\" : \"source-over\"\n    for (const f of flares) {\n      const k = f.age / FLARE_LIFE\n      const fade = (1 - k) * (1 - k)\n      const x = xOf(l, f.staff, f.pitch)\n      const r = l.sp * (1.6 + k * 1.4) * bloom\n      glow(x, l.playY, r, r, fade * (dark ? 0.8 : 0.4))\n      // A streak along the playhead.\n      const streak = l.sp * (2.5 + k * 3) * bloom\n      glow(x, l.playY, streak, 1.5, fade * (dark ? 0.9 : 0.5))\n    }\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */\n  function drawEdgeFade(w: number, h: number) {\n    const f = h * EDGE_FADE\n    // Erase toward the edges rather than paint over them, so the fade\n    // lands on whatever background the parent has.\n    const solid = \"rgba(0,0,0,1)\"\n    const clear = \"rgba(0,0,0,0)\"\n    ctx!.globalCompositeOperation = \"destination-out\"\n    const top = ctx!.createLinearGradient(0, 0, 0, f)\n    top.addColorStop(0, solid)\n    top.addColorStop(1, clear)\n    ctx!.fillStyle = top\n    ctx!.fillRect(0, 0, w, f)\n    const bottom = ctx!.createLinearGradient(0, h - f, 0, h)\n    bottom.addColorStop(0, clear)\n    bottom.addColorStop(1, solid)\n    ctx!.fillStyle = bottom\n    ctx!.fillRect(0, h - f, w, f)\n    ctx!.globalCompositeOperation = \"source-over\"\n  }\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      const prevSeed = seedOf(options.seed)\n      const prevDensity = densityOf(options.density)\n      const prevColor = options.color\n      options = {\n        ...options,\n        ...next,\n        sway: next.sway ?? options.sway,\n        theme: themeOf(next.theme ?? options.theme),\n      }\n      syncTheme()\n      if (options.color !== prevColor) recolor()\n      if (\n        seedOf(options.seed) !== prevSeed ||\n        densityOf(options.density) !== prevDensity\n      ) {\n        // Crossfade from the old score instead of cutting.\n        previous = reduce ? null : score\n        rebuildAge = reduce ? REBUILD_FADE : 0\n        score = generateScore(seedOf(options.seed), densityOf(options.density))\n        dust = makeDust(seedOf(options.seed))\n        flares.length = 0\n      }\n      wake()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n    },\n  }\n}\n\nexport type PhosphorScoreProps = Omit<PhosphorScoreOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,\n * each note blooms and flares as it plays, then fades with an afterglow.\n * Follows light and dark.\n */\nexport function PhosphorScore({\n  className,\n  color,\n  glow = DEFAULT_GLOW,\n  speed = DEFAULT_SPEED,\n  density = DEFAULT_DENSITY,\n  sway = true,\n  seed = DEFAULT_SEED,\n  rotateX = 0,\n  rotateY = 0,\n  rotateZ = 0,\n  theme = \"auto\",\n}: PhosphorScoreProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<PhosphorScoreInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createPhosphorScore(canvas, {\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      glow,\n      speed,\n      density,\n      sway,\n      seed,\n      rotateX,\n      rotateY,\n      rotateZ,\n      theme,\n    })\n  }, [\n    color,\n    glow,\n    speed,\n    density,\n    sway,\n    seed,\n    rotateX,\n    rotateY,\n    rotateZ,\n    theme,\n  ])\n\n  return (\n    <div\n      data-slot=\"phosphor-score\"\n      role=\"img\"\n      aria-label=\"Falling phosphor sheet music\"\n      className={cn(\"absolute inset-0 overflow-hidden\", className)}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/phosphor-score.tsx"
     }
diff --git a/registry/phosphor-score/phosphor-score-vanilla.ts b/registry/phosphor-score/phosphor-score-vanilla.ts
index 4572af4..06e9bce 100644
--- a/registry/phosphor-score/phosphor-score-vanilla.ts
+++ b/registry/phosphor-score/phosphor-score-vanilla.ts
@@ -51,8 +51,9 @@ export const DARK_COLOR = "#4DFF6A"
 export const LIGHT_COLOR = "#147A3A"
 /** @deprecated Use `DARK_COLOR` or omit `color` and set `theme`. */
 export const DEFAULT_COLOR = DARK_COLOR
-export const DARK_BG = "#050505"
-/** Light mode is transparent — the parent `bg-background` shows through. */
+/** Transparent in both themes — the parent's background shows through. */
+export const DARK_BG = "transparent"
+/** Transparent in both themes — the parent's background shows through. */
 export const LIGHT_BG = "transparent"
 export const DEFAULT_GLOW = 50
 export const DEFAULT_SPEED = 1.35
@@ -687,12 +688,7 @@ export function createPhosphorScore(
     ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
     ctx!.globalCompositeOperation = "source-over"
     ctx!.globalAlpha = 1
-    if (dark) {
-      ctx!.fillStyle = DARK_BG
-      ctx!.fillRect(0, 0, w, h)
-    } else {
-      ctx!.clearRect(0, 0, w, h)
-    }
+    ctx!.clearRect(0, 0, w, h)
     if (w < 2 || h < 2) return
 
     view = makeView(
@@ -1143,9 +1139,11 @@ export function createPhosphorScore(
   /** Top and bottom fade into the background — in the canvas, so it costs nothing and blurs nothing. */
   function drawEdgeFade(w: number, h: number) {
     const f = h * EDGE_FADE
-    const solid = dark ? "rgba(5,5,5,1)" : "rgba(0,0,0,1)"
-    const clear = dark ? "rgba(5,5,5,0)" : "rgba(0,0,0,0)"
-    ctx!.globalCompositeOperation = dark ? "source-over" : "destination-out"
+    // Erase toward the edges rather than paint over them, so the fade
+    // lands on whatever background the parent has.
+    const solid = "rgba(0,0,0,1)"
+    const clear = "rgba(0,0,0,0)"
+    ctx!.globalCompositeOperation = "destination-out"
     const top = ctx!.createLinearGradient(0, 0, 0, f)
     top.addColorStop(0, solid)
     top.addColorStop(1, clear)
diff --git a/registry/phosphor-score/phosphor-score.svelte b/registry/phosphor-score/phosphor-score.svelte
index 7b2cdaf..472bc17 100644
--- a/registry/phosphor-score/phosphor-score.svelte
+++ b/registry/phosphor-score/phosphor-score.svelte
@@ -11,7 +11,6 @@
     DEFAULT_SPEED,
     type PhosphorScoreInstance,
     type PhosphorScoreOptions,
-    type PhosphorScoreTheme,
   } from "./phosphor-score-vanilla"
 
   interface Props extends Omit<PhosphorScoreOptions, "onThemeChange"> {
@@ -32,16 +31,6 @@
     theme = "auto",
   }: Props = $props()
 
-  /**
-   * Background before the first frame, so dark mode never flashes light.
-   * `#050505` is `DARK_BG`; Tailwind needs the literal.
-   */
-  const SURFACE: Record<PhosphorScoreTheme, string> = {
-    auto: "bg-background dark:bg-[#050505]",
-    dark: "bg-[#050505]",
-    light: "bg-background",
-  }
-
   let canvas: HTMLCanvasElement | undefined = $state()
   let instance: PhosphorScoreInstance | null = null
 
@@ -87,7 +76,6 @@
   aria-label="Falling phosphor sheet music"
   class={[
     "absolute inset-0 overflow-hidden",
-    SURFACE[theme] ?? SURFACE.auto,
     className,
   ]
     .filter(Boolean)
diff --git a/registry/phosphor-score/phosphor-score.tsx b/registry/phosphor-score/phosphor-score.tsx
index cdd5f88..807796a 100644
--- a/registry/phosphor-score/phosphor-score.tsx
+++ b/registry/phosphor-score/phosphor-score.tsx
@@ -12,7 +12,6 @@ import {
   DEFAULT_SPEED,
   type PhosphorScoreInstance,
   type PhosphorScoreOptions,
-  type PhosphorScoreTheme,
 } from "./phosphor-score-vanilla"
 
 export {
@@ -38,16 +37,6 @@ export type PhosphorScoreProps = Omit<PhosphorScoreOptions, "onThemeChange"> & {
   className?: string
 }
 
-/**
- * Background before the first frame, so dark mode never flashes light.
- * `#050505` is `DARK_BG`; Tailwind needs the literal.
- */
-const SURFACE: Record<PhosphorScoreTheme, string> = {
-  auto: "bg-background dark:bg-[#050505]",
-  dark: "bg-[#050505]",
-  light: "bg-background",
-}
-
 /**
  * Vertical phosphor sheet music — a grand staff scrolls down to a playhead,
  * each note blooms and flares as it plays, then fades with an afterglow.
@@ -123,11 +112,7 @@ export function PhosphorScore({
       data-slot="phosphor-score"
       role="img"
       aria-label="Falling phosphor sheet music"
-      className={cn(
-        "absolute inset-0 overflow-hidden",
-        SURFACE[theme] ?? SURFACE.auto,
-        className
-      )}
+      className={cn("absolute inset-0 overflow-hidden", className)}
     >
       <canvas ref={canvasRef} className="absolute inset-0 size-full" />
     </div>
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index caca221..f08c1b9 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -155,7 +155,7 @@ Exceptions:
 
 - Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
-- `PhosphorScore` canvas is transparent in light mode (`LIGHT_BG`) and `#050505` in dark mode (`DARK_BG`). A dark phosphor field is a hard rectangle. Clip the parent (`overflow-hidden rounded-*`) if the square edge matters. Open issue: the docs preview border looks boxed ([#28](https://github.com/radiumcoders/23rd.dev/issues/28)).
+- `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
 - `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
 `prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index 34fa891..167c924 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -83,7 +83,7 @@ type PhosphorScoreProps = {
 }
 ```
 
-`DARK_COLOR` `#4DFF6A`, `LIGHT_COLOR` `#147A3A`, `DARK_BG` `#050505`, `LIGHT_BG` `"transparent"`. A set `color` replaces ink only. Background still follows dark vs light.
+`DARK_COLOR` `#4DFF6A`, `LIGHT_COLOR` `#147A3A`, `DARK_BG` and `LIGHT_BG` are both `"transparent"`. A set `color` replaces ink only.
 
 ## radiant-lines
 
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index 28cc556..a82b783 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -61,7 +61,7 @@ export function Score() {
 }
 ```
 
-Pitfalls: omit `color` so theme can swap (dark `#4DFF6A` on `#050505`, light `#147A3A` on a transparent canvas). Dark mode paints a solid `#050505` rectangle — clip the parent. Issue [#28](https://github.com/radiumcoders/23rd.dev/issues/28) is that square edge. The docs sentence “Press d to toggle” is not implemented on the component or the demo. Do not add a `d` shortcut.
+Pitfalls: omit `color` so theme can swap (dark `#4DFF6A`, light `#147A3A`). The canvas is transparent in both themes; the parent paints the background. Issue [#28](https://github.com/radiumcoders/23rd.dev/issues/28) is that square edge. The docs sentence “Press d to toggle” is not implemented on the component or the demo. Do not add a `d` shortcut.
 
 ## radiant-lines
 
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index c93451b..01b8143 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -226,6 +226,5 @@ export function Brand() {
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
 - Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).
-- `PhosphorScore` on a light card in dark mode without clipping. The canvas fills `#050505`.
 - Assuming `theme="auto"` recolors a shader after you passed `colors`. It will not.
 - Adding `variant` to anything but `LiveOrb`.

From fde05a849877c80a49f672751e382708226270d9 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 12:33:57 +0530
Subject: [PATCH 24/49] Lean Folio by wheel speed so trackpads tilt too.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The lean was read from each wheel event's delta. A mouse notch is one
big delta, but a Mac trackpad sends a stream of small ones, so a fast
swipe peaked near 2° against a mouse's 11°. The lean now follows a
smoothed wheel speed (px/ms): a fast swipe reaches about 12°, level
with a flick, while slow reading scrolls stay subtle. Line- and
page-mode deltas are converted to px.

Closes #29
---
 .cursor/skills/23rd/SKILL.md      |  2 +-
 .cursor/skills/23rd/components.md |  2 +-
 .cursor/skills/23rd/recipes.md    |  2 +-
 public/r/folio-svelte.json        |  2 +-
 public/r/folio.json               |  2 +-
 registry/folio/folio-vanilla.ts   | 31 +++++++++++++++++++++++++------
 skills/23rd/SKILL.md              |  2 +-
 skills/23rd/components.md         |  2 +-
 skills/23rd/recipes.md            |  2 +-
 9 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index f08c1b9..ede6b3f 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -156,7 +156,7 @@ Exceptions:
 - Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
 - `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
-- `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
+- `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
 `prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
 
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index a82b783..504ab6c 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -309,7 +309,7 @@ Section. The sheet tips one way on scroll down, the other on scroll up, blur on
 
 Best fit: a long editorial page that should feel like one sheet.
 
-Not this: overscroll aurora (`stretchy-footer`). Do not use it when the user needs an obvious effect on a trackpad — issue [#29](https://github.com/radiumcoders/23rd.dev/issues/29) says the lean is barely visible on Mac. The docs “show effect” button calls `playFolioDemo`; that is a preview, not a stronger public tilt.
+Not this: overscroll aurora (`stretchy-footer`). The lean follows wheel speed, so a fast trackpad swipe leans about as far as a mouse flick; slow reading-speed scrolls stay subtle. The docs “show effect” button calls `playFolioDemo`; that is a preview, not a stronger public tilt.
 
 Deps: none. Key props: `children`, `blur` (4), `perspective` (1000, floor 1000), `returnMs` (520), `windowScroll` (false), `contentSelector` (`[data-folio-page]`), `label` (`"Tilting page"`), `demoId`.
 
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index 01b8143..11ff369 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -158,7 +158,7 @@ export function Essay() {
 }
 ```
 
-If the effect is too subtle, say so. Do not invent a `tilt` prop. Issue #29 tracks the Mac trackpad case. `playFolioDemo({ target, holdMs })` only runs the preview on a matching `demoId`.
+If the effect is too subtle, say so. Do not invent a `tilt` prop. `playFolioDemo({ target, holdMs })` only runs the preview on a matching `demoId`.
 
 Window mode:
 
diff --git a/public/r/folio-svelte.json b/public/r/folio-svelte.json
index 7be38c8..97d175f 100644
--- a/public/r/folio-svelte.json
+++ b/public/r/folio-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/folio/folio.svelte",
-      "content": "<script module lang=\"ts\">\nexport const FOLIO_PLAY = \"folio:play\"\nexport const FOLIO_IDLE_MS = 200\n\nexport type FolioPlayDetail = {\n  /** Only instances whose `demoId` matches will play. */\n  target?: string\n  /** Nested scroller to drive. Omit for `window`. */\n  scrollRoot?: HTMLElement | null\n  /** How long to hold the lean before springing back, in ms. Default `420`. */\n  holdMs?: number\n}\n\nexport type FolioRuntimeOptions = {\n  /** Peak blur in px at full tilt. Default `4`. */\n  blur?: number\n  /** CSS perspective distance in px. Default `1000`. Floor `1000`. */\n  perspective?: number\n  /**\n   * How long the lean takes to come back after the bottom, in ms.\n   * Default `520`.\n   */\n  returnMs?: number\n}\n\nexport type FolioInstance = {\n  setOptions: (options: Partial<FolioRuntimeOptions>) => void\n  destroy: () => void\n}\n\nconst TILT_PEAK = 16\nconst DEFAULT_BLUR = 4\nconst DEFAULT_PERSPECTIVE = 1000\nconst MIN_PERSPECTIVE = 1000\nconst DEFAULT_RETURN_MS = 520\nconst VEL_REF = 2.4\nconst WHEEL_REF = 110\nconst WHEEL_SCROLL_LOCK_MS = 64\nconst END_SLACK_PX = 8\nconst SPRING_IN = { stiffness: 72, damping: 22 }\nconst SPRING_OUT = { stiffness: 42, damping: 18 }\n\ntype Spring = {\n  set: (value: number) => void\n  get: () => number\n  destroy: () => void\n}\n\nfunction createSpring(onChange: (value: number) => void): Spring {\n  let current = 0\n  let target = 0\n  let velocity = 0\n  let raf = 0\n  let lastTime = 0\n  let stiffness = SPRING_IN.stiffness\n  let damping = SPRING_IN.damping\n\n  function integrate(dt: number) {\n    const accel = -stiffness * (current - target) - damping * velocity\n    velocity += accel * dt\n    current += velocity * dt\n  }\n\n  function tick(now: number) {\n    if (!lastTime) lastTime = now\n    let remaining = Math.min((now - lastTime) / 1000, 0.048)\n    lastTime = now\n    const step = 1 / 60\n    while (remaining > 0) {\n      integrate(Math.min(step, remaining))\n      remaining -= step\n    }\n    const settled =\n      Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03\n    if (settled) {\n      current = target\n      velocity = 0\n      raf = 0\n      lastTime = 0\n      onChange(current)\n      return\n    }\n    onChange(current)\n    raf = requestAnimationFrame(tick)\n  }\n\n  function start() {\n    if (!raf) {\n      lastTime = 0\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  return {\n    set(value) {\n      target = value\n      if (value === 0) {\n        stiffness = SPRING_OUT.stiffness\n        damping = SPRING_OUT.damping\n      } else {\n        stiffness = SPRING_IN.stiffness\n        damping = SPRING_IN.damping\n      }\n      if (Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03) {\n        current = target\n        velocity = 0\n        onChange(current)\n        return\n      }\n      start()\n    },\n    get() {\n      return current\n    },\n    destroy() {\n      if (raf) cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\nfunction isWindow(scroller: HTMLElement | Window): scroller is Window {\n  return scroller === window\n}\n\nfunction readScrollTop(scroller: HTMLElement | Window) {\n  return isWindow(scroller)\n    ? window.scrollY || document.documentElement.scrollTop\n    : scroller.scrollTop\n}\n\nfunction maxScroll(scroller: HTMLElement | Window) {\n  if (isWindow(scroller)) {\n    return Math.max(\n      0,\n      document.documentElement.scrollHeight - window.innerHeight\n    )\n  }\n  return Math.max(0, scroller.scrollHeight - scroller.clientHeight)\n}\n\nfunction clamp01(n: number) {\n  return Math.max(0, Math.min(1, n))\n}\n\nfunction clampSigned(n: number) {\n  return Math.max(-1, Math.min(1, n))\n}\n\nfunction remainingScroll(scroller: HTMLElement | Window) {\n  return Math.max(0, maxScroll(scroller) - readScrollTop(scroller))\n}\n\n/** `1` in the body of the page, `0` at the bottom so the down-lean dies. */\nfunction endFade(scroller: HTMLElement | Window) {\n  const left = remainingScroll(scroller)\n  if (left <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((left - END_SLACK_PX) / zone)\n}\n\n/** `1` in the body of the page, `0` at the top so the up-lean dies. */\nfunction startFade(scroller: HTMLElement | Window) {\n  const top = readScrollTop(scroller)\n  if (top <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((top - END_SLACK_PX) / zone)\n}\n\n/** Map scroll delta to a signed -1…1 lean. Positive = scrolling down. */\nexport function leanFromDelta(deltaPx: number, ref = WHEEL_REF) {\n  return clampSigned(deltaPx / ref)\n}\n\n/** Slow travel sits near 5°, a flick reaches 16°. */\nfunction tiltAngle(impulse: number) {\n  const mag = Math.min(1, Math.abs(impulse))\n  const deg = mag * mag * (TILT_PEAK - 5) + mag * 5\n  return deg * Math.sign(impulse || 1)\n}\n\nfunction hingeY(\n  scroller: HTMLElement | Window,\n  plane: HTMLElement,\n  tilt: number\n) {\n  const vh = viewHeightOf(scroller)\n  const localViewTop = readScrollTop(scroller) - plane.offsetTop\n  if (Math.abs(tilt) < 0.35) return localViewTop + vh * 0.5\n  return tilt > 0 ? localViewTop + vh : localViewTop\n}\n\nexport function applyFolioFrame(\n  plane: HTMLElement,\n  tilt: number,\n  options: FolioRuntimeOptions = {},\n  reducedMotion = false,\n  originY?: number\n) {\n  const blur = Math.max(0, options.blur ?? DEFAULT_BLUR)\n  const perspective = Math.max(\n    MIN_PERSPECTIVE,\n    options.perspective ?? DEFAULT_PERSPECTIVE\n  )\n  const angle = reducedMotion ? 0 : tilt\n  const amount = Math.min(1, Math.abs(angle) / TILT_PEAK)\n  const blurPx = reducedMotion ? 0 : amount * blur\n\n  plane.style.transformOrigin =\n    originY !== undefined\n      ? `50% ${originY.toFixed(1)}px`\n      : Math.abs(angle) < 0.35\n        ? \"50% 50%\"\n        : angle > 0\n          ? \"50% 100%\"\n          : \"50% 0%\"\n  plane.style.backfaceVisibility = \"hidden\"\n  plane.style.transform = `perspective(${perspective}px) rotateX(${angle}deg)`\n  plane.style.filter = \"none\"\n\n  const veil = ensureBlurVeil(plane)\n  if (blurPx < 0.08) {\n    veil.style.cssText = \"display:none\"\n  } else {\n    const ramp =\n      angle >= 0\n        ? \"linear-gradient(to top, transparent 0%, transparent 32%, black 100%)\"\n        : \"linear-gradient(to bottom, transparent 0%, transparent 32%, black 100%)\"\n    veil.style.cssText = [\n      \"pointer-events:none\",\n      \"position:absolute\",\n      \"inset:0\",\n      \"z-index:2\",\n      `backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `-webkit-backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `mask-image:${ramp}`,\n      `-webkit-mask-image:${ramp}`,\n    ].join(\";\")\n  }\n  plane.style.willChange = Math.abs(angle) > 0.08 ? \"transform\" : \"auto\"\n}\n\nfunction animateScroll(\n  scroller: HTMLElement | Window,\n  to: number,\n  durationMs: number,\n  signal: AbortSignal\n) {\n  const from = readScrollTop(scroller)\n  if (durationMs <= 0) {\n    if (isWindow(scroller)) window.scrollTo({ top: to })\n    else scroller.scrollTop = to\n    return Promise.resolve()\n  }\n\n  const start = performance.now()\n  return new Promise<void>((resolve) => {\n    const step = (now: number) => {\n      if (signal.aborted) {\n        resolve()\n        return\n      }\n      const t = Math.min(1, (now - start) / durationMs)\n      const e = t * t * t * (t * (t * 6 - 15) + 10)\n      const y = from + (to - from) * e\n      if (isWindow(scroller)) window.scrollTo({ top: y })\n      else scroller.scrollTop = y\n      if (t < 1) requestAnimationFrame(step)\n      else resolve()\n    }\n    requestAnimationFrame(step)\n  })\n}\n\n/** Lean the page while scrolling down, then spring flat. */\nexport async function playFolioDemo(detail: FolioPlayDetail = {}) {\n  if (typeof window === \"undefined\") return\n  window.dispatchEvent(\n    new CustomEvent<FolioPlayDetail>(FOLIO_PLAY, { detail })\n  )\n  const hold = detail.holdMs ?? 720\n  await new Promise<void>((r) => window.setTimeout(r, hold + 1800))\n}\n\nfunction viewHeightOf(scroller: HTMLElement | Window) {\n  return isWindow(scroller) ? window.innerHeight : scroller.clientHeight\n}\n\nfunction ensureBlurVeil(plane: HTMLElement) {\n  let veil = plane.querySelector<HTMLElement>(\"[data-slot='folio-blur-veil']\")\n  if (!veil) {\n    if (getComputedStyle(plane).position === \"static\") {\n      plane.style.position = \"relative\"\n    }\n    veil = document.createElement(\"div\")\n    veil.dataset.slot = \"folio-blur-veil\"\n    veil.setAttribute(\"aria-hidden\", \"true\")\n    plane.appendChild(veil)\n  }\n  return veil\n}\n\nexport function createFolio(options: {\n  plane: HTMLElement\n  scroller: HTMLElement | Window\n  demoId?: string\n  blur?: number\n  perspective?: number\n  returnMs?: number\n}): FolioInstance {\n  const runtime: FolioRuntimeOptions = {\n    blur: options.blur,\n    perspective: options.perspective,\n    returnMs: options.returnMs,\n  }\n\n  let reduced = false\n  let playing = false\n  let lastTop = readScrollTop(options.scroller)\n  let lastTime = performance.now()\n  let lastWheelAt = 0\n  let impulse = 0\n  let gate = 1\n  let gateFrom = 1\n  let gateTarget = 1\n  let gateT0 = 0\n  let gateRaf = 0\n  let idleTimer: ReturnType<typeof setTimeout> | null = null\n  const playAbort = { current: new AbortController() }\n\n  const paint = (tilt: number) => {\n    applyFolioFrame(\n      options.plane,\n      tilt,\n      runtime,\n      reduced,\n      hingeY(options.scroller, options.plane, tilt)\n    )\n  }\n\n  const spring = createSpring(paint)\n\n  const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const applyReduce = () => {\n    reduced = media.matches && !playing\n    if (reduced) {\n      impulse = 0\n      gate = 1\n      spring.set(0)\n      paint(0)\n    }\n  }\n  applyReduce()\n  media.addEventListener(\"change\", applyReduce)\n\n  function returnMs() {\n    return Math.max(0, runtime.returnMs ?? DEFAULT_RETURN_MS)\n  }\n\n  function sampleGate(now = performance.now()) {\n    const ms = returnMs()\n    if (ms <= 0) {\n      gate = gateTarget\n      return gate\n    }\n    const t = Math.min(1, (now - gateT0) / ms)\n    const e = t * t * (3 - 2 * t)\n    gate = gateFrom + (gateTarget - gateFrom) * e\n    return gate\n  }\n\n  function goGate(to: number) {\n    if (to === 0) {\n      gate = 0\n      gateFrom = 0\n      gateTarget = 0\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateTarget !== 1) {\n      gateFrom = sampleGate()\n      gateTarget = 1\n      gateT0 = performance.now()\n    }\n    if (gate >= 0.999) {\n      gate = 1\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateRaf) return\n    const tick = (now: number) => {\n      sampleGate(now)\n      applyLean()\n      if (gateTarget === 1 && gate < 0.999) {\n        gateRaf = requestAnimationFrame(tick)\n      } else {\n        if (gateTarget === 1) gate = 1\n        gateRaf = 0\n      }\n    }\n    gateRaf = requestAnimationFrame(tick)\n  }\n\n  function applyLean(leavingEdge = false) {\n    if (reduced) {\n      spring.set(0)\n      return\n    }\n    if (playing) {\n      spring.set(tiltAngle(impulse || 1))\n      return\n    }\n    const down = impulse >= 0\n    const fade = leavingEdge\n      ? 1\n      : down\n        ? endFade(options.scroller)\n        : startFade(options.scroller)\n    if (fade <= 0.02) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    goGate(1)\n    const g = sampleGate()\n    spring.set(tiltAngle(impulse * fade * g))\n  }\n\n  function lean(amount: number, leavingEdge = false) {\n    if (reduced) return\n    const next = clampSigned(amount)\n    const nextSign = Math.sign(next)\n    const prevSign = Math.sign(impulse)\n    if (nextSign !== 0 && prevSign !== 0 && nextSign !== prevSign) {\n      impulse = next\n    } else {\n      const dir = nextSign || prevSign || 1\n      const mag = Math.max(\n        Math.abs(next),\n        Math.abs(impulse) * 0.62 + Math.abs(next) * 0.38\n      )\n      impulse = mag * dir\n    }\n    applyLean(leavingEdge)\n    if (idleTimer) clearTimeout(idleTimer)\n    idleTimer = setTimeout(() => {\n      impulse = 0\n      if (!playing) spring.set(0)\n    }, FOLIO_IDLE_MS)\n  }\n\n  const onWheel = (event: Event) => {\n    if (playing) return\n    const dy = (event as WheelEvent).deltaY\n    if (!dy) return\n    lastWheelAt = performance.now()\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    const leavingEnd = atEnd && dy < 0\n    const leavingStart = atStart && dy > 0\n    if ((atEnd && !leavingEnd) || (atStart && !leavingStart)) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    lean(leanFromDelta(dy), leavingEnd || leavingStart)\n  }\n\n  const onScroll = () => {\n    const now = performance.now()\n    const top = readScrollTop(options.scroller)\n    const dt = Math.max(8, now - lastTime)\n    const vel = (top - lastTop) / dt\n    lastTop = top\n    lastTime = now\n    if (playing) {\n      applyLean()\n      return\n    }\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    if (atEnd && vel >= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (atStart && vel <= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (now - lastWheelAt < WHEEL_SCROLL_LOCK_MS) {\n      applyLean(atEnd || atStart)\n      return\n    }\n    lean(clampSigned(vel / VEL_REF), (atEnd && vel < 0) || (atStart && vel > 0))\n  }\n\n  const wheelTarget: EventTarget = isWindow(options.scroller)\n    ? window\n    : options.scroller\n  wheelTarget.addEventListener(\"wheel\", onWheel, { passive: true })\n  options.scroller.addEventListener(\"scroll\", onScroll, { passive: true })\n  const onResize = () => paint(spring.get())\n  window.addEventListener(\"resize\", onResize)\n\n  const onPlay = (event: Event) => {\n    const detail = (event as CustomEvent<FolioPlayDetail>).detail ?? {}\n    if (options.demoId) {\n      if (!detail.target || detail.target !== options.demoId) return\n    } else if (detail.target) {\n      return\n    }\n\n    playAbort.current.abort()\n    playAbort.current = new AbortController()\n    const signal = playAbort.current.signal\n    const hold = detail.holdMs ?? 720\n    const scroller = detail.scrollRoot ?? options.scroller\n    playing = true\n    if (idleTimer) clearTimeout(idleTimer)\n    applyReduce()\n\n    void (async () => {\n      const max = maxScroll(scroller)\n      const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n      const limit = Math.max(0, max - zone - END_SLACK_PX)\n      let start = readScrollTop(scroller)\n      if (start >= limit - 24) {\n        impulse = 0\n        gate = 1\n        gateTarget = 1\n        spring.set(0)\n        if (isWindow(scroller)) window.scrollTo({ top: 0 })\n        else scroller.scrollTop = 0\n        lastTop = 0\n        start = 0\n      }\n      const dest = Math.min(\n        limit,\n        start + Math.max(560, viewHeightOf(scroller) * 1.35)\n      )\n      impulse = 1\n      gate = 1\n      gateTarget = 1\n      spring.set(TILT_PEAK)\n      await animateScroll(scroller, dest, Math.max(1400, hold + 700), signal)\n      if (signal.aborted) {\n        playing = false\n        applyReduce()\n        return\n      }\n      playing = false\n      applyReduce()\n      impulse = 0\n      spring.set(0)\n    })()\n  }\n\n  window.addEventListener(FOLIO_PLAY, onPlay)\n  paint(0)\n\n  return {\n    setOptions(next) {\n      if (next.blur !== undefined) runtime.blur = next.blur\n      if (next.perspective !== undefined) runtime.perspective = next.perspective\n      if (next.returnMs !== undefined) runtime.returnMs = next.returnMs\n      paint(spring.get())\n    },\n    destroy() {\n      playing = false\n      playAbort.current.abort()\n      if (idleTimer) clearTimeout(idleTimer)\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      spring.destroy()\n      options.plane.querySelector(\"[data-slot='folio-blur-veil']\")?.remove()\n      media.removeEventListener(\"change\", applyReduce)\n      wheelTarget.removeEventListener(\"wheel\", onWheel)\n      options.scroller.removeEventListener(\"scroll\", onScroll)\n      window.removeEventListener(\"resize\", onResize)\n      window.removeEventListener(FOLIO_PLAY, onPlay)\n      options.plane.style.transform = \"\"\n      options.plane.style.filter = \"\"\n      options.plane.style.willChange = \"\"\n      options.plane.style.backfaceVisibility = \"\"\n      options.plane.style.transformOrigin = \"\"\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props {\n    class?: string\n    /** Page content that leans while you scroll. */\n    children?: import(\"svelte\").Snippet\n    /** Peak blur in px at full tilt. Default `4`. */\n    blur?: number\n    /** CSS perspective distance in px. Default `1000`. Floor `1000`. */\n    perspective?: number\n    /**\n     * How long the lean takes to come back after the bottom, in ms.\n     * Default `520`.\n     */\n    returnMs?: number\n    /**\n     * Bind to the window and tilt `contentSelector` instead of wrapping\n     * children. Default `false` — this component *is* the scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element to tilt when `windowScroll` is set.\n     * Default `[data-folio-page]`.\n     */\n    contentSelector?: string\n    /** Accessible name for the tilting page. */\n    label?: string\n    /**\n     * Optional id for docs demos. `playFolioDemo({ target })` only\n     * animates instances whose `demoId` matches.\n     */\n    demoId?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    blur = 4,\n    perspective = 1000,\n    returnMs = 520,\n    windowScroll = false,\n    contentSelector = \"[data-folio-page]\",\n    label = \"Tilting page\",\n    demoId,\n  }: Props = $props()\n\n  let scrollerEl: HTMLDivElement | undefined = $state()\n  let planeEl: HTMLDivElement | undefined = $state()\n  let instance: FolioInstance | null = null\n\n  onMount(() => {\n    const scroller = windowScroll ? window : scrollerEl\n    const plane = windowScroll\n      ? document.querySelector<HTMLElement>(contentSelector)\n      : planeEl\n    if (!scroller || !plane) return\n\n    instance = createFolio({\n      plane,\n      scroller,\n      demoId,\n      blur,\n      perspective,\n      returnMs,\n    })\n\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({ blur, perspective, returnMs })\n  })\n</script>\n\n{#if !windowScroll}\n  <div\n    bind:this={scrollerEl}\n    data-slot=\"folio\"\n    data-folio-demo={demoId}\n    class={cn(\n      \"relative h-full overflow-x-hidden overflow-y-auto overscroll-contain\",\n      className\n    )}\n  >\n    <div\n      bind:this={planeEl}\n      data-slot=\"folio-plane\"\n      aria-label={label}\n      class=\"relative min-h-full overflow-x-clip [contain:paint]\"\n    >\n      {@render children?.()}\n    </div>\n  </div>\n{/if}\n",
+      "content": "<script module lang=\"ts\">\nexport const FOLIO_PLAY = \"folio:play\"\nexport const FOLIO_IDLE_MS = 200\n\nexport type FolioPlayDetail = {\n  /** Only instances whose `demoId` matches will play. */\n  target?: string\n  /** Nested scroller to drive. Omit for `window`. */\n  scrollRoot?: HTMLElement | null\n  /** How long to hold the lean before springing back, in ms. Default `420`. */\n  holdMs?: number\n}\n\nexport type FolioRuntimeOptions = {\n  /** Peak blur in px at full tilt. Default `4`. */\n  blur?: number\n  /** CSS perspective distance in px. Default `1000`. Floor `1000`. */\n  perspective?: number\n  /**\n   * How long the lean takes to come back after the bottom, in ms.\n   * Default `520`.\n   */\n  returnMs?: number\n}\n\nexport type FolioInstance = {\n  setOptions: (options: Partial<FolioRuntimeOptions>) => void\n  destroy: () => void\n}\n\nconst TILT_PEAK = 16\nconst DEFAULT_BLUR = 4\nconst DEFAULT_PERSPECTIVE = 1000\nconst MIN_PERSPECTIVE = 1000\nconst DEFAULT_RETURN_MS = 520\nconst VEL_REF = 2.4\nconst WHEEL_REF = 110\n/**\n * Wheel speed, in px/ms, that leans all the way. Trackpads send a stream\n * of small deltas, so a lean read per event barely moved; speed reads a\n * fast swipe and a fast mouse flick the same.\n */\nconst WHEEL_VEL_REF = 1.1\n/** A wheel gap longer than this starts a fresh gesture. */\nconst WHEEL_GESTURE_GAP_MS = 150\nconst WHEEL_SCROLL_LOCK_MS = 64\nconst END_SLACK_PX = 8\nconst SPRING_IN = { stiffness: 72, damping: 22 }\nconst SPRING_OUT = { stiffness: 42, damping: 18 }\n\ntype Spring = {\n  set: (value: number) => void\n  get: () => number\n  destroy: () => void\n}\n\nfunction createSpring(onChange: (value: number) => void): Spring {\n  let current = 0\n  let target = 0\n  let velocity = 0\n  let raf = 0\n  let lastTime = 0\n  let stiffness = SPRING_IN.stiffness\n  let damping = SPRING_IN.damping\n\n  function integrate(dt: number) {\n    const accel = -stiffness * (current - target) - damping * velocity\n    velocity += accel * dt\n    current += velocity * dt\n  }\n\n  function tick(now: number) {\n    if (!lastTime) lastTime = now\n    let remaining = Math.min((now - lastTime) / 1000, 0.048)\n    lastTime = now\n    const step = 1 / 60\n    while (remaining > 0) {\n      integrate(Math.min(step, remaining))\n      remaining -= step\n    }\n    const settled =\n      Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03\n    if (settled) {\n      current = target\n      velocity = 0\n      raf = 0\n      lastTime = 0\n      onChange(current)\n      return\n    }\n    onChange(current)\n    raf = requestAnimationFrame(tick)\n  }\n\n  function start() {\n    if (!raf) {\n      lastTime = 0\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  return {\n    set(value) {\n      target = value\n      if (value === 0) {\n        stiffness = SPRING_OUT.stiffness\n        damping = SPRING_OUT.damping\n      } else {\n        stiffness = SPRING_IN.stiffness\n        damping = SPRING_IN.damping\n      }\n      if (Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03) {\n        current = target\n        velocity = 0\n        onChange(current)\n        return\n      }\n      start()\n    },\n    get() {\n      return current\n    },\n    destroy() {\n      if (raf) cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\nfunction isWindow(scroller: HTMLElement | Window): scroller is Window {\n  return scroller === window\n}\n\nfunction readScrollTop(scroller: HTMLElement | Window) {\n  return isWindow(scroller)\n    ? window.scrollY || document.documentElement.scrollTop\n    : scroller.scrollTop\n}\n\nfunction maxScroll(scroller: HTMLElement | Window) {\n  if (isWindow(scroller)) {\n    return Math.max(\n      0,\n      document.documentElement.scrollHeight - window.innerHeight\n    )\n  }\n  return Math.max(0, scroller.scrollHeight - scroller.clientHeight)\n}\n\nfunction clamp01(n: number) {\n  return Math.max(0, Math.min(1, n))\n}\n\nfunction clampSigned(n: number) {\n  return Math.max(-1, Math.min(1, n))\n}\n\nfunction remainingScroll(scroller: HTMLElement | Window) {\n  return Math.max(0, maxScroll(scroller) - readScrollTop(scroller))\n}\n\n/** `1` in the body of the page, `0` at the bottom so the down-lean dies. */\nfunction endFade(scroller: HTMLElement | Window) {\n  const left = remainingScroll(scroller)\n  if (left <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((left - END_SLACK_PX) / zone)\n}\n\n/** `1` in the body of the page, `0` at the top so the up-lean dies. */\nfunction startFade(scroller: HTMLElement | Window) {\n  const top = readScrollTop(scroller)\n  if (top <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((top - END_SLACK_PX) / zone)\n}\n\n/** Map scroll delta to a signed -1…1 lean. Positive = scrolling down. */\nexport function leanFromDelta(deltaPx: number, ref = WHEEL_REF) {\n  return clampSigned(deltaPx / ref)\n}\n\n/** Slow travel sits near 5°, a flick reaches 16°. */\nfunction tiltAngle(impulse: number) {\n  const mag = Math.min(1, Math.abs(impulse))\n  const deg = mag * mag * (TILT_PEAK - 5) + mag * 5\n  return deg * Math.sign(impulse || 1)\n}\n\nfunction hingeY(\n  scroller: HTMLElement | Window,\n  plane: HTMLElement,\n  tilt: number\n) {\n  const vh = viewHeightOf(scroller)\n  const localViewTop = readScrollTop(scroller) - plane.offsetTop\n  if (Math.abs(tilt) < 0.35) return localViewTop + vh * 0.5\n  return tilt > 0 ? localViewTop + vh : localViewTop\n}\n\nexport function applyFolioFrame(\n  plane: HTMLElement,\n  tilt: number,\n  options: FolioRuntimeOptions = {},\n  reducedMotion = false,\n  originY?: number\n) {\n  const blur = Math.max(0, options.blur ?? DEFAULT_BLUR)\n  const perspective = Math.max(\n    MIN_PERSPECTIVE,\n    options.perspective ?? DEFAULT_PERSPECTIVE\n  )\n  const angle = reducedMotion ? 0 : tilt\n  const amount = Math.min(1, Math.abs(angle) / TILT_PEAK)\n  const blurPx = reducedMotion ? 0 : amount * blur\n\n  plane.style.transformOrigin =\n    originY !== undefined\n      ? `50% ${originY.toFixed(1)}px`\n      : Math.abs(angle) < 0.35\n        ? \"50% 50%\"\n        : angle > 0\n          ? \"50% 100%\"\n          : \"50% 0%\"\n  plane.style.backfaceVisibility = \"hidden\"\n  plane.style.transform = `perspective(${perspective}px) rotateX(${angle}deg)`\n  plane.style.filter = \"none\"\n\n  const veil = ensureBlurVeil(plane)\n  if (blurPx < 0.08) {\n    veil.style.cssText = \"display:none\"\n  } else {\n    const ramp =\n      angle >= 0\n        ? \"linear-gradient(to top, transparent 0%, transparent 32%, black 100%)\"\n        : \"linear-gradient(to bottom, transparent 0%, transparent 32%, black 100%)\"\n    veil.style.cssText = [\n      \"pointer-events:none\",\n      \"position:absolute\",\n      \"inset:0\",\n      \"z-index:2\",\n      `backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `-webkit-backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `mask-image:${ramp}`,\n      `-webkit-mask-image:${ramp}`,\n    ].join(\";\")\n  }\n  plane.style.willChange = Math.abs(angle) > 0.08 ? \"transform\" : \"auto\"\n}\n\nfunction animateScroll(\n  scroller: HTMLElement | Window,\n  to: number,\n  durationMs: number,\n  signal: AbortSignal\n) {\n  const from = readScrollTop(scroller)\n  if (durationMs <= 0) {\n    if (isWindow(scroller)) window.scrollTo({ top: to })\n    else scroller.scrollTop = to\n    return Promise.resolve()\n  }\n\n  const start = performance.now()\n  return new Promise<void>((resolve) => {\n    const step = (now: number) => {\n      if (signal.aborted) {\n        resolve()\n        return\n      }\n      const t = Math.min(1, (now - start) / durationMs)\n      const e = t * t * t * (t * (t * 6 - 15) + 10)\n      const y = from + (to - from) * e\n      if (isWindow(scroller)) window.scrollTo({ top: y })\n      else scroller.scrollTop = y\n      if (t < 1) requestAnimationFrame(step)\n      else resolve()\n    }\n    requestAnimationFrame(step)\n  })\n}\n\n/** Lean the page while scrolling down, then spring flat. */\nexport async function playFolioDemo(detail: FolioPlayDetail = {}) {\n  if (typeof window === \"undefined\") return\n  window.dispatchEvent(new CustomEvent<FolioPlayDetail>(FOLIO_PLAY, { detail }))\n  const hold = detail.holdMs ?? 720\n  await new Promise<void>((r) => window.setTimeout(r, hold + 1800))\n}\n\nfunction viewHeightOf(scroller: HTMLElement | Window) {\n  return isWindow(scroller) ? window.innerHeight : scroller.clientHeight\n}\n\nfunction ensureBlurVeil(plane: HTMLElement) {\n  let veil = plane.querySelector<HTMLElement>(\"[data-slot='folio-blur-veil']\")\n  if (!veil) {\n    if (getComputedStyle(plane).position === \"static\") {\n      plane.style.position = \"relative\"\n    }\n    veil = document.createElement(\"div\")\n    veil.dataset.slot = \"folio-blur-veil\"\n    veil.setAttribute(\"aria-hidden\", \"true\")\n    plane.appendChild(veil)\n  }\n  return veil\n}\n\nexport function createFolio(options: {\n  plane: HTMLElement\n  scroller: HTMLElement | Window\n  demoId?: string\n  blur?: number\n  perspective?: number\n  returnMs?: number\n}): FolioInstance {\n  const runtime: FolioRuntimeOptions = {\n    blur: options.blur,\n    perspective: options.perspective,\n    returnMs: options.returnMs,\n  }\n\n  let reduced = false\n  let playing = false\n  let lastTop = readScrollTop(options.scroller)\n  let lastTime = performance.now()\n  let lastWheelAt = 0\n  let wheelVel = 0\n  let impulse = 0\n  let gate = 1\n  let gateFrom = 1\n  let gateTarget = 1\n  let gateT0 = 0\n  let gateRaf = 0\n  let idleTimer: ReturnType<typeof setTimeout> | null = null\n  const playAbort = { current: new AbortController() }\n\n  const paint = (tilt: number) => {\n    applyFolioFrame(\n      options.plane,\n      tilt,\n      runtime,\n      reduced,\n      hingeY(options.scroller, options.plane, tilt)\n    )\n  }\n\n  const spring = createSpring(paint)\n\n  const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const applyReduce = () => {\n    reduced = media.matches && !playing\n    if (reduced) {\n      impulse = 0\n      gate = 1\n      spring.set(0)\n      paint(0)\n    }\n  }\n  applyReduce()\n  media.addEventListener(\"change\", applyReduce)\n\n  function returnMs() {\n    return Math.max(0, runtime.returnMs ?? DEFAULT_RETURN_MS)\n  }\n\n  function sampleGate(now = performance.now()) {\n    const ms = returnMs()\n    if (ms <= 0) {\n      gate = gateTarget\n      return gate\n    }\n    const t = Math.min(1, (now - gateT0) / ms)\n    const e = t * t * (3 - 2 * t)\n    gate = gateFrom + (gateTarget - gateFrom) * e\n    return gate\n  }\n\n  function goGate(to: number) {\n    if (to === 0) {\n      gate = 0\n      gateFrom = 0\n      gateTarget = 0\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateTarget !== 1) {\n      gateFrom = sampleGate()\n      gateTarget = 1\n      gateT0 = performance.now()\n    }\n    if (gate >= 0.999) {\n      gate = 1\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateRaf) return\n    const tick = (now: number) => {\n      sampleGate(now)\n      applyLean()\n      if (gateTarget === 1 && gate < 0.999) {\n        gateRaf = requestAnimationFrame(tick)\n      } else {\n        if (gateTarget === 1) gate = 1\n        gateRaf = 0\n      }\n    }\n    gateRaf = requestAnimationFrame(tick)\n  }\n\n  function applyLean(leavingEdge = false) {\n    if (reduced) {\n      spring.set(0)\n      return\n    }\n    if (playing) {\n      spring.set(tiltAngle(impulse || 1))\n      return\n    }\n    const down = impulse >= 0\n    const fade = leavingEdge\n      ? 1\n      : down\n        ? endFade(options.scroller)\n        : startFade(options.scroller)\n    if (fade <= 0.02) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    goGate(1)\n    const g = sampleGate()\n    spring.set(tiltAngle(impulse * fade * g))\n  }\n\n  function lean(amount: number, leavingEdge = false) {\n    if (reduced) return\n    const next = clampSigned(amount)\n    const nextSign = Math.sign(next)\n    const prevSign = Math.sign(impulse)\n    if (nextSign !== 0 && prevSign !== 0 && nextSign !== prevSign) {\n      impulse = next\n    } else {\n      const dir = nextSign || prevSign || 1\n      const mag = Math.max(\n        Math.abs(next),\n        Math.abs(impulse) * 0.62 + Math.abs(next) * 0.38\n      )\n      impulse = mag * dir\n    }\n    applyLean(leavingEdge)\n    if (idleTimer) clearTimeout(idleTimer)\n    idleTimer = setTimeout(() => {\n      impulse = 0\n      if (!playing) spring.set(0)\n    }, FOLIO_IDLE_MS)\n  }\n\n  const onWheel = (event: Event) => {\n    if (playing) return\n    const wheel = event as WheelEvent\n    // Lines (Firefox mouse wheels) and pages, in px.\n    const dy =\n      wheel.deltaMode === 1\n        ? wheel.deltaY * 16\n        : wheel.deltaMode === 2\n          ? wheel.deltaY * viewHeightOf(options.scroller)\n          : wheel.deltaY\n    if (!dy) return\n    const now = performance.now()\n    const gap = now - lastWheelAt\n    // A lone mouse notch counts as one frame's worth of travel.\n    const speed = dy / Math.min(50, Math.max(8, gap))\n    wheelVel = gap > WHEEL_GESTURE_GAP_MS ? speed : wheelVel * 0.6 + speed * 0.4\n    lastWheelAt = now\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    const leavingEnd = atEnd && dy < 0\n    const leavingStart = atStart && dy > 0\n    if ((atEnd && !leavingEnd) || (atStart && !leavingStart)) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    lean(clampSigned(wheelVel / WHEEL_VEL_REF), leavingEnd || leavingStart)\n  }\n\n  const onScroll = () => {\n    const now = performance.now()\n    const top = readScrollTop(options.scroller)\n    const dt = Math.max(8, now - lastTime)\n    const vel = (top - lastTop) / dt\n    lastTop = top\n    lastTime = now\n    if (playing) {\n      applyLean()\n      return\n    }\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    if (atEnd && vel >= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (atStart && vel <= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (now - lastWheelAt < WHEEL_SCROLL_LOCK_MS) {\n      applyLean(atEnd || atStart)\n      return\n    }\n    lean(clampSigned(vel / VEL_REF), (atEnd && vel < 0) || (atStart && vel > 0))\n  }\n\n  const wheelTarget: EventTarget = isWindow(options.scroller)\n    ? window\n    : options.scroller\n  wheelTarget.addEventListener(\"wheel\", onWheel, { passive: true })\n  options.scroller.addEventListener(\"scroll\", onScroll, { passive: true })\n  const onResize = () => paint(spring.get())\n  window.addEventListener(\"resize\", onResize)\n\n  const onPlay = (event: Event) => {\n    const detail = (event as CustomEvent<FolioPlayDetail>).detail ?? {}\n    if (options.demoId) {\n      if (!detail.target || detail.target !== options.demoId) return\n    } else if (detail.target) {\n      return\n    }\n\n    playAbort.current.abort()\n    playAbort.current = new AbortController()\n    const signal = playAbort.current.signal\n    const hold = detail.holdMs ?? 720\n    const scroller = detail.scrollRoot ?? options.scroller\n    playing = true\n    if (idleTimer) clearTimeout(idleTimer)\n    applyReduce()\n\n    void (async () => {\n      const max = maxScroll(scroller)\n      const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n      const limit = Math.max(0, max - zone - END_SLACK_PX)\n      let start = readScrollTop(scroller)\n      if (start >= limit - 24) {\n        impulse = 0\n        gate = 1\n        gateTarget = 1\n        spring.set(0)\n        if (isWindow(scroller)) window.scrollTo({ top: 0 })\n        else scroller.scrollTop = 0\n        lastTop = 0\n        start = 0\n      }\n      const dest = Math.min(\n        limit,\n        start + Math.max(560, viewHeightOf(scroller) * 1.35)\n      )\n      impulse = 1\n      gate = 1\n      gateTarget = 1\n      spring.set(TILT_PEAK)\n      await animateScroll(scroller, dest, Math.max(1400, hold + 700), signal)\n      if (signal.aborted) {\n        playing = false\n        applyReduce()\n        return\n      }\n      playing = false\n      applyReduce()\n      impulse = 0\n      spring.set(0)\n    })()\n  }\n\n  window.addEventListener(FOLIO_PLAY, onPlay)\n  paint(0)\n\n  return {\n    setOptions(next) {\n      if (next.blur !== undefined) runtime.blur = next.blur\n      if (next.perspective !== undefined) runtime.perspective = next.perspective\n      if (next.returnMs !== undefined) runtime.returnMs = next.returnMs\n      paint(spring.get())\n    },\n    destroy() {\n      playing = false\n      playAbort.current.abort()\n      if (idleTimer) clearTimeout(idleTimer)\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      spring.destroy()\n      options.plane.querySelector(\"[data-slot='folio-blur-veil']\")?.remove()\n      media.removeEventListener(\"change\", applyReduce)\n      wheelTarget.removeEventListener(\"wheel\", onWheel)\n      options.scroller.removeEventListener(\"scroll\", onScroll)\n      window.removeEventListener(\"resize\", onResize)\n      window.removeEventListener(FOLIO_PLAY, onPlay)\n      options.plane.style.transform = \"\"\n      options.plane.style.filter = \"\"\n      options.plane.style.willChange = \"\"\n      options.plane.style.backfaceVisibility = \"\"\n      options.plane.style.transformOrigin = \"\"\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props {\n    class?: string\n    /** Page content that leans while you scroll. */\n    children?: import(\"svelte\").Snippet\n    /** Peak blur in px at full tilt. Default `4`. */\n    blur?: number\n    /** CSS perspective distance in px. Default `1000`. Floor `1000`. */\n    perspective?: number\n    /**\n     * How long the lean takes to come back after the bottom, in ms.\n     * Default `520`.\n     */\n    returnMs?: number\n    /**\n     * Bind to the window and tilt `contentSelector` instead of wrapping\n     * children. Default `false` — this component *is* the scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element to tilt when `windowScroll` is set.\n     * Default `[data-folio-page]`.\n     */\n    contentSelector?: string\n    /** Accessible name for the tilting page. */\n    label?: string\n    /**\n     * Optional id for docs demos. `playFolioDemo({ target })` only\n     * animates instances whose `demoId` matches.\n     */\n    demoId?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    blur = 4,\n    perspective = 1000,\n    returnMs = 520,\n    windowScroll = false,\n    contentSelector = \"[data-folio-page]\",\n    label = \"Tilting page\",\n    demoId,\n  }: Props = $props()\n\n  let scrollerEl: HTMLDivElement | undefined = $state()\n  let planeEl: HTMLDivElement | undefined = $state()\n  let instance: FolioInstance | null = null\n\n  onMount(() => {\n    const scroller = windowScroll ? window : scrollerEl\n    const plane = windowScroll\n      ? document.querySelector<HTMLElement>(contentSelector)\n      : planeEl\n    if (!scroller || !plane) return\n\n    instance = createFolio({\n      plane,\n      scroller,\n      demoId,\n      blur,\n      perspective,\n      returnMs,\n    })\n\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({ blur, perspective, returnMs })\n  })\n</script>\n\n{#if !windowScroll}\n  <div\n    bind:this={scrollerEl}\n    data-slot=\"folio\"\n    data-folio-demo={demoId}\n    class={cn(\n      \"relative h-full overflow-x-hidden overflow-y-auto overscroll-contain\",\n      className\n    )}\n  >\n    <div\n      bind:this={planeEl}\n      data-slot=\"folio-plane\"\n      aria-label={label}\n      class=\"relative min-h-full overflow-x-clip [contain:paint]\"\n    >\n      {@render children?.()}\n    </div>\n  </div>\n{/if}\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/folio.svelte"
     }
diff --git a/public/r/folio.json b/public/r/folio.json
index 3cde265..b4bc4cc 100644
--- a/public/r/folio.json
+++ b/public/r/folio.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/folio/folio.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, type ReactNode } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const FOLIO_PLAY = \"folio:play\"\nexport const FOLIO_IDLE_MS = 200\n\nexport type FolioPlayDetail = {\n  /** Only instances whose `demoId` matches will play. */\n  target?: string\n  /** Nested scroller to drive. Omit for `window`. */\n  scrollRoot?: HTMLElement | null\n  /** How long to hold the lean before springing back, in ms. Default `420`. */\n  holdMs?: number\n}\n\nexport type FolioRuntimeOptions = {\n  /** Peak blur in px at full tilt. Default `4`. */\n  blur?: number\n  /** CSS perspective distance in px. Default `1000`. Floor `1000`. */\n  perspective?: number\n  /**\n   * How long the lean takes to come back after the bottom, in ms.\n   * Default `520`.\n   */\n  returnMs?: number\n}\n\nexport type FolioInstance = {\n  setOptions: (options: Partial<FolioRuntimeOptions>) => void\n  destroy: () => void\n}\n\nconst TILT_PEAK = 16\nconst DEFAULT_BLUR = 4\nconst DEFAULT_PERSPECTIVE = 1000\nconst MIN_PERSPECTIVE = 1000\nconst DEFAULT_RETURN_MS = 520\nconst VEL_REF = 2.4\nconst WHEEL_REF = 110\nconst WHEEL_SCROLL_LOCK_MS = 64\nconst END_SLACK_PX = 8\nconst SPRING_IN = { stiffness: 72, damping: 22 }\nconst SPRING_OUT = { stiffness: 42, damping: 18 }\n\ntype Spring = {\n  set: (value: number) => void\n  get: () => number\n  destroy: () => void\n}\n\nfunction createSpring(onChange: (value: number) => void): Spring {\n  let current = 0\n  let target = 0\n  let velocity = 0\n  let raf = 0\n  let lastTime = 0\n  let stiffness = SPRING_IN.stiffness\n  let damping = SPRING_IN.damping\n\n  function integrate(dt: number) {\n    const accel = -stiffness * (current - target) - damping * velocity\n    velocity += accel * dt\n    current += velocity * dt\n  }\n\n  function tick(now: number) {\n    if (!lastTime) lastTime = now\n    let remaining = Math.min((now - lastTime) / 1000, 0.048)\n    lastTime = now\n    const step = 1 / 60\n    while (remaining > 0) {\n      integrate(Math.min(step, remaining))\n      remaining -= step\n    }\n    const settled =\n      Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03\n    if (settled) {\n      current = target\n      velocity = 0\n      raf = 0\n      lastTime = 0\n      onChange(current)\n      return\n    }\n    onChange(current)\n    raf = requestAnimationFrame(tick)\n  }\n\n  function start() {\n    if (!raf) {\n      lastTime = 0\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  return {\n    set(value) {\n      target = value\n      if (value === 0) {\n        stiffness = SPRING_OUT.stiffness\n        damping = SPRING_OUT.damping\n      } else {\n        stiffness = SPRING_IN.stiffness\n        damping = SPRING_IN.damping\n      }\n      if (Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03) {\n        current = target\n        velocity = 0\n        onChange(current)\n        return\n      }\n      start()\n    },\n    get() {\n      return current\n    },\n    destroy() {\n      if (raf) cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\nfunction isWindow(scroller: HTMLElement | Window): scroller is Window {\n  return scroller === window\n}\n\nfunction readScrollTop(scroller: HTMLElement | Window) {\n  return isWindow(scroller)\n    ? window.scrollY || document.documentElement.scrollTop\n    : scroller.scrollTop\n}\n\nfunction maxScroll(scroller: HTMLElement | Window) {\n  if (isWindow(scroller)) {\n    return Math.max(\n      0,\n      document.documentElement.scrollHeight - window.innerHeight\n    )\n  }\n  return Math.max(0, scroller.scrollHeight - scroller.clientHeight)\n}\n\nfunction clamp01(n: number) {\n  return Math.max(0, Math.min(1, n))\n}\n\nfunction clampSigned(n: number) {\n  return Math.max(-1, Math.min(1, n))\n}\n\nfunction remainingScroll(scroller: HTMLElement | Window) {\n  return Math.max(0, maxScroll(scroller) - readScrollTop(scroller))\n}\n\n/** `1` in the body of the page, `0` at the bottom so the down-lean dies. */\nfunction endFade(scroller: HTMLElement | Window) {\n  const left = remainingScroll(scroller)\n  if (left <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((left - END_SLACK_PX) / zone)\n}\n\n/** `1` in the body of the page, `0` at the top so the up-lean dies. */\nfunction startFade(scroller: HTMLElement | Window) {\n  const top = readScrollTop(scroller)\n  if (top <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((top - END_SLACK_PX) / zone)\n}\n\n/** Map scroll delta to a signed -1…1 lean. Positive = scrolling down. */\nexport function leanFromDelta(deltaPx: number, ref = WHEEL_REF) {\n  return clampSigned(deltaPx / ref)\n}\n\n/** Slow travel sits near 5°, a flick reaches 16°. */\nfunction tiltAngle(impulse: number) {\n  const mag = Math.min(1, Math.abs(impulse))\n  const deg = mag * mag * (TILT_PEAK - 5) + mag * 5\n  return deg * Math.sign(impulse || 1)\n}\n\nfunction hingeY(\n  scroller: HTMLElement | Window,\n  plane: HTMLElement,\n  tilt: number\n) {\n  const vh = viewHeightOf(scroller)\n  const localViewTop = readScrollTop(scroller) - plane.offsetTop\n  if (Math.abs(tilt) < 0.35) return localViewTop + vh * 0.5\n  return tilt > 0 ? localViewTop + vh : localViewTop\n}\n\nexport function applyFolioFrame(\n  plane: HTMLElement,\n  tilt: number,\n  options: FolioRuntimeOptions = {},\n  reducedMotion = false,\n  originY?: number\n) {\n  const blur = Math.max(0, options.blur ?? DEFAULT_BLUR)\n  const perspective = Math.max(\n    MIN_PERSPECTIVE,\n    options.perspective ?? DEFAULT_PERSPECTIVE\n  )\n  const angle = reducedMotion ? 0 : tilt\n  const amount = Math.min(1, Math.abs(angle) / TILT_PEAK)\n  const blurPx = reducedMotion ? 0 : amount * blur\n\n  plane.style.transformOrigin =\n    originY !== undefined\n      ? `50% ${originY.toFixed(1)}px`\n      : Math.abs(angle) < 0.35\n        ? \"50% 50%\"\n        : angle > 0\n          ? \"50% 100%\"\n          : \"50% 0%\"\n  plane.style.backfaceVisibility = \"hidden\"\n  plane.style.transform = `perspective(${perspective}px) rotateX(${angle}deg)`\n  plane.style.filter = \"none\"\n\n  const veil = ensureBlurVeil(plane)\n  if (blurPx < 0.08) {\n    veil.style.cssText = \"display:none\"\n  } else {\n    const ramp =\n      angle >= 0\n        ? \"linear-gradient(to top, transparent 0%, transparent 32%, black 100%)\"\n        : \"linear-gradient(to bottom, transparent 0%, transparent 32%, black 100%)\"\n    veil.style.cssText = [\n      \"pointer-events:none\",\n      \"position:absolute\",\n      \"inset:0\",\n      \"z-index:2\",\n      `backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `-webkit-backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `mask-image:${ramp}`,\n      `-webkit-mask-image:${ramp}`,\n    ].join(\";\")\n  }\n  plane.style.willChange = Math.abs(angle) > 0.08 ? \"transform\" : \"auto\"\n}\n\nfunction animateScroll(\n  scroller: HTMLElement | Window,\n  to: number,\n  durationMs: number,\n  signal: AbortSignal\n) {\n  const from = readScrollTop(scroller)\n  if (durationMs <= 0) {\n    if (isWindow(scroller)) window.scrollTo({ top: to })\n    else scroller.scrollTop = to\n    return Promise.resolve()\n  }\n\n  const start = performance.now()\n  return new Promise<void>((resolve) => {\n    const step = (now: number) => {\n      if (signal.aborted) {\n        resolve()\n        return\n      }\n      const t = Math.min(1, (now - start) / durationMs)\n      const e = t * t * t * (t * (t * 6 - 15) + 10)\n      const y = from + (to - from) * e\n      if (isWindow(scroller)) window.scrollTo({ top: y })\n      else scroller.scrollTop = y\n      if (t < 1) requestAnimationFrame(step)\n      else resolve()\n    }\n    requestAnimationFrame(step)\n  })\n}\n\n/** Lean the page while scrolling down, then spring flat. */\nexport async function playFolioDemo(detail: FolioPlayDetail = {}) {\n  if (typeof window === \"undefined\") return\n  window.dispatchEvent(\n    new CustomEvent<FolioPlayDetail>(FOLIO_PLAY, { detail })\n  )\n  const hold = detail.holdMs ?? 720\n  await new Promise<void>((r) => window.setTimeout(r, hold + 1800))\n}\n\nfunction viewHeightOf(scroller: HTMLElement | Window) {\n  return isWindow(scroller) ? window.innerHeight : scroller.clientHeight\n}\n\nfunction ensureBlurVeil(plane: HTMLElement) {\n  let veil = plane.querySelector<HTMLElement>(\"[data-slot='folio-blur-veil']\")\n  if (!veil) {\n    if (getComputedStyle(plane).position === \"static\") {\n      plane.style.position = \"relative\"\n    }\n    veil = document.createElement(\"div\")\n    veil.dataset.slot = \"folio-blur-veil\"\n    veil.setAttribute(\"aria-hidden\", \"true\")\n    plane.appendChild(veil)\n  }\n  return veil\n}\n\nexport function createFolio(options: {\n  plane: HTMLElement\n  scroller: HTMLElement | Window\n  demoId?: string\n  blur?: number\n  perspective?: number\n  returnMs?: number\n}): FolioInstance {\n  const runtime: FolioRuntimeOptions = {\n    blur: options.blur,\n    perspective: options.perspective,\n    returnMs: options.returnMs,\n  }\n\n  let reduced = false\n  let playing = false\n  let lastTop = readScrollTop(options.scroller)\n  let lastTime = performance.now()\n  let lastWheelAt = 0\n  let impulse = 0\n  let gate = 1\n  let gateFrom = 1\n  let gateTarget = 1\n  let gateT0 = 0\n  let gateRaf = 0\n  let idleTimer: ReturnType<typeof setTimeout> | null = null\n  const playAbort = { current: new AbortController() }\n\n  const paint = (tilt: number) => {\n    applyFolioFrame(\n      options.plane,\n      tilt,\n      runtime,\n      reduced,\n      hingeY(options.scroller, options.plane, tilt)\n    )\n  }\n\n  const spring = createSpring(paint)\n\n  const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const applyReduce = () => {\n    reduced = media.matches && !playing\n    if (reduced) {\n      impulse = 0\n      gate = 1\n      spring.set(0)\n      paint(0)\n    }\n  }\n  applyReduce()\n  media.addEventListener(\"change\", applyReduce)\n\n  function returnMs() {\n    return Math.max(0, runtime.returnMs ?? DEFAULT_RETURN_MS)\n  }\n\n  function sampleGate(now = performance.now()) {\n    const ms = returnMs()\n    if (ms <= 0) {\n      gate = gateTarget\n      return gate\n    }\n    const t = Math.min(1, (now - gateT0) / ms)\n    const e = t * t * (3 - 2 * t)\n    gate = gateFrom + (gateTarget - gateFrom) * e\n    return gate\n  }\n\n  function goGate(to: number) {\n    if (to === 0) {\n      gate = 0\n      gateFrom = 0\n      gateTarget = 0\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateTarget !== 1) {\n      gateFrom = sampleGate()\n      gateTarget = 1\n      gateT0 = performance.now()\n    }\n    if (gate >= 0.999) {\n      gate = 1\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateRaf) return\n    const tick = (now: number) => {\n      sampleGate(now)\n      applyLean()\n      if (gateTarget === 1 && gate < 0.999) {\n        gateRaf = requestAnimationFrame(tick)\n      } else {\n        if (gateTarget === 1) gate = 1\n        gateRaf = 0\n      }\n    }\n    gateRaf = requestAnimationFrame(tick)\n  }\n\n  function applyLean(leavingEdge = false) {\n    if (reduced) {\n      spring.set(0)\n      return\n    }\n    if (playing) {\n      spring.set(tiltAngle(impulse || 1))\n      return\n    }\n    const down = impulse >= 0\n    const fade = leavingEdge\n      ? 1\n      : down\n        ? endFade(options.scroller)\n        : startFade(options.scroller)\n    if (fade <= 0.02) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    goGate(1)\n    const g = sampleGate()\n    spring.set(tiltAngle(impulse * fade * g))\n  }\n\n  function lean(amount: number, leavingEdge = false) {\n    if (reduced) return\n    const next = clampSigned(amount)\n    const nextSign = Math.sign(next)\n    const prevSign = Math.sign(impulse)\n    if (nextSign !== 0 && prevSign !== 0 && nextSign !== prevSign) {\n      impulse = next\n    } else {\n      const dir = nextSign || prevSign || 1\n      const mag = Math.max(\n        Math.abs(next),\n        Math.abs(impulse) * 0.62 + Math.abs(next) * 0.38\n      )\n      impulse = mag * dir\n    }\n    applyLean(leavingEdge)\n    if (idleTimer) clearTimeout(idleTimer)\n    idleTimer = setTimeout(() => {\n      impulse = 0\n      if (!playing) spring.set(0)\n    }, FOLIO_IDLE_MS)\n  }\n\n  const onWheel = (event: Event) => {\n    if (playing) return\n    const dy = (event as WheelEvent).deltaY\n    if (!dy) return\n    lastWheelAt = performance.now()\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    const leavingEnd = atEnd && dy < 0\n    const leavingStart = atStart && dy > 0\n    if ((atEnd && !leavingEnd) || (atStart && !leavingStart)) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    lean(leanFromDelta(dy), leavingEnd || leavingStart)\n  }\n\n  const onScroll = () => {\n    const now = performance.now()\n    const top = readScrollTop(options.scroller)\n    const dt = Math.max(8, now - lastTime)\n    const vel = (top - lastTop) / dt\n    lastTop = top\n    lastTime = now\n    if (playing) {\n      applyLean()\n      return\n    }\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    if (atEnd && vel >= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (atStart && vel <= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (now - lastWheelAt < WHEEL_SCROLL_LOCK_MS) {\n      applyLean(atEnd || atStart)\n      return\n    }\n    lean(clampSigned(vel / VEL_REF), (atEnd && vel < 0) || (atStart && vel > 0))\n  }\n\n  const wheelTarget: EventTarget = isWindow(options.scroller)\n    ? window\n    : options.scroller\n  wheelTarget.addEventListener(\"wheel\", onWheel, { passive: true })\n  options.scroller.addEventListener(\"scroll\", onScroll, { passive: true })\n  const onResize = () => paint(spring.get())\n  window.addEventListener(\"resize\", onResize)\n\n  const onPlay = (event: Event) => {\n    const detail = (event as CustomEvent<FolioPlayDetail>).detail ?? {}\n    if (options.demoId) {\n      if (!detail.target || detail.target !== options.demoId) return\n    } else if (detail.target) {\n      return\n    }\n\n    playAbort.current.abort()\n    playAbort.current = new AbortController()\n    const signal = playAbort.current.signal\n    const hold = detail.holdMs ?? 720\n    const scroller = detail.scrollRoot ?? options.scroller\n    playing = true\n    if (idleTimer) clearTimeout(idleTimer)\n    applyReduce()\n\n    void (async () => {\n      const max = maxScroll(scroller)\n      const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n      const limit = Math.max(0, max - zone - END_SLACK_PX)\n      let start = readScrollTop(scroller)\n      if (start >= limit - 24) {\n        impulse = 0\n        gate = 1\n        gateTarget = 1\n        spring.set(0)\n        if (isWindow(scroller)) window.scrollTo({ top: 0 })\n        else scroller.scrollTop = 0\n        lastTop = 0\n        start = 0\n      }\n      const dest = Math.min(\n        limit,\n        start + Math.max(560, viewHeightOf(scroller) * 1.35)\n      )\n      impulse = 1\n      gate = 1\n      gateTarget = 1\n      spring.set(TILT_PEAK)\n      await animateScroll(scroller, dest, Math.max(1400, hold + 700), signal)\n      if (signal.aborted) {\n        playing = false\n        applyReduce()\n        return\n      }\n      playing = false\n      applyReduce()\n      impulse = 0\n      spring.set(0)\n    })()\n  }\n\n  window.addEventListener(FOLIO_PLAY, onPlay)\n  paint(0)\n\n  return {\n    setOptions(next) {\n      if (next.blur !== undefined) runtime.blur = next.blur\n      if (next.perspective !== undefined) runtime.perspective = next.perspective\n      if (next.returnMs !== undefined) runtime.returnMs = next.returnMs\n      paint(spring.get())\n    },\n    destroy() {\n      playing = false\n      playAbort.current.abort()\n      if (idleTimer) clearTimeout(idleTimer)\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      spring.destroy()\n      options.plane.querySelector(\"[data-slot='folio-blur-veil']\")?.remove()\n      media.removeEventListener(\"change\", applyReduce)\n      wheelTarget.removeEventListener(\"wheel\", onWheel)\n      options.scroller.removeEventListener(\"scroll\", onScroll)\n      window.removeEventListener(\"resize\", onResize)\n      window.removeEventListener(FOLIO_PLAY, onPlay)\n      options.plane.style.transform = \"\"\n      options.plane.style.filter = \"\"\n      options.plane.style.willChange = \"\"\n      options.plane.style.backfaceVisibility = \"\"\n      options.plane.style.transformOrigin = \"\"\n    },\n  }\n}\n\nexport type FolioProps = FolioRuntimeOptions & {\n  className?: string\n  /** Page content that leans while you scroll. */\n  children?: ReactNode\n  /**\n   * Bind to the window and tilt `contentSelector` instead of wrapping\n   * children. Default `false` — this component *is* the scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element to tilt when `windowScroll` is set.\n   * Default `[data-folio-page]`.\n   */\n  contentSelector?: string\n  /** Accessible name for the tilting page. */\n  label?: string\n  /**\n   * Optional id for docs demos. `playFolioDemo({ target })` only\n   * animates instances whose `demoId` matches.\n   */\n  demoId?: string\n}\n\n/**\n * The whole page leans in perspective while you scroll, with a matching\n * blur. When scroll stops, it springs to flat.\n */\nexport function Folio({\n  className,\n  children,\n  blur = 4,\n  perspective = 1000,\n  returnMs = 520,\n  windowScroll = false,\n  contentSelector = \"[data-folio-page]\",\n  label = \"Tilting page\",\n  demoId,\n}: FolioProps) {\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const planeRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<FolioInstance | null>(null)\n\n  useEffect(() => {\n    const scroller = windowScroll ? window : scrollerRef.current\n    const plane = windowScroll\n      ? document.querySelector<HTMLElement>(contentSelector)\n      : planeRef.current\n    if (!scroller || !plane) return\n\n    instanceRef.current = createFolio({\n      plane,\n      scroller,\n      demoId,\n      blur,\n      perspective,\n      returnMs,\n    })\n\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; bind once per scroller mode.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, contentSelector, demoId])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({ blur, perspective, returnMs })\n  }, [blur, perspective, returnMs])\n\n  if (windowScroll) return null\n\n  return (\n    <div\n      ref={scrollerRef}\n      data-slot=\"folio\"\n      data-folio-demo={demoId}\n      className={cn(\n        \"relative h-full overflow-x-hidden overflow-y-auto overscroll-contain\",\n        className\n      )}\n    >\n      <div\n        ref={planeRef}\n        data-slot=\"folio-plane\"\n        aria-label={label}\n        className=\"relative min-h-full overflow-x-clip [contain:paint]\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, type ReactNode } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const FOLIO_PLAY = \"folio:play\"\nexport const FOLIO_IDLE_MS = 200\n\nexport type FolioPlayDetail = {\n  /** Only instances whose `demoId` matches will play. */\n  target?: string\n  /** Nested scroller to drive. Omit for `window`. */\n  scrollRoot?: HTMLElement | null\n  /** How long to hold the lean before springing back, in ms. Default `420`. */\n  holdMs?: number\n}\n\nexport type FolioRuntimeOptions = {\n  /** Peak blur in px at full tilt. Default `4`. */\n  blur?: number\n  /** CSS perspective distance in px. Default `1000`. Floor `1000`. */\n  perspective?: number\n  /**\n   * How long the lean takes to come back after the bottom, in ms.\n   * Default `520`.\n   */\n  returnMs?: number\n}\n\nexport type FolioInstance = {\n  setOptions: (options: Partial<FolioRuntimeOptions>) => void\n  destroy: () => void\n}\n\nconst TILT_PEAK = 16\nconst DEFAULT_BLUR = 4\nconst DEFAULT_PERSPECTIVE = 1000\nconst MIN_PERSPECTIVE = 1000\nconst DEFAULT_RETURN_MS = 520\nconst VEL_REF = 2.4\nconst WHEEL_REF = 110\n/**\n * Wheel speed, in px/ms, that leans all the way. Trackpads send a stream\n * of small deltas, so a lean read per event barely moved; speed reads a\n * fast swipe and a fast mouse flick the same.\n */\nconst WHEEL_VEL_REF = 1.1\n/** A wheel gap longer than this starts a fresh gesture. */\nconst WHEEL_GESTURE_GAP_MS = 150\nconst WHEEL_SCROLL_LOCK_MS = 64\nconst END_SLACK_PX = 8\nconst SPRING_IN = { stiffness: 72, damping: 22 }\nconst SPRING_OUT = { stiffness: 42, damping: 18 }\n\ntype Spring = {\n  set: (value: number) => void\n  get: () => number\n  destroy: () => void\n}\n\nfunction createSpring(onChange: (value: number) => void): Spring {\n  let current = 0\n  let target = 0\n  let velocity = 0\n  let raf = 0\n  let lastTime = 0\n  let stiffness = SPRING_IN.stiffness\n  let damping = SPRING_IN.damping\n\n  function integrate(dt: number) {\n    const accel = -stiffness * (current - target) - damping * velocity\n    velocity += accel * dt\n    current += velocity * dt\n  }\n\n  function tick(now: number) {\n    if (!lastTime) lastTime = now\n    let remaining = Math.min((now - lastTime) / 1000, 0.048)\n    lastTime = now\n    const step = 1 / 60\n    while (remaining > 0) {\n      integrate(Math.min(step, remaining))\n      remaining -= step\n    }\n    const settled =\n      Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03\n    if (settled) {\n      current = target\n      velocity = 0\n      raf = 0\n      lastTime = 0\n      onChange(current)\n      return\n    }\n    onChange(current)\n    raf = requestAnimationFrame(tick)\n  }\n\n  function start() {\n    if (!raf) {\n      lastTime = 0\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  return {\n    set(value) {\n      target = value\n      if (value === 0) {\n        stiffness = SPRING_OUT.stiffness\n        damping = SPRING_OUT.damping\n      } else {\n        stiffness = SPRING_IN.stiffness\n        damping = SPRING_IN.damping\n      }\n      if (Math.abs(current - target) < 0.03 && Math.abs(velocity) < 0.03) {\n        current = target\n        velocity = 0\n        onChange(current)\n        return\n      }\n      start()\n    },\n    get() {\n      return current\n    },\n    destroy() {\n      if (raf) cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\nfunction isWindow(scroller: HTMLElement | Window): scroller is Window {\n  return scroller === window\n}\n\nfunction readScrollTop(scroller: HTMLElement | Window) {\n  return isWindow(scroller)\n    ? window.scrollY || document.documentElement.scrollTop\n    : scroller.scrollTop\n}\n\nfunction maxScroll(scroller: HTMLElement | Window) {\n  if (isWindow(scroller)) {\n    return Math.max(\n      0,\n      document.documentElement.scrollHeight - window.innerHeight\n    )\n  }\n  return Math.max(0, scroller.scrollHeight - scroller.clientHeight)\n}\n\nfunction clamp01(n: number) {\n  return Math.max(0, Math.min(1, n))\n}\n\nfunction clampSigned(n: number) {\n  return Math.max(-1, Math.min(1, n))\n}\n\nfunction remainingScroll(scroller: HTMLElement | Window) {\n  return Math.max(0, maxScroll(scroller) - readScrollTop(scroller))\n}\n\n/** `1` in the body of the page, `0` at the bottom so the down-lean dies. */\nfunction endFade(scroller: HTMLElement | Window) {\n  const left = remainingScroll(scroller)\n  if (left <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((left - END_SLACK_PX) / zone)\n}\n\n/** `1` in the body of the page, `0` at the top so the up-lean dies. */\nfunction startFade(scroller: HTMLElement | Window) {\n  const top = readScrollTop(scroller)\n  if (top <= END_SLACK_PX) return 0\n  const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n  return clamp01((top - END_SLACK_PX) / zone)\n}\n\n/** Map scroll delta to a signed -1…1 lean. Positive = scrolling down. */\nexport function leanFromDelta(deltaPx: number, ref = WHEEL_REF) {\n  return clampSigned(deltaPx / ref)\n}\n\n/** Slow travel sits near 5°, a flick reaches 16°. */\nfunction tiltAngle(impulse: number) {\n  const mag = Math.min(1, Math.abs(impulse))\n  const deg = mag * mag * (TILT_PEAK - 5) + mag * 5\n  return deg * Math.sign(impulse || 1)\n}\n\nfunction hingeY(\n  scroller: HTMLElement | Window,\n  plane: HTMLElement,\n  tilt: number\n) {\n  const vh = viewHeightOf(scroller)\n  const localViewTop = readScrollTop(scroller) - plane.offsetTop\n  if (Math.abs(tilt) < 0.35) return localViewTop + vh * 0.5\n  return tilt > 0 ? localViewTop + vh : localViewTop\n}\n\nexport function applyFolioFrame(\n  plane: HTMLElement,\n  tilt: number,\n  options: FolioRuntimeOptions = {},\n  reducedMotion = false,\n  originY?: number\n) {\n  const blur = Math.max(0, options.blur ?? DEFAULT_BLUR)\n  const perspective = Math.max(\n    MIN_PERSPECTIVE,\n    options.perspective ?? DEFAULT_PERSPECTIVE\n  )\n  const angle = reducedMotion ? 0 : tilt\n  const amount = Math.min(1, Math.abs(angle) / TILT_PEAK)\n  const blurPx = reducedMotion ? 0 : amount * blur\n\n  plane.style.transformOrigin =\n    originY !== undefined\n      ? `50% ${originY.toFixed(1)}px`\n      : Math.abs(angle) < 0.35\n        ? \"50% 50%\"\n        : angle > 0\n          ? \"50% 100%\"\n          : \"50% 0%\"\n  plane.style.backfaceVisibility = \"hidden\"\n  plane.style.transform = `perspective(${perspective}px) rotateX(${angle}deg)`\n  plane.style.filter = \"none\"\n\n  const veil = ensureBlurVeil(plane)\n  if (blurPx < 0.08) {\n    veil.style.cssText = \"display:none\"\n  } else {\n    const ramp =\n      angle >= 0\n        ? \"linear-gradient(to top, transparent 0%, transparent 32%, black 100%)\"\n        : \"linear-gradient(to bottom, transparent 0%, transparent 32%, black 100%)\"\n    veil.style.cssText = [\n      \"pointer-events:none\",\n      \"position:absolute\",\n      \"inset:0\",\n      \"z-index:2\",\n      `backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `-webkit-backdrop-filter:blur(${blurPx.toFixed(2)}px)`,\n      `mask-image:${ramp}`,\n      `-webkit-mask-image:${ramp}`,\n    ].join(\";\")\n  }\n  plane.style.willChange = Math.abs(angle) > 0.08 ? \"transform\" : \"auto\"\n}\n\nfunction animateScroll(\n  scroller: HTMLElement | Window,\n  to: number,\n  durationMs: number,\n  signal: AbortSignal\n) {\n  const from = readScrollTop(scroller)\n  if (durationMs <= 0) {\n    if (isWindow(scroller)) window.scrollTo({ top: to })\n    else scroller.scrollTop = to\n    return Promise.resolve()\n  }\n\n  const start = performance.now()\n  return new Promise<void>((resolve) => {\n    const step = (now: number) => {\n      if (signal.aborted) {\n        resolve()\n        return\n      }\n      const t = Math.min(1, (now - start) / durationMs)\n      const e = t * t * t * (t * (t * 6 - 15) + 10)\n      const y = from + (to - from) * e\n      if (isWindow(scroller)) window.scrollTo({ top: y })\n      else scroller.scrollTop = y\n      if (t < 1) requestAnimationFrame(step)\n      else resolve()\n    }\n    requestAnimationFrame(step)\n  })\n}\n\n/** Lean the page while scrolling down, then spring flat. */\nexport async function playFolioDemo(detail: FolioPlayDetail = {}) {\n  if (typeof window === \"undefined\") return\n  window.dispatchEvent(new CustomEvent<FolioPlayDetail>(FOLIO_PLAY, { detail }))\n  const hold = detail.holdMs ?? 720\n  await new Promise<void>((r) => window.setTimeout(r, hold + 1800))\n}\n\nfunction viewHeightOf(scroller: HTMLElement | Window) {\n  return isWindow(scroller) ? window.innerHeight : scroller.clientHeight\n}\n\nfunction ensureBlurVeil(plane: HTMLElement) {\n  let veil = plane.querySelector<HTMLElement>(\"[data-slot='folio-blur-veil']\")\n  if (!veil) {\n    if (getComputedStyle(plane).position === \"static\") {\n      plane.style.position = \"relative\"\n    }\n    veil = document.createElement(\"div\")\n    veil.dataset.slot = \"folio-blur-veil\"\n    veil.setAttribute(\"aria-hidden\", \"true\")\n    plane.appendChild(veil)\n  }\n  return veil\n}\n\nexport function createFolio(options: {\n  plane: HTMLElement\n  scroller: HTMLElement | Window\n  demoId?: string\n  blur?: number\n  perspective?: number\n  returnMs?: number\n}): FolioInstance {\n  const runtime: FolioRuntimeOptions = {\n    blur: options.blur,\n    perspective: options.perspective,\n    returnMs: options.returnMs,\n  }\n\n  let reduced = false\n  let playing = false\n  let lastTop = readScrollTop(options.scroller)\n  let lastTime = performance.now()\n  let lastWheelAt = 0\n  let wheelVel = 0\n  let impulse = 0\n  let gate = 1\n  let gateFrom = 1\n  let gateTarget = 1\n  let gateT0 = 0\n  let gateRaf = 0\n  let idleTimer: ReturnType<typeof setTimeout> | null = null\n  const playAbort = { current: new AbortController() }\n\n  const paint = (tilt: number) => {\n    applyFolioFrame(\n      options.plane,\n      tilt,\n      runtime,\n      reduced,\n      hingeY(options.scroller, options.plane, tilt)\n    )\n  }\n\n  const spring = createSpring(paint)\n\n  const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const applyReduce = () => {\n    reduced = media.matches && !playing\n    if (reduced) {\n      impulse = 0\n      gate = 1\n      spring.set(0)\n      paint(0)\n    }\n  }\n  applyReduce()\n  media.addEventListener(\"change\", applyReduce)\n\n  function returnMs() {\n    return Math.max(0, runtime.returnMs ?? DEFAULT_RETURN_MS)\n  }\n\n  function sampleGate(now = performance.now()) {\n    const ms = returnMs()\n    if (ms <= 0) {\n      gate = gateTarget\n      return gate\n    }\n    const t = Math.min(1, (now - gateT0) / ms)\n    const e = t * t * (3 - 2 * t)\n    gate = gateFrom + (gateTarget - gateFrom) * e\n    return gate\n  }\n\n  function goGate(to: number) {\n    if (to === 0) {\n      gate = 0\n      gateFrom = 0\n      gateTarget = 0\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateTarget !== 1) {\n      gateFrom = sampleGate()\n      gateTarget = 1\n      gateT0 = performance.now()\n    }\n    if (gate >= 0.999) {\n      gate = 1\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      gateRaf = 0\n      return\n    }\n    if (gateRaf) return\n    const tick = (now: number) => {\n      sampleGate(now)\n      applyLean()\n      if (gateTarget === 1 && gate < 0.999) {\n        gateRaf = requestAnimationFrame(tick)\n      } else {\n        if (gateTarget === 1) gate = 1\n        gateRaf = 0\n      }\n    }\n    gateRaf = requestAnimationFrame(tick)\n  }\n\n  function applyLean(leavingEdge = false) {\n    if (reduced) {\n      spring.set(0)\n      return\n    }\n    if (playing) {\n      spring.set(tiltAngle(impulse || 1))\n      return\n    }\n    const down = impulse >= 0\n    const fade = leavingEdge\n      ? 1\n      : down\n        ? endFade(options.scroller)\n        : startFade(options.scroller)\n    if (fade <= 0.02) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    goGate(1)\n    const g = sampleGate()\n    spring.set(tiltAngle(impulse * fade * g))\n  }\n\n  function lean(amount: number, leavingEdge = false) {\n    if (reduced) return\n    const next = clampSigned(amount)\n    const nextSign = Math.sign(next)\n    const prevSign = Math.sign(impulse)\n    if (nextSign !== 0 && prevSign !== 0 && nextSign !== prevSign) {\n      impulse = next\n    } else {\n      const dir = nextSign || prevSign || 1\n      const mag = Math.max(\n        Math.abs(next),\n        Math.abs(impulse) * 0.62 + Math.abs(next) * 0.38\n      )\n      impulse = mag * dir\n    }\n    applyLean(leavingEdge)\n    if (idleTimer) clearTimeout(idleTimer)\n    idleTimer = setTimeout(() => {\n      impulse = 0\n      if (!playing) spring.set(0)\n    }, FOLIO_IDLE_MS)\n  }\n\n  const onWheel = (event: Event) => {\n    if (playing) return\n    const wheel = event as WheelEvent\n    // Lines (Firefox mouse wheels) and pages, in px.\n    const dy =\n      wheel.deltaMode === 1\n        ? wheel.deltaY * 16\n        : wheel.deltaMode === 2\n          ? wheel.deltaY * viewHeightOf(options.scroller)\n          : wheel.deltaY\n    if (!dy) return\n    const now = performance.now()\n    const gap = now - lastWheelAt\n    // A lone mouse notch counts as one frame's worth of travel.\n    const speed = dy / Math.min(50, Math.max(8, gap))\n    wheelVel = gap > WHEEL_GESTURE_GAP_MS ? speed : wheelVel * 0.6 + speed * 0.4\n    lastWheelAt = now\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    const leavingEnd = atEnd && dy < 0\n    const leavingStart = atStart && dy > 0\n    if ((atEnd && !leavingEnd) || (atStart && !leavingStart)) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    lean(clampSigned(wheelVel / WHEEL_VEL_REF), leavingEnd || leavingStart)\n  }\n\n  const onScroll = () => {\n    const now = performance.now()\n    const top = readScrollTop(options.scroller)\n    const dt = Math.max(8, now - lastTime)\n    const vel = (top - lastTop) / dt\n    lastTop = top\n    lastTime = now\n    if (playing) {\n      applyLean()\n      return\n    }\n    const atEnd = endFade(options.scroller) <= 0.02\n    const atStart = startFade(options.scroller) <= 0.02\n    if (atEnd && vel >= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (atStart && vel <= 0) {\n      goGate(0)\n      impulse = 0\n      spring.set(0)\n      return\n    }\n    if (now - lastWheelAt < WHEEL_SCROLL_LOCK_MS) {\n      applyLean(atEnd || atStart)\n      return\n    }\n    lean(clampSigned(vel / VEL_REF), (atEnd && vel < 0) || (atStart && vel > 0))\n  }\n\n  const wheelTarget: EventTarget = isWindow(options.scroller)\n    ? window\n    : options.scroller\n  wheelTarget.addEventListener(\"wheel\", onWheel, { passive: true })\n  options.scroller.addEventListener(\"scroll\", onScroll, { passive: true })\n  const onResize = () => paint(spring.get())\n  window.addEventListener(\"resize\", onResize)\n\n  const onPlay = (event: Event) => {\n    const detail = (event as CustomEvent<FolioPlayDetail>).detail ?? {}\n    if (options.demoId) {\n      if (!detail.target || detail.target !== options.demoId) return\n    } else if (detail.target) {\n      return\n    }\n\n    playAbort.current.abort()\n    playAbort.current = new AbortController()\n    const signal = playAbort.current.signal\n    const hold = detail.holdMs ?? 720\n    const scroller = detail.scrollRoot ?? options.scroller\n    playing = true\n    if (idleTimer) clearTimeout(idleTimer)\n    applyReduce()\n\n    void (async () => {\n      const max = maxScroll(scroller)\n      const zone = Math.max(96, viewHeightOf(scroller) * 0.4)\n      const limit = Math.max(0, max - zone - END_SLACK_PX)\n      let start = readScrollTop(scroller)\n      if (start >= limit - 24) {\n        impulse = 0\n        gate = 1\n        gateTarget = 1\n        spring.set(0)\n        if (isWindow(scroller)) window.scrollTo({ top: 0 })\n        else scroller.scrollTop = 0\n        lastTop = 0\n        start = 0\n      }\n      const dest = Math.min(\n        limit,\n        start + Math.max(560, viewHeightOf(scroller) * 1.35)\n      )\n      impulse = 1\n      gate = 1\n      gateTarget = 1\n      spring.set(TILT_PEAK)\n      await animateScroll(scroller, dest, Math.max(1400, hold + 700), signal)\n      if (signal.aborted) {\n        playing = false\n        applyReduce()\n        return\n      }\n      playing = false\n      applyReduce()\n      impulse = 0\n      spring.set(0)\n    })()\n  }\n\n  window.addEventListener(FOLIO_PLAY, onPlay)\n  paint(0)\n\n  return {\n    setOptions(next) {\n      if (next.blur !== undefined) runtime.blur = next.blur\n      if (next.perspective !== undefined) runtime.perspective = next.perspective\n      if (next.returnMs !== undefined) runtime.returnMs = next.returnMs\n      paint(spring.get())\n    },\n    destroy() {\n      playing = false\n      playAbort.current.abort()\n      if (idleTimer) clearTimeout(idleTimer)\n      if (gateRaf) cancelAnimationFrame(gateRaf)\n      spring.destroy()\n      options.plane.querySelector(\"[data-slot='folio-blur-veil']\")?.remove()\n      media.removeEventListener(\"change\", applyReduce)\n      wheelTarget.removeEventListener(\"wheel\", onWheel)\n      options.scroller.removeEventListener(\"scroll\", onScroll)\n      window.removeEventListener(\"resize\", onResize)\n      window.removeEventListener(FOLIO_PLAY, onPlay)\n      options.plane.style.transform = \"\"\n      options.plane.style.filter = \"\"\n      options.plane.style.willChange = \"\"\n      options.plane.style.backfaceVisibility = \"\"\n      options.plane.style.transformOrigin = \"\"\n    },\n  }\n}\n\nexport type FolioProps = FolioRuntimeOptions & {\n  className?: string\n  /** Page content that leans while you scroll. */\n  children?: ReactNode\n  /**\n   * Bind to the window and tilt `contentSelector` instead of wrapping\n   * children. Default `false` — this component *is* the scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element to tilt when `windowScroll` is set.\n   * Default `[data-folio-page]`.\n   */\n  contentSelector?: string\n  /** Accessible name for the tilting page. */\n  label?: string\n  /**\n   * Optional id for docs demos. `playFolioDemo({ target })` only\n   * animates instances whose `demoId` matches.\n   */\n  demoId?: string\n}\n\n/**\n * The whole page leans in perspective while you scroll, with a matching\n * blur. When scroll stops, it springs to flat.\n */\nexport function Folio({\n  className,\n  children,\n  blur = 4,\n  perspective = 1000,\n  returnMs = 520,\n  windowScroll = false,\n  contentSelector = \"[data-folio-page]\",\n  label = \"Tilting page\",\n  demoId,\n}: FolioProps) {\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const planeRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<FolioInstance | null>(null)\n\n  useEffect(() => {\n    const scroller = windowScroll ? window : scrollerRef.current\n    const plane = windowScroll\n      ? document.querySelector<HTMLElement>(contentSelector)\n      : planeRef.current\n    if (!scroller || !plane) return\n\n    instanceRef.current = createFolio({\n      plane,\n      scroller,\n      demoId,\n      blur,\n      perspective,\n      returnMs,\n    })\n\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; bind once per scroller mode.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, contentSelector, demoId])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({ blur, perspective, returnMs })\n  }, [blur, perspective, returnMs])\n\n  if (windowScroll) return null\n\n  return (\n    <div\n      ref={scrollerRef}\n      data-slot=\"folio\"\n      data-folio-demo={demoId}\n      className={cn(\n        \"relative h-full overflow-x-hidden overflow-y-auto overscroll-contain\",\n        className\n      )}\n    >\n      <div\n        ref={planeRef}\n        data-slot=\"folio-plane\"\n        aria-label={label}\n        className=\"relative min-h-full overflow-x-clip [contain:paint]\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/folio.tsx"
     }
diff --git a/registry/folio/folio-vanilla.ts b/registry/folio/folio-vanilla.ts
index 864d7c6..cfce71e 100644
--- a/registry/folio/folio-vanilla.ts
+++ b/registry/folio/folio-vanilla.ts
@@ -34,6 +34,14 @@ const MIN_PERSPECTIVE = 1000
 const DEFAULT_RETURN_MS = 520
 const VEL_REF = 2.4
 const WHEEL_REF = 110
+/**
+ * Wheel speed, in px/ms, that leans all the way. Trackpads send a stream
+ * of small deltas, so a lean read per event barely moved; speed reads a
+ * fast swipe and a fast mouse flick the same.
+ */
+const WHEEL_VEL_REF = 1.1
+/** A wheel gap longer than this starts a fresh gesture. */
+const WHEEL_GESTURE_GAP_MS = 150
 const WHEEL_SCROLL_LOCK_MS = 64
 const END_SLACK_PX = 8
 const SPRING_IN = { stiffness: 72, damping: 22 }
@@ -274,9 +282,7 @@ function animateScroll(
 /** Lean the page while scrolling down, then spring flat. */
 export async function playFolioDemo(detail: FolioPlayDetail = {}) {
   if (typeof window === "undefined") return
-  window.dispatchEvent(
-    new CustomEvent<FolioPlayDetail>(FOLIO_PLAY, { detail })
-  )
+  window.dispatchEvent(new CustomEvent<FolioPlayDetail>(FOLIO_PLAY, { detail }))
   const hold = detail.holdMs ?? 720
   await new Promise<void>((r) => window.setTimeout(r, hold + 1800))
 }
@@ -318,6 +324,7 @@ export function createFolio(options: {
   let lastTop = readScrollTop(options.scroller)
   let lastTime = performance.now()
   let lastWheelAt = 0
+  let wheelVel = 0
   let impulse = 0
   let gate = 1
   let gateFrom = 1
@@ -453,9 +460,21 @@ export function createFolio(options: {
 
   const onWheel = (event: Event) => {
     if (playing) return
-    const dy = (event as WheelEvent).deltaY
+    const wheel = event as WheelEvent
+    // Lines (Firefox mouse wheels) and pages, in px.
+    const dy =
+      wheel.deltaMode === 1
+        ? wheel.deltaY * 16
+        : wheel.deltaMode === 2
+          ? wheel.deltaY * viewHeightOf(options.scroller)
+          : wheel.deltaY
     if (!dy) return
-    lastWheelAt = performance.now()
+    const now = performance.now()
+    const gap = now - lastWheelAt
+    // A lone mouse notch counts as one frame's worth of travel.
+    const speed = dy / Math.min(50, Math.max(8, gap))
+    wheelVel = gap > WHEEL_GESTURE_GAP_MS ? speed : wheelVel * 0.6 + speed * 0.4
+    lastWheelAt = now
     const atEnd = endFade(options.scroller) <= 0.02
     const atStart = startFade(options.scroller) <= 0.02
     const leavingEnd = atEnd && dy < 0
@@ -466,7 +485,7 @@ export function createFolio(options: {
       spring.set(0)
       return
     }
-    lean(leanFromDelta(dy), leavingEnd || leavingStart)
+    lean(clampSigned(wheelVel / WHEEL_VEL_REF), leavingEnd || leavingStart)
   }
 
   const onScroll = () => {
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index f08c1b9..ede6b3f 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -156,7 +156,7 @@ Exceptions:
 - Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
 - `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
-- `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
+- `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
 `prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
 
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index a82b783..504ab6c 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -309,7 +309,7 @@ Section. The sheet tips one way on scroll down, the other on scroll up, blur on
 
 Best fit: a long editorial page that should feel like one sheet.
 
-Not this: overscroll aurora (`stretchy-footer`). Do not use it when the user needs an obvious effect on a trackpad — issue [#29](https://github.com/radiumcoders/23rd.dev/issues/29) says the lean is barely visible on Mac. The docs “show effect” button calls `playFolioDemo`; that is a preview, not a stronger public tilt.
+Not this: overscroll aurora (`stretchy-footer`). The lean follows wheel speed, so a fast trackpad swipe leans about as far as a mouse flick; slow reading-speed scrolls stay subtle. The docs “show effect” button calls `playFolioDemo`; that is a preview, not a stronger public tilt.
 
 Deps: none. Key props: `children`, `blur` (4), `perspective` (1000, floor 1000), `returnMs` (520), `windowScroll` (false), `contentSelector` (`[data-folio-page]`), `label` (`"Tilting page"`), `demoId`.
 
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index 01b8143..11ff369 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -158,7 +158,7 @@ export function Essay() {
 }
 ```
 
-If the effect is too subtle, say so. Do not invent a `tilt` prop. Issue #29 tracks the Mac trackpad case. `playFolioDemo({ target, holdMs })` only runs the preview on a matching `demoId`.
+If the effect is too subtle, say so. Do not invent a `tilt` prop. `playFolioDemo({ target, holdMs })` only runs the preview on a matching `demoId`.
 
 Window mode:
 

From 8fc52dbe6f3e402fde44615b7651d332123fb40a Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 12:37:39 +0530
Subject: [PATCH 25/49] Add the landing page at /.

The wordmark and the whole catalogue in dot matrix sit beside one live
monitor: hovering or focusing a name runs that component on the screen
with its install command, loading each engine only when picked. The
temporary / redirect is gone, / joins the sitemap and is the app's
start URL, and the 23rd wordmark now leads home.

Closes #15
---
 app/(marketing)/page.tsx     |  50 +++++++++
 app/manifest.ts              |   2 +-
 app/sitemap.ts               |   1 +
 components/docs-shell.tsx    |   2 +-
 components/landing.tsx       | 210 +++++++++++++++++++++++++++++++++++
 components/monitor-feeds.tsx |  89 +++++++++++++++
 components/site-header.tsx   |   2 +-
 lib/tree.ts                  |  31 ++++++
 next.config.mjs              |   6 -
 9 files changed, 384 insertions(+), 9 deletions(-)
 create mode 100644 app/(marketing)/page.tsx
 create mode 100644 components/landing.tsx
 create mode 100644 components/monitor-feeds.tsx

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
new file mode 100644
index 0000000..efe1b26
--- /dev/null
+++ b/app/(marketing)/page.tsx
@@ -0,0 +1,50 @@
+import type { Root } from "fumadocs-core/page-tree"
+
+import { Landing, type CatalogSection } from "@/components/landing"
+import { getGithubRepoUrl } from "@/lib/github"
+import { buildPageMetadata, SITE_DESCRIPTION, SITE_TITLE } from "@/lib/seo"
+import { source } from "@/lib/source"
+import { sectionPageTree } from "@/lib/tree"
+
+export const metadata = buildPageMetadata({
+  title: SITE_TITLE,
+  description: SITE_DESCRIPTION,
+  path: "/",
+  absoluteTitle: true,
+})
+
+const COMPONENTS = "/docs/components/"
+
+/** The component catalogue, grouped the way the docs sidebar groups it. */
+function catalog(): CatalogSection[] {
+  return sectionPageTree(source.getPageTree() as Root)
+    .map((section) => ({
+      name: section.name ?? "",
+      items: section.items
+        .filter((item) => item.url.startsWith(COMPONENTS))
+        .map((item) => {
+          const slug = item.url.slice(COMPONENTS.length)
+          const page = source.getPage(["components", slug])
+          return {
+            title: item.title,
+            url: item.url,
+            slug,
+            description: page?.data.description ?? "",
+          }
+        }),
+    }))
+    .filter((section) => section.name && section.items.length > 0)
+}
+
+export default function HomePage() {
+  const sections = catalog()
+  return (
+    <main className="flex-1 overflow-x-clip">
+      <Landing
+        sections={sections}
+        initial="shader-gradient"
+        repoUrl={getGithubRepoUrl()}
+      />
+    </main>
+  )
+}
diff --git a/app/manifest.ts b/app/manifest.ts
index 3ae43ab..1231d49 100644
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -7,7 +7,7 @@ export default function manifest(): MetadataRoute.Manifest {
     name: `${SITE_NAME} — ${SITE_TAGLINE}`,
     short_name: SITE_NAME,
     description: SITE_DESCRIPTION,
-    start_url: "/docs/getting-started",
+    start_url: "/",
     display: "standalone",
     background_color: "#000000",
     theme_color: "#000000",
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 70f7e3d..016c848 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -18,6 +18,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
     entries.push({ url, changeFrequency, priority })
   }
 
+  add("/", 1)
   add("/sponsors", 0.6, "monthly")
   add("/terms", 0.2, "yearly")
   add("/privacy", 0.2, "yearly")
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 0f2d05a..84cf764 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -45,7 +45,7 @@ type TreeNode = PageNode | SeparatorNode | FolderNode
 function Wordmark() {
   return (
     <Link
-      href="/docs"
+      href="/"
       className="flex min-w-0 items-center gap-2.5 rounded-md text-[15px] font-semibold tracking-tight outline-none focus-visible:ring-2 focus-visible:ring-ring"
     >
       <Logo className="size-6 shrink-0" cornerRadius={5} />
diff --git a/components/landing.tsx b/components/landing.tsx
new file mode 100644
index 0000000..56ae6fd
--- /dev/null
+++ b/components/landing.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import { useEffect, useRef, useState, type CSSProperties } from "react"
+import Link from "next/link"
+import { RiArrowRightLine, RiGithubFill } from "@remixicon/react"
+
+import { CliCommand } from "@/components/cli-command"
+import { MonitorFeed } from "@/components/monitor-feeds"
+import { Triad } from "@/components/triad"
+import { buttonVariants } from "@/components/ui/button"
+import { FrameworkProvider } from "@/lib/framework"
+import { cn } from "@/lib/utils"
+
+export type CatalogItem = {
+  title: string
+  url: string
+  /** Registry item name, e.g. `shader-sky`. */
+  slug: string
+  description: string
+}
+
+export type CatalogSection = { name: string; items: CatalogItem[] }
+
+/** Pointer hover waits this long before switching feeds, so sweeping the list doesn't boot every engine. */
+const HOVER_DELAY_MS = 140
+
+/** Inside the monitor, `bg-background` is the screen, not the bench. */
+const screenTokens = { "--background": "var(--screen)" } as CSSProperties
+
+const FACTS = [
+  "shadcn registry",
+  "React + Svelte 5",
+  "You own the source",
+  "Honors reduced motion",
+]
+
+/**
+ * The landing page: the wordmark and the whole catalogue in dot matrix,
+ * beside one live monitor. Hovering or focusing a name puts that
+ * component on the screen; clicking opens its page.
+ */
+export function Landing({
+  sections,
+  initial,
+  repoUrl,
+}: {
+  sections: CatalogSection[]
+  initial: string
+  repoUrl: string
+}) {
+  const items = sections.flatMap((section) => section.items)
+  const [selected, setSelected] = useState(initial)
+  const timer = useRef<number | null>(null)
+  const current = items.find((item) => item.slug === selected) ?? items[0]
+
+  function cancel() {
+    if (timer.current) window.clearTimeout(timer.current)
+    timer.current = null
+  }
+
+  function select(slug: string, delay = 0) {
+    cancel()
+    if (delay === 0) {
+      setSelected(slug)
+      return
+    }
+    timer.current = window.setTimeout(() => setSelected(slug), delay)
+  }
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) window.clearTimeout(timer.current)
+    }
+  }, [])
+
+  if (!current) return null
+
+  return (
+    <FrameworkProvider>
+      <div className="@container/page mx-auto w-full max-w-7xl px-4 pt-12 pb-24 sm:px-6 sm:pt-20">
+        <div className="grid grid-cols-1 gap-x-14 gap-y-12 @4xl/page:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] @4xl/page:grid-rows-[auto_1fr]">
+          <header className="@4xl/page:col-start-1 @4xl/page:row-start-1">
+            <h1 className="font-display text-[clamp(5.5rem,18cqw,11rem)] leading-[0.78]">
+              23rd
+            </h1>
+            <p className="mt-8 max-w-md text-lg leading-relaxed text-muted-foreground">
+              Components that render — shaders, ASCII, dithering and motion
+              for shadcn/ui. Install one with the CLI, then it&rsquo;s yours to
+              edit.
+            </p>
+            <div className="mt-8 flex flex-wrap items-center gap-2">
+              <Link
+                href="/docs/getting-started"
+                className={cn(buttonVariants(), "rounded-lg")}
+              >
+                Get started
+                <RiArrowRightLine data-icon="inline-end" />
+              </Link>
+              <a
+                href={repoUrl}
+                className={cn(
+                  buttonVariants({ variant: "outline" }),
+                  "rounded-lg"
+                )}
+              >
+                <RiGithubFill data-icon="inline-start" />
+                GitHub
+              </a>
+            </div>
+            <ul className="mt-8 flex flex-wrap gap-x-5 gap-y-2 font-mono text-[11px] tracking-[0.08em] text-muted-foreground/80 uppercase">
+              {FACTS.map((fact) => (
+                <li key={fact}>{fact}</li>
+              ))}
+            </ul>
+          </header>
+
+          <figure
+            aria-label="Live preview"
+            className="self-start @4xl/page:sticky @4xl/page:top-6 @4xl/page:col-start-2 @4xl/page:row-span-2 @4xl/page:row-start-1"
+          >
+            <div
+              style={screenTokens}
+              className="relative isolate aspect-[4/3] overflow-hidden rounded-(--radius-screen) bg-background text-foreground [clip-path:inset(0_round_var(--radius-screen))] after:pointer-events-none after:absolute after:inset-0 after:z-50 after:rounded-[inherit] after:ring-1 after:ring-border after:ring-inset @4xl/page:aspect-auto @4xl/page:h-[min(62svh,640px)]"
+            >
+              <MonitorFeed
+                key={current.slug}
+                slug={current.slug}
+                fallback={
+                  <div className="flex size-full flex-col items-center justify-center gap-4 px-8 text-center">
+                    <span className="font-display text-5xl leading-none">
+                      {current.title}
+                    </span>
+                    <span className="max-w-xs text-sm text-muted-foreground">
+                      This one reacts to page scroll. Open its page to try it.
+                    </span>
+                  </div>
+                }
+              />
+            </div>
+
+            <figcaption className="mt-5 flex flex-col gap-3">
+              <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+                <p className="flex items-center gap-2.5 text-base font-medium">
+                  <Triad />
+                  {current.title}
+                </p>
+                <Link
+                  href={current.url}
+                  className={cn(
+                    buttonVariants({ variant: "outline", size: "sm" }),
+                    "rounded-lg"
+                  )}
+                >
+                  Open {current.title}
+                </Link>
+              </div>
+              <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
+                {current.description}
+              </p>
+              <CliCommand item={current.slug} className="my-0 mt-1" />
+            </figcaption>
+          </figure>
+
+          <nav
+            aria-label="Components"
+            className="flex flex-col gap-9 @4xl/page:col-start-1 @4xl/page:row-start-2"
+          >
+            {sections.map((section) => (
+              <section
+                key={section.name}
+                aria-labelledby={`index-${section.name}`}
+              >
+                <h2
+                  id={`index-${section.name}`}
+                  className="mb-3 font-mono text-[10.5px] tracking-[0.18em] text-muted-foreground/80 uppercase"
+                >
+                  {section.name}
+                </h2>
+                <ul className="flex flex-col gap-1">
+                  {section.items.map((item) => {
+                    const on = item.slug === current.slug
+                    return (
+                      <li key={item.slug}>
+                        <Link
+                          href={item.url}
+                          data-on={on || undefined}
+                          onPointerEnter={(event) => {
+                            if (event.pointerType === "mouse") {
+                              select(item.slug, HOVER_DELAY_MS)
+                            }
+                          }}
+                          onPointerLeave={cancel}
+                          onFocus={() => select(item.slug)}
+                          className="group -mx-1 flex items-center gap-3 rounded-md px-1 py-1 font-display text-[clamp(1.75rem,3.4cqw,2.25rem)] leading-none text-muted-foreground transition-colors duration-150 outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-on:text-foreground"
+                        >
+                          <span className="min-w-0">{item.title}</span>
+                          {on ? <Triad className="h-3.5 [&>span]:w-1" /> : null}
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </section>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </FrameworkProvider>
+  )
+}
diff --git a/components/monitor-feeds.tsx b/components/monitor-feeds.tsx
new file mode 100644
index 0000000..08f2cd0
--- /dev/null
+++ b/components/monitor-feeds.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import dynamic from "next/dynamic"
+import type { ComponentType, ReactNode } from "react"
+
+/**
+ * One live mount per registry item for the landing monitor. Each engine
+ * loads only when its feed is picked, and unmounts (freeing its WebGL
+ * context) when another one takes over.
+ */
+function feed<P extends object>(
+  load: () => Promise<ComponentType<P>>
+): ComponentType<P> {
+  return dynamic(load, { ssr: false, loading: () => null })
+}
+
+const AsciiFluid = feed(() =>
+  import("@/registry/ascii-fluid/ascii-fluid").then((m) => m.AsciiFluid)
+)
+const AsciiLogo = feed(() =>
+  import("@/registry/ascii-logo/ascii-logo").then((m) => m.AsciiLogo)
+)
+const Dithered404 = feed(() =>
+  import("@/registry/dithered-404/dithered-404").then((m) => m.Dithered404)
+)
+const GooeyColorPicker = feed(() =>
+  import("@/registry/gooey-color-picker/gooey-color-picker").then(
+    (m) => m.GooeyColorPicker
+  )
+)
+const LiveOrb = feed(() =>
+  import("@/registry/live-orb/live-orb").then((m) => m.LiveOrb)
+)
+const LogoBurst = feed(() =>
+  import("@/registry/logo-burst/logo-burst").then((m) => m.LogoBurst)
+)
+const PhosphorScore = feed(() =>
+  import("@/registry/phosphor-score/phosphor-score").then(
+    (m) => m.PhosphorScore
+  )
+)
+const RadiantLines = feed(() =>
+  import("@/registry/radiant-lines/radiant-lines").then((m) => m.RadiantLines)
+)
+const ShaderFire = feed(() =>
+  import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
+)
+const ShaderGradient = feed(() =>
+  import("@/registry/shader-gradient/shader-gradient").then(
+    (m) => m.ShaderGradient
+  )
+)
+const ShaderSky = feed(() =>
+  import("@/registry/shader-sky/shader-sky").then((m) => m.ShaderSky)
+)
+
+const FEEDS: Record<string, () => ReactNode> = {
+  "ascii-fluid": () => <AsciiFluid className="absolute inset-0" />,
+  "ascii-logo": () => <AsciiLogo className="absolute inset-0" />,
+  "dithered-404": () => <Dithered404 className="absolute inset-0" />,
+  "gooey-color-picker": () => (
+    <div className="flex size-full items-center justify-center">
+      <GooeyColorPicker defaultValue={{ h: 210, s: 90, l: 55, a: 1 }} />
+    </div>
+  ),
+  "live-orb": () => (
+    <div className="flex size-full items-center justify-center bg-[#0A0A0B]">
+      <LiveOrb size={220} />
+    </div>
+  ),
+  "logo-burst": () => <LogoBurst />,
+  "phosphor-score": () => <PhosphorScore />,
+  "radiant-lines": () => <RadiantLines />,
+  "shader-fire": () => <ShaderFire className="absolute inset-0" />,
+  "shader-gradient": () => <ShaderGradient className="absolute inset-0" />,
+  "shader-sky": () => <ShaderSky className="absolute inset-0" />,
+}
+
+/** Renders the live feed for a registry item, or `fallback` if it has none. */
+export function MonitorFeed({
+  slug,
+  fallback,
+}: {
+  slug: string
+  fallback: ReactNode
+}) {
+  const render = FEEDS[slug]
+  return render ? render() : fallback
+}
diff --git a/components/site-header.tsx b/components/site-header.tsx
index 8dcf255..ecb0cca 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -20,7 +20,7 @@ export function SiteHeader({ githubStars }: { githubStars?: number | null }) {
   return (
     <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
       <Link
-        href="/docs"
+        href="/"
         className="flex min-w-0 items-center gap-2 text-sm font-medium"
       >
         <Logo className="size-6 shrink-0" cornerRadius={4} />
diff --git a/lib/tree.ts b/lib/tree.ts
index cebb04e..7854645 100644
--- a/lib/tree.ts
+++ b/lib/tree.ts
@@ -29,3 +29,34 @@ export function flattenPageTree(root: Root): PageTreeItem[] {
   root.children.forEach(visit)
   return items
 }
+
+export interface PageTreeSection {
+  /** Separator label from `meta.json`, or `null` for pages before the first one. */
+  name: string | null
+  items: PageTreeItem[]
+}
+
+/** Pages grouped under the `---Label---` separators they follow. */
+export function sectionPageTree(root: Root): PageTreeSection[] {
+  const sections: PageTreeSection[] = [{ name: null, items: [] }]
+
+  function visit(node: Root["children"][number]) {
+    if (node.type === "separator") {
+      const name = extractName(node)
+      if (name) sections.push({ name, items: [] })
+    } else if (node.type === "page" && !node.external) {
+      sections.at(-1)!.items.push({ title: extractName(node), url: node.url })
+    } else if (node.type === "folder") {
+      if (node.index) {
+        sections.at(-1)!.items.push({
+          title: extractName(node.index),
+          url: node.index.url,
+        })
+      }
+      node.children.forEach(visit)
+    }
+  }
+
+  root.children.forEach(visit)
+  return sections.filter((section) => section.items.length > 0)
+}
diff --git a/next.config.mjs b/next.config.mjs
index a2e64f3..7ebb9ad 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -11,12 +11,6 @@ const config = {
   },
   async redirects() {
     return [
-      // Temporary until the landing page lands at `/`.
-      {
-        source: "/",
-        destination: "/docs/getting-started",
-        permanent: false,
-      },
       {
         source: "/docs",
         destination: "/docs/getting-started",

From cf027807e52241527df1f4440ae6730c7185123c Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:16:27 +0530
Subject: [PATCH 26/49] Rethink Shader Fire as cel-shaded flames with embers.

The soft orange wash gives way to graphic fire: a turbulent temperature
field, stretched tall and ridged so it curls into pointed tongues, drawn
as four flat bands (ember, flame, core, and a hot center). A new embers
prop sends three parallax layers of sparks drifting up, a warm glow
flickers along the floor, the fire ignites on first paint, and the
pointer draws a plume of flame up toward it. Dither now prints the band
edges as ordered dots. New light and dark palettes; speed and intensity
default to 1, and it pauses off-screen and in hidden tabs.
---
 .cursor/skills/23rd/SKILL.md                  |   2 +-
 .cursor/skills/23rd/apis.md                   |   7 +-
 .cursor/skills/23rd/components.md             |   8 +-
 .cursor/skills/23rd/recipes.md                |   2 +-
 README.md                                     |   2 +-
 content/docs/components/shader-fire.mdx       |  25 +-
 .../og/docs/components/shader-fire/image.png  | Bin 45493 -> 46265 bytes
 public/r/registry.json                        |   4 +-
 public/r/shader-fire-svelte.json              |   4 +-
 public/r/shader-fire.json                     |   4 +-
 registry/shader-fire/registry.json            |   4 +-
 registry/shader-fire/shader-fire-demo.tsx     |  59 +-
 registry/shader-fire/shader-fire-vanilla.ts   | 560 +++++++++++-------
 registry/shader-fire/shader-fire.svelte       |  17 +-
 registry/shader-fire/shader-fire.tsx          |  42 +-
 skills/23rd/SKILL.md                          |   2 +-
 skills/23rd/apis.md                           |   7 +-
 skills/23rd/components.md                     |   8 +-
 skills/23rd/recipes.md                        |   2 +-
 19 files changed, 463 insertions(+), 296 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index ede6b3f..c708d21 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -171,7 +171,7 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
-| `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
+| `shader-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index 167c924..e975d29 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -151,10 +151,11 @@ type ShaderGradientProps = {
 
 ```ts
 type ShaderFireProps = {
-  colors?: string[] // ember, flame, highlight
-  speed?: number // 0.55
-  intensity?: number // 0.55
+  colors?: string[] // ember, flame, core
+  speed?: number // 1
+  intensity?: number // 1
   height?: number // 0.45
+  embers?: number // 0.6
   interactive?: boolean // true
   dither?: boolean // false
   pixelSize?: number // 1
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index 504ab6c..f6e2dbe 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -145,13 +145,13 @@ Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. S
 
 ## shader-fire
 
-Shader. Sparse tongues from the bottom edge. Ember / flame / highlight.
+Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Ember / flame / core.
 
-Best fit: heat behind a hero. `dither` turns the wash into Bayer pixels.
+Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
 
 Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
 
-Deps: none. Key props: `colors`, `speed` (0.55), `intensity` (0.55), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+Deps: none. Key props: `colors`, `speed` (1), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
 ```tsx
 "use client"
@@ -167,7 +167,7 @@ export function Hero() {
 }
 ```
 
-Pitfalls: `interactive` adds heat under the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#9C3A24 #C96A32 #E6C4A0`. Dark `#A33A18 #D4682A #E8B45A`.
+Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. `embers={0}` turns sparks off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
 
 ## shader-sky
 
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index 11ff369..c4a4e95 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -33,7 +33,7 @@ Swap the component, keep the shell:
 | Brief | Component | Extra props |
 | --- | --- | --- |
 | Fire along the floor | `ShaderFire` | `height={0.45}` |
-| Pixel fire | `ShaderFire` | `dither pixelSize={1}` |
+| Pixel fire | `ShaderFire` | `dither pixelSize={3}` |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |
diff --git a/README.md b/README.md
index a149d2d..138a9ac 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Logo Burst](https://23rd.dev/docs/components/logo-burst)                 | `@23rd/logo-burst`         | Hair-line tentacles explode from the center, then breathe — light and dark         |
 | [Phosphor Score](https://23rd.dev/docs/components/phosphor-score)         | `@23rd/phosphor-score`     | Vertical CRT sheet music — notes fall, bloom at the playhead, then exit in a flare |
 | [Radiant Lines](https://23rd.dev/docs/components/radiant-lines)           | `@23rd/radiant-lines`      | Hyperspace starfield background; warp speed driven by scroll                       |
-| [Shader Fire](https://23rd.dev/docs/components/shader-fire)               | `@23rd/shader-fire`        | Sparse 2D fire wash — tongues rise from the bottom behind a landing hero           |
+| [Shader Fire](https://23rd.dev/docs/components/shader-fire)               | `@23rd/shader-fire`        | Cel-shaded flames and sparks rising from the bottom of a landing hero             |
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
diff --git a/content/docs/components/shader-fire.mdx b/content/docs/components/shader-fire.mdx
index def98b4..97d304d 100644
--- a/content/docs/components/shader-fire.mdx
+++ b/content/docs/components/shader-fire.mdx
@@ -1,11 +1,11 @@
 ---
 title: Shader Fire
-description: A sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, sit behind UI, follow the theme, optional pointer heat.
+description: Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above them, and the fire reaches for the pointer.
 ---
 
 import { ShaderFireDemo } from "@/registry/shader-fire/shader-fire-demo"
 
-Not a wall of flame. Use it as heat under a hero or wait screen so the page feels finished without covering the copy. Sienna / amber / dusty peach on paper in light mode; visible coals on slate in dark. Toggle **Dither** for an ordered Bayer print of the same field. Press `d` to switch theme.
+Flat, graphic fire rather than a photo of one. Four crisp bands (ember, flame, core, and a hot center) curl up from the bottom edge, sparks drift up past the copy, and a warm glow flickers under it all. Move the pointer over it and a plume of flame reaches up toward it. Toggle **Dither** to print the same bands as ordered Bayer pixels. Press `d` to switch theme.
 
 ## Preview
 
@@ -39,10 +39,10 @@ export function Hero() {
           New
         </p>
         <h1 className="mt-3 text-4xl font-medium tracking-tight">
-          Heat under the headline
+          Ship something that catches
         </h1>
         <p className="mt-3 text-muted-foreground">
-          The fire stays a wash. The page stays readable.
+          Flames along the floor. The copy stays clear.
         </p>
       </div>
     </section>
@@ -63,10 +63,10 @@ export function Hero() {
       New
     </p>
     <h1 class="mt-3 text-4xl font-medium tracking-tight">
-      Heat under the headline
+      Ship something that catches
     </h1>
     <p class="mt-3 text-muted-foreground">
-      The fire stays a wash. The page stays readable.
+      Flames along the floor. The copy stays clear.
     </p>
   </div>
 </section>
@@ -91,17 +91,17 @@ Force a palette if the parent theme should not drive it:
   </FrameworkSvelte>
 </FrameworkCode>
 
-Print the same field as ordered Bayer pixels:
+Print the same bands as ordered Bayer pixels:
 
 <FrameworkCode>
   <FrameworkReact>
 ```tsx
-<ShaderFire dither pixelSize={1} />
+<ShaderFire dither pixelSize={3} />
 ```
   </FrameworkReact>
   <FrameworkSvelte>
 ```svelte
-<ShaderFire dither pixelSize={1} />
+<ShaderFire dither pixelSize={3} />
 ```
   </FrameworkSvelte>
 </FrameworkCode>
@@ -110,10 +110,11 @@ Print the same field as ordered Bayer pixels:
 
 | Prop | Type | Default |
 | --- | --- | --- |
-| `colors` | `string[]` | ember / flame / highlight |
-| `speed` | `number` | `0.55` |
-| `intensity` | `number` | `0.55` |
+| `colors` | `string[]` | ember / flame / core |
+| `speed` | `number` | `1` |
+| `intensity` | `number` | `1` |
 | `height` | `number` | `0.45` |
+| `embers` | `number` | `0.6` |
 | `interactive` | `boolean` | `true` |
 | `dither` | `boolean` | `false` |
 | `pixelSize` | `number` | `1` |
diff --git a/public/og/docs/components/shader-fire/image.png b/public/og/docs/components/shader-fire/image.png
index e6942cb852a3a52baa1a72b0a8cdb4ab79484d7c..75d1d565314262ebecc5807b6076de78029b0d48 100644
GIT binary patch
literal 46265
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

literal 45493
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
BM~naf

diff --git a/public/r/registry.json b/public/r/registry.json
index e259bc3..94831c4 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -245,7 +245,7 @@
     {
       "name": "shader-fire",
       "title": "Shader Fire",
-      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "files": [
         {
           "path": "registry/shader-fire/shader-fire.tsx",
@@ -258,7 +258,7 @@
     {
       "name": "shader-fire-svelte",
       "title": "Shader Fire",
-      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "dependencies": [],
       "files": [
         {
diff --git a/public/r/shader-fire-svelte.json b/public/r/shader-fire-svelte.json
index 1c2d0f9..828e28e 100644
--- a/public/r/shader-fire-svelte.json
+++ b/public/r/shader-fire-svelte.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shader-fire-svelte",
   "title": "Shader Fire",
-  "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
   "dependencies": [],
   "files": [
     {
       "path": "registry/shader-fire/shader-fire.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.55,\n    intensity = 0.55,\n    height = 0.45,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `1`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 1\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: ShaderFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    embers = DEFAULT_EMBERS,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-fire.svelte"
     }
diff --git a/public/r/shader-fire.json b/public/r/shader-fire.json
index f1ba1f5..aef5103 100644
--- a/public/r/shader-fire.json
+++ b/public/r/shader-fire.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shader-fire",
   "title": "Shader Fire",
-  "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
   "files": [
     {
       "path": "registry/shader-fire/shader-fire.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderFireProps = Omit<ShaderFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function ShaderFire({\n  className,\n  colors,\n  speed = 0.55,\n  intensity = 0.55,\n  height = 0.45,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `1`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 1\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: ShaderFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderFireProps = Omit<ShaderFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, with sparks drifting\n * above them. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  embers = DEFAULT_EMBERS,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    intensity,\n    height,\n    embers,\n    interactive,\n    dither,\n    pixelSize,\n    theme,\n  ])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* The canvas carries the radius itself: a WebGL layer can slip past a\n          parent's rounded clip on some GPUs. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-fire.tsx"
     }
diff --git a/registry/shader-fire/registry.json b/registry/shader-fire/registry.json
index a32ade4..43697ff 100644
--- a/registry/shader-fire/registry.json
+++ b/registry/shader-fire/registry.json
@@ -5,7 +5,7 @@
       "name": "shader-fire",
       "type": "registry:ui",
       "title": "Shader Fire",
-      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "files": [
         {
           "path": "shader-fire.tsx",
@@ -18,7 +18,7 @@
       "name": "shader-fire-svelte",
       "type": "registry:ui",
       "title": "Shader Fire",
-      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "files": [
         {
           "path": "shader-fire.svelte",
diff --git a/registry/shader-fire/shader-fire-demo.tsx b/registry/shader-fire/shader-fire-demo.tsx
index 48e12f2..9014ef6 100644
--- a/registry/shader-fire/shader-fire-demo.tsx
+++ b/registry/shader-fire/shader-fire-demo.tsx
@@ -14,6 +14,10 @@ import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
   DARK_COLORS,
+  DEFAULT_EMBERS,
+  DEFAULT_HEIGHT,
+  DEFAULT_INTENSITY,
+  DEFAULT_SPEED,
   LIGHT_COLORS,
   ShaderFire,
 } from "@/registry/shader-fire/shader-fire"
@@ -38,9 +42,10 @@ export function ShaderFireDemo() {
 
   const defaults = useMemo(
     () => ({
-      speed: 0.55,
-      intensity: 0.55,
-      height: 0.45,
+      speed: DEFAULT_SPEED,
+      intensity: DEFAULT_INTENSITY,
+      height: DEFAULT_HEIGHT,
+      embers: DEFAULT_EMBERS,
       interactive: true,
       overlay: true,
       dither: false,
@@ -75,6 +80,7 @@ export function ShaderFireDemo() {
             speed={props.speed}
             intensity={props.intensity}
             height={props.height}
+            embers={props.embers}
             interactive={props.interactive}
             dither={props.dither}
             pixelSize={props.pixelSize}
@@ -84,18 +90,18 @@ export function ShaderFireDemo() {
             <>
               <div
                 aria-hidden
-                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
+                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-30 dark:opacity-40"
               />
               <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
                 <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">
-                  Atmosphere
+                  Now burning
                 </p>
                 <h3 className="mt-3 max-w-lg text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
-                  Heat under the headline
+                  Ship something that catches
                 </h3>
                 <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
-                  Sparse tongues rise from the bottom. Copy stays in the quiet
-                  middle; the fire stays a wash.
+                  Flames lick up from the floor and sparks drift past the copy.
+                  Move the pointer and the fire reaches for it.
                 </p>
                 <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
                   <Button type="button">Install</Button>
@@ -118,12 +124,14 @@ export function ShaderFireDemo() {
         onReset={resetProps}
         component="ShaderFire"
         snippetProps={{
-          speed: props.speed,
-          intensity: props.intensity,
-          height: props.height,
-          interactive: props.interactive,
-          dither: props.dither,
-          pixelSize: props.pixelSize,
+          speed: props.speed === DEFAULT_SPEED ? undefined : props.speed,
+          intensity:
+            props.intensity === DEFAULT_INTENSITY ? undefined : props.intensity,
+          height: props.height === DEFAULT_HEIGHT ? undefined : props.height,
+          embers: props.embers === DEFAULT_EMBERS ? undefined : props.embers,
+          interactive: props.interactive ? undefined : false,
+          dither: props.dither || undefined,
+          pixelSize: props.pixelSize === 1 ? undefined : props.pixelSize,
           colors: useAutoTheme ? undefined : props.colors,
         }}
       >
@@ -132,24 +140,25 @@ export function ShaderFireDemo() {
           colors={props.colors}
           palettes={[
             palette,
-            ["#1E3A5F", "#4A90A4", "#C5E4E7"],
-            ["#5B1E6E", "#C44569", "#FFA07A"],
-            ["#1A1A1A", "#6B4F3A", "#E8E4DC"],
+            // Coolest to hottest: ember, flame, core.
+            ["#1D3FD1", "#2F8CFF", "#8EE3FF"],
+            ["#0F7A3A", "#3DDC5A", "#D4FF6B"],
+            ["#6A1BB0", "#D63FD2", "#FF9DE2"],
           ]}
           onChange={(colors) => updateProp("colors", colors)}
         />
         <ControlSlider
           label="Speed"
           value={props.speed}
-          min={0.1}
-          max={1.4}
+          min={0.2}
+          max={2}
           step={0.05}
           onChange={(v) => updateProp("speed", v)}
         />
         <ControlSlider
           label="Intensity"
           value={props.intensity}
-          min={0.2}
+          min={0.3}
           max={1}
           step={0.05}
           onChange={(v) => updateProp("intensity", v)}
@@ -162,6 +171,14 @@ export function ShaderFireDemo() {
           step={0.05}
           onChange={(v) => updateProp("height", v)}
         />
+        <ControlSlider
+          label="Embers"
+          value={props.embers}
+          min={0}
+          max={1}
+          step={0.05}
+          onChange={(v) => updateProp("embers", v)}
+        />
         <ControlSwitch
           label="Copy"
           description="Headline over the fire"
@@ -170,7 +187,7 @@ export function ShaderFireDemo() {
         />
         <ControlSwitch
           label="Interactive"
-          description="Heat follows the pointer"
+          description="Flames reach for the pointer"
           checked={props.interactive}
           onChange={(v) => updateProp("interactive", v)}
         />
diff --git a/registry/shader-fire/shader-fire-vanilla.ts b/registry/shader-fire/shader-fire-vanilla.ts
index c6a6736..06eeaa4 100644
--- a/registry/shader-fire/shader-fire-vanilla.ts
+++ b/registry/shader-fire/shader-fire-vanilla.ts
@@ -1,19 +1,24 @@
 export type ShaderFireTheme = "light" | "dark" | "auto"
 
 export type ShaderFireOptions = {
-  /** Ember / flame / highlight hex */
+  /**
+   * Three colors, coolest to hottest: ember, flame, core. In dark mode the
+   * densest heat still burns past the core toward white.
+   */
   colors?: string[]
-  /** Rise speed. Default 0.55 */
+  /** How fast the flames rise. Default `1`. */
   speed?: number
-  /** Coverage 0–1. Default 0.55 */
+  /** Opacity of the fire and its glow, 0–1. Default `1`. */
   intensity?: number
-  /** How far tongues climb 0–1. Default 0.45 */
+  /** How far the flames climb, 0–1. Default `0.45`. */
   height?: number
-  /** Local heat under the pointer. Default true */
+  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */
+  embers?: number
+  /** A plume of heat reaches up toward the pointer. Default `true`. */
   interactive?: boolean
-  /** Ordered Bayer pixels instead of a soft wash. Default false */
+  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */
   dither?: boolean
-  /** Dither cell size in CSS px. Default `1` */
+  /** Dither cell size in CSS px. Default `1`. */
   pixelSize?: number
   /**
    * Palette mode. Default `auto` follows shadcn / next-themes
@@ -29,30 +34,34 @@ export type ShaderFireInstance = {
   destroy: () => void
 }
 
-/** Warm ink on paper — sienna / amber / dusty peach */
-export const LIGHT_COLORS = ["#9C3A24", "#C96A32", "#E6C4A0"]
-/** Visible coals on slate — ember / flame / highlight */
-export const DARK_COLORS = ["#A33A18", "#D4682A", "#E8B45A"]
-
-export const LIGHT_FALLBACK = {
-  backgroundColor: "#FCFBF9",
-  backgroundImage: [
-    "radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)",
-    "radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)",
-    "radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)",
-    "radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)",
-  ].join(", "),
-} as const
-
-export const DARK_FALLBACK = {
-  backgroundColor: "#08090C",
-  backgroundImage: [
-    "radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)",
-    "radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)",
-    "radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)",
-    "radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)",
-  ].join(", "),
-} as const
+/** Brick, flame orange and marigold — saturated enough to hold on paper. */
+export const LIGHT_COLORS = ["#D8341A", "#F9731E", "#FFBA3A"]
+/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */
+export const DARK_COLORS = ["#B4200A", "#FF6512", "#FFC04A"]
+const LIGHT_BASE = "#FCFBF9"
+const DARK_BASE = "#08090C"
+
+export const DEFAULT_SPEED = 1
+export const DEFAULT_INTENSITY = 1
+export const DEFAULT_HEIGHT = 0.45
+export const DEFAULT_EMBERS = 0.6
+
+function fallback(colors: string[], base: string) {
+  const [ember, flame, core] = colors
+  return {
+    backgroundColor: base,
+    backgroundImage: [
+      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,
+      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,
+      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,
+      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,
+    ].join(", "),
+  } as const
+}
+
+/** Shown before the first frame and wherever WebGL isn't available. */
+export const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)
+export const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)
 
 const VERT = `
 attribute vec2 a_position;
@@ -66,42 +75,55 @@ precision highp float;
 
 uniform vec2 u_resolution;
 uniform float u_time;
-uniform float u_speed;
 uniform float u_intensity;
 uniform float u_height;
+uniform float u_embers;
+uniform float u_ignite;
 uniform float u_dark;
 uniform float u_dither;
-uniform float u_pixelSize;
+uniform float u_pixel;
+uniform float u_pointer;
+uniform vec2 u_mouse;
+// Ember, flame, core and the paper / ink underneath, in linear light.
+uniform vec3 u_c0;
 uniform vec3 u_c1;
 uniform vec3 u_c2;
-uniform vec3 u_c3;
-uniform vec2 u_mouse;
+uniform vec3 u_base;
 
+// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.
 float hash(vec2 p) {
-  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+vec2 hash2(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.xx + p3.yz) * p3.zy);
 }
 
 float noise(vec2 p) {
   vec2 i = floor(p);
   vec2 f = fract(p);
-  float a = hash(i);
-  float b = hash(i + vec2(1.0, 0.0));
-  float c = hash(i + vec2(0.0, 1.0));
-  float d = hash(i + vec2(1.0, 1.0));
   vec2 u = f * f * (3.0 - 2.0 * f);
-  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
 }
 
 float fbm(vec2 p) {
   float v = 0.0;
   float a = 0.5;
   mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
-  for (int i = 0; i < 5; i++) {
+  for (int i = 0; i < 3; i++) {
     v += a * noise(p);
     p = m * p;
     a *= 0.5;
   }
-  return v;
+  return v / 0.875;
 }
 
 // Classic Bayer (WebGL1-safe, no bitwise ops)
@@ -111,107 +133,159 @@ float bayer2(vec2 c) {
 
 float bayer4(vec2 p) {
   vec2 c = mod(floor(p), 4.0);
-  vec2 hi = floor(c * 0.5);
-  vec2 lo = mod(c, 2.0);
-  return bayer2(lo) * 4.0 + bayer2(hi);
+  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));
 }
 
 float bayer8(vec2 p) {
   vec2 c = mod(floor(p), 8.0);
-  vec2 hi = floor(c * 0.5);
-  vec2 lo = mod(c, 2.0);
-  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;
+  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;
 }
 
-float fireField(vec2 uv, float aspect, float t) {
-  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));
-
-  // Column space — sway as they rise
-  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);
-  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);
+float climbOf() {
+  return mix(0.18, 0.78, u_height) * u_ignite;
+}
 
-  // Two-pass domain warp — curling tongues, not blobs
-  vec2 w1 = vec2(
-    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),
-    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)
+// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.
+float temperature(vec2 uv, float aspect, float t, float plume) {
+  float x = uv.x * aspect;
+  float climb = max(climbOf(), 0.001);
+  float y = uv.y / climb;
+
+  // Slow swells along the bed, so the flame line is never flat.
+  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));
+  // Under the pointer the fire stretches up toward it.
+  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);
+
+  // Turbulence rising through the flame: stretched tall so it reads as
+  // tongues, and swept sideways harder the higher it climbs.
+  // Few octaves on purpose: smooth, graphic tongues rather than ragged,
+  // photographic ones.
+  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);
+  vec2 w = vec2(
+    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),
+    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))
   );
-  q += (w1 - 0.5) * 0.58;
-  vec2 w2 = vec2(
-    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),
-    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)
-  );
-  q += (w2 - 0.5) * 0.26;
-
-  float shape = fbm(q * 2.35);
-  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));
-  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);
-  float field = (shape * 0.68 + detail * 0.32) * flicker;
-
-  // Hotter, wider base; thinner breakaways as they climb
-  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);
-  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);
-  field = field * taper + core * shape * 0.38;
+  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);
+  float body = fbm(q) - 0.5;
+  // Ridged: where the finer noise crosses its midpoint it peaks sharply,
+  // which curls the bands into licks instead of flat stripes.
+  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;
+  float turb = body * 0.8 + licks * 0.45;
+
+  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);
+  // Nothing burns far above the tips, however the noise rolls.
+  return T - smoothstep(1.0, 1.7, y);
+}
 
-  float md = length((uv - u_mouse) * vec2(aspect, 1.0));
-  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);
+// Sparks: three parallax layers of cells scrolling up, one spark in a few.
+float embers(vec2 uv, float aspect, float t, float plume) {
+  if (u_embers <= 0.0) return 0.0;
+  float climb = max(climbOf(), 0.05);
+  float sum = 0.0;
+  for (int i = 0; i < 3; i++) {
+    float fi = float(i);
+    float scale = 8.0 + fi * 7.0;
+    vec2 p = vec2(uv.x * aspect, uv.y) * scale;
+    float column = floor(p.x);
+    float lane = hash(vec2(column, fi * 7.1));
+    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);
+
+    vec2 id = floor(p);
+    vec2 h = hash2(id + fi * 17.3);
+    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);
+    if (h.x > rate) continue;
+
+    vec2 c = 0.5 + (h - 0.5) * 0.45;
+    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;
+    vec2 d = fract(p) - c;
+    d.y *= 0.5;
+    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);
+    float spark = 1.0 - smoothstep(0.0, r, length(d));
+    spark *= spark;
+
+    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);
+    // Born in the flames, burnt out a little above them.
+    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);
+    life *= smoothstep(0.0, climb * 0.35, uv.y);
+    sum += spark * twinkle * life * (1.0 - fi * 0.25);
+  }
+  return min(sum, 1.0);
+}
 
-  field *= smoothstep(0.0, 0.05, uv.y + 0.015);
-  field = smoothstep(0.22, 0.74, field);
+// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.
+vec3 bands(float T, vec3 hot) {
+  float w = 0.012;
+  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));
+  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));
+  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));
+}
 
-  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));
-  return clamp(field * intensity, 0.0, 1.0);
+vec3 linearToSrgb(vec3 c) {
+  c = clamp(c, 0.0, 1.0);
+  vec3 lo = c * 12.92;
+  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;
+  return mix(lo, hi, step(vec3(0.0031308), c));
 }
 
 void main() {
   float aspect = u_resolution.x / max(u_resolution.y, 1.0);
-  float t = u_time * u_speed;
-  float px = max(u_pixelSize, 1.0);
-
-  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;
-  vec2 cell = floor(gl_FragCoord.xy / px);
-  if (u_dither > 0.5) {
-    sampleUv = (cell + 0.5) * px / u_resolution.xy;
-  }
-
-  float field = fireField(sampleUv, aspect, t);
-
-  if (u_dither > 0.5) {
-    float bit = step(bayer8(cell), field);
-    field = bit * mix(0.45, 1.0, field);
-  }
-
-  vec3 ember = u_c1;
-  vec3 flame = u_c2;
-  vec3 highlight = u_c3;
-  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));
-  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));
-
-  vec3 paper = u_dark < 0.5
-    ? vec3(0.992, 0.986, 0.978)
-    : vec3(0.03, 0.032, 0.042);
-  // Light: watercolor on paper — more air, less orange stain
-  float cover = u_dither > 0.5
-    ? field
-    : field * (u_dark < 0.5 ? 0.68 : 0.84);
-  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));
-  if (u_dark < 0.5 && u_dither < 0.5) {
-    float haze = field * (1.0 - field) * 0.12;
-    col = mix(col, paper, haze);
-  }
-
-  if (u_dither < 0.5) {
-    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;
-  }
-
-  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+  float t = u_time;
+
+  vec2 cell = floor(gl_FragCoord.xy / u_pixel);
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;
+
+  float dx = (uv.x - u_mouse.x) * aspect;
+  float plume = exp(-dx * dx * 26.0) * u_pointer;
+
+  float T = temperature(uv, aspect, t, plume);
+  // Dither shakes the band edges by the Bayer threshold, so each boundary
+  // prints as an ordered-dot blend instead of a hard line.
+  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;
+  T += q * 0.14;
+  float edge = u_dither > 0.5 ? 0.001 : 0.012;
+  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);
+
+  float spark = embers(uv, aspect, t, plume);
+  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);
+
+  // The whole fire breathes a little, like a real one lighting a room.
+  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));
+  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;
+  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;
+  glow *= u_intensity;
+  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;
+
+  // On ink the core goes near white; on paper white would vanish into the
+  // page, so it stops at a pale gold.
+  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);
+  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));
+  col = mix(col, bands(T, hot), cover);
+  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);
+
+  vec3 srgb = linearToSrgb(col);
+  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;
+  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);
 }
 `
 
 function isDev() {
-  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+  return (
+    typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+  )
 }
 
-function hexToRgb(hex: string): [number, number, number] {
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function numberOr(value: unknown, fallback: number, min: number, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+  return clamp(value, min, max)
+}
+
+/** Hex → linear sRGB, so the shader can add light the way light adds. */
+function hexToLinear(hex: string): [number, number, number] {
   const h = hex.replace("#", "").trim()
   const full =
     h.length === 3
@@ -221,8 +295,12 @@ function hexToRgb(hex: string): [number, number, number] {
           .join("")
       : h.padEnd(6, "0").slice(0, 6)
   const n = Number.parseInt(full, 16)
-  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]
-  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+  const srgb = Number.isNaN(n)
+    ? [0.77, 0.38, 0.18]
+    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+  return srgb.map((c) =>
+    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  ) as [number, number, number]
 }
 
 /** Resolves shadcn / next-themes dark mode (`attribute="class"` → `html.dark`). */
@@ -262,39 +340,26 @@ function compile(gl: WebGLRenderingContext, type: number, source: string) {
 }
 
 /**
- * Sparse 2D fire wash — tongues rise from the bottom behind UI.
- * Theme-aware light / dusk.
+ * A wall of fire along the bottom edge: turbulent tongues colored by heat,
+ * sparks drifting up, and a warm glow that flickers with them. Theme-aware;
+ * pauses off-screen and in hidden tabs; holds a still frame under
+ * `prefers-reduced-motion`.
  */
 export function createShaderFire(
   canvas: HTMLCanvasElement,
   initial: ShaderFireOptions = {}
 ): ShaderFireInstance | null {
-  let options: Required<
-    Pick<
-      ShaderFireOptions,
-      | "speed"
-      | "intensity"
-      | "height"
-      | "interactive"
-      | "dither"
-      | "pixelSize"
-      | "theme"
-    >
-  > &
-    ShaderFireOptions = {
-    speed: 0.55,
-    intensity: 0.55,
-    height: 0.45,
+  let options: ShaderFireOptions = {
     interactive: true,
-    dither: false,
-    pixelSize: 1,
     theme: "auto",
     ...initial,
   }
 
-  const mouse = { x: 0.5, y: 0.12 }
-  const targetMouse = { x: 0.5, y: 0.12 }
-  let reduce = false
+  const mouse = { x: 0.5, y: 0.5 }
+  const target = { x: 0.5, y: 0.5 }
+  // The plume eases in and out, so leaving the hero never snaps.
+  let pull = 0
+  let pullTarget = 0
   let dark = resolveDark(options.theme ?? "auto")
   options.onThemeChange?.(dark)
 
@@ -349,47 +414,128 @@ export function createShaderFire(
   gl.enableVertexAttribArray(loc)
   gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
 
-  const uResolution = gl.getUniformLocation(program, "u_resolution")
-  const uTime = gl.getUniformLocation(program, "u_time")
-  const uSpeed = gl.getUniformLocation(program, "u_speed")
-  const uIntensity = gl.getUniformLocation(program, "u_intensity")
-  const uHeight = gl.getUniformLocation(program, "u_height")
-  const uDark = gl.getUniformLocation(program, "u_dark")
-  const uC1 = gl.getUniformLocation(program, "u_c1")
-  const uC2 = gl.getUniformLocation(program, "u_c2")
-  const uC3 = gl.getUniformLocation(program, "u_c3")
-  const uMouse = gl.getUniformLocation(program, "u_mouse")
-  const uDither = gl.getUniformLocation(program, "u_dither")
-  const uPixelSize = gl.getUniformLocation(program, "u_pixelSize")
-
-  let raf = 0
-  let running = true
-  const start = performance.now()
-  let frozenTime = 0
-
+  const u = (name: string) => gl.getUniformLocation(program, name)
+  const uResolution = u("u_resolution")
+  const uTime = u("u_time")
+  const uIntensity = u("u_intensity")
+  const uHeight = u("u_height")
+  const uEmbers = u("u_embers")
+  const uIgnite = u("u_ignite")
+  const uDark = u("u_dark")
+  const uDither = u("u_dither")
+  const uPixel = u("u_pixel")
+  const uPointer = u("u_pointer")
+  const uMouse = u("u_mouse")
+  const uStops = [u("u_c0"), u("u_c1"), u("u_c2")]
+  const uBase = u("u_base")
+
+  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,
+  // which would quadruple the fbm work on retina screens.
+  let dpr = 1
   const resize = () => {
     const parent = canvas.parentElement
     if (!parent) return
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
     const w = parent.clientWidth
     const h = parent.clientHeight
     if (w <= 0 || h <= 0) return
+    dpr = Math.min(window.devicePixelRatio || 1, 1.5)
     canvas.width = Math.max(1, Math.floor(w * dpr))
     canvas.height = Math.max(1, Math.floor(h * dpr))
     canvas.style.width = `${w}px`
     canvas.style.height = `${h}px`
     gl.viewport(0, 0, canvas.width, canvas.height)
+    wake()
   }
 
-  resize()
-  const ro = new ResizeObserver(resize)
-  if (canvas.parentElement) ro.observe(canvas.parentElement)
+  let colorsKey = ""
+  const syncColors = () => {
+    const source = options.colors?.length
+      ? options.colors
+      : dark
+        ? DARK_COLORS
+        : LIGHT_COLORS
+    const key = `${source.join()}|${dark}`
+    if (key === colorsKey) return
+    colorsKey = key
+    uStops.forEach((loc, i) => {
+      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))
+    })
+    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))
+  }
 
   const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
-  const onReduce = () => {
-    reduce = mqReduce.matches
+  let onScreen = true
+  let raf = 0
+  let last = 0
+  let clock = 0
+  // Seconds since the fire first caught; drives the ignite.
+  let lit = mqReduce.matches ? 10 : 0
+
+  const moving = () =>
+    onScreen && !mqReduce.matches && document.visibilityState !== "hidden"
+
+  function wake() {
+    if (raf) return
+    last = performance.now()
+    raf = requestAnimationFrame(tick)
   }
-  onReduce()
+
+  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.
+  const tick = (now: number) => {
+    raf = 0
+    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
+    last = now
+    const live = moving()
+    if (live) {
+      clock += dt
+      lit += dt
+    } else if (mqReduce.matches) {
+      lit = 10
+    }
+
+    mouse.x += (target.x - mouse.x) * 0.08
+    mouse.y += (target.y - mouse.y) * 0.08
+    pull += (pullTarget - pull) * 0.05
+
+    syncColors()
+    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)
+    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3
+    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr
+    gl.uniform2f(uResolution, canvas.width, canvas.height)
+    gl.uniform1f(uTime, clock * speed)
+    gl.uniform1f(
+      uIntensity,
+      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)
+    )
+    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))
+    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))
+    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))
+    gl.uniform1f(uDark, dark ? 1 : 0)
+    gl.uniform1f(uDither, options.dither ? 1 : 0)
+    gl.uniform1f(uPixel, options.dither ? px : dpr)
+    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)
+    gl.uniform2f(uMouse, mouse.x, mouse.y)
+    gl.drawArrays(gl.TRIANGLES, 0, 6)
+
+    const settling =
+      Math.abs(pull - pullTarget) > 0.002 ||
+      Math.abs(target.x - mouse.x) > 0.001 ||
+      Math.abs(target.y - mouse.y) > 0.001
+    if (live || (settling && !mqReduce.matches)) {
+      raf = requestAnimationFrame(tick)
+    }
+  }
+
+  const ro = new ResizeObserver(resize)
+  if (canvas.parentElement) ro.observe(canvas.parentElement)
+  const io = new IntersectionObserver(([entry]) => {
+    onScreen = entry?.isIntersecting ?? true
+    wake()
+  })
+  io.observe(canvas)
+  const onVisibility = () => wake()
+  document.addEventListener("visibilitychange", onVisibility)
+  const onReduce = () => wake()
   mqReduce.addEventListener("change", onReduce)
 
   const syncTheme = () => {
@@ -397,6 +543,7 @@ export function createShaderFire(
     if (next === dark) return
     dark = next
     options.onThemeChange?.(dark)
+    wake()
   }
   const mo = new MutationObserver(syncTheme)
   mo.observe(document.documentElement, {
@@ -407,70 +554,37 @@ export function createShaderFire(
   mqDark.addEventListener("change", syncTheme)
 
   const onMove = (e: PointerEvent) => {
-    if (!options.interactive) return
-    const parent = canvas.parentElement
-    if (!parent) return
-    const rect = parent.getBoundingClientRect()
+    if (options.interactive === false) return
+    const rect = canvas.getBoundingClientRect()
     if (rect.width <= 0 || rect.height <= 0) return
-    targetMouse.x = (e.clientX - rect.left) / rect.width
-    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height
-  }
-  window.addEventListener("pointermove", onMove, { passive: true })
-
-  const tick = (now: number) => {
-    if (!running) return
-
-    if (reduce) {
-      if (frozenTime === 0) frozenTime = (now - start) / 1000
-    } else {
-      frozenTime = 0
+    const x = (e.clientX - rect.left) / rect.width
+    const y = 1 - (e.clientY - rect.top) / rect.height
+    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1
+    pullTarget = inside ? 1 : 0
+    if (inside) {
+      target.x = x
+      target.y = y
     }
-
-    const time = reduce ? frozenTime : (now - start) / 1000
-    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)
-    const palette = [0, 1, 2].map((i) =>
-      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)
-    )
-
-    mouse.x += (targetMouse.x - mouse.x) * 0.05
-    mouse.y += (targetMouse.y - mouse.y) * 0.05
-
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    const px = Math.max(1, options.pixelSize ?? 1) * dpr
-
-    gl.uniform2f(uResolution, canvas.width, canvas.height)
-    gl.uniform1f(uTime, time)
-    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))
-    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))
-    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))
-    gl.uniform1f(uDark, dark ? 1 : 0)
-    gl.uniform1f(uDither, options.dither ? 1 : 0)
-    gl.uniform1f(uPixelSize, px)
-    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])
-    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])
-    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])
-    gl.uniform2f(
-      uMouse,
-      options.interactive ? mouse.x : 0.5,
-      options.interactive ? mouse.y : 0.12
-    )
-
-    gl.drawArrays(gl.TRIANGLES, 0, 6)
-    raf = requestAnimationFrame(tick)
+    wake()
   }
+  window.addEventListener("pointermove", onMove, { passive: true })
 
-  raf = requestAnimationFrame(tick)
+  resize()
+  wake()
 
   return {
     setOptions(next) {
       options = { ...options, ...next }
       syncTheme()
+      wake()
     },
     destroy() {
-      running = false
       cancelAnimationFrame(raf)
+      raf = 0
       ro.disconnect()
+      io.disconnect()
       mo.disconnect()
+      document.removeEventListener("visibilitychange", onVisibility)
       mqReduce.removeEventListener("change", onReduce)
       mqDark.removeEventListener("change", syncTheme)
       window.removeEventListener("pointermove", onMove)
diff --git a/registry/shader-fire/shader-fire.svelte b/registry/shader-fire/shader-fire.svelte
index 93969ed..82cdeff 100644
--- a/registry/shader-fire/shader-fire.svelte
+++ b/registry/shader-fire/shader-fire.svelte
@@ -6,6 +6,10 @@
   import {
     createShaderFire,
     DARK_FALLBACK,
+    DEFAULT_EMBERS,
+    DEFAULT_HEIGHT,
+    DEFAULT_INTENSITY,
+    DEFAULT_SPEED,
     LIGHT_FALLBACK,
     resolveDark,
     type ShaderFireInstance,
@@ -23,9 +27,10 @@
   let {
     class: className = "",
     colors,
-    speed = 0.55,
-    intensity = 0.55,
-    height = 0.45,
+    speed = DEFAULT_SPEED,
+    intensity = DEFAULT_INTENSITY,
+    height = DEFAULT_HEIGHT,
+    embers = DEFAULT_EMBERS,
     interactive = true,
     dither = false,
     pixelSize = 1,
@@ -60,6 +65,7 @@
       speed,
       intensity,
       height,
+      embers,
       interactive,
       dither,
       pixelSize,
@@ -86,6 +92,7 @@
       speed,
       intensity,
       height,
+      embers,
       interactive,
       dither,
       pixelSize,
@@ -99,8 +106,8 @@
 <div
   data-slot="shader-fire"
   aria-hidden="true"
-  class={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]", className)}
   style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
 >
-  <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
+  <canvas bind:this={canvas} class="absolute inset-0 size-full rounded-[inherit]"></canvas>
 </div>
diff --git a/registry/shader-fire/shader-fire.tsx b/registry/shader-fire/shader-fire.tsx
index 5fae2f1..e2f62b0 100644
--- a/registry/shader-fire/shader-fire.tsx
+++ b/registry/shader-fire/shader-fire.tsx
@@ -7,6 +7,10 @@ import { cn } from "@/lib/utils"
 import {
   createShaderFire,
   DARK_FALLBACK,
+  DEFAULT_EMBERS,
+  DEFAULT_HEIGHT,
+  DEFAULT_INTENSITY,
+  DEFAULT_SPEED,
   LIGHT_FALLBACK,
   resolveDark,
   type ShaderFireInstance,
@@ -16,6 +20,10 @@ import {
 export {
   DARK_COLORS,
   DARK_FALLBACK,
+  DEFAULT_EMBERS,
+  DEFAULT_HEIGHT,
+  DEFAULT_INTENSITY,
+  DEFAULT_SPEED,
   LIGHT_COLORS,
   LIGHT_FALLBACK,
 } from "./shader-fire-vanilla"
@@ -30,15 +38,16 @@ export type ShaderFireProps = Omit<ShaderFireOptions, "onThemeChange"> & {
 }
 
 /**
- * Sparse 2D fire wash — tongues rise from the bottom behind UI.
- * Theme-aware light / dusk.
+ * Cel-shaded flames licking up from the bottom edge, with sparks drifting
+ * above them. Heat reaches for the pointer. Theme-aware.
  */
 export function ShaderFire({
   className,
   colors,
-  speed = 0.55,
-  intensity = 0.55,
-  height = 0.45,
+  speed = DEFAULT_SPEED,
+  intensity = DEFAULT_INTENSITY,
+  height = DEFAULT_HEIGHT,
+  embers = DEFAULT_EMBERS,
   interactive = true,
   dither = false,
   pixelSize = 1,
@@ -72,6 +81,7 @@ export function ShaderFire({
       speed,
       intensity,
       height,
+      embers,
       interactive,
       dither,
       pixelSize,
@@ -92,13 +102,24 @@ export function ShaderFire({
       speed,
       intensity,
       height,
+      embers,
       interactive,
       dither,
       pixelSize,
       theme,
       onThemeChange: setIsDark,
     })
-  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])
+  }, [
+    colors,
+    speed,
+    intensity,
+    height,
+    embers,
+    interactive,
+    dither,
+    pixelSize,
+    theme,
+  ])
 
   const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK
 
@@ -107,7 +128,7 @@ export function ShaderFire({
       data-slot="shader-fire"
       aria-hidden
       className={cn(
-        "pointer-events-none absolute inset-0 overflow-hidden",
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
         className
       )}
       style={{
@@ -115,7 +136,12 @@ export function ShaderFire({
         backgroundImage: fallback.backgroundImage,
       }}
     >
-      <canvas ref={canvasRef} className="absolute inset-0 size-full" />
+      {/* The canvas carries the radius itself: a WebGL layer can slip past a
+          parent's rounded clip on some GPUs. */}
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 size-full rounded-[inherit]"
+      />
     </div>
   )
 }
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index ede6b3f..c708d21 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -171,7 +171,7 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
-| `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
+| `shader-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index 167c924..e975d29 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -151,10 +151,11 @@ type ShaderGradientProps = {
 
 ```ts
 type ShaderFireProps = {
-  colors?: string[] // ember, flame, highlight
-  speed?: number // 0.55
-  intensity?: number // 0.55
+  colors?: string[] // ember, flame, core
+  speed?: number // 1
+  intensity?: number // 1
   height?: number // 0.45
+  embers?: number // 0.6
   interactive?: boolean // true
   dither?: boolean // false
   pixelSize?: number // 1
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index 504ab6c..f6e2dbe 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -145,13 +145,13 @@ Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. S
 
 ## shader-fire
 
-Shader. Sparse tongues from the bottom edge. Ember / flame / highlight.
+Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Ember / flame / core.
 
-Best fit: heat behind a hero. `dither` turns the wash into Bayer pixels.
+Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
 
 Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
 
-Deps: none. Key props: `colors`, `speed` (0.55), `intensity` (0.55), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+Deps: none. Key props: `colors`, `speed` (1), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
 ```tsx
 "use client"
@@ -167,7 +167,7 @@ export function Hero() {
 }
 ```
 
-Pitfalls: `interactive` adds heat under the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#9C3A24 #C96A32 #E6C4A0`. Dark `#A33A18 #D4682A #E8B45A`.
+Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. `embers={0}` turns sparks off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
 
 ## shader-sky
 
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index 11ff369..c4a4e95 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -33,7 +33,7 @@ Swap the component, keep the shell:
 | Brief | Component | Extra props |
 | --- | --- | --- |
 | Fire along the floor | `ShaderFire` | `height={0.45}` |
-| Pixel fire | `ShaderFire` | `dither pixelSize={1}` |
+| Pixel fire | `ShaderFire` | `dither pixelSize={3}` |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |

From 9c7fe5c127c679a62eca85a8ac88ea17c9317546 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:21:22 +0530
Subject: [PATCH 27/49] Rename Shader Fire to Shader Anime Fire.

The component, its files, exports, registry items and docs slug all
become shader-anime-fire / ShaderAnimeFire, to match the cel-shaded
look. The old docs URL redirects permanently to the new one, and
Dithered 404 no longer compares its soft fire to this one.
---
 .../{shader-fire.mdx => shader-anime-fire.mdx}  |   0
 .../image.png                                   | Bin
 public/r/shader-fire-svelte.json                |  16 ----------------
 public/r/shader-fire.json                       |  15 ---------------
 .../registry.json                               |   0
 .../shader-anime-fire-demo.tsx}                 |   0
 .../shader-anime-fire-vanilla.ts}               |   0
 .../shader-anime-fire.svelte}                   |   0
 .../shader-anime-fire.tsx}                      |   0
 9 files changed, 31 deletions(-)
 rename content/docs/components/{shader-fire.mdx => shader-anime-fire.mdx} (100%)
 rename public/og/docs/components/{shader-fire => shader-anime-fire}/image.png (100%)
 delete mode 100644 public/r/shader-fire-svelte.json
 delete mode 100644 public/r/shader-fire.json
 rename registry/{shader-fire => shader-anime-fire}/registry.json (100%)
 rename registry/{shader-fire/shader-fire-demo.tsx => shader-anime-fire/shader-anime-fire-demo.tsx} (100%)
 rename registry/{shader-fire/shader-fire-vanilla.ts => shader-anime-fire/shader-anime-fire-vanilla.ts} (100%)
 rename registry/{shader-fire/shader-fire.svelte => shader-anime-fire/shader-anime-fire.svelte} (100%)
 rename registry/{shader-fire/shader-fire.tsx => shader-anime-fire/shader-anime-fire.tsx} (100%)

diff --git a/content/docs/components/shader-fire.mdx b/content/docs/components/shader-anime-fire.mdx
similarity index 100%
rename from content/docs/components/shader-fire.mdx
rename to content/docs/components/shader-anime-fire.mdx
diff --git a/public/og/docs/components/shader-fire/image.png b/public/og/docs/components/shader-anime-fire/image.png
similarity index 100%
rename from public/og/docs/components/shader-fire/image.png
rename to public/og/docs/components/shader-anime-fire/image.png
diff --git a/public/r/shader-fire-svelte.json b/public/r/shader-fire-svelte.json
deleted file mode 100644
index 828e28e..0000000
--- a/public/r/shader-fire-svelte.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "shader-fire-svelte",
-  "title": "Shader Fire",
-  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
-  "dependencies": [],
-  "files": [
-    {
-      "path": "registry/shader-fire/shader-fire.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `1`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 1\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: ShaderFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    embers = DEFAULT_EMBERS,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
-      "type": "registry:file",
-      "target": "src/lib/components/ui/shader-fire.svelte"
-    }
-  ],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/public/r/shader-fire.json b/public/r/shader-fire.json
deleted file mode 100644
index aef5103..0000000
--- a/public/r/shader-fire.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "shader-fire",
-  "title": "Shader Fire",
-  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
-  "files": [
-    {
-      "path": "registry/shader-fire/shader-fire.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `1`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 1\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: ShaderFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderFireProps = Omit<ShaderFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, with sparks drifting\n * above them. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  embers = DEFAULT_EMBERS,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    intensity,\n    height,\n    embers,\n    interactive,\n    dither,\n    pixelSize,\n    theme,\n  ])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* The canvas carries the radius itself: a WebGL layer can slip past a\n          parent's rounded clip on some GPUs. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:ui",
-      "target": "components/ui/shader-fire.tsx"
-    }
-  ],
-  "type": "registry:ui"
-}
\ No newline at end of file
diff --git a/registry/shader-fire/registry.json b/registry/shader-anime-fire/registry.json
similarity index 100%
rename from registry/shader-fire/registry.json
rename to registry/shader-anime-fire/registry.json
diff --git a/registry/shader-fire/shader-fire-demo.tsx b/registry/shader-anime-fire/shader-anime-fire-demo.tsx
similarity index 100%
rename from registry/shader-fire/shader-fire-demo.tsx
rename to registry/shader-anime-fire/shader-anime-fire-demo.tsx
diff --git a/registry/shader-fire/shader-fire-vanilla.ts b/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
similarity index 100%
rename from registry/shader-fire/shader-fire-vanilla.ts
rename to registry/shader-anime-fire/shader-anime-fire-vanilla.ts
diff --git a/registry/shader-fire/shader-fire.svelte b/registry/shader-anime-fire/shader-anime-fire.svelte
similarity index 100%
rename from registry/shader-fire/shader-fire.svelte
rename to registry/shader-anime-fire/shader-anime-fire.svelte
diff --git a/registry/shader-fire/shader-fire.tsx b/registry/shader-anime-fire/shader-anime-fire.tsx
similarity index 100%
rename from registry/shader-fire/shader-fire.tsx
rename to registry/shader-anime-fire/shader-anime-fire.tsx

From 3aa4868c27d715f686df7b77e4c8538b8efea02a Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:21:25 +0530
Subject: [PATCH 28/49] Slow Shader Anime Fire's default speed to 0.6.

---
 .cursor/skills/23rd/SKILL.md                  | 12 +++----
 .cursor/skills/23rd/apis.md                   |  6 ++--
 .cursor/skills/23rd/components.md             | 12 +++----
 .cursor/skills/23rd/recipes.md                | 10 +++---
 content/docs/components/shader-anime-fire.mdx | 32 +++++++++----------
 public/r/shader-anime-fire-svelte.json        | 16 ++++++++++
 public/r/shader-anime-fire.json               | 15 +++++++++
 .../shader-anime-fire-vanilla.ts              | 28 ++++++++--------
 skills/23rd/SKILL.md                          | 12 +++----
 skills/23rd/apis.md                           |  6 ++--
 skills/23rd/components.md                     | 12 +++----
 skills/23rd/recipes.md                        | 10 +++---
 12 files changed, 101 insertions(+), 70 deletions(-)
 create mode 100644 public/r/shader-anime-fire-svelte.json
 create mode 100644 public/r/shader-anime-fire.json

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index c708d21..73d9b23 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -92,7 +92,7 @@ flowchart TD
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
   atmo -->|Quiet wash| sg[shader-gradient]
-  atmo -->|Fire from the bottom| sf[shader-fire]
+  atmo -->|Fire from the bottom| sf[shader-anime-fire]
   atmo -->|Sky or rain, optional glass| ss[shader-sky]
   atmo -->|ASCII mouse trails| af[ascii-fluid]
   atmo -->|Hyperspace streaks, scroll warp| rl[radiant-lines]
@@ -109,8 +109,8 @@ Disambiguation that agents get wrong:
 | --- | --- | --- |
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
 | Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
-| Fire, embers, heat under a hero | `shader-fire` | `dithered-404` unless the page is a 404 |
-| 404 that burns under the cursor | `dithered-404` | `shader-fire` |
+| Fire, embers, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
 | Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) |
 | Stars that speed up when you scroll | `radiant-lines` | `logo-burst` |
@@ -132,7 +132,7 @@ Backgrounds and shaders fill the parent. They do not create a page.
 </section>
 ```
 
-Same shell for `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
+Same shell for `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
 
 `RadiantLines` is transparent and warps with scroll. Inside an overflow div, pass the scroller (`containerRef` in React, `container` in Svelte) and make the canvas `sticky top-0 h-svh`. Omit the scroller to use the window.
 
@@ -153,7 +153,7 @@ That matches shadcn / `next-themes` with `attribute="class"`. There is no shared
 
 Exceptions:
 
-- Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
+- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
 - `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
 - `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
@@ -171,7 +171,7 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
-| `shader-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
+| `shader-anime-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index e975d29..73382bc 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -147,12 +147,12 @@ type ShaderGradientProps = {
 
 `LIGHT_FALLBACK` and `DARK_FALLBACK` are CSS background stacks used when WebGL is unavailable. Palette line in the engine: `options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)`.
 
-## shader-fire
+## shader-anime-fire
 
 ```ts
-type ShaderFireProps = {
+type ShaderAnimeFireProps = {
   colors?: string[] // ember, flame, core
-  speed?: number // 1
+  speed?: number // 0.6
   intensity?: number // 1
   height?: number // 0.45
   embers?: number // 0.6
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index f6e2dbe..6f085ad 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -44,7 +44,7 @@ Background. Two vertical staves. Notes fall, bloom at the playhead, then flare.
 
 Best fit: a music, broadcast, or terminal hero that should feel like a CRT score.
 
-Not this: fire (`shader-fire`), sky (`shader-sky`), a footer.
+Not this: fire (`shader-anime-fire`), sky (`shader-sky`), a footer.
 
 Deps: none. Key props: `color`, `glow` (50, range 0–100), `speed` (1.35 beats/s), `density` (1), `sway` (true), `seed` (23), `theme`.
 
@@ -143,7 +143,7 @@ export function Hero() {
 
 Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. Stock light `#7CB4E0 #B4D8C4 #EFE4BC #D2D7EC`. Stock dark `#3A6FA0 #2F6B52 #8A6B32 #4A4D7A`. If WebGL fails, a CSS `LIGHT_FALLBACK` / `DARK_FALLBACK` radial stack is used. `interactive` eases the wash toward the pointer.
 
-## shader-fire
+## shader-anime-fire
 
 Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Ember / flame / core.
 
@@ -151,16 +151,16 @@ Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pix
 
 Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
 
-Deps: none. Key props: `colors`, `speed` (1), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
 ```tsx
 "use client"
-import { ShaderFire } from "@/components/ui/shader-fire"
+import { ShaderAnimeFire } from "@/components/ui/shader-anime-fire"
 
 export function Hero() {
   return (
     <section className="relative isolate min-h-svh overflow-hidden bg-background">
-      <ShaderFire />
+      <ShaderAnimeFire />
       <div className="relative z-10 p-10">Your content</div>
     </section>
   )
@@ -281,7 +281,7 @@ Page. A Bayer-dithered “404” burned by a fireball cursor into embers and smo
 
 Best fit: the not-found route, full viewport.
 
-Not this: decorative fire behind a normal hero (`shader-fire`). Set `dither={false}` only when you want the soft fire on the same 404 glyph.
+Not this: decorative fire behind a normal hero (`shader-anime-fire`). Set `dither={false}` only when you want the soft fire on the same 404 glyph.
 
 Deps: none. Key props: `color`, `pixelSize` (4), `brush` (28), `interactive` (true), `dither` (true), `theme`.
 
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index c4a4e95..42d5bb9 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -32,8 +32,8 @@ Swap the component, keep the shell:
 
 | Brief | Component | Extra props |
 | --- | --- | --- |
-| Fire along the floor | `ShaderFire` | `height={0.45}` |
-| Pixel fire | `ShaderFire` | `dither pixelSize={3}` |
+| Fire along the floor | `ShaderAnimeFire` | `height={0.45}` |
+| Pixel fire | `ShaderAnimeFire` | `dither pixelSize={3}` |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |
@@ -76,7 +76,7 @@ Svelte: `bind:this={scroller}` and `container={scroller}`.
 
 ## 404
 
-Use `dithered-404` on the not-found route. Do not also mount `shader-fire`.
+Use `dithered-404` on the not-found route. Do not also mount `shader-anime-fire`.
 
 ```tsx
 "use client"
@@ -97,7 +97,7 @@ export function NotFound() {
 }
 ```
 
-`dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-fire`.
+`dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-anime-fire`.
 
 ## Rubber overscroll
 
@@ -224,7 +224,7 @@ export function Brand() {
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
-- Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
+- Two of `ShaderGradient`, `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).
 - Assuming `theme="auto"` recolors a shader after you passed `colors`. It will not.
 - Adding `variant` to anything but `LiveOrb`.
diff --git a/content/docs/components/shader-anime-fire.mdx b/content/docs/components/shader-anime-fire.mdx
index 97d304d..22d0334 100644
--- a/content/docs/components/shader-anime-fire.mdx
+++ b/content/docs/components/shader-anime-fire.mdx
@@ -1,23 +1,23 @@
 ---
-title: Shader Fire
+title: Shader Anime Fire
 description: Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above them, and the fire reaches for the pointer.
 ---
 
-import { ShaderFireDemo } from "@/registry/shader-fire/shader-fire-demo"
+import { ShaderAnimeFireDemo } from "@/registry/shader-anime-fire/shader-anime-fire-demo"
 
 Flat, graphic fire rather than a photo of one. Four crisp bands (ember, flame, core, and a hot center) curl up from the bottom edge, sparks drift up past the copy, and a warm glow flickers under it all. Move the pointer over it and a plume of flame reaches up toward it. Toggle **Dither** to print the same bands as ordered Bayer pixels. Press `d` to switch theme.
 
 ## Preview
 
-<ShaderFireDemo />
+<ShaderAnimeFireDemo />
 
 ## Installation
 
-<CliCommand item="shader-fire" />
+<CliCommand item="shader-anime-fire" />
 
 Or install straight from the public GitHub source registry:
 
-<CliCommand item="shader-fire" github />
+<CliCommand item="shader-anime-fire" github />
 
 ## Usage
 
@@ -28,12 +28,12 @@ Pin it behind a relatively positioned section. Keep content in a later stacking
 ```tsx
 "use client"
 
-import { ShaderFire } from "@/components/ui/shader-fire"
+import { ShaderAnimeFire } from "@/components/ui/shader-anime-fire"
 
 export function Hero() {
   return (
     <section className="relative isolate min-h-svh overflow-hidden bg-background">
-      <ShaderFire />
+      <ShaderAnimeFire />
       <div className="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
         <p className="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
           New
@@ -53,11 +53,11 @@ export function Hero() {
   <FrameworkSvelte>
 ```svelte
 <script>
-  import ShaderFire from "$lib/components/ui/shader-fire.svelte"
+  import ShaderAnimeFire from "$lib/components/ui/shader-anime-fire.svelte"
 </script>
 
 <section class="relative isolate min-h-svh overflow-hidden bg-background">
-  <ShaderFire />
+  <ShaderAnimeFire />
   <div class="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
     <p class="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
       New
@@ -79,14 +79,14 @@ Force a palette if the parent theme should not drive it:
 <FrameworkCode>
   <FrameworkReact>
 ```tsx
-<ShaderFire theme="light" />
-<ShaderFire theme="dark" />
+<ShaderAnimeFire theme="light" />
+<ShaderAnimeFire theme="dark" />
 ```
   </FrameworkReact>
   <FrameworkSvelte>
 ```svelte
-<ShaderFire theme="light" />
-<ShaderFire theme="dark" />
+<ShaderAnimeFire theme="light" />
+<ShaderAnimeFire theme="dark" />
 ```
   </FrameworkSvelte>
 </FrameworkCode>
@@ -96,12 +96,12 @@ Print the same bands as ordered Bayer pixels:
 <FrameworkCode>
   <FrameworkReact>
 ```tsx
-<ShaderFire dither pixelSize={3} />
+<ShaderAnimeFire dither pixelSize={3} />
 ```
   </FrameworkReact>
   <FrameworkSvelte>
 ```svelte
-<ShaderFire dither pixelSize={3} />
+<ShaderAnimeFire dither pixelSize={3} />
 ```
   </FrameworkSvelte>
 </FrameworkCode>
@@ -111,7 +111,7 @@ Print the same bands as ordered Bayer pixels:
 | Prop | Type | Default |
 | --- | --- | --- |
 | `colors` | `string[]` | ember / flame / core |
-| `speed` | `number` | `1` |
+| `speed` | `number` | `0.6` |
 | `intensity` | `number` | `1` |
 | `height` | `number` | `0.45` |
 | `embers` | `number` | `0.6` |
diff --git a/public/r/shader-anime-fire-svelte.json b/public/r/shader-anime-fire-svelte.json
new file mode 100644
index 0000000..db46152
--- /dev/null
+++ b/public/r/shader-anime-fire-svelte.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shader-anime-fire-svelte",
+  "title": "Shader Anime Fire",
+  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/shader-anime-fire/shader-anime-fire.svelte",
+      "content": "<script module lang=\"ts\">\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderAnimeFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    embers = DEFAULT_EMBERS,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderAnimeFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-anime-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
+      "type": "registry:file",
+      "target": "src/lib/components/ui/shader-anime-fire.svelte"
+    }
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/public/r/shader-anime-fire.json b/public/r/shader-anime-fire.json
new file mode 100644
index 0000000..429d045
--- /dev/null
+++ b/public/r/shader-anime-fire.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shader-anime-fire",
+  "title": "Shader Anime Fire",
+  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+  "files": [
+    {
+      "path": "registry/shader-anime-fire/shader-anime-fire.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderAnimeFireProps = Omit<ShaderAnimeFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, with sparks drifting\n * above them. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderAnimeFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  embers = DEFAULT_EMBERS,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderAnimeFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderAnimeFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    intensity,\n    height,\n    embers,\n    interactive,\n    dither,\n    pixelSize,\n    theme,\n  ])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-anime-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* The canvas carries the radius itself: a WebGL layer can slip past a\n          parent's rounded clip on some GPUs. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/shader-anime-fire.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/registry/shader-anime-fire/shader-anime-fire-vanilla.ts b/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
index 06eeaa4..ff8eb6d 100644
--- a/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
+++ b/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
@@ -1,12 +1,12 @@
-export type ShaderFireTheme = "light" | "dark" | "auto"
+export type ShaderAnimeFireTheme = "light" | "dark" | "auto"
 
-export type ShaderFireOptions = {
+export type ShaderAnimeFireOptions = {
   /**
    * Three colors, coolest to hottest: ember, flame, core. In dark mode the
    * densest heat still burns past the core toward white.
    */
   colors?: string[]
-  /** How fast the flames rise. Default `1`. */
+  /** How fast the flames rise. Default `0.6`. */
   speed?: number
   /** Opacity of the fire and its glow, 0–1. Default `1`. */
   intensity?: number
@@ -24,13 +24,13 @@ export type ShaderFireOptions = {
    * Palette mode. Default `auto` follows shadcn / next-themes
    * (`html.dark` class) so light and dark swap with the site theme.
    */
-  theme?: ShaderFireTheme
+  theme?: ShaderAnimeFireTheme
   /** Fires whenever resolved dark mode changes (CSS fallback). */
   onThemeChange?: (dark: boolean) => void
 }
 
-export type ShaderFireInstance = {
-  setOptions: (options: Partial<ShaderFireOptions>) => void
+export type ShaderAnimeFireInstance = {
+  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void
   destroy: () => void
 }
 
@@ -41,7 +41,7 @@ export const DARK_COLORS = ["#B4200A", "#FF6512", "#FFC04A"]
 const LIGHT_BASE = "#FCFBF9"
 const DARK_BASE = "#08090C"
 
-export const DEFAULT_SPEED = 1
+export const DEFAULT_SPEED = 0.6
 export const DEFAULT_INTENSITY = 1
 export const DEFAULT_HEIGHT = 0.45
 export const DEFAULT_EMBERS = 0.6
@@ -315,7 +315,7 @@ export function isDarkTheme(): boolean {
   return window.matchMedia("(prefers-color-scheme: dark)").matches
 }
 
-export function resolveDark(theme: ShaderFireTheme): boolean {
+export function resolveDark(theme: ShaderAnimeFireTheme): boolean {
   if (theme === "dark") return true
   if (theme === "light") return false
   return isDarkTheme()
@@ -329,7 +329,7 @@ function compile(gl: WebGLRenderingContext, type: number, source: string) {
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
     if (isDev()) {
       console.warn(
-        "ShaderFire: shader failed to compile\n",
+        "ShaderAnimeFire: shader failed to compile\n",
         gl.getShaderInfoLog(shader)
       )
     }
@@ -345,11 +345,11 @@ function compile(gl: WebGLRenderingContext, type: number, source: string) {
  * pauses off-screen and in hidden tabs; holds a still frame under
  * `prefers-reduced-motion`.
  */
-export function createShaderFire(
+export function createShaderAnimeFire(
   canvas: HTMLCanvasElement,
-  initial: ShaderFireOptions = {}
-): ShaderFireInstance | null {
-  let options: ShaderFireOptions = {
+  initial: ShaderAnimeFireOptions = {}
+): ShaderAnimeFireInstance | null {
+  let options: ShaderAnimeFireOptions = {
     interactive: true,
     theme: "auto",
     ...initial,
@@ -392,7 +392,7 @@ export function createShaderFire(
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     if (isDev()) {
       console.warn(
-        "ShaderFire: program failed to link\n",
+        "ShaderAnimeFire: program failed to link\n",
         gl.getProgramInfoLog(program)
       )
     }
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index c708d21..73d9b23 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -92,7 +92,7 @@ flowchart TD
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
   atmo -->|Quiet wash| sg[shader-gradient]
-  atmo -->|Fire from the bottom| sf[shader-fire]
+  atmo -->|Fire from the bottom| sf[shader-anime-fire]
   atmo -->|Sky or rain, optional glass| ss[shader-sky]
   atmo -->|ASCII mouse trails| af[ascii-fluid]
   atmo -->|Hyperspace streaks, scroll warp| rl[radiant-lines]
@@ -109,8 +109,8 @@ Disambiguation that agents get wrong:
 | --- | --- | --- |
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
 | Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
-| Fire, embers, heat under a hero | `shader-fire` | `dithered-404` unless the page is a 404 |
-| 404 that burns under the cursor | `dithered-404` | `shader-fire` |
+| Fire, embers, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
 | Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) |
 | Stars that speed up when you scroll | `radiant-lines` | `logo-burst` |
@@ -132,7 +132,7 @@ Backgrounds and shaders fill the parent. They do not create a page.
 </section>
 ```
 
-Same shell for `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
+Same shell for `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
 
 `RadiantLines` is transparent and warps with scroll. Inside an overflow div, pass the scroller (`containerRef` in React, `container` in Svelte) and make the canvas `sticky top-0 h-svh`. Omit the scroller to use the window.
 
@@ -153,7 +153,7 @@ That matches shadcn / `next-themes` with `attribute="class"`. There is no shared
 
 Exceptions:
 
-- Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
+- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
 - `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
 - `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
@@ -171,7 +171,7 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
-| `shader-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
+| `shader-anime-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index e975d29..73382bc 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -147,12 +147,12 @@ type ShaderGradientProps = {
 
 `LIGHT_FALLBACK` and `DARK_FALLBACK` are CSS background stacks used when WebGL is unavailable. Palette line in the engine: `options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)`.
 
-## shader-fire
+## shader-anime-fire
 
 ```ts
-type ShaderFireProps = {
+type ShaderAnimeFireProps = {
   colors?: string[] // ember, flame, core
-  speed?: number // 1
+  speed?: number // 0.6
   intensity?: number // 1
   height?: number // 0.45
   embers?: number // 0.6
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index f6e2dbe..6f085ad 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -44,7 +44,7 @@ Background. Two vertical staves. Notes fall, bloom at the playhead, then flare.
 
 Best fit: a music, broadcast, or terminal hero that should feel like a CRT score.
 
-Not this: fire (`shader-fire`), sky (`shader-sky`), a footer.
+Not this: fire (`shader-anime-fire`), sky (`shader-sky`), a footer.
 
 Deps: none. Key props: `color`, `glow` (50, range 0–100), `speed` (1.35 beats/s), `density` (1), `sway` (true), `seed` (23), `theme`.
 
@@ -143,7 +143,7 @@ export function Hero() {
 
 Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. Stock light `#7CB4E0 #B4D8C4 #EFE4BC #D2D7EC`. Stock dark `#3A6FA0 #2F6B52 #8A6B32 #4A4D7A`. If WebGL fails, a CSS `LIGHT_FALLBACK` / `DARK_FALLBACK` radial stack is used. `interactive` eases the wash toward the pointer.
 
-## shader-fire
+## shader-anime-fire
 
 Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Ember / flame / core.
 
@@ -151,16 +151,16 @@ Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pix
 
 Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
 
-Deps: none. Key props: `colors`, `speed` (1), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
 ```tsx
 "use client"
-import { ShaderFire } from "@/components/ui/shader-fire"
+import { ShaderAnimeFire } from "@/components/ui/shader-anime-fire"
 
 export function Hero() {
   return (
     <section className="relative isolate min-h-svh overflow-hidden bg-background">
-      <ShaderFire />
+      <ShaderAnimeFire />
       <div className="relative z-10 p-10">Your content</div>
     </section>
   )
@@ -281,7 +281,7 @@ Page. A Bayer-dithered “404” burned by a fireball cursor into embers and smo
 
 Best fit: the not-found route, full viewport.
 
-Not this: decorative fire behind a normal hero (`shader-fire`). Set `dither={false}` only when you want the soft fire on the same 404 glyph.
+Not this: decorative fire behind a normal hero (`shader-anime-fire`). Set `dither={false}` only when you want the soft fire on the same 404 glyph.
 
 Deps: none. Key props: `color`, `pixelSize` (4), `brush` (28), `interactive` (true), `dither` (true), `theme`.
 
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index c4a4e95..42d5bb9 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -32,8 +32,8 @@ Swap the component, keep the shell:
 
 | Brief | Component | Extra props |
 | --- | --- | --- |
-| Fire along the floor | `ShaderFire` | `height={0.45}` |
-| Pixel fire | `ShaderFire` | `dither pixelSize={3}` |
+| Fire along the floor | `ShaderAnimeFire` | `height={0.45}` |
+| Pixel fire | `ShaderAnimeFire` | `dither pixelSize={3}` |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |
@@ -76,7 +76,7 @@ Svelte: `bind:this={scroller}` and `container={scroller}`.
 
 ## 404
 
-Use `dithered-404` on the not-found route. Do not also mount `shader-fire`.
+Use `dithered-404` on the not-found route. Do not also mount `shader-anime-fire`.
 
 ```tsx
 "use client"
@@ -97,7 +97,7 @@ export function NotFound() {
 }
 ```
 
-`dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-fire`.
+`dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-anime-fire`.
 
 ## Rubber overscroll
 
@@ -224,7 +224,7 @@ export function Brand() {
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
-- Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
+- Two of `ShaderGradient`, `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).
 - Assuming `theme="auto"` recolors a shader after you passed `colors`. It will not.
 - Adding `variant` to anything but `LiveOrb`.

From 31b55f38b2e946a22cb09ce1fd3178cd64e089a2 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:21:47 +0530
Subject: [PATCH 29/49] Finish renaming Shader Fire to Shader Anime Fire.

The previous two commits only carried the file moves and part of the
content; this brings the wrappers, demo, registry manifests, landing
feed, docs links and the permanent redirect from the old docs URL
along, and drops Dithered 404's comparison to this fire.
---
 README.md                                     |   2 +-
 components/component-controls.tsx             |   2 +-
 components/monitor-feeds.tsx                  |   6 ++--
 content/docs/components/dithered-404.mdx      |   2 +-
 content/docs/components/meta.json             |   2 +-
 content/docs/getting-started.mdx              |   6 ++--
 next.config.mjs                               |   5 +++
 .../components/shader-anime-fire/image.png    | Bin 46265 -> 48510 bytes
 public/r/dithered-404-svelte.json             |   2 +-
 public/r/dithered-404.json                    |   2 +-
 public/r/registry.json                        |  16 +++++-----
 registry.json                                 |   2 +-
 registry/dithered-404/dithered-404-vanilla.ts |   2 +-
 registry/dithered-404/dithered-404.tsx        |   2 +-
 registry/shader-anime-fire/registry.json      |  16 +++++-----
 .../shader-anime-fire-demo.tsx                |  10 +++---
 .../shader-anime-fire.svelte                  |  16 +++++-----
 .../shader-anime-fire/shader-anime-fire.tsx   |  30 +++++++++---------
 18 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index 138a9ac..1354e57 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Logo Burst](https://23rd.dev/docs/components/logo-burst)                 | `@23rd/logo-burst`         | Hair-line tentacles explode from the center, then breathe — light and dark         |
 | [Phosphor Score](https://23rd.dev/docs/components/phosphor-score)         | `@23rd/phosphor-score`     | Vertical CRT sheet music — notes fall, bloom at the playhead, then exit in a flare |
 | [Radiant Lines](https://23rd.dev/docs/components/radiant-lines)           | `@23rd/radiant-lines`      | Hyperspace starfield background; warp speed driven by scroll                       |
-| [Shader Fire](https://23rd.dev/docs/components/shader-fire)               | `@23rd/shader-fire`        | Cel-shaded flames and sparks rising from the bottom of a landing hero             |
+| [Shader Anime Fire](https://23rd.dev/docs/components/shader-anime-fire)               | `@23rd/shader-anime-fire`        | Cel-shaded flames and sparks rising from the bottom of a landing hero             |
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
diff --git a/components/component-controls.tsx b/components/component-controls.tsx
index 4a8b5a8..ee108a0 100644
--- a/components/component-controls.tsx
+++ b/components/component-controls.tsx
@@ -98,7 +98,7 @@ export type ComponentControlsProps = {
   hasChanges?: boolean
   onReset?: () => void
   className?: string
-  /** Component tag for the copy snippet, e.g. `"ShaderFire"` */
+  /** Component tag for the copy snippet, e.g. `"ShaderAnimeFire"` */
   component?: string
   /** Props included in the copied JSX. `undefined` values are omitted. */
   snippetProps?: Record<string, unknown>
diff --git a/components/monitor-feeds.tsx b/components/monitor-feeds.tsx
index 08f2cd0..87f7335 100644
--- a/components/monitor-feeds.tsx
+++ b/components/monitor-feeds.tsx
@@ -42,8 +42,8 @@ const PhosphorScore = feed(() =>
 const RadiantLines = feed(() =>
   import("@/registry/radiant-lines/radiant-lines").then((m) => m.RadiantLines)
 )
-const ShaderFire = feed(() =>
-  import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
+const ShaderAnimeFire = feed(() =>
+  import("@/registry/shader-anime-fire/shader-anime-fire").then((m) => m.ShaderAnimeFire)
 )
 const ShaderGradient = feed(() =>
   import("@/registry/shader-gradient/shader-gradient").then(
@@ -71,7 +71,7 @@ const FEEDS: Record<string, () => ReactNode> = {
   "logo-burst": () => <LogoBurst />,
   "phosphor-score": () => <PhosphorScore />,
   "radiant-lines": () => <RadiantLines />,
-  "shader-fire": () => <ShaderFire className="absolute inset-0" />,
+  "shader-anime-fire": () => <ShaderAnimeFire className="absolute inset-0" />,
   "shader-gradient": () => <ShaderGradient className="absolute inset-0" />,
   "shader-sky": () => <ShaderSky className="absolute inset-0" />,
 }
diff --git a/content/docs/components/dithered-404.mdx b/content/docs/components/dithered-404.mdx
index 93149de..c5a3509 100644
--- a/content/docs/components/dithered-404.mdx
+++ b/content/docs/components/dithered-404.mdx
@@ -5,7 +5,7 @@ description: A Bayer-pixel 404 section — the pointer becomes a dithered fireba
 
 import { Dithered404Demo } from "@/registry/dithered-404/dithered-404-demo"
 
-Bold **404** printed as ordered Bayer pixels — or turn **Dither** off for a soft, realistic fire like Shader Fire. Move over the type: the cursor is a coal. Linger and the glyph scorches dark, then burns into embers and smoke. Leftover type stays put until you burn it. After most of the number is gone, it assembles again and you can burn it once more. Press `d` to switch theme.
+Bold **404** printed as ordered Bayer pixels — or turn **Dither** off for a soft, realistic fire. Move over the type: the cursor is a coal. Linger and the glyph scorches dark, then burns into embers and smoke. Leftover type stays put until you burn it. After most of the number is gone, it assembles again and you can burn it once more. Press `d` to switch theme.
 
 ## Preview
 
diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json
index e87cea2..aea67fe 100644
--- a/content/docs/components/meta.json
+++ b/content/docs/components/meta.json
@@ -8,7 +8,7 @@
     "ascii-fluid",
     "---Shaders---",
     "shader-gradient",
-    "shader-fire",
+    "shader-anime-fire",
     "shader-sky",
     "---Footers---",
     "stretchy-footer",
diff --git a/content/docs/getting-started.mdx b/content/docs/getting-started.mdx
index 56b9231..2d92560 100644
--- a/content/docs/getting-started.mdx
+++ b/content/docs/getting-started.mdx
@@ -13,7 +13,7 @@ Or pull straight from the public GitHub source registry:
 
 <CliCommand item="shader-gradient" github />
 
-Swap `shader-gradient` for any item name — `shader-sky`, `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
+Swap `shader-gradient` for any item name — `shader-sky`, `shader-anime-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
 
 ## Use a background or shader
 
@@ -50,14 +50,14 @@ export function Hero() {
   </FrameworkSvelte>
 </FrameworkCode>
 
-Shaders such as [Shader Gradient](/docs/components/shader-gradient), [Shader Fire](/docs/components/shader-fire), and [Shader Sky](/docs/components/shader-sky) are atmosphere, not the page.
+Shaders such as [Shader Gradient](/docs/components/shader-gradient), [Shader Anime Fire](/docs/components/shader-anime-fire), and [Shader Sky](/docs/components/shader-sky) are atmosphere, not the page.
 
 ## Browse
 
 | Category   | Components                                                                                                                                                                                 |
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Background | [Logo Burst](/docs/components/logo-burst), [Phosphor Score](/docs/components/phosphor-score), [Radiant Lines](/docs/components/radiant-lines), [ASCII Fluid](/docs/components/ascii-fluid) |
-| Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Fire](/docs/components/shader-fire), [Shader Sky](/docs/components/shader-sky)                                                |
+| Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Anime Fire](/docs/components/shader-anime-fire), [Shader Sky](/docs/components/shader-sky)                                                |
 | Footers    | [Stretchy Footer](/docs/components/stretchy-footer)                                                                                       |
 | Characters | [Live Orb](/docs/components/live-orb), [ASCII Logo](/docs/components/ascii-logo)                                                                                                           |
 | Pages      | [Dithered 404](/docs/components/dithered-404)                                                                                                                                              |
diff --git a/next.config.mjs b/next.config.mjs
index 7ebb9ad..5c76c04 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,6 +16,11 @@ const config = {
         destination: "/docs/getting-started",
         permanent: false,
       },
+      {
+        source: "/docs/components/shader-fire",
+        destination: "/docs/components/shader-anime-fire",
+        permanent: true,
+      },
       {
         source: "/pricing",
         destination: "/sponsors",
diff --git a/public/og/docs/components/shader-anime-fire/image.png b/public/og/docs/components/shader-anime-fire/image.png
index 75d1d565314262ebecc5807b6076de78029b0d48..c1ec26451209bcca812880d4ad1cca2c5c064a7b 100644
GIT binary patch
literal 48510
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
a-aBj=l%ADW^~XN;Kk!YX8|BxW9{n${%DZC#

literal 46265
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

diff --git a/public/r/dithered-404-svelte.json b/public/r/dithered-404-svelte.json
index d8133fa..4e22b37 100644
--- a/public/r/dithered-404-svelte.json
+++ b/public/r/dithered-404-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/dithered-404/dithered-404.svelte",
-      "content": "<script module lang=\"ts\">\nexport type Dithered404Theme = \"light\" | \"dark\" | \"auto\"\n\nexport type Dithered404Options = {\n  /** Glyph ink (hex). Default follows theme. */\n  color?: string\n  /** Dither cell size in CSS px. Default `4` */\n  pixelSize?: number\n  /** Fireball radius in CSS px. Default `28` */\n  brush?: number\n  /** Follow pointer / replace cursor. Default `true` */\n  interactive?: boolean\n  /** Ordered Bayer print. Default `true`. Off is a soft realistic fire. */\n  dither?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: Dithered404Theme\n  /** Fires when the fireball cursor should hide the system pointer. */\n  onHideCursor?: (hide: boolean) => void\n}\n\nexport type Dithered404Instance = {\n  setOptions: (options: Partial<Dithered404Options>) => void\n  destroy: () => void\n}\n\n/** Near-black ink on paper */\nexport const LIGHT_COLOR = \"#18181B\"\n/** Near-white ink on slate */\nexport const DARK_COLOR = \"#E4E4E7\"\n\nconst FIRE_EMBER = \"#A33A18\"\nconst FIRE_FLAME = \"#D4682A\"\nconst FIRE_HIGHLIGHT = \"#E8B45A\"\n\nconst SOLID = 0\nconst EMBER = 1\nconst SMOKE = 2\nconst REFORMING = 3\n\nconst PHASE_READY = 0\nconst PHASE_REFORMING = 1\n\nconst RESET_DELAY_MS = 900\nconst REFORM_SNAP_MS = 1800\nconst COLLAPSE_RATIO = 0.12\nconst MAX_EMBERS = 900\nconst MAX_EMBERS_FINE = 260\nconst MAX_SMOKE = 420\nconst MAX_SMOKE_FINE = 160\nconst CHAR_HEAT_GAIN = 0.2\nconst CHAR_COOL = 0.01\n\nconst BAYER8 = [\n  [0, 32, 8, 40, 2, 34, 10, 42],\n  [48, 16, 56, 24, 50, 18, 58, 26],\n  [12, 44, 4, 36, 14, 46, 6, 38],\n  [60, 28, 52, 20, 62, 30, 54, 22],\n  [3, 35, 11, 43, 1, 33, 9, 41],\n  [51, 19, 59, 27, 49, 17, 57, 25],\n  [15, 47, 7, 39, 13, 45, 5, 37],\n  [63, 31, 55, 23, 61, 29, 53, 21],\n] as const\n\ntype Particle = {\n  x: number\n  y: number\n  homeX: number\n  homeY: number\n  vx: number\n  vy: number\n  size: number\n  state: 0 | 1 | 2 | 3\n  life: number\n  rot: number\n  vr: number\n  gx: number\n  gy: number\n  fill: string\n  alpha: number\n  sleep: number\n  heat: number\n}\n\ntype GlyphCell = {\n  homeX: number\n  homeY: number\n  gx: number\n  gy: number\n  alpha: number\n}\n\nfunction bayerAt(gx: number, gy: number) {\n  const x = ((gx % 8) + 8) % 8\n  const y = ((gy % 8) + 8) % 8\n  return BAYER8[y]![x]! / 64\n}\n\nfunction hash2(x: number, y: number) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123\n  return s - Math.floor(s)\n}\n\nfunction valueNoise(x: number, y: number) {\n  const ix = Math.floor(x)\n  const iy = Math.floor(y)\n  const fx = x - ix\n  const fy = y - iy\n  const a = hash2(ix, iy)\n  const b = hash2(ix + 1, iy)\n  const c = hash2(ix, iy + 1)\n  const d = hash2(ix + 1, iy + 1)\n  const ux = fx * fx * (3 - 2 * fx)\n  const uy = fy * fy * (3 - 2 * fy)\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy\n}\n\nfunction fbm(x: number, y: number) {\n  let v = 0\n  let a = 0.5\n  let f = 1\n  for (let i = 0; i < 3; i++) {\n    v += valueNoise(x * f, y * f) * a\n    a *= 0.5\n    f *= 2.05\n  }\n  return v\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: Dithered404Theme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction cellKey(gx: number, gy: number) {\n  return gx * 4096 + gy\n}\n\nfunction fireTint(field: number) {\n  if (field > 0.72) return FIRE_HIGHLIGHT\n  if (field > 0.4) return FIRE_FLAME\n  return FIRE_EMBER\n}\n\nfunction hexRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [163, 58, 24]\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]\n}\n\nfunction rgba(hex: string, a: number) {\n  const [r, g, b] = hexRgb(hex)\n  return `rgba(${r},${g},${b},${a})`\n}\n\nfunction scorchedInk(ink: string, heat: number): string {\n  if (heat <= 0.02) return ink\n  const [r, g, b] = hexRgb(ink)\n  const h = heat > 1 ? 1 : heat\n  const lum = (r + g + b) / 3\n  let nr: number\n  let ng: number\n  let nb: number\n  if (lum >= 130) {\n    const k = 1 - h * 0.9\n    nr = r * k\n    ng = g * k * (1 - h * 0.12)\n    nb = b * k * (1 - h * 0.22)\n    if (h > 0.5) {\n      const g2 = (h - 0.5) / 0.5\n      nr = nr * (1 - g2 * 0.35) + 163 * g2 * 0.55\n      ng = ng * (1 - g2 * 0.35) + 58 * g2 * 0.4\n      nb = nb * (1 - g2 * 0.35) + 24 * g2 * 0.25\n    }\n  } else {\n    nr = r * (1 - h * 0.22) + 52 * h\n    ng = g * (1 - h * 0.38) + 18 * h\n    nb = b * (1 - h * 0.52) + 8 * h\n    if (h > 0.55) {\n      const g2 = (h - 0.55) / 0.45\n      nr = nr * (1 - g2 * 0.4) + 163 * g2 * 0.7\n      ng = ng * (1 - g2 * 0.4) + 58 * g2 * 0.5\n      nb = nb * (1 - g2 * 0.4) + 24 * g2 * 0.3\n    }\n  }\n  return `rgb(${nr | 0},${ng | 0},${nb | 0})`\n}\n\nfunction rasterizeGlyph(\n  cssW: number,\n  cssH: number,\n  pixelSize: number,\n  dpr: number,\n  dither: boolean\n): GlyphCell[] {\n  const w = Math.max(1, Math.floor(cssW * dpr))\n  const h = Math.max(1, Math.floor(cssH * dpr))\n  const cell = Math.max(1, Math.round(pixelSize * dpr))\n  const off = document.createElement(\"canvas\")\n  off.width = w\n  off.height = h\n  const ctx = off.getContext(\"2d\", { willReadFrequently: true })\n  if (!ctx) return []\n\n  const family = getComputedStyle(document.body).fontFamily || \"ui-sans-serif\"\n  const fontSize = Math.min(cssW * 0.54, cssH * 0.5) * dpr\n  ctx.clearRect(0, 0, w, h)\n  ctx.fillStyle = \"#fff\"\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  ctx.font = `800 ${fontSize}px ${family}`\n  if (\"letterSpacing\" in ctx) {\n    ;(\n      ctx as CanvasRenderingContext2D & { letterSpacing: string }\n    ).letterSpacing = `${-fontSize * 0.045}px`\n  }\n  ctx.fillText(\"404\", w / 2, h / 2)\n\n  const data = ctx.getImageData(0, 0, w, h).data\n  const cells: GlyphCell[] = []\n\n  for (let y = 0; y < h; y += cell) {\n    for (let x = 0; x < w; x += cell) {\n      let cover = 0\n      let samples = 0\n      const step = Math.max(1, Math.floor(cell / 3))\n      for (let sy = 0; sy < cell; sy += step) {\n        for (let sx = 0; sx < cell; sx += step) {\n          const px = x + sx\n          const py = y + sy\n          if (px >= w || py >= h) continue\n          cover += data[(py * w + px) * 4 + 3]!\n          samples++\n        }\n      }\n      const alpha = samples > 0 ? cover / (samples * 255) : 0\n      if (alpha < (dither ? 0.18 : 0.08)) continue\n      const gx = Math.floor(x / cell)\n      const gy = Math.floor(y / cell)\n      if (dither && alpha < bayerAt(gx, gy) * 0.92 + 0.08) continue\n      cells.push({\n        homeX: x / dpr,\n        homeY: y / dpr,\n        gx,\n        gy,\n        alpha: dither ? 1 : Math.min(1, alpha * 1.15),\n      })\n    }\n  }\n\n  return cells\n}\n\nfunction spawnFromCells(\n  cells: GlyphCell[],\n  pixelSize: number,\n  ink: string,\n  cssH: number,\n  assemble: boolean\n): Particle[] {\n  return cells.map((cell) => {\n    const fromBelow = assemble\n    return {\n      x: fromBelow ? cell.homeX + (Math.random() - 0.5) * 28 : cell.homeX,\n      y: fromBelow ? cssH + 12 + Math.random() * 90 : cell.homeY,\n      homeX: cell.homeX,\n      homeY: cell.homeY,\n      vx: 0,\n      vy: fromBelow ? -2.2 - Math.random() * 1.4 : 0,\n      size: pixelSize,\n      state: fromBelow ? REFORMING : SOLID,\n      life: 1,\n      rot: 0,\n      vr: 0,\n      gx: cell.gx,\n      gy: cell.gy,\n      fill: ink,\n      alpha: cell.alpha,\n      sleep: 0,\n      heat: 0,\n    }\n  })\n}\n\nfunction smokeFill(dark: boolean) {\n  if (dark) {\n    return Math.random() > 0.45 ? \"#A1A1AA\" : \"#71717A\"\n  }\n  return Math.random() > 0.45 ? \"#52525B\" : \"#3F3F46\"\n}\n\nfunction burnParticle(\n  particles: Particle[],\n  p: Particle,\n  emberCount: { n: number },\n  smokeCount: { n: number },\n  pixelSize: number,\n  maxEmbers: number,\n  maxSmoke: number,\n  dark: boolean\n) {\n  p.state = EMBER\n  p.life = 0.28 + Math.random() * (pixelSize <= 2 ? 0.28 : 0.45)\n  p.size = Math.max(1, p.size * 0.55)\n  p.vx = (Math.random() - 0.5) * 2.8\n  p.vy = -1.2 - Math.random() * 2.4\n  p.fill = fireTint(0.35 + Math.random() * 0.65)\n  p.alpha = 1\n  p.heat = 0\n  emberCount.n++\n\n  const extra =\n    pixelSize <= 2\n      ? Math.random() < 0.22\n        ? 1\n        : 0\n      : 1 + Math.floor(Math.random() * 3)\n  for (let i = 0; i < extra && emberCount.n < maxEmbers; i++) {\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size,\n      y: p.y + (Math.random() - 0.5) * p.size,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 3.4,\n      vy: -1.6 - Math.random() * 2.8,\n      size: Math.max(1, p.size * (0.35 + Math.random() * 0.4)),\n      state: EMBER,\n      life: 0.22 + Math.random() * 0.4,\n      rot: 0,\n      vr: 0,\n      gx: p.gx,\n      gy: p.gy,\n      fill: fireTint(0.25 + Math.random() * 0.75),\n      alpha: 1,\n      sleep: 0,\n      heat: 0,\n    })\n    emberCount.n++\n  }\n\n  const puffs =\n    pixelSize <= 2\n      ? Math.random() < 0.55\n        ? 1\n        : 0\n      : 1 + (Math.random() < 0.55 ? 1 : 0)\n  for (let i = 0; i < puffs && smokeCount.n < maxSmoke; i++) {\n    const puff = pixelSize * (1.6 + Math.random() * 1.8)\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size * 0.8,\n      y: p.y + (Math.random() - 0.5) * p.size * 0.8,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 0.55,\n      vy: -0.45 - Math.random() * 0.85,\n      size: puff,\n      state: SMOKE,\n      life: 0.75 + Math.random() * 0.95,\n      rot: 0,\n      vr: (Math.random() - 0.5) * 0.04,\n      gx: p.gx,\n      gy: p.gy,\n      fill: smokeFill(dark),\n      alpha: 0.42,\n      sleep: 0,\n      heat: 0,\n    })\n    smokeCount.n++\n  }\n}\n\nfunction fireFieldAt(\n  x: number,\n  y: number,\n  mx: number,\n  my: number,\n  r: number,\n  t: number\n) {\n  const dx = (x - mx) / r\n  const dy = (y - my) / r\n  const px = dx\n  const py = dy > 0 ? dy * 1.4 : dy * 0.72\n  const dist = Math.hypot(px, py)\n  if (dist > 1.12) return 0\n  const n = fbm(x * 0.055 + t * 1.7, y * 0.06 - t * 2.6)\n  return Math.max(0, (1 - dist) * (0.38 + 0.62 * n))\n}\n\nfunction drawFireball(\n  ctx: CanvasRenderingContext2D,\n  mx: number,\n  my: number,\n  t: number,\n  pixelSize: number,\n  brush: number,\n  dither: boolean\n) {\n  const r = brush\n  const minX = mx - r\n  const maxX = mx + r\n  const minY = my - r * 1.35\n  const maxY = my + r * 0.85\n\n  if (!dither) {\n    ctx.save()\n    ctx.globalCompositeOperation = \"lighter\"\n    const glow = ctx.createRadialGradient(\n      mx,\n      my - r * 0.22,\n      r * 0.04,\n      mx,\n      my - r * 0.08,\n      r * 1.05\n    )\n    glow.addColorStop(0, rgba(FIRE_HIGHLIGHT, 0.95))\n    glow.addColorStop(0.28, rgba(FIRE_FLAME, 0.72))\n    glow.addColorStop(0.62, rgba(FIRE_EMBER, 0.32))\n    glow.addColorStop(1, rgba(FIRE_EMBER, 0))\n    ctx.fillStyle = glow\n    ctx.beginPath()\n    ctx.ellipse(mx, my - r * 0.18, r * 0.78, r * 1.12, 0, 0, Math.PI * 2)\n    ctx.fill()\n\n    const cell = 2\n    for (let y = minY; y <= maxY; y += cell) {\n      for (let x = minX; x <= maxX; x += cell) {\n        const field = fireFieldAt(x + 1, y + 1, mx, my, r, t)\n        if (field < 0.08) continue\n        ctx.globalAlpha = Math.min(0.9, field * 1.05)\n        ctx.fillStyle = fireTint(field)\n        ctx.fillRect(x, y, cell + 0.5, cell + 0.5)\n      }\n    }\n    ctx.restore()\n    return\n  }\n\n  const cell = Math.max(3, pixelSize)\n  for (let y = minY; y <= maxY; y += cell) {\n    for (let x = minX; x <= maxX; x += cell) {\n      const cx = Math.floor(x / cell) * cell\n      const cy = Math.floor(y / cell) * cell\n      const field = fireFieldAt(cx + cell * 0.5, cy + cell * 0.5, mx, my, r, t)\n      if (field < 0.1) continue\n      if (\n        field <\n        bayerAt(Math.floor(cx / cell), Math.floor(cy / cell)) * 0.9 + 0.06\n      ) {\n        continue\n      }\n      ctx.fillStyle = fireTint(field)\n      ctx.fillRect(cx, cy, cell, cell)\n    }\n  }\n}\n\n/**\n * Bayer-pixel 404 section — a fireball cursor scorches and burns\n * the glyph into embers and smoke, then the type reforms.\n * `dither={false}` is a soft realistic fire, same idea as Shader Fire.\n */\nexport function createDithered404(\n  wrap: HTMLElement,\n  canvas: HTMLCanvasElement,\n  initial: Dithered404Options = {}\n): Dithered404Instance | null {\n  let options: Required<\n    Pick<\n      Dithered404Options,\n      \"pixelSize\" | \"brush\" | \"interactive\" | \"dither\" | \"theme\"\n    >\n  > &\n    Dithered404Options = {\n    pixelSize: 4,\n    brush: 28,\n    interactive: true,\n    dither: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true, desynchronized: true })\n  if (!ctx) return null\n\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  let hover = false\n  const mouse = { x: 0, y: 0 }\n  const targetMouse = { x: 0, y: 0 }\n\n  let raf = 0\n  let running = true\n  let cssW = 0\n  let cssH = 0\n  let dpr = 1\n  let cells: GlyphCell[] = []\n  let particles: Particle[] = []\n  let lastPixel = -1\n  let lastDither: boolean | null = null\n  let lastW = 0\n  let lastH = 0\n  let phase = PHASE_READY\n  let resetAt = 0\n  let reformAt = 0\n  let lastNow = performance.now()\n  const start = lastNow\n\n  const inkOf = () => options.color ?? (dark ? DARK_COLOR : LIGHT_COLOR)\n\n  const rebuild = (assemble: boolean) => {\n    const px = Math.max(2, Math.round(options.pixelSize))\n    const useDither = options.dither\n    cells = rasterizeGlyph(cssW, cssH, px, dpr, useDither)\n    particles = spawnFromCells(cells, px, inkOf(), cssH, assemble)\n    phase = assemble ? PHASE_REFORMING : PHASE_READY\n    resetAt = 0\n    reformAt = assemble ? performance.now() : 0\n    lastPixel = px\n    lastDither = useDither\n  }\n\n  const startReform = (now: number, px: number, ink: string) => {\n    const have = new Set<number>()\n    for (const p of particles) {\n      if (p.state === EMBER || p.state === SMOKE) continue\n      p.state = REFORMING\n      p.size = px\n      p.fill = ink\n      p.vx = 0\n      p.vy = 0\n      p.vr = 0\n      p.sleep = 0\n      p.life = 1\n      p.heat = 0\n      have.add(cellKey(p.gx, p.gy))\n    }\n    for (const cell of cells) {\n      if (have.has(cellKey(cell.gx, cell.gy))) continue\n      particles.push({\n        x: cell.homeX + (Math.random() - 0.5) * 22,\n        y: cssH - px - Math.random() * 52,\n        homeX: cell.homeX,\n        homeY: cell.homeY,\n        vx: 0,\n        vy: 0,\n        size: px,\n        state: REFORMING,\n        life: 1,\n        rot: 0,\n        vr: 0,\n        gx: cell.gx,\n        gy: cell.gy,\n        fill: ink,\n        alpha: cell.alpha,\n        sleep: 0,\n        heat: 0,\n      })\n    }\n    phase = PHASE_REFORMING\n    resetAt = 0\n    reformAt = now\n  }\n\n  const resize = () => {\n    dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = wrap.clientWidth\n    const h = wrap.clientHeight\n    if (w <= 0 || h <= 0) return\n    cssW = w\n    cssH = h\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx.imageSmoothingEnabled = false\n    if (w !== lastW || h !== lastH) {\n      lastW = w\n      lastH = h\n      rebuild(false)\n    }\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  ro.observe(wrap)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    dark = resolveDark(options.theme ?? \"auto\")\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive || reduce) return\n    const rect = wrap.getBoundingClientRect()\n    targetMouse.x = e.clientX - rect.left\n    targetMouse.y = e.clientY - rect.top\n    if (!hover) {\n      hover = true\n      options.onHideCursor?.(true)\n    }\n  }\n  const onLeave = () => {\n    hover = false\n    options.onHideCursor?.(false)\n  }\n\n  wrap.addEventListener(\"pointermove\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerenter\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerleave\", onLeave)\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min(32, now - lastNow) / 16.67\n    lastNow = now\n    const t = (now - start) / 1000\n    const { pixelSize, brush, interactive, dither } = options\n    const px = Math.max(2, Math.round(pixelSize))\n    const ink = inkOf()\n\n    if ((px !== lastPixel || dither !== lastDither) && cssW > 0) {\n      rebuild(false)\n    }\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.28\n    mouse.y += (targetMouse.y - mouse.y) * 0.28\n\n    if (!reduce) {\n      if (resetAt && now >= resetAt) {\n        startReform(now, px, ink)\n      }\n\n      let solidCount = 0\n      let emberCount = 0\n      let smokeCount = 0\n      let reformingCount = 0\n      const emberBudget = { n: 0 }\n      const smokeBudget = { n: 0 }\n      const maxEmbers = px <= 2 ? MAX_EMBERS_FINE : MAX_EMBERS\n      const maxSmoke = px <= 2 ? MAX_SMOKE_FINE : MAX_SMOKE\n\n      const canBurn = interactive && hover && phase === PHASE_READY\n\n      const scorchR = brush * 0.92\n      const scorchR2 = scorchR * scorchR\n      const burnR = brush * 0.62\n      const burnR2 = burnR * burnR\n\n      for (let i = particles.length - 1; i >= 0; i--) {\n        const p = particles[i]!\n        if (p.state === SOLID) {\n          if (canBurn) {\n            const dx = p.x + p.size * 0.5 - mouse.x\n            const dy = p.y + p.size * 0.5 - mouse.y\n            const d2 = dx * dx + dy * dy\n            if (d2 < scorchR2) {\n              const heat = 1 - Math.sqrt(d2) / scorchR\n              p.heat = Math.min(1, p.heat + heat * CHAR_HEAT_GAIN * dt)\n              if (\n                p.heat > 0.58 &&\n                d2 < burnR2 &&\n                Math.random() < heat * 0.28 * dt\n              ) {\n                burnParticle(\n                  particles,\n                  p,\n                  emberBudget,\n                  smokeBudget,\n                  px,\n                  maxEmbers,\n                  maxSmoke,\n                  dark\n                )\n              }\n            } else if (p.heat > 0) {\n              p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n            }\n          } else if (p.heat > 0) {\n            p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n          }\n          if (p.state === SOLID) {\n            p.fill = p.heat > 0 ? scorchedInk(ink, p.heat) : ink\n          }\n        }\n\n        if (p.state === EMBER) {\n          p.vy -= 0.09 * dt\n          p.vx *= 0.94\n          p.vy *= 0.97\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.life -= (px <= 2 ? 0.04 : 0.028) * dt\n          p.size = Math.max(0.6, p.size * (1 - 0.02 * dt))\n          if (p.life <= 0) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          emberCount++\n          continue\n        }\n\n        if (p.state === SMOKE) {\n          p.vy -= 0.018 * dt\n          p.vx += Math.sin((now + p.x * 12) * 0.002) * 0.012 * dt\n          p.vx *= 0.985\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.size += 0.12 * dt\n          p.life -= (px <= 2 ? 0.018 : 0.012) * dt\n          p.alpha = Math.max(0, p.life * 0.5)\n          if (p.life <= 0 || p.y + p.size < -40) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          smokeCount++\n          continue\n        }\n\n        if (p.state === REFORMING) {\n          p.x += (p.homeX - p.x) * 0.16 * dt\n          p.y += (p.homeY - p.y) * 0.16 * dt\n          p.rot += (0 - p.rot) * 0.22 * dt\n          p.vx = 0\n          p.vy = 0\n          p.fill = ink\n          p.heat = 0\n          if (Math.hypot(p.homeX - p.x, p.homeY - p.y) < 0.7) {\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            solidCount++\n          } else {\n            reformingCount++\n          }\n          continue\n        }\n\n        if (p.state === SOLID) {\n          solidCount++\n        }\n      }\n\n      const initialCount = cells.length || 1\n      if (\n        phase === PHASE_READY &&\n        cells.length > 0 &&\n        solidCount / initialCount < COLLAPSE_RATIO &&\n        resetAt === 0\n      ) {\n        resetAt = now + RESET_DELAY_MS\n      }\n\n      if (phase === PHASE_REFORMING) {\n        if (reformingCount === 0) {\n          phase = PHASE_READY\n        } else if (reformAt && now - reformAt > REFORM_SNAP_MS) {\n          for (const p of particles) {\n            if (p.state !== REFORMING) continue\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            p.fill = ink\n          }\n          phase = PHASE_READY\n        }\n      }\n\n      if (emberCount > maxEmbers) {\n        let extra = emberCount - maxEmbers\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === EMBER) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n\n      if (smokeCount > maxSmoke) {\n        let extra = smokeCount - maxSmoke\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === SMOKE) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n    }\n\n    ctx.clearRect(0, 0, cssW, cssH)\n    ctx.imageSmoothingEnabled = !dither\n\n    for (const p of particles) {\n      if (p.state === EMBER) {\n        ctx.globalAlpha = Math.max(0, Math.min(1, p.life * 1.4))\n        ctx.fillStyle = p.fill\n        if (!dither) {\n          const glow = Math.max(1.2, p.size * 0.55)\n          ctx.beginPath()\n          ctx.arc(p.x + p.size * 0.5, p.y + p.size * 0.5, glow, 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      if (p.state === SMOKE) {\n        ctx.globalAlpha = Math.max(0, Math.min(0.45, p.alpha))\n        ctx.fillStyle = p.fill\n        const half = p.size * 0.5\n        if (!dither) {\n          ctx.beginPath()\n          ctx.arc(p.x + half, p.y + half, Math.max(1.2, half), 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      ctx.fillStyle = p.fill\n      ctx.globalAlpha = dither ? 1 : p.alpha\n      const pad = dither ? 0 : 0.35\n      if (p.state === REFORMING && Math.abs(p.rot) > 0.04) {\n        const half = p.size * 0.5\n        ctx.save()\n        ctx.translate(p.x + half, p.y + half)\n        ctx.rotate(p.rot)\n        ctx.fillRect(\n          -half - pad,\n          -half - pad,\n          p.size + pad * 2,\n          p.size + pad * 2\n        )\n        ctx.restore()\n      } else {\n        ctx.fillRect(p.x - pad, p.y - pad, p.size + pad * 2, p.size + pad * 2)\n      }\n    }\n\n    ctx.globalAlpha = 1\n    if (interactive && hover && !reduce) {\n      drawFireball(ctx, mouse.x, mouse.y, t, px, brush, dither)\n    }\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      wrap.removeEventListener(\"pointermove\", onMove)\n      wrap.removeEventListener(\"pointerenter\", onMove)\n      wrap.removeEventListener(\"pointerleave\", onLeave)\n      options.onHideCursor?.(false)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Dithered404Options {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    pixelSize = 4,\n    brush = 28,\n    interactive = true,\n    dither = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let wrap: HTMLDivElement | undefined = $state()\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let hideCursor = $state(false)\n  let instance: Dithered404Instance | null = null\n\n  onMount(() => {\n    if (!wrap || !canvas) return\n    instance = createDithered404(wrap, canvas, {\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n      onHideCursor: (hide) => {\n        hideCursor = hide\n      },\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n    })\n  })\n</script>\n\n<div\n  bind:this={wrap}\n  data-slot=\"dithered-404\"\n  class={cn(\n    \"absolute inset-0 touch-none overflow-hidden\",\n    hideCursor && interactive && \"cursor-none\",\n    className\n  )}\n>\n  <span class=\"sr-only\">404</span>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type Dithered404Theme = \"light\" | \"dark\" | \"auto\"\n\nexport type Dithered404Options = {\n  /** Glyph ink (hex). Default follows theme. */\n  color?: string\n  /** Dither cell size in CSS px. Default `4` */\n  pixelSize?: number\n  /** Fireball radius in CSS px. Default `28` */\n  brush?: number\n  /** Follow pointer / replace cursor. Default `true` */\n  interactive?: boolean\n  /** Ordered Bayer print. Default `true`. Off is a soft realistic fire. */\n  dither?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: Dithered404Theme\n  /** Fires when the fireball cursor should hide the system pointer. */\n  onHideCursor?: (hide: boolean) => void\n}\n\nexport type Dithered404Instance = {\n  setOptions: (options: Partial<Dithered404Options>) => void\n  destroy: () => void\n}\n\n/** Near-black ink on paper */\nexport const LIGHT_COLOR = \"#18181B\"\n/** Near-white ink on slate */\nexport const DARK_COLOR = \"#E4E4E7\"\n\nconst FIRE_EMBER = \"#A33A18\"\nconst FIRE_FLAME = \"#D4682A\"\nconst FIRE_HIGHLIGHT = \"#E8B45A\"\n\nconst SOLID = 0\nconst EMBER = 1\nconst SMOKE = 2\nconst REFORMING = 3\n\nconst PHASE_READY = 0\nconst PHASE_REFORMING = 1\n\nconst RESET_DELAY_MS = 900\nconst REFORM_SNAP_MS = 1800\nconst COLLAPSE_RATIO = 0.12\nconst MAX_EMBERS = 900\nconst MAX_EMBERS_FINE = 260\nconst MAX_SMOKE = 420\nconst MAX_SMOKE_FINE = 160\nconst CHAR_HEAT_GAIN = 0.2\nconst CHAR_COOL = 0.01\n\nconst BAYER8 = [\n  [0, 32, 8, 40, 2, 34, 10, 42],\n  [48, 16, 56, 24, 50, 18, 58, 26],\n  [12, 44, 4, 36, 14, 46, 6, 38],\n  [60, 28, 52, 20, 62, 30, 54, 22],\n  [3, 35, 11, 43, 1, 33, 9, 41],\n  [51, 19, 59, 27, 49, 17, 57, 25],\n  [15, 47, 7, 39, 13, 45, 5, 37],\n  [63, 31, 55, 23, 61, 29, 53, 21],\n] as const\n\ntype Particle = {\n  x: number\n  y: number\n  homeX: number\n  homeY: number\n  vx: number\n  vy: number\n  size: number\n  state: 0 | 1 | 2 | 3\n  life: number\n  rot: number\n  vr: number\n  gx: number\n  gy: number\n  fill: string\n  alpha: number\n  sleep: number\n  heat: number\n}\n\ntype GlyphCell = {\n  homeX: number\n  homeY: number\n  gx: number\n  gy: number\n  alpha: number\n}\n\nfunction bayerAt(gx: number, gy: number) {\n  const x = ((gx % 8) + 8) % 8\n  const y = ((gy % 8) + 8) % 8\n  return BAYER8[y]![x]! / 64\n}\n\nfunction hash2(x: number, y: number) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123\n  return s - Math.floor(s)\n}\n\nfunction valueNoise(x: number, y: number) {\n  const ix = Math.floor(x)\n  const iy = Math.floor(y)\n  const fx = x - ix\n  const fy = y - iy\n  const a = hash2(ix, iy)\n  const b = hash2(ix + 1, iy)\n  const c = hash2(ix, iy + 1)\n  const d = hash2(ix + 1, iy + 1)\n  const ux = fx * fx * (3 - 2 * fx)\n  const uy = fy * fy * (3 - 2 * fy)\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy\n}\n\nfunction fbm(x: number, y: number) {\n  let v = 0\n  let a = 0.5\n  let f = 1\n  for (let i = 0; i < 3; i++) {\n    v += valueNoise(x * f, y * f) * a\n    a *= 0.5\n    f *= 2.05\n  }\n  return v\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: Dithered404Theme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction cellKey(gx: number, gy: number) {\n  return gx * 4096 + gy\n}\n\nfunction fireTint(field: number) {\n  if (field > 0.72) return FIRE_HIGHLIGHT\n  if (field > 0.4) return FIRE_FLAME\n  return FIRE_EMBER\n}\n\nfunction hexRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [163, 58, 24]\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]\n}\n\nfunction rgba(hex: string, a: number) {\n  const [r, g, b] = hexRgb(hex)\n  return `rgba(${r},${g},${b},${a})`\n}\n\nfunction scorchedInk(ink: string, heat: number): string {\n  if (heat <= 0.02) return ink\n  const [r, g, b] = hexRgb(ink)\n  const h = heat > 1 ? 1 : heat\n  const lum = (r + g + b) / 3\n  let nr: number\n  let ng: number\n  let nb: number\n  if (lum >= 130) {\n    const k = 1 - h * 0.9\n    nr = r * k\n    ng = g * k * (1 - h * 0.12)\n    nb = b * k * (1 - h * 0.22)\n    if (h > 0.5) {\n      const g2 = (h - 0.5) / 0.5\n      nr = nr * (1 - g2 * 0.35) + 163 * g2 * 0.55\n      ng = ng * (1 - g2 * 0.35) + 58 * g2 * 0.4\n      nb = nb * (1 - g2 * 0.35) + 24 * g2 * 0.25\n    }\n  } else {\n    nr = r * (1 - h * 0.22) + 52 * h\n    ng = g * (1 - h * 0.38) + 18 * h\n    nb = b * (1 - h * 0.52) + 8 * h\n    if (h > 0.55) {\n      const g2 = (h - 0.55) / 0.45\n      nr = nr * (1 - g2 * 0.4) + 163 * g2 * 0.7\n      ng = ng * (1 - g2 * 0.4) + 58 * g2 * 0.5\n      nb = nb * (1 - g2 * 0.4) + 24 * g2 * 0.3\n    }\n  }\n  return `rgb(${nr | 0},${ng | 0},${nb | 0})`\n}\n\nfunction rasterizeGlyph(\n  cssW: number,\n  cssH: number,\n  pixelSize: number,\n  dpr: number,\n  dither: boolean\n): GlyphCell[] {\n  const w = Math.max(1, Math.floor(cssW * dpr))\n  const h = Math.max(1, Math.floor(cssH * dpr))\n  const cell = Math.max(1, Math.round(pixelSize * dpr))\n  const off = document.createElement(\"canvas\")\n  off.width = w\n  off.height = h\n  const ctx = off.getContext(\"2d\", { willReadFrequently: true })\n  if (!ctx) return []\n\n  const family = getComputedStyle(document.body).fontFamily || \"ui-sans-serif\"\n  const fontSize = Math.min(cssW * 0.54, cssH * 0.5) * dpr\n  ctx.clearRect(0, 0, w, h)\n  ctx.fillStyle = \"#fff\"\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  ctx.font = `800 ${fontSize}px ${family}`\n  if (\"letterSpacing\" in ctx) {\n    ;(\n      ctx as CanvasRenderingContext2D & { letterSpacing: string }\n    ).letterSpacing = `${-fontSize * 0.045}px`\n  }\n  ctx.fillText(\"404\", w / 2, h / 2)\n\n  const data = ctx.getImageData(0, 0, w, h).data\n  const cells: GlyphCell[] = []\n\n  for (let y = 0; y < h; y += cell) {\n    for (let x = 0; x < w; x += cell) {\n      let cover = 0\n      let samples = 0\n      const step = Math.max(1, Math.floor(cell / 3))\n      for (let sy = 0; sy < cell; sy += step) {\n        for (let sx = 0; sx < cell; sx += step) {\n          const px = x + sx\n          const py = y + sy\n          if (px >= w || py >= h) continue\n          cover += data[(py * w + px) * 4 + 3]!\n          samples++\n        }\n      }\n      const alpha = samples > 0 ? cover / (samples * 255) : 0\n      if (alpha < (dither ? 0.18 : 0.08)) continue\n      const gx = Math.floor(x / cell)\n      const gy = Math.floor(y / cell)\n      if (dither && alpha < bayerAt(gx, gy) * 0.92 + 0.08) continue\n      cells.push({\n        homeX: x / dpr,\n        homeY: y / dpr,\n        gx,\n        gy,\n        alpha: dither ? 1 : Math.min(1, alpha * 1.15),\n      })\n    }\n  }\n\n  return cells\n}\n\nfunction spawnFromCells(\n  cells: GlyphCell[],\n  pixelSize: number,\n  ink: string,\n  cssH: number,\n  assemble: boolean\n): Particle[] {\n  return cells.map((cell) => {\n    const fromBelow = assemble\n    return {\n      x: fromBelow ? cell.homeX + (Math.random() - 0.5) * 28 : cell.homeX,\n      y: fromBelow ? cssH + 12 + Math.random() * 90 : cell.homeY,\n      homeX: cell.homeX,\n      homeY: cell.homeY,\n      vx: 0,\n      vy: fromBelow ? -2.2 - Math.random() * 1.4 : 0,\n      size: pixelSize,\n      state: fromBelow ? REFORMING : SOLID,\n      life: 1,\n      rot: 0,\n      vr: 0,\n      gx: cell.gx,\n      gy: cell.gy,\n      fill: ink,\n      alpha: cell.alpha,\n      sleep: 0,\n      heat: 0,\n    }\n  })\n}\n\nfunction smokeFill(dark: boolean) {\n  if (dark) {\n    return Math.random() > 0.45 ? \"#A1A1AA\" : \"#71717A\"\n  }\n  return Math.random() > 0.45 ? \"#52525B\" : \"#3F3F46\"\n}\n\nfunction burnParticle(\n  particles: Particle[],\n  p: Particle,\n  emberCount: { n: number },\n  smokeCount: { n: number },\n  pixelSize: number,\n  maxEmbers: number,\n  maxSmoke: number,\n  dark: boolean\n) {\n  p.state = EMBER\n  p.life = 0.28 + Math.random() * (pixelSize <= 2 ? 0.28 : 0.45)\n  p.size = Math.max(1, p.size * 0.55)\n  p.vx = (Math.random() - 0.5) * 2.8\n  p.vy = -1.2 - Math.random() * 2.4\n  p.fill = fireTint(0.35 + Math.random() * 0.65)\n  p.alpha = 1\n  p.heat = 0\n  emberCount.n++\n\n  const extra =\n    pixelSize <= 2\n      ? Math.random() < 0.22\n        ? 1\n        : 0\n      : 1 + Math.floor(Math.random() * 3)\n  for (let i = 0; i < extra && emberCount.n < maxEmbers; i++) {\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size,\n      y: p.y + (Math.random() - 0.5) * p.size,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 3.4,\n      vy: -1.6 - Math.random() * 2.8,\n      size: Math.max(1, p.size * (0.35 + Math.random() * 0.4)),\n      state: EMBER,\n      life: 0.22 + Math.random() * 0.4,\n      rot: 0,\n      vr: 0,\n      gx: p.gx,\n      gy: p.gy,\n      fill: fireTint(0.25 + Math.random() * 0.75),\n      alpha: 1,\n      sleep: 0,\n      heat: 0,\n    })\n    emberCount.n++\n  }\n\n  const puffs =\n    pixelSize <= 2\n      ? Math.random() < 0.55\n        ? 1\n        : 0\n      : 1 + (Math.random() < 0.55 ? 1 : 0)\n  for (let i = 0; i < puffs && smokeCount.n < maxSmoke; i++) {\n    const puff = pixelSize * (1.6 + Math.random() * 1.8)\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size * 0.8,\n      y: p.y + (Math.random() - 0.5) * p.size * 0.8,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 0.55,\n      vy: -0.45 - Math.random() * 0.85,\n      size: puff,\n      state: SMOKE,\n      life: 0.75 + Math.random() * 0.95,\n      rot: 0,\n      vr: (Math.random() - 0.5) * 0.04,\n      gx: p.gx,\n      gy: p.gy,\n      fill: smokeFill(dark),\n      alpha: 0.42,\n      sleep: 0,\n      heat: 0,\n    })\n    smokeCount.n++\n  }\n}\n\nfunction fireFieldAt(\n  x: number,\n  y: number,\n  mx: number,\n  my: number,\n  r: number,\n  t: number\n) {\n  const dx = (x - mx) / r\n  const dy = (y - my) / r\n  const px = dx\n  const py = dy > 0 ? dy * 1.4 : dy * 0.72\n  const dist = Math.hypot(px, py)\n  if (dist > 1.12) return 0\n  const n = fbm(x * 0.055 + t * 1.7, y * 0.06 - t * 2.6)\n  return Math.max(0, (1 - dist) * (0.38 + 0.62 * n))\n}\n\nfunction drawFireball(\n  ctx: CanvasRenderingContext2D,\n  mx: number,\n  my: number,\n  t: number,\n  pixelSize: number,\n  brush: number,\n  dither: boolean\n) {\n  const r = brush\n  const minX = mx - r\n  const maxX = mx + r\n  const minY = my - r * 1.35\n  const maxY = my + r * 0.85\n\n  if (!dither) {\n    ctx.save()\n    ctx.globalCompositeOperation = \"lighter\"\n    const glow = ctx.createRadialGradient(\n      mx,\n      my - r * 0.22,\n      r * 0.04,\n      mx,\n      my - r * 0.08,\n      r * 1.05\n    )\n    glow.addColorStop(0, rgba(FIRE_HIGHLIGHT, 0.95))\n    glow.addColorStop(0.28, rgba(FIRE_FLAME, 0.72))\n    glow.addColorStop(0.62, rgba(FIRE_EMBER, 0.32))\n    glow.addColorStop(1, rgba(FIRE_EMBER, 0))\n    ctx.fillStyle = glow\n    ctx.beginPath()\n    ctx.ellipse(mx, my - r * 0.18, r * 0.78, r * 1.12, 0, 0, Math.PI * 2)\n    ctx.fill()\n\n    const cell = 2\n    for (let y = minY; y <= maxY; y += cell) {\n      for (let x = minX; x <= maxX; x += cell) {\n        const field = fireFieldAt(x + 1, y + 1, mx, my, r, t)\n        if (field < 0.08) continue\n        ctx.globalAlpha = Math.min(0.9, field * 1.05)\n        ctx.fillStyle = fireTint(field)\n        ctx.fillRect(x, y, cell + 0.5, cell + 0.5)\n      }\n    }\n    ctx.restore()\n    return\n  }\n\n  const cell = Math.max(3, pixelSize)\n  for (let y = minY; y <= maxY; y += cell) {\n    for (let x = minX; x <= maxX; x += cell) {\n      const cx = Math.floor(x / cell) * cell\n      const cy = Math.floor(y / cell) * cell\n      const field = fireFieldAt(cx + cell * 0.5, cy + cell * 0.5, mx, my, r, t)\n      if (field < 0.1) continue\n      if (\n        field <\n        bayerAt(Math.floor(cx / cell), Math.floor(cy / cell)) * 0.9 + 0.06\n      ) {\n        continue\n      }\n      ctx.fillStyle = fireTint(field)\n      ctx.fillRect(cx, cy, cell, cell)\n    }\n  }\n}\n\n/**\n * Bayer-pixel 404 section — a fireball cursor scorches and burns\n * the glyph into embers and smoke, then the type reforms.\n * `dither={false}` is a soft realistic fire.\n */\nexport function createDithered404(\n  wrap: HTMLElement,\n  canvas: HTMLCanvasElement,\n  initial: Dithered404Options = {}\n): Dithered404Instance | null {\n  let options: Required<\n    Pick<\n      Dithered404Options,\n      \"pixelSize\" | \"brush\" | \"interactive\" | \"dither\" | \"theme\"\n    >\n  > &\n    Dithered404Options = {\n    pixelSize: 4,\n    brush: 28,\n    interactive: true,\n    dither: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true, desynchronized: true })\n  if (!ctx) return null\n\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  let hover = false\n  const mouse = { x: 0, y: 0 }\n  const targetMouse = { x: 0, y: 0 }\n\n  let raf = 0\n  let running = true\n  let cssW = 0\n  let cssH = 0\n  let dpr = 1\n  let cells: GlyphCell[] = []\n  let particles: Particle[] = []\n  let lastPixel = -1\n  let lastDither: boolean | null = null\n  let lastW = 0\n  let lastH = 0\n  let phase = PHASE_READY\n  let resetAt = 0\n  let reformAt = 0\n  let lastNow = performance.now()\n  const start = lastNow\n\n  const inkOf = () => options.color ?? (dark ? DARK_COLOR : LIGHT_COLOR)\n\n  const rebuild = (assemble: boolean) => {\n    const px = Math.max(2, Math.round(options.pixelSize))\n    const useDither = options.dither\n    cells = rasterizeGlyph(cssW, cssH, px, dpr, useDither)\n    particles = spawnFromCells(cells, px, inkOf(), cssH, assemble)\n    phase = assemble ? PHASE_REFORMING : PHASE_READY\n    resetAt = 0\n    reformAt = assemble ? performance.now() : 0\n    lastPixel = px\n    lastDither = useDither\n  }\n\n  const startReform = (now: number, px: number, ink: string) => {\n    const have = new Set<number>()\n    for (const p of particles) {\n      if (p.state === EMBER || p.state === SMOKE) continue\n      p.state = REFORMING\n      p.size = px\n      p.fill = ink\n      p.vx = 0\n      p.vy = 0\n      p.vr = 0\n      p.sleep = 0\n      p.life = 1\n      p.heat = 0\n      have.add(cellKey(p.gx, p.gy))\n    }\n    for (const cell of cells) {\n      if (have.has(cellKey(cell.gx, cell.gy))) continue\n      particles.push({\n        x: cell.homeX + (Math.random() - 0.5) * 22,\n        y: cssH - px - Math.random() * 52,\n        homeX: cell.homeX,\n        homeY: cell.homeY,\n        vx: 0,\n        vy: 0,\n        size: px,\n        state: REFORMING,\n        life: 1,\n        rot: 0,\n        vr: 0,\n        gx: cell.gx,\n        gy: cell.gy,\n        fill: ink,\n        alpha: cell.alpha,\n        sleep: 0,\n        heat: 0,\n      })\n    }\n    phase = PHASE_REFORMING\n    resetAt = 0\n    reformAt = now\n  }\n\n  const resize = () => {\n    dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = wrap.clientWidth\n    const h = wrap.clientHeight\n    if (w <= 0 || h <= 0) return\n    cssW = w\n    cssH = h\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx.imageSmoothingEnabled = false\n    if (w !== lastW || h !== lastH) {\n      lastW = w\n      lastH = h\n      rebuild(false)\n    }\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  ro.observe(wrap)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    dark = resolveDark(options.theme ?? \"auto\")\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive || reduce) return\n    const rect = wrap.getBoundingClientRect()\n    targetMouse.x = e.clientX - rect.left\n    targetMouse.y = e.clientY - rect.top\n    if (!hover) {\n      hover = true\n      options.onHideCursor?.(true)\n    }\n  }\n  const onLeave = () => {\n    hover = false\n    options.onHideCursor?.(false)\n  }\n\n  wrap.addEventListener(\"pointermove\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerenter\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerleave\", onLeave)\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min(32, now - lastNow) / 16.67\n    lastNow = now\n    const t = (now - start) / 1000\n    const { pixelSize, brush, interactive, dither } = options\n    const px = Math.max(2, Math.round(pixelSize))\n    const ink = inkOf()\n\n    if ((px !== lastPixel || dither !== lastDither) && cssW > 0) {\n      rebuild(false)\n    }\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.28\n    mouse.y += (targetMouse.y - mouse.y) * 0.28\n\n    if (!reduce) {\n      if (resetAt && now >= resetAt) {\n        startReform(now, px, ink)\n      }\n\n      let solidCount = 0\n      let emberCount = 0\n      let smokeCount = 0\n      let reformingCount = 0\n      const emberBudget = { n: 0 }\n      const smokeBudget = { n: 0 }\n      const maxEmbers = px <= 2 ? MAX_EMBERS_FINE : MAX_EMBERS\n      const maxSmoke = px <= 2 ? MAX_SMOKE_FINE : MAX_SMOKE\n\n      const canBurn = interactive && hover && phase === PHASE_READY\n\n      const scorchR = brush * 0.92\n      const scorchR2 = scorchR * scorchR\n      const burnR = brush * 0.62\n      const burnR2 = burnR * burnR\n\n      for (let i = particles.length - 1; i >= 0; i--) {\n        const p = particles[i]!\n        if (p.state === SOLID) {\n          if (canBurn) {\n            const dx = p.x + p.size * 0.5 - mouse.x\n            const dy = p.y + p.size * 0.5 - mouse.y\n            const d2 = dx * dx + dy * dy\n            if (d2 < scorchR2) {\n              const heat = 1 - Math.sqrt(d2) / scorchR\n              p.heat = Math.min(1, p.heat + heat * CHAR_HEAT_GAIN * dt)\n              if (\n                p.heat > 0.58 &&\n                d2 < burnR2 &&\n                Math.random() < heat * 0.28 * dt\n              ) {\n                burnParticle(\n                  particles,\n                  p,\n                  emberBudget,\n                  smokeBudget,\n                  px,\n                  maxEmbers,\n                  maxSmoke,\n                  dark\n                )\n              }\n            } else if (p.heat > 0) {\n              p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n            }\n          } else if (p.heat > 0) {\n            p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n          }\n          if (p.state === SOLID) {\n            p.fill = p.heat > 0 ? scorchedInk(ink, p.heat) : ink\n          }\n        }\n\n        if (p.state === EMBER) {\n          p.vy -= 0.09 * dt\n          p.vx *= 0.94\n          p.vy *= 0.97\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.life -= (px <= 2 ? 0.04 : 0.028) * dt\n          p.size = Math.max(0.6, p.size * (1 - 0.02 * dt))\n          if (p.life <= 0) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          emberCount++\n          continue\n        }\n\n        if (p.state === SMOKE) {\n          p.vy -= 0.018 * dt\n          p.vx += Math.sin((now + p.x * 12) * 0.002) * 0.012 * dt\n          p.vx *= 0.985\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.size += 0.12 * dt\n          p.life -= (px <= 2 ? 0.018 : 0.012) * dt\n          p.alpha = Math.max(0, p.life * 0.5)\n          if (p.life <= 0 || p.y + p.size < -40) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          smokeCount++\n          continue\n        }\n\n        if (p.state === REFORMING) {\n          p.x += (p.homeX - p.x) * 0.16 * dt\n          p.y += (p.homeY - p.y) * 0.16 * dt\n          p.rot += (0 - p.rot) * 0.22 * dt\n          p.vx = 0\n          p.vy = 0\n          p.fill = ink\n          p.heat = 0\n          if (Math.hypot(p.homeX - p.x, p.homeY - p.y) < 0.7) {\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            solidCount++\n          } else {\n            reformingCount++\n          }\n          continue\n        }\n\n        if (p.state === SOLID) {\n          solidCount++\n        }\n      }\n\n      const initialCount = cells.length || 1\n      if (\n        phase === PHASE_READY &&\n        cells.length > 0 &&\n        solidCount / initialCount < COLLAPSE_RATIO &&\n        resetAt === 0\n      ) {\n        resetAt = now + RESET_DELAY_MS\n      }\n\n      if (phase === PHASE_REFORMING) {\n        if (reformingCount === 0) {\n          phase = PHASE_READY\n        } else if (reformAt && now - reformAt > REFORM_SNAP_MS) {\n          for (const p of particles) {\n            if (p.state !== REFORMING) continue\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            p.fill = ink\n          }\n          phase = PHASE_READY\n        }\n      }\n\n      if (emberCount > maxEmbers) {\n        let extra = emberCount - maxEmbers\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === EMBER) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n\n      if (smokeCount > maxSmoke) {\n        let extra = smokeCount - maxSmoke\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === SMOKE) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n    }\n\n    ctx.clearRect(0, 0, cssW, cssH)\n    ctx.imageSmoothingEnabled = !dither\n\n    for (const p of particles) {\n      if (p.state === EMBER) {\n        ctx.globalAlpha = Math.max(0, Math.min(1, p.life * 1.4))\n        ctx.fillStyle = p.fill\n        if (!dither) {\n          const glow = Math.max(1.2, p.size * 0.55)\n          ctx.beginPath()\n          ctx.arc(p.x + p.size * 0.5, p.y + p.size * 0.5, glow, 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      if (p.state === SMOKE) {\n        ctx.globalAlpha = Math.max(0, Math.min(0.45, p.alpha))\n        ctx.fillStyle = p.fill\n        const half = p.size * 0.5\n        if (!dither) {\n          ctx.beginPath()\n          ctx.arc(p.x + half, p.y + half, Math.max(1.2, half), 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      ctx.fillStyle = p.fill\n      ctx.globalAlpha = dither ? 1 : p.alpha\n      const pad = dither ? 0 : 0.35\n      if (p.state === REFORMING && Math.abs(p.rot) > 0.04) {\n        const half = p.size * 0.5\n        ctx.save()\n        ctx.translate(p.x + half, p.y + half)\n        ctx.rotate(p.rot)\n        ctx.fillRect(\n          -half - pad,\n          -half - pad,\n          p.size + pad * 2,\n          p.size + pad * 2\n        )\n        ctx.restore()\n      } else {\n        ctx.fillRect(p.x - pad, p.y - pad, p.size + pad * 2, p.size + pad * 2)\n      }\n    }\n\n    ctx.globalAlpha = 1\n    if (interactive && hover && !reduce) {\n      drawFireball(ctx, mouse.x, mouse.y, t, px, brush, dither)\n    }\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      wrap.removeEventListener(\"pointermove\", onMove)\n      wrap.removeEventListener(\"pointerenter\", onMove)\n      wrap.removeEventListener(\"pointerleave\", onLeave)\n      options.onHideCursor?.(false)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Dithered404Options {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    color,\n    pixelSize = 4,\n    brush = 28,\n    interactive = true,\n    dither = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let wrap: HTMLDivElement | undefined = $state()\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let hideCursor = $state(false)\n  let instance: Dithered404Instance | null = null\n\n  onMount(() => {\n    if (!wrap || !canvas) return\n    instance = createDithered404(wrap, canvas, {\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n      onHideCursor: (hide) => {\n        hideCursor = hide\n      },\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n    })\n  })\n</script>\n\n<div\n  bind:this={wrap}\n  data-slot=\"dithered-404\"\n  class={cn(\n    \"absolute inset-0 touch-none overflow-hidden\",\n    hideCursor && interactive && \"cursor-none\",\n    className\n  )}\n>\n  <span class=\"sr-only\">404</span>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/dithered-404.svelte"
     }
diff --git a/public/r/dithered-404.json b/public/r/dithered-404.json
index 0f4f047..bf8388f 100644
--- a/public/r/dithered-404.json
+++ b/public/r/dithered-404.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/dithered-404/dithered-404.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type Dithered404Theme = \"light\" | \"dark\" | \"auto\"\n\nexport type Dithered404Options = {\n  /** Glyph ink (hex). Default follows theme. */\n  color?: string\n  /** Dither cell size in CSS px. Default `4` */\n  pixelSize?: number\n  /** Fireball radius in CSS px. Default `28` */\n  brush?: number\n  /** Follow pointer / replace cursor. Default `true` */\n  interactive?: boolean\n  /** Ordered Bayer print. Default `true`. Off is a soft realistic fire. */\n  dither?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: Dithered404Theme\n  /** Fires when the fireball cursor should hide the system pointer. */\n  onHideCursor?: (hide: boolean) => void\n}\n\nexport type Dithered404Instance = {\n  setOptions: (options: Partial<Dithered404Options>) => void\n  destroy: () => void\n}\n\n/** Near-black ink on paper */\nexport const LIGHT_COLOR = \"#18181B\"\n/** Near-white ink on slate */\nexport const DARK_COLOR = \"#E4E4E7\"\n\nconst FIRE_EMBER = \"#A33A18\"\nconst FIRE_FLAME = \"#D4682A\"\nconst FIRE_HIGHLIGHT = \"#E8B45A\"\n\nconst SOLID = 0\nconst EMBER = 1\nconst SMOKE = 2\nconst REFORMING = 3\n\nconst PHASE_READY = 0\nconst PHASE_REFORMING = 1\n\nconst RESET_DELAY_MS = 900\nconst REFORM_SNAP_MS = 1800\nconst COLLAPSE_RATIO = 0.12\nconst MAX_EMBERS = 900\nconst MAX_EMBERS_FINE = 260\nconst MAX_SMOKE = 420\nconst MAX_SMOKE_FINE = 160\nconst CHAR_HEAT_GAIN = 0.2\nconst CHAR_COOL = 0.01\n\nconst BAYER8 = [\n  [0, 32, 8, 40, 2, 34, 10, 42],\n  [48, 16, 56, 24, 50, 18, 58, 26],\n  [12, 44, 4, 36, 14, 46, 6, 38],\n  [60, 28, 52, 20, 62, 30, 54, 22],\n  [3, 35, 11, 43, 1, 33, 9, 41],\n  [51, 19, 59, 27, 49, 17, 57, 25],\n  [15, 47, 7, 39, 13, 45, 5, 37],\n  [63, 31, 55, 23, 61, 29, 53, 21],\n] as const\n\ntype Particle = {\n  x: number\n  y: number\n  homeX: number\n  homeY: number\n  vx: number\n  vy: number\n  size: number\n  state: 0 | 1 | 2 | 3\n  life: number\n  rot: number\n  vr: number\n  gx: number\n  gy: number\n  fill: string\n  alpha: number\n  sleep: number\n  heat: number\n}\n\ntype GlyphCell = {\n  homeX: number\n  homeY: number\n  gx: number\n  gy: number\n  alpha: number\n}\n\nfunction bayerAt(gx: number, gy: number) {\n  const x = ((gx % 8) + 8) % 8\n  const y = ((gy % 8) + 8) % 8\n  return BAYER8[y]![x]! / 64\n}\n\nfunction hash2(x: number, y: number) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123\n  return s - Math.floor(s)\n}\n\nfunction valueNoise(x: number, y: number) {\n  const ix = Math.floor(x)\n  const iy = Math.floor(y)\n  const fx = x - ix\n  const fy = y - iy\n  const a = hash2(ix, iy)\n  const b = hash2(ix + 1, iy)\n  const c = hash2(ix, iy + 1)\n  const d = hash2(ix + 1, iy + 1)\n  const ux = fx * fx * (3 - 2 * fx)\n  const uy = fy * fy * (3 - 2 * fy)\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy\n}\n\nfunction fbm(x: number, y: number) {\n  let v = 0\n  let a = 0.5\n  let f = 1\n  for (let i = 0; i < 3; i++) {\n    v += valueNoise(x * f, y * f) * a\n    a *= 0.5\n    f *= 2.05\n  }\n  return v\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: Dithered404Theme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction cellKey(gx: number, gy: number) {\n  return gx * 4096 + gy\n}\n\nfunction fireTint(field: number) {\n  if (field > 0.72) return FIRE_HIGHLIGHT\n  if (field > 0.4) return FIRE_FLAME\n  return FIRE_EMBER\n}\n\nfunction hexRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [163, 58, 24]\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]\n}\n\nfunction rgba(hex: string, a: number) {\n  const [r, g, b] = hexRgb(hex)\n  return `rgba(${r},${g},${b},${a})`\n}\n\nfunction scorchedInk(ink: string, heat: number): string {\n  if (heat <= 0.02) return ink\n  const [r, g, b] = hexRgb(ink)\n  const h = heat > 1 ? 1 : heat\n  const lum = (r + g + b) / 3\n  let nr: number\n  let ng: number\n  let nb: number\n  if (lum >= 130) {\n    const k = 1 - h * 0.9\n    nr = r * k\n    ng = g * k * (1 - h * 0.12)\n    nb = b * k * (1 - h * 0.22)\n    if (h > 0.5) {\n      const g2 = (h - 0.5) / 0.5\n      nr = nr * (1 - g2 * 0.35) + 163 * g2 * 0.55\n      ng = ng * (1 - g2 * 0.35) + 58 * g2 * 0.4\n      nb = nb * (1 - g2 * 0.35) + 24 * g2 * 0.25\n    }\n  } else {\n    nr = r * (1 - h * 0.22) + 52 * h\n    ng = g * (1 - h * 0.38) + 18 * h\n    nb = b * (1 - h * 0.52) + 8 * h\n    if (h > 0.55) {\n      const g2 = (h - 0.55) / 0.45\n      nr = nr * (1 - g2 * 0.4) + 163 * g2 * 0.7\n      ng = ng * (1 - g2 * 0.4) + 58 * g2 * 0.5\n      nb = nb * (1 - g2 * 0.4) + 24 * g2 * 0.3\n    }\n  }\n  return `rgb(${nr | 0},${ng | 0},${nb | 0})`\n}\n\nfunction rasterizeGlyph(\n  cssW: number,\n  cssH: number,\n  pixelSize: number,\n  dpr: number,\n  dither: boolean\n): GlyphCell[] {\n  const w = Math.max(1, Math.floor(cssW * dpr))\n  const h = Math.max(1, Math.floor(cssH * dpr))\n  const cell = Math.max(1, Math.round(pixelSize * dpr))\n  const off = document.createElement(\"canvas\")\n  off.width = w\n  off.height = h\n  const ctx = off.getContext(\"2d\", { willReadFrequently: true })\n  if (!ctx) return []\n\n  const family = getComputedStyle(document.body).fontFamily || \"ui-sans-serif\"\n  const fontSize = Math.min(cssW * 0.54, cssH * 0.5) * dpr\n  ctx.clearRect(0, 0, w, h)\n  ctx.fillStyle = \"#fff\"\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  ctx.font = `800 ${fontSize}px ${family}`\n  if (\"letterSpacing\" in ctx) {\n    ;(\n      ctx as CanvasRenderingContext2D & { letterSpacing: string }\n    ).letterSpacing = `${-fontSize * 0.045}px`\n  }\n  ctx.fillText(\"404\", w / 2, h / 2)\n\n  const data = ctx.getImageData(0, 0, w, h).data\n  const cells: GlyphCell[] = []\n\n  for (let y = 0; y < h; y += cell) {\n    for (let x = 0; x < w; x += cell) {\n      let cover = 0\n      let samples = 0\n      const step = Math.max(1, Math.floor(cell / 3))\n      for (let sy = 0; sy < cell; sy += step) {\n        for (let sx = 0; sx < cell; sx += step) {\n          const px = x + sx\n          const py = y + sy\n          if (px >= w || py >= h) continue\n          cover += data[(py * w + px) * 4 + 3]!\n          samples++\n        }\n      }\n      const alpha = samples > 0 ? cover / (samples * 255) : 0\n      if (alpha < (dither ? 0.18 : 0.08)) continue\n      const gx = Math.floor(x / cell)\n      const gy = Math.floor(y / cell)\n      if (dither && alpha < bayerAt(gx, gy) * 0.92 + 0.08) continue\n      cells.push({\n        homeX: x / dpr,\n        homeY: y / dpr,\n        gx,\n        gy,\n        alpha: dither ? 1 : Math.min(1, alpha * 1.15),\n      })\n    }\n  }\n\n  return cells\n}\n\nfunction spawnFromCells(\n  cells: GlyphCell[],\n  pixelSize: number,\n  ink: string,\n  cssH: number,\n  assemble: boolean\n): Particle[] {\n  return cells.map((cell) => {\n    const fromBelow = assemble\n    return {\n      x: fromBelow ? cell.homeX + (Math.random() - 0.5) * 28 : cell.homeX,\n      y: fromBelow ? cssH + 12 + Math.random() * 90 : cell.homeY,\n      homeX: cell.homeX,\n      homeY: cell.homeY,\n      vx: 0,\n      vy: fromBelow ? -2.2 - Math.random() * 1.4 : 0,\n      size: pixelSize,\n      state: fromBelow ? REFORMING : SOLID,\n      life: 1,\n      rot: 0,\n      vr: 0,\n      gx: cell.gx,\n      gy: cell.gy,\n      fill: ink,\n      alpha: cell.alpha,\n      sleep: 0,\n      heat: 0,\n    }\n  })\n}\n\nfunction smokeFill(dark: boolean) {\n  if (dark) {\n    return Math.random() > 0.45 ? \"#A1A1AA\" : \"#71717A\"\n  }\n  return Math.random() > 0.45 ? \"#52525B\" : \"#3F3F46\"\n}\n\nfunction burnParticle(\n  particles: Particle[],\n  p: Particle,\n  emberCount: { n: number },\n  smokeCount: { n: number },\n  pixelSize: number,\n  maxEmbers: number,\n  maxSmoke: number,\n  dark: boolean\n) {\n  p.state = EMBER\n  p.life = 0.28 + Math.random() * (pixelSize <= 2 ? 0.28 : 0.45)\n  p.size = Math.max(1, p.size * 0.55)\n  p.vx = (Math.random() - 0.5) * 2.8\n  p.vy = -1.2 - Math.random() * 2.4\n  p.fill = fireTint(0.35 + Math.random() * 0.65)\n  p.alpha = 1\n  p.heat = 0\n  emberCount.n++\n\n  const extra =\n    pixelSize <= 2\n      ? Math.random() < 0.22\n        ? 1\n        : 0\n      : 1 + Math.floor(Math.random() * 3)\n  for (let i = 0; i < extra && emberCount.n < maxEmbers; i++) {\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size,\n      y: p.y + (Math.random() - 0.5) * p.size,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 3.4,\n      vy: -1.6 - Math.random() * 2.8,\n      size: Math.max(1, p.size * (0.35 + Math.random() * 0.4)),\n      state: EMBER,\n      life: 0.22 + Math.random() * 0.4,\n      rot: 0,\n      vr: 0,\n      gx: p.gx,\n      gy: p.gy,\n      fill: fireTint(0.25 + Math.random() * 0.75),\n      alpha: 1,\n      sleep: 0,\n      heat: 0,\n    })\n    emberCount.n++\n  }\n\n  const puffs =\n    pixelSize <= 2\n      ? Math.random() < 0.55\n        ? 1\n        : 0\n      : 1 + (Math.random() < 0.55 ? 1 : 0)\n  for (let i = 0; i < puffs && smokeCount.n < maxSmoke; i++) {\n    const puff = pixelSize * (1.6 + Math.random() * 1.8)\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size * 0.8,\n      y: p.y + (Math.random() - 0.5) * p.size * 0.8,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 0.55,\n      vy: -0.45 - Math.random() * 0.85,\n      size: puff,\n      state: SMOKE,\n      life: 0.75 + Math.random() * 0.95,\n      rot: 0,\n      vr: (Math.random() - 0.5) * 0.04,\n      gx: p.gx,\n      gy: p.gy,\n      fill: smokeFill(dark),\n      alpha: 0.42,\n      sleep: 0,\n      heat: 0,\n    })\n    smokeCount.n++\n  }\n}\n\nfunction fireFieldAt(\n  x: number,\n  y: number,\n  mx: number,\n  my: number,\n  r: number,\n  t: number\n) {\n  const dx = (x - mx) / r\n  const dy = (y - my) / r\n  const px = dx\n  const py = dy > 0 ? dy * 1.4 : dy * 0.72\n  const dist = Math.hypot(px, py)\n  if (dist > 1.12) return 0\n  const n = fbm(x * 0.055 + t * 1.7, y * 0.06 - t * 2.6)\n  return Math.max(0, (1 - dist) * (0.38 + 0.62 * n))\n}\n\nfunction drawFireball(\n  ctx: CanvasRenderingContext2D,\n  mx: number,\n  my: number,\n  t: number,\n  pixelSize: number,\n  brush: number,\n  dither: boolean\n) {\n  const r = brush\n  const minX = mx - r\n  const maxX = mx + r\n  const minY = my - r * 1.35\n  const maxY = my + r * 0.85\n\n  if (!dither) {\n    ctx.save()\n    ctx.globalCompositeOperation = \"lighter\"\n    const glow = ctx.createRadialGradient(\n      mx,\n      my - r * 0.22,\n      r * 0.04,\n      mx,\n      my - r * 0.08,\n      r * 1.05\n    )\n    glow.addColorStop(0, rgba(FIRE_HIGHLIGHT, 0.95))\n    glow.addColorStop(0.28, rgba(FIRE_FLAME, 0.72))\n    glow.addColorStop(0.62, rgba(FIRE_EMBER, 0.32))\n    glow.addColorStop(1, rgba(FIRE_EMBER, 0))\n    ctx.fillStyle = glow\n    ctx.beginPath()\n    ctx.ellipse(mx, my - r * 0.18, r * 0.78, r * 1.12, 0, 0, Math.PI * 2)\n    ctx.fill()\n\n    const cell = 2\n    for (let y = minY; y <= maxY; y += cell) {\n      for (let x = minX; x <= maxX; x += cell) {\n        const field = fireFieldAt(x + 1, y + 1, mx, my, r, t)\n        if (field < 0.08) continue\n        ctx.globalAlpha = Math.min(0.9, field * 1.05)\n        ctx.fillStyle = fireTint(field)\n        ctx.fillRect(x, y, cell + 0.5, cell + 0.5)\n      }\n    }\n    ctx.restore()\n    return\n  }\n\n  const cell = Math.max(3, pixelSize)\n  for (let y = minY; y <= maxY; y += cell) {\n    for (let x = minX; x <= maxX; x += cell) {\n      const cx = Math.floor(x / cell) * cell\n      const cy = Math.floor(y / cell) * cell\n      const field = fireFieldAt(cx + cell * 0.5, cy + cell * 0.5, mx, my, r, t)\n      if (field < 0.1) continue\n      if (\n        field <\n        bayerAt(Math.floor(cx / cell), Math.floor(cy / cell)) * 0.9 + 0.06\n      ) {\n        continue\n      }\n      ctx.fillStyle = fireTint(field)\n      ctx.fillRect(cx, cy, cell, cell)\n    }\n  }\n}\n\n/**\n * Bayer-pixel 404 section — a fireball cursor scorches and burns\n * the glyph into embers and smoke, then the type reforms.\n * `dither={false}` is a soft realistic fire, same idea as Shader Fire.\n */\nexport function createDithered404(\n  wrap: HTMLElement,\n  canvas: HTMLCanvasElement,\n  initial: Dithered404Options = {}\n): Dithered404Instance | null {\n  let options: Required<\n    Pick<\n      Dithered404Options,\n      \"pixelSize\" | \"brush\" | \"interactive\" | \"dither\" | \"theme\"\n    >\n  > &\n    Dithered404Options = {\n    pixelSize: 4,\n    brush: 28,\n    interactive: true,\n    dither: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true, desynchronized: true })\n  if (!ctx) return null\n\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  let hover = false\n  const mouse = { x: 0, y: 0 }\n  const targetMouse = { x: 0, y: 0 }\n\n  let raf = 0\n  let running = true\n  let cssW = 0\n  let cssH = 0\n  let dpr = 1\n  let cells: GlyphCell[] = []\n  let particles: Particle[] = []\n  let lastPixel = -1\n  let lastDither: boolean | null = null\n  let lastW = 0\n  let lastH = 0\n  let phase = PHASE_READY\n  let resetAt = 0\n  let reformAt = 0\n  let lastNow = performance.now()\n  const start = lastNow\n\n  const inkOf = () => options.color ?? (dark ? DARK_COLOR : LIGHT_COLOR)\n\n  const rebuild = (assemble: boolean) => {\n    const px = Math.max(2, Math.round(options.pixelSize))\n    const useDither = options.dither\n    cells = rasterizeGlyph(cssW, cssH, px, dpr, useDither)\n    particles = spawnFromCells(cells, px, inkOf(), cssH, assemble)\n    phase = assemble ? PHASE_REFORMING : PHASE_READY\n    resetAt = 0\n    reformAt = assemble ? performance.now() : 0\n    lastPixel = px\n    lastDither = useDither\n  }\n\n  const startReform = (now: number, px: number, ink: string) => {\n    const have = new Set<number>()\n    for (const p of particles) {\n      if (p.state === EMBER || p.state === SMOKE) continue\n      p.state = REFORMING\n      p.size = px\n      p.fill = ink\n      p.vx = 0\n      p.vy = 0\n      p.vr = 0\n      p.sleep = 0\n      p.life = 1\n      p.heat = 0\n      have.add(cellKey(p.gx, p.gy))\n    }\n    for (const cell of cells) {\n      if (have.has(cellKey(cell.gx, cell.gy))) continue\n      particles.push({\n        x: cell.homeX + (Math.random() - 0.5) * 22,\n        y: cssH - px - Math.random() * 52,\n        homeX: cell.homeX,\n        homeY: cell.homeY,\n        vx: 0,\n        vy: 0,\n        size: px,\n        state: REFORMING,\n        life: 1,\n        rot: 0,\n        vr: 0,\n        gx: cell.gx,\n        gy: cell.gy,\n        fill: ink,\n        alpha: cell.alpha,\n        sleep: 0,\n        heat: 0,\n      })\n    }\n    phase = PHASE_REFORMING\n    resetAt = 0\n    reformAt = now\n  }\n\n  const resize = () => {\n    dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = wrap.clientWidth\n    const h = wrap.clientHeight\n    if (w <= 0 || h <= 0) return\n    cssW = w\n    cssH = h\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx.imageSmoothingEnabled = false\n    if (w !== lastW || h !== lastH) {\n      lastW = w\n      lastH = h\n      rebuild(false)\n    }\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  ro.observe(wrap)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    dark = resolveDark(options.theme ?? \"auto\")\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive || reduce) return\n    const rect = wrap.getBoundingClientRect()\n    targetMouse.x = e.clientX - rect.left\n    targetMouse.y = e.clientY - rect.top\n    if (!hover) {\n      hover = true\n      options.onHideCursor?.(true)\n    }\n  }\n  const onLeave = () => {\n    hover = false\n    options.onHideCursor?.(false)\n  }\n\n  wrap.addEventListener(\"pointermove\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerenter\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerleave\", onLeave)\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min(32, now - lastNow) / 16.67\n    lastNow = now\n    const t = (now - start) / 1000\n    const { pixelSize, brush, interactive, dither } = options\n    const px = Math.max(2, Math.round(pixelSize))\n    const ink = inkOf()\n\n    if ((px !== lastPixel || dither !== lastDither) && cssW > 0) {\n      rebuild(false)\n    }\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.28\n    mouse.y += (targetMouse.y - mouse.y) * 0.28\n\n    if (!reduce) {\n      if (resetAt && now >= resetAt) {\n        startReform(now, px, ink)\n      }\n\n      let solidCount = 0\n      let emberCount = 0\n      let smokeCount = 0\n      let reformingCount = 0\n      const emberBudget = { n: 0 }\n      const smokeBudget = { n: 0 }\n      const maxEmbers = px <= 2 ? MAX_EMBERS_FINE : MAX_EMBERS\n      const maxSmoke = px <= 2 ? MAX_SMOKE_FINE : MAX_SMOKE\n\n      const canBurn = interactive && hover && phase === PHASE_READY\n\n      const scorchR = brush * 0.92\n      const scorchR2 = scorchR * scorchR\n      const burnR = brush * 0.62\n      const burnR2 = burnR * burnR\n\n      for (let i = particles.length - 1; i >= 0; i--) {\n        const p = particles[i]!\n        if (p.state === SOLID) {\n          if (canBurn) {\n            const dx = p.x + p.size * 0.5 - mouse.x\n            const dy = p.y + p.size * 0.5 - mouse.y\n            const d2 = dx * dx + dy * dy\n            if (d2 < scorchR2) {\n              const heat = 1 - Math.sqrt(d2) / scorchR\n              p.heat = Math.min(1, p.heat + heat * CHAR_HEAT_GAIN * dt)\n              if (\n                p.heat > 0.58 &&\n                d2 < burnR2 &&\n                Math.random() < heat * 0.28 * dt\n              ) {\n                burnParticle(\n                  particles,\n                  p,\n                  emberBudget,\n                  smokeBudget,\n                  px,\n                  maxEmbers,\n                  maxSmoke,\n                  dark\n                )\n              }\n            } else if (p.heat > 0) {\n              p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n            }\n          } else if (p.heat > 0) {\n            p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n          }\n          if (p.state === SOLID) {\n            p.fill = p.heat > 0 ? scorchedInk(ink, p.heat) : ink\n          }\n        }\n\n        if (p.state === EMBER) {\n          p.vy -= 0.09 * dt\n          p.vx *= 0.94\n          p.vy *= 0.97\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.life -= (px <= 2 ? 0.04 : 0.028) * dt\n          p.size = Math.max(0.6, p.size * (1 - 0.02 * dt))\n          if (p.life <= 0) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          emberCount++\n          continue\n        }\n\n        if (p.state === SMOKE) {\n          p.vy -= 0.018 * dt\n          p.vx += Math.sin((now + p.x * 12) * 0.002) * 0.012 * dt\n          p.vx *= 0.985\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.size += 0.12 * dt\n          p.life -= (px <= 2 ? 0.018 : 0.012) * dt\n          p.alpha = Math.max(0, p.life * 0.5)\n          if (p.life <= 0 || p.y + p.size < -40) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          smokeCount++\n          continue\n        }\n\n        if (p.state === REFORMING) {\n          p.x += (p.homeX - p.x) * 0.16 * dt\n          p.y += (p.homeY - p.y) * 0.16 * dt\n          p.rot += (0 - p.rot) * 0.22 * dt\n          p.vx = 0\n          p.vy = 0\n          p.fill = ink\n          p.heat = 0\n          if (Math.hypot(p.homeX - p.x, p.homeY - p.y) < 0.7) {\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            solidCount++\n          } else {\n            reformingCount++\n          }\n          continue\n        }\n\n        if (p.state === SOLID) {\n          solidCount++\n        }\n      }\n\n      const initialCount = cells.length || 1\n      if (\n        phase === PHASE_READY &&\n        cells.length > 0 &&\n        solidCount / initialCount < COLLAPSE_RATIO &&\n        resetAt === 0\n      ) {\n        resetAt = now + RESET_DELAY_MS\n      }\n\n      if (phase === PHASE_REFORMING) {\n        if (reformingCount === 0) {\n          phase = PHASE_READY\n        } else if (reformAt && now - reformAt > REFORM_SNAP_MS) {\n          for (const p of particles) {\n            if (p.state !== REFORMING) continue\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            p.fill = ink\n          }\n          phase = PHASE_READY\n        }\n      }\n\n      if (emberCount > maxEmbers) {\n        let extra = emberCount - maxEmbers\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === EMBER) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n\n      if (smokeCount > maxSmoke) {\n        let extra = smokeCount - maxSmoke\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === SMOKE) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n    }\n\n    ctx.clearRect(0, 0, cssW, cssH)\n    ctx.imageSmoothingEnabled = !dither\n\n    for (const p of particles) {\n      if (p.state === EMBER) {\n        ctx.globalAlpha = Math.max(0, Math.min(1, p.life * 1.4))\n        ctx.fillStyle = p.fill\n        if (!dither) {\n          const glow = Math.max(1.2, p.size * 0.55)\n          ctx.beginPath()\n          ctx.arc(p.x + p.size * 0.5, p.y + p.size * 0.5, glow, 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      if (p.state === SMOKE) {\n        ctx.globalAlpha = Math.max(0, Math.min(0.45, p.alpha))\n        ctx.fillStyle = p.fill\n        const half = p.size * 0.5\n        if (!dither) {\n          ctx.beginPath()\n          ctx.arc(p.x + half, p.y + half, Math.max(1.2, half), 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      ctx.fillStyle = p.fill\n      ctx.globalAlpha = dither ? 1 : p.alpha\n      const pad = dither ? 0 : 0.35\n      if (p.state === REFORMING && Math.abs(p.rot) > 0.04) {\n        const half = p.size * 0.5\n        ctx.save()\n        ctx.translate(p.x + half, p.y + half)\n        ctx.rotate(p.rot)\n        ctx.fillRect(\n          -half - pad,\n          -half - pad,\n          p.size + pad * 2,\n          p.size + pad * 2\n        )\n        ctx.restore()\n      } else {\n        ctx.fillRect(p.x - pad, p.y - pad, p.size + pad * 2, p.size + pad * 2)\n      }\n    }\n\n    ctx.globalAlpha = 1\n    if (interactive && hover && !reduce) {\n      drawFireball(ctx, mouse.x, mouse.y, t, px, brush, dither)\n    }\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      wrap.removeEventListener(\"pointermove\", onMove)\n      wrap.removeEventListener(\"pointerenter\", onMove)\n      wrap.removeEventListener(\"pointerleave\", onLeave)\n      options.onHideCursor?.(false)\n    },\n  }\n}\n\nexport type Dithered404Props = Dithered404Options & {\n  className?: string\n}\n\n/**\n * Bayer-pixel 404 section — a fireball cursor scorches and burns\n * the glyph into embers and smoke, then the type reforms.\n * `dither={false}` is a soft realistic fire, same idea as Shader Fire.\n */\nexport function Dithered404({\n  className,\n  color,\n  pixelSize = 4,\n  brush = 28,\n  interactive = true,\n  dither = true,\n  theme = \"auto\",\n}: Dithered404Props) {\n  const wrapRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<Dithered404Instance | null>(null)\n  const [hideCursor, setHideCursor] = useState(false)\n\n  useEffect(() => {\n    const wrap = wrapRef.current\n    const canvas = canvasRef.current\n    if (!wrap || !canvas) return\n    instanceRef.current = createDithered404(wrap, canvas, {\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n      onHideCursor: setHideCursor,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n      onHideCursor: setHideCursor,\n    })\n  }, [color, pixelSize, brush, interactive, dither, theme])\n\n  return (\n    <div\n      ref={wrapRef}\n      data-slot=\"dithered-404\"\n      className={cn(\n        \"absolute inset-0 touch-none overflow-hidden\",\n        hideCursor && interactive && \"cursor-none\",\n        className\n      )}\n    >\n      <span className=\"sr-only\">404</span>\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type Dithered404Theme = \"light\" | \"dark\" | \"auto\"\n\nexport type Dithered404Options = {\n  /** Glyph ink (hex). Default follows theme. */\n  color?: string\n  /** Dither cell size in CSS px. Default `4` */\n  pixelSize?: number\n  /** Fireball radius in CSS px. Default `28` */\n  brush?: number\n  /** Follow pointer / replace cursor. Default `true` */\n  interactive?: boolean\n  /** Ordered Bayer print. Default `true`. Off is a soft realistic fire. */\n  dither?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: Dithered404Theme\n  /** Fires when the fireball cursor should hide the system pointer. */\n  onHideCursor?: (hide: boolean) => void\n}\n\nexport type Dithered404Instance = {\n  setOptions: (options: Partial<Dithered404Options>) => void\n  destroy: () => void\n}\n\n/** Near-black ink on paper */\nexport const LIGHT_COLOR = \"#18181B\"\n/** Near-white ink on slate */\nexport const DARK_COLOR = \"#E4E4E7\"\n\nconst FIRE_EMBER = \"#A33A18\"\nconst FIRE_FLAME = \"#D4682A\"\nconst FIRE_HIGHLIGHT = \"#E8B45A\"\n\nconst SOLID = 0\nconst EMBER = 1\nconst SMOKE = 2\nconst REFORMING = 3\n\nconst PHASE_READY = 0\nconst PHASE_REFORMING = 1\n\nconst RESET_DELAY_MS = 900\nconst REFORM_SNAP_MS = 1800\nconst COLLAPSE_RATIO = 0.12\nconst MAX_EMBERS = 900\nconst MAX_EMBERS_FINE = 260\nconst MAX_SMOKE = 420\nconst MAX_SMOKE_FINE = 160\nconst CHAR_HEAT_GAIN = 0.2\nconst CHAR_COOL = 0.01\n\nconst BAYER8 = [\n  [0, 32, 8, 40, 2, 34, 10, 42],\n  [48, 16, 56, 24, 50, 18, 58, 26],\n  [12, 44, 4, 36, 14, 46, 6, 38],\n  [60, 28, 52, 20, 62, 30, 54, 22],\n  [3, 35, 11, 43, 1, 33, 9, 41],\n  [51, 19, 59, 27, 49, 17, 57, 25],\n  [15, 47, 7, 39, 13, 45, 5, 37],\n  [63, 31, 55, 23, 61, 29, 53, 21],\n] as const\n\ntype Particle = {\n  x: number\n  y: number\n  homeX: number\n  homeY: number\n  vx: number\n  vy: number\n  size: number\n  state: 0 | 1 | 2 | 3\n  life: number\n  rot: number\n  vr: number\n  gx: number\n  gy: number\n  fill: string\n  alpha: number\n  sleep: number\n  heat: number\n}\n\ntype GlyphCell = {\n  homeX: number\n  homeY: number\n  gx: number\n  gy: number\n  alpha: number\n}\n\nfunction bayerAt(gx: number, gy: number) {\n  const x = ((gx % 8) + 8) % 8\n  const y = ((gy % 8) + 8) % 8\n  return BAYER8[y]![x]! / 64\n}\n\nfunction hash2(x: number, y: number) {\n  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123\n  return s - Math.floor(s)\n}\n\nfunction valueNoise(x: number, y: number) {\n  const ix = Math.floor(x)\n  const iy = Math.floor(y)\n  const fx = x - ix\n  const fy = y - iy\n  const a = hash2(ix, iy)\n  const b = hash2(ix + 1, iy)\n  const c = hash2(ix, iy + 1)\n  const d = hash2(ix + 1, iy + 1)\n  const ux = fx * fx * (3 - 2 * fx)\n  const uy = fy * fy * (3 - 2 * fy)\n  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy\n}\n\nfunction fbm(x: number, y: number) {\n  let v = 0\n  let a = 0.5\n  let f = 1\n  for (let i = 0; i < 3; i++) {\n    v += valueNoise(x * f, y * f) * a\n    a *= 0.5\n    f *= 2.05\n  }\n  return v\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: Dithered404Theme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction cellKey(gx: number, gy: number) {\n  return gx * 4096 + gy\n}\n\nfunction fireTint(field: number) {\n  if (field > 0.72) return FIRE_HIGHLIGHT\n  if (field > 0.4) return FIRE_FLAME\n  return FIRE_EMBER\n}\n\nfunction hexRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [163, 58, 24]\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]\n}\n\nfunction rgba(hex: string, a: number) {\n  const [r, g, b] = hexRgb(hex)\n  return `rgba(${r},${g},${b},${a})`\n}\n\nfunction scorchedInk(ink: string, heat: number): string {\n  if (heat <= 0.02) return ink\n  const [r, g, b] = hexRgb(ink)\n  const h = heat > 1 ? 1 : heat\n  const lum = (r + g + b) / 3\n  let nr: number\n  let ng: number\n  let nb: number\n  if (lum >= 130) {\n    const k = 1 - h * 0.9\n    nr = r * k\n    ng = g * k * (1 - h * 0.12)\n    nb = b * k * (1 - h * 0.22)\n    if (h > 0.5) {\n      const g2 = (h - 0.5) / 0.5\n      nr = nr * (1 - g2 * 0.35) + 163 * g2 * 0.55\n      ng = ng * (1 - g2 * 0.35) + 58 * g2 * 0.4\n      nb = nb * (1 - g2 * 0.35) + 24 * g2 * 0.25\n    }\n  } else {\n    nr = r * (1 - h * 0.22) + 52 * h\n    ng = g * (1 - h * 0.38) + 18 * h\n    nb = b * (1 - h * 0.52) + 8 * h\n    if (h > 0.55) {\n      const g2 = (h - 0.55) / 0.45\n      nr = nr * (1 - g2 * 0.4) + 163 * g2 * 0.7\n      ng = ng * (1 - g2 * 0.4) + 58 * g2 * 0.5\n      nb = nb * (1 - g2 * 0.4) + 24 * g2 * 0.3\n    }\n  }\n  return `rgb(${nr | 0},${ng | 0},${nb | 0})`\n}\n\nfunction rasterizeGlyph(\n  cssW: number,\n  cssH: number,\n  pixelSize: number,\n  dpr: number,\n  dither: boolean\n): GlyphCell[] {\n  const w = Math.max(1, Math.floor(cssW * dpr))\n  const h = Math.max(1, Math.floor(cssH * dpr))\n  const cell = Math.max(1, Math.round(pixelSize * dpr))\n  const off = document.createElement(\"canvas\")\n  off.width = w\n  off.height = h\n  const ctx = off.getContext(\"2d\", { willReadFrequently: true })\n  if (!ctx) return []\n\n  const family = getComputedStyle(document.body).fontFamily || \"ui-sans-serif\"\n  const fontSize = Math.min(cssW * 0.54, cssH * 0.5) * dpr\n  ctx.clearRect(0, 0, w, h)\n  ctx.fillStyle = \"#fff\"\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  ctx.font = `800 ${fontSize}px ${family}`\n  if (\"letterSpacing\" in ctx) {\n    ;(\n      ctx as CanvasRenderingContext2D & { letterSpacing: string }\n    ).letterSpacing = `${-fontSize * 0.045}px`\n  }\n  ctx.fillText(\"404\", w / 2, h / 2)\n\n  const data = ctx.getImageData(0, 0, w, h).data\n  const cells: GlyphCell[] = []\n\n  for (let y = 0; y < h; y += cell) {\n    for (let x = 0; x < w; x += cell) {\n      let cover = 0\n      let samples = 0\n      const step = Math.max(1, Math.floor(cell / 3))\n      for (let sy = 0; sy < cell; sy += step) {\n        for (let sx = 0; sx < cell; sx += step) {\n          const px = x + sx\n          const py = y + sy\n          if (px >= w || py >= h) continue\n          cover += data[(py * w + px) * 4 + 3]!\n          samples++\n        }\n      }\n      const alpha = samples > 0 ? cover / (samples * 255) : 0\n      if (alpha < (dither ? 0.18 : 0.08)) continue\n      const gx = Math.floor(x / cell)\n      const gy = Math.floor(y / cell)\n      if (dither && alpha < bayerAt(gx, gy) * 0.92 + 0.08) continue\n      cells.push({\n        homeX: x / dpr,\n        homeY: y / dpr,\n        gx,\n        gy,\n        alpha: dither ? 1 : Math.min(1, alpha * 1.15),\n      })\n    }\n  }\n\n  return cells\n}\n\nfunction spawnFromCells(\n  cells: GlyphCell[],\n  pixelSize: number,\n  ink: string,\n  cssH: number,\n  assemble: boolean\n): Particle[] {\n  return cells.map((cell) => {\n    const fromBelow = assemble\n    return {\n      x: fromBelow ? cell.homeX + (Math.random() - 0.5) * 28 : cell.homeX,\n      y: fromBelow ? cssH + 12 + Math.random() * 90 : cell.homeY,\n      homeX: cell.homeX,\n      homeY: cell.homeY,\n      vx: 0,\n      vy: fromBelow ? -2.2 - Math.random() * 1.4 : 0,\n      size: pixelSize,\n      state: fromBelow ? REFORMING : SOLID,\n      life: 1,\n      rot: 0,\n      vr: 0,\n      gx: cell.gx,\n      gy: cell.gy,\n      fill: ink,\n      alpha: cell.alpha,\n      sleep: 0,\n      heat: 0,\n    }\n  })\n}\n\nfunction smokeFill(dark: boolean) {\n  if (dark) {\n    return Math.random() > 0.45 ? \"#A1A1AA\" : \"#71717A\"\n  }\n  return Math.random() > 0.45 ? \"#52525B\" : \"#3F3F46\"\n}\n\nfunction burnParticle(\n  particles: Particle[],\n  p: Particle,\n  emberCount: { n: number },\n  smokeCount: { n: number },\n  pixelSize: number,\n  maxEmbers: number,\n  maxSmoke: number,\n  dark: boolean\n) {\n  p.state = EMBER\n  p.life = 0.28 + Math.random() * (pixelSize <= 2 ? 0.28 : 0.45)\n  p.size = Math.max(1, p.size * 0.55)\n  p.vx = (Math.random() - 0.5) * 2.8\n  p.vy = -1.2 - Math.random() * 2.4\n  p.fill = fireTint(0.35 + Math.random() * 0.65)\n  p.alpha = 1\n  p.heat = 0\n  emberCount.n++\n\n  const extra =\n    pixelSize <= 2\n      ? Math.random() < 0.22\n        ? 1\n        : 0\n      : 1 + Math.floor(Math.random() * 3)\n  for (let i = 0; i < extra && emberCount.n < maxEmbers; i++) {\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size,\n      y: p.y + (Math.random() - 0.5) * p.size,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 3.4,\n      vy: -1.6 - Math.random() * 2.8,\n      size: Math.max(1, p.size * (0.35 + Math.random() * 0.4)),\n      state: EMBER,\n      life: 0.22 + Math.random() * 0.4,\n      rot: 0,\n      vr: 0,\n      gx: p.gx,\n      gy: p.gy,\n      fill: fireTint(0.25 + Math.random() * 0.75),\n      alpha: 1,\n      sleep: 0,\n      heat: 0,\n    })\n    emberCount.n++\n  }\n\n  const puffs =\n    pixelSize <= 2\n      ? Math.random() < 0.55\n        ? 1\n        : 0\n      : 1 + (Math.random() < 0.55 ? 1 : 0)\n  for (let i = 0; i < puffs && smokeCount.n < maxSmoke; i++) {\n    const puff = pixelSize * (1.6 + Math.random() * 1.8)\n    particles.push({\n      x: p.x + (Math.random() - 0.5) * p.size * 0.8,\n      y: p.y + (Math.random() - 0.5) * p.size * 0.8,\n      homeX: p.homeX,\n      homeY: p.homeY,\n      vx: (Math.random() - 0.5) * 0.55,\n      vy: -0.45 - Math.random() * 0.85,\n      size: puff,\n      state: SMOKE,\n      life: 0.75 + Math.random() * 0.95,\n      rot: 0,\n      vr: (Math.random() - 0.5) * 0.04,\n      gx: p.gx,\n      gy: p.gy,\n      fill: smokeFill(dark),\n      alpha: 0.42,\n      sleep: 0,\n      heat: 0,\n    })\n    smokeCount.n++\n  }\n}\n\nfunction fireFieldAt(\n  x: number,\n  y: number,\n  mx: number,\n  my: number,\n  r: number,\n  t: number\n) {\n  const dx = (x - mx) / r\n  const dy = (y - my) / r\n  const px = dx\n  const py = dy > 0 ? dy * 1.4 : dy * 0.72\n  const dist = Math.hypot(px, py)\n  if (dist > 1.12) return 0\n  const n = fbm(x * 0.055 + t * 1.7, y * 0.06 - t * 2.6)\n  return Math.max(0, (1 - dist) * (0.38 + 0.62 * n))\n}\n\nfunction drawFireball(\n  ctx: CanvasRenderingContext2D,\n  mx: number,\n  my: number,\n  t: number,\n  pixelSize: number,\n  brush: number,\n  dither: boolean\n) {\n  const r = brush\n  const minX = mx - r\n  const maxX = mx + r\n  const minY = my - r * 1.35\n  const maxY = my + r * 0.85\n\n  if (!dither) {\n    ctx.save()\n    ctx.globalCompositeOperation = \"lighter\"\n    const glow = ctx.createRadialGradient(\n      mx,\n      my - r * 0.22,\n      r * 0.04,\n      mx,\n      my - r * 0.08,\n      r * 1.05\n    )\n    glow.addColorStop(0, rgba(FIRE_HIGHLIGHT, 0.95))\n    glow.addColorStop(0.28, rgba(FIRE_FLAME, 0.72))\n    glow.addColorStop(0.62, rgba(FIRE_EMBER, 0.32))\n    glow.addColorStop(1, rgba(FIRE_EMBER, 0))\n    ctx.fillStyle = glow\n    ctx.beginPath()\n    ctx.ellipse(mx, my - r * 0.18, r * 0.78, r * 1.12, 0, 0, Math.PI * 2)\n    ctx.fill()\n\n    const cell = 2\n    for (let y = minY; y <= maxY; y += cell) {\n      for (let x = minX; x <= maxX; x += cell) {\n        const field = fireFieldAt(x + 1, y + 1, mx, my, r, t)\n        if (field < 0.08) continue\n        ctx.globalAlpha = Math.min(0.9, field * 1.05)\n        ctx.fillStyle = fireTint(field)\n        ctx.fillRect(x, y, cell + 0.5, cell + 0.5)\n      }\n    }\n    ctx.restore()\n    return\n  }\n\n  const cell = Math.max(3, pixelSize)\n  for (let y = minY; y <= maxY; y += cell) {\n    for (let x = minX; x <= maxX; x += cell) {\n      const cx = Math.floor(x / cell) * cell\n      const cy = Math.floor(y / cell) * cell\n      const field = fireFieldAt(cx + cell * 0.5, cy + cell * 0.5, mx, my, r, t)\n      if (field < 0.1) continue\n      if (\n        field <\n        bayerAt(Math.floor(cx / cell), Math.floor(cy / cell)) * 0.9 + 0.06\n      ) {\n        continue\n      }\n      ctx.fillStyle = fireTint(field)\n      ctx.fillRect(cx, cy, cell, cell)\n    }\n  }\n}\n\n/**\n * Bayer-pixel 404 section — a fireball cursor scorches and burns\n * the glyph into embers and smoke, then the type reforms.\n * `dither={false}` is a soft realistic fire.\n */\nexport function createDithered404(\n  wrap: HTMLElement,\n  canvas: HTMLCanvasElement,\n  initial: Dithered404Options = {}\n): Dithered404Instance | null {\n  let options: Required<\n    Pick<\n      Dithered404Options,\n      \"pixelSize\" | \"brush\" | \"interactive\" | \"dither\" | \"theme\"\n    >\n  > &\n    Dithered404Options = {\n    pixelSize: 4,\n    brush: 28,\n    interactive: true,\n    dither: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const ctx = canvas.getContext(\"2d\", { alpha: true, desynchronized: true })\n  if (!ctx) return null\n\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  let hover = false\n  const mouse = { x: 0, y: 0 }\n  const targetMouse = { x: 0, y: 0 }\n\n  let raf = 0\n  let running = true\n  let cssW = 0\n  let cssH = 0\n  let dpr = 1\n  let cells: GlyphCell[] = []\n  let particles: Particle[] = []\n  let lastPixel = -1\n  let lastDither: boolean | null = null\n  let lastW = 0\n  let lastH = 0\n  let phase = PHASE_READY\n  let resetAt = 0\n  let reformAt = 0\n  let lastNow = performance.now()\n  const start = lastNow\n\n  const inkOf = () => options.color ?? (dark ? DARK_COLOR : LIGHT_COLOR)\n\n  const rebuild = (assemble: boolean) => {\n    const px = Math.max(2, Math.round(options.pixelSize))\n    const useDither = options.dither\n    cells = rasterizeGlyph(cssW, cssH, px, dpr, useDither)\n    particles = spawnFromCells(cells, px, inkOf(), cssH, assemble)\n    phase = assemble ? PHASE_REFORMING : PHASE_READY\n    resetAt = 0\n    reformAt = assemble ? performance.now() : 0\n    lastPixel = px\n    lastDither = useDither\n  }\n\n  const startReform = (now: number, px: number, ink: string) => {\n    const have = new Set<number>()\n    for (const p of particles) {\n      if (p.state === EMBER || p.state === SMOKE) continue\n      p.state = REFORMING\n      p.size = px\n      p.fill = ink\n      p.vx = 0\n      p.vy = 0\n      p.vr = 0\n      p.sleep = 0\n      p.life = 1\n      p.heat = 0\n      have.add(cellKey(p.gx, p.gy))\n    }\n    for (const cell of cells) {\n      if (have.has(cellKey(cell.gx, cell.gy))) continue\n      particles.push({\n        x: cell.homeX + (Math.random() - 0.5) * 22,\n        y: cssH - px - Math.random() * 52,\n        homeX: cell.homeX,\n        homeY: cell.homeY,\n        vx: 0,\n        vy: 0,\n        size: px,\n        state: REFORMING,\n        life: 1,\n        rot: 0,\n        vr: 0,\n        gx: cell.gx,\n        gy: cell.gy,\n        fill: ink,\n        alpha: cell.alpha,\n        sleep: 0,\n        heat: 0,\n      })\n    }\n    phase = PHASE_REFORMING\n    resetAt = 0\n    reformAt = now\n  }\n\n  const resize = () => {\n    dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = wrap.clientWidth\n    const h = wrap.clientHeight\n    if (w <= 0 || h <= 0) return\n    cssW = w\n    cssH = h\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)\n    ctx.imageSmoothingEnabled = false\n    if (w !== lastW || h !== lastH) {\n      lastW = w\n      lastH = h\n      rebuild(false)\n    }\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  ro.observe(wrap)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    dark = resolveDark(options.theme ?? \"auto\")\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive || reduce) return\n    const rect = wrap.getBoundingClientRect()\n    targetMouse.x = e.clientX - rect.left\n    targetMouse.y = e.clientY - rect.top\n    if (!hover) {\n      hover = true\n      options.onHideCursor?.(true)\n    }\n  }\n  const onLeave = () => {\n    hover = false\n    options.onHideCursor?.(false)\n  }\n\n  wrap.addEventListener(\"pointermove\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerenter\", onMove, { passive: true })\n  wrap.addEventListener(\"pointerleave\", onLeave)\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min(32, now - lastNow) / 16.67\n    lastNow = now\n    const t = (now - start) / 1000\n    const { pixelSize, brush, interactive, dither } = options\n    const px = Math.max(2, Math.round(pixelSize))\n    const ink = inkOf()\n\n    if ((px !== lastPixel || dither !== lastDither) && cssW > 0) {\n      rebuild(false)\n    }\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.28\n    mouse.y += (targetMouse.y - mouse.y) * 0.28\n\n    if (!reduce) {\n      if (resetAt && now >= resetAt) {\n        startReform(now, px, ink)\n      }\n\n      let solidCount = 0\n      let emberCount = 0\n      let smokeCount = 0\n      let reformingCount = 0\n      const emberBudget = { n: 0 }\n      const smokeBudget = { n: 0 }\n      const maxEmbers = px <= 2 ? MAX_EMBERS_FINE : MAX_EMBERS\n      const maxSmoke = px <= 2 ? MAX_SMOKE_FINE : MAX_SMOKE\n\n      const canBurn = interactive && hover && phase === PHASE_READY\n\n      const scorchR = brush * 0.92\n      const scorchR2 = scorchR * scorchR\n      const burnR = brush * 0.62\n      const burnR2 = burnR * burnR\n\n      for (let i = particles.length - 1; i >= 0; i--) {\n        const p = particles[i]!\n        if (p.state === SOLID) {\n          if (canBurn) {\n            const dx = p.x + p.size * 0.5 - mouse.x\n            const dy = p.y + p.size * 0.5 - mouse.y\n            const d2 = dx * dx + dy * dy\n            if (d2 < scorchR2) {\n              const heat = 1 - Math.sqrt(d2) / scorchR\n              p.heat = Math.min(1, p.heat + heat * CHAR_HEAT_GAIN * dt)\n              if (\n                p.heat > 0.58 &&\n                d2 < burnR2 &&\n                Math.random() < heat * 0.28 * dt\n              ) {\n                burnParticle(\n                  particles,\n                  p,\n                  emberBudget,\n                  smokeBudget,\n                  px,\n                  maxEmbers,\n                  maxSmoke,\n                  dark\n                )\n              }\n            } else if (p.heat > 0) {\n              p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n            }\n          } else if (p.heat > 0) {\n            p.heat = Math.max(0, p.heat - CHAR_COOL * dt)\n          }\n          if (p.state === SOLID) {\n            p.fill = p.heat > 0 ? scorchedInk(ink, p.heat) : ink\n          }\n        }\n\n        if (p.state === EMBER) {\n          p.vy -= 0.09 * dt\n          p.vx *= 0.94\n          p.vy *= 0.97\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.life -= (px <= 2 ? 0.04 : 0.028) * dt\n          p.size = Math.max(0.6, p.size * (1 - 0.02 * dt))\n          if (p.life <= 0) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          emberCount++\n          continue\n        }\n\n        if (p.state === SMOKE) {\n          p.vy -= 0.018 * dt\n          p.vx += Math.sin((now + p.x * 12) * 0.002) * 0.012 * dt\n          p.vx *= 0.985\n          p.x += p.vx * dt\n          p.y += p.vy * dt\n          p.size += 0.12 * dt\n          p.life -= (px <= 2 ? 0.018 : 0.012) * dt\n          p.alpha = Math.max(0, p.life * 0.5)\n          if (p.life <= 0 || p.y + p.size < -40) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            continue\n          }\n          smokeCount++\n          continue\n        }\n\n        if (p.state === REFORMING) {\n          p.x += (p.homeX - p.x) * 0.16 * dt\n          p.y += (p.homeY - p.y) * 0.16 * dt\n          p.rot += (0 - p.rot) * 0.22 * dt\n          p.vx = 0\n          p.vy = 0\n          p.fill = ink\n          p.heat = 0\n          if (Math.hypot(p.homeX - p.x, p.homeY - p.y) < 0.7) {\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            solidCount++\n          } else {\n            reformingCount++\n          }\n          continue\n        }\n\n        if (p.state === SOLID) {\n          solidCount++\n        }\n      }\n\n      const initialCount = cells.length || 1\n      if (\n        phase === PHASE_READY &&\n        cells.length > 0 &&\n        solidCount / initialCount < COLLAPSE_RATIO &&\n        resetAt === 0\n      ) {\n        resetAt = now + RESET_DELAY_MS\n      }\n\n      if (phase === PHASE_REFORMING) {\n        if (reformingCount === 0) {\n          phase = PHASE_READY\n        } else if (reformAt && now - reformAt > REFORM_SNAP_MS) {\n          for (const p of particles) {\n            if (p.state !== REFORMING) continue\n            p.x = p.homeX\n            p.y = p.homeY\n            p.state = SOLID\n            p.size = px\n            p.rot = 0\n            p.sleep = 0\n            p.heat = 0\n            p.fill = ink\n          }\n          phase = PHASE_READY\n        }\n      }\n\n      if (emberCount > maxEmbers) {\n        let extra = emberCount - maxEmbers\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === EMBER) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n\n      if (smokeCount > maxSmoke) {\n        let extra = smokeCount - maxSmoke\n        for (let i = particles.length - 1; i >= 0 && extra > 0; i--) {\n          if (particles[i]!.state === SMOKE) {\n            const last = particles.pop()\n            if (last && i < particles.length) particles[i] = last\n            extra--\n          }\n        }\n      }\n    }\n\n    ctx.clearRect(0, 0, cssW, cssH)\n    ctx.imageSmoothingEnabled = !dither\n\n    for (const p of particles) {\n      if (p.state === EMBER) {\n        ctx.globalAlpha = Math.max(0, Math.min(1, p.life * 1.4))\n        ctx.fillStyle = p.fill\n        if (!dither) {\n          const glow = Math.max(1.2, p.size * 0.55)\n          ctx.beginPath()\n          ctx.arc(p.x + p.size * 0.5, p.y + p.size * 0.5, glow, 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      if (p.state === SMOKE) {\n        ctx.globalAlpha = Math.max(0, Math.min(0.45, p.alpha))\n        ctx.fillStyle = p.fill\n        const half = p.size * 0.5\n        if (!dither) {\n          ctx.beginPath()\n          ctx.arc(p.x + half, p.y + half, Math.max(1.2, half), 0, Math.PI * 2)\n          ctx.fill()\n        } else {\n          ctx.fillRect(p.x, p.y, p.size, p.size)\n        }\n        continue\n      }\n      ctx.fillStyle = p.fill\n      ctx.globalAlpha = dither ? 1 : p.alpha\n      const pad = dither ? 0 : 0.35\n      if (p.state === REFORMING && Math.abs(p.rot) > 0.04) {\n        const half = p.size * 0.5\n        ctx.save()\n        ctx.translate(p.x + half, p.y + half)\n        ctx.rotate(p.rot)\n        ctx.fillRect(\n          -half - pad,\n          -half - pad,\n          p.size + pad * 2,\n          p.size + pad * 2\n        )\n        ctx.restore()\n      } else {\n        ctx.fillRect(p.x - pad, p.y - pad, p.size + pad * 2, p.size + pad * 2)\n      }\n    }\n\n    ctx.globalAlpha = 1\n    if (interactive && hover && !reduce) {\n      drawFireball(ctx, mouse.x, mouse.y, t, px, brush, dither)\n    }\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      wrap.removeEventListener(\"pointermove\", onMove)\n      wrap.removeEventListener(\"pointerenter\", onMove)\n      wrap.removeEventListener(\"pointerleave\", onLeave)\n      options.onHideCursor?.(false)\n    },\n  }\n}\n\nexport type Dithered404Props = Dithered404Options & {\n  className?: string\n}\n\n/**\n * Bayer-pixel 404 section — a fireball cursor scorches and burns\n * the glyph into embers and smoke, then the type reforms.\n * `dither={false}` is a soft realistic fire.\n */\nexport function Dithered404({\n  className,\n  color,\n  pixelSize = 4,\n  brush = 28,\n  interactive = true,\n  dither = true,\n  theme = \"auto\",\n}: Dithered404Props) {\n  const wrapRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<Dithered404Instance | null>(null)\n  const [hideCursor, setHideCursor] = useState(false)\n\n  useEffect(() => {\n    const wrap = wrapRef.current\n    const canvas = canvasRef.current\n    if (!wrap || !canvas) return\n    instanceRef.current = createDithered404(wrap, canvas, {\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n      onHideCursor: setHideCursor,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      color,\n      pixelSize,\n      brush,\n      interactive,\n      dither,\n      theme,\n      onHideCursor: setHideCursor,\n    })\n  }, [color, pixelSize, brush, interactive, dither, theme])\n\n  return (\n    <div\n      ref={wrapRef}\n      data-slot=\"dithered-404\"\n      className={cn(\n        \"absolute inset-0 touch-none overflow-hidden\",\n        hideCursor && interactive && \"cursor-none\",\n        className\n      )}\n    >\n      <span className=\"sr-only\">404</span>\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/dithered-404.tsx"
     }
diff --git a/public/r/registry.json b/public/r/registry.json
index 94831c4..47f5599 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -243,28 +243,28 @@
       "type": "registry:ui"
     },
     {
-      "name": "shader-fire",
-      "title": "Shader Fire",
+      "name": "shader-anime-fire",
+      "title": "Shader Anime Fire",
       "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "files": [
         {
-          "path": "registry/shader-fire/shader-fire.tsx",
+          "path": "registry/shader-anime-fire/shader-anime-fire.tsx",
           "type": "registry:ui",
-          "target": "components/ui/shader-fire.tsx"
+          "target": "components/ui/shader-anime-fire.tsx"
         }
       ],
       "type": "registry:ui"
     },
     {
-      "name": "shader-fire-svelte",
-      "title": "Shader Fire",
+      "name": "shader-anime-fire-svelte",
+      "title": "Shader Anime Fire",
       "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "dependencies": [],
       "files": [
         {
-          "path": "registry/shader-fire/shader-fire.svelte",
+          "path": "registry/shader-anime-fire/shader-anime-fire.svelte",
           "type": "registry:file",
-          "target": "src/lib/components/ui/shader-fire.svelte"
+          "target": "src/lib/components/ui/shader-anime-fire.svelte"
         }
       ],
       "type": "registry:ui"
diff --git a/registry.json b/registry.json
index 9a353dc..82f1c61 100644
--- a/registry.json
+++ b/registry.json
@@ -12,7 +12,7 @@
     "registry/logo-burst/registry.json",
     "registry/phosphor-score/registry.json",
     "registry/radiant-lines/registry.json",
-    "registry/shader-fire/registry.json",
+    "registry/shader-anime-fire/registry.json",
     "registry/shader-gradient/registry.json",
     "registry/shader-sky/registry.json",
     "registry/stretchy-footer/registry.json"
diff --git a/registry/dithered-404/dithered-404-vanilla.ts b/registry/dithered-404/dithered-404-vanilla.ts
index 094e4ae..5c32d71 100644
--- a/registry/dithered-404/dithered-404-vanilla.ts
+++ b/registry/dithered-404/dithered-404-vanilla.ts
@@ -480,7 +480,7 @@ function drawFireball(
 /**
  * Bayer-pixel 404 section — a fireball cursor scorches and burns
  * the glyph into embers and smoke, then the type reforms.
- * `dither={false}` is a soft realistic fire, same idea as Shader Fire.
+ * `dither={false}` is a soft realistic fire.
  */
 export function createDithered404(
   wrap: HTMLElement,
diff --git a/registry/dithered-404/dithered-404.tsx b/registry/dithered-404/dithered-404.tsx
index 1c109fb..61e065d 100644
--- a/registry/dithered-404/dithered-404.tsx
+++ b/registry/dithered-404/dithered-404.tsx
@@ -24,7 +24,7 @@ export type Dithered404Props = Dithered404Options & {
 /**
  * Bayer-pixel 404 section — a fireball cursor scorches and burns
  * the glyph into embers and smoke, then the type reforms.
- * `dither={false}` is a soft realistic fire, same idea as Shader Fire.
+ * `dither={false}` is a soft realistic fire.
  */
 export function Dithered404({
   className,
diff --git a/registry/shader-anime-fire/registry.json b/registry/shader-anime-fire/registry.json
index 43697ff..cca7322 100644
--- a/registry/shader-anime-fire/registry.json
+++ b/registry/shader-anime-fire/registry.json
@@ -2,28 +2,28 @@
   "$schema": "https://ui.shadcn.com/schema/registry.json",
   "items": [
     {
-      "name": "shader-fire",
+      "name": "shader-anime-fire",
       "type": "registry:ui",
-      "title": "Shader Fire",
+      "title": "Shader Anime Fire",
       "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "files": [
         {
-          "path": "shader-fire.tsx",
+          "path": "shader-anime-fire.tsx",
           "type": "registry:ui",
-          "target": "components/ui/shader-fire.tsx"
+          "target": "components/ui/shader-anime-fire.tsx"
         }
       ]
     },
     {
-      "name": "shader-fire-svelte",
+      "name": "shader-anime-fire-svelte",
       "type": "registry:ui",
-      "title": "Shader Fire",
+      "title": "Shader Anime Fire",
       "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
       "files": [
         {
-          "path": "shader-fire.svelte",
+          "path": "shader-anime-fire.svelte",
           "type": "registry:file",
-          "target": "src/lib/components/ui/shader-fire.svelte"
+          "target": "src/lib/components/ui/shader-anime-fire.svelte"
         }
       ],
       "dependencies": []
diff --git a/registry/shader-anime-fire/shader-anime-fire-demo.tsx b/registry/shader-anime-fire/shader-anime-fire-demo.tsx
index 9014ef6..5579ef2 100644
--- a/registry/shader-anime-fire/shader-anime-fire-demo.tsx
+++ b/registry/shader-anime-fire/shader-anime-fire-demo.tsx
@@ -19,8 +19,8 @@ import {
   DEFAULT_INTENSITY,
   DEFAULT_SPEED,
   LIGHT_COLORS,
-  ShaderFire,
-} from "@/registry/shader-fire/shader-fire"
+  ShaderAnimeFire,
+} from "@/registry/shader-anime-fire/shader-anime-fire"
 
 function norm(hex: string) {
   return hex.trim().toUpperCase()
@@ -36,7 +36,7 @@ function isStockPalette(colors: string[]) {
   return colorsEqual(colors, LIGHT_COLORS) || colorsEqual(colors, DARK_COLORS)
 }
 
-export function ShaderFireDemo() {
+export function ShaderAnimeFireDemo() {
   const theme = useHydratedTheme()
   const palette = theme === "dark" ? DARK_COLORS : LIGHT_COLORS
 
@@ -75,7 +75,7 @@ export function ShaderFireDemo() {
         stageClassName="min-h-0 overflow-hidden p-0"
       >
         <div className="relative h-[56svh] w-full overflow-hidden rounded-[inherit] bg-background">
-          <ShaderFire
+          <ShaderAnimeFire
             className="absolute inset-0"
             speed={props.speed}
             intensity={props.intensity}
@@ -122,7 +122,7 @@ export function ShaderFireDemo() {
       <ComponentControls
         hasChanges={hasChanges}
         onReset={resetProps}
-        component="ShaderFire"
+        component="ShaderAnimeFire"
         snippetProps={{
           speed: props.speed === DEFAULT_SPEED ? undefined : props.speed,
           intensity:
diff --git a/registry/shader-anime-fire/shader-anime-fire.svelte b/registry/shader-anime-fire/shader-anime-fire.svelte
index 82cdeff..5b3ad32 100644
--- a/registry/shader-anime-fire/shader-anime-fire.svelte
+++ b/registry/shader-anime-fire/shader-anime-fire.svelte
@@ -4,7 +4,7 @@
 <script lang="ts">
   import { onMount } from "svelte"
   import {
-    createShaderFire,
+    createShaderAnimeFire,
     DARK_FALLBACK,
     DEFAULT_EMBERS,
     DEFAULT_HEIGHT,
@@ -12,15 +12,15 @@
     DEFAULT_SPEED,
     LIGHT_FALLBACK,
     resolveDark,
-    type ShaderFireInstance,
-    type ShaderFireOptions,
-  } from "./shader-fire-vanilla"
+    type ShaderAnimeFireInstance,
+    type ShaderAnimeFireOptions,
+  } from "./shader-anime-fire-vanilla"
 
   function cn(...parts: Array<string | false | null | undefined>) {
     return parts.filter(Boolean).join(" ")
   }
 
-  interface Props extends Omit<ShaderFireOptions, "onThemeChange"> {
+  interface Props extends Omit<ShaderAnimeFireOptions, "onThemeChange"> {
     class?: string
   }
 
@@ -39,7 +39,7 @@
 
   let canvas: HTMLCanvasElement | undefined = $state()
   let isDark = $state(false)
-  let instance: ShaderFireInstance | null = null
+  let instance: ShaderAnimeFireInstance | null = null
 
   onMount(() => {
     const sync = () => {
@@ -60,7 +60,7 @@
         mq.removeEventListener("change", sync)
       }
     }
-    instance = createShaderFire(canvas, {
+    instance = createShaderAnimeFire(canvas, {
       colors,
       speed,
       intensity,
@@ -104,7 +104,7 @@
 </script>
 
 <div
-  data-slot="shader-fire"
+  data-slot="shader-anime-fire"
   aria-hidden="true"
   class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]", className)}
   style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
diff --git a/registry/shader-anime-fire/shader-anime-fire.tsx b/registry/shader-anime-fire/shader-anime-fire.tsx
index e2f62b0..910811b 100644
--- a/registry/shader-anime-fire/shader-anime-fire.tsx
+++ b/registry/shader-anime-fire/shader-anime-fire.tsx
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from "react"
 import { cn } from "@/lib/utils"
 
 import {
-  createShaderFire,
+  createShaderAnimeFire,
   DARK_FALLBACK,
   DEFAULT_EMBERS,
   DEFAULT_HEIGHT,
@@ -13,9 +13,9 @@ import {
   DEFAULT_SPEED,
   LIGHT_FALLBACK,
   resolveDark,
-  type ShaderFireInstance,
-  type ShaderFireOptions,
-} from "./shader-fire-vanilla"
+  type ShaderAnimeFireInstance,
+  type ShaderAnimeFireOptions,
+} from "./shader-anime-fire-vanilla"
 
 export {
   DARK_COLORS,
@@ -26,14 +26,14 @@ export {
   DEFAULT_SPEED,
   LIGHT_COLORS,
   LIGHT_FALLBACK,
-} from "./shader-fire-vanilla"
+} from "./shader-anime-fire-vanilla"
 export type {
-  ShaderFireInstance,
-  ShaderFireOptions,
-  ShaderFireTheme,
-} from "./shader-fire-vanilla"
+  ShaderAnimeFireInstance,
+  ShaderAnimeFireOptions,
+  ShaderAnimeFireTheme,
+} from "./shader-anime-fire-vanilla"
 
-export type ShaderFireProps = Omit<ShaderFireOptions, "onThemeChange"> & {
+export type ShaderAnimeFireProps = Omit<ShaderAnimeFireOptions, "onThemeChange"> & {
   className?: string
 }
 
@@ -41,7 +41,7 @@ export type ShaderFireProps = Omit<ShaderFireOptions, "onThemeChange"> & {
  * Cel-shaded flames licking up from the bottom edge, with sparks drifting
  * above them. Heat reaches for the pointer. Theme-aware.
  */
-export function ShaderFire({
+export function ShaderAnimeFire({
   className,
   colors,
   speed = DEFAULT_SPEED,
@@ -52,9 +52,9 @@ export function ShaderFire({
   dither = false,
   pixelSize = 1,
   theme = "auto",
-}: ShaderFireProps) {
+}: ShaderAnimeFireProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
-  const instanceRef = useRef<ShaderFireInstance | null>(null)
+  const instanceRef = useRef<ShaderAnimeFireInstance | null>(null)
   const [isDark, setIsDark] = useState(false)
 
   useEffect(() => {
@@ -76,7 +76,7 @@ export function ShaderFire({
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
-    instanceRef.current = createShaderFire(canvas, {
+    instanceRef.current = createShaderAnimeFire(canvas, {
       colors,
       speed,
       intensity,
@@ -125,7 +125,7 @@ export function ShaderFire({
 
   return (
     <div
-      data-slot="shader-fire"
+      data-slot="shader-anime-fire"
       aria-hidden
       className={cn(
         "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",

From 93bec399943ce634f3ee8293cbf6bb66f4c31088 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:32:24 +0530
Subject: [PATCH 30/49] Bring back the original Shader Fire alongside Shader
 Anime Fire.

The soft fire wash returns unchanged as its own shader-fire item, docs
page, landing feed and skill entry, next to the cel-shaded one. Its
docs URL is a real page again, so the redirect to Shader Anime Fire
goes.
---
 .cursor/skills/23rd/SKILL.md                  |   9 +-
 .cursor/skills/23rd/apis.md                   |  22 +
 .cursor/skills/23rd/components.md             |  28 +-
 .cursor/skills/23rd/recipes.md                |   1 +
 README.md                                     |   1 +
 components/monitor-feeds.tsx                  |   4 +
 content/docs/components/meta.json             |   1 +
 content/docs/components/shader-fire.mdx       | 122 +++++
 content/docs/getting-started.mdx              |   4 +-
 next.config.mjs                               |   5 -
 .../og/docs/components/shader-fire/image.png  | Bin 0 -> 45493 bytes
 public/r/registry.json                        |  27 +
 public/r/shader-fire-svelte.json              |  16 +
 public/r/shader-fire.json                     |  15 +
 registry.json                                 |   1 +
 registry/shader-fire/registry.json            |  32 ++
 registry/shader-fire/shader-fire-demo.tsx     | 194 +++++++
 registry/shader-fire/shader-fire-vanilla.ts   | 483 ++++++++++++++++++
 registry/shader-fire/shader-fire.svelte       | 106 ++++
 registry/shader-fire/shader-fire.tsx          | 121 +++++
 skills/23rd/SKILL.md                          |   9 +-
 skills/23rd/apis.md                           |  22 +
 skills/23rd/components.md                     |  28 +-
 skills/23rd/recipes.md                        |   1 +
 24 files changed, 1237 insertions(+), 15 deletions(-)
 create mode 100644 content/docs/components/shader-fire.mdx
 create mode 100644 public/og/docs/components/shader-fire/image.png
 create mode 100644 public/r/shader-fire-svelte.json
 create mode 100644 public/r/shader-fire.json
 create mode 100644 registry/shader-fire/registry.json
 create mode 100644 registry/shader-fire/shader-fire-demo.tsx
 create mode 100644 registry/shader-fire/shader-fire-vanilla.ts
 create mode 100644 registry/shader-fire/shader-fire.svelte
 create mode 100644 registry/shader-fire/shader-fire.tsx

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index 73d9b23..b570dee 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -92,7 +92,8 @@ flowchart TD
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
   atmo -->|Quiet wash| sg[shader-gradient]
-  atmo -->|Fire from the bottom| sf[shader-anime-fire]
+  atmo -->|Cel-shaded fire from the bottom| saf[shader-anime-fire]
+  atmo -->|Soft fire wash from the bottom| sf[shader-fire]
   atmo -->|Sky or rain, optional glass| ss[shader-sky]
   atmo -->|ASCII mouse trails| af[ascii-fluid]
   atmo -->|Hyperspace streaks, scroll warp| rl[radiant-lines]
@@ -110,6 +111,7 @@ Disambiguation that agents get wrong:
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
 | Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
 | Fire, embers, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| Quiet heat wash behind copy | `shader-fire` | `shader-anime-fire` when it should be the show |
 | 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
 | Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) |
@@ -132,7 +134,7 @@ Backgrounds and shaders fill the parent. They do not create a page.
 </section>
 ```
 
-Same shell for `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
+Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
 
 `RadiantLines` is transparent and warps with scroll. Inside an overflow div, pass the scroller (`containerRef` in React, `container` in Svelte) and make the canvas `sticky top-0 h-svh`. Omit the scroller to use the window.
 
@@ -153,7 +155,7 @@ That matches shadcn / `next-themes` with `attribute="class"`. There is no shared
 
 Exceptions:
 
-- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
+- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
 - `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
 - `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
@@ -172,6 +174,7 @@ Categories match `content/docs/components/meta.json`.
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
 | `shader-anime-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
+| `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index 73382bc..a8de6e0 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -170,6 +170,28 @@ type ShaderAnimeFireProps = {
 
 Same `colors ?? theme palette` rule. Fallbacks exported as `LIGHT_FALLBACK` / `DARK_FALLBACK`.
 
+## shader-fire
+
+```ts
+type ShaderFireProps = {
+  colors?: string[] // ember, flame, highlight
+  speed?: number // 0.55
+  intensity?: number // 0.55
+  height?: number // 0.45
+  interactive?: boolean // true
+  dither?: boolean // false
+  pixelSize?: number // 1
+  theme?: "light" | "dark" | "auto"
+  className?: string
+}
+```
+
+`LIGHT_COLORS`: `#9C3A24`, `#C96A32`, `#E6C4A0`.
+
+`DARK_COLORS`: `#A33A18`, `#D4682A`, `#E8B45A`.
+
+Same `colors ?? theme palette` rule. Fallbacks exported as `LIGHT_FALLBACK` / `DARK_FALLBACK`.
+
 ## shader-sky
 
 ```ts
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index 6f085ad..69b7c79 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -149,7 +149,7 @@ Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Embe
 
 Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
 
-Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
+Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). A quiet wash (`shader-fire`).
 
 Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
@@ -169,6 +169,32 @@ export function Hero() {
 
 Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. `embers={0}` turns sparks off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
 
+## shader-fire
+
+Shader. Sparse tongues from the bottom edge. Ember / flame / highlight.
+
+Best fit: heat behind a hero. `dither` turns the wash into Bayer pixels.
+
+Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). Bold graphic flames (`shader-anime-fire`).
+
+Deps: none. Key props: `colors`, `speed` (0.55), `intensity` (0.55), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+
+```tsx
+"use client"
+import { ShaderFire } from "@/components/ui/shader-fire"
+
+export function Hero() {
+  return (
+    <section className="relative isolate min-h-svh overflow-hidden bg-background">
+      <ShaderFire />
+      <div className="relative z-10 p-10">Your content</div>
+    </section>
+  )
+}
+```
+
+Pitfalls: `interactive` adds heat under the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#9C3A24 #C96A32 #E6C4A0`. Dark `#A33A18 #D4682A #E8B45A`.
+
 ## shader-sky
 
 Shader. Daytime clouds, or a gray rain ceiling in dark mode. Optional dotted glass film.
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index 42d5bb9..463b4c9 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -34,6 +34,7 @@ Swap the component, keep the shell:
 | --- | --- | --- |
 | Fire along the floor | `ShaderAnimeFire` | `height={0.45}` |
 | Pixel fire | `ShaderAnimeFire` | `dither pixelSize={3}` |
+| Soft heat wash | `ShaderFire` | defaults |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |
diff --git a/README.md b/README.md
index 1354e57..46a4181 100644
--- a/README.md
+++ b/README.md
@@ -94,6 +94,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Phosphor Score](https://23rd.dev/docs/components/phosphor-score)         | `@23rd/phosphor-score`     | Vertical CRT sheet music — notes fall, bloom at the playhead, then exit in a flare |
 | [Radiant Lines](https://23rd.dev/docs/components/radiant-lines)           | `@23rd/radiant-lines`      | Hyperspace starfield background; warp speed driven by scroll                       |
 | [Shader Anime Fire](https://23rd.dev/docs/components/shader-anime-fire)               | `@23rd/shader-anime-fire`        | Cel-shaded flames and sparks rising from the bottom of a landing hero             |
+| [Shader Fire](https://23rd.dev/docs/components/shader-fire)               | `@23rd/shader-fire`        | Sparse 2D fire wash — tongues rise from the bottom behind a landing hero           |
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
diff --git a/components/monitor-feeds.tsx b/components/monitor-feeds.tsx
index 87f7335..cf5ad23 100644
--- a/components/monitor-feeds.tsx
+++ b/components/monitor-feeds.tsx
@@ -45,6 +45,9 @@ const RadiantLines = feed(() =>
 const ShaderAnimeFire = feed(() =>
   import("@/registry/shader-anime-fire/shader-anime-fire").then((m) => m.ShaderAnimeFire)
 )
+const ShaderFire = feed(() =>
+  import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
+)
 const ShaderGradient = feed(() =>
   import("@/registry/shader-gradient/shader-gradient").then(
     (m) => m.ShaderGradient
@@ -72,6 +75,7 @@ const FEEDS: Record<string, () => ReactNode> = {
   "phosphor-score": () => <PhosphorScore />,
   "radiant-lines": () => <RadiantLines />,
   "shader-anime-fire": () => <ShaderAnimeFire className="absolute inset-0" />,
+  "shader-fire": () => <ShaderFire className="absolute inset-0" />,
   "shader-gradient": () => <ShaderGradient className="absolute inset-0" />,
   "shader-sky": () => <ShaderSky className="absolute inset-0" />,
 }
diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json
index aea67fe..82cda89 100644
--- a/content/docs/components/meta.json
+++ b/content/docs/components/meta.json
@@ -9,6 +9,7 @@
     "---Shaders---",
     "shader-gradient",
     "shader-anime-fire",
+    "shader-fire",
     "shader-sky",
     "---Footers---",
     "stretchy-footer",
diff --git a/content/docs/components/shader-fire.mdx b/content/docs/components/shader-fire.mdx
new file mode 100644
index 0000000..def98b4
--- /dev/null
+++ b/content/docs/components/shader-fire.mdx
@@ -0,0 +1,122 @@
+---
+title: Shader Fire
+description: A sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, sit behind UI, follow the theme, optional pointer heat.
+---
+
+import { ShaderFireDemo } from "@/registry/shader-fire/shader-fire-demo"
+
+Not a wall of flame. Use it as heat under a hero or wait screen so the page feels finished without covering the copy. Sienna / amber / dusty peach on paper in light mode; visible coals on slate in dark. Toggle **Dither** for an ordered Bayer print of the same field. Press `d` to switch theme.
+
+## Preview
+
+<ShaderFireDemo />
+
+## Installation
+
+<CliCommand item="shader-fire" />
+
+Or install straight from the public GitHub source registry:
+
+<CliCommand item="shader-fire" github />
+
+## Usage
+
+Pin it behind a relatively positioned section. Keep content in a later stacking context (`relative z-10`). Default `theme="auto"` follows shadcn / next-themes (`class` on `<html>`).
+
+<FrameworkCode>
+  <FrameworkReact>
+```tsx
+"use client"
+
+import { ShaderFire } from "@/components/ui/shader-fire"
+
+export function Hero() {
+  return (
+    <section className="relative isolate min-h-svh overflow-hidden bg-background">
+      <ShaderFire />
+      <div className="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
+        <p className="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
+          New
+        </p>
+        <h1 className="mt-3 text-4xl font-medium tracking-tight">
+          Heat under the headline
+        </h1>
+        <p className="mt-3 text-muted-foreground">
+          The fire stays a wash. The page stays readable.
+        </p>
+      </div>
+    </section>
+  )
+}
+```
+  </FrameworkReact>
+  <FrameworkSvelte>
+```svelte
+<script>
+  import ShaderFire from "$lib/components/ui/shader-fire.svelte"
+</script>
+
+<section class="relative isolate min-h-svh overflow-hidden bg-background">
+  <ShaderFire />
+  <div class="relative z-10 mx-auto flex min-h-svh max-w-xl flex-col items-center justify-center px-6 text-center">
+    <p class="text-xs font-medium tracking-[0.18em] text-muted-foreground uppercase">
+      New
+    </p>
+    <h1 class="mt-3 text-4xl font-medium tracking-tight">
+      Heat under the headline
+    </h1>
+    <p class="mt-3 text-muted-foreground">
+      The fire stays a wash. The page stays readable.
+    </p>
+  </div>
+</section>
+```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+Force a palette if the parent theme should not drive it:
+
+<FrameworkCode>
+  <FrameworkReact>
+```tsx
+<ShaderFire theme="light" />
+<ShaderFire theme="dark" />
+```
+  </FrameworkReact>
+  <FrameworkSvelte>
+```svelte
+<ShaderFire theme="light" />
+<ShaderFire theme="dark" />
+```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+Print the same field as ordered Bayer pixels:
+
+<FrameworkCode>
+  <FrameworkReact>
+```tsx
+<ShaderFire dither pixelSize={1} />
+```
+  </FrameworkReact>
+  <FrameworkSvelte>
+```svelte
+<ShaderFire dither pixelSize={1} />
+```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+## Props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `colors` | `string[]` | ember / flame / highlight |
+| `speed` | `number` | `0.55` |
+| `intensity` | `number` | `0.55` |
+| `height` | `number` | `0.45` |
+| `interactive` | `boolean` | `true` |
+| `dither` | `boolean` | `false` |
+| `pixelSize` | `number` | `1` |
+| `theme` | `"light" \| "dark" \| "auto"` | `auto` |
+| `className` | `string` | React only |
+| `class` | `string` | Svelte only |
diff --git a/content/docs/getting-started.mdx b/content/docs/getting-started.mdx
index 2d92560..2503109 100644
--- a/content/docs/getting-started.mdx
+++ b/content/docs/getting-started.mdx
@@ -13,7 +13,7 @@ Or pull straight from the public GitHub source registry:
 
 <CliCommand item="shader-gradient" github />
 
-Swap `shader-gradient` for any item name — `shader-sky`, `shader-anime-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
+Swap `shader-gradient` for any item name — `shader-sky`, `shader-anime-fire`, `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
 
 ## Use a background or shader
 
@@ -57,7 +57,7 @@ Shaders such as [Shader Gradient](/docs/components/shader-gradient), [Shader Ani
 | Category   | Components                                                                                                                                                                                 |
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Background | [Logo Burst](/docs/components/logo-burst), [Phosphor Score](/docs/components/phosphor-score), [Radiant Lines](/docs/components/radiant-lines), [ASCII Fluid](/docs/components/ascii-fluid) |
-| Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Anime Fire](/docs/components/shader-anime-fire), [Shader Sky](/docs/components/shader-sky)                                                |
+| Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Anime Fire](/docs/components/shader-anime-fire), [Shader Fire](/docs/components/shader-fire), [Shader Sky](/docs/components/shader-sky)                                                |
 | Footers    | [Stretchy Footer](/docs/components/stretchy-footer)                                                                                       |
 | Characters | [Live Orb](/docs/components/live-orb), [ASCII Logo](/docs/components/ascii-logo)                                                                                                           |
 | Pages      | [Dithered 404](/docs/components/dithered-404)                                                                                                                                              |
diff --git a/next.config.mjs b/next.config.mjs
index 5c76c04..7ebb9ad 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,11 +16,6 @@ const config = {
         destination: "/docs/getting-started",
         permanent: false,
       },
-      {
-        source: "/docs/components/shader-fire",
-        destination: "/docs/components/shader-anime-fire",
-        permanent: true,
-      },
       {
         source: "/pricing",
         destination: "/sponsors",
diff --git a/public/og/docs/components/shader-fire/image.png b/public/og/docs/components/shader-fire/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6942cb852a3a52baa1a72b0a8cdb4ab79484d7c
GIT binary patch
literal 45493
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
BM~naf

literal 0
HcmV?d00001

diff --git a/public/r/registry.json b/public/r/registry.json
index 47f5599..5f923d6 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -269,6 +269,33 @@
       ],
       "type": "registry:ui"
     },
+    {
+      "name": "shader-fire",
+      "title": "Shader Fire",
+      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "files": [
+        {
+          "path": "registry/shader-fire/shader-fire.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/shader-fire.tsx"
+        }
+      ],
+      "type": "registry:ui"
+    },
+    {
+      "name": "shader-fire-svelte",
+      "title": "Shader Fire",
+      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/shader-fire/shader-fire.svelte",
+          "type": "registry:file",
+          "target": "src/lib/components/ui/shader-fire.svelte"
+        }
+      ],
+      "type": "registry:ui"
+    },
     {
       "name": "shader-gradient",
       "title": "Shader Gradient",
diff --git a/public/r/shader-fire-svelte.json b/public/r/shader-fire-svelte.json
new file mode 100644
index 0000000..1c2d0f9
--- /dev/null
+++ b/public/r/shader-fire-svelte.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shader-fire-svelte",
+  "title": "Shader Fire",
+  "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/shader-fire/shader-fire.svelte",
+      "content": "<script module lang=\"ts\">\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.55,\n    intensity = 0.55,\n    height = 0.45,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "type": "registry:file",
+      "target": "src/lib/components/ui/shader-fire.svelte"
+    }
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/public/r/shader-fire.json b/public/r/shader-fire.json
new file mode 100644
index 0000000..f1ba1f5
--- /dev/null
+++ b/public/r/shader-fire.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shader-fire",
+  "title": "Shader Fire",
+  "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+  "files": [
+    {
+      "path": "registry/shader-fire/shader-fire.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderFireProps = Omit<ShaderFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function ShaderFire({\n  className,\n  colors,\n  speed = 0.55,\n  intensity = 0.55,\n  height = 0.45,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/shader-fire.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index 82f1c61..545a227 100644
--- a/registry.json
+++ b/registry.json
@@ -13,6 +13,7 @@
     "registry/phosphor-score/registry.json",
     "registry/radiant-lines/registry.json",
     "registry/shader-anime-fire/registry.json",
+    "registry/shader-fire/registry.json",
     "registry/shader-gradient/registry.json",
     "registry/shader-sky/registry.json",
     "registry/stretchy-footer/registry.json"
diff --git a/registry/shader-fire/registry.json b/registry/shader-fire/registry.json
new file mode 100644
index 0000000..a32ade4
--- /dev/null
+++ b/registry/shader-fire/registry.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "items": [
+    {
+      "name": "shader-fire",
+      "type": "registry:ui",
+      "title": "Shader Fire",
+      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "files": [
+        {
+          "path": "shader-fire.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/shader-fire.tsx"
+        }
+      ]
+    },
+    {
+      "name": "shader-fire-svelte",
+      "type": "registry:ui",
+      "title": "Shader Fire",
+      "description": "Sparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.",
+      "files": [
+        {
+          "path": "shader-fire.svelte",
+          "type": "registry:file",
+          "target": "src/lib/components/ui/shader-fire.svelte"
+        }
+      ],
+      "dependencies": []
+    }
+  ]
+}
diff --git a/registry/shader-fire/shader-fire-demo.tsx b/registry/shader-fire/shader-fire-demo.tsx
new file mode 100644
index 0000000..48e12f2
--- /dev/null
+++ b/registry/shader-fire/shader-fire-demo.tsx
@@ -0,0 +1,194 @@
+"use client"
+
+import { useLayoutEffect, useMemo } from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  ComponentControls,
+  ControlColors,
+  ControlSlider,
+  ControlSwitch,
+} from "@/components/component-controls"
+import { ComponentPreview } from "@/components/component-preview"
+import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
+import { usePreviewProps } from "@/hooks/use-preview-props"
+import {
+  DARK_COLORS,
+  LIGHT_COLORS,
+  ShaderFire,
+} from "@/registry/shader-fire/shader-fire"
+
+function norm(hex: string) {
+  return hex.trim().toUpperCase()
+}
+
+function colorsEqual(a: string[], b: string[]) {
+  return (
+    a.length === b.length && a.every((color, i) => norm(color) === norm(b[i]!))
+  )
+}
+
+function isStockPalette(colors: string[]) {
+  return colorsEqual(colors, LIGHT_COLORS) || colorsEqual(colors, DARK_COLORS)
+}
+
+export function ShaderFireDemo() {
+  const theme = useHydratedTheme()
+  const palette = theme === "dark" ? DARK_COLORS : LIGHT_COLORS
+
+  const defaults = useMemo(
+    () => ({
+      speed: 0.55,
+      intensity: 0.55,
+      height: 0.45,
+      interactive: true,
+      overlay: true,
+      dither: false,
+      pixelSize: 1,
+      colors: palette,
+    }),
+    [palette]
+  )
+
+  const { props, updateProp, resetProps, hasChanges, setProps } =
+    usePreviewProps(defaults)
+
+  useLayoutEffect(() => {
+    setProps((prev) => {
+      if (!isStockPalette(prev.colors)) return prev
+      if (colorsEqual(prev.colors, palette)) return prev
+      return { ...prev, colors: palette }
+    })
+  }, [palette, setProps])
+
+  const useAutoTheme = isStockPalette(props.colors)
+
+  return (
+    <>
+      <ComponentPreview
+        title="Landing hero"
+        stageClassName="min-h-0 overflow-hidden p-0"
+      >
+        <div className="relative h-[56svh] w-full overflow-hidden rounded-[inherit] bg-background">
+          <ShaderFire
+            className="absolute inset-0"
+            speed={props.speed}
+            intensity={props.intensity}
+            height={props.height}
+            interactive={props.interactive}
+            dither={props.dither}
+            pixelSize={props.pixelSize}
+            colors={useAutoTheme ? undefined : props.colors}
+          />
+          {props.overlay ? (
+            <>
+              <div
+                aria-hidden
+                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
+              />
+              <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
+                <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">
+                  Atmosphere
+                </p>
+                <h3 className="mt-3 max-w-lg text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
+                  Heat under the headline
+                </h3>
+                <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
+                  Sparse tongues rise from the bottom. Copy stays in the quiet
+                  middle; the fire stays a wash.
+                </p>
+                <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+                  <Button type="button">Install</Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="bg-background/70 backdrop-blur-sm"
+                  >
+                    View API
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : null}
+        </div>
+      </ComponentPreview>
+
+      <ComponentControls
+        hasChanges={hasChanges}
+        onReset={resetProps}
+        component="ShaderFire"
+        snippetProps={{
+          speed: props.speed,
+          intensity: props.intensity,
+          height: props.height,
+          interactive: props.interactive,
+          dither: props.dither,
+          pixelSize: props.pixelSize,
+          colors: useAutoTheme ? undefined : props.colors,
+        }}
+      >
+        <ControlColors
+          label="Palette"
+          colors={props.colors}
+          palettes={[
+            palette,
+            ["#1E3A5F", "#4A90A4", "#C5E4E7"],
+            ["#5B1E6E", "#C44569", "#FFA07A"],
+            ["#1A1A1A", "#6B4F3A", "#E8E4DC"],
+          ]}
+          onChange={(colors) => updateProp("colors", colors)}
+        />
+        <ControlSlider
+          label="Speed"
+          value={props.speed}
+          min={0.1}
+          max={1.4}
+          step={0.05}
+          onChange={(v) => updateProp("speed", v)}
+        />
+        <ControlSlider
+          label="Intensity"
+          value={props.intensity}
+          min={0.2}
+          max={1}
+          step={0.05}
+          onChange={(v) => updateProp("intensity", v)}
+        />
+        <ControlSlider
+          label="Height"
+          value={props.height}
+          min={0.2}
+          max={0.85}
+          step={0.05}
+          onChange={(v) => updateProp("height", v)}
+        />
+        <ControlSwitch
+          label="Copy"
+          description="Headline over the fire"
+          checked={props.overlay}
+          onChange={(v) => updateProp("overlay", v)}
+        />
+        <ControlSwitch
+          label="Interactive"
+          description="Heat follows the pointer"
+          checked={props.interactive}
+          onChange={(v) => updateProp("interactive", v)}
+        />
+        <ControlSwitch
+          label="Dither"
+          description="Ordered Bayer pixels"
+          checked={props.dither}
+          onChange={(v) => updateProp("dither", v)}
+        />
+        <ControlSlider
+          label="Pixel size"
+          value={props.pixelSize}
+          min={1}
+          max={8}
+          step={1}
+          onChange={(v) => updateProp("pixelSize", v)}
+        />
+      </ComponentControls>
+    </>
+  )
+}
diff --git a/registry/shader-fire/shader-fire-vanilla.ts b/registry/shader-fire/shader-fire-vanilla.ts
new file mode 100644
index 0000000..c6a6736
--- /dev/null
+++ b/registry/shader-fire/shader-fire-vanilla.ts
@@ -0,0 +1,483 @@
+export type ShaderFireTheme = "light" | "dark" | "auto"
+
+export type ShaderFireOptions = {
+  /** Ember / flame / highlight hex */
+  colors?: string[]
+  /** Rise speed. Default 0.55 */
+  speed?: number
+  /** Coverage 0–1. Default 0.55 */
+  intensity?: number
+  /** How far tongues climb 0–1. Default 0.45 */
+  height?: number
+  /** Local heat under the pointer. Default true */
+  interactive?: boolean
+  /** Ordered Bayer pixels instead of a soft wash. Default false */
+  dither?: boolean
+  /** Dither cell size in CSS px. Default `1` */
+  pixelSize?: number
+  /**
+   * Palette mode. Default `auto` follows shadcn / next-themes
+   * (`html.dark` class) so light and dark swap with the site theme.
+   */
+  theme?: ShaderFireTheme
+  /** Fires whenever resolved dark mode changes (CSS fallback). */
+  onThemeChange?: (dark: boolean) => void
+}
+
+export type ShaderFireInstance = {
+  setOptions: (options: Partial<ShaderFireOptions>) => void
+  destroy: () => void
+}
+
+/** Warm ink on paper — sienna / amber / dusty peach */
+export const LIGHT_COLORS = ["#9C3A24", "#C96A32", "#E6C4A0"]
+/** Visible coals on slate — ember / flame / highlight */
+export const DARK_COLORS = ["#A33A18", "#D4682A", "#E8B45A"]
+
+export const LIGHT_FALLBACK = {
+  backgroundColor: "#FCFBF9",
+  backgroundImage: [
+    "radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)",
+    "radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)",
+    "radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)",
+    "radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)",
+  ].join(", "),
+} as const
+
+export const DARK_FALLBACK = {
+  backgroundColor: "#08090C",
+  backgroundImage: [
+    "radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)",
+    "radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)",
+    "radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)",
+    "radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)",
+  ].join(", "),
+} as const
+
+const VERT = `
+attribute vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`
+
+const FRAG = `
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_speed;
+uniform float u_intensity;
+uniform float u_height;
+uniform float u_dark;
+uniform float u_dither;
+uniform float u_pixelSize;
+uniform vec3 u_c1;
+uniform vec3 u_c2;
+uniform vec3 u_c3;
+uniform vec2 u_mouse;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
+  for (int i = 0; i < 5; i++) {
+    v += a * noise(p);
+    p = m * p;
+    a *= 0.5;
+  }
+  return v;
+}
+
+// Classic Bayer (WebGL1-safe, no bitwise ops)
+float bayer2(vec2 c) {
+  return mod(c.x * 2.0 + c.y * 3.0, 4.0);
+}
+
+float bayer4(vec2 p) {
+  vec2 c = mod(floor(p), 4.0);
+  vec2 hi = floor(c * 0.5);
+  vec2 lo = mod(c, 2.0);
+  return bayer2(lo) * 4.0 + bayer2(hi);
+}
+
+float bayer8(vec2 p) {
+  vec2 c = mod(floor(p), 8.0);
+  vec2 hi = floor(c * 0.5);
+  vec2 lo = mod(c, 2.0);
+  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;
+}
+
+float fireField(vec2 uv, float aspect, float t) {
+  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));
+
+  // Column space — sway as they rise
+  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);
+  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);
+
+  // Two-pass domain warp — curling tongues, not blobs
+  vec2 w1 = vec2(
+    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),
+    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)
+  );
+  q += (w1 - 0.5) * 0.58;
+  vec2 w2 = vec2(
+    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),
+    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)
+  );
+  q += (w2 - 0.5) * 0.26;
+
+  float shape = fbm(q * 2.35);
+  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));
+  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);
+  float field = (shape * 0.68 + detail * 0.32) * flicker;
+
+  // Hotter, wider base; thinner breakaways as they climb
+  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);
+  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);
+  field = field * taper + core * shape * 0.38;
+
+  float md = length((uv - u_mouse) * vec2(aspect, 1.0));
+  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);
+
+  field *= smoothstep(0.0, 0.05, uv.y + 0.015);
+  field = smoothstep(0.22, 0.74, field);
+
+  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));
+  return clamp(field * intensity, 0.0, 1.0);
+}
+
+void main() {
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  float t = u_time * u_speed;
+  float px = max(u_pixelSize, 1.0);
+
+  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;
+  vec2 cell = floor(gl_FragCoord.xy / px);
+  if (u_dither > 0.5) {
+    sampleUv = (cell + 0.5) * px / u_resolution.xy;
+  }
+
+  float field = fireField(sampleUv, aspect, t);
+
+  if (u_dither > 0.5) {
+    float bit = step(bayer8(cell), field);
+    field = bit * mix(0.45, 1.0, field);
+  }
+
+  vec3 ember = u_c1;
+  vec3 flame = u_c2;
+  vec3 highlight = u_c3;
+  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));
+  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));
+
+  vec3 paper = u_dark < 0.5
+    ? vec3(0.992, 0.986, 0.978)
+    : vec3(0.03, 0.032, 0.042);
+  // Light: watercolor on paper — more air, less orange stain
+  float cover = u_dither > 0.5
+    ? field
+    : field * (u_dark < 0.5 ? 0.68 : 0.84);
+  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));
+  if (u_dark < 0.5 && u_dither < 0.5) {
+    float haze = field * (1.0 - field) * 0.12;
+    col = mix(col, paper, haze);
+  }
+
+  if (u_dither < 0.5) {
+    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;
+  }
+
+  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+}
+`
+
+function isDev() {
+  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "").trim()
+  const full =
+    h.length === 3
+      ? h
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : h.padEnd(6, "0").slice(0, 6)
+  const n = Number.parseInt(full, 16)
+  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]
+  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+}
+
+/** Resolves shadcn / next-themes dark mode (`attribute="class"` → `html.dark`). */
+export function isDarkTheme(): boolean {
+  if (typeof document === "undefined") return false
+  const root = document.documentElement
+  if (root.classList.contains("dark")) return true
+  if (root.classList.contains("light")) return false
+  const dataTheme = root.getAttribute("data-theme")
+  if (dataTheme === "dark") return true
+  if (dataTheme === "light") return false
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+}
+
+export function resolveDark(theme: ShaderFireTheme): boolean {
+  if (theme === "dark") return true
+  if (theme === "light") return false
+  return isDarkTheme()
+}
+
+function compile(gl: WebGLRenderingContext, type: number, source: string) {
+  const shader = gl.createShader(type)
+  if (!shader) return null
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    if (isDev()) {
+      console.warn(
+        "ShaderFire: shader failed to compile\n",
+        gl.getShaderInfoLog(shader)
+      )
+    }
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+
+/**
+ * Sparse 2D fire wash — tongues rise from the bottom behind UI.
+ * Theme-aware light / dusk.
+ */
+export function createShaderFire(
+  canvas: HTMLCanvasElement,
+  initial: ShaderFireOptions = {}
+): ShaderFireInstance | null {
+  let options: Required<
+    Pick<
+      ShaderFireOptions,
+      | "speed"
+      | "intensity"
+      | "height"
+      | "interactive"
+      | "dither"
+      | "pixelSize"
+      | "theme"
+    >
+  > &
+    ShaderFireOptions = {
+    speed: 0.55,
+    intensity: 0.55,
+    height: 0.45,
+    interactive: true,
+    dither: false,
+    pixelSize: 1,
+    theme: "auto",
+    ...initial,
+  }
+
+  const mouse = { x: 0.5, y: 0.12 }
+  const targetMouse = { x: 0.5, y: 0.12 }
+  let reduce = false
+  let dark = resolveDark(options.theme ?? "auto")
+  options.onThemeChange?.(dark)
+
+  const gl = canvas.getContext("webgl", {
+    alpha: false,
+    antialias: false,
+    depth: false,
+    stencil: false,
+    powerPreference: "high-performance",
+  })
+  if (!gl) return null
+
+  const vs = compile(gl, gl.VERTEX_SHADER, VERT)
+  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)
+  if (!vs || !fs) {
+    if (vs) gl.deleteShader(vs)
+    if (fs) gl.deleteShader(fs)
+    return null
+  }
+
+  const program = gl.createProgram()
+  if (!program) {
+    gl.deleteShader(vs)
+    gl.deleteShader(fs)
+    return null
+  }
+  gl.attachShader(program, vs)
+  gl.attachShader(program, fs)
+  gl.linkProgram(program)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    if (isDev()) {
+      console.warn(
+        "ShaderFire: program failed to link\n",
+        gl.getProgramInfoLog(program)
+      )
+    }
+    gl.deleteProgram(program)
+    gl.deleteShader(vs)
+    gl.deleteShader(fs)
+    return null
+  }
+  gl.useProgram(program)
+
+  const buf = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf)
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+    gl.STATIC_DRAW
+  )
+  const loc = gl.getAttribLocation(program, "a_position")
+  gl.enableVertexAttribArray(loc)
+  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
+
+  const uResolution = gl.getUniformLocation(program, "u_resolution")
+  const uTime = gl.getUniformLocation(program, "u_time")
+  const uSpeed = gl.getUniformLocation(program, "u_speed")
+  const uIntensity = gl.getUniformLocation(program, "u_intensity")
+  const uHeight = gl.getUniformLocation(program, "u_height")
+  const uDark = gl.getUniformLocation(program, "u_dark")
+  const uC1 = gl.getUniformLocation(program, "u_c1")
+  const uC2 = gl.getUniformLocation(program, "u_c2")
+  const uC3 = gl.getUniformLocation(program, "u_c3")
+  const uMouse = gl.getUniformLocation(program, "u_mouse")
+  const uDither = gl.getUniformLocation(program, "u_dither")
+  const uPixelSize = gl.getUniformLocation(program, "u_pixelSize")
+
+  let raf = 0
+  let running = true
+  const start = performance.now()
+  let frozenTime = 0
+
+  const resize = () => {
+    const parent = canvas.parentElement
+    if (!parent) return
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    const w = parent.clientWidth
+    const h = parent.clientHeight
+    if (w <= 0 || h <= 0) return
+    canvas.width = Math.max(1, Math.floor(w * dpr))
+    canvas.height = Math.max(1, Math.floor(h * dpr))
+    canvas.style.width = `${w}px`
+    canvas.style.height = `${h}px`
+    gl.viewport(0, 0, canvas.width, canvas.height)
+  }
+
+  resize()
+  const ro = new ResizeObserver(resize)
+  if (canvas.parentElement) ro.observe(canvas.parentElement)
+
+  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
+  const onReduce = () => {
+    reduce = mqReduce.matches
+  }
+  onReduce()
+  mqReduce.addEventListener("change", onReduce)
+
+  const syncTheme = () => {
+    const next = resolveDark(options.theme ?? "auto")
+    if (next === dark) return
+    dark = next
+    options.onThemeChange?.(dark)
+  }
+  const mo = new MutationObserver(syncTheme)
+  mo.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "style"],
+  })
+  const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
+  mqDark.addEventListener("change", syncTheme)
+
+  const onMove = (e: PointerEvent) => {
+    if (!options.interactive) return
+    const parent = canvas.parentElement
+    if (!parent) return
+    const rect = parent.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return
+    targetMouse.x = (e.clientX - rect.left) / rect.width
+    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height
+  }
+  window.addEventListener("pointermove", onMove, { passive: true })
+
+  const tick = (now: number) => {
+    if (!running) return
+
+    if (reduce) {
+      if (frozenTime === 0) frozenTime = (now - start) / 1000
+    } else {
+      frozenTime = 0
+    }
+
+    const time = reduce ? frozenTime : (now - start) / 1000
+    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)
+    const palette = [0, 1, 2].map((i) =>
+      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)
+    )
+
+    mouse.x += (targetMouse.x - mouse.x) * 0.05
+    mouse.y += (targetMouse.y - mouse.y) * 0.05
+
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    const px = Math.max(1, options.pixelSize ?? 1) * dpr
+
+    gl.uniform2f(uResolution, canvas.width, canvas.height)
+    gl.uniform1f(uTime, time)
+    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))
+    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))
+    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))
+    gl.uniform1f(uDark, dark ? 1 : 0)
+    gl.uniform1f(uDither, options.dither ? 1 : 0)
+    gl.uniform1f(uPixelSize, px)
+    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])
+    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])
+    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])
+    gl.uniform2f(
+      uMouse,
+      options.interactive ? mouse.x : 0.5,
+      options.interactive ? mouse.y : 0.12
+    )
+
+    gl.drawArrays(gl.TRIANGLES, 0, 6)
+    raf = requestAnimationFrame(tick)
+  }
+
+  raf = requestAnimationFrame(tick)
+
+  return {
+    setOptions(next) {
+      options = { ...options, ...next }
+      syncTheme()
+    },
+    destroy() {
+      running = false
+      cancelAnimationFrame(raf)
+      ro.disconnect()
+      mo.disconnect()
+      mqReduce.removeEventListener("change", onReduce)
+      mqDark.removeEventListener("change", syncTheme)
+      window.removeEventListener("pointermove", onMove)
+      gl.deleteProgram(program)
+      gl.deleteShader(vs)
+      gl.deleteShader(fs)
+      gl.deleteBuffer(buf)
+    },
+  }
+}
diff --git a/registry/shader-fire/shader-fire.svelte b/registry/shader-fire/shader-fire.svelte
new file mode 100644
index 0000000..93969ed
--- /dev/null
+++ b/registry/shader-fire/shader-fire.svelte
@@ -0,0 +1,106 @@
+<script module lang="ts">
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte"
+  import {
+    createShaderFire,
+    DARK_FALLBACK,
+    LIGHT_FALLBACK,
+    resolveDark,
+    type ShaderFireInstance,
+    type ShaderFireOptions,
+  } from "./shader-fire-vanilla"
+
+  function cn(...parts: Array<string | false | null | undefined>) {
+    return parts.filter(Boolean).join(" ")
+  }
+
+  interface Props extends Omit<ShaderFireOptions, "onThemeChange"> {
+    class?: string
+  }
+
+  let {
+    class: className = "",
+    colors,
+    speed = 0.55,
+    intensity = 0.55,
+    height = 0.45,
+    interactive = true,
+    dither = false,
+    pixelSize = 1,
+    theme = "auto",
+  }: Props = $props()
+
+  let canvas: HTMLCanvasElement | undefined = $state()
+  let isDark = $state(false)
+  let instance: ShaderFireInstance | null = null
+
+  onMount(() => {
+    const sync = () => {
+      isDark = resolveDark(theme)
+    }
+    sync()
+    const mo = new MutationObserver(sync)
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    })
+    const mq = window.matchMedia("(prefers-color-scheme: dark)")
+    mq.addEventListener("change", sync)
+
+    if (!canvas) {
+      return () => {
+        mo.disconnect()
+        mq.removeEventListener("change", sync)
+      }
+    }
+    instance = createShaderFire(canvas, {
+      colors,
+      speed,
+      intensity,
+      height,
+      interactive,
+      dither,
+      pixelSize,
+      theme,
+      onThemeChange: (dark) => {
+        isDark = dark
+      },
+    })
+    return () => {
+      mo.disconnect()
+      mq.removeEventListener("change", sync)
+      instance?.destroy()
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    isDark = resolveDark(theme)
+  })
+
+  $effect(() => {
+    instance?.setOptions({
+      colors,
+      speed,
+      intensity,
+      height,
+      interactive,
+      dither,
+      pixelSize,
+      theme,
+    })
+  })
+
+  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)
+</script>
+
+<div
+  data-slot="shader-fire"
+  aria-hidden="true"
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+  style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
+>
+  <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
+</div>
diff --git a/registry/shader-fire/shader-fire.tsx b/registry/shader-fire/shader-fire.tsx
new file mode 100644
index 0000000..5fae2f1
--- /dev/null
+++ b/registry/shader-fire/shader-fire.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+
+import {
+  createShaderFire,
+  DARK_FALLBACK,
+  LIGHT_FALLBACK,
+  resolveDark,
+  type ShaderFireInstance,
+  type ShaderFireOptions,
+} from "./shader-fire-vanilla"
+
+export {
+  DARK_COLORS,
+  DARK_FALLBACK,
+  LIGHT_COLORS,
+  LIGHT_FALLBACK,
+} from "./shader-fire-vanilla"
+export type {
+  ShaderFireInstance,
+  ShaderFireOptions,
+  ShaderFireTheme,
+} from "./shader-fire-vanilla"
+
+export type ShaderFireProps = Omit<ShaderFireOptions, "onThemeChange"> & {
+  className?: string
+}
+
+/**
+ * Sparse 2D fire wash — tongues rise from the bottom behind UI.
+ * Theme-aware light / dusk.
+ */
+export function ShaderFire({
+  className,
+  colors,
+  speed = 0.55,
+  intensity = 0.55,
+  height = 0.45,
+  interactive = true,
+  dither = false,
+  pixelSize = 1,
+  theme = "auto",
+}: ShaderFireProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const instanceRef = useRef<ShaderFireInstance | null>(null)
+  const [isDark, setIsDark] = useState(false)
+
+  useEffect(() => {
+    const sync = () => setIsDark(resolveDark(theme))
+    sync()
+    const mo = new MutationObserver(sync)
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    })
+    const mq = window.matchMedia("(prefers-color-scheme: dark)")
+    mq.addEventListener("change", sync)
+    return () => {
+      mo.disconnect()
+      mq.removeEventListener("change", sync)
+    }
+  }, [theme])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    instanceRef.current = createShaderFire(canvas, {
+      colors,
+      speed,
+      intensity,
+      height,
+      interactive,
+      dither,
+      pixelSize,
+      theme,
+      onThemeChange: setIsDark,
+    })
+    return () => {
+      instanceRef.current?.destroy()
+      instanceRef.current = null
+    }
+    // Engine reads live options via setOptions; mount once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    instanceRef.current?.setOptions({
+      colors,
+      speed,
+      intensity,
+      height,
+      interactive,
+      dither,
+      pixelSize,
+      theme,
+      onThemeChange: setIsDark,
+    })
+  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])
+
+  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK
+
+  return (
+    <div
+      data-slot="shader-fire"
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 overflow-hidden",
+        className
+      )}
+      style={{
+        backgroundColor: fallback.backgroundColor,
+        backgroundImage: fallback.backgroundImage,
+      }}
+    >
+      <canvas ref={canvasRef} className="absolute inset-0 size-full" />
+    </div>
+  )
+}
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index 73d9b23..b570dee 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -92,7 +92,8 @@ flowchart TD
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
   atmo -->|Quiet wash| sg[shader-gradient]
-  atmo -->|Fire from the bottom| sf[shader-anime-fire]
+  atmo -->|Cel-shaded fire from the bottom| saf[shader-anime-fire]
+  atmo -->|Soft fire wash from the bottom| sf[shader-fire]
   atmo -->|Sky or rain, optional glass| ss[shader-sky]
   atmo -->|ASCII mouse trails| af[ascii-fluid]
   atmo -->|Hyperspace streaks, scroll warp| rl[radiant-lines]
@@ -110,6 +111,7 @@ Disambiguation that agents get wrong:
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
 | Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
 | Fire, embers, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| Quiet heat wash behind copy | `shader-fire` | `shader-anime-fire` when it should be the show |
 | 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
 | Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) |
@@ -132,7 +134,7 @@ Backgrounds and shaders fill the parent. They do not create a page.
 </section>
 ```
 
-Same shell for `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
+Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
 
 `RadiantLines` is transparent and warps with scroll. Inside an overflow div, pass the scroller (`containerRef` in React, `container` in Svelte) and make the canvas `sticky top-0 h-svh`. Omit the scroller to use the window.
 
@@ -153,7 +155,7 @@ That matches shadcn / `next-themes` with `attribute="class"`. There is no shared
 
 Exceptions:
 
-- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
+- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
 - `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
 - `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
@@ -172,6 +174,7 @@ Categories match `content/docs/components/meta.json`.
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
 | `shader-anime-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
+| `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index 73382bc..a8de6e0 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -170,6 +170,28 @@ type ShaderAnimeFireProps = {
 
 Same `colors ?? theme palette` rule. Fallbacks exported as `LIGHT_FALLBACK` / `DARK_FALLBACK`.
 
+## shader-fire
+
+```ts
+type ShaderFireProps = {
+  colors?: string[] // ember, flame, highlight
+  speed?: number // 0.55
+  intensity?: number // 0.55
+  height?: number // 0.45
+  interactive?: boolean // true
+  dither?: boolean // false
+  pixelSize?: number // 1
+  theme?: "light" | "dark" | "auto"
+  className?: string
+}
+```
+
+`LIGHT_COLORS`: `#9C3A24`, `#C96A32`, `#E6C4A0`.
+
+`DARK_COLORS`: `#A33A18`, `#D4682A`, `#E8B45A`.
+
+Same `colors ?? theme palette` rule. Fallbacks exported as `LIGHT_FALLBACK` / `DARK_FALLBACK`.
+
 ## shader-sky
 
 ```ts
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index 6f085ad..69b7c79 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -149,7 +149,7 @@ Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Embe
 
 Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
 
-Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
+Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). A quiet wash (`shader-fire`).
 
 Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
@@ -169,6 +169,32 @@ export function Hero() {
 
 Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. `embers={0}` turns sparks off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
 
+## shader-fire
+
+Shader. Sparse tongues from the bottom edge. Ember / flame / highlight.
+
+Best fit: heat behind a hero. `dither` turns the wash into Bayer pixels.
+
+Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). Bold graphic flames (`shader-anime-fire`).
+
+Deps: none. Key props: `colors`, `speed` (0.55), `intensity` (0.55), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+
+```tsx
+"use client"
+import { ShaderFire } from "@/components/ui/shader-fire"
+
+export function Hero() {
+  return (
+    <section className="relative isolate min-h-svh overflow-hidden bg-background">
+      <ShaderFire />
+      <div className="relative z-10 p-10">Your content</div>
+    </section>
+  )
+}
+```
+
+Pitfalls: `interactive` adds heat under the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#9C3A24 #C96A32 #E6C4A0`. Dark `#A33A18 #D4682A #E8B45A`.
+
 ## shader-sky
 
 Shader. Daytime clouds, or a gray rain ceiling in dark mode. Optional dotted glass film.
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index 42d5bb9..463b4c9 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -34,6 +34,7 @@ Swap the component, keep the shell:
 | --- | --- | --- |
 | Fire along the floor | `ShaderAnimeFire` | `height={0.45}` |
 | Pixel fire | `ShaderAnimeFire` | `dither pixelSize={3}` |
+| Soft heat wash | `ShaderFire` | defaults |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |

From 4fbac12748bee90b64882e765404b770bf07b5c8 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:39:22 +0530
Subject: [PATCH 31/49] Keep shader corners rounded in Firefox.

Zen and other Firefox builds can hand an opaque WebGL canvas straight
to the system compositor, which ignores rounded clips, so every shader
showed square corners there while Chrome rounded them. Each WebGL
background (Shader Gradient, Anime Fire, Fire, Sky and ASCII Fluid)
now inherits its parent's radius and carries a solid mask on its root,
which keeps the canvas in the page's own layer so the radius holds.
---
 components/monitor-feeds.tsx                        |  4 +++-
 public/r/ascii-fluid-svelte.json                    |  2 +-
 public/r/ascii-fluid.json                           |  2 +-
 public/r/shader-anime-fire-svelte.json              |  2 +-
 public/r/shader-anime-fire.json                     |  2 +-
 public/r/shader-fire-svelte.json                    |  2 +-
 public/r/shader-fire.json                           |  2 +-
 public/r/shader-gradient-svelte.json                |  2 +-
 public/r/shader-gradient.json                       |  2 +-
 public/r/shader-sky-svelte.json                     |  2 +-
 public/r/shader-sky.json                            |  2 +-
 registry/ascii-fluid/ascii-fluid.svelte             |  7 +++++--
 registry/ascii-fluid/ascii-fluid.tsx                | 10 ++++++++--
 registry/shader-anime-fire/shader-anime-fire.svelte |  5 ++++-
 registry/shader-anime-fire/shader-anime-fire.tsx    | 12 ++++++++----
 registry/shader-fire/shader-fire.svelte             |  7 +++++--
 registry/shader-fire/shader-fire.tsx                | 10 ++++++++--
 registry/shader-gradient/shader-gradient.svelte     |  7 +++++--
 registry/shader-gradient/shader-gradient.tsx        | 10 ++++++++--
 registry/shader-sky/shader-sky.svelte               |  7 +++++--
 registry/shader-sky/shader-sky.tsx                  | 10 ++++++++--
 21 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/components/monitor-feeds.tsx b/components/monitor-feeds.tsx
index cf5ad23..db3e39a 100644
--- a/components/monitor-feeds.tsx
+++ b/components/monitor-feeds.tsx
@@ -43,7 +43,9 @@ const RadiantLines = feed(() =>
   import("@/registry/radiant-lines/radiant-lines").then((m) => m.RadiantLines)
 )
 const ShaderAnimeFire = feed(() =>
-  import("@/registry/shader-anime-fire/shader-anime-fire").then((m) => m.ShaderAnimeFire)
+  import("@/registry/shader-anime-fire/shader-anime-fire").then(
+    (m) => m.ShaderAnimeFire
+  )
 )
 const ShaderFire = feed(() =>
   import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
diff --git a/public/r/ascii-fluid-svelte.json b/public/r/ascii-fluid-svelte.json
index e13ece7..ca5afd1 100644
--- a/public/r/ascii-fluid-svelte.json
+++ b/public/r/ascii-fluid-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/ascii-fluid/ascii-fluid.svelte",
-      "content": "<script module lang=\"ts\">\nexport type AsciiFluidTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type AsciiFluidOptions = {\n  /**\n   * Brightness ramp (sparse → dense). Default is a full letter/symbol map.\n   */\n  charset?: string\n  /** Glyph cell size in CSS pixels. Default `12` */\n  cellSize?: number\n  /** Ink color (hex). Default follows theme. */\n  color?: string\n  /** Stage color (hex). Default follows theme. */\n  backgroundColor?: string\n  /** Mouse trail / fluid force. Default `1` */\n  force?: number\n  /** How quickly trails fade (higher = vanish sooner). Default `0.05` */\n  dissipation?: number\n  /** Trail brush size 0–1. Default `0.55` */\n  brush?: number\n  /** Soft ambient swirl when idle. Default `true` */\n  animate?: boolean\n  /** Follow pointer. Default `true` */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: AsciiFluidTheme\n}\n\nexport type AsciiFluidInstance = {\n  setOptions: (options: Partial<AsciiFluidOptions>) => void\n  destroy: () => void\n}\n\n/** Sparse → dense brightness ramp (letters + symbols). */\nexport const DEFAULT_CHARSET =\n  \" .'`^\\\",:;Il!i><~+_-?][}{1)(|\\\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\"\n\nconst LIGHT = { ink: \"#18181b\", paper: \"#fafafa\" }\nconst DARK = { ink: \"#e4e4e7\", paper: \"#09090b\" }\n\nconst VERT = `\nattribute vec2 a_position;\nvarying vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\n// Velocity / dye stored biased in RGBA8: enc(v) = v * 0.05 + 0.5\nconst FRAG_SPLAT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_target;\nuniform vec2 u_point;\nuniform vec3 u_color;\nuniform float u_radius;\nuniform float u_aspect;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 p = v_uv - u_point;\n  p.x *= u_aspect;\n  float d = exp(-dot(p, p) / max(u_radius, 0.0001));\n  vec3 base = texture2D(u_target, v_uv).xyz;\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(base.xy) + u_color.xy * d;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(base + u_color * d, 1.0);\n  }\n}\n`\n\nconst FRAG_ADVECT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform sampler2D u_source;\nuniform vec2 u_texel;\nuniform float u_dt;\nuniform float u_dissipation;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vec2 coord = v_uv - u_dt * vel * u_texel * 110.0;\n  vec4 src = texture2D(u_source, clamp(coord, 0.0, 1.0));\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(src.xy) * u_dissipation;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(src.xyz * u_dissipation, 1.0);\n  }\n}\n`\n\nconst FRAG_DIVERGENCE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\n\nvoid main() {\n  float L = dec(texture2D(u_velocity, v_uv - vec2(u_texel.x, 0.0)).xy).x;\n  float R = dec(texture2D(u_velocity, v_uv + vec2(u_texel.x, 0.0)).xy).x;\n  float B = dec(texture2D(u_velocity, v_uv - vec2(0.0, u_texel.y)).xy).y;\n  float T = dec(texture2D(u_velocity, v_uv + vec2(0.0, u_texel.y)).xy).y;\n  float div = 0.5 * ((R - L) + (T - B));\n  gl_FragColor = vec4(div * 0.05 + 0.5, 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_PRESSURE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_divergence;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nfloat enc1(float v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  float C = dec1(texture2D(u_divergence, v_uv).x);\n  float p = (L + R + B + T - C) * 0.25;\n  gl_FragColor = vec4(enc1(p), 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_GRADIENT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vel -= vec2(R - L, T - B) * 0.5;\n  gl_FragColor = vec4(enc(vel), 0.5, 1.0);\n}\n`\n\nconst FRAG_DISPLAY = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_dye;\nuniform sampler2D u_atlas;\nuniform vec2 u_resolution;\nuniform vec2 u_cell;\nuniform float u_charCount;\nuniform vec3 u_ink;\nuniform vec3 u_paper;\nuniform float u_time;\nuniform float u_animate;\n\nfloat hash21(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\n}\n\nvoid main() {\n  vec2 pixel = v_uv * u_resolution;\n  vec2 cell = floor(pixel / u_cell);\n  vec2 cellUv = (cell + 0.5) * u_cell / u_resolution;\n\n  float dens = clamp(texture2D(u_dye, cellUv).x, 0.0, 1.0);\n\n  // Soft neighborhood sample for a low-res glow halo under the glyphs\n  vec2 texel = u_cell / u_resolution;\n  float glow =\n    dens * 0.40 +\n    texture2D(u_dye, cellUv + vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv + vec2(0.0,  texel.y)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2(0.0,  texel.y)).x * 0.15;\n  glow = clamp(glow, 0.0, 1.0);\n  glow = pow(glow, 1.35);\n\n  float lit = dens;\n  if (u_animate > 0.5) {\n    float flicker = hash21(cell + floor(u_time * 10.0)) - 0.5;\n    lit = clamp(lit + flicker * 0.05, 0.0, 1.0);\n  }\n\n  float idx = min(floor(lit * (u_charCount - 0.001)), u_charCount - 1.0);\n  vec2 local = fract(pixel / u_cell);\n  float u0 = (idx + local.x) / u_charCount;\n  float glyph = texture2D(u_atlas, vec2(u0, local.y)).r;\n\n  float alpha = glyph * smoothstep(0.02, 0.12, dens);\n\n  // Paper → soft ink wash → sharp ASCII on top\n  float wash = glow * 0.22;\n  vec3 col = mix(u_paper, u_ink, wash);\n  col = mix(col, u_ink, clamp(alpha, 0.0, 1.0));\n  gl_FragColor = vec4(col, 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.1, 0.1, 0.12]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\nfunction isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nfunction resolveDark(theme: AsciiFluidTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vs: WebGLShader,\n  fragSource: string\n) {\n  const fs = compile(gl, gl.FRAGMENT_SHADER, fragSource)\n  if (!fs) return null\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(fs)\n    return null\n  }\n  return { program, fs }\n}\n\ntype FBO = {\n  tex: WebGLTexture\n  fbo: WebGLFramebuffer\n  w: number\n  h: number\n}\n\nfunction createFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n): FBO | null {\n  const tex = gl.createTexture()\n  const fbo = gl.createFramebuffer()\n  if (!tex || !fbo) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    w,\n    h,\n    0,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    null\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)\n  gl.framebufferTexture2D(\n    gl.FRAMEBUFFER,\n    gl.COLOR_ATTACHMENT0,\n    gl.TEXTURE_2D,\n    tex,\n    0\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n  return { tex, fbo, w, h }\n}\n\nfunction createDoubleFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n) {\n  const a = createFBO(gl, w, h, filter)\n  const b = createFBO(gl, w, h, filter)\n  if (!a || !b) return null\n  return {\n    read: a,\n    write: b,\n    swap() {\n      const t = this.read\n      this.read = this.write\n      this.write = t\n    },\n  }\n}\n\nfunction buildAtlas(\n  gl: WebGLRenderingContext,\n  charset: string\n): { tex: WebGLTexture; count: number } | null {\n  const count = Math.max(charset.length, 1)\n  const size = 64\n  const atlasCanvas = document.createElement(\"canvas\")\n  atlasCanvas.width = size * count\n  atlasCanvas.height = size\n  const ctx = atlasCanvas.getContext(\"2d\")\n  if (!ctx) return null\n  ctx.fillStyle = \"#000\"\n  ctx.fillRect(0, 0, atlasCanvas.width, atlasCanvas.height)\n  ctx.fillStyle = \"#fff\"\n  ctx.font = `700 ${Math.floor(size * 0.72)}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  for (let i = 0; i < count; i++) {\n    const ch = charset[i] ?? \" \"\n    if (ch === \" \") continue\n    ctx.fillText(ch, size * (i + 0.5), size * 0.55)\n  }\n\n  const tex = gl.createTexture()\n  if (!tex) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    atlasCanvas\n  )\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0)\n  return { tex, count }\n}\n\n/**\n * ASCII fluid background — pointer trails leave ink that swirls and\n * quantizes to a clean brightness-mapped glyph field. Zero deps.\n */\nexport function createAsciiFluid(\n  canvas: HTMLCanvasElement,\n  initial: AsciiFluidOptions = {}\n): AsciiFluidInstance | null {\n  let options: Required<\n    Pick<\n      AsciiFluidOptions,\n      | \"charset\"\n      | \"cellSize\"\n      | \"force\"\n      | \"dissipation\"\n      | \"brush\"\n      | \"animate\"\n      | \"interactive\"\n      | \"theme\"\n    >\n  > &\n    AsciiFluidOptions = {\n    charset: DEFAULT_CHARSET,\n    cellSize: 12,\n    force: 1,\n    dissipation: 0.05,\n    brush: 0.55,\n    animate: true,\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = {\n    x: 0.5,\n    y: 0.5,\n    dx: 0,\n    dy: 0,\n    moved: false,\n    inside: false,\n  }\n  let reduce = false\n  let currentCharset = \"\"\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n    preserveDrawingBuffer: false,\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  if (!vs) return null\n\n  const splat = createProgram(gl, vs, FRAG_SPLAT)\n  const advect = createProgram(gl, vs, FRAG_ADVECT)\n  const divergence = createProgram(gl, vs, FRAG_DIVERGENCE)\n  const pressure = createProgram(gl, vs, FRAG_PRESSURE)\n  const gradient = createProgram(gl, vs, FRAG_GRADIENT)\n  const display = createProgram(gl, vs, FRAG_DISPLAY)\n  if (!splat || !advect || !divergence || !pressure || !gradient || !display) {\n    return null\n  }\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n\n  const bindQuad = (program: WebGLProgram) => {\n    gl.useProgram(program)\n    const loc = gl.getAttribLocation(program, \"a_position\")\n    gl.enableVertexAttribArray(loc)\n    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n  }\n\n  const SIM = 180\n  const velocity = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const dye = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const pressureFbo = createDoubleFBO(gl, SIM, SIM, gl.NEAREST)\n  const divergenceFbo = createFBO(gl, SIM, SIM, gl.NEAREST)\n  if (!velocity || !dye || !pressureFbo || !divergenceFbo) return null\n\n  const initialAtlas = buildAtlas(gl, options.charset)\n  if (!initialAtlas) return null\n  let atlas = initialAtlas\n  currentCharset = options.charset\n\n  const blit = (target: FBO | null) => {\n    if (target) {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo)\n      gl.viewport(0, 0, target.w, target.h)\n    } else {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n      gl.viewport(0, 0, canvas.width, canvas.height)\n    }\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n  }\n\n  const clearFbo = (fbo: FBO, r = 0, g = 0, b = 0) => {\n    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.fbo)\n    gl.viewport(0, 0, fbo.w, fbo.h)\n    gl.clearColor(r, g, b, 1)\n    gl.clear(gl.COLOR_BUFFER_BIT)\n  }\n\n  clearFbo(velocity.read, 0.5, 0.5, 0.5)\n  clearFbo(velocity.write, 0.5, 0.5, 0.5)\n  clearFbo(dye.read)\n  clearFbo(dye.write)\n\n  let raf = 0\n  let running = true\n  let last = performance.now()\n  const start = last\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const onPointer = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    mouse.inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    mouse.dx = x - mouse.x\n    mouse.dy = y - mouse.y\n    mouse.x = x\n    mouse.y = y\n    mouse.moved = true\n  }\n  const onLeave = () => {\n    mouse.inside = false\n  }\n\n  window.addEventListener(\"pointermove\", onPointer, { passive: true })\n  const parentEl = canvas.parentElement\n  parentEl?.addEventListener(\"pointerleave\", onLeave, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min((now - last) / 1000, 0.033)\n    last = now\n    const time = (now - start) / 1000\n    const p = options\n\n    if (p.charset !== currentCharset) {\n      const next = buildAtlas(gl, p.charset)\n      if (next) {\n        gl.deleteTexture(atlas.tex)\n        atlas = next\n        currentCharset = p.charset\n      }\n    }\n\n    const dark = resolveDark(p.theme)\n    const ink = hexToRgb(p.color ?? (dark ? DARK.ink : LIGHT.ink))\n    const paper = hexToRgb(\n      p.backgroundColor ?? (dark ? DARK.paper : LIGHT.paper)\n    )\n    const texel = [1 / SIM, 1 / SIM] as const\n    const aspect = canvas.width / Math.max(canvas.height, 1)\n    const brushR = 0.00012 + Math.max(0.05, Math.min(1, p.brush)) * 0.0011\n\n    if (p.interactive && mouse.moved && mouse.inside && !reduce) {\n      const speed = Math.hypot(mouse.dx, mouse.dy)\n      const strength = p.force * (18 + speed * 120)\n\n      // Velocity trail\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        mouse.dx * strength,\n        mouse.dy * strength,\n        0\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), brushR)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      // Dye trail — denser with speed so fast moves write brighter glyphs\n      const dyeAmt = Math.min(1.4, 0.45 + speed * 8) * p.force\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        dyeAmt,\n        0,\n        0\n      )\n      gl.uniform1f(\n        gl.getUniformLocation(splat.program, \"u_radius\"),\n        brushR * 1.15\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n\n      mouse.moved = false\n      mouse.dx = 0\n      mouse.dy = 0\n    }\n\n    // Soft ambient swirl so the field never fully dies when idle\n    if (p.animate && !reduce && !mouse.inside) {\n      const ax = Math.sin(time * 0.55) * 0.22\n      const ay = Math.cos(time * 0.42) * 0.22\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        0.5 + Math.sin(time * 0.23) * 0.22,\n        0.5 + Math.cos(time * 0.19) * 0.18\n      )\n      gl.uniform3f(gl.getUniformLocation(splat.program, \"u_color\"), ax, ay, 0)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), 0.0018)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n    }\n\n    if (!reduce) {\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.18, p.dissipation * 2.5)\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(divergence.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(divergence.program, \"u_velocity\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(divergence.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(divergenceFbo)\n\n      clearFbo(pressureFbo.read, 0.5, 0.5, 0.5)\n      clearFbo(pressureFbo.write, 0.5, 0.5, 0.5)\n      bindQuad(pressure.program)\n      for (let i = 0; i < 14; i++) {\n        gl.activeTexture(gl.TEXTURE0)\n        gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_pressure\"), 0)\n        gl.activeTexture(gl.TEXTURE1)\n        gl.bindTexture(gl.TEXTURE_2D, divergenceFbo.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_divergence\"), 1)\n        gl.uniform2f(\n          gl.getUniformLocation(pressure.program, \"u_texel\"),\n          texel[0],\n          texel[1]\n        )\n        blit(pressureFbo.write)\n        pressureFbo.swap()\n      }\n\n      bindQuad(gradient.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_pressure\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_velocity\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(gradient.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.22, Math.max(0.02, p.dissipation))\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n    }\n\n    bindQuad(display.program)\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_dye\"), 0)\n    gl.activeTexture(gl.TEXTURE1)\n    gl.bindTexture(gl.TEXTURE_2D, atlas.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_atlas\"), 1)\n    gl.uniform2f(\n      gl.getUniformLocation(display.program, \"u_resolution\"),\n      canvas.width,\n      canvas.height\n    )\n    const cell =\n      Math.max(7, p.cellSize) * Math.min(window.devicePixelRatio || 1, 2)\n    gl.uniform2f(gl.getUniformLocation(display.program, \"u_cell\"), cell, cell)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_charCount\"),\n      atlas.count\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_ink\"),\n      ink[0],\n      ink[1],\n      ink[2]\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_paper\"),\n      paper[0],\n      paper[1],\n      paper[2]\n    )\n    gl.uniform1f(gl.getUniformLocation(display.program, \"u_time\"), time)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_animate\"),\n      p.animate && !reduce ? 1 : 0\n    )\n    blit(null)\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      window.removeEventListener(\"pointermove\", onPointer)\n      parentEl?.removeEventListener(\"pointerleave\", onLeave)\n      gl.deleteProgram(splat.program)\n      gl.deleteProgram(advect.program)\n      gl.deleteProgram(divergence.program)\n      gl.deleteProgram(pressure.program)\n      gl.deleteProgram(gradient.program)\n      gl.deleteProgram(display.program)\n      gl.deleteShader(vs)\n      gl.deleteShader(splat.fs)\n      gl.deleteShader(advect.fs)\n      gl.deleteShader(divergence.fs)\n      gl.deleteShader(pressure.fs)\n      gl.deleteShader(gradient.fs)\n      gl.deleteShader(display.fs)\n      gl.deleteBuffer(buf)\n      gl.deleteTexture(atlas.tex)\n      for (const f of [\n        velocity.read,\n        velocity.write,\n        dye.read,\n        dye.write,\n        pressureFbo.read,\n        pressureFbo.write,\n        divergenceFbo,\n      ]) {\n        gl.deleteTexture(f.tex)\n        gl.deleteFramebuffer(f.fbo)\n      }\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends AsciiFluidOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    charset = DEFAULT_CHARSET,\n    cellSize = 12,\n    color,\n    backgroundColor,\n    force = 1,\n    dissipation = 0.05,\n    brush = 0.55,\n    animate = true,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: AsciiFluidInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createAsciiFluid(canvas, {\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"ascii-fluid\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type AsciiFluidTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type AsciiFluidOptions = {\n  /**\n   * Brightness ramp (sparse → dense). Default is a full letter/symbol map.\n   */\n  charset?: string\n  /** Glyph cell size in CSS pixels. Default `12` */\n  cellSize?: number\n  /** Ink color (hex). Default follows theme. */\n  color?: string\n  /** Stage color (hex). Default follows theme. */\n  backgroundColor?: string\n  /** Mouse trail / fluid force. Default `1` */\n  force?: number\n  /** How quickly trails fade (higher = vanish sooner). Default `0.05` */\n  dissipation?: number\n  /** Trail brush size 0–1. Default `0.55` */\n  brush?: number\n  /** Soft ambient swirl when idle. Default `true` */\n  animate?: boolean\n  /** Follow pointer. Default `true` */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: AsciiFluidTheme\n}\n\nexport type AsciiFluidInstance = {\n  setOptions: (options: Partial<AsciiFluidOptions>) => void\n  destroy: () => void\n}\n\n/** Sparse → dense brightness ramp (letters + symbols). */\nexport const DEFAULT_CHARSET =\n  \" .'`^\\\",:;Il!i><~+_-?][}{1)(|\\\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\"\n\nconst LIGHT = { ink: \"#18181b\", paper: \"#fafafa\" }\nconst DARK = { ink: \"#e4e4e7\", paper: \"#09090b\" }\n\nconst VERT = `\nattribute vec2 a_position;\nvarying vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\n// Velocity / dye stored biased in RGBA8: enc(v) = v * 0.05 + 0.5\nconst FRAG_SPLAT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_target;\nuniform vec2 u_point;\nuniform vec3 u_color;\nuniform float u_radius;\nuniform float u_aspect;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 p = v_uv - u_point;\n  p.x *= u_aspect;\n  float d = exp(-dot(p, p) / max(u_radius, 0.0001));\n  vec3 base = texture2D(u_target, v_uv).xyz;\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(base.xy) + u_color.xy * d;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(base + u_color * d, 1.0);\n  }\n}\n`\n\nconst FRAG_ADVECT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform sampler2D u_source;\nuniform vec2 u_texel;\nuniform float u_dt;\nuniform float u_dissipation;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vec2 coord = v_uv - u_dt * vel * u_texel * 110.0;\n  vec4 src = texture2D(u_source, clamp(coord, 0.0, 1.0));\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(src.xy) * u_dissipation;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(src.xyz * u_dissipation, 1.0);\n  }\n}\n`\n\nconst FRAG_DIVERGENCE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\n\nvoid main() {\n  float L = dec(texture2D(u_velocity, v_uv - vec2(u_texel.x, 0.0)).xy).x;\n  float R = dec(texture2D(u_velocity, v_uv + vec2(u_texel.x, 0.0)).xy).x;\n  float B = dec(texture2D(u_velocity, v_uv - vec2(0.0, u_texel.y)).xy).y;\n  float T = dec(texture2D(u_velocity, v_uv + vec2(0.0, u_texel.y)).xy).y;\n  float div = 0.5 * ((R - L) + (T - B));\n  gl_FragColor = vec4(div * 0.05 + 0.5, 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_PRESSURE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_divergence;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nfloat enc1(float v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  float C = dec1(texture2D(u_divergence, v_uv).x);\n  float p = (L + R + B + T - C) * 0.25;\n  gl_FragColor = vec4(enc1(p), 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_GRADIENT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vel -= vec2(R - L, T - B) * 0.5;\n  gl_FragColor = vec4(enc(vel), 0.5, 1.0);\n}\n`\n\nconst FRAG_DISPLAY = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_dye;\nuniform sampler2D u_atlas;\nuniform vec2 u_resolution;\nuniform vec2 u_cell;\nuniform float u_charCount;\nuniform vec3 u_ink;\nuniform vec3 u_paper;\nuniform float u_time;\nuniform float u_animate;\n\nfloat hash21(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\n}\n\nvoid main() {\n  vec2 pixel = v_uv * u_resolution;\n  vec2 cell = floor(pixel / u_cell);\n  vec2 cellUv = (cell + 0.5) * u_cell / u_resolution;\n\n  float dens = clamp(texture2D(u_dye, cellUv).x, 0.0, 1.0);\n\n  // Soft neighborhood sample for a low-res glow halo under the glyphs\n  vec2 texel = u_cell / u_resolution;\n  float glow =\n    dens * 0.40 +\n    texture2D(u_dye, cellUv + vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv + vec2(0.0,  texel.y)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2(0.0,  texel.y)).x * 0.15;\n  glow = clamp(glow, 0.0, 1.0);\n  glow = pow(glow, 1.35);\n\n  float lit = dens;\n  if (u_animate > 0.5) {\n    float flicker = hash21(cell + floor(u_time * 10.0)) - 0.5;\n    lit = clamp(lit + flicker * 0.05, 0.0, 1.0);\n  }\n\n  float idx = min(floor(lit * (u_charCount - 0.001)), u_charCount - 1.0);\n  vec2 local = fract(pixel / u_cell);\n  float u0 = (idx + local.x) / u_charCount;\n  float glyph = texture2D(u_atlas, vec2(u0, local.y)).r;\n\n  float alpha = glyph * smoothstep(0.02, 0.12, dens);\n\n  // Paper → soft ink wash → sharp ASCII on top\n  float wash = glow * 0.22;\n  vec3 col = mix(u_paper, u_ink, wash);\n  col = mix(col, u_ink, clamp(alpha, 0.0, 1.0));\n  gl_FragColor = vec4(col, 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.1, 0.1, 0.12]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\nfunction isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nfunction resolveDark(theme: AsciiFluidTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vs: WebGLShader,\n  fragSource: string\n) {\n  const fs = compile(gl, gl.FRAGMENT_SHADER, fragSource)\n  if (!fs) return null\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(fs)\n    return null\n  }\n  return { program, fs }\n}\n\ntype FBO = {\n  tex: WebGLTexture\n  fbo: WebGLFramebuffer\n  w: number\n  h: number\n}\n\nfunction createFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n): FBO | null {\n  const tex = gl.createTexture()\n  const fbo = gl.createFramebuffer()\n  if (!tex || !fbo) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    w,\n    h,\n    0,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    null\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)\n  gl.framebufferTexture2D(\n    gl.FRAMEBUFFER,\n    gl.COLOR_ATTACHMENT0,\n    gl.TEXTURE_2D,\n    tex,\n    0\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n  return { tex, fbo, w, h }\n}\n\nfunction createDoubleFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n) {\n  const a = createFBO(gl, w, h, filter)\n  const b = createFBO(gl, w, h, filter)\n  if (!a || !b) return null\n  return {\n    read: a,\n    write: b,\n    swap() {\n      const t = this.read\n      this.read = this.write\n      this.write = t\n    },\n  }\n}\n\nfunction buildAtlas(\n  gl: WebGLRenderingContext,\n  charset: string\n): { tex: WebGLTexture; count: number } | null {\n  const count = Math.max(charset.length, 1)\n  const size = 64\n  const atlasCanvas = document.createElement(\"canvas\")\n  atlasCanvas.width = size * count\n  atlasCanvas.height = size\n  const ctx = atlasCanvas.getContext(\"2d\")\n  if (!ctx) return null\n  ctx.fillStyle = \"#000\"\n  ctx.fillRect(0, 0, atlasCanvas.width, atlasCanvas.height)\n  ctx.fillStyle = \"#fff\"\n  ctx.font = `700 ${Math.floor(size * 0.72)}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  for (let i = 0; i < count; i++) {\n    const ch = charset[i] ?? \" \"\n    if (ch === \" \") continue\n    ctx.fillText(ch, size * (i + 0.5), size * 0.55)\n  }\n\n  const tex = gl.createTexture()\n  if (!tex) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    atlasCanvas\n  )\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0)\n  return { tex, count }\n}\n\n/**\n * ASCII fluid background — pointer trails leave ink that swirls and\n * quantizes to a clean brightness-mapped glyph field. Zero deps.\n */\nexport function createAsciiFluid(\n  canvas: HTMLCanvasElement,\n  initial: AsciiFluidOptions = {}\n): AsciiFluidInstance | null {\n  let options: Required<\n    Pick<\n      AsciiFluidOptions,\n      | \"charset\"\n      | \"cellSize\"\n      | \"force\"\n      | \"dissipation\"\n      | \"brush\"\n      | \"animate\"\n      | \"interactive\"\n      | \"theme\"\n    >\n  > &\n    AsciiFluidOptions = {\n    charset: DEFAULT_CHARSET,\n    cellSize: 12,\n    force: 1,\n    dissipation: 0.05,\n    brush: 0.55,\n    animate: true,\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = {\n    x: 0.5,\n    y: 0.5,\n    dx: 0,\n    dy: 0,\n    moved: false,\n    inside: false,\n  }\n  let reduce = false\n  let currentCharset = \"\"\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n    preserveDrawingBuffer: false,\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  if (!vs) return null\n\n  const splat = createProgram(gl, vs, FRAG_SPLAT)\n  const advect = createProgram(gl, vs, FRAG_ADVECT)\n  const divergence = createProgram(gl, vs, FRAG_DIVERGENCE)\n  const pressure = createProgram(gl, vs, FRAG_PRESSURE)\n  const gradient = createProgram(gl, vs, FRAG_GRADIENT)\n  const display = createProgram(gl, vs, FRAG_DISPLAY)\n  if (!splat || !advect || !divergence || !pressure || !gradient || !display) {\n    return null\n  }\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n\n  const bindQuad = (program: WebGLProgram) => {\n    gl.useProgram(program)\n    const loc = gl.getAttribLocation(program, \"a_position\")\n    gl.enableVertexAttribArray(loc)\n    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n  }\n\n  const SIM = 180\n  const velocity = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const dye = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const pressureFbo = createDoubleFBO(gl, SIM, SIM, gl.NEAREST)\n  const divergenceFbo = createFBO(gl, SIM, SIM, gl.NEAREST)\n  if (!velocity || !dye || !pressureFbo || !divergenceFbo) return null\n\n  const initialAtlas = buildAtlas(gl, options.charset)\n  if (!initialAtlas) return null\n  let atlas = initialAtlas\n  currentCharset = options.charset\n\n  const blit = (target: FBO | null) => {\n    if (target) {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo)\n      gl.viewport(0, 0, target.w, target.h)\n    } else {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n      gl.viewport(0, 0, canvas.width, canvas.height)\n    }\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n  }\n\n  const clearFbo = (fbo: FBO, r = 0, g = 0, b = 0) => {\n    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.fbo)\n    gl.viewport(0, 0, fbo.w, fbo.h)\n    gl.clearColor(r, g, b, 1)\n    gl.clear(gl.COLOR_BUFFER_BIT)\n  }\n\n  clearFbo(velocity.read, 0.5, 0.5, 0.5)\n  clearFbo(velocity.write, 0.5, 0.5, 0.5)\n  clearFbo(dye.read)\n  clearFbo(dye.write)\n\n  let raf = 0\n  let running = true\n  let last = performance.now()\n  const start = last\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const onPointer = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    mouse.inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    mouse.dx = x - mouse.x\n    mouse.dy = y - mouse.y\n    mouse.x = x\n    mouse.y = y\n    mouse.moved = true\n  }\n  const onLeave = () => {\n    mouse.inside = false\n  }\n\n  window.addEventListener(\"pointermove\", onPointer, { passive: true })\n  const parentEl = canvas.parentElement\n  parentEl?.addEventListener(\"pointerleave\", onLeave, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min((now - last) / 1000, 0.033)\n    last = now\n    const time = (now - start) / 1000\n    const p = options\n\n    if (p.charset !== currentCharset) {\n      const next = buildAtlas(gl, p.charset)\n      if (next) {\n        gl.deleteTexture(atlas.tex)\n        atlas = next\n        currentCharset = p.charset\n      }\n    }\n\n    const dark = resolveDark(p.theme)\n    const ink = hexToRgb(p.color ?? (dark ? DARK.ink : LIGHT.ink))\n    const paper = hexToRgb(\n      p.backgroundColor ?? (dark ? DARK.paper : LIGHT.paper)\n    )\n    const texel = [1 / SIM, 1 / SIM] as const\n    const aspect = canvas.width / Math.max(canvas.height, 1)\n    const brushR = 0.00012 + Math.max(0.05, Math.min(1, p.brush)) * 0.0011\n\n    if (p.interactive && mouse.moved && mouse.inside && !reduce) {\n      const speed = Math.hypot(mouse.dx, mouse.dy)\n      const strength = p.force * (18 + speed * 120)\n\n      // Velocity trail\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        mouse.dx * strength,\n        mouse.dy * strength,\n        0\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), brushR)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      // Dye trail — denser with speed so fast moves write brighter glyphs\n      const dyeAmt = Math.min(1.4, 0.45 + speed * 8) * p.force\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        dyeAmt,\n        0,\n        0\n      )\n      gl.uniform1f(\n        gl.getUniformLocation(splat.program, \"u_radius\"),\n        brushR * 1.15\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n\n      mouse.moved = false\n      mouse.dx = 0\n      mouse.dy = 0\n    }\n\n    // Soft ambient swirl so the field never fully dies when idle\n    if (p.animate && !reduce && !mouse.inside) {\n      const ax = Math.sin(time * 0.55) * 0.22\n      const ay = Math.cos(time * 0.42) * 0.22\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        0.5 + Math.sin(time * 0.23) * 0.22,\n        0.5 + Math.cos(time * 0.19) * 0.18\n      )\n      gl.uniform3f(gl.getUniformLocation(splat.program, \"u_color\"), ax, ay, 0)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), 0.0018)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n    }\n\n    if (!reduce) {\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.18, p.dissipation * 2.5)\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(divergence.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(divergence.program, \"u_velocity\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(divergence.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(divergenceFbo)\n\n      clearFbo(pressureFbo.read, 0.5, 0.5, 0.5)\n      clearFbo(pressureFbo.write, 0.5, 0.5, 0.5)\n      bindQuad(pressure.program)\n      for (let i = 0; i < 14; i++) {\n        gl.activeTexture(gl.TEXTURE0)\n        gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_pressure\"), 0)\n        gl.activeTexture(gl.TEXTURE1)\n        gl.bindTexture(gl.TEXTURE_2D, divergenceFbo.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_divergence\"), 1)\n        gl.uniform2f(\n          gl.getUniformLocation(pressure.program, \"u_texel\"),\n          texel[0],\n          texel[1]\n        )\n        blit(pressureFbo.write)\n        pressureFbo.swap()\n      }\n\n      bindQuad(gradient.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_pressure\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_velocity\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(gradient.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.22, Math.max(0.02, p.dissipation))\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n    }\n\n    bindQuad(display.program)\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_dye\"), 0)\n    gl.activeTexture(gl.TEXTURE1)\n    gl.bindTexture(gl.TEXTURE_2D, atlas.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_atlas\"), 1)\n    gl.uniform2f(\n      gl.getUniformLocation(display.program, \"u_resolution\"),\n      canvas.width,\n      canvas.height\n    )\n    const cell =\n      Math.max(7, p.cellSize) * Math.min(window.devicePixelRatio || 1, 2)\n    gl.uniform2f(gl.getUniformLocation(display.program, \"u_cell\"), cell, cell)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_charCount\"),\n      atlas.count\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_ink\"),\n      ink[0],\n      ink[1],\n      ink[2]\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_paper\"),\n      paper[0],\n      paper[1],\n      paper[2]\n    )\n    gl.uniform1f(gl.getUniformLocation(display.program, \"u_time\"), time)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_animate\"),\n      p.animate && !reduce ? 1 : 0\n    )\n    blit(null)\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      window.removeEventListener(\"pointermove\", onPointer)\n      parentEl?.removeEventListener(\"pointerleave\", onLeave)\n      gl.deleteProgram(splat.program)\n      gl.deleteProgram(advect.program)\n      gl.deleteProgram(divergence.program)\n      gl.deleteProgram(pressure.program)\n      gl.deleteProgram(gradient.program)\n      gl.deleteProgram(display.program)\n      gl.deleteShader(vs)\n      gl.deleteShader(splat.fs)\n      gl.deleteShader(advect.fs)\n      gl.deleteShader(divergence.fs)\n      gl.deleteShader(pressure.fs)\n      gl.deleteShader(gradient.fs)\n      gl.deleteShader(display.fs)\n      gl.deleteBuffer(buf)\n      gl.deleteTexture(atlas.tex)\n      for (const f of [\n        velocity.read,\n        velocity.write,\n        dye.read,\n        dye.write,\n        pressureFbo.read,\n        pressureFbo.write,\n        divergenceFbo,\n      ]) {\n        gl.deleteTexture(f.tex)\n        gl.deleteFramebuffer(f.fbo)\n      }\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends AsciiFluidOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    charset = DEFAULT_CHARSET,\n    cellSize = 12,\n    color,\n    backgroundColor,\n    force = 1,\n    dissipation = 0.05,\n    brush = 0.55,\n    animate = true,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let instance: AsciiFluidInstance | null = null\n\n  onMount(() => {\n    if (!canvas) return\n    instance = createAsciiFluid(canvas, {\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n  })\n</script>\n\n<div\n  data-slot=\"ascii-fluid\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/ascii-fluid.svelte"
     }
diff --git a/public/r/ascii-fluid.json b/public/r/ascii-fluid.json
index a8acde8..8036db9 100644
--- a/public/r/ascii-fluid.json
+++ b/public/r/ascii-fluid.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/ascii-fluid/ascii-fluid.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type AsciiFluidTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type AsciiFluidOptions = {\n  /**\n   * Brightness ramp (sparse → dense). Default is a full letter/symbol map.\n   */\n  charset?: string\n  /** Glyph cell size in CSS pixels. Default `12` */\n  cellSize?: number\n  /** Ink color (hex). Default follows theme. */\n  color?: string\n  /** Stage color (hex). Default follows theme. */\n  backgroundColor?: string\n  /** Mouse trail / fluid force. Default `1` */\n  force?: number\n  /** How quickly trails fade (higher = vanish sooner). Default `0.05` */\n  dissipation?: number\n  /** Trail brush size 0–1. Default `0.55` */\n  brush?: number\n  /** Soft ambient swirl when idle. Default `true` */\n  animate?: boolean\n  /** Follow pointer. Default `true` */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: AsciiFluidTheme\n}\n\nexport type AsciiFluidInstance = {\n  setOptions: (options: Partial<AsciiFluidOptions>) => void\n  destroy: () => void\n}\n\n/** Sparse → dense brightness ramp (letters + symbols). */\nexport const DEFAULT_CHARSET =\n  \" .'`^\\\",:;Il!i><~+_-?][}{1)(|\\\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\"\n\nconst LIGHT = { ink: \"#18181b\", paper: \"#fafafa\" }\nconst DARK = { ink: \"#e4e4e7\", paper: \"#09090b\" }\n\nconst VERT = `\nattribute vec2 a_position;\nvarying vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\n// Velocity / dye stored biased in RGBA8: enc(v) = v * 0.05 + 0.5\nconst FRAG_SPLAT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_target;\nuniform vec2 u_point;\nuniform vec3 u_color;\nuniform float u_radius;\nuniform float u_aspect;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 p = v_uv - u_point;\n  p.x *= u_aspect;\n  float d = exp(-dot(p, p) / max(u_radius, 0.0001));\n  vec3 base = texture2D(u_target, v_uv).xyz;\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(base.xy) + u_color.xy * d;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(base + u_color * d, 1.0);\n  }\n}\n`\n\nconst FRAG_ADVECT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform sampler2D u_source;\nuniform vec2 u_texel;\nuniform float u_dt;\nuniform float u_dissipation;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vec2 coord = v_uv - u_dt * vel * u_texel * 110.0;\n  vec4 src = texture2D(u_source, clamp(coord, 0.0, 1.0));\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(src.xy) * u_dissipation;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(src.xyz * u_dissipation, 1.0);\n  }\n}\n`\n\nconst FRAG_DIVERGENCE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\n\nvoid main() {\n  float L = dec(texture2D(u_velocity, v_uv - vec2(u_texel.x, 0.0)).xy).x;\n  float R = dec(texture2D(u_velocity, v_uv + vec2(u_texel.x, 0.0)).xy).x;\n  float B = dec(texture2D(u_velocity, v_uv - vec2(0.0, u_texel.y)).xy).y;\n  float T = dec(texture2D(u_velocity, v_uv + vec2(0.0, u_texel.y)).xy).y;\n  float div = 0.5 * ((R - L) + (T - B));\n  gl_FragColor = vec4(div * 0.05 + 0.5, 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_PRESSURE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_divergence;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nfloat enc1(float v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  float C = dec1(texture2D(u_divergence, v_uv).x);\n  float p = (L + R + B + T - C) * 0.25;\n  gl_FragColor = vec4(enc1(p), 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_GRADIENT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vel -= vec2(R - L, T - B) * 0.5;\n  gl_FragColor = vec4(enc(vel), 0.5, 1.0);\n}\n`\n\nconst FRAG_DISPLAY = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_dye;\nuniform sampler2D u_atlas;\nuniform vec2 u_resolution;\nuniform vec2 u_cell;\nuniform float u_charCount;\nuniform vec3 u_ink;\nuniform vec3 u_paper;\nuniform float u_time;\nuniform float u_animate;\n\nfloat hash21(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\n}\n\nvoid main() {\n  vec2 pixel = v_uv * u_resolution;\n  vec2 cell = floor(pixel / u_cell);\n  vec2 cellUv = (cell + 0.5) * u_cell / u_resolution;\n\n  float dens = clamp(texture2D(u_dye, cellUv).x, 0.0, 1.0);\n\n  // Soft neighborhood sample for a low-res glow halo under the glyphs\n  vec2 texel = u_cell / u_resolution;\n  float glow =\n    dens * 0.40 +\n    texture2D(u_dye, cellUv + vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv + vec2(0.0,  texel.y)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2(0.0,  texel.y)).x * 0.15;\n  glow = clamp(glow, 0.0, 1.0);\n  glow = pow(glow, 1.35);\n\n  float lit = dens;\n  if (u_animate > 0.5) {\n    float flicker = hash21(cell + floor(u_time * 10.0)) - 0.5;\n    lit = clamp(lit + flicker * 0.05, 0.0, 1.0);\n  }\n\n  float idx = min(floor(lit * (u_charCount - 0.001)), u_charCount - 1.0);\n  vec2 local = fract(pixel / u_cell);\n  float u0 = (idx + local.x) / u_charCount;\n  float glyph = texture2D(u_atlas, vec2(u0, local.y)).r;\n\n  float alpha = glyph * smoothstep(0.02, 0.12, dens);\n\n  // Paper → soft ink wash → sharp ASCII on top\n  float wash = glow * 0.22;\n  vec3 col = mix(u_paper, u_ink, wash);\n  col = mix(col, u_ink, clamp(alpha, 0.0, 1.0));\n  gl_FragColor = vec4(col, 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.1, 0.1, 0.12]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\nfunction isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nfunction resolveDark(theme: AsciiFluidTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vs: WebGLShader,\n  fragSource: string\n) {\n  const fs = compile(gl, gl.FRAGMENT_SHADER, fragSource)\n  if (!fs) return null\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(fs)\n    return null\n  }\n  return { program, fs }\n}\n\ntype FBO = {\n  tex: WebGLTexture\n  fbo: WebGLFramebuffer\n  w: number\n  h: number\n}\n\nfunction createFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n): FBO | null {\n  const tex = gl.createTexture()\n  const fbo = gl.createFramebuffer()\n  if (!tex || !fbo) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    w,\n    h,\n    0,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    null\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)\n  gl.framebufferTexture2D(\n    gl.FRAMEBUFFER,\n    gl.COLOR_ATTACHMENT0,\n    gl.TEXTURE_2D,\n    tex,\n    0\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n  return { tex, fbo, w, h }\n}\n\nfunction createDoubleFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n) {\n  const a = createFBO(gl, w, h, filter)\n  const b = createFBO(gl, w, h, filter)\n  if (!a || !b) return null\n  return {\n    read: a,\n    write: b,\n    swap() {\n      const t = this.read\n      this.read = this.write\n      this.write = t\n    },\n  }\n}\n\nfunction buildAtlas(\n  gl: WebGLRenderingContext,\n  charset: string\n): { tex: WebGLTexture; count: number } | null {\n  const count = Math.max(charset.length, 1)\n  const size = 64\n  const atlasCanvas = document.createElement(\"canvas\")\n  atlasCanvas.width = size * count\n  atlasCanvas.height = size\n  const ctx = atlasCanvas.getContext(\"2d\")\n  if (!ctx) return null\n  ctx.fillStyle = \"#000\"\n  ctx.fillRect(0, 0, atlasCanvas.width, atlasCanvas.height)\n  ctx.fillStyle = \"#fff\"\n  ctx.font = `700 ${Math.floor(size * 0.72)}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  for (let i = 0; i < count; i++) {\n    const ch = charset[i] ?? \" \"\n    if (ch === \" \") continue\n    ctx.fillText(ch, size * (i + 0.5), size * 0.55)\n  }\n\n  const tex = gl.createTexture()\n  if (!tex) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    atlasCanvas\n  )\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0)\n  return { tex, count }\n}\n\n/**\n * ASCII fluid background — pointer trails leave ink that swirls and\n * quantizes to a clean brightness-mapped glyph field. Zero deps.\n */\nexport function createAsciiFluid(\n  canvas: HTMLCanvasElement,\n  initial: AsciiFluidOptions = {}\n): AsciiFluidInstance | null {\n  let options: Required<\n    Pick<\n      AsciiFluidOptions,\n      | \"charset\"\n      | \"cellSize\"\n      | \"force\"\n      | \"dissipation\"\n      | \"brush\"\n      | \"animate\"\n      | \"interactive\"\n      | \"theme\"\n    >\n  > &\n    AsciiFluidOptions = {\n    charset: DEFAULT_CHARSET,\n    cellSize: 12,\n    force: 1,\n    dissipation: 0.05,\n    brush: 0.55,\n    animate: true,\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = {\n    x: 0.5,\n    y: 0.5,\n    dx: 0,\n    dy: 0,\n    moved: false,\n    inside: false,\n  }\n  let reduce = false\n  let currentCharset = \"\"\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n    preserveDrawingBuffer: false,\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  if (!vs) return null\n\n  const splat = createProgram(gl, vs, FRAG_SPLAT)\n  const advect = createProgram(gl, vs, FRAG_ADVECT)\n  const divergence = createProgram(gl, vs, FRAG_DIVERGENCE)\n  const pressure = createProgram(gl, vs, FRAG_PRESSURE)\n  const gradient = createProgram(gl, vs, FRAG_GRADIENT)\n  const display = createProgram(gl, vs, FRAG_DISPLAY)\n  if (!splat || !advect || !divergence || !pressure || !gradient || !display) {\n    return null\n  }\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n\n  const bindQuad = (program: WebGLProgram) => {\n    gl.useProgram(program)\n    const loc = gl.getAttribLocation(program, \"a_position\")\n    gl.enableVertexAttribArray(loc)\n    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n  }\n\n  const SIM = 180\n  const velocity = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const dye = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const pressureFbo = createDoubleFBO(gl, SIM, SIM, gl.NEAREST)\n  const divergenceFbo = createFBO(gl, SIM, SIM, gl.NEAREST)\n  if (!velocity || !dye || !pressureFbo || !divergenceFbo) return null\n\n  const initialAtlas = buildAtlas(gl, options.charset)\n  if (!initialAtlas) return null\n  let atlas = initialAtlas\n  currentCharset = options.charset\n\n  const blit = (target: FBO | null) => {\n    if (target) {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo)\n      gl.viewport(0, 0, target.w, target.h)\n    } else {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n      gl.viewport(0, 0, canvas.width, canvas.height)\n    }\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n  }\n\n  const clearFbo = (fbo: FBO, r = 0, g = 0, b = 0) => {\n    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.fbo)\n    gl.viewport(0, 0, fbo.w, fbo.h)\n    gl.clearColor(r, g, b, 1)\n    gl.clear(gl.COLOR_BUFFER_BIT)\n  }\n\n  clearFbo(velocity.read, 0.5, 0.5, 0.5)\n  clearFbo(velocity.write, 0.5, 0.5, 0.5)\n  clearFbo(dye.read)\n  clearFbo(dye.write)\n\n  let raf = 0\n  let running = true\n  let last = performance.now()\n  const start = last\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const onPointer = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    mouse.inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    mouse.dx = x - mouse.x\n    mouse.dy = y - mouse.y\n    mouse.x = x\n    mouse.y = y\n    mouse.moved = true\n  }\n  const onLeave = () => {\n    mouse.inside = false\n  }\n\n  window.addEventListener(\"pointermove\", onPointer, { passive: true })\n  const parentEl = canvas.parentElement\n  parentEl?.addEventListener(\"pointerleave\", onLeave, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min((now - last) / 1000, 0.033)\n    last = now\n    const time = (now - start) / 1000\n    const p = options\n\n    if (p.charset !== currentCharset) {\n      const next = buildAtlas(gl, p.charset)\n      if (next) {\n        gl.deleteTexture(atlas.tex)\n        atlas = next\n        currentCharset = p.charset\n      }\n    }\n\n    const dark = resolveDark(p.theme)\n    const ink = hexToRgb(p.color ?? (dark ? DARK.ink : LIGHT.ink))\n    const paper = hexToRgb(\n      p.backgroundColor ?? (dark ? DARK.paper : LIGHT.paper)\n    )\n    const texel = [1 / SIM, 1 / SIM] as const\n    const aspect = canvas.width / Math.max(canvas.height, 1)\n    const brushR = 0.00012 + Math.max(0.05, Math.min(1, p.brush)) * 0.0011\n\n    if (p.interactive && mouse.moved && mouse.inside && !reduce) {\n      const speed = Math.hypot(mouse.dx, mouse.dy)\n      const strength = p.force * (18 + speed * 120)\n\n      // Velocity trail\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        mouse.dx * strength,\n        mouse.dy * strength,\n        0\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), brushR)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      // Dye trail — denser with speed so fast moves write brighter glyphs\n      const dyeAmt = Math.min(1.4, 0.45 + speed * 8) * p.force\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        dyeAmt,\n        0,\n        0\n      )\n      gl.uniform1f(\n        gl.getUniformLocation(splat.program, \"u_radius\"),\n        brushR * 1.15\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n\n      mouse.moved = false\n      mouse.dx = 0\n      mouse.dy = 0\n    }\n\n    // Soft ambient swirl so the field never fully dies when idle\n    if (p.animate && !reduce && !mouse.inside) {\n      const ax = Math.sin(time * 0.55) * 0.22\n      const ay = Math.cos(time * 0.42) * 0.22\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        0.5 + Math.sin(time * 0.23) * 0.22,\n        0.5 + Math.cos(time * 0.19) * 0.18\n      )\n      gl.uniform3f(gl.getUniformLocation(splat.program, \"u_color\"), ax, ay, 0)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), 0.0018)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n    }\n\n    if (!reduce) {\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.18, p.dissipation * 2.5)\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(divergence.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(divergence.program, \"u_velocity\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(divergence.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(divergenceFbo)\n\n      clearFbo(pressureFbo.read, 0.5, 0.5, 0.5)\n      clearFbo(pressureFbo.write, 0.5, 0.5, 0.5)\n      bindQuad(pressure.program)\n      for (let i = 0; i < 14; i++) {\n        gl.activeTexture(gl.TEXTURE0)\n        gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_pressure\"), 0)\n        gl.activeTexture(gl.TEXTURE1)\n        gl.bindTexture(gl.TEXTURE_2D, divergenceFbo.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_divergence\"), 1)\n        gl.uniform2f(\n          gl.getUniformLocation(pressure.program, \"u_texel\"),\n          texel[0],\n          texel[1]\n        )\n        blit(pressureFbo.write)\n        pressureFbo.swap()\n      }\n\n      bindQuad(gradient.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_pressure\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_velocity\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(gradient.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.22, Math.max(0.02, p.dissipation))\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n    }\n\n    bindQuad(display.program)\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_dye\"), 0)\n    gl.activeTexture(gl.TEXTURE1)\n    gl.bindTexture(gl.TEXTURE_2D, atlas.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_atlas\"), 1)\n    gl.uniform2f(\n      gl.getUniformLocation(display.program, \"u_resolution\"),\n      canvas.width,\n      canvas.height\n    )\n    const cell =\n      Math.max(7, p.cellSize) * Math.min(window.devicePixelRatio || 1, 2)\n    gl.uniform2f(gl.getUniformLocation(display.program, \"u_cell\"), cell, cell)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_charCount\"),\n      atlas.count\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_ink\"),\n      ink[0],\n      ink[1],\n      ink[2]\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_paper\"),\n      paper[0],\n      paper[1],\n      paper[2]\n    )\n    gl.uniform1f(gl.getUniformLocation(display.program, \"u_time\"), time)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_animate\"),\n      p.animate && !reduce ? 1 : 0\n    )\n    blit(null)\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      window.removeEventListener(\"pointermove\", onPointer)\n      parentEl?.removeEventListener(\"pointerleave\", onLeave)\n      gl.deleteProgram(splat.program)\n      gl.deleteProgram(advect.program)\n      gl.deleteProgram(divergence.program)\n      gl.deleteProgram(pressure.program)\n      gl.deleteProgram(gradient.program)\n      gl.deleteProgram(display.program)\n      gl.deleteShader(vs)\n      gl.deleteShader(splat.fs)\n      gl.deleteShader(advect.fs)\n      gl.deleteShader(divergence.fs)\n      gl.deleteShader(pressure.fs)\n      gl.deleteShader(gradient.fs)\n      gl.deleteShader(display.fs)\n      gl.deleteBuffer(buf)\n      gl.deleteTexture(atlas.tex)\n      for (const f of [\n        velocity.read,\n        velocity.write,\n        dye.read,\n        dye.write,\n        pressureFbo.read,\n        pressureFbo.write,\n        divergenceFbo,\n      ]) {\n        gl.deleteTexture(f.tex)\n        gl.deleteFramebuffer(f.fbo)\n      }\n    },\n  }\n}\n\nexport type AsciiFluidProps = AsciiFluidOptions & {\n  className?: string\n}\n\n/**\n * ASCII fluid background — pointer trails leave ink that swirls and\n * quantizes to a clean brightness-mapped glyph field. Zero deps.\n */\nexport function AsciiFluid({\n  className,\n  charset = DEFAULT_CHARSET,\n  cellSize = 12,\n  color,\n  backgroundColor,\n  force = 1,\n  dissipation = 0.05,\n  brush = 0.55,\n  animate = true,\n  interactive = true,\n  theme = \"auto\",\n}: AsciiFluidProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<AsciiFluidInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createAsciiFluid(canvas, {\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n  }, [\n    charset,\n    cellSize,\n    color,\n    backgroundColor,\n    force,\n    dissipation,\n    brush,\n    animate,\n    interactive,\n    theme,\n  ])\n\n  return (\n    <div\n      data-slot=\"ascii-fluid\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type AsciiFluidTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type AsciiFluidOptions = {\n  /**\n   * Brightness ramp (sparse → dense). Default is a full letter/symbol map.\n   */\n  charset?: string\n  /** Glyph cell size in CSS pixels. Default `12` */\n  cellSize?: number\n  /** Ink color (hex). Default follows theme. */\n  color?: string\n  /** Stage color (hex). Default follows theme. */\n  backgroundColor?: string\n  /** Mouse trail / fluid force. Default `1` */\n  force?: number\n  /** How quickly trails fade (higher = vanish sooner). Default `0.05` */\n  dissipation?: number\n  /** Trail brush size 0–1. Default `0.55` */\n  brush?: number\n  /** Soft ambient swirl when idle. Default `true` */\n  animate?: boolean\n  /** Follow pointer. Default `true` */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class).\n   */\n  theme?: AsciiFluidTheme\n}\n\nexport type AsciiFluidInstance = {\n  setOptions: (options: Partial<AsciiFluidOptions>) => void\n  destroy: () => void\n}\n\n/** Sparse → dense brightness ramp (letters + symbols). */\nexport const DEFAULT_CHARSET =\n  \" .'`^\\\",:;Il!i><~+_-?][}{1)(|\\\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\"\n\nconst LIGHT = { ink: \"#18181b\", paper: \"#fafafa\" }\nconst DARK = { ink: \"#e4e4e7\", paper: \"#09090b\" }\n\nconst VERT = `\nattribute vec2 a_position;\nvarying vec2 v_uv;\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\n// Velocity / dye stored biased in RGBA8: enc(v) = v * 0.05 + 0.5\nconst FRAG_SPLAT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_target;\nuniform vec2 u_point;\nuniform vec3 u_color;\nuniform float u_radius;\nuniform float u_aspect;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 p = v_uv - u_point;\n  p.x *= u_aspect;\n  float d = exp(-dot(p, p) / max(u_radius, 0.0001));\n  vec3 base = texture2D(u_target, v_uv).xyz;\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(base.xy) + u_color.xy * d;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(base + u_color * d, 1.0);\n  }\n}\n`\n\nconst FRAG_ADVECT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform sampler2D u_source;\nuniform vec2 u_texel;\nuniform float u_dt;\nuniform float u_dissipation;\nuniform float u_velocityField;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vec2 coord = v_uv - u_dt * vel * u_texel * 110.0;\n  vec4 src = texture2D(u_source, clamp(coord, 0.0, 1.0));\n  if (u_velocityField > 0.5) {\n    vec2 next = dec(src.xy) * u_dissipation;\n    gl_FragColor = vec4(enc(next), 0.5, 1.0);\n  } else {\n    gl_FragColor = vec4(src.xyz * u_dissipation, 1.0);\n  }\n}\n`\n\nconst FRAG_DIVERGENCE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\n\nvoid main() {\n  float L = dec(texture2D(u_velocity, v_uv - vec2(u_texel.x, 0.0)).xy).x;\n  float R = dec(texture2D(u_velocity, v_uv + vec2(u_texel.x, 0.0)).xy).x;\n  float B = dec(texture2D(u_velocity, v_uv - vec2(0.0, u_texel.y)).xy).y;\n  float T = dec(texture2D(u_velocity, v_uv + vec2(0.0, u_texel.y)).xy).y;\n  float div = 0.5 * ((R - L) + (T - B));\n  gl_FragColor = vec4(div * 0.05 + 0.5, 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_PRESSURE = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_divergence;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nfloat enc1(float v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  float C = dec1(texture2D(u_divergence, v_uv).x);\n  float p = (L + R + B + T - C) * 0.25;\n  gl_FragColor = vec4(enc1(p), 0.0, 0.0, 1.0);\n}\n`\n\nconst FRAG_GRADIENT = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_pressure;\nuniform sampler2D u_velocity;\nuniform vec2 u_texel;\n\nfloat dec1(float e) { return (e - 0.5) / 0.05; }\nvec2 dec(vec2 e) { return (e - 0.5) / 0.05; }\nvec2 enc(vec2 v) { return clamp(v * 0.05 + 0.5, 0.0, 1.0); }\n\nvoid main() {\n  float L = dec1(texture2D(u_pressure, v_uv - vec2(u_texel.x, 0.0)).x);\n  float R = dec1(texture2D(u_pressure, v_uv + vec2(u_texel.x, 0.0)).x);\n  float B = dec1(texture2D(u_pressure, v_uv - vec2(0.0, u_texel.y)).x);\n  float T = dec1(texture2D(u_pressure, v_uv + vec2(0.0, u_texel.y)).x);\n  vec2 vel = dec(texture2D(u_velocity, v_uv).xy);\n  vel -= vec2(R - L, T - B) * 0.5;\n  gl_FragColor = vec4(enc(vel), 0.5, 1.0);\n}\n`\n\nconst FRAG_DISPLAY = `\nprecision highp float;\nvarying vec2 v_uv;\nuniform sampler2D u_dye;\nuniform sampler2D u_atlas;\nuniform vec2 u_resolution;\nuniform vec2 u_cell;\nuniform float u_charCount;\nuniform vec3 u_ink;\nuniform vec3 u_paper;\nuniform float u_time;\nuniform float u_animate;\n\nfloat hash21(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\n}\n\nvoid main() {\n  vec2 pixel = v_uv * u_resolution;\n  vec2 cell = floor(pixel / u_cell);\n  vec2 cellUv = (cell + 0.5) * u_cell / u_resolution;\n\n  float dens = clamp(texture2D(u_dye, cellUv).x, 0.0, 1.0);\n\n  // Soft neighborhood sample for a low-res glow halo under the glyphs\n  vec2 texel = u_cell / u_resolution;\n  float glow =\n    dens * 0.40 +\n    texture2D(u_dye, cellUv + vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2( texel.x, 0.0)).x * 0.15 +\n    texture2D(u_dye, cellUv + vec2(0.0,  texel.y)).x * 0.15 +\n    texture2D(u_dye, cellUv - vec2(0.0,  texel.y)).x * 0.15;\n  glow = clamp(glow, 0.0, 1.0);\n  glow = pow(glow, 1.35);\n\n  float lit = dens;\n  if (u_animate > 0.5) {\n    float flicker = hash21(cell + floor(u_time * 10.0)) - 0.5;\n    lit = clamp(lit + flicker * 0.05, 0.0, 1.0);\n  }\n\n  float idx = min(floor(lit * (u_charCount - 0.001)), u_charCount - 1.0);\n  vec2 local = fract(pixel / u_cell);\n  float u0 = (idx + local.x) / u_charCount;\n  float glyph = texture2D(u_atlas, vec2(u0, local.y)).r;\n\n  float alpha = glyph * smoothstep(0.02, 0.12, dens);\n\n  // Paper → soft ink wash → sharp ASCII on top\n  float wash = glow * 0.22;\n  vec3 col = mix(u_paper, u_ink, wash);\n  col = mix(col, u_ink, clamp(alpha, 0.0, 1.0));\n  gl_FragColor = vec4(col, 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.1, 0.1, 0.12]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\nfunction isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nfunction resolveDark(theme: AsciiFluidTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vs: WebGLShader,\n  fragSource: string\n) {\n  const fs = compile(gl, gl.FRAGMENT_SHADER, fragSource)\n  if (!fs) return null\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"AsciiFluid: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(fs)\n    return null\n  }\n  return { program, fs }\n}\n\ntype FBO = {\n  tex: WebGLTexture\n  fbo: WebGLFramebuffer\n  w: number\n  h: number\n}\n\nfunction createFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n): FBO | null {\n  const tex = gl.createTexture()\n  const fbo = gl.createFramebuffer()\n  if (!tex || !fbo) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    w,\n    h,\n    0,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    null\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)\n  gl.framebufferTexture2D(\n    gl.FRAMEBUFFER,\n    gl.COLOR_ATTACHMENT0,\n    gl.TEXTURE_2D,\n    tex,\n    0\n  )\n  gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n  return { tex, fbo, w, h }\n}\n\nfunction createDoubleFBO(\n  gl: WebGLRenderingContext,\n  w: number,\n  h: number,\n  filter: number\n) {\n  const a = createFBO(gl, w, h, filter)\n  const b = createFBO(gl, w, h, filter)\n  if (!a || !b) return null\n  return {\n    read: a,\n    write: b,\n    swap() {\n      const t = this.read\n      this.read = this.write\n      this.write = t\n    },\n  }\n}\n\nfunction buildAtlas(\n  gl: WebGLRenderingContext,\n  charset: string\n): { tex: WebGLTexture; count: number } | null {\n  const count = Math.max(charset.length, 1)\n  const size = 64\n  const atlasCanvas = document.createElement(\"canvas\")\n  atlasCanvas.width = size * count\n  atlasCanvas.height = size\n  const ctx = atlasCanvas.getContext(\"2d\")\n  if (!ctx) return null\n  ctx.fillStyle = \"#000\"\n  ctx.fillRect(0, 0, atlasCanvas.width, atlasCanvas.height)\n  ctx.fillStyle = \"#fff\"\n  ctx.font = `700 ${Math.floor(size * 0.72)}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`\n  ctx.textAlign = \"center\"\n  ctx.textBaseline = \"middle\"\n  for (let i = 0; i < count; i++) {\n    const ch = charset[i] ?? \" \"\n    if (ch === \" \") continue\n    ctx.fillText(ch, size * (i + 0.5), size * 0.55)\n  }\n\n  const tex = gl.createTexture()\n  if (!tex) return null\n  gl.bindTexture(gl.TEXTURE_2D, tex)\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    atlasCanvas\n  )\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0)\n  return { tex, count }\n}\n\n/**\n * ASCII fluid background — pointer trails leave ink that swirls and\n * quantizes to a clean brightness-mapped glyph field. Zero deps.\n */\nexport function createAsciiFluid(\n  canvas: HTMLCanvasElement,\n  initial: AsciiFluidOptions = {}\n): AsciiFluidInstance | null {\n  let options: Required<\n    Pick<\n      AsciiFluidOptions,\n      | \"charset\"\n      | \"cellSize\"\n      | \"force\"\n      | \"dissipation\"\n      | \"brush\"\n      | \"animate\"\n      | \"interactive\"\n      | \"theme\"\n    >\n  > &\n    AsciiFluidOptions = {\n    charset: DEFAULT_CHARSET,\n    cellSize: 12,\n    force: 1,\n    dissipation: 0.05,\n    brush: 0.55,\n    animate: true,\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = {\n    x: 0.5,\n    y: 0.5,\n    dx: 0,\n    dy: 0,\n    moved: false,\n    inside: false,\n  }\n  let reduce = false\n  let currentCharset = \"\"\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n    preserveDrawingBuffer: false,\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  if (!vs) return null\n\n  const splat = createProgram(gl, vs, FRAG_SPLAT)\n  const advect = createProgram(gl, vs, FRAG_ADVECT)\n  const divergence = createProgram(gl, vs, FRAG_DIVERGENCE)\n  const pressure = createProgram(gl, vs, FRAG_PRESSURE)\n  const gradient = createProgram(gl, vs, FRAG_GRADIENT)\n  const display = createProgram(gl, vs, FRAG_DISPLAY)\n  if (!splat || !advect || !divergence || !pressure || !gradient || !display) {\n    return null\n  }\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n\n  const bindQuad = (program: WebGLProgram) => {\n    gl.useProgram(program)\n    const loc = gl.getAttribLocation(program, \"a_position\")\n    gl.enableVertexAttribArray(loc)\n    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n  }\n\n  const SIM = 180\n  const velocity = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const dye = createDoubleFBO(gl, SIM, SIM, gl.LINEAR)\n  const pressureFbo = createDoubleFBO(gl, SIM, SIM, gl.NEAREST)\n  const divergenceFbo = createFBO(gl, SIM, SIM, gl.NEAREST)\n  if (!velocity || !dye || !pressureFbo || !divergenceFbo) return null\n\n  const initialAtlas = buildAtlas(gl, options.charset)\n  if (!initialAtlas) return null\n  let atlas = initialAtlas\n  currentCharset = options.charset\n\n  const blit = (target: FBO | null) => {\n    if (target) {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo)\n      gl.viewport(0, 0, target.w, target.h)\n    } else {\n      gl.bindFramebuffer(gl.FRAMEBUFFER, null)\n      gl.viewport(0, 0, canvas.width, canvas.height)\n    }\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n  }\n\n  const clearFbo = (fbo: FBO, r = 0, g = 0, b = 0) => {\n    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.fbo)\n    gl.viewport(0, 0, fbo.w, fbo.h)\n    gl.clearColor(r, g, b, 1)\n    gl.clear(gl.COLOR_BUFFER_BIT)\n  }\n\n  clearFbo(velocity.read, 0.5, 0.5, 0.5)\n  clearFbo(velocity.write, 0.5, 0.5, 0.5)\n  clearFbo(dye.read)\n  clearFbo(dye.write)\n\n  let raf = 0\n  let running = true\n  let last = performance.now()\n  const start = last\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const onPointer = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    mouse.inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    mouse.dx = x - mouse.x\n    mouse.dy = y - mouse.y\n    mouse.x = x\n    mouse.y = y\n    mouse.moved = true\n  }\n  const onLeave = () => {\n    mouse.inside = false\n  }\n\n  window.addEventListener(\"pointermove\", onPointer, { passive: true })\n  const parentEl = canvas.parentElement\n  parentEl?.addEventListener(\"pointerleave\", onLeave, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n    const dt = Math.min((now - last) / 1000, 0.033)\n    last = now\n    const time = (now - start) / 1000\n    const p = options\n\n    if (p.charset !== currentCharset) {\n      const next = buildAtlas(gl, p.charset)\n      if (next) {\n        gl.deleteTexture(atlas.tex)\n        atlas = next\n        currentCharset = p.charset\n      }\n    }\n\n    const dark = resolveDark(p.theme)\n    const ink = hexToRgb(p.color ?? (dark ? DARK.ink : LIGHT.ink))\n    const paper = hexToRgb(\n      p.backgroundColor ?? (dark ? DARK.paper : LIGHT.paper)\n    )\n    const texel = [1 / SIM, 1 / SIM] as const\n    const aspect = canvas.width / Math.max(canvas.height, 1)\n    const brushR = 0.00012 + Math.max(0.05, Math.min(1, p.brush)) * 0.0011\n\n    if (p.interactive && mouse.moved && mouse.inside && !reduce) {\n      const speed = Math.hypot(mouse.dx, mouse.dy)\n      const strength = p.force * (18 + speed * 120)\n\n      // Velocity trail\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        mouse.dx * strength,\n        mouse.dy * strength,\n        0\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), brushR)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      // Dye trail — denser with speed so fast moves write brighter glyphs\n      const dyeAmt = Math.min(1.4, 0.45 + speed * 8) * p.force\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        mouse.x,\n        mouse.y\n      )\n      gl.uniform3f(\n        gl.getUniformLocation(splat.program, \"u_color\"),\n        dyeAmt,\n        0,\n        0\n      )\n      gl.uniform1f(\n        gl.getUniformLocation(splat.program, \"u_radius\"),\n        brushR * 1.15\n      )\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n\n      mouse.moved = false\n      mouse.dx = 0\n      mouse.dy = 0\n    }\n\n    // Soft ambient swirl so the field never fully dies when idle\n    if (p.animate && !reduce && !mouse.inside) {\n      const ax = Math.sin(time * 0.55) * 0.22\n      const ay = Math.cos(time * 0.42) * 0.22\n      bindQuad(splat.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(splat.program, \"u_target\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(splat.program, \"u_point\"),\n        0.5 + Math.sin(time * 0.23) * 0.22,\n        0.5 + Math.cos(time * 0.19) * 0.18\n      )\n      gl.uniform3f(gl.getUniformLocation(splat.program, \"u_color\"), ax, ay, 0)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_radius\"), 0.0018)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_aspect\"), aspect)\n      gl.uniform1f(gl.getUniformLocation(splat.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n    }\n\n    if (!reduce) {\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.18, p.dissipation * 2.5)\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 1)\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(divergence.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(divergence.program, \"u_velocity\"), 0)\n      gl.uniform2f(\n        gl.getUniformLocation(divergence.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(divergenceFbo)\n\n      clearFbo(pressureFbo.read, 0.5, 0.5, 0.5)\n      clearFbo(pressureFbo.write, 0.5, 0.5, 0.5)\n      bindQuad(pressure.program)\n      for (let i = 0; i < 14; i++) {\n        gl.activeTexture(gl.TEXTURE0)\n        gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_pressure\"), 0)\n        gl.activeTexture(gl.TEXTURE1)\n        gl.bindTexture(gl.TEXTURE_2D, divergenceFbo.tex)\n        gl.uniform1i(gl.getUniformLocation(pressure.program, \"u_divergence\"), 1)\n        gl.uniform2f(\n          gl.getUniformLocation(pressure.program, \"u_texel\"),\n          texel[0],\n          texel[1]\n        )\n        blit(pressureFbo.write)\n        pressureFbo.swap()\n      }\n\n      bindQuad(gradient.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, pressureFbo.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_pressure\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(gradient.program, \"u_velocity\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(gradient.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      blit(velocity.write)\n      velocity.swap()\n\n      bindQuad(advect.program)\n      gl.activeTexture(gl.TEXTURE0)\n      gl.bindTexture(gl.TEXTURE_2D, velocity.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_velocity\"), 0)\n      gl.activeTexture(gl.TEXTURE1)\n      gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n      gl.uniform1i(gl.getUniformLocation(advect.program, \"u_source\"), 1)\n      gl.uniform2f(\n        gl.getUniformLocation(advect.program, \"u_texel\"),\n        texel[0],\n        texel[1]\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_dt\"), dt)\n      gl.uniform1f(\n        gl.getUniformLocation(advect.program, \"u_dissipation\"),\n        1 - Math.min(0.22, Math.max(0.02, p.dissipation))\n      )\n      gl.uniform1f(gl.getUniformLocation(advect.program, \"u_velocityField\"), 0)\n      blit(dye.write)\n      dye.swap()\n    }\n\n    bindQuad(display.program)\n    gl.activeTexture(gl.TEXTURE0)\n    gl.bindTexture(gl.TEXTURE_2D, dye.read.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_dye\"), 0)\n    gl.activeTexture(gl.TEXTURE1)\n    gl.bindTexture(gl.TEXTURE_2D, atlas.tex)\n    gl.uniform1i(gl.getUniformLocation(display.program, \"u_atlas\"), 1)\n    gl.uniform2f(\n      gl.getUniformLocation(display.program, \"u_resolution\"),\n      canvas.width,\n      canvas.height\n    )\n    const cell =\n      Math.max(7, p.cellSize) * Math.min(window.devicePixelRatio || 1, 2)\n    gl.uniform2f(gl.getUniformLocation(display.program, \"u_cell\"), cell, cell)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_charCount\"),\n      atlas.count\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_ink\"),\n      ink[0],\n      ink[1],\n      ink[2]\n    )\n    gl.uniform3f(\n      gl.getUniformLocation(display.program, \"u_paper\"),\n      paper[0],\n      paper[1],\n      paper[2]\n    )\n    gl.uniform1f(gl.getUniformLocation(display.program, \"u_time\"), time)\n    gl.uniform1f(\n      gl.getUniformLocation(display.program, \"u_animate\"),\n      p.animate && !reduce ? 1 : 0\n    )\n    blit(null)\n\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      window.removeEventListener(\"pointermove\", onPointer)\n      parentEl?.removeEventListener(\"pointerleave\", onLeave)\n      gl.deleteProgram(splat.program)\n      gl.deleteProgram(advect.program)\n      gl.deleteProgram(divergence.program)\n      gl.deleteProgram(pressure.program)\n      gl.deleteProgram(gradient.program)\n      gl.deleteProgram(display.program)\n      gl.deleteShader(vs)\n      gl.deleteShader(splat.fs)\n      gl.deleteShader(advect.fs)\n      gl.deleteShader(divergence.fs)\n      gl.deleteShader(pressure.fs)\n      gl.deleteShader(gradient.fs)\n      gl.deleteShader(display.fs)\n      gl.deleteBuffer(buf)\n      gl.deleteTexture(atlas.tex)\n      for (const f of [\n        velocity.read,\n        velocity.write,\n        dye.read,\n        dye.write,\n        pressureFbo.read,\n        pressureFbo.write,\n        divergenceFbo,\n      ]) {\n        gl.deleteTexture(f.tex)\n        gl.deleteFramebuffer(f.fbo)\n      }\n    },\n  }\n}\n\nexport type AsciiFluidProps = AsciiFluidOptions & {\n  className?: string\n}\n\n/**\n * ASCII fluid background — pointer trails leave ink that swirls and\n * quantizes to a clean brightness-mapped glyph field. Zero deps.\n */\nexport function AsciiFluid({\n  className,\n  charset = DEFAULT_CHARSET,\n  cellSize = 12,\n  color,\n  backgroundColor,\n  force = 1,\n  dissipation = 0.05,\n  brush = 0.55,\n  animate = true,\n  interactive = true,\n  theme = \"auto\",\n}: AsciiFluidProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<AsciiFluidInstance | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createAsciiFluid(canvas, {\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      charset,\n      cellSize,\n      color,\n      backgroundColor,\n      force,\n      dissipation,\n      brush,\n      animate,\n      interactive,\n      theme,\n    })\n  }, [\n    charset,\n    cellSize,\n    color,\n    backgroundColor,\n    force,\n    dissipation,\n    brush,\n    animate,\n    interactive,\n    theme,\n  ])\n\n  return (\n    <div\n      data-slot=\"ascii-fluid\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/ascii-fluid.tsx"
     }
diff --git a/public/r/shader-anime-fire-svelte.json b/public/r/shader-anime-fire-svelte.json
index db46152..3afaa4b 100644
--- a/public/r/shader-anime-fire-svelte.json
+++ b/public/r/shader-anime-fire-svelte.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/shader-anime-fire/shader-anime-fire.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderAnimeFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    embers = DEFAULT_EMBERS,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderAnimeFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-anime-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderAnimeFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    embers = DEFAULT_EMBERS,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderAnimeFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-anime-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-anime-fire.svelte"
     }
diff --git a/public/r/shader-anime-fire.json b/public/r/shader-anime-fire.json
index 429d045..4e9e06a 100644
--- a/public/r/shader-anime-fire.json
+++ b/public/r/shader-anime-fire.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-anime-fire/shader-anime-fire.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderAnimeFireProps = Omit<ShaderAnimeFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, with sparks drifting\n * above them. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderAnimeFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  embers = DEFAULT_EMBERS,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderAnimeFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderAnimeFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    intensity,\n    height,\n    embers,\n    interactive,\n    dither,\n    pixelSize,\n    theme,\n  ])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-anime-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* The canvas carries the radius itself: a WebGL layer can slip past a\n          parent's rounded clip on some GPUs. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderAnimeFireProps = Omit<\n  ShaderAnimeFireOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, with sparks drifting\n * above them. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderAnimeFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  embers = DEFAULT_EMBERS,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderAnimeFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderAnimeFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    intensity,\n    height,\n    embers,\n    interactive,\n    dither,\n    pixelSize,\n    theme,\n  ])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-anime-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-anime-fire.tsx"
     }
diff --git a/public/r/shader-fire-svelte.json b/public/r/shader-fire-svelte.json
index 1c2d0f9..b60093a 100644
--- a/public/r/shader-fire-svelte.json
+++ b/public/r/shader-fire-svelte.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/shader-fire/shader-fire.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.55,\n    intensity = 0.55,\n    height = 0.45,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.55,\n    intensity = 0.55,\n    height = 0.45,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-fire.svelte"
     }
diff --git a/public/r/shader-fire.json b/public/r/shader-fire.json
index f1ba1f5..13bed95 100644
--- a/public/r/shader-fire.json
+++ b/public/r/shader-fire.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-fire/shader-fire.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderFireProps = Omit<ShaderFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function ShaderFire({\n  className,\n  colors,\n  speed = 0.55,\n  intensity = 0.55,\n  height = 0.45,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderFireOptions = {\n  /** Ember / flame / highlight hex */\n  colors?: string[]\n  /** Rise speed. Default 0.55 */\n  speed?: number\n  /** Coverage 0–1. Default 0.55 */\n  intensity?: number\n  /** How far tongues climb 0–1. Default 0.45 */\n  height?: number\n  /** Local heat under the pointer. Default true */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of a soft wash. Default false */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1` */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderFireInstance = {\n  setOptions: (options: Partial<ShaderFireOptions>) => void\n  destroy: () => void\n}\n\n/** Warm ink on paper — sienna / amber / dusty peach */\nexport const LIGHT_COLORS = [\"#9C3A24\", \"#C96A32\", \"#E6C4A0\"]\n/** Visible coals on slate — ember / flame / highlight */\nexport const DARK_COLORS = [\"#A33A18\", \"#D4682A\", \"#E8B45A\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#FCFBF9\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #9C3A24 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #C96A32 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E6C4A0 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#08090C\",\n  backgroundImage: [\n    \"radial-gradient(80% 42% at 50% 108%, #A33A18 0%, transparent 70%)\",\n    \"radial-gradient(36% 28% at 22% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(32% 24% at 78% 100%, #D4682A 0%, transparent 72%)\",\n    \"radial-gradient(22% 16% at 50% 100%, #E8B45A 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixelSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return bayer2(lo) * 4.0 + bayer2(hi);\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  vec2 hi = floor(c * 0.5);\n  vec2 lo = mod(c, 2.0);\n  return (bayer4(hi) * 4.0 + bayer2(lo) + 0.5) / 64.0;\n}\n\nfloat fireField(vec2 uv, float aspect, float t) {\n  float climb = mix(0.22, 0.82, clamp(u_height, 0.0, 1.0));\n\n  // Column space — sway as they rise\n  vec2 q = vec2(uv.x * aspect * 1.85, uv.y * 1.55 - t * 0.48);\n  q.x += sin(uv.y * 7.0 + t * 1.6) * 0.045 * (0.25 + uv.y);\n\n  // Two-pass domain warp — curling tongues, not blobs\n  vec2 w1 = vec2(\n    fbm(q * 1.7 + vec2(t * 0.28, t * 0.22)),\n    fbm(q * 1.7 + vec2(-t * 0.24, t * 0.31) + 5.2)\n  );\n  q += (w1 - 0.5) * 0.58;\n  vec2 w2 = vec2(\n    fbm(q * 3.4 - vec2(t * 0.52, 0.0)),\n    fbm(q * 3.4 + vec2(0.0, t * 0.44) + 2.7)\n  );\n  q += (w2 - 0.5) * 0.26;\n\n  float shape = fbm(q * 2.35);\n  float detail = fbm(q * 7.2 + vec2(0.0, t * 1.7));\n  float flicker = 0.9 + 0.1 * sin(t * 13.0 + uv.x * 9.0 + shape * 6.0);\n  float field = (shape * 0.68 + detail * 0.32) * flicker;\n\n  // Hotter, wider base; thinner breakaways as they climb\n  float taper = pow(clamp(1.0 - uv.y / max(climb, 0.05), 0.0, 1.0), 1.35);\n  float core = pow(clamp(1.0 - uv.y / max(climb * 0.42, 0.04), 0.0, 1.0), 2.1);\n  field = field * taper + core * shape * 0.38;\n\n  float md = length((uv - u_mouse) * vec2(aspect, 1.0));\n  field += exp(-md * 6.8) * 0.28 * (0.55 + 0.45 * shape);\n\n  field *= smoothstep(0.0, 0.05, uv.y + 0.015);\n  field = smoothstep(0.22, 0.74, field);\n\n  float intensity = mix(0.34, 1.18, clamp(u_intensity, 0.0, 1.0));\n  return clamp(field * intensity, 0.0, 1.0);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float px = max(u_pixelSize, 1.0);\n\n  vec2 sampleUv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 cell = floor(gl_FragCoord.xy / px);\n  if (u_dither > 0.5) {\n    sampleUv = (cell + 0.5) * px / u_resolution.xy;\n  }\n\n  float field = fireField(sampleUv, aspect, t);\n\n  if (u_dither > 0.5) {\n    float bit = step(bayer8(cell), field);\n    field = bit * mix(0.45, 1.0, field);\n  }\n\n  vec3 ember = u_c1;\n  vec3 flame = u_c2;\n  vec3 highlight = u_c3;\n  vec3 tint = mix(ember, flame, smoothstep(0.08, 0.48, field));\n  tint = mix(tint, highlight, pow(smoothstep(0.42, 0.96, field), 1.55));\n\n  vec3 paper = u_dark < 0.5\n    ? vec3(0.992, 0.986, 0.978)\n    : vec3(0.03, 0.032, 0.042);\n  // Light: watercolor on paper — more air, less orange stain\n  float cover = u_dither > 0.5\n    ? field\n    : field * (u_dark < 0.5 ? 0.68 : 0.84);\n  vec3 col = mix(paper, tint, clamp(cover, 0.0, 1.0));\n  if (u_dark < 0.5 && u_dither < 0.5) {\n    float haze = field * (1.0 - field) * 0.12;\n    col = mix(col, paper, haze);\n  }\n\n  if (u_dither < 0.5) {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.77, 0.38, 0.18]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function createShaderFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderFireOptions = {}\n): ShaderFireInstance | null {\n  let options: Required<\n    Pick<\n      ShaderFireOptions,\n      | \"speed\"\n      | \"intensity\"\n      | \"height\"\n      | \"interactive\"\n      | \"dither\"\n      | \"pixelSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderFireOptions = {\n    speed: 0.55,\n    intensity: 0.55,\n    height: 0.45,\n    interactive: true,\n    dither: false,\n    pixelSize: 1,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.12 }\n  const targetMouse = { x: 0.5, y: 0.12 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uHeight = gl.getUniformLocation(program, \"u_height\")\n  const uDark = gl.getUniformLocation(program, \"u_dark\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uDither = gl.getUniformLocation(program, \"u_dither\")\n  const uPixelSize = gl.getUniformLocation(program, \"u_pixelSize\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.05\n    mouse.y += (targetMouse.y - mouse.y) * 0.05\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const px = Math.max(1, options.pixelSize ?? 1) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.55))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.55)))\n    gl.uniform1f(uHeight, Math.min(1, Math.max(0, options.height ?? 0.45)))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixelSize, px)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.12\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderFireProps = Omit<ShaderFireOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * Sparse 2D fire wash — tongues rise from the bottom behind UI.\n * Theme-aware light / dusk.\n */\nexport function ShaderFire({\n  className,\n  colors,\n  speed = 0.55,\n  intensity = 0.55,\n  height = 0.45,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-fire.tsx"
     }
diff --git a/public/r/shader-gradient-svelte.json b/public/r/shader-gradient-svelte.json
index 85c97d9..0fa8244 100644
--- a/public/r/shader-gradient-svelte.json
+++ b/public/r/shader-gradient-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-gradient/shader-gradient.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderGradientOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    blur = DEFAULT_BLUR,\n    intensity = DEFAULT_INTENSITY,\n    grain = DEFAULT_GRAIN,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderGradientInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-gradient\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderGradientOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    blur = DEFAULT_BLUR,\n    intensity = DEFAULT_INTENSITY,\n    grain = DEFAULT_GRAIN,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderGradientInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-gradient\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-gradient.svelte"
     }
diff --git a/public/r/shader-gradient.json b/public/r/shader-gradient.json
index 62294d6..207beeb 100644
--- a/public/r/shader-gradient.json
+++ b/public/r/shader-gradient.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-gradient/shader-gradient.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderGradientProps = Omit<\n  ShaderGradientOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states — the palette flows\n * through slow warped noise under a film grain. Theme-aware.\n */\nexport function ShaderGradient({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  blur = DEFAULT_BLUR,\n  intensity = DEFAULT_INTENSITY,\n  grain = DEFAULT_GRAIN,\n  interactive = true,\n  theme = \"auto\",\n}: ShaderGradientProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderGradientInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, blur, intensity, grain, interactive, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-gradient\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderGradientProps = Omit<\n  ShaderGradientOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states — the palette flows\n * through slow warped noise under a film grain. Theme-aware.\n */\nexport function ShaderGradient({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  blur = DEFAULT_BLUR,\n  intensity = DEFAULT_INTENSITY,\n  grain = DEFAULT_GRAIN,\n  interactive = true,\n  theme = \"auto\",\n}: ShaderGradientProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderGradientInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, blur, intensity, grain, interactive, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-gradient\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-gradient.tsx"
     }
diff --git a/public/r/shader-sky-svelte.json b/public/r/shader-sky-svelte.json
index 1077f7d..bc4853f 100644
--- a/public/r/shader-sky-svelte.json
+++ b/public/r/shader-sky-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-sky/shader-sky.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\nvec2 skyField(vec2 uv, float aspect, float t) {\n  vec2 st = vec2(uv.x * aspect, uv.y);\n  st -= (u_mouse - 0.5) * 0.04;\n\n  float amount = clamp(u_amount, 0.0, 1.0);\n  float scale = clamp(u_scale, 0.0, 1.0);\n  float variation = clamp(u_variation, 0.0, 1.0);\n  float cover = clamp(u_coverage, 0.0, 1.0);\n\n  float freq = mix(2.65, 1.05, scale);\n  vec2 wind = vec2(t * 0.18, t * 0.012);\n  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);\n\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, wind.y)),\n    fbm(p + vec2(5.2, 1.3) - wind.yx)\n  );\n  vec2 r = vec2(\n    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),\n    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)\n  );\n\n  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;\n  float big = fbm(base);\n  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));\n  float n = mix(big, mix(big, small, 0.55), variation);\n  n = n * n * (3.0 - 2.0 * n);\n\n  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;\n  float hi = lo + mix(0.20, 0.13, amount);\n  float density = smoothstep(lo, hi, n);\n\n  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);\n  far = far * far * (3.0 - 2.0 * far);\n  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);\n  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);\n  density *= mix(0.78, 1.14, cover);\n\n  // Sun from upper-right: denser along the light ray = self-shadow.\n  vec2 sun = vec2(0.22, 0.28);\n  float nLit = fbm(base + sun);\n  nLit = nLit * nLit * (3.0 - 2.0 * nLit);\n  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);\n\n  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));\n  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);\n  float shade = 0.40 + lift * 0.50 - under * 0.30;\n  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);\n  shade = clamp(shade, 0.0, 1.0);\n\n  return vec2(clamp(density, 0.0, 1.0), shade);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 field = skyField(uv, aspect, t);\n  float density = field.x;\n  float shade = field.y;\n\n  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);\n  vec3 sky = mix(u_c2, u_c1, h);\n\n  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;\n  vec3 body = mix(u_c4, u_c3, 0.58);\n  vec3 top = mix(u_c3, vec3(1.0), 0.52);\n  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));\n  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);\n  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);\n\n  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));\n  alpha = clamp(alpha, 0.0, 1.0);\n  vec3 col = mix(sky, lit, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderSkyOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.1,\n    coverage = 0.5,\n    intensity = 0.9,\n    amount = 0.5,\n    scale = 0.4,\n    variation = 0.7,\n    interactive = false,\n    glass = false,\n    glassSize = 7,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderSkyInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(skyFallback(colors, isDark))\n</script>\n\n<div\n  data-slot=\"shader-sky\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\nvec2 skyField(vec2 uv, float aspect, float t) {\n  vec2 st = vec2(uv.x * aspect, uv.y);\n  st -= (u_mouse - 0.5) * 0.04;\n\n  float amount = clamp(u_amount, 0.0, 1.0);\n  float scale = clamp(u_scale, 0.0, 1.0);\n  float variation = clamp(u_variation, 0.0, 1.0);\n  float cover = clamp(u_coverage, 0.0, 1.0);\n\n  float freq = mix(2.65, 1.05, scale);\n  vec2 wind = vec2(t * 0.18, t * 0.012);\n  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);\n\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, wind.y)),\n    fbm(p + vec2(5.2, 1.3) - wind.yx)\n  );\n  vec2 r = vec2(\n    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),\n    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)\n  );\n\n  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;\n  float big = fbm(base);\n  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));\n  float n = mix(big, mix(big, small, 0.55), variation);\n  n = n * n * (3.0 - 2.0 * n);\n\n  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;\n  float hi = lo + mix(0.20, 0.13, amount);\n  float density = smoothstep(lo, hi, n);\n\n  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);\n  far = far * far * (3.0 - 2.0 * far);\n  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);\n  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);\n  density *= mix(0.78, 1.14, cover);\n\n  // Sun from upper-right: denser along the light ray = self-shadow.\n  vec2 sun = vec2(0.22, 0.28);\n  float nLit = fbm(base + sun);\n  nLit = nLit * nLit * (3.0 - 2.0 * nLit);\n  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);\n\n  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));\n  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);\n  float shade = 0.40 + lift * 0.50 - under * 0.30;\n  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);\n  shade = clamp(shade, 0.0, 1.0);\n\n  return vec2(clamp(density, 0.0, 1.0), shade);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 field = skyField(uv, aspect, t);\n  float density = field.x;\n  float shade = field.y;\n\n  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);\n  vec3 sky = mix(u_c2, u_c1, h);\n\n  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;\n  vec3 body = mix(u_c4, u_c3, 0.58);\n  vec3 top = mix(u_c3, vec3(1.0), 0.52);\n  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));\n  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);\n  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);\n\n  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));\n  alpha = clamp(alpha, 0.0, 1.0);\n  vec3 col = mix(sky, lit, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderSkyOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.1,\n    coverage = 0.5,\n    intensity = 0.9,\n    amount = 0.5,\n    scale = 0.4,\n    variation = 0.7,\n    interactive = false,\n    glass = false,\n    glassSize = 7,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderSkyInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(skyFallback(colors, isDark))\n</script>\n\n<div\n  data-slot=\"shader-sky\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-sky.svelte"
     }
diff --git a/public/r/shader-sky.json b/public/r/shader-sky.json
index 207ee10..57f3383 100644
--- a/public/r/shader-sky.json
+++ b/public/r/shader-sky.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-sky/shader-sky.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\nvec2 skyField(vec2 uv, float aspect, float t) {\n  vec2 st = vec2(uv.x * aspect, uv.y);\n  st -= (u_mouse - 0.5) * 0.04;\n\n  float amount = clamp(u_amount, 0.0, 1.0);\n  float scale = clamp(u_scale, 0.0, 1.0);\n  float variation = clamp(u_variation, 0.0, 1.0);\n  float cover = clamp(u_coverage, 0.0, 1.0);\n\n  float freq = mix(2.65, 1.05, scale);\n  vec2 wind = vec2(t * 0.18, t * 0.012);\n  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);\n\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, wind.y)),\n    fbm(p + vec2(5.2, 1.3) - wind.yx)\n  );\n  vec2 r = vec2(\n    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),\n    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)\n  );\n\n  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;\n  float big = fbm(base);\n  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));\n  float n = mix(big, mix(big, small, 0.55), variation);\n  n = n * n * (3.0 - 2.0 * n);\n\n  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;\n  float hi = lo + mix(0.20, 0.13, amount);\n  float density = smoothstep(lo, hi, n);\n\n  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);\n  far = far * far * (3.0 - 2.0 * far);\n  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);\n  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);\n  density *= mix(0.78, 1.14, cover);\n\n  // Sun from upper-right: denser along the light ray = self-shadow.\n  vec2 sun = vec2(0.22, 0.28);\n  float nLit = fbm(base + sun);\n  nLit = nLit * nLit * (3.0 - 2.0 * nLit);\n  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);\n\n  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));\n  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);\n  float shade = 0.40 + lift * 0.50 - under * 0.30;\n  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);\n  shade = clamp(shade, 0.0, 1.0);\n\n  return vec2(clamp(density, 0.0, 1.0), shade);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 field = skyField(uv, aspect, t);\n  float density = field.x;\n  float shade = field.y;\n\n  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);\n  vec3 sky = mix(u_c2, u_c1, h);\n\n  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;\n  vec3 body = mix(u_c4, u_c3, 0.58);\n  vec3 top = mix(u_c3, vec3(1.0), 0.52);\n  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));\n  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);\n  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);\n\n  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));\n  alpha = clamp(alpha, 0.0, 1.0);\n  vec3 col = mix(sky, lit, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderSkyProps = Omit<ShaderSkyOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function ShaderSky({\n  className,\n  colors,\n  speed = 0.1,\n  coverage = 0.5,\n  intensity = 0.9,\n  amount = 0.5,\n  scale = 0.4,\n  variation = 0.7,\n  interactive = false,\n  glass = false,\n  glassSize = 7,\n  theme = \"auto\",\n}: ShaderSkyProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderSkyInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    coverage,\n    intensity,\n    amount,\n    scale,\n    variation,\n    interactive,\n    glass,\n    glassSize,\n    theme,\n  ])\n\n  const fallback = skyFallback(colors, isDark)\n\n  return (\n    <div\n      data-slot=\"shader-sky\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 size-full\" />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\nvec2 skyField(vec2 uv, float aspect, float t) {\n  vec2 st = vec2(uv.x * aspect, uv.y);\n  st -= (u_mouse - 0.5) * 0.04;\n\n  float amount = clamp(u_amount, 0.0, 1.0);\n  float scale = clamp(u_scale, 0.0, 1.0);\n  float variation = clamp(u_variation, 0.0, 1.0);\n  float cover = clamp(u_coverage, 0.0, 1.0);\n\n  float freq = mix(2.65, 1.05, scale);\n  vec2 wind = vec2(t * 0.18, t * 0.012);\n  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);\n\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, wind.y)),\n    fbm(p + vec2(5.2, 1.3) - wind.yx)\n  );\n  vec2 r = vec2(\n    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),\n    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)\n  );\n\n  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;\n  float big = fbm(base);\n  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));\n  float n = mix(big, mix(big, small, 0.55), variation);\n  n = n * n * (3.0 - 2.0 * n);\n\n  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;\n  float hi = lo + mix(0.20, 0.13, amount);\n  float density = smoothstep(lo, hi, n);\n\n  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);\n  far = far * far * (3.0 - 2.0 * far);\n  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);\n  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);\n  density *= mix(0.78, 1.14, cover);\n\n  // Sun from upper-right: denser along the light ray = self-shadow.\n  vec2 sun = vec2(0.22, 0.28);\n  float nLit = fbm(base + sun);\n  nLit = nLit * nLit * (3.0 - 2.0 * nLit);\n  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);\n\n  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));\n  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);\n  float shade = 0.40 + lift * 0.50 - under * 0.30;\n  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);\n  shade = clamp(shade, 0.0, 1.0);\n\n  return vec2(clamp(density, 0.0, 1.0), shade);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 field = skyField(uv, aspect, t);\n  float density = field.x;\n  float shade = field.y;\n\n  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);\n  vec3 sky = mix(u_c2, u_c1, h);\n\n  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;\n  vec3 body = mix(u_c4, u_c3, 0.58);\n  vec3 top = mix(u_c3, vec3(1.0), 0.52);\n  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));\n  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);\n  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);\n\n  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));\n  alpha = clamp(alpha, 0.0, 1.0);\n  vec3 col = mix(sky, lit, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderSkyProps = Omit<ShaderSkyOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function ShaderSky({\n  className,\n  colors,\n  speed = 0.1,\n  coverage = 0.5,\n  intensity = 0.9,\n  amount = 0.5,\n  scale = 0.4,\n  variation = 0.7,\n  interactive = false,\n  glass = false,\n  glassSize = 7,\n  theme = \"auto\",\n}: ShaderSkyProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderSkyInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    coverage,\n    intensity,\n    amount,\n    scale,\n    variation,\n    interactive,\n    glass,\n    glassSize,\n    theme,\n  ])\n\n  const fallback = skyFallback(colors, isDark)\n\n  return (\n    <div\n      data-slot=\"shader-sky\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-sky.tsx"
     }
diff --git a/registry/ascii-fluid/ascii-fluid.svelte b/registry/ascii-fluid/ascii-fluid.svelte
index a122f24..af99365 100644
--- a/registry/ascii-fluid/ascii-fluid.svelte
+++ b/registry/ascii-fluid/ascii-fluid.svelte
@@ -74,7 +74,10 @@
 <div
   data-slot="ascii-fluid"
   aria-hidden="true"
-  class={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]", className)}
 >
-  <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
+  <!-- Firefox can hand an opaque WebGL canvas straight to the system
+       compositor, which ignores rounded clips. The mask on the root keeps it
+       in the page's own layer, so the parent's radius holds. -->
+  <canvas bind:this={canvas} class="absolute inset-0 size-full rounded-[inherit]"></canvas>
 </div>
diff --git a/registry/ascii-fluid/ascii-fluid.tsx b/registry/ascii-fluid/ascii-fluid.tsx
index f98ecbc..6d70499 100644
--- a/registry/ascii-fluid/ascii-fluid.tsx
+++ b/registry/ascii-fluid/ascii-fluid.tsx
@@ -96,11 +96,17 @@ export function AsciiFluid({
       data-slot="ascii-fluid"
       aria-hidden
       className={cn(
-        "pointer-events-none absolute inset-0 overflow-hidden",
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]",
         className
       )}
     >
-      <canvas ref={canvasRef} className="absolute inset-0 size-full" />
+      {/* Firefox can hand an opaque WebGL canvas straight to the system
+          compositor, which ignores rounded clips. The mask on the root keeps
+          it in the page's own layer, so the parent's radius holds. */}
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 size-full rounded-[inherit]"
+      />
     </div>
   )
 }
diff --git a/registry/shader-anime-fire/shader-anime-fire.svelte b/registry/shader-anime-fire/shader-anime-fire.svelte
index 5b3ad32..61d805b 100644
--- a/registry/shader-anime-fire/shader-anime-fire.svelte
+++ b/registry/shader-anime-fire/shader-anime-fire.svelte
@@ -106,8 +106,11 @@
 <div
   data-slot="shader-anime-fire"
   aria-hidden="true"
-  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]", className)}
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]", className)}
   style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
 >
+  <!-- Firefox can hand an opaque WebGL canvas straight to the system
+       compositor, which ignores rounded clips. The mask on the root keeps it
+       in the page's own layer, so the parent's radius holds. -->
   <canvas bind:this={canvas} class="absolute inset-0 size-full rounded-[inherit]"></canvas>
 </div>
diff --git a/registry/shader-anime-fire/shader-anime-fire.tsx b/registry/shader-anime-fire/shader-anime-fire.tsx
index 910811b..b4b1f93 100644
--- a/registry/shader-anime-fire/shader-anime-fire.tsx
+++ b/registry/shader-anime-fire/shader-anime-fire.tsx
@@ -33,7 +33,10 @@ export type {
   ShaderAnimeFireTheme,
 } from "./shader-anime-fire-vanilla"
 
-export type ShaderAnimeFireProps = Omit<ShaderAnimeFireOptions, "onThemeChange"> & {
+export type ShaderAnimeFireProps = Omit<
+  ShaderAnimeFireOptions,
+  "onThemeChange"
+> & {
   className?: string
 }
 
@@ -128,7 +131,7 @@ export function ShaderAnimeFire({
       data-slot="shader-anime-fire"
       aria-hidden
       className={cn(
-        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]",
         className
       )}
       style={{
@@ -136,8 +139,9 @@ export function ShaderAnimeFire({
         backgroundImage: fallback.backgroundImage,
       }}
     >
-      {/* The canvas carries the radius itself: a WebGL layer can slip past a
-          parent's rounded clip on some GPUs. */}
+      {/* Firefox can hand an opaque WebGL canvas straight to the system
+          compositor, which ignores rounded clips. The mask on the root keeps
+          it in the page's own layer, so the parent's radius holds. */}
       <canvas
         ref={canvasRef}
         className="absolute inset-0 size-full rounded-[inherit]"
diff --git a/registry/shader-fire/shader-fire.svelte b/registry/shader-fire/shader-fire.svelte
index 93969ed..5e29137 100644
--- a/registry/shader-fire/shader-fire.svelte
+++ b/registry/shader-fire/shader-fire.svelte
@@ -99,8 +99,11 @@
 <div
   data-slot="shader-fire"
   aria-hidden="true"
-  class={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]", className)}
   style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
 >
-  <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
+  <!-- Firefox can hand an opaque WebGL canvas straight to the system
+       compositor, which ignores rounded clips. The mask on the root keeps it
+       in the page's own layer, so the parent's radius holds. -->
+  <canvas bind:this={canvas} class="absolute inset-0 size-full rounded-[inherit]"></canvas>
 </div>
diff --git a/registry/shader-fire/shader-fire.tsx b/registry/shader-fire/shader-fire.tsx
index 5fae2f1..402ef5b 100644
--- a/registry/shader-fire/shader-fire.tsx
+++ b/registry/shader-fire/shader-fire.tsx
@@ -107,7 +107,7 @@ export function ShaderFire({
       data-slot="shader-fire"
       aria-hidden
       className={cn(
-        "pointer-events-none absolute inset-0 overflow-hidden",
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]",
         className
       )}
       style={{
@@ -115,7 +115,13 @@ export function ShaderFire({
         backgroundImage: fallback.backgroundImage,
       }}
     >
-      <canvas ref={canvasRef} className="absolute inset-0 size-full" />
+      {/* Firefox can hand an opaque WebGL canvas straight to the system
+          compositor, which ignores rounded clips. The mask on the root keeps
+          it in the page's own layer, so the parent's radius holds. */}
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 size-full rounded-[inherit]"
+      />
     </div>
   )
 }
diff --git a/registry/shader-gradient/shader-gradient.svelte b/registry/shader-gradient/shader-gradient.svelte
index e67e912..c6205bf 100644
--- a/registry/shader-gradient/shader-gradient.svelte
+++ b/registry/shader-gradient/shader-gradient.svelte
@@ -100,8 +100,11 @@
 <div
   data-slot="shader-gradient"
   aria-hidden="true"
-  class={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]", className)}
   style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
 >
-  <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
+  <!-- Firefox can hand an opaque WebGL canvas straight to the system
+       compositor, which ignores rounded clips. The mask on the root keeps it
+       in the page's own layer, so the parent's radius holds. -->
+  <canvas bind:this={canvas} class="absolute inset-0 size-full rounded-[inherit]"></canvas>
 </div>
diff --git a/registry/shader-gradient/shader-gradient.tsx b/registry/shader-gradient/shader-gradient.tsx
index a153246..8cf642a 100644
--- a/registry/shader-gradient/shader-gradient.tsx
+++ b/registry/shader-gradient/shader-gradient.tsx
@@ -115,7 +115,7 @@ export function ShaderGradient({
       data-slot="shader-gradient"
       aria-hidden
       className={cn(
-        "pointer-events-none absolute inset-0 overflow-hidden",
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]",
         className
       )}
       style={{
@@ -123,7 +123,13 @@ export function ShaderGradient({
         backgroundImage: fallback.backgroundImage,
       }}
     >
-      <canvas ref={canvasRef} className="absolute inset-0 size-full" />
+      {/* Firefox can hand an opaque WebGL canvas straight to the system
+          compositor, which ignores rounded clips. The mask on the root keeps
+          it in the page's own layer, so the parent's radius holds. */}
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 size-full rounded-[inherit]"
+      />
     </div>
   )
 }
diff --git a/registry/shader-sky/shader-sky.svelte b/registry/shader-sky/shader-sky.svelte
index aae0acd..a3e752d 100644
--- a/registry/shader-sky/shader-sky.svelte
+++ b/registry/shader-sky/shader-sky.svelte
@@ -107,8 +107,11 @@
 <div
   data-slot="shader-sky"
   aria-hidden="true"
-  class={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+  class={cn("pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]", className)}
   style="background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};"
 >
-  <canvas bind:this={canvas} class="absolute inset-0 size-full"></canvas>
+  <!-- Firefox can hand an opaque WebGL canvas straight to the system
+       compositor, which ignores rounded clips. The mask on the root keeps it
+       in the page's own layer, so the parent's radius holds. -->
+  <canvas bind:this={canvas} class="absolute inset-0 size-full rounded-[inherit]"></canvas>
 </div>
diff --git a/registry/shader-sky/shader-sky.tsx b/registry/shader-sky/shader-sky.tsx
index 835a861..3daadb1 100644
--- a/registry/shader-sky/shader-sky.tsx
+++ b/registry/shader-sky/shader-sky.tsx
@@ -127,7 +127,7 @@ export function ShaderSky({
       data-slot="shader-sky"
       aria-hidden
       className={cn(
-        "pointer-events-none absolute inset-0 overflow-hidden",
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]",
         className
       )}
       style={{
@@ -135,7 +135,13 @@ export function ShaderSky({
         backgroundImage: fallback.backgroundImage,
       }}
     >
-      <canvas ref={canvasRef} className="absolute inset-0 size-full" />
+      {/* Firefox can hand an opaque WebGL canvas straight to the system
+          compositor, which ignores rounded clips. The mask on the root keeps
+          it in the page's own layer, so the parent's radius holds. */}
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 size-full rounded-[inherit]"
+      />
     </div>
   )
 }

From af95283206546e60fd3f7ab3d9a6555f7a152c55 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:42:45 +0530
Subject: [PATCH 32/49] Remove the embers from Shader Anime Fire.

The sparks and the embers prop are gone for good, along with the demo
slider and every mention in the docs, registry, README and skill notes.
The flames, glow, ignite and pointer plume are unchanged.
---
 .cursor/skills/23rd/SKILL.md                  |   4 +-
 .cursor/skills/23rd/apis.md                   |   1 -
 .cursor/skills/23rd/components.md             |   6 +-
 README.md                                     |   2 +-
 content/docs/components/shader-anime-fire.mdx |   5 +-
 .../components/shader-anime-fire/image.png    | Bin 48510 -> 48142 bytes
 public/r/registry.json                        |   4 +-
 public/r/shader-anime-fire-svelte.json        |   4 +-
 public/r/shader-anime-fire.json               |   4 +-
 registry/shader-anime-fire/registry.json      |   4 +-
 .../shader-anime-fire-demo.tsx                |  16 +----
 .../shader-anime-fire-vanilla.ts              |  59 ++----------------
 .../shader-anime-fire.svelte                  |   4 --
 .../shader-anime-fire/shader-anime-fire.tsx   |  21 +------
 skills/23rd/SKILL.md                          |   4 +-
 skills/23rd/apis.md                           |   1 -
 skills/23rd/components.md                     |   6 +-
 17 files changed, 30 insertions(+), 115 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index b570dee..bf6563c 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -110,7 +110,7 @@ Disambiguation that agents get wrong:
 | --- | --- | --- |
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
 | Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
-| Fire, embers, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| Fire, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
 | Quiet heat wash behind copy | `shader-fire` | `shader-anime-fire` when it should be the show |
 | 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
 | Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
@@ -173,7 +173,7 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
-| `shader-anime-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
+| `shader-anime-fire` | Shaders | Cel-shaded flames licking up from the bottom | React + Svelte |
 | `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index a8de6e0..ecb1489 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -155,7 +155,6 @@ type ShaderAnimeFireProps = {
   speed?: number // 0.6
   intensity?: number // 1
   height?: number // 0.45
-  embers?: number // 0.6
   interactive?: boolean // true
   dither?: boolean // false
   pixelSize?: number // 1
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index 69b7c79..efd8c7a 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -145,13 +145,13 @@ Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. S
 
 ## shader-anime-fire
 
-Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Ember / flame / core.
+Shader. Cel-shaded flames lick up from the bottom edge in flat bands. Ember / flame / core.
 
 Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
 
 Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). A quiet wash (`shader-fire`).
 
-Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
 ```tsx
 "use client"
@@ -167,7 +167,7 @@ export function Hero() {
 }
 ```
 
-Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. `embers={0}` turns sparks off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
+Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
 
 ## shader-fire
 
diff --git a/README.md b/README.md
index 46a4181..e07b3ac 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Logo Burst](https://23rd.dev/docs/components/logo-burst)                 | `@23rd/logo-burst`         | Hair-line tentacles explode from the center, then breathe — light and dark         |
 | [Phosphor Score](https://23rd.dev/docs/components/phosphor-score)         | `@23rd/phosphor-score`     | Vertical CRT sheet music — notes fall, bloom at the playhead, then exit in a flare |
 | [Radiant Lines](https://23rd.dev/docs/components/radiant-lines)           | `@23rd/radiant-lines`      | Hyperspace starfield background; warp speed driven by scroll                       |
-| [Shader Anime Fire](https://23rd.dev/docs/components/shader-anime-fire)               | `@23rd/shader-anime-fire`        | Cel-shaded flames and sparks rising from the bottom of a landing hero             |
+| [Shader Anime Fire](https://23rd.dev/docs/components/shader-anime-fire)               | `@23rd/shader-anime-fire`        | Cel-shaded flames licking up from the bottom of a landing hero                    |
 | [Shader Fire](https://23rd.dev/docs/components/shader-fire)               | `@23rd/shader-fire`        | Sparse 2D fire wash — tongues rise from the bottom behind a landing hero           |
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
diff --git a/content/docs/components/shader-anime-fire.mdx b/content/docs/components/shader-anime-fire.mdx
index 22d0334..d97b8a2 100644
--- a/content/docs/components/shader-anime-fire.mdx
+++ b/content/docs/components/shader-anime-fire.mdx
@@ -1,11 +1,11 @@
 ---
 title: Shader Anime Fire
-description: Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above them, and the fire reaches for the pointer.
+description: Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.
 ---
 
 import { ShaderAnimeFireDemo } from "@/registry/shader-anime-fire/shader-anime-fire-demo"
 
-Flat, graphic fire rather than a photo of one. Four crisp bands (ember, flame, core, and a hot center) curl up from the bottom edge, sparks drift up past the copy, and a warm glow flickers under it all. Move the pointer over it and a plume of flame reaches up toward it. Toggle **Dither** to print the same bands as ordered Bayer pixels. Press `d` to switch theme.
+Flat, graphic fire rather than a photo of one. Four crisp bands (ember, flame, core, and a hot center) curl up from the bottom edge over a warm glow that flickers under it all. Move the pointer over it and a plume of flame reaches up toward it. Toggle **Dither** to print the same bands as ordered Bayer pixels. Press `d` to switch theme.
 
 ## Preview
 
@@ -114,7 +114,6 @@ Print the same bands as ordered Bayer pixels:
 | `speed` | `number` | `0.6` |
 | `intensity` | `number` | `1` |
 | `height` | `number` | `0.45` |
-| `embers` | `number` | `0.6` |
 | `interactive` | `boolean` | `true` |
 | `dither` | `boolean` | `false` |
 | `pixelSize` | `number` | `1` |
diff --git a/public/og/docs/components/shader-anime-fire/image.png b/public/og/docs/components/shader-anime-fire/image.png
index c1ec26451209bcca812880d4ad1cca2c5c064a7b..7af2994021cde6fbf81d94171fb03698604de1ad 100644
GIT binary patch
delta 15340
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

delta 13226
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

diff --git a/public/r/registry.json b/public/r/registry.json
index 5f923d6..52ccb12 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -245,7 +245,7 @@
     {
       "name": "shader-anime-fire",
       "title": "Shader Anime Fire",
-      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.",
       "files": [
         {
           "path": "registry/shader-anime-fire/shader-anime-fire.tsx",
@@ -258,7 +258,7 @@
     {
       "name": "shader-anime-fire-svelte",
       "title": "Shader Anime Fire",
-      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.",
       "dependencies": [],
       "files": [
         {
diff --git a/public/r/shader-anime-fire-svelte.json b/public/r/shader-anime-fire-svelte.json
index 3afaa4b..0cc005a 100644
--- a/public/r/shader-anime-fire-svelte.json
+++ b/public/r/shader-anime-fire-svelte.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shader-anime-fire-svelte",
   "title": "Shader Anime Fire",
-  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.",
   "dependencies": [],
   "files": [
     {
       "path": "registry/shader-anime-fire/shader-anime-fire.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderAnimeFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    embers = DEFAULT_EMBERS,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderAnimeFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-anime-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of cel-shaded fire along the bottom edge: turbulent tongues in\n * flat bands of heat over a warm, flickering glow. Theme-aware; pauses\n * off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderAnimeFireOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    intensity = DEFAULT_INTENSITY,\n    height = DEFAULT_HEIGHT,\n    interactive = true,\n    dither = false,\n    pixelSize = 1,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderAnimeFireInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-anime-fire\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-anime-fire.svelte"
     }
diff --git a/public/r/shader-anime-fire.json b/public/r/shader-anime-fire.json
index 4e9e06a..a384bb3 100644
--- a/public/r/shader-anime-fire.json
+++ b/public/r/shader-anime-fire.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shader-anime-fire",
   "title": "Shader Anime Fire",
-  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+  "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.",
   "files": [
     {
       "path": "registry/shader-anime-fire/shader-anime-fire.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */\n  embers?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\nexport const DEFAULT_EMBERS = 0.6\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_embers;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nvec2 hash2(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.xx + p3.yz) * p3.zy);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Sparks: three parallax layers of cells scrolling up, one spark in a few.\nfloat embers(vec2 uv, float aspect, float t, float plume) {\n  if (u_embers <= 0.0) return 0.0;\n  float climb = max(climbOf(), 0.05);\n  float sum = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float scale = 8.0 + fi * 7.0;\n    vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n    float column = floor(p.x);\n    float lane = hash(vec2(column, fi * 7.1));\n    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);\n\n    vec2 id = floor(p);\n    vec2 h = hash2(id + fi * 17.3);\n    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);\n    if (h.x > rate) continue;\n\n    vec2 c = 0.5 + (h - 0.5) * 0.45;\n    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;\n    vec2 d = fract(p) - c;\n    d.y *= 0.5;\n    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);\n    float spark = 1.0 - smoothstep(0.0, r, length(d));\n    spark *= spark;\n\n    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);\n    // Born in the flames, burnt out a little above them.\n    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);\n    life *= smoothstep(0.0, climb * 0.35, uv.y);\n    sum += spark * twinkle * life * (1.0 - fi * 0.25);\n  }\n  return min(sum, 1.0);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  float spark = embers(uv, aspect, t, plume);\n  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of fire along the bottom edge: turbulent tongues colored by heat,\n * sparks drifting up, and a warm glow that flickers with them. Theme-aware;\n * pauses off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uEmbers = u(\"u_embers\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderAnimeFireProps = Omit<\n  ShaderAnimeFireOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, with sparks drifting\n * above them. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderAnimeFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  embers = DEFAULT_EMBERS,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderAnimeFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderAnimeFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      embers,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    intensity,\n    height,\n    embers,\n    interactive,\n    dither,\n    pixelSize,\n    theme,\n  ])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-anime-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderAnimeFireTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderAnimeFireOptions = {\n  /**\n   * Three colors, coolest to hottest: ember, flame, core. In dark mode the\n   * densest heat still burns past the core toward white.\n   */\n  colors?: string[]\n  /** How fast the flames rise. Default `0.6`. */\n  speed?: number\n  /** Opacity of the fire and its glow, 0–1. Default `1`. */\n  intensity?: number\n  /** How far the flames climb, 0–1. Default `0.45`. */\n  height?: number\n  /** A plume of heat reaches up toward the pointer. Default `true`. */\n  interactive?: boolean\n  /** Ordered Bayer pixels instead of smooth flames. Default `false`. */\n  dither?: boolean\n  /** Dither cell size in CSS px. Default `1`. */\n  pixelSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderAnimeFireTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderAnimeFireInstance = {\n  setOptions: (options: Partial<ShaderAnimeFireOptions>) => void\n  destroy: () => void\n}\n\n/** Brick, flame orange and marigold — saturated enough to hold on paper. */\nexport const LIGHT_COLORS = [\"#D8341A\", \"#F9731E\", \"#FFBA3A\"]\n/** Deep ember, flame and gold; the tonemap carries the core to white-hot. */\nexport const DARK_COLORS = [\"#B4200A\", \"#FF6512\", \"#FFC04A\"]\nconst LIGHT_BASE = \"#FCFBF9\"\nconst DARK_BASE = \"#08090C\"\n\nexport const DEFAULT_SPEED = 0.6\nexport const DEFAULT_INTENSITY = 1\nexport const DEFAULT_HEIGHT = 0.45\n\nfunction fallback(colors: string[], base: string) {\n  const [ember, flame, core] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      `radial-gradient(24% 18% at 50% 100%, ${core} 0%, transparent 70%)`,\n      `radial-gradient(36% 30% at 24% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(34% 28% at 76% 100%, ${flame} 0%, transparent 72%)`,\n      `radial-gradient(90% 50% at 50% 110%, ${ember} 0%, transparent 72%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_intensity;\nuniform float u_height;\nuniform float u_ignite;\nuniform float u_dark;\nuniform float u_dither;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Ember, flame, core and the paper / ink underneath, in linear light.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\n// Classic Bayer (WebGL1-safe, no bitwise ops)\nfloat bayer2(vec2 c) {\n  return mod(c.x * 2.0 + c.y * 3.0, 4.0);\n}\n\nfloat bayer4(vec2 p) {\n  vec2 c = mod(floor(p), 4.0);\n  return bayer2(mod(c, 2.0)) * 4.0 + bayer2(floor(c * 0.5));\n}\n\nfloat bayer8(vec2 p) {\n  vec2 c = mod(floor(p), 8.0);\n  return (bayer4(floor(c * 0.5)) * 4.0 + bayer2(mod(c, 2.0)) + 0.5) / 64.0;\n}\n\nfloat climbOf() {\n  return mix(0.18, 0.78, u_height) * u_ignite;\n}\n\n// Temperature: below 0 is air, around 1 is the white-hot bed of the fire.\nfloat temperature(vec2 uv, float aspect, float t, float plume) {\n  float x = uv.x * aspect;\n  float climb = max(climbOf(), 0.001);\n  float y = uv.y / climb;\n\n  // Slow swells along the bed, so the flame line is never flat.\n  y /= mix(0.6, 1.3, fbm(vec2(x * 1.1 + 3.1, t * 0.16)));\n  // Under the pointer the fire stretches up toward it.\n  y /= 1.0 + plume * max(u_mouse.y / climb - 0.4, 0.3);\n\n  // Turbulence rising through the flame: stretched tall so it reads as\n  // tongues, and swept sideways harder the higher it climbs.\n  // Few octaves on purpose: smooth, graphic tongues rather than ragged,\n  // photographic ones.\n  vec2 q = vec2(x * 4.4, uv.y * 1.5 - t * 1.1);\n  vec2 w = vec2(\n    fbm(q * vec2(0.5, 0.8) + vec2(0.0, -t * 0.3)),\n    fbm(q * 0.6 + vec2(5.2, 1.3 - t * 0.25))\n  );\n  q += (w - 0.5) * vec2(2.4, 0.8) * (0.3 + y);\n  float body = fbm(q) - 0.5;\n  // Ridged: where the finer noise crosses its midpoint it peaks sharply,\n  // which curls the bands into licks instead of flat stripes.\n  float licks = 0.2 - abs(fbm(q * vec2(1.5, 2.0) + vec2(0.0, -t * 1.6)) - 0.5) * 2.0;\n  float turb = body * 0.8 + licks * 0.45;\n\n  float T = 1.0 - y * 1.1 + turb * 2.6 * min(0.5 + y, 1.2);\n  // Nothing burns far above the tips, however the noise rolls.\n  return T - smoothstep(1.0, 1.7, y);\n}\n\n// Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.\nvec3 bands(float T, vec3 hot) {\n  float w = 0.012;\n  vec3 c = mix(u_c0, u_c1, smoothstep(0.3 - w, 0.3 + w, T));\n  c = mix(c, u_c2, smoothstep(0.6 - w, 0.6 + w, T));\n  return mix(c, hot, smoothstep(1.02 - w, 1.02 + w, T));\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time;\n\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  if (u_dither > 0.5) uv = (cell + 0.5) * u_pixel / u_resolution;\n\n  float dx = (uv.x - u_mouse.x) * aspect;\n  float plume = exp(-dx * dx * 26.0) * u_pointer;\n\n  float T = temperature(uv, aspect, t, plume);\n  // Dither shakes the band edges by the Bayer threshold, so each boundary\n  // prints as an ordered-dot blend instead of a hard line.\n  float q = u_dither > 0.5 ? bayer8(cell) - 0.5 : 0.0;\n  T += q * 0.14;\n  float edge = u_dither > 0.5 ? 0.001 : 0.012;\n  float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);\n\n  // The whole fire breathes a little, like a real one lighting a room.\n  float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));\n  float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;\n  glow += plume * exp(-length(vec2(dx, uv.y - u_mouse.y)) * 5.0) * 0.5;\n  glow *= u_intensity;\n  if (u_dither > 0.5) glow = step(0.52 + q * 0.98, glow * 2.0) * 0.5;\n\n  // On ink the core goes near white; on paper white would vanish into the\n  // page, so it stops at a pale gold.\n  vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);\n  vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));\n  col = mix(col, bands(T, hot), cover);\n\n  vec3 srgb = linearToSrgb(col);\n  if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;\n  gl_FragColor = vec4(clamp(srgb, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → linear sRGB, so the shader can add light the way light adds. */\nfunction hexToLinear(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.77, 0.38, 0.18]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  return srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderAnimeFireTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A wall of cel-shaded fire along the bottom edge: turbulent tongues in\n * flat bands of heat over a warm, flickering glow. Theme-aware; pauses\n * off-screen and in hidden tabs; holds a still frame under\n * `prefers-reduced-motion`.\n */\nexport function createShaderAnimeFire(\n  canvas: HTMLCanvasElement,\n  initial: ShaderAnimeFireOptions = {}\n): ShaderAnimeFireInstance | null {\n  let options: ShaderAnimeFireOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // The plume eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderAnimeFire: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uIntensity = u(\"u_intensity\")\n  const uHeight = u(\"u_height\")\n  const uIgnite = u(\"u_ignite\")\n  const uDark = u(\"u_dark\")\n  const uDither = u(\"u_dither\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\")]\n  const uBase = u(\"u_base\")\n\n  // Flame edges are crisp, so render a bit past 1x — but not a full 2x,\n  // which would quadruple the fbm work on retina screens.\n  let dpr = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    dpr = Math.min(window.devicePixelRatio || 1, 1.5)\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToLinear(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToLinear(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n  // Seconds since the fire first caught; drives the ignite.\n  let lit = mqReduce.matches ? 10 : 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) {\n      clock += dt\n      lit += dt\n    } else if (mqReduce.matches) {\n      lit = 10\n    }\n\n    mouse.x += (target.x - mouse.x) * 0.08\n    mouse.y += (target.y - mouse.y) * 0.08\n    pull += (pullTarget - pull) * 0.05\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    const ignite = 1 - (1 - Math.min(lit / 1.1, 1)) ** 3\n    const px = Math.max(1, numberOr(options.pixelSize, 1, 1, 64)) * dpr\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed)\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))\n    gl.uniform1f(uIgnite, Math.max(ignite, 0.001))\n    gl.uniform1f(uDark, dark ? 1 : 0)\n    gl.uniform1f(uDither, options.dither ? 1 : 0)\n    gl.uniform1f(uPixel, options.dither ? px : dpr)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    const settling =\n      Math.abs(pull - pullTarget) > 0.002 ||\n      Math.abs(target.x - mouse.x) > 0.001 ||\n      Math.abs(target.y - mouse.y) > 0.001\n    if (live || (settling && !mqReduce.matches)) {\n      raf = requestAnimationFrame(tick)\n    }\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n    wake()\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderAnimeFireProps = Omit<\n  ShaderAnimeFireOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * Cel-shaded flames licking up from the bottom edge, over a warm flickering\n * glow. Heat reaches for the pointer. Theme-aware.\n */\nexport function ShaderAnimeFire({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  intensity = DEFAULT_INTENSITY,\n  height = DEFAULT_HEIGHT,\n  interactive = true,\n  dither = false,\n  pixelSize = 1,\n  theme = \"auto\",\n}: ShaderAnimeFireProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderAnimeFireInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderAnimeFire(canvas, {\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      intensity,\n      height,\n      interactive,\n      dither,\n      pixelSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-anime-fire\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-anime-fire.tsx"
     }
diff --git a/registry/shader-anime-fire/registry.json b/registry/shader-anime-fire/registry.json
index cca7322..ea91bce 100644
--- a/registry/shader-anime-fire/registry.json
+++ b/registry/shader-anime-fire/registry.json
@@ -5,7 +5,7 @@
       "name": "shader-anime-fire",
       "type": "registry:ui",
       "title": "Shader Anime Fire",
-      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.",
       "files": [
         {
           "path": "shader-anime-fire.tsx",
@@ -18,7 +18,7 @@
       "name": "shader-anime-fire-svelte",
       "type": "registry:ui",
       "title": "Shader Anime Fire",
-      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom, sparks drift above, and the fire reaches for the pointer.",
+      "description": "Cel-shaded WebGL flames for landing heroes — tongues lick up from the bottom in flat bands of heat, and the fire reaches for the pointer.",
       "files": [
         {
           "path": "shader-anime-fire.svelte",
diff --git a/registry/shader-anime-fire/shader-anime-fire-demo.tsx b/registry/shader-anime-fire/shader-anime-fire-demo.tsx
index 5579ef2..f89b6b1 100644
--- a/registry/shader-anime-fire/shader-anime-fire-demo.tsx
+++ b/registry/shader-anime-fire/shader-anime-fire-demo.tsx
@@ -14,7 +14,6 @@ import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
   DARK_COLORS,
-  DEFAULT_EMBERS,
   DEFAULT_HEIGHT,
   DEFAULT_INTENSITY,
   DEFAULT_SPEED,
@@ -45,7 +44,6 @@ export function ShaderAnimeFireDemo() {
       speed: DEFAULT_SPEED,
       intensity: DEFAULT_INTENSITY,
       height: DEFAULT_HEIGHT,
-      embers: DEFAULT_EMBERS,
       interactive: true,
       overlay: true,
       dither: false,
@@ -80,7 +78,6 @@ export function ShaderAnimeFireDemo() {
             speed={props.speed}
             intensity={props.intensity}
             height={props.height}
-            embers={props.embers}
             interactive={props.interactive}
             dither={props.dither}
             pixelSize={props.pixelSize}
@@ -100,8 +97,8 @@ export function ShaderAnimeFireDemo() {
                   Ship something that catches
                 </h3>
                 <p className="mt-3 max-w-sm text-sm leading-relaxed text-foreground/70">
-                  Flames lick up from the floor and sparks drift past the copy.
-                  Move the pointer and the fire reaches for it.
+                  Flames lick up from the floor and leave the copy clear. Move
+                  the pointer and the fire reaches for it.
                 </p>
                 <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
                   <Button type="button">Install</Button>
@@ -128,7 +125,6 @@ export function ShaderAnimeFireDemo() {
           intensity:
             props.intensity === DEFAULT_INTENSITY ? undefined : props.intensity,
           height: props.height === DEFAULT_HEIGHT ? undefined : props.height,
-          embers: props.embers === DEFAULT_EMBERS ? undefined : props.embers,
           interactive: props.interactive ? undefined : false,
           dither: props.dither || undefined,
           pixelSize: props.pixelSize === 1 ? undefined : props.pixelSize,
@@ -171,14 +167,6 @@ export function ShaderAnimeFireDemo() {
           step={0.05}
           onChange={(v) => updateProp("height", v)}
         />
-        <ControlSlider
-          label="Embers"
-          value={props.embers}
-          min={0}
-          max={1}
-          step={0.05}
-          onChange={(v) => updateProp("embers", v)}
-        />
         <ControlSwitch
           label="Copy"
           description="Headline over the fire"
diff --git a/registry/shader-anime-fire/shader-anime-fire-vanilla.ts b/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
index ff8eb6d..63fb0da 100644
--- a/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
+++ b/registry/shader-anime-fire/shader-anime-fire-vanilla.ts
@@ -12,8 +12,6 @@ export type ShaderAnimeFireOptions = {
   intensity?: number
   /** How far the flames climb, 0–1. Default `0.45`. */
   height?: number
-  /** How many sparks drift up, 0–1. `0` turns them off. Default `0.6`. */
-  embers?: number
   /** A plume of heat reaches up toward the pointer. Default `true`. */
   interactive?: boolean
   /** Ordered Bayer pixels instead of smooth flames. Default `false`. */
@@ -44,7 +42,6 @@ const DARK_BASE = "#08090C"
 export const DEFAULT_SPEED = 0.6
 export const DEFAULT_INTENSITY = 1
 export const DEFAULT_HEIGHT = 0.45
-export const DEFAULT_EMBERS = 0.6
 
 function fallback(colors: string[], base: string) {
   const [ember, flame, core] = colors
@@ -77,7 +74,6 @@ uniform vec2 u_resolution;
 uniform float u_time;
 uniform float u_intensity;
 uniform float u_height;
-uniform float u_embers;
 uniform float u_ignite;
 uniform float u_dark;
 uniform float u_dither;
@@ -90,19 +86,13 @@ uniform vec3 u_c1;
 uniform vec3 u_c2;
 uniform vec3 u_base;
 
-// Dave Hoskins' hashes — no sin(), so they stay stable on mobile GPUs.
+// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.
 float hash(vec2 p) {
   vec3 p3 = fract(vec3(p.xyx) * 0.1031);
   p3 += dot(p3, p3.yzx + 33.33);
   return fract((p3.x + p3.y) * p3.z);
 }
 
-vec2 hash2(vec2 p) {
-  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));
-  p3 += dot(p3, p3.yzx + 33.33);
-  return fract((p3.xx + p3.yz) * p3.zy);
-}
-
 float noise(vec2 p) {
   vec2 i = floor(p);
   vec2 f = fract(p);
@@ -177,41 +167,6 @@ float temperature(vec2 uv, float aspect, float t, float plume) {
   return T - smoothstep(1.0, 1.7, y);
 }
 
-// Sparks: three parallax layers of cells scrolling up, one spark in a few.
-float embers(vec2 uv, float aspect, float t, float plume) {
-  if (u_embers <= 0.0) return 0.0;
-  float climb = max(climbOf(), 0.05);
-  float sum = 0.0;
-  for (int i = 0; i < 3; i++) {
-    float fi = float(i);
-    float scale = 8.0 + fi * 7.0;
-    vec2 p = vec2(uv.x * aspect, uv.y) * scale;
-    float column = floor(p.x);
-    float lane = hash(vec2(column, fi * 7.1));
-    p.y -= t * (0.34 - fi * 0.06) * scale * (0.7 + 0.6 * lane);
-
-    vec2 id = floor(p);
-    vec2 h = hash2(id + fi * 17.3);
-    float rate = u_embers * (0.16 + fi * 0.07) * (1.0 + plume * 2.5);
-    if (h.x > rate) continue;
-
-    vec2 c = 0.5 + (h - 0.5) * 0.45;
-    c.x += sin(t * (1.4 + h.y * 2.2) + h.x * 40.0) * 0.16;
-    vec2 d = fract(p) - c;
-    d.y *= 0.5;
-    float r = mix(0.07, 0.13, h.y) * (1.0 - fi * 0.22);
-    float spark = 1.0 - smoothstep(0.0, r, length(d));
-    spark *= spark;
-
-    float twinkle = 0.55 + 0.45 * sin(t * (5.0 + h.y * 9.0) + h.x * 90.0);
-    // Born in the flames, burnt out a little above them.
-    float life = 1.0 - smoothstep(climb * 0.5, climb * 2.6, uv.y);
-    life *= smoothstep(0.0, climb * 0.35, uv.y);
-    sum += spark * twinkle * life * (1.0 - fi * 0.25);
-  }
-  return min(sum, 1.0);
-}
-
 // Flat cel bands, hottest innermost. 'hot' is the core pushed toward white.
 vec3 bands(float T, vec3 hot) {
   float w = 0.012;
@@ -246,9 +201,6 @@ void main() {
   float edge = u_dither > 0.5 ? 0.001 : 0.012;
   float cover = smoothstep(0.0, edge, T) * mix(0.35, 1.0, u_intensity);
 
-  float spark = embers(uv, aspect, t, plume);
-  spark = smoothstep(0.1 + q * 0.15, 0.3 + q * 0.15, spark);
-
   // The whole fire breathes a little, like a real one lighting a room.
   float flicker = 0.86 + 0.14 * noise(vec2(t * 2.3, 4.7));
   float glow = exp(-uv.y / max(climbOf() * 1.7, 0.02) * 3.4) * flicker;
@@ -261,7 +213,6 @@ void main() {
   vec3 hot = mix(u_c2, vec3(1.0), u_dark > 0.5 ? 0.75 : 0.4);
   vec3 col = mix(u_base, mix(u_c0, u_c1, 0.4), glow * (u_dark > 0.5 ? 0.08 : 0.12));
   col = mix(col, bands(T, hot), cover);
-  col = mix(col, u_dark > 0.5 ? mix(u_c1, u_c2, 0.6) : u_c0, spark);
 
   vec3 srgb = linearToSrgb(col);
   if (u_dither < 0.5) srgb += (hash(gl_FragCoord.xy + fract(t)) - 0.5) * 0.006;
@@ -340,9 +291,9 @@ function compile(gl: WebGLRenderingContext, type: number, source: string) {
 }
 
 /**
- * A wall of fire along the bottom edge: turbulent tongues colored by heat,
- * sparks drifting up, and a warm glow that flickers with them. Theme-aware;
- * pauses off-screen and in hidden tabs; holds a still frame under
+ * A wall of cel-shaded fire along the bottom edge: turbulent tongues in
+ * flat bands of heat over a warm, flickering glow. Theme-aware; pauses
+ * off-screen and in hidden tabs; holds a still frame under
  * `prefers-reduced-motion`.
  */
 export function createShaderAnimeFire(
@@ -419,7 +370,6 @@ export function createShaderAnimeFire(
   const uTime = u("u_time")
   const uIntensity = u("u_intensity")
   const uHeight = u("u_height")
-  const uEmbers = u("u_embers")
   const uIgnite = u("u_ignite")
   const uDark = u("u_dark")
   const uDither = u("u_dither")
@@ -508,7 +458,6 @@ export function createShaderAnimeFire(
       numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)
     )
     gl.uniform1f(uHeight, numberOr(options.height, DEFAULT_HEIGHT, 0, 1))
-    gl.uniform1f(uEmbers, numberOr(options.embers, DEFAULT_EMBERS, 0, 1))
     gl.uniform1f(uIgnite, Math.max(ignite, 0.001))
     gl.uniform1f(uDark, dark ? 1 : 0)
     gl.uniform1f(uDither, options.dither ? 1 : 0)
diff --git a/registry/shader-anime-fire/shader-anime-fire.svelte b/registry/shader-anime-fire/shader-anime-fire.svelte
index 61d805b..97f0e71 100644
--- a/registry/shader-anime-fire/shader-anime-fire.svelte
+++ b/registry/shader-anime-fire/shader-anime-fire.svelte
@@ -6,7 +6,6 @@
   import {
     createShaderAnimeFire,
     DARK_FALLBACK,
-    DEFAULT_EMBERS,
     DEFAULT_HEIGHT,
     DEFAULT_INTENSITY,
     DEFAULT_SPEED,
@@ -30,7 +29,6 @@
     speed = DEFAULT_SPEED,
     intensity = DEFAULT_INTENSITY,
     height = DEFAULT_HEIGHT,
-    embers = DEFAULT_EMBERS,
     interactive = true,
     dither = false,
     pixelSize = 1,
@@ -65,7 +63,6 @@
       speed,
       intensity,
       height,
-      embers,
       interactive,
       dither,
       pixelSize,
@@ -92,7 +89,6 @@
       speed,
       intensity,
       height,
-      embers,
       interactive,
       dither,
       pixelSize,
diff --git a/registry/shader-anime-fire/shader-anime-fire.tsx b/registry/shader-anime-fire/shader-anime-fire.tsx
index b4b1f93..7e80ce5 100644
--- a/registry/shader-anime-fire/shader-anime-fire.tsx
+++ b/registry/shader-anime-fire/shader-anime-fire.tsx
@@ -7,7 +7,6 @@ import { cn } from "@/lib/utils"
 import {
   createShaderAnimeFire,
   DARK_FALLBACK,
-  DEFAULT_EMBERS,
   DEFAULT_HEIGHT,
   DEFAULT_INTENSITY,
   DEFAULT_SPEED,
@@ -20,7 +19,6 @@ import {
 export {
   DARK_COLORS,
   DARK_FALLBACK,
-  DEFAULT_EMBERS,
   DEFAULT_HEIGHT,
   DEFAULT_INTENSITY,
   DEFAULT_SPEED,
@@ -41,8 +39,8 @@ export type ShaderAnimeFireProps = Omit<
 }
 
 /**
- * Cel-shaded flames licking up from the bottom edge, with sparks drifting
- * above them. Heat reaches for the pointer. Theme-aware.
+ * Cel-shaded flames licking up from the bottom edge, over a warm flickering
+ * glow. Heat reaches for the pointer. Theme-aware.
  */
 export function ShaderAnimeFire({
   className,
@@ -50,7 +48,6 @@ export function ShaderAnimeFire({
   speed = DEFAULT_SPEED,
   intensity = DEFAULT_INTENSITY,
   height = DEFAULT_HEIGHT,
-  embers = DEFAULT_EMBERS,
   interactive = true,
   dither = false,
   pixelSize = 1,
@@ -84,7 +81,6 @@ export function ShaderAnimeFire({
       speed,
       intensity,
       height,
-      embers,
       interactive,
       dither,
       pixelSize,
@@ -105,24 +101,13 @@ export function ShaderAnimeFire({
       speed,
       intensity,
       height,
-      embers,
       interactive,
       dither,
       pixelSize,
       theme,
       onThemeChange: setIsDark,
     })
-  }, [
-    colors,
-    speed,
-    intensity,
-    height,
-    embers,
-    interactive,
-    dither,
-    pixelSize,
-    theme,
-  ])
+  }, [colors, speed, intensity, height, interactive, dither, pixelSize, theme])
 
   const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK
 
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index b570dee..bf6563c 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -110,7 +110,7 @@ Disambiguation that agents get wrong:
 | --- | --- | --- |
 | Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. |
 | Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
-| Fire, embers, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| Fire, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
 | Quiet heat wash behind copy | `shader-fire` | `shader-anime-fire` when it should be the show |
 | 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
 | Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
@@ -173,7 +173,7 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
-| `shader-anime-fire` | Shaders | Cel-shaded flames and sparks rising from the bottom | React + Svelte |
+| `shader-anime-fire` | Shaders | Cel-shaded flames licking up from the bottom | React + Svelte |
 | `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index a8de6e0..ecb1489 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -155,7 +155,6 @@ type ShaderAnimeFireProps = {
   speed?: number // 0.6
   intensity?: number // 1
   height?: number // 0.45
-  embers?: number // 0.6
   interactive?: boolean // true
   dither?: boolean // false
   pixelSize?: number // 1
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index 69b7c79..efd8c7a 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -145,13 +145,13 @@ Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. S
 
 ## shader-anime-fire
 
-Shader. Cel-shaded flames lick up from the bottom edge, sparks drift above. Ember / flame / core.
+Shader. Cel-shaded flames lick up from the bottom edge in flat bands. Ember / flame / core.
 
 Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
 
 Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). A quiet wash (`shader-fire`).
 
-Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `embers` (0.6), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
 ```tsx
 "use client"
@@ -167,7 +167,7 @@ export function Hero() {
 }
 ```
 
-Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. `embers={0}` turns sparks off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
+Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
 
 ## shader-fire
 

From a09bc5a6b7b66ec17f39a771bd9a1f5461a84cb4 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:59:03 +0530
Subject: [PATCH 33/49] Brighten Shader Gradient in dark mode.

The dark palette moves to brighter blue, violet, magenta and coral, and
on a dark base far less ink bleeds through (the floor rises from 0.45
to 0.82) with a small chroma lift, so the flow glows instead of reading
dull against near-black.
---
 public/r/shader-gradient-svelte.json                | 2 +-
 public/r/shader-gradient.json                       | 2 +-
 registry/shader-gradient/shader-gradient-vanilla.ts | 8 ++++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/r/shader-gradient-svelte.json b/public/r/shader-gradient-svelte.json
index 0fa8244..b871d5b 100644
--- a/public/r/shader-gradient-svelte.json
+++ b/public/r/shader-gradient-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-gradient/shader-gradient.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderGradientOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    blur = DEFAULT_BLUR,\n    intensity = DEFAULT_INTENSITY,\n    grain = DEFAULT_GRAIN,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderGradientInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-gradient\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#3D52F2\", \"#9150F2\", \"#E0479F\", \"#FF7B60\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  // Ink dulls far faster than paper does, so on a dark base only a little\n  // shows, and the color gets a chroma lift to glow against it.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  float floorMix = mix(0.82, 0.45, u_base.x);\n  lab.yz *= mix(1.15, 1.0, u_base.x);\n  lab = mix(u_base, lab, u_intensity * mix(floorMix, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderGradientOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = DEFAULT_SPEED,\n    blur = DEFAULT_BLUR,\n    intensity = DEFAULT_INTENSITY,\n    grain = DEFAULT_GRAIN,\n    interactive = true,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderGradientInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n    })\n  })\n\n  const fallback = $derived(isDark ? DARK_FALLBACK : LIGHT_FALLBACK)\n</script>\n\n<div\n  data-slot=\"shader-gradient\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-gradient.svelte"
     }
diff --git a/public/r/shader-gradient.json b/public/r/shader-gradient.json
index 207beeb..261c06a 100644
--- a/public/r/shader-gradient.json
+++ b/public/r/shader-gradient.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-gradient/shader-gradient.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#2A3BD1\", \"#7A3FD6\", \"#C43A9A\", \"#F26D5B\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderGradientProps = Omit<\n  ShaderGradientOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states — the palette flows\n * through slow warped noise under a film grain. Theme-aware.\n */\nexport function ShaderGradient({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  blur = DEFAULT_BLUR,\n  intensity = DEFAULT_INTENSITY,\n  grain = DEFAULT_GRAIN,\n  interactive = true,\n  theme = \"auto\",\n}: ShaderGradientProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderGradientInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, blur, intensity, grain, interactive, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-gradient\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderGradientTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderGradientOptions = {\n  /**\n   * Up to 4 colors, any CSS hex. The flow cycles through them in order and\n   * back to the first, so neighbours should sit well together.\n   */\n  colors?: string[]\n  /** Flow speed. Default `0.14`. */\n  speed?: number\n  /** Softness, 0–1: higher is broader, calmer bands. Default `0.7`. */\n  blur?: number\n  /** Color strength, 0–1; lower lets the paper / ink show through. Default `0.95`. */\n  intensity?: number\n  /** Film grain, 0–1. `0` turns it off. Default `0.35`. */\n  grain?: number\n  /** The flow swirls gently around the pointer. Default `true`. */\n  interactive?: boolean\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) so light and dark swap with the site theme.\n   */\n  theme?: ShaderGradientTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderGradientInstance = {\n  setOptions: (options: Partial<ShaderGradientOptions>) => void\n  destroy: () => void\n}\n\n/** Peach, butter, sky and lilac, flowing over warm paper. */\nexport const LIGHT_COLORS = [\"#F7A48B\", \"#F9D78E\", \"#9FCBF0\", \"#BBA9EE\"]\n/**\n * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,\n * so every blend on the cycle stays rich instead of passing through grey.\n */\nexport const DARK_COLORS = [\"#3D52F2\", \"#9150F2\", \"#E0479F\", \"#FF7B60\"]\nconst LIGHT_BASE = \"#FBF8F4\"\nconst DARK_BASE = \"#07080B\"\n\nexport const DEFAULT_SPEED = 0.14\nexport const DEFAULT_BLUR = 0.7\nexport const DEFAULT_INTENSITY = 0.95\nexport const DEFAULT_GRAIN = 0.35\n\n/** Film grain for the CSS fallback — the same idea, as an SVG turbulence tile. */\nconst GRAIN_TILE = `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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nfunction fallback(colors: string[], base: string) {\n  const [a, b, c, d] = colors\n  return {\n    backgroundColor: base,\n    backgroundImage: [\n      GRAIN_TILE,\n      `radial-gradient(70% 60% at 18% 22%, ${a} 0%, transparent 70%)`,\n      `radial-gradient(60% 60% at 82% 30%, ${b} 0%, transparent 70%)`,\n      `radial-gradient(70% 60% at 70% 88%, ${c} 0%, transparent 70%)`,\n      `radial-gradient(55% 55% at 12% 86%, ${d} 0%, transparent 70%)`,\n    ].join(\", \"),\n  } as const\n}\n\n/** Shown before the first frame and wherever WebGL isn't available. */\nexport const LIGHT_FALLBACK = fallback(LIGHT_COLORS, LIGHT_BASE)\nexport const DARK_FALLBACK = fallback(DARK_COLORS, DARK_BASE)\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_blur;\nuniform float u_intensity;\nuniform float u_grain;\nuniform float u_grainSeed;\nuniform float u_pixel;\nuniform float u_pointer;\nuniform vec2 u_mouse;\n// Palette stops and the paper / ink underneath, in OKLab.\nuniform vec3 u_c0;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_base;\n\n// Dave Hoskins' hash — no sin(), so it stays stable on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(\n    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),\n    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),\n    u.y\n  );\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\n// Weight of the stop at 'at' on a cyclic 0–1 track: a smoothed hat, so any\n// two neighbouring weights always sum to one.\nfloat stop(float v, float at) {\n  float d = abs(v - at);\n  d = min(d, 1.0 - d);\n  return smoothstep(0.0, 1.0, 1.0 - clamp(d * 4.0, 0.0, 1.0));\n}\n\nvec3 palette(float v) {\n  return u_c0 * stop(v, 0.0) + u_c1 * stop(v, 0.25) +\n         u_c2 * stop(v, 0.5) + u_c3 * stop(v, 0.75);\n}\n\nvec3 oklabToLinear(vec3 c) {\n  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n  l = l * l * l;\n  m = m * m * m;\n  s = s * s * s;\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n  );\n}\n\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  vec3 lo = c * 12.92;\n  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;\n  return mix(lo, hi, step(vec3(0.0031308), c));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float scale = mix(2.0, 0.8, u_blur);\n  vec2 p = vec2(uv.x * aspect, uv.y) * scale;\n  float t = u_time;\n\n  // A soft swirl around the pointer.\n  vec2 d = p - vec2(u_mouse.x * aspect, u_mouse.y) * scale;\n  p += vec2(-d.y, d.x) * exp(-dot(d, d) * 1.4) * 0.4 * u_pointer;\n\n  // Domain warping: noise fed back through itself twice gives slow,\n  // liquid bands that never read as a loop.\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, 0.12 * t)),\n    fbm(p + vec2(5.2, 1.3) - 0.1 * t)\n  );\n  vec2 r = vec2(\n    fbm(p + 2.2 * q + vec2(1.7, 9.2) + 0.07 * t),\n    fbm(p + 2.2 * q + vec2(8.3, 2.8) - 0.06 * t)\n  );\n  float f = fbm(p + 2.0 * r);\n\n  // Where on the palette this pixel sits. The track is cyclic, so wrapping\n  // past the last color flows back into the first without a seam.\n  float v = fract(f * 2.4 + 0.35 * r.x + 0.02 * t);\n  vec3 lab = palette(v);\n\n  // Some of the paper / ink breathes through, so it isn't wall-to-wall color.\n  // Ink dulls far faster than paper does, so on a dark base only a little\n  // shows, and the color gets a chroma lift to glow against it.\n  float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));\n  float floorMix = mix(0.82, 0.45, u_base.x);\n  lab.yz *= mix(1.15, 1.0, u_base.x);\n  lab = mix(u_base, lab, u_intensity * mix(floorMix, 1.0, air));\n\n  vec3 col = linearToSrgb(oklabToLinear(lab));\n\n  // Film grain on a CSS-pixel grid: two hashes averaged for a softer,\n  // more photographic distribution than flat white noise.\n  vec2 cell = floor(gl_FragCoord.xy / u_pixel);\n  float g = (hash(cell + u_grainSeed) + hash(cell.yx - u_grainSeed * 1.7)) * 0.5;\n  col += (g - 0.5) * u_grain * 0.2;\n  // Always a hair of dither, so the smooth ramps never band.\n  col += (hash(cell * 1.31 + u_grainSeed) - 0.5) * 0.004;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Hex → OKLab, so the shader can blend without going muddy. */\nfunction hexToOklab(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  const srgb = Number.isNaN(n)\n    ? [0.5, 0.5, 0.5]\n    : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n  const [r, g, b] = srgb.map((c) =>\n    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4\n  ) as [number, number, number]\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)\n  return [\n    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n  ]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderGradientTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states. The palette flows\n * through slow domain-warped noise, blends in OKLab so neighbours never go\n * muddy, and carries a film grain. Theme-aware; pauses off-screen and in\n * hidden tabs; holds a still frame under `prefers-reduced-motion`.\n */\nexport function createShaderGradient(\n  canvas: HTMLCanvasElement,\n  initial: ShaderGradientOptions = {}\n): ShaderGradientInstance | null {\n  let options: ShaderGradientOptions = {\n    interactive: true,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const target = { x: 0.5, y: 0.5 }\n  // Pointer pull eases in and out, so leaving the hero never snaps.\n  let pull = 0\n  let pullTarget = 0\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderGradient: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const u = (name: string) => gl.getUniformLocation(program, name)\n  const uResolution = u(\"u_resolution\")\n  const uTime = u(\"u_time\")\n  const uBlur = u(\"u_blur\")\n  const uIntensity = u(\"u_intensity\")\n  const uGrain = u(\"u_grain\")\n  const uGrainSeed = u(\"u_grainSeed\")\n  const uPixel = u(\"u_pixel\")\n  const uPointer = u(\"u_pointer\")\n  const uMouse = u(\"u_mouse\")\n  const uStops = [u(\"u_c0\"), u(\"u_c1\"), u(\"u_c2\"), u(\"u_c3\")]\n  const uBase = u(\"u_base\")\n\n  // The gradient is soft enough that one sample per CSS pixel is plenty;\n  // it also keeps the grain the same size on every screen.\n  let pixel = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    pixel = Math.min(window.devicePixelRatio || 1, 1)\n    canvas.width = Math.max(1, Math.floor(w * pixel))\n    canvas.height = Math.max(1, Math.floor(h * pixel))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n    wake()\n  }\n\n  let colorsKey = \"\"\n  const syncColors = () => {\n    const source = options.colors?.length\n      ? options.colors\n      : dark\n        ? DARK_COLORS\n        : LIGHT_COLORS\n    const key = `${source.join()}|${dark}`\n    if (key === colorsKey) return\n    colorsKey = key\n    uStops.forEach((loc, i) => {\n      gl.uniform3fv(loc, hexToOklab(source[i % source.length]!))\n    })\n    gl.uniform3fv(uBase, hexToOklab(dark ? DARK_BASE : LIGHT_BASE))\n  }\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let onScreen = true\n  let raf = 0\n  let last = 0\n  let clock = 0\n\n  const moving = () =>\n    onScreen && !mqReduce.matches && document.visibilityState !== \"hidden\"\n\n  function wake() {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(tick)\n  }\n\n  // An arrow, not a declaration, so TypeScript keeps `gl` narrowed inside.\n  const tick = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const live = moving()\n    if (live) clock += dt\n\n    mouse.x += (target.x - mouse.x) * 0.05\n    mouse.y += (target.y - mouse.y) * 0.05\n    pull += (pullTarget - pull) * 0.04\n\n    syncColors()\n    const speed = numberOr(options.speed, DEFAULT_SPEED, 0, 4)\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, clock * speed * 4)\n    gl.uniform1f(uBlur, numberOr(options.blur, DEFAULT_BLUR, 0, 1))\n    gl.uniform1f(\n      uIntensity,\n      numberOr(options.intensity, DEFAULT_INTENSITY, 0, 1)\n    )\n    gl.uniform1f(uGrain, numberOr(options.grain, DEFAULT_GRAIN, 0, 1))\n    // Grain re-rolls at 24 fps, like film, and holds still when paused.\n    gl.uniform1f(uGrainSeed, (Math.floor(clock * 24) % 997) * 13.7)\n    gl.uniform1f(uPixel, pixel)\n    gl.uniform1f(uPointer, options.interactive === false ? 0 : pull)\n    gl.uniform2f(uMouse, mouse.x, mouse.y)\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n\n    if (live) raf = requestAnimationFrame(tick)\n  }\n\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    wake()\n  })\n  io.observe(canvas)\n  const onVisibility = () => wake()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n  const onReduce = () => wake()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n    wake()\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (options.interactive === false) return\n    const rect = canvas.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    const x = (e.clientX - rect.left) / rect.width\n    const y = 1 - (e.clientY - rect.top) / rect.height\n    const inside = x >= 0 && x <= 1 && y >= 0 && y <= 1\n    pullTarget = inside ? 1 : 0\n    if (inside) {\n      target.x = x\n      target.y = y\n    }\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  resize()\n  wake()\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n      wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      ro.disconnect()\n      io.disconnect()\n      mo.disconnect()\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderGradientProps = Omit<\n  ShaderGradientOptions,\n  \"onThemeChange\"\n> & {\n  className?: string\n}\n\n/**\n * A grainy liquid gradient for heroes and empty states — the palette flows\n * through slow warped noise under a film grain. Theme-aware.\n */\nexport function ShaderGradient({\n  className,\n  colors,\n  speed = DEFAULT_SPEED,\n  blur = DEFAULT_BLUR,\n  intensity = DEFAULT_INTENSITY,\n  grain = DEFAULT_GRAIN,\n  interactive = true,\n  theme = \"auto\",\n}: ShaderGradientProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderGradientInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderGradient(canvas, {\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      blur,\n      intensity,\n      grain,\n      interactive,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [colors, speed, blur, intensity, grain, interactive, theme])\n\n  const fallback = isDark ? DARK_FALLBACK : LIGHT_FALLBACK\n\n  return (\n    <div\n      data-slot=\"shader-gradient\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-gradient.tsx"
     }
diff --git a/registry/shader-gradient/shader-gradient-vanilla.ts b/registry/shader-gradient/shader-gradient-vanilla.ts
index 6df15ab..9ec2f53 100644
--- a/registry/shader-gradient/shader-gradient-vanilla.ts
+++ b/registry/shader-gradient/shader-gradient-vanilla.ts
@@ -36,7 +36,7 @@ export const LIGHT_COLORS = ["#F7A48B", "#F9D78E", "#9FCBF0", "#BBA9EE"]
  * Blue, violet, magenta and coral over near-black ink — a narrow hue arc,
  * so every blend on the cycle stays rich instead of passing through grey.
  */
-export const DARK_COLORS = ["#2A3BD1", "#7A3FD6", "#C43A9A", "#F26D5B"]
+export const DARK_COLORS = ["#3D52F2", "#9150F2", "#E0479F", "#FF7B60"]
 const LIGHT_BASE = "#FBF8F4"
 const DARK_BASE = "#07080B"
 
@@ -185,8 +185,12 @@ void main() {
   vec3 lab = palette(v);
 
   // Some of the paper / ink breathes through, so it isn't wall-to-wall color.
+  // Ink dulls far faster than paper does, so on a dark base only a little
+  // shows, and the color gets a chroma lift to glow against it.
   float air = smoothstep(0.28, 0.72, fbm(p * 0.6 - q + 13.0 + 0.03 * t));
-  lab = mix(u_base, lab, u_intensity * mix(0.45, 1.0, air));
+  float floorMix = mix(0.82, 0.45, u_base.x);
+  lab.yz *= mix(1.15, 1.0, u_base.x);
+  lab = mix(u_base, lab, u_intensity * mix(floorMix, 1.0, air));
 
   vec3 col = linearToSrgb(oklabToLinear(lab));
 

From 6e63a5e3da27b587102557a06e6876adeba252e9 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:59:03 +0530
Subject: [PATCH 34/49] Lighten the scrim behind the Shader Gradient demo copy.

The radial wash behind the headline drops from 40/65% to 30/40%, so it
stops greying out the middle of the gradient.
---
 registry/shader-gradient/shader-gradient-demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/registry/shader-gradient/shader-gradient-demo.tsx b/registry/shader-gradient/shader-gradient-demo.tsx
index b37e01d..873a2fd 100644
--- a/registry/shader-gradient/shader-gradient-demo.tsx
+++ b/registry/shader-gradient/shader-gradient-demo.tsx
@@ -87,7 +87,7 @@ export function ShaderGradientDemo() {
             <>
               <div
                 aria-hidden
-                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-40 dark:opacity-65"
+                className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--background)_0%,transparent_58%)] opacity-30 dark:opacity-40"
               />
               <div className="relative z-10 flex size-full flex-col items-center justify-center px-8 text-center">
                 <p className="text-xs font-medium tracking-[0.2em] text-foreground/55 uppercase">

From 98e588b680185d61d554984bfd9ba082947ed6dc Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 28 Sep 2026 13:59:03 +0530
Subject: [PATCH 35/49] Add the missing Shader Sky OG image.

---
 public/og/docs/components/shader-sky/image.png | Bin 0 -> 45814 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/og/docs/components/shader-sky/image.png

diff --git a/public/og/docs/components/shader-sky/image.png b/public/og/docs/components/shader-sky/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c8b01aec89022a2d5b7c1119fd5394e22abccfa
GIT binary patch
literal 45814
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

literal 0
HcmV?d00001


From 9f8029aa3a14258d7e866bd291ad1ae70d7a7ef5 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Tue, 29 Sep 2026 16:11:09 +0530
Subject: [PATCH 36/49] Fly the docs sidebar marker along an arc between pages.

---
 app/globals.css             |  27 +++++++++
 components/docs-shell.tsx   |  14 ++++-
 components/docs-sidebar.tsx | 118 ++++++++++++++++++------------------
 3 files changed, 99 insertions(+), 60 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 51f695a..9ec07f8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -118,6 +118,33 @@
     animation: 420ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both page-blur-in;
 }
 
+/*
+ * Firefox repaints a blurred snapshot every ~100ms, which stalls anything
+ * else moving during the transition (the sidebar marker skips its arc).
+ * A plain fade keeps it at full frame rate.
+ */
+@supports (-moz-appearance: none) {
+    ::view-transition-old(.page-blur) {
+        animation-name: page-fade-out;
+    }
+
+    ::view-transition-new(.page-blur) {
+        animation-name: page-fade-in;
+    }
+}
+
+@keyframes page-fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes page-fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
 @keyframes page-blur-out {
     to {
         filter: blur(2.5px);
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 84cf764..0358c8d 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -3,6 +3,7 @@
 import type { CSSProperties, ReactNode } from "react"
 import Link from "next/link"
 import { RiHeartFill } from "@remixicon/react"
+import { motion } from "motion/react"
 
 import { DocsSidebar } from "@/components/docs-sidebar"
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
@@ -148,11 +149,20 @@ export function DocsShell({
       >
         <MobileSidebar tree={tree} githubStars={githubStars} />
         <div className="mx-auto flex w-full max-w-[90rem] items-start">
+          {/*
+           * Motion measures shared layouts in page coordinates, and Next
+           * scrolls to the top between its before/after measurements, so
+           * a sticky sidebar's marker would fly in from off-screen. A
+           * `layoutScroll` fixed box is a scroll root it measures in the
+           * viewport instead; `contain: layout` pins that box to the aside.
+           */}
           <aside
             aria-label="Documentation"
-            className="sticky top-0 hidden h-svh w-60 shrink-0 flex-col md:flex"
+            className="sticky top-0 hidden h-svh w-60 shrink-0 [contain:layout] md:block"
           >
-            <SidebarBody tree={tree} githubStars={githubStars} />
+            <motion.div layoutScroll className="fixed inset-0 flex flex-col">
+              <SidebarBody tree={tree} githubStars={githubStars} />
+            </motion.div>
           </aside>
           <main className="flex min-w-0 flex-1 flex-col">
             <header className="flex h-14 items-center gap-2 px-3 md:hidden">
diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 04a10c0..6bc5663 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -3,7 +3,13 @@
 import * as React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { animate, useReducedMotion } from "motion/react"
+import {
+  arc,
+  LayoutGroup,
+  motion,
+  useReducedMotion,
+  type MotionPath,
+} from "motion/react"
 
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
 import { Logo } from "@/components/logo"
@@ -60,27 +66,64 @@ const markSpring = {
   mass: 0.7,
 }
 
+/**
+ * The marker bows left, toward the sidebar's edge. Only ~24px sit between
+ * it and the scroll area's clip, so the bow is capped in pixels instead of
+ * growing with the trip like a plain `arc()` would.
+ */
+const MARK_BOW = 18
+const MARK_STRENGTH = 0.3
+
+const markPath: MotionPath = {
+  interpolateProjection(delta) {
+    // `translate` is where the marker starts relative to its new row:
+    // negative means the old row sat above, so it is travelling down.
+    const distance = Math.hypot(delta.x.translate, delta.y.translate)
+    // A quadratic arc peaks at half its control-point offset.
+    const strength = Math.min(MARK_STRENGTH, (2 * MARK_BOW) / distance)
+    // `arc()` bends relative to travel, so pick the side per trip.
+    const direction = delta.y.translate < 0 ? "ccw" : "cw"
+    return arc({ strength, direction }).interpolateProjection(delta)
+  },
+  animateVisualElement: (...args) =>
+    arc({ strength: MARK_STRENGTH }).animateVisualElement(...args),
+}
+
 /** Room the marker takes before the open page's name. */
 const MARK_GUTTER = "translate-x-[21px]"
 
+/**
+ * The open page's marker. Every page shares one `layoutId`, so when the
+ * open page changes Motion flies the marker along an arc to the new row.
+ * It hangs off the `<li>`, not the button, whose `overflow-hidden` would
+ * clip it mid-flight.
+ */
+function ActiveMark() {
+  const reduce = useReducedMotion() ?? false
 
-function PageItem({
-  node,
-  pathname,
-}: {
-  node: PageNode
-  pathname: string
-}) {
+  return (
+    <motion.span
+      layoutId="docs-sidebar-mark"
+      aria-hidden
+      className="pointer-events-none absolute inset-y-0 left-2 z-10 flex items-center"
+      transition={reduce ? { duration: 0 } : { ...markSpring, path: markPath }}
+    >
+      <Triad />
+    </motion.span>
+  )
+}
+
+function PageItem({ node, pathname }: { node: PageNode; pathname: string }) {
   const active = isCurrent(pathname, node.url)
 
   return (
     <SidebarMenuItem>
+      {active ? <ActiveMark /> : null}
       <SidebarMenuButton
         render={
           <Link href={node.url} aria-label={String(node.name ?? "Page")} />
         }
         isActive={active}
-        data-docs-active={active || undefined}
         className="h-8 gap-0 rounded-lg bg-transparent px-2 font-normal text-foreground/70 transition-colors duration-150 hover:bg-transparent hover:text-foreground active:bg-transparent data-active:bg-transparent data-active:font-medium data-active:text-foreground data-active:hover:bg-transparent"
       >
         {/* The name steps aside for the marker instead of jumping. */}
@@ -103,7 +146,9 @@ function SeparatorItem({ node }: { node: SeparatorNode }) {
   }
 
   return (
-    <SidebarGroupLabel className={headingClassName}>{node.name}</SidebarGroupLabel>
+    <SidebarGroupLabel className={headingClassName}>
+      {node.name}
+    </SidebarGroupLabel>
   )
 }
 
@@ -153,59 +198,16 @@ function NavItems({
   })
 }
 
-/**
- * One marker for the whole list that springs to the open page. It stays
- * mounted across navigations — a shared-layout swap would need both the
- * old and new marker at once, which the page's view transition doesn't
- * reliably allow.
- */
-function NavList({
-  nodes,
-  pathname,
-}: {
-  nodes: TreeNode[]
-  pathname: string
-}) {
-  const listRef = React.useRef<HTMLDivElement>(null)
-  const markRef = React.useRef<HTMLSpanElement>(null)
-  const placed = React.useRef(false)
-  const reduce = useReducedMotion() ?? false
-
-  React.useLayoutEffect(() => {
-    const list = listRef.current
-    const mark = markRef.current
-    if (!list || !mark) return
-    const active = list.querySelector<HTMLElement>("[data-docs-active]")
-    if (!active) {
-      mark.style.opacity = "0"
-      placed.current = false
-      return
-    }
-    const box = list.getBoundingClientRect()
-    const row = active.getBoundingClientRect()
-    const y = row.top - box.top + (row.height - mark.offsetHeight) / 2
-    mark.style.opacity = "1"
-    // Land in place on first paint; spring there on every page after.
-    const jump = !placed.current || reduce
-    placed.current = true
-    // Motion places it either way, so it always knows where the marker is.
-    const flight = animate(mark, { y }, jump ? { duration: 0 } : markSpring)
-    return () => flight.stop()
-  }, [pathname, reduce])
+/** Scopes the marker's `layoutId` so the desktop and mobile lists don't share one. */
+function NavList({ nodes, pathname }: { nodes: TreeNode[]; pathname: string }) {
+  const id = React.useId()
 
   return (
-    <div ref={listRef} className="relative">
-      <span
-        ref={markRef}
-        aria-hidden
-        className="pointer-events-none absolute top-0 left-2 flex opacity-0"
-      >
-        <Triad />
-      </span>
+    <LayoutGroup id={id}>
       <SidebarMenu>
         <NavItems nodes={nodes} pathname={pathname} />
       </SidebarMenu>
-    </div>
+    </LayoutGroup>
   )
 }
 

From fcf01695e406d0023edb66212f2dcb27b3a18f50 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Tue, 29 Sep 2026 16:11:09 +0530
Subject: [PATCH 37/49] Add lightning and a receding cloud deck to Shader Sky.

---
 content/docs/components/shader-sky.mdx    |  18 +-
 public/r/shader-sky-svelte.json           |   2 +-
 public/r/shader-sky.json                  |   2 +-
 registry/shader-sky/shader-sky-demo.tsx   |   9 +
 registry/shader-sky/shader-sky-vanilla.ts | 345 ++++++++++++++++------
 registry/shader-sky/shader-sky.svelte     |   3 +
 registry/shader-sky/shader-sky.tsx        |   6 +-
 7 files changed, 286 insertions(+), 99 deletions(-)

diff --git a/content/docs/components/shader-sky.mdx b/content/docs/components/shader-sky.mdx
index 7a3898e..f5ed836 100644
--- a/content/docs/components/shader-sky.mdx
+++ b/content/docs/components/shader-sky.mdx
@@ -5,7 +5,7 @@ description: A WebGL sky for landing heroes — clear blue with drifting clouds
 
 import { ShaderSkyDemo } from "@/registry/shader-sky/shader-sky-demo"
 
-Not a stock photo. Use it as weather behind a hero so light and dark already feel like a forecast. Open blue in light; a gray storm ceiling in dark. Clouds drift continuously, forming and dissolving like weather. Toggle **Glass** for a transparent window film. Press `d` to switch theme. Turn on **Copy** to drop a headline over the sky.
+Not a stock photo. Use it as weather behind a hero so light and dark already feel like a forecast. Open blue in light; a gray storm ceiling in dark. Clouds sit on a deck that recedes to the horizon — big and sunlit overhead, small and hazy far off — and drift toward you, catching light on the sun side with sky-blue shade on the other. Toggle **Lightning** for storm flashes inside the clouds, or **Glass** for a transparent window film. Press `d` to switch theme. Turn on **Copy** to drop a headline over the sky.
 
 ## Preview
 
@@ -106,6 +106,21 @@ See the same sky through window glass — a transparent dotted film, sky still m
   </FrameworkSvelte>
 </FrameworkCode>
 
+Let the storm flash. Strikes light the clouds from inside every few seconds and stop under reduced motion:
+
+<FrameworkCode>
+  <FrameworkReact>
+    ```tsx
+    <ShaderSky theme="dark" lightning />
+    ```
+  </FrameworkReact>
+  <FrameworkSvelte>
+    ```svelte
+    <ShaderSky theme="dark" lightning />
+    ```
+  </FrameworkSvelte>
+</FrameworkCode>
+
 Fewer, smaller clouds with a mix of sizes:
 
 <FrameworkCode>
@@ -133,6 +148,7 @@ Fewer, smaller clouds with a mix of sizes:
 | `scale`       | `number`                      | `0.4`                            |
 | `variation`   | `number`                      | `0.7`                            |
 | `interactive` | `boolean`                     | `false`                          |
+| `lightning`   | `boolean`                     | `false`                          |
 | `glass`       | `boolean`                     | `false`                          |
 | `glassSize`   | `number`                      | `7`                              |
 | `theme`       | `"light" \| "dark" \| "auto"` | `auto`                           |
diff --git a/public/r/shader-sky-svelte.json b/public/r/shader-sky-svelte.json
index bc4853f..2ab3d8c 100644
--- a/public/r/shader-sky-svelte.json
+++ b/public/r/shader-sky-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-sky/shader-sky.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\nvec2 skyField(vec2 uv, float aspect, float t) {\n  vec2 st = vec2(uv.x * aspect, uv.y);\n  st -= (u_mouse - 0.5) * 0.04;\n\n  float amount = clamp(u_amount, 0.0, 1.0);\n  float scale = clamp(u_scale, 0.0, 1.0);\n  float variation = clamp(u_variation, 0.0, 1.0);\n  float cover = clamp(u_coverage, 0.0, 1.0);\n\n  float freq = mix(2.65, 1.05, scale);\n  vec2 wind = vec2(t * 0.18, t * 0.012);\n  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);\n\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, wind.y)),\n    fbm(p + vec2(5.2, 1.3) - wind.yx)\n  );\n  vec2 r = vec2(\n    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),\n    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)\n  );\n\n  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;\n  float big = fbm(base);\n  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));\n  float n = mix(big, mix(big, small, 0.55), variation);\n  n = n * n * (3.0 - 2.0 * n);\n\n  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;\n  float hi = lo + mix(0.20, 0.13, amount);\n  float density = smoothstep(lo, hi, n);\n\n  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);\n  far = far * far * (3.0 - 2.0 * far);\n  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);\n  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);\n  density *= mix(0.78, 1.14, cover);\n\n  // Sun from upper-right: denser along the light ray = self-shadow.\n  vec2 sun = vec2(0.22, 0.28);\n  float nLit = fbm(base + sun);\n  nLit = nLit * nLit * (3.0 - 2.0 * nLit);\n  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);\n\n  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));\n  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);\n  float shade = 0.40 + lift * 0.50 - under * 0.30;\n  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);\n  shade = clamp(shade, 0.0, 1.0);\n\n  return vec2(clamp(density, 0.0, 1.0), shade);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 field = skyField(uv, aspect, t);\n  float density = field.x;\n  float shade = field.y;\n\n  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);\n  vec3 sky = mix(u_c2, u_c1, h);\n\n  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;\n  vec3 body = mix(u_c4, u_c3, 0.58);\n  vec3 top = mix(u_c3, vec3(1.0), 0.52);\n  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));\n  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);\n  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);\n\n  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));\n  alpha = clamp(alpha, 0.0, 1.0);\n  vec3 col = mix(sky, lit, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderSkyOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.1,\n    coverage = 0.5,\n    intensity = 0.9,\n    amount = 0.5,\n    scale = 0.4,\n    variation = 0.7,\n    interactive = false,\n    glass = false,\n    glassSize = 7,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderSkyInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(skyFallback(colors, isDark))\n</script>\n\n<div\n  data-slot=\"shader-sky\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Storm flashes that light the clouds from inside, every few seconds.\n   * Off under reduced motion. Default false\n   */\n  lightning?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\nuniform float u_flash;\nuniform vec2 u_flashPos;\n\n// Where the horizon sits below the frame; the gap sets how steeply the\n// cloud deck recedes (near clouds overhead, small hazy ones low down).\nconst float HORIZON = -0.38;\n// Sun just past the top-right corner, in frame units.\nconst vec2 SUN = vec2(0.36, 1.06);\n\n// Sin-free hash — stays stable at large coordinates on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\nconst mat2 ROT = mat2(1.6, 1.2, -1.2, 1.6);\n\nfloat fbm5(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = ROT * p + 7.3;\n    a *= 0.5;\n  }\n  return v / 0.96875;\n}\n\nfloat fbm3(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = ROT * p + 3.1;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\nfloat luma(vec3 c) {\n  return dot(c, vec3(0.2126, 0.7152, 0.0722));\n}\n\n// Cloud-deck coordinates: frame point -> where its ray meets the deck.\n// Returns (x, depth) on the plane; depth grows toward the horizon.\nvec2 deck(vec2 frame, float height) {\n  float rise = max(frame.y - HORIZON, 0.02);\n  return vec2(frame.x, 1.0) * (height / rise);\n}\n\nfloat cloudThreshold() {\n  return mix(0.62, 0.44, u_amount) - (u_coverage - 0.5) * 0.12;\n}\n\n// Raw cumulus field at an already-warped point. Distinct clouds come from\n// a low-frequency clump term splitting the deck.\nfloat cloudField(vec2 p) {\n  float base = fbm5(p);\n  float clump = noise(p * mix(0.22, 0.5, u_amount) + 4.2);\n  return base + (clump - 0.5) * mix(0.55, 0.3, u_amount);\n}\n\nfloat cloudThickness(float d, float th) {\n  return smoothstep(th, th + mix(0.1, 0.2, u_coverage), d);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  // Frame space: x centred and aspect-true, y 0 at the bottom edge.\n  vec2 frame = vec2((uv.x - 0.5) * aspect, uv.y);\n  vec2 look = (u_mouse - 0.5) * vec2(0.08, 0.035);\n  vec2 view = frame + look;\n\n  // Storm palettes (cloud darker than the horizon) light tops toward the\n  // sky instead of toward white, and mute the sun.\n  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));\n  float sunAmt = (1.0 - storm * 0.8) * smoothstep(0.25, 0.8, luma(u_c3));\n\n  // --- Sky ---------------------------------------------------------------\n  float h = clamp(uv.y, 0.0, 1.0);\n  vec3 sky = mix(u_c2, u_c1, pow(h, 0.72));\n  vec3 haze = mix(u_c2, vec3(1.0), 0.28 * luma(u_c2));\n  sky = mix(sky, haze, pow(1.0 - h, 3.0) * 0.55);\n\n  vec2 sunFrame = vec2(SUN.x * aspect, SUN.y);\n  float sunDist = length(view - sunFrame);\n  vec3 sunCol = mix(vec3(1.0, 0.96, 0.86), u_c3, 0.25);\n  float glow = exp(-sunDist * 2.4) * 0.34 + exp(-sunDist * 9.0) * 0.3;\n  sky += sunCol * glow * sunAmt;\n\n  // --- High cirrus: a slower, farther deck for parallax ------------------\n  vec2 hi = deck(view, 2.6) * mix(1.1, 0.55, u_scale);\n  hi += vec2(t * 0.16, -t * 0.05);\n  float streak = fbm3(vec2(hi.x * 0.55 + hi.y * 0.25, hi.y * 2.6));\n  float cirrus = smoothstep(0.56, 0.86, streak) * smoothstep(-0.1, 0.5, h);\n  cirrus *= mix(0.1, 0.34, u_variation) * (1.0 - storm * 0.6);\n  sky = mix(sky, mix(haze, vec3(1.0), 0.5 * (1.0 - storm)), cirrus);\n\n  // --- Cumulus deck ------------------------------------------------------\n  float freq = mix(3.4, 1.3, u_scale);\n  vec2 plane = deck(view, 1.0);\n  float depth = plane.y;\n  // Wind carries clouds sideways and slowly toward the viewer.\n  vec2 wind = vec2(t * 0.34, -t * 0.22);\n  vec2 q = plane * freq + wind;\n\n  // Far clouds shrink on screen, so soften their edges to stay clean.\n  float edge = 0.012 + 0.014 * depth;\n  // A gentle warp gives the masses lobes without smearing them into paint.\n  vec2 w = vec2(fbm3(q * 0.45 + vec2(1.7, 9.2) + t * 0.05),\n                fbm3(q * 0.45 + vec2(8.3, 2.8) - t * 0.04)) - 0.5;\n  vec2 p = q + w * 0.9;\n\n  float th = cloudThreshold();\n  float d = cloudField(p);\n  // Billowy edges: small puffs eat into the rim, never the core.\n  float puff = fbm3(p * 3.4 + vec2(t * 0.12, 0.0));\n  d -= (1.0 - smoothstep(th - 0.05, th + 0.2, d)) * (puff - 0.45) * mix(0.12, 0.4, u_variation);\n\n  float mask = smoothstep(th, th + edge, d);\n  float thick = cloudThickness(d, th);\n\n  // Compare the cloud here with the cloud toward the sun: thinning ahead\n  // means a sun-facing flank (lit), thickening means the far side (shade),\n  // and a flat interior settles on the body tone.\n  // The warp barely changes over these short steps, so reuse it.\n  vec2 toSun = normalize(vec2(0.8, -0.6)) * 0.14;\n  float ahead = cloudThickness(cloudField(p + toSun), th) * 0.45;\n  ahead += cloudThickness(cloudField(p + toSun * 2.4), th) * 0.35;\n  ahead += cloudThickness(cloudField(p + toSun * 4.0), th) * 0.2;\n  // Soft lobes inside the body catch light so big clouds never go flat.\n  float lobes = fbm3(q * 2.3 + vec2(11.0 + t * 0.1, 4.0));\n  float light = 0.63 + (thick - ahead) * 1.1 - thick * 0.08;\n  light += (lobes - 0.45) * 0.32 * thick;\n  light = clamp(light, 0.0, 1.0);\n\n  // Painterly tone bands: shadow -> body -> sunlit.\n  vec3 shadowCol = mix(u_c4, u_c1, mix(0.42, 0.1, storm));\n  shadowCol *= mix(0.92, 0.78, storm);\n  vec3 bodyCol = mix(u_c4, u_c3, 0.55);\n  vec3 litCol = mix(u_c3, vec3(1.0), 0.45 * luma(u_c3));\n  litCol = mix(litCol, mix(u_c3, u_c2, 0.28), storm);\n  litCol = mix(litCol, litCol * sunCol, sunAmt * 0.6);\n\n  float b1 = smoothstep(0.3, 0.44, light);\n  float b2 = smoothstep(0.6, 0.72, light);\n  vec3 cloud = mix(shadowCol, bodyCol, b1);\n  cloud = mix(cloud, litCol, b2);\n\n  // Silver lining where thin edges face the sun.\n  float rim = mask * (1.0 - thick) * exp(-sunDist * 1.1);\n  cloud += mix(sunCol, u_c2, storm) * rim * 0.55 * (0.4 + sunAmt);\n\n  // Lightning, lit from inside the deck.\n  if (u_flash > 0.0) {\n    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y);\n    float bloom = exp(-dot(view - fp, view - fp) * 3.2);\n    vec3 bolt = vec3(0.86, 0.9, 1.0);\n    cloud += bolt * u_flash * bloom * (0.25 + thick * 0.95);\n    sky += bolt * u_flash * (0.05 + bloom * 0.12);\n  }\n\n  // Distance haze swallows far clouds into the horizon.\n  float fog = smoothstep(1.3, 3.4, depth);\n  cloud = mix(cloud, haze, fog * 0.7);\n\n  float alpha = mask * mix(0.62, 1.0, u_intensity) * (1.0 - fog * 0.45);\n  vec3 col = mix(sky, cloud, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(luma(col)), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"lightning\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    lightning: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uFlash = gl.getUniformLocation(program, \"u_flash\")\n  const uFlashPos = gl.getUniformLocation(program, \"u_flashPos\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.\n  const strike = { at: 0, next: 0, x: 0, y: 0 }\n  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))\n  const flashAt = (now: number) => {\n    if (!options.lightning || reduce) {\n      strike.next = 0\n      return 0\n    }\n    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500\n    if (now >= strike.next) {\n      strike.at = now\n      strike.next = now + 4000 + Math.random() * 6000\n      strike.x = (Math.random() - 0.5) * 0.9\n      strike.y = 0.55 + Math.random() * 0.35\n    }\n    if (strike.at === 0) return 0\n    const s = (now - strike.at) / 1000\n    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.uniform1f(uFlash, flashAt(now))\n    gl.uniform2f(uFlashPos, strike.x, strike.y)\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderSkyOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.1,\n    coverage = 0.5,\n    intensity = 0.9,\n    amount = 0.5,\n    scale = 0.4,\n    variation = 0.7,\n    interactive = false,\n    lightning = false,\n    glass = false,\n    glassSize = 7,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderSkyInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(skyFallback(colors, isDark))\n</script>\n\n<div\n  data-slot=\"shader-sky\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-sky.svelte"
     }
diff --git a/public/r/shader-sky.json b/public/r/shader-sky.json
index 57f3383..7c7dae5 100644
--- a/public/r/shader-sky.json
+++ b/public/r/shader-sky.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-sky/shader-sky.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\n\nfloat fbm(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);\n  for (int i = 0; i < 4; i++) {\n    v += a * noise(p);\n    p = m * p;\n    a *= 0.5;\n  }\n  return v;\n}\n\nvec2 skyField(vec2 uv, float aspect, float t) {\n  vec2 st = vec2(uv.x * aspect, uv.y);\n  st -= (u_mouse - 0.5) * 0.04;\n\n  float amount = clamp(u_amount, 0.0, 1.0);\n  float scale = clamp(u_scale, 0.0, 1.0);\n  float variation = clamp(u_variation, 0.0, 1.0);\n  float cover = clamp(u_coverage, 0.0, 1.0);\n\n  float freq = mix(2.65, 1.05, scale);\n  vec2 wind = vec2(t * 0.18, t * 0.012);\n  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);\n\n  vec2 q = vec2(\n    fbm(p + vec2(0.0, wind.y)),\n    fbm(p + vec2(5.2, 1.3) - wind.yx)\n  );\n  vec2 r = vec2(\n    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),\n    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)\n  );\n\n  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;\n  float big = fbm(base);\n  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));\n  float n = mix(big, mix(big, small, 0.55), variation);\n  n = n * n * (3.0 - 2.0 * n);\n\n  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;\n  float hi = lo + mix(0.20, 0.13, amount);\n  float density = smoothstep(lo, hi, n);\n\n  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);\n  far = far * far * (3.0 - 2.0 * far);\n  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);\n  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);\n  density *= mix(0.78, 1.14, cover);\n\n  // Sun from upper-right: denser along the light ray = self-shadow.\n  vec2 sun = vec2(0.22, 0.28);\n  float nLit = fbm(base + sun);\n  nLit = nLit * nLit * (3.0 - 2.0 * nLit);\n  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);\n\n  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));\n  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);\n  float shade = 0.40 + lift * 0.50 - under * 0.30;\n  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);\n  shade = clamp(shade, 0.0, 1.0);\n\n  return vec2(clamp(density, 0.0, 1.0), shade);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 field = skyField(uv, aspect, t);\n  float density = field.x;\n  float shade = field.y;\n\n  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);\n  vec3 sky = mix(u_c2, u_c1, h);\n\n  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;\n  vec3 body = mix(u_c4, u_c3, 0.58);\n  vec3 top = mix(u_c3, vec3(1.0), 0.52);\n  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));\n  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);\n  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);\n\n  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));\n  alpha = clamp(alpha, 0.0, 1.0);\n  vec3 col = mix(sky, lit, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderSkyProps = Omit<ShaderSkyOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function ShaderSky({\n  className,\n  colors,\n  speed = 0.1,\n  coverage = 0.5,\n  intensity = 0.9,\n  amount = 0.5,\n  scale = 0.4,\n  variation = 0.7,\n  interactive = false,\n  glass = false,\n  glassSize = 7,\n  theme = \"auto\",\n}: ShaderSkyProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderSkyInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    coverage,\n    intensity,\n    amount,\n    scale,\n    variation,\n    interactive,\n    glass,\n    glassSize,\n    theme,\n  ])\n\n  const fallback = skyFallback(colors, isDark)\n\n  return (\n    <div\n      data-slot=\"shader-sky\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Storm flashes that light the clouds from inside, every few seconds.\n   * Off under reduced motion. Default false\n   */\n  lightning?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\nuniform float u_flash;\nuniform vec2 u_flashPos;\n\n// Where the horizon sits below the frame; the gap sets how steeply the\n// cloud deck recedes (near clouds overhead, small hazy ones low down).\nconst float HORIZON = -0.38;\n// Sun just past the top-right corner, in frame units.\nconst vec2 SUN = vec2(0.36, 1.06);\n\n// Sin-free hash — stays stable at large coordinates on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\nconst mat2 ROT = mat2(1.6, 1.2, -1.2, 1.6);\n\nfloat fbm5(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = ROT * p + 7.3;\n    a *= 0.5;\n  }\n  return v / 0.96875;\n}\n\nfloat fbm3(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = ROT * p + 3.1;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\nfloat luma(vec3 c) {\n  return dot(c, vec3(0.2126, 0.7152, 0.0722));\n}\n\n// Cloud-deck coordinates: frame point -> where its ray meets the deck.\n// Returns (x, depth) on the plane; depth grows toward the horizon.\nvec2 deck(vec2 frame, float height) {\n  float rise = max(frame.y - HORIZON, 0.02);\n  return vec2(frame.x, 1.0) * (height / rise);\n}\n\nfloat cloudThreshold() {\n  return mix(0.62, 0.44, u_amount) - (u_coverage - 0.5) * 0.12;\n}\n\n// Raw cumulus field at an already-warped point. Distinct clouds come from\n// a low-frequency clump term splitting the deck.\nfloat cloudField(vec2 p) {\n  float base = fbm5(p);\n  float clump = noise(p * mix(0.22, 0.5, u_amount) + 4.2);\n  return base + (clump - 0.5) * mix(0.55, 0.3, u_amount);\n}\n\nfloat cloudThickness(float d, float th) {\n  return smoothstep(th, th + mix(0.1, 0.2, u_coverage), d);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  // Frame space: x centred and aspect-true, y 0 at the bottom edge.\n  vec2 frame = vec2((uv.x - 0.5) * aspect, uv.y);\n  vec2 look = (u_mouse - 0.5) * vec2(0.08, 0.035);\n  vec2 view = frame + look;\n\n  // Storm palettes (cloud darker than the horizon) light tops toward the\n  // sky instead of toward white, and mute the sun.\n  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));\n  float sunAmt = (1.0 - storm * 0.8) * smoothstep(0.25, 0.8, luma(u_c3));\n\n  // --- Sky ---------------------------------------------------------------\n  float h = clamp(uv.y, 0.0, 1.0);\n  vec3 sky = mix(u_c2, u_c1, pow(h, 0.72));\n  vec3 haze = mix(u_c2, vec3(1.0), 0.28 * luma(u_c2));\n  sky = mix(sky, haze, pow(1.0 - h, 3.0) * 0.55);\n\n  vec2 sunFrame = vec2(SUN.x * aspect, SUN.y);\n  float sunDist = length(view - sunFrame);\n  vec3 sunCol = mix(vec3(1.0, 0.96, 0.86), u_c3, 0.25);\n  float glow = exp(-sunDist * 2.4) * 0.34 + exp(-sunDist * 9.0) * 0.3;\n  sky += sunCol * glow * sunAmt;\n\n  // --- High cirrus: a slower, farther deck for parallax ------------------\n  vec2 hi = deck(view, 2.6) * mix(1.1, 0.55, u_scale);\n  hi += vec2(t * 0.16, -t * 0.05);\n  float streak = fbm3(vec2(hi.x * 0.55 + hi.y * 0.25, hi.y * 2.6));\n  float cirrus = smoothstep(0.56, 0.86, streak) * smoothstep(-0.1, 0.5, h);\n  cirrus *= mix(0.1, 0.34, u_variation) * (1.0 - storm * 0.6);\n  sky = mix(sky, mix(haze, vec3(1.0), 0.5 * (1.0 - storm)), cirrus);\n\n  // --- Cumulus deck ------------------------------------------------------\n  float freq = mix(3.4, 1.3, u_scale);\n  vec2 plane = deck(view, 1.0);\n  float depth = plane.y;\n  // Wind carries clouds sideways and slowly toward the viewer.\n  vec2 wind = vec2(t * 0.34, -t * 0.22);\n  vec2 q = plane * freq + wind;\n\n  // Far clouds shrink on screen, so soften their edges to stay clean.\n  float edge = 0.012 + 0.014 * depth;\n  // A gentle warp gives the masses lobes without smearing them into paint.\n  vec2 w = vec2(fbm3(q * 0.45 + vec2(1.7, 9.2) + t * 0.05),\n                fbm3(q * 0.45 + vec2(8.3, 2.8) - t * 0.04)) - 0.5;\n  vec2 p = q + w * 0.9;\n\n  float th = cloudThreshold();\n  float d = cloudField(p);\n  // Billowy edges: small puffs eat into the rim, never the core.\n  float puff = fbm3(p * 3.4 + vec2(t * 0.12, 0.0));\n  d -= (1.0 - smoothstep(th - 0.05, th + 0.2, d)) * (puff - 0.45) * mix(0.12, 0.4, u_variation);\n\n  float mask = smoothstep(th, th + edge, d);\n  float thick = cloudThickness(d, th);\n\n  // Compare the cloud here with the cloud toward the sun: thinning ahead\n  // means a sun-facing flank (lit), thickening means the far side (shade),\n  // and a flat interior settles on the body tone.\n  // The warp barely changes over these short steps, so reuse it.\n  vec2 toSun = normalize(vec2(0.8, -0.6)) * 0.14;\n  float ahead = cloudThickness(cloudField(p + toSun), th) * 0.45;\n  ahead += cloudThickness(cloudField(p + toSun * 2.4), th) * 0.35;\n  ahead += cloudThickness(cloudField(p + toSun * 4.0), th) * 0.2;\n  // Soft lobes inside the body catch light so big clouds never go flat.\n  float lobes = fbm3(q * 2.3 + vec2(11.0 + t * 0.1, 4.0));\n  float light = 0.63 + (thick - ahead) * 1.1 - thick * 0.08;\n  light += (lobes - 0.45) * 0.32 * thick;\n  light = clamp(light, 0.0, 1.0);\n\n  // Painterly tone bands: shadow -> body -> sunlit.\n  vec3 shadowCol = mix(u_c4, u_c1, mix(0.42, 0.1, storm));\n  shadowCol *= mix(0.92, 0.78, storm);\n  vec3 bodyCol = mix(u_c4, u_c3, 0.55);\n  vec3 litCol = mix(u_c3, vec3(1.0), 0.45 * luma(u_c3));\n  litCol = mix(litCol, mix(u_c3, u_c2, 0.28), storm);\n  litCol = mix(litCol, litCol * sunCol, sunAmt * 0.6);\n\n  float b1 = smoothstep(0.3, 0.44, light);\n  float b2 = smoothstep(0.6, 0.72, light);\n  vec3 cloud = mix(shadowCol, bodyCol, b1);\n  cloud = mix(cloud, litCol, b2);\n\n  // Silver lining where thin edges face the sun.\n  float rim = mask * (1.0 - thick) * exp(-sunDist * 1.1);\n  cloud += mix(sunCol, u_c2, storm) * rim * 0.55 * (0.4 + sunAmt);\n\n  // Lightning, lit from inside the deck.\n  if (u_flash > 0.0) {\n    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y);\n    float bloom = exp(-dot(view - fp, view - fp) * 3.2);\n    vec3 bolt = vec3(0.86, 0.9, 1.0);\n    cloud += bolt * u_flash * bloom * (0.25 + thick * 0.95);\n    sky += bolt * u_flash * (0.05 + bloom * 0.12);\n  }\n\n  // Distance haze swallows far clouds into the horizon.\n  float fog = smoothstep(1.3, 3.4, depth);\n  cloud = mix(cloud, haze, fog * 0.7);\n\n  float alpha = mask * mix(0.62, 1.0, u_intensity) * (1.0 - fog * 0.45);\n  vec3 col = mix(sky, cloud, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(luma(col)), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"lightning\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    lightning: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uFlash = gl.getUniformLocation(program, \"u_flash\")\n  const uFlashPos = gl.getUniformLocation(program, \"u_flashPos\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.\n  const strike = { at: 0, next: 0, x: 0, y: 0 }\n  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))\n  const flashAt = (now: number) => {\n    if (!options.lightning || reduce) {\n      strike.next = 0\n      return 0\n    }\n    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500\n    if (now >= strike.next) {\n      strike.at = now\n      strike.next = now + 4000 + Math.random() * 6000\n      strike.x = (Math.random() - 0.5) * 0.9\n      strike.y = 0.55 + Math.random() * 0.35\n    }\n    if (strike.at === 0) return 0\n    const s = (now - strike.at) / 1000\n    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.uniform1f(uFlash, flashAt(now))\n    gl.uniform2f(uFlashPos, strike.x, strike.y)\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderSkyProps = Omit<ShaderSkyOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark, with optional lightning. Optional window-glass film.\n */\nexport function ShaderSky({\n  className,\n  colors,\n  speed = 0.1,\n  coverage = 0.5,\n  intensity = 0.9,\n  amount = 0.5,\n  scale = 0.4,\n  variation = 0.7,\n  interactive = false,\n  lightning = false,\n  glass = false,\n  glassSize = 7,\n  theme = \"auto\",\n}: ShaderSkyProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderSkyInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    coverage,\n    intensity,\n    amount,\n    scale,\n    variation,\n    interactive,\n    lightning,\n    glass,\n    glassSize,\n    theme,\n  ])\n\n  const fallback = skyFallback(colors, isDark)\n\n  return (\n    <div\n      data-slot=\"shader-sky\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-sky.tsx"
     }
diff --git a/registry/shader-sky/shader-sky-demo.tsx b/registry/shader-sky/shader-sky-demo.tsx
index 0cec085..42e1f43 100644
--- a/registry/shader-sky/shader-sky-demo.tsx
+++ b/registry/shader-sky/shader-sky-demo.tsx
@@ -25,6 +25,7 @@ const DEFAULTS = {
   scale: 0.4,
   variation: 0.7,
   interactive: false,
+  lightning: false,
   glass: false,
   glassSize: 7,
   overlay: false,
@@ -50,6 +51,7 @@ export function ShaderSkyDemo() {
             scale={props.scale}
             variation={props.variation}
             interactive={props.interactive}
+            lightning={props.lightning}
             glass={props.glass}
             glassSize={props.glassSize}
             colors={props.colors}
@@ -99,6 +101,7 @@ export function ShaderSkyDemo() {
           scale: props.scale,
           variation: props.variation,
           interactive: props.interactive ? true : undefined,
+          lightning: props.lightning ? true : undefined,
           glass: props.glass ? true : undefined,
           glassSize: props.glass ? props.glassSize : undefined,
           colors: props.colors,
@@ -170,6 +173,12 @@ export function ShaderSkyDemo() {
           checked={props.interactive}
           onChange={(v) => updateProp("interactive", v)}
         />
+        <ControlSwitch
+          label="Lightning"
+          description="Storm flashes inside the clouds"
+          checked={props.lightning}
+          onChange={(v) => updateProp("lightning", v)}
+        />
         <ControlSwitch
           label="Glass"
           description="Window film over the sky"
diff --git a/registry/shader-sky/shader-sky-vanilla.ts b/registry/shader-sky/shader-sky-vanilla.ts
index 9c79bf9..5432df0 100644
--- a/registry/shader-sky/shader-sky-vanilla.ts
+++ b/registry/shader-sky/shader-sky-vanilla.ts
@@ -17,6 +17,11 @@ export type ShaderSkyOptions = {
   variation?: number
   /** Follow the pointer gently. Default false */
   interactive?: boolean
+  /**
+   * Storm flashes that light the clouds from inside, every few seconds.
+   * Off under reduced motion. Default false
+   */
+  lightning?: boolean
   /**
    * Window glass — a transparent dotted film over the sky.
    * Default false
@@ -91,6 +96,14 @@ void main() {
 }
 `
 
+/**
+ * Volumetric cumulus: rays from the viewer march through a slab of cloud
+ * between BASE and TOP. Density is 3D noise shaped by a height profile and
+ * cut back to a slow 2D coverage map, so clouds billow with clear sky
+ * between them. Sunlight is attenuated
+ * toward the sun (Beer–Lambert) and scattered with a two-lobe phase, so
+ * edges near the sun glow and thick cores go gray underneath.
+ */
 const FRAG = `
 precision highp float;
 
@@ -109,85 +122,80 @@ uniform vec3 u_c2;
 uniform vec3 u_c3;
 uniform vec3 u_c4;
 uniform vec2 u_mouse;
+uniform float u_flash;
+uniform vec2 u_flashPos;
+uniform sampler2D u_noise;
+
+// Cloud slab, in world units above the viewer.
+const float BASE = 1.0;
+const float TOP = 1.9;
+// Past this distance the layer is haze, not clouds.
+const float FAR = 34.0;
+const int STEPS = 36;
+const int LIGHT_STEPS = 3;
+// Horizon just inside the bottom edge, like a photo taken from a hill.
+const float TILT = 0.46;
 
 float hash(vec2 p) {
-  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
 }
 
-float noise(vec2 p) {
+// Value noise from a 256² random texture: one lookup per sample.
+float noise2(vec2 p) {
   vec2 i = floor(p);
   vec2 f = fract(p);
-  float a = hash(i);
-  float b = hash(i + vec2(1.0, 0.0));
-  float c = hash(i + vec2(0.0, 1.0));
-  float d = hash(i + vec2(1.0, 1.0));
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+  f = f * f * (3.0 - 2.0 * f);
+  return texture2D(u_noise, (i + f + 0.5) / 256.0).x;
 }
 
-float fbm(vec2 p) {
-  float v = 0.0;
-  float a = 0.5;
-  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
-  for (int i = 0; i < 4; i++) {
-    v += a * noise(p);
-    p = m * p;
-    a *= 0.5;
-  }
-  return v;
+// 3D value noise: the texture's green channel is red offset by (37, 239),
+// so one lookup returns two neighbouring z slices.
+float noise3(vec3 p) {
+  vec3 i = floor(p);
+  vec3 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  vec2 uv = i.xy + vec2(37.0, 239.0) * i.z + f.xy;
+  vec2 rg = texture2D(u_noise, (uv + 0.5) / 256.0).yx;
+  return mix(rg.x, rg.y, f.z);
+}
+
+float luma(vec3 c) {
+  return dot(c, vec3(0.2126, 0.7152, 0.0722));
+}
+
+// Henyey–Greenstein, scaled so isotropic scattering is 1.
+float phaseHG(float mu, float g) {
+  float g2 = g * g;
+  return (1.0 - g2) / pow(1.0 + g2 - 2.0 * g * mu, 1.5);
 }
 
-vec2 skyField(vec2 uv, float aspect, float t) {
-  vec2 st = vec2(uv.x * aspect, uv.y);
-  st -= (u_mouse - 0.5) * 0.04;
-
-  float amount = clamp(u_amount, 0.0, 1.0);
-  float scale = clamp(u_scale, 0.0, 1.0);
-  float variation = clamp(u_variation, 0.0, 1.0);
-  float cover = clamp(u_coverage, 0.0, 1.0);
-
-  float freq = mix(2.65, 1.05, scale);
-  vec2 wind = vec2(t * 0.18, t * 0.012);
-  vec2 p = vec2(st.x, st.y * 1.18) * freq + vec2(wind.x, 0.0);
-
-  vec2 q = vec2(
-    fbm(p + vec2(0.0, wind.y)),
-    fbm(p + vec2(5.2, 1.3) - wind.yx)
-  );
-  vec2 r = vec2(
-    fbm(p + q * 1.35 + vec2(1.7, 9.2) + wind * 0.4),
-    fbm(p + q * 1.35 + vec2(8.3, 2.8) - wind * 0.28)
-  );
-
-  vec2 base = p * 0.58 + r * 1.15 + wind * 0.2;
-  float big = fbm(base);
-  float small = fbm(p * mix(2.2, 1.35, scale) + q * 0.7 + vec2(t * 0.26, 0.1));
-  float n = mix(big, mix(big, small, 0.55), variation);
-  n = n * n * (3.0 - 2.0 * n);
-
-  float lo = mix(0.42, 0.24, amount) - (cover - 0.5) * 0.10;
-  float hi = lo + mix(0.20, 0.13, amount);
-  float density = smoothstep(lo, hi, n);
-
-  float far = fbm(st * freq * 0.38 + vec2(t * 0.09, 0.3) + 3.1);
-  far = far * far * (3.0 - 2.0 * far);
-  float farC = smoothstep(lo - 0.04, hi - 0.02, far) * mix(0.16, 0.42, amount);
-  density = clamp(density + farC * (1.0 - density * 0.4), 0.0, 1.0);
-  density *= mix(0.78, 1.14, cover);
-
-  // Sun from upper-right: denser along the light ray = self-shadow.
-  vec2 sun = vec2(0.22, 0.28);
-  float nLit = fbm(base + sun);
-  nLit = nLit * nLit * (3.0 - 2.0 * nLit);
-  float lift = clamp((n - nLit) * 2.6, -1.0, 1.0);
-
-  float mottling = fbm(p * 3.15 + q * 0.35 + vec2(2.4, -1.1));
-  float under = smoothstep(0.22, 0.86, n) * (1.0 - st.y * 0.48);
-  float shade = 0.40 + lift * 0.50 - under * 0.30;
-  shade = mix(shade, shade * mix(0.58, 1.32, mottling), 0.52);
-  shade = clamp(shade, 0.0, 1.0);
-
-  return vec2(clamp(density, 0.0, 1.0), shade);
+// Local coverage: a slow 2D weather map splits the sky into distinct
+// clouds with clear gaps between them.
+float coverageAt(vec2 xz) {
+  float weather = noise2(xz * mix(0.14, 0.32, u_amount) + 13.7);
+  float cov = mix(0.22, 0.72, u_coverage);
+  return clamp(cov + (weather - 0.5) * mix(1.0, 0.55, u_amount), 0.0, 1.0);
+}
+
+// Cumulus density: 3D fbm shaped by a height profile (flat-ish base,
+// billowing top), then cut back to the local coverage.
+float density(vec3 q, float hf, float cov, float t, float fine) {
+  float shape = smoothstep(0.0, 0.14, hf) * (1.0 - smoothstep(0.35, 1.0, hf));
+  float n = noise3(q) * 0.52;
+  n += noise3(q * 2.03 + 3.1) * 0.27;
+  n += noise3(q * 4.07 + 7.7) * 0.14;
+  n += fine * noise3(q * 8.3 + 1.9) * 0.1;
+  n /= 0.93 + fine * 0.1;
+  float d = n * shape;
+  d = clamp((d - (1.0 - cov)) / max(cov, 0.05), 0.0, 1.0);
+  if (fine > 0.5 && d > 0.0) {
+    // Wispy erosion at the rims, rising slowly like convection.
+    float e = noise3(q * 6.1 + vec3(0.0, -t * 0.6, 0.0));
+    d = clamp(d - e * mix(0.08, 0.26, u_variation) * (1.0 - d), 0.0, 1.0);
+  }
+  return d;
 }
 
 void main() {
@@ -201,39 +209,105 @@ void main() {
     uv += glassLocal * 0.0032;
   }
 
-  vec2 field = skyField(uv, aspect, t);
-  float density = field.x;
-  float shade = field.y;
-
-  float h = pow(clamp(uv.y, 0.0, 1.0), 0.76);
-  vec3 sky = mix(u_c2, u_c1, h);
+  vec2 s = (uv - 0.5) * vec2(aspect, 1.0);
+  s += (u_mouse - 0.5) * vec2(0.06, 0.03);
+  vec3 dir = normalize(vec3(s.x, s.y + TILT, 1.0));
+  vec3 sunDir = normalize(vec3(0.85, 0.95, 1.0));
+  float mu = dot(dir, sunDir);
+
+  // Storm palettes (cloud darker than the horizon) mute the sun.
+  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));
+  float sunAmt = 1.0 - storm * 0.75;
+  vec3 sunTint = mix(vec3(1.0, 0.96, 0.88), u_c3, 0.3);
+
+  // --- Sky ---------------------------------------------------------------
+  // Below the horizon there is only haze.
+  float up = clamp(dir.y, 0.0, 1.0);
+  vec3 sky = mix(u_c2, u_c1, pow(smoothstep(0.0, 0.85, up), 0.6));
+  vec3 haze = mix(u_c2, vec3(1.0), 0.3 * luma(u_c2));
+  sky = mix(sky, haze, exp(-up * 9.0) * 0.6);
+  float glow = pow(max(mu, 0.0), 8.0) * 0.14 + pow(max(mu, 0.0), 120.0) * 0.3;
+  sky += sunTint * glow * sunAmt;
+
+  // --- Clouds ------------------------------------------------------------
+  float freq = mix(2.2, 0.9, u_scale);
+  // Wind carries the field sideways and toward the viewer.
+  vec3 drift = vec3(t * 0.5, 0.0, t * 0.2);
+  float sigma = mix(10.0, 26.0, u_intensity);
+  vec3 sunLight = u_c3 * mix(1.12, 1.0, storm) * mix(vec3(1.0), sunTint, sunAmt * 0.5);
+  float phase = mix(phaseHG(mu, -0.2), phaseHG(mu, 0.7), 0.12);
+
+  vec3 L = vec3(0.0);
+  float T = 1.0;
+  float hitAt = 0.0;
+  if (dir.y > 0.02) {
+    float t0 = BASE / dir.y;
+    if (t0 < FAR) {
+      float t1 = min(TOP / dir.y, t0 + 5.0);
+      float dt = (t1 - t0) / float(STEPS);
+      // Jitter the start per pixel so the steps don't band.
+      float tt = t0 + dt * hash(gl_FragCoord.xy);
+      for (int i = 0; i < STEPS; i++) {
+        vec3 p = dir * tt;
+        vec3 q = p * freq + drift;
+        float hf = (p.y - BASE) / (TOP - BASE);
+        float cov = coverageAt(q.xz);
+        float d = cov > 0.02 ? density(q, hf, cov, t, 1.0) : 0.0;
+        if (d > 0.003) {
+          if (hitAt == 0.0) hitAt = tt;
+          // March toward the sun for self-shadowing.
+          float od = 0.0;
+          for (int j = 0; j < LIGHT_STEPS; j++) {
+            vec3 lp = p + sunDir * (0.05 + float(j) * 0.12);
+            float lh = (lp.y - BASE) / (TOP - BASE);
+            od += density(lp * freq + drift, lh, cov, t, 0.0);
+          }
+          od *= 0.12 * sigma * 0.5;
+          // Beer–Lambert with a softer tail standing in for multiple scattering.
+          float beer = max(exp(-od), exp(-od * 0.25) * 0.6);
+          float powder = 1.0 - exp(-d * 5.0);
+          vec3 ambient = mix(u_c4 * mix(0.82, 0.62, storm), mix(u_c1, u_c3, 0.6), hf);
+          vec3 lum = sunLight * beer * phase * mix(1.0, powder, 0.35) + ambient * 0.72;
+          float dT = exp(-d * sigma * dt);
+          L += T * (1.0 - dT) * lum;
+          T *= dT;
+          if (T < 0.02) break;
+        }
+        tt += dt;
+      }
+      // Aerial perspective: distant clouds melt into the horizon haze.
+      float fog = 1.0 - exp(-max(hitAt, t0) * 0.05);
+      L = mix(L, haze * (1.0 - T), fog * 0.85);
+    }
+  }
 
-  vec3 belly = mix(u_c4, u_c1, 0.32) * 0.76;
-  vec3 body = mix(u_c4, u_c3, 0.58);
-  vec3 top = mix(u_c3, vec3(1.0), 0.52);
-  vec3 lit = mix(belly, body, smoothstep(0.12, 0.58, shade));
-  lit = mix(lit, top, smoothstep(0.55, 0.98, shade) * 0.72);
-  lit = mix(lit, belly, (1.0 - shade) * 0.22 * density);
+  vec3 col = sky * T + L;
 
-  float alpha = density * mix(0.55, 1.12, clamp(u_intensity, 0.0, 1.0));
-  alpha = clamp(alpha, 0.0, 1.0);
-  vec3 col = mix(sky, lit, alpha);
+  // Lightning, lit from inside the clouds it hits.
+  if (u_flash > 0.0) {
+    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y - 0.5);
+    float bloom = exp(-dot(s - fp, s - fp) * 3.2);
+    vec3 bolt = vec3(0.86, 0.9, 1.0);
+    col += bolt * u_flash * (bloom * (1.0 - T) * 0.95 + 0.05);
+  }
 
   if (u_glass > 0.5) {
     float pane = smoothstep(0.50, 0.22, length(glassLocal));
     col *= mix(0.93, 1.0, pane);
     vec2 hl = glassLocal - vec2(-0.16, 0.18);
     col += exp(-dot(hl, hl) * 55.0) * 0.035;
-    col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))), 0.04);
-    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;
-  } else {
-    col += (hash(gl_FragCoord.xy + fract(u_time)) - 0.5) * 0.008;
+    col = mix(col, vec3(luma(col)), 0.04);
   }
+  col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.008;
 
   gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
 }
 `
 
+/** Soft clouds hide resolution, so cap the canvas to keep the march cheap. */
+const MAX_PIXELS = 720_000
+const NOISE_SIZE = 256
+
 function isDev() {
   return (
     typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
@@ -254,6 +328,36 @@ function hexToRgb(hex: string): [number, number, number] {
   return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
 }
 
+/**
+ * Seeded random texture for the shader's value noise. Green repeats red
+ * offset by (37, 239), which lets one lookup serve two 3D noise slices.
+ * Seeded so every visit gets the same sky.
+ */
+function noiseTexels() {
+  const size = NOISE_SIZE
+  const data = new Uint8Array(size * size * 4)
+  let seed = 0x23d
+  const rand = () => {
+    seed = (seed + 0x6d2b79f5) | 0
+    let r = Math.imul(seed ^ (seed >>> 15), 1 | seed)
+    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r
+    return ((r ^ (r >>> 14)) >>> 0) / 4294967296
+  }
+  for (let i = 0; i < size * size; i++) {
+    data[i * 4] = Math.floor(rand() * 256)
+  }
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const from = ((y - 239) & (size - 1)) * size + ((x - 37) & (size - 1))
+      const i = (y * size + x) * 4
+      data[i + 1] = data[from * 4]!
+      data[i + 2] = 0
+      data[i + 3] = 255
+    }
+  }
+  return data
+}
+
 /** Resolves shadcn / next-themes dark mode (`attribute="class"` → `html.dark`). */
 export function isDarkTheme(): boolean {
   if (typeof document === "undefined") return false
@@ -291,8 +395,9 @@ function compile(gl: WebGLRenderingContext, type: number, source: string) {
 }
 
 /**
- * WebGL sky for heroes — clear blue with drifting clouds in light,
- * storm gray in dark. Optional window-glass film.
+ * WebGL sky for heroes — volumetric clouds drifting across clear blue in
+ * light, storm gray in dark, with optional lightning. Optional
+ * window-glass film.
  */
 export function createShaderSky(
   canvas: HTMLCanvasElement,
@@ -308,6 +413,7 @@ export function createShaderSky(
       | "scale"
       | "variation"
       | "interactive"
+      | "lightning"
       | "glass"
       | "glassSize"
       | "theme"
@@ -321,6 +427,7 @@ export function createShaderSky(
     scale: 0.4,
     variation: 0.7,
     interactive: false,
+    lightning: false,
     glass: false,
     glassSize: 7,
     theme: "auto",
@@ -384,6 +491,26 @@ export function createShaderSky(
   gl.enableVertexAttribArray(loc)
   gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
 
+  const noiseTex = gl.createTexture()
+  gl.activeTexture(gl.TEXTURE0)
+  gl.bindTexture(gl.TEXTURE_2D, noiseTex)
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGBA,
+    NOISE_SIZE,
+    NOISE_SIZE,
+    0,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    noiseTexels()
+  )
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
+  gl.uniform1i(gl.getUniformLocation(program, "u_noise"), 0)
+
   const uResolution = gl.getUniformLocation(program, "u_resolution")
   const uTime = gl.getUniformLocation(program, "u_time")
   const uSpeed = gl.getUniformLocation(program, "u_speed")
@@ -399,21 +526,46 @@ export function createShaderSky(
   const uC3 = gl.getUniformLocation(program, "u_c3")
   const uC4 = gl.getUniformLocation(program, "u_c4")
   const uMouse = gl.getUniformLocation(program, "u_mouse")
+  const uFlash = gl.getUniformLocation(program, "u_flash")
+  const uFlashPos = gl.getUniformLocation(program, "u_flashPos")
 
   let raf = 0
   let running = true
   const start = performance.now()
   let frozenTime = 0
 
+  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.
+  const strike = { at: 0, next: 0, x: 0, y: 0 }
+  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))
+  const flashAt = (now: number) => {
+    if (!options.lightning || reduce) {
+      strike.next = 0
+      return 0
+    }
+    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500
+    if (now >= strike.next) {
+      strike.at = now
+      strike.next = now + 4000 + Math.random() * 6000
+      strike.x = (Math.random() - 0.5) * 0.9
+      strike.y = 0.55 + Math.random() * 0.35
+    }
+    if (strike.at === 0) return 0
+    const s = (now - strike.at) / 1000
+    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))
+  }
+
+  // Device pixels per CSS pixel actually rendered (after the pixel cap).
+  let pixelScale = 1
   const resize = () => {
     const parent = canvas.parentElement
     if (!parent) return
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
     const w = parent.clientWidth
     const h = parent.clientHeight
     if (w <= 0 || h <= 0) return
-    canvas.width = Math.max(1, Math.floor(w * dpr))
-    canvas.height = Math.max(1, Math.floor(h * dpr))
+    const dpr = Math.min(window.devicePixelRatio || 1, 2)
+    pixelScale = Math.min(dpr, Math.sqrt(MAX_PIXELS / (w * h)))
+    canvas.width = Math.max(1, Math.floor(w * pixelScale))
+    canvas.height = Math.max(1, Math.floor(h * pixelScale))
     canvas.style.width = `${w}px`
     canvas.style.height = `${h}px`
     gl.viewport(0, 0, canvas.width, canvas.height)
@@ -473,8 +625,7 @@ export function createShaderSky(
     mouse.x += (targetMouse.x - mouse.x) * 0.03
     mouse.y += (targetMouse.y - mouse.y) * 0.03
 
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr
+    const glassPx = Math.max(2, options.glassSize ?? 7) * pixelScale
 
     gl.uniform2f(uResolution, canvas.width, canvas.height)
     gl.uniform1f(uTime, time)
@@ -496,6 +647,9 @@ export function createShaderSky(
       options.interactive ? mouse.y : 0.5
     )
 
+    gl.uniform1f(uFlash, flashAt(now))
+    gl.uniform2f(uFlashPos, strike.x, strike.y)
+
     gl.drawArrays(gl.TRIANGLES, 0, 6)
     raf = requestAnimationFrame(tick)
   }
@@ -519,6 +673,7 @@ export function createShaderSky(
       gl.deleteShader(vs)
       gl.deleteShader(fs)
       gl.deleteBuffer(buf)
+      gl.deleteTexture(noiseTex)
     },
   }
 }
diff --git a/registry/shader-sky/shader-sky.svelte b/registry/shader-sky/shader-sky.svelte
index a3e752d..4e9845b 100644
--- a/registry/shader-sky/shader-sky.svelte
+++ b/registry/shader-sky/shader-sky.svelte
@@ -29,6 +29,7 @@
     scale = 0.4,
     variation = 0.7,
     interactive = false,
+    lightning = false,
     glass = false,
     glassSize = 7,
     theme = "auto",
@@ -66,6 +67,7 @@
       scale,
       variation,
       interactive,
+      lightning,
       glass,
       glassSize,
       theme,
@@ -95,6 +97,7 @@
       scale,
       variation,
       interactive,
+      lightning,
       glass,
       glassSize,
       theme,
diff --git a/registry/shader-sky/shader-sky.tsx b/registry/shader-sky/shader-sky.tsx
index 3daadb1..1292f67 100644
--- a/registry/shader-sky/shader-sky.tsx
+++ b/registry/shader-sky/shader-sky.tsx
@@ -30,7 +30,7 @@ export type ShaderSkyProps = Omit<ShaderSkyOptions, "onThemeChange"> & {
 
 /**
  * WebGL sky for heroes — clear blue with drifting clouds in light,
- * storm gray in dark. Optional window-glass film.
+ * storm gray in dark, with optional lightning. Optional window-glass film.
  */
 export function ShaderSky({
   className,
@@ -42,6 +42,7 @@ export function ShaderSky({
   scale = 0.4,
   variation = 0.7,
   interactive = false,
+  lightning = false,
   glass = false,
   glassSize = 7,
   theme = "auto",
@@ -78,6 +79,7 @@ export function ShaderSky({
       scale,
       variation,
       interactive,
+      lightning,
       glass,
       glassSize,
       theme,
@@ -101,6 +103,7 @@ export function ShaderSky({
       scale,
       variation,
       interactive,
+      lightning,
       glass,
       glassSize,
       theme,
@@ -115,6 +118,7 @@ export function ShaderSky({
     scale,
     variation,
     interactive,
+    lightning,
     glass,
     glassSize,
     theme,

From 4ebc6ecbb24aa4354009eaeb94672182cae3f313 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Tue, 29 Sep 2026 16:11:09 +0530
Subject: [PATCH 38/49] Add flip and rotate options to Stretchy Footer.

---
 content/docs/components/stretchy-footer.mdx   |  4 +-
 .../stretchy-footer/stretchy-footer-demo.tsx  | 19 ++++++++
 .../stretchy-footer-vanilla.ts                | 48 +++++++++++++++----
 .../stretchy-footer/stretchy-footer.svelte    |  6 +++
 registry/stretchy-footer/stretchy-footer.tsx  | 30 +++++++++++-
 5 files changed, 95 insertions(+), 12 deletions(-)

diff --git a/content/docs/components/stretchy-footer.mdx b/content/docs/components/stretchy-footer.mdx
index 23c9acf..f295525 100644
--- a/content/docs/components/stretchy-footer.mdx
+++ b/content/docs/components/stretchy-footer.mdx
@@ -5,7 +5,7 @@ description: Dia-style rubber overscroll — pull past the bottom and a rainbow
 
 import { StretchyFooterDemo } from "@/registry/stretchy-footer/stretchy-footer-demo"
 
-Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page lifts on a spring and a stepped pyramid of blurred gradient columns (magenta through sunlight to deep navy) stretches up to fill the gap. Every column has its own spring, so the top edge ripples as it snaps back. Swap palettes, blur, glow, and snap below.
+Not a scroll-progress footer reveal — an **overflow rubber-band**. In the preview, scroll past the end (or hit Show effect): the page lifts on a spring and a stepped pyramid of blurred gradient columns (magenta through sunlight to deep navy) stretches up to fill the gap. Every column has its own spring, so the top edge ripples as it snaps back. Swap palettes, blur, glow, and snap below, or **Flip** it into a valley — tall edges, dipped middle — so the ripple runs in from the sides. **Rotate 180°** turns the aurora upside down in place: same pull past the bottom, but the columns hang from the lifted page with the gradient reversed.
 
 ## Preview
 
@@ -109,6 +109,8 @@ export function DocsChrome() {
 | `columns`         | `number`                         | `9` — steps down from the middle                  |
 | `blur`            | `number`                         | `16` — px                                         |
 | `glow`            | `number`                         | `0` — white floor bloom, 0–1                      |
+| `flip`            | `boolean`                        | `false` — tall edges, dipped middle               |
+| `rotate`          | `0 \| 180`                       | `0` — `180` hangs the aurora from the page        |
 | `label`           | `string`                         | `Stretchy overflow` — scroll region label         |
 | `demoId`          | `string`                         | — pairs with `playStretchyFooterDemo({ target })` |
 | `className`       | `string`                         | React only                                        |
diff --git a/registry/stretchy-footer/stretchy-footer-demo.tsx b/registry/stretchy-footer/stretchy-footer-demo.tsx
index edd3fb2..f7a2ec5 100644
--- a/registry/stretchy-footer/stretchy-footer-demo.tsx
+++ b/registry/stretchy-footer/stretchy-footer-demo.tsx
@@ -7,6 +7,7 @@ import {
   ComponentControls,
   ControlColors,
   ControlSlider,
+  ControlSwitch,
 } from "@/components/component-controls"
 import { ComponentPreview } from "@/components/component-preview"
 import { Button } from "@/components/ui/button"
@@ -82,6 +83,8 @@ export function StretchyFooterDemo() {
       stiffness: DEFAULT_STIFFNESS,
       blur: DEFAULT_BLUR,
       glow: DEFAULT_GLOW,
+      flip: false,
+      rotated: false,
     }),
     []
   )
@@ -121,6 +124,8 @@ export function StretchyFooterDemo() {
             stiffness={props.stiffness}
             blur={props.blur}
             glow={props.glow}
+            flip={props.flip}
+            rotate={props.rotated ? 180 : 0}
             className="z-20"
           />
 
@@ -171,6 +176,8 @@ export function StretchyFooterDemo() {
             props.stiffness === DEFAULT_STIFFNESS ? undefined : props.stiffness,
           blur: props.blur === DEFAULT_BLUR ? undefined : props.blur,
           glow: props.glow === DEFAULT_GLOW ? undefined : props.glow,
+          flip: props.flip ? true : undefined,
+          rotate: props.rotated ? 180 : undefined,
         }}
       >
         <ControlColors
@@ -219,6 +226,18 @@ export function StretchyFooterDemo() {
           step={20}
           onChange={(v) => updateProp("stiffness", v)}
         />
+        <ControlSwitch
+          label="Flip"
+          description="Tall edges, dipped middle"
+          checked={props.flip}
+          onChange={(v) => updateProp("flip", v)}
+        />
+        <ControlSwitch
+          label="Rotate 180°"
+          description="Aurora hangs from the page"
+          checked={props.rotated}
+          onChange={(v) => updateProp("rotated", v)}
+        />
       </ComponentControls>
     </>
   )
diff --git a/registry/stretchy-footer/stretchy-footer-vanilla.ts b/registry/stretchy-footer/stretchy-footer-vanilla.ts
index 43994ae..c992ef5 100644
--- a/registry/stretchy-footer/stretchy-footer-vanilla.ts
+++ b/registry/stretchy-footer/stretchy-footer-vanilla.ts
@@ -60,6 +60,16 @@ export type StretchyFooterOptions = {
   blur?: number
   /** White floor bloom opacity (0–1). Default `0`. */
   glow?: number
+  /**
+   * Invert the pyramid: the edge columns stand tallest and the middle
+   * dips, so the wobble ripples in from the sides. Default `false`.
+   */
+  flip?: boolean
+  /**
+   * `180` turns the aurora upside down in place: the columns hang from the
+   * lifted page's edge and the gradient runs floor to top. Default `0`.
+   */
+  rotate?: 0 | 180
   /**
    * Optional id for docs demos. `playStretchyFooterDemo({ target })` only
    * plays footers whose `demoId` matches.
@@ -123,11 +133,18 @@ export async function playStretchyFooterDemo(
   )
 }
 
-/** Stepped pyramid: the middle column is tallest, each step out is shorter. */
-export function columnScale(index: number, count: number): number {
+/**
+ * Stepped pyramid: the middle column is tallest, each step out is shorter.
+ * Flipped, the edges are tallest and each step in is shorter.
+ */
+export function columnScale(
+  index: number,
+  count: number,
+  flip = false
+): number {
   if (count <= 1) return 1
-  const t = (index / (count - 1)) * 2 - 1
-  return 1 - (1 - EDGE_COLUMN) * Math.abs(t)
+  const t = Math.abs((index / (count - 1)) * 2 - 1)
+  return 1 - (1 - EDGE_COLUMN) * (flip ? 1 - t : t)
 }
 
 /** Overscroll distance → stretch. Linear at first, never past `max`. */
@@ -235,8 +252,10 @@ const atRest = (s: Spring) =>
 /**
  * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the
  * content lifts on a spring while a stepped pyramid of blurred gradient
- * columns stretches up from the floor; each column has its own spring, so the edge wobbles as it
- * snaps back. Idle unless stretched.
+ * columns stretches up from the floor (a valley with `flip`, hanging from
+ * the page with `rotate: 180`); each column
+ * has its own spring, so the edge wobbles as it snaps back. Idle unless
+ * stretched.
  */
 export function createStretchyFooter(
   mount: StretchyFooterMount,
@@ -255,7 +274,6 @@ export function createStretchyFooter(
   const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)
   const countOf = () =>
     Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))
-
   /** Overscroll the user has put in, in px. The stretch is its rubber band. */
   let distance = 0
   /** `play()` holds the stretch here, overriding the gesture. */
@@ -269,7 +287,7 @@ export function createStretchyFooter(
     const count = countOf()
     const target = lift.target
     columns = Array.from({ length: count }, (_, i) => {
-      const share = columnScale(i, count)
+      const share = columnScale(i, count, options.flip)
       return { x: lift.x * share, v: 0, target: target * share, share }
     })
   }
@@ -348,6 +366,12 @@ export function createStretchyFooter(
     ctx!.setTransform(1, 0, 0, 1, 0, 0)
     ctx!.clearRect(0, 0, canvas.width, canvas.height)
     ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)
+    // Rotated, spin the drawing 180° about the gap between the lifted page
+    // and the floor, so the columns hang from the page's edge.
+    const rotated = options.rotate === 180
+    if (rotated) {
+      ctx!.setTransform(-1, 0, 0, -1, canvas.width, 2 * floor - stretch * scale)
+    }
 
     // Columns span the visible width; the outer two run on into the pad.
     const count = columns.length
@@ -364,6 +388,8 @@ export function createStretchyFooter(
       const x0 = edge(i)
       const x1 = edge(i + 1)
       ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)
+      // The run-off under the floor would land on the page once rotated.
+      if (rotated) continue
       ctx!.drawImage(
         strip,
         0,
@@ -385,6 +411,7 @@ export function createStretchyFooter(
       ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)
     }
     ctx!.globalAlpha = 1
+    ctx!.setTransform(1, 0, 0, 1, 0, 0)
   }
 
   let raf = 0
@@ -563,9 +590,12 @@ export function createStretchyFooter(
       const prevColors = options.colors
       const prevMax = maxOf()
       const prevBlur = blurOf()
+      const prevFlip = Boolean(options.flip)
       options = { ...options, ...next }
       if (options.colors !== prevColors) rebuildStrip()
-      if (countOf() !== columns.length) rebuildColumns()
+      if (countOf() !== columns.length || Boolean(options.flip) !== prevFlip) {
+        rebuildColumns()
+      }
       if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()
       if (forced !== null) forced = Math.min(forced, maxOf())
       retarget()
diff --git a/registry/stretchy-footer/stretchy-footer.svelte b/registry/stretchy-footer/stretchy-footer.svelte
index 91f7b58..910ee00 100644
--- a/registry/stretchy-footer/stretchy-footer.svelte
+++ b/registry/stretchy-footer/stretchy-footer.svelte
@@ -60,6 +60,8 @@
     columns = DEFAULT_COLUMNS,
     blur = DEFAULT_BLUR,
     glow = DEFAULT_GLOW,
+    flip = false,
+    rotate = 0,
     label = "Stretchy overflow",
     demoId,
   }: Props = $props()
@@ -89,6 +91,8 @@
         columns,
         blur,
         glow,
+        flip,
+        rotate,
         demoId,
       }))
     )
@@ -108,6 +112,8 @@
       columns,
       blur,
       glow,
+      flip,
+      rotate,
       demoId,
     })
   })
diff --git a/registry/stretchy-footer/stretchy-footer.tsx b/registry/stretchy-footer/stretchy-footer.tsx
index 08db1c5..2d28fb9 100644
--- a/registry/stretchy-footer/stretchy-footer.tsx
+++ b/registry/stretchy-footer/stretchy-footer.tsx
@@ -88,6 +88,8 @@ export function StretchyFooter({
   columns = DEFAULT_COLUMNS,
   blur = DEFAULT_BLUR,
   glow = DEFAULT_GLOW,
+  flip = false,
+  rotate = 0,
   label = "Stretchy overflow",
   demoId,
 }: StretchyFooterProps) {
@@ -113,7 +115,18 @@ export function StretchyFooter({
       windowScroll || scrollRef ? contentSelector : contentRef.current
     instanceRef.current = createStretchyFooter(
       { canvas, scroller, content },
-      { maxStretch, colors, stiffness, damping, columns, blur, glow, demoId }
+      {
+        maxStretch,
+        colors,
+        stiffness,
+        damping,
+        columns,
+        blur,
+        glow,
+        flip,
+        rotate,
+        demoId,
+      }
     )
     return () => {
       instanceRef.current?.destroy()
@@ -132,9 +145,22 @@ export function StretchyFooter({
       columns,
       blur,
       glow,
+      flip,
+      rotate,
       demoId,
     })
-  }, [maxStretch, colors, stiffness, damping, columns, blur, glow, demoId])
+  }, [
+    maxStretch,
+    colors,
+    stiffness,
+    damping,
+    columns,
+    blur,
+    glow,
+    flip,
+    rotate,
+    demoId,
+  ])
 
   const aurora = (
     <div

From 047053f96bdf45c13bc7117a5d035f1ff2a719a3 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Tue, 29 Sep 2026 17:39:25 +0530
Subject: [PATCH 39/49] Keep the sidebar marker's arc visible in Firefox.

Firefox doesn't paint the page while the docs view transition runs, so the
marker's whole flight happened unseen and it just jumped. There the
transition now ends at once and the new page fades in as a plain animation.
---
 app/docs/template.tsx |  2 +-
 app/globals.css       | 21 +++++++++------------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/docs/template.tsx b/app/docs/template.tsx
index e65af0e..a55b4e6 100644
--- a/app/docs/template.tsx
+++ b/app/docs/template.tsx
@@ -11,7 +11,7 @@ import { ViewTransition } from "react"
 export default function DocsTemplate({ children }: { children: ReactNode }) {
   return (
     <ViewTransition enter="page-blur" exit="page-blur" default="none">
-      <div className="min-h-full">{children}</div>
+      <div className="docs-page min-h-full">{children}</div>
     </ViewTransition>
   )
 }
diff --git a/app/globals.css b/app/globals.css
index 9ec07f8..6581b9d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -119,23 +119,20 @@
 }
 
 /*
- * Firefox repaints a blurred snapshot every ~100ms, which stalls anything
- * else moving during the transition (the sidebar marker skips its arc).
- * A plain fade keeps it at full frame rate.
+ * Firefox stops painting the rest of the page while a view transition runs,
+ * so the sidebar marker's whole flight happens unseen and it just jumps.
+ * There the transition ends at once and the new page fades in as a plain
+ * animation, which leaves everything else live.
  */
 @supports (-moz-appearance: none) {
-    ::view-transition-old(.page-blur) {
-        animation-name: page-fade-out;
-    }
-
+    ::view-transition-group(.page-blur),
+    ::view-transition-old(.page-blur),
     ::view-transition-new(.page-blur) {
-        animation-name: page-fade-in;
+        animation: none;
     }
-}
 
-@keyframes page-fade-out {
-    to {
-        opacity: 0;
+    .docs-page {
+        animation: 420ms cubic-bezier(0.16, 1, 0.3, 1) both page-fade-in;
     }
 }
 

From ade2c72cdfc5ebadcd1ac14ba42b623e9565ee0f Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Tue, 29 Sep 2026 17:39:25 +0530
Subject: [PATCH 40/49] Cap the sidebar marker's clock at one frame per step.

Firefox stalls ~100ms swapping the page right after the marker takes off;
on the real clock the spring spent that stall mid-flight and its first
frame landed well down the arc.
---
 components/docs-sidebar.tsx | 41 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 6bc5663..b4d66aa 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -5,10 +5,15 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import {
   arc,
+  cancelFrame,
+  frame,
+  frameData,
   LayoutGroup,
   motion,
+  time,
   useReducedMotion,
   type MotionPath,
+  type ValueTransition,
 } from "motion/react"
 
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
@@ -89,6 +94,36 @@ const markPath: MotionPath = {
     arc({ strength: MARK_STRENGTH }).animateVisualElement(...args),
 }
 
+/** The longest step, in ms, the marker's clock takes in one frame. */
+const MARK_MAX_STEP = 1000 / 60
+
+/**
+ * Motion's frame loop, on a clock that never jumps more than
+ * `MARK_MAX_STEP` per frame. Firefox stalls ~100ms swapping the page right
+ * after the marker takes off, and on the real clock the spring spends that
+ * stall mid-flight, so its first frame lands well down the arc. Here a
+ * stalled frame just pauses the flight.
+ */
+const markDriver: NonNullable<ValueTransition["driver"]> = (update) => {
+  let last: number | undefined
+  let clock: number | undefined
+  const step = ({ timestamp }: { timestamp: number }) => {
+    clock =
+      last === undefined || clock === undefined
+        ? timestamp
+        : clock + Math.min(timestamp - last, MARK_MAX_STEP)
+    last = timestamp
+    update(clock)
+  }
+
+  return {
+    start: (keepAlive = true) => frame.update(step, keepAlive),
+    stop: () => cancelFrame(step),
+    now: () =>
+      clock ?? (frameData.isProcessing ? frameData.timestamp : time.now()),
+  }
+}
+
 /** Room the marker takes before the open page's name. */
 const MARK_GUTTER = "translate-x-[21px]"
 
@@ -106,7 +141,11 @@ function ActiveMark() {
       layoutId="docs-sidebar-mark"
       aria-hidden
       className="pointer-events-none absolute inset-y-0 left-2 z-10 flex items-center"
-      transition={reduce ? { duration: 0 } : { ...markSpring, path: markPath }}
+      transition={
+        reduce
+          ? { duration: 0 }
+          : { ...markSpring, path: markPath, driver: markDriver }
+      }
     >
       <Triad />
     </motion.span>

From e853a06dca131893c747c3139ce24f03e7aa1d14 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Tue, 29 Sep 2026 17:39:25 +0530
Subject: [PATCH 41/49] Pin the page outline where it starts instead of sliding
 it up on scroll.

---
 components/docs-toc.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/docs-toc.tsx b/components/docs-toc.tsx
index 009895a..f04fc1f 100644
--- a/components/docs-toc.tsx
+++ b/components/docs-toc.tsx
@@ -10,7 +10,7 @@ import { DocsTocOutline } from "@/components/docs-toc-outline"
  */
 export function DocsToc({ items }: { items: TOCItemType[] }) {
   return (
-    <aside className="sticky top-0 hidden w-56 shrink-0 flex-col gap-6 pt-14 xl:flex">
+    <aside className="sticky top-3 hidden w-56 shrink-0 flex-col gap-6 pt-14 xl:flex">
       {items.length > 0 ? <DocsTocOutline items={items} /> : null}
 
       <Link

From aa11776b27dd2e58a0d735cda1d5512a77fa575a Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Wed, 30 Sep 2026 22:43:22 +0530
Subject: [PATCH 42/49] Remove the landing page for now.

`/` redirects to Getting Started again, drops out of the sitemap and
stops being the app's start URL, and the 23rd wordmark leads back to
the docs. The catalogue monitor and its feeds go with it.
---
 app/(marketing)/page.tsx     |  50 ---------
 app/manifest.ts              |   2 +-
 app/sitemap.ts               |   1 -
 components/docs-shell.tsx    |   2 +-
 components/landing.tsx       | 210 -----------------------------------
 components/monitor-feeds.tsx |  95 ----------------
 components/site-header.tsx   |   2 +-
 lib/tree.ts                  |  31 ------
 next.config.mjs              |   6 +
 9 files changed, 9 insertions(+), 390 deletions(-)
 delete mode 100644 app/(marketing)/page.tsx
 delete mode 100644 components/landing.tsx
 delete mode 100644 components/monitor-feeds.tsx

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
deleted file mode 100644
index efe1b26..0000000
--- a/app/(marketing)/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { Root } from "fumadocs-core/page-tree"
-
-import { Landing, type CatalogSection } from "@/components/landing"
-import { getGithubRepoUrl } from "@/lib/github"
-import { buildPageMetadata, SITE_DESCRIPTION, SITE_TITLE } from "@/lib/seo"
-import { source } from "@/lib/source"
-import { sectionPageTree } from "@/lib/tree"
-
-export const metadata = buildPageMetadata({
-  title: SITE_TITLE,
-  description: SITE_DESCRIPTION,
-  path: "/",
-  absoluteTitle: true,
-})
-
-const COMPONENTS = "/docs/components/"
-
-/** The component catalogue, grouped the way the docs sidebar groups it. */
-function catalog(): CatalogSection[] {
-  return sectionPageTree(source.getPageTree() as Root)
-    .map((section) => ({
-      name: section.name ?? "",
-      items: section.items
-        .filter((item) => item.url.startsWith(COMPONENTS))
-        .map((item) => {
-          const slug = item.url.slice(COMPONENTS.length)
-          const page = source.getPage(["components", slug])
-          return {
-            title: item.title,
-            url: item.url,
-            slug,
-            description: page?.data.description ?? "",
-          }
-        }),
-    }))
-    .filter((section) => section.name && section.items.length > 0)
-}
-
-export default function HomePage() {
-  const sections = catalog()
-  return (
-    <main className="flex-1 overflow-x-clip">
-      <Landing
-        sections={sections}
-        initial="shader-gradient"
-        repoUrl={getGithubRepoUrl()}
-      />
-    </main>
-  )
-}
diff --git a/app/manifest.ts b/app/manifest.ts
index 1231d49..3ae43ab 100644
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -7,7 +7,7 @@ export default function manifest(): MetadataRoute.Manifest {
     name: `${SITE_NAME} — ${SITE_TAGLINE}`,
     short_name: SITE_NAME,
     description: SITE_DESCRIPTION,
-    start_url: "/",
+    start_url: "/docs/getting-started",
     display: "standalone",
     background_color: "#000000",
     theme_color: "#000000",
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 016c848..70f7e3d 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -18,7 +18,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
     entries.push({ url, changeFrequency, priority })
   }
 
-  add("/", 1)
   add("/sponsors", 0.6, "monthly")
   add("/terms", 0.2, "yearly")
   add("/privacy", 0.2, "yearly")
diff --git a/components/docs-shell.tsx b/components/docs-shell.tsx
index 0358c8d..8b9e383 100644
--- a/components/docs-shell.tsx
+++ b/components/docs-shell.tsx
@@ -46,7 +46,7 @@ type TreeNode = PageNode | SeparatorNode | FolderNode
 function Wordmark() {
   return (
     <Link
-      href="/"
+      href="/docs"
       className="flex min-w-0 items-center gap-2.5 rounded-md text-[15px] font-semibold tracking-tight outline-none focus-visible:ring-2 focus-visible:ring-ring"
     >
       <Logo className="size-6 shrink-0" cornerRadius={5} />
diff --git a/components/landing.tsx b/components/landing.tsx
deleted file mode 100644
index 56ae6fd..0000000
--- a/components/landing.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState, type CSSProperties } from "react"
-import Link from "next/link"
-import { RiArrowRightLine, RiGithubFill } from "@remixicon/react"
-
-import { CliCommand } from "@/components/cli-command"
-import { MonitorFeed } from "@/components/monitor-feeds"
-import { Triad } from "@/components/triad"
-import { buttonVariants } from "@/components/ui/button"
-import { FrameworkProvider } from "@/lib/framework"
-import { cn } from "@/lib/utils"
-
-export type CatalogItem = {
-  title: string
-  url: string
-  /** Registry item name, e.g. `shader-sky`. */
-  slug: string
-  description: string
-}
-
-export type CatalogSection = { name: string; items: CatalogItem[] }
-
-/** Pointer hover waits this long before switching feeds, so sweeping the list doesn't boot every engine. */
-const HOVER_DELAY_MS = 140
-
-/** Inside the monitor, `bg-background` is the screen, not the bench. */
-const screenTokens = { "--background": "var(--screen)" } as CSSProperties
-
-const FACTS = [
-  "shadcn registry",
-  "React + Svelte 5",
-  "You own the source",
-  "Honors reduced motion",
-]
-
-/**
- * The landing page: the wordmark and the whole catalogue in dot matrix,
- * beside one live monitor. Hovering or focusing a name puts that
- * component on the screen; clicking opens its page.
- */
-export function Landing({
-  sections,
-  initial,
-  repoUrl,
-}: {
-  sections: CatalogSection[]
-  initial: string
-  repoUrl: string
-}) {
-  const items = sections.flatMap((section) => section.items)
-  const [selected, setSelected] = useState(initial)
-  const timer = useRef<number | null>(null)
-  const current = items.find((item) => item.slug === selected) ?? items[0]
-
-  function cancel() {
-    if (timer.current) window.clearTimeout(timer.current)
-    timer.current = null
-  }
-
-  function select(slug: string, delay = 0) {
-    cancel()
-    if (delay === 0) {
-      setSelected(slug)
-      return
-    }
-    timer.current = window.setTimeout(() => setSelected(slug), delay)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (timer.current) window.clearTimeout(timer.current)
-    }
-  }, [])
-
-  if (!current) return null
-
-  return (
-    <FrameworkProvider>
-      <div className="@container/page mx-auto w-full max-w-7xl px-4 pt-12 pb-24 sm:px-6 sm:pt-20">
-        <div className="grid grid-cols-1 gap-x-14 gap-y-12 @4xl/page:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] @4xl/page:grid-rows-[auto_1fr]">
-          <header className="@4xl/page:col-start-1 @4xl/page:row-start-1">
-            <h1 className="font-display text-[clamp(5.5rem,18cqw,11rem)] leading-[0.78]">
-              23rd
-            </h1>
-            <p className="mt-8 max-w-md text-lg leading-relaxed text-muted-foreground">
-              Components that render — shaders, ASCII, dithering and motion
-              for shadcn/ui. Install one with the CLI, then it&rsquo;s yours to
-              edit.
-            </p>
-            <div className="mt-8 flex flex-wrap items-center gap-2">
-              <Link
-                href="/docs/getting-started"
-                className={cn(buttonVariants(), "rounded-lg")}
-              >
-                Get started
-                <RiArrowRightLine data-icon="inline-end" />
-              </Link>
-              <a
-                href={repoUrl}
-                className={cn(
-                  buttonVariants({ variant: "outline" }),
-                  "rounded-lg"
-                )}
-              >
-                <RiGithubFill data-icon="inline-start" />
-                GitHub
-              </a>
-            </div>
-            <ul className="mt-8 flex flex-wrap gap-x-5 gap-y-2 font-mono text-[11px] tracking-[0.08em] text-muted-foreground/80 uppercase">
-              {FACTS.map((fact) => (
-                <li key={fact}>{fact}</li>
-              ))}
-            </ul>
-          </header>
-
-          <figure
-            aria-label="Live preview"
-            className="self-start @4xl/page:sticky @4xl/page:top-6 @4xl/page:col-start-2 @4xl/page:row-span-2 @4xl/page:row-start-1"
-          >
-            <div
-              style={screenTokens}
-              className="relative isolate aspect-[4/3] overflow-hidden rounded-(--radius-screen) bg-background text-foreground [clip-path:inset(0_round_var(--radius-screen))] after:pointer-events-none after:absolute after:inset-0 after:z-50 after:rounded-[inherit] after:ring-1 after:ring-border after:ring-inset @4xl/page:aspect-auto @4xl/page:h-[min(62svh,640px)]"
-            >
-              <MonitorFeed
-                key={current.slug}
-                slug={current.slug}
-                fallback={
-                  <div className="flex size-full flex-col items-center justify-center gap-4 px-8 text-center">
-                    <span className="font-display text-5xl leading-none">
-                      {current.title}
-                    </span>
-                    <span className="max-w-xs text-sm text-muted-foreground">
-                      This one reacts to page scroll. Open its page to try it.
-                    </span>
-                  </div>
-                }
-              />
-            </div>
-
-            <figcaption className="mt-5 flex flex-col gap-3">
-              <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
-                <p className="flex items-center gap-2.5 text-base font-medium">
-                  <Triad />
-                  {current.title}
-                </p>
-                <Link
-                  href={current.url}
-                  className={cn(
-                    buttonVariants({ variant: "outline", size: "sm" }),
-                    "rounded-lg"
-                  )}
-                >
-                  Open {current.title}
-                </Link>
-              </div>
-              <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
-                {current.description}
-              </p>
-              <CliCommand item={current.slug} className="my-0 mt-1" />
-            </figcaption>
-          </figure>
-
-          <nav
-            aria-label="Components"
-            className="flex flex-col gap-9 @4xl/page:col-start-1 @4xl/page:row-start-2"
-          >
-            {sections.map((section) => (
-              <section
-                key={section.name}
-                aria-labelledby={`index-${section.name}`}
-              >
-                <h2
-                  id={`index-${section.name}`}
-                  className="mb-3 font-mono text-[10.5px] tracking-[0.18em] text-muted-foreground/80 uppercase"
-                >
-                  {section.name}
-                </h2>
-                <ul className="flex flex-col gap-1">
-                  {section.items.map((item) => {
-                    const on = item.slug === current.slug
-                    return (
-                      <li key={item.slug}>
-                        <Link
-                          href={item.url}
-                          data-on={on || undefined}
-                          onPointerEnter={(event) => {
-                            if (event.pointerType === "mouse") {
-                              select(item.slug, HOVER_DELAY_MS)
-                            }
-                          }}
-                          onPointerLeave={cancel}
-                          onFocus={() => select(item.slug)}
-                          className="group -mx-1 flex items-center gap-3 rounded-md px-1 py-1 font-display text-[clamp(1.75rem,3.4cqw,2.25rem)] leading-none text-muted-foreground transition-colors duration-150 outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-on:text-foreground"
-                        >
-                          <span className="min-w-0">{item.title}</span>
-                          {on ? <Triad className="h-3.5 [&>span]:w-1" /> : null}
-                        </Link>
-                      </li>
-                    )
-                  })}
-                </ul>
-              </section>
-            ))}
-          </nav>
-        </div>
-      </div>
-    </FrameworkProvider>
-  )
-}
diff --git a/components/monitor-feeds.tsx b/components/monitor-feeds.tsx
deleted file mode 100644
index db3e39a..0000000
--- a/components/monitor-feeds.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client"
-
-import dynamic from "next/dynamic"
-import type { ComponentType, ReactNode } from "react"
-
-/**
- * One live mount per registry item for the landing monitor. Each engine
- * loads only when its feed is picked, and unmounts (freeing its WebGL
- * context) when another one takes over.
- */
-function feed<P extends object>(
-  load: () => Promise<ComponentType<P>>
-): ComponentType<P> {
-  return dynamic(load, { ssr: false, loading: () => null })
-}
-
-const AsciiFluid = feed(() =>
-  import("@/registry/ascii-fluid/ascii-fluid").then((m) => m.AsciiFluid)
-)
-const AsciiLogo = feed(() =>
-  import("@/registry/ascii-logo/ascii-logo").then((m) => m.AsciiLogo)
-)
-const Dithered404 = feed(() =>
-  import("@/registry/dithered-404/dithered-404").then((m) => m.Dithered404)
-)
-const GooeyColorPicker = feed(() =>
-  import("@/registry/gooey-color-picker/gooey-color-picker").then(
-    (m) => m.GooeyColorPicker
-  )
-)
-const LiveOrb = feed(() =>
-  import("@/registry/live-orb/live-orb").then((m) => m.LiveOrb)
-)
-const LogoBurst = feed(() =>
-  import("@/registry/logo-burst/logo-burst").then((m) => m.LogoBurst)
-)
-const PhosphorScore = feed(() =>
-  import("@/registry/phosphor-score/phosphor-score").then(
-    (m) => m.PhosphorScore
-  )
-)
-const RadiantLines = feed(() =>
-  import("@/registry/radiant-lines/radiant-lines").then((m) => m.RadiantLines)
-)
-const ShaderAnimeFire = feed(() =>
-  import("@/registry/shader-anime-fire/shader-anime-fire").then(
-    (m) => m.ShaderAnimeFire
-  )
-)
-const ShaderFire = feed(() =>
-  import("@/registry/shader-fire/shader-fire").then((m) => m.ShaderFire)
-)
-const ShaderGradient = feed(() =>
-  import("@/registry/shader-gradient/shader-gradient").then(
-    (m) => m.ShaderGradient
-  )
-)
-const ShaderSky = feed(() =>
-  import("@/registry/shader-sky/shader-sky").then((m) => m.ShaderSky)
-)
-
-const FEEDS: Record<string, () => ReactNode> = {
-  "ascii-fluid": () => <AsciiFluid className="absolute inset-0" />,
-  "ascii-logo": () => <AsciiLogo className="absolute inset-0" />,
-  "dithered-404": () => <Dithered404 className="absolute inset-0" />,
-  "gooey-color-picker": () => (
-    <div className="flex size-full items-center justify-center">
-      <GooeyColorPicker defaultValue={{ h: 210, s: 90, l: 55, a: 1 }} />
-    </div>
-  ),
-  "live-orb": () => (
-    <div className="flex size-full items-center justify-center bg-[#0A0A0B]">
-      <LiveOrb size={220} />
-    </div>
-  ),
-  "logo-burst": () => <LogoBurst />,
-  "phosphor-score": () => <PhosphorScore />,
-  "radiant-lines": () => <RadiantLines />,
-  "shader-anime-fire": () => <ShaderAnimeFire className="absolute inset-0" />,
-  "shader-fire": () => <ShaderFire className="absolute inset-0" />,
-  "shader-gradient": () => <ShaderGradient className="absolute inset-0" />,
-  "shader-sky": () => <ShaderSky className="absolute inset-0" />,
-}
-
-/** Renders the live feed for a registry item, or `fallback` if it has none. */
-export function MonitorFeed({
-  slug,
-  fallback,
-}: {
-  slug: string
-  fallback: ReactNode
-}) {
-  const render = FEEDS[slug]
-  return render ? render() : fallback
-}
diff --git a/components/site-header.tsx b/components/site-header.tsx
index ecb0cca..8dcf255 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -20,7 +20,7 @@ export function SiteHeader({ githubStars }: { githubStars?: number | null }) {
   return (
     <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
       <Link
-        href="/"
+        href="/docs"
         className="flex min-w-0 items-center gap-2 text-sm font-medium"
       >
         <Logo className="size-6 shrink-0" cornerRadius={4} />
diff --git a/lib/tree.ts b/lib/tree.ts
index 7854645..cebb04e 100644
--- a/lib/tree.ts
+++ b/lib/tree.ts
@@ -29,34 +29,3 @@ export function flattenPageTree(root: Root): PageTreeItem[] {
   root.children.forEach(visit)
   return items
 }
-
-export interface PageTreeSection {
-  /** Separator label from `meta.json`, or `null` for pages before the first one. */
-  name: string | null
-  items: PageTreeItem[]
-}
-
-/** Pages grouped under the `---Label---` separators they follow. */
-export function sectionPageTree(root: Root): PageTreeSection[] {
-  const sections: PageTreeSection[] = [{ name: null, items: [] }]
-
-  function visit(node: Root["children"][number]) {
-    if (node.type === "separator") {
-      const name = extractName(node)
-      if (name) sections.push({ name, items: [] })
-    } else if (node.type === "page" && !node.external) {
-      sections.at(-1)!.items.push({ title: extractName(node), url: node.url })
-    } else if (node.type === "folder") {
-      if (node.index) {
-        sections.at(-1)!.items.push({
-          title: extractName(node.index),
-          url: node.index.url,
-        })
-      }
-      node.children.forEach(visit)
-    }
-  }
-
-  root.children.forEach(visit)
-  return sections.filter((section) => section.items.length > 0)
-}
diff --git a/next.config.mjs b/next.config.mjs
index 7ebb9ad..a2e64f3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -11,6 +11,12 @@ const config = {
   },
   async redirects() {
     return [
+      // Temporary until the landing page lands at `/`.
+      {
+        source: "/",
+        destination: "/docs/getting-started",
+        permanent: false,
+      },
       {
         source: "/docs",
         destination: "/docs/getting-started",

From 2e7e3a0d7052f732d25fcf1ecd99132742a0cc6e Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Wed, 30 Sep 2026 22:56:24 +0530
Subject: [PATCH 43/49] Rebuild the published Shader Sky and Stretchy Footer
 items.

public/r still carried the versions from before lightning and the
flip and rotate options, so the registry tests failed.
---
 public/r/shader-sky-svelte.json      | 2 +-
 public/r/shader-sky.json             | 2 +-
 public/r/stretchy-footer-svelte.json | 2 +-
 public/r/stretchy-footer.json        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/r/shader-sky-svelte.json b/public/r/shader-sky-svelte.json
index 2ab3d8c..afefadd 100644
--- a/public/r/shader-sky-svelte.json
+++ b/public/r/shader-sky-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-sky/shader-sky.svelte",
-      "content": "<script module lang=\"ts\">\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Storm flashes that light the clouds from inside, every few seconds.\n   * Off under reduced motion. Default false\n   */\n  lightning?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\nuniform float u_flash;\nuniform vec2 u_flashPos;\n\n// Where the horizon sits below the frame; the gap sets how steeply the\n// cloud deck recedes (near clouds overhead, small hazy ones low down).\nconst float HORIZON = -0.38;\n// Sun just past the top-right corner, in frame units.\nconst vec2 SUN = vec2(0.36, 1.06);\n\n// Sin-free hash — stays stable at large coordinates on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\nconst mat2 ROT = mat2(1.6, 1.2, -1.2, 1.6);\n\nfloat fbm5(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = ROT * p + 7.3;\n    a *= 0.5;\n  }\n  return v / 0.96875;\n}\n\nfloat fbm3(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = ROT * p + 3.1;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\nfloat luma(vec3 c) {\n  return dot(c, vec3(0.2126, 0.7152, 0.0722));\n}\n\n// Cloud-deck coordinates: frame point -> where its ray meets the deck.\n// Returns (x, depth) on the plane; depth grows toward the horizon.\nvec2 deck(vec2 frame, float height) {\n  float rise = max(frame.y - HORIZON, 0.02);\n  return vec2(frame.x, 1.0) * (height / rise);\n}\n\nfloat cloudThreshold() {\n  return mix(0.62, 0.44, u_amount) - (u_coverage - 0.5) * 0.12;\n}\n\n// Raw cumulus field at an already-warped point. Distinct clouds come from\n// a low-frequency clump term splitting the deck.\nfloat cloudField(vec2 p) {\n  float base = fbm5(p);\n  float clump = noise(p * mix(0.22, 0.5, u_amount) + 4.2);\n  return base + (clump - 0.5) * mix(0.55, 0.3, u_amount);\n}\n\nfloat cloudThickness(float d, float th) {\n  return smoothstep(th, th + mix(0.1, 0.2, u_coverage), d);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  // Frame space: x centred and aspect-true, y 0 at the bottom edge.\n  vec2 frame = vec2((uv.x - 0.5) * aspect, uv.y);\n  vec2 look = (u_mouse - 0.5) * vec2(0.08, 0.035);\n  vec2 view = frame + look;\n\n  // Storm palettes (cloud darker than the horizon) light tops toward the\n  // sky instead of toward white, and mute the sun.\n  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));\n  float sunAmt = (1.0 - storm * 0.8) * smoothstep(0.25, 0.8, luma(u_c3));\n\n  // --- Sky ---------------------------------------------------------------\n  float h = clamp(uv.y, 0.0, 1.0);\n  vec3 sky = mix(u_c2, u_c1, pow(h, 0.72));\n  vec3 haze = mix(u_c2, vec3(1.0), 0.28 * luma(u_c2));\n  sky = mix(sky, haze, pow(1.0 - h, 3.0) * 0.55);\n\n  vec2 sunFrame = vec2(SUN.x * aspect, SUN.y);\n  float sunDist = length(view - sunFrame);\n  vec3 sunCol = mix(vec3(1.0, 0.96, 0.86), u_c3, 0.25);\n  float glow = exp(-sunDist * 2.4) * 0.34 + exp(-sunDist * 9.0) * 0.3;\n  sky += sunCol * glow * sunAmt;\n\n  // --- High cirrus: a slower, farther deck for parallax ------------------\n  vec2 hi = deck(view, 2.6) * mix(1.1, 0.55, u_scale);\n  hi += vec2(t * 0.16, -t * 0.05);\n  float streak = fbm3(vec2(hi.x * 0.55 + hi.y * 0.25, hi.y * 2.6));\n  float cirrus = smoothstep(0.56, 0.86, streak) * smoothstep(-0.1, 0.5, h);\n  cirrus *= mix(0.1, 0.34, u_variation) * (1.0 - storm * 0.6);\n  sky = mix(sky, mix(haze, vec3(1.0), 0.5 * (1.0 - storm)), cirrus);\n\n  // --- Cumulus deck ------------------------------------------------------\n  float freq = mix(3.4, 1.3, u_scale);\n  vec2 plane = deck(view, 1.0);\n  float depth = plane.y;\n  // Wind carries clouds sideways and slowly toward the viewer.\n  vec2 wind = vec2(t * 0.34, -t * 0.22);\n  vec2 q = plane * freq + wind;\n\n  // Far clouds shrink on screen, so soften their edges to stay clean.\n  float edge = 0.012 + 0.014 * depth;\n  // A gentle warp gives the masses lobes without smearing them into paint.\n  vec2 w = vec2(fbm3(q * 0.45 + vec2(1.7, 9.2) + t * 0.05),\n                fbm3(q * 0.45 + vec2(8.3, 2.8) - t * 0.04)) - 0.5;\n  vec2 p = q + w * 0.9;\n\n  float th = cloudThreshold();\n  float d = cloudField(p);\n  // Billowy edges: small puffs eat into the rim, never the core.\n  float puff = fbm3(p * 3.4 + vec2(t * 0.12, 0.0));\n  d -= (1.0 - smoothstep(th - 0.05, th + 0.2, d)) * (puff - 0.45) * mix(0.12, 0.4, u_variation);\n\n  float mask = smoothstep(th, th + edge, d);\n  float thick = cloudThickness(d, th);\n\n  // Compare the cloud here with the cloud toward the sun: thinning ahead\n  // means a sun-facing flank (lit), thickening means the far side (shade),\n  // and a flat interior settles on the body tone.\n  // The warp barely changes over these short steps, so reuse it.\n  vec2 toSun = normalize(vec2(0.8, -0.6)) * 0.14;\n  float ahead = cloudThickness(cloudField(p + toSun), th) * 0.45;\n  ahead += cloudThickness(cloudField(p + toSun * 2.4), th) * 0.35;\n  ahead += cloudThickness(cloudField(p + toSun * 4.0), th) * 0.2;\n  // Soft lobes inside the body catch light so big clouds never go flat.\n  float lobes = fbm3(q * 2.3 + vec2(11.0 + t * 0.1, 4.0));\n  float light = 0.63 + (thick - ahead) * 1.1 - thick * 0.08;\n  light += (lobes - 0.45) * 0.32 * thick;\n  light = clamp(light, 0.0, 1.0);\n\n  // Painterly tone bands: shadow -> body -> sunlit.\n  vec3 shadowCol = mix(u_c4, u_c1, mix(0.42, 0.1, storm));\n  shadowCol *= mix(0.92, 0.78, storm);\n  vec3 bodyCol = mix(u_c4, u_c3, 0.55);\n  vec3 litCol = mix(u_c3, vec3(1.0), 0.45 * luma(u_c3));\n  litCol = mix(litCol, mix(u_c3, u_c2, 0.28), storm);\n  litCol = mix(litCol, litCol * sunCol, sunAmt * 0.6);\n\n  float b1 = smoothstep(0.3, 0.44, light);\n  float b2 = smoothstep(0.6, 0.72, light);\n  vec3 cloud = mix(shadowCol, bodyCol, b1);\n  cloud = mix(cloud, litCol, b2);\n\n  // Silver lining where thin edges face the sun.\n  float rim = mask * (1.0 - thick) * exp(-sunDist * 1.1);\n  cloud += mix(sunCol, u_c2, storm) * rim * 0.55 * (0.4 + sunAmt);\n\n  // Lightning, lit from inside the deck.\n  if (u_flash > 0.0) {\n    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y);\n    float bloom = exp(-dot(view - fp, view - fp) * 3.2);\n    vec3 bolt = vec3(0.86, 0.9, 1.0);\n    cloud += bolt * u_flash * bloom * (0.25 + thick * 0.95);\n    sky += bolt * u_flash * (0.05 + bloom * 0.12);\n  }\n\n  // Distance haze swallows far clouds into the horizon.\n  float fog = smoothstep(1.3, 3.4, depth);\n  cloud = mix(cloud, haze, fog * 0.7);\n\n  float alpha = mask * mix(0.62, 1.0, u_intensity) * (1.0 - fog * 0.45);\n  vec3 col = mix(sky, cloud, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(luma(col)), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"lightning\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    lightning: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uFlash = gl.getUniformLocation(program, \"u_flash\")\n  const uFlashPos = gl.getUniformLocation(program, \"u_flashPos\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.\n  const strike = { at: 0, next: 0, x: 0, y: 0 }\n  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))\n  const flashAt = (now: number) => {\n    if (!options.lightning || reduce) {\n      strike.next = 0\n      return 0\n    }\n    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500\n    if (now >= strike.next) {\n      strike.at = now\n      strike.next = now + 4000 + Math.random() * 6000\n      strike.x = (Math.random() - 0.5) * 0.9\n      strike.y = 0.55 + Math.random() * 0.35\n    }\n    if (strike.at === 0) return 0\n    const s = (now - strike.at) / 1000\n    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.uniform1f(uFlash, flashAt(now))\n    gl.uniform2f(uFlashPos, strike.x, strike.y)\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderSkyOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.1,\n    coverage = 0.5,\n    intensity = 0.9,\n    amount = 0.5,\n    scale = 0.4,\n    variation = 0.7,\n    interactive = false,\n    lightning = false,\n    glass = false,\n    glassSize = 7,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderSkyInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(skyFallback(colors, isDark))\n</script>\n\n<div\n  data-slot=\"shader-sky\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
+      "content": "<script module lang=\"ts\">\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Storm flashes that light the clouds from inside, every few seconds.\n   * Off under reduced motion. Default false\n   */\n  lightning?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\n/**\n * Volumetric cumulus: rays from the viewer march through a slab of cloud\n * between BASE and TOP. Density is 3D noise shaped by a height profile and\n * cut back to a slow 2D coverage map, so clouds billow with clear sky\n * between them. Sunlight is attenuated\n * toward the sun (Beer–Lambert) and scattered with a two-lobe phase, so\n * edges near the sun glow and thick cores go gray underneath.\n */\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\nuniform float u_flash;\nuniform vec2 u_flashPos;\nuniform sampler2D u_noise;\n\n// Cloud slab, in world units above the viewer.\nconst float BASE = 1.0;\nconst float TOP = 1.9;\n// Past this distance the layer is haze, not clouds.\nconst float FAR = 34.0;\nconst int STEPS = 36;\nconst int LIGHT_STEPS = 3;\n// Horizon just inside the bottom edge, like a photo taken from a hill.\nconst float TILT = 0.46;\n\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\n// Value noise from a 256² random texture: one lookup per sample.\nfloat noise2(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  return texture2D(u_noise, (i + f + 0.5) / 256.0).x;\n}\n\n// 3D value noise: the texture's green channel is red offset by (37, 239),\n// so one lookup returns two neighbouring z slices.\nfloat noise3(vec3 p) {\n  vec3 i = floor(p);\n  vec3 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  vec2 uv = i.xy + vec2(37.0, 239.0) * i.z + f.xy;\n  vec2 rg = texture2D(u_noise, (uv + 0.5) / 256.0).yx;\n  return mix(rg.x, rg.y, f.z);\n}\n\nfloat luma(vec3 c) {\n  return dot(c, vec3(0.2126, 0.7152, 0.0722));\n}\n\n// Henyey–Greenstein, scaled so isotropic scattering is 1.\nfloat phaseHG(float mu, float g) {\n  float g2 = g * g;\n  return (1.0 - g2) / pow(1.0 + g2 - 2.0 * g * mu, 1.5);\n}\n\n// Local coverage: a slow 2D weather map splits the sky into distinct\n// clouds with clear gaps between them.\nfloat coverageAt(vec2 xz) {\n  float weather = noise2(xz * mix(0.14, 0.32, u_amount) + 13.7);\n  float cov = mix(0.22, 0.72, u_coverage);\n  return clamp(cov + (weather - 0.5) * mix(1.0, 0.55, u_amount), 0.0, 1.0);\n}\n\n// Cumulus density: 3D fbm shaped by a height profile (flat-ish base,\n// billowing top), then cut back to the local coverage.\nfloat density(vec3 q, float hf, float cov, float t, float fine) {\n  float shape = smoothstep(0.0, 0.14, hf) * (1.0 - smoothstep(0.35, 1.0, hf));\n  float n = noise3(q) * 0.52;\n  n += noise3(q * 2.03 + 3.1) * 0.27;\n  n += noise3(q * 4.07 + 7.7) * 0.14;\n  n += fine * noise3(q * 8.3 + 1.9) * 0.1;\n  n /= 0.93 + fine * 0.1;\n  float d = n * shape;\n  d = clamp((d - (1.0 - cov)) / max(cov, 0.05), 0.0, 1.0);\n  if (fine > 0.5 && d > 0.0) {\n    // Wispy erosion at the rims, rising slowly like convection.\n    float e = noise3(q * 6.1 + vec3(0.0, -t * 0.6, 0.0));\n    d = clamp(d - e * mix(0.08, 0.26, u_variation) * (1.0 - d), 0.0, 1.0);\n  }\n  return d;\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 s = (uv - 0.5) * vec2(aspect, 1.0);\n  s += (u_mouse - 0.5) * vec2(0.06, 0.03);\n  vec3 dir = normalize(vec3(s.x, s.y + TILT, 1.0));\n  vec3 sunDir = normalize(vec3(0.85, 0.95, 1.0));\n  float mu = dot(dir, sunDir);\n\n  // Storm palettes (cloud darker than the horizon) mute the sun.\n  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));\n  float sunAmt = 1.0 - storm * 0.75;\n  vec3 sunTint = mix(vec3(1.0, 0.96, 0.88), u_c3, 0.3);\n\n  // --- Sky ---------------------------------------------------------------\n  // Below the horizon there is only haze.\n  float up = clamp(dir.y, 0.0, 1.0);\n  vec3 sky = mix(u_c2, u_c1, pow(smoothstep(0.0, 0.85, up), 0.6));\n  vec3 haze = mix(u_c2, vec3(1.0), 0.3 * luma(u_c2));\n  sky = mix(sky, haze, exp(-up * 9.0) * 0.6);\n  float glow = pow(max(mu, 0.0), 8.0) * 0.14 + pow(max(mu, 0.0), 120.0) * 0.3;\n  sky += sunTint * glow * sunAmt;\n\n  // --- Clouds ------------------------------------------------------------\n  float freq = mix(2.2, 0.9, u_scale);\n  // Wind carries the field sideways and toward the viewer.\n  vec3 drift = vec3(t * 0.5, 0.0, t * 0.2);\n  float sigma = mix(10.0, 26.0, u_intensity);\n  vec3 sunLight = u_c3 * mix(1.12, 1.0, storm) * mix(vec3(1.0), sunTint, sunAmt * 0.5);\n  float phase = mix(phaseHG(mu, -0.2), phaseHG(mu, 0.7), 0.12);\n\n  vec3 L = vec3(0.0);\n  float T = 1.0;\n  float hitAt = 0.0;\n  if (dir.y > 0.02) {\n    float t0 = BASE / dir.y;\n    if (t0 < FAR) {\n      float t1 = min(TOP / dir.y, t0 + 5.0);\n      float dt = (t1 - t0) / float(STEPS);\n      // Jitter the start per pixel so the steps don't band.\n      float tt = t0 + dt * hash(gl_FragCoord.xy);\n      for (int i = 0; i < STEPS; i++) {\n        vec3 p = dir * tt;\n        vec3 q = p * freq + drift;\n        float hf = (p.y - BASE) / (TOP - BASE);\n        float cov = coverageAt(q.xz);\n        float d = cov > 0.02 ? density(q, hf, cov, t, 1.0) : 0.0;\n        if (d > 0.003) {\n          if (hitAt == 0.0) hitAt = tt;\n          // March toward the sun for self-shadowing.\n          float od = 0.0;\n          for (int j = 0; j < LIGHT_STEPS; j++) {\n            vec3 lp = p + sunDir * (0.05 + float(j) * 0.12);\n            float lh = (lp.y - BASE) / (TOP - BASE);\n            od += density(lp * freq + drift, lh, cov, t, 0.0);\n          }\n          od *= 0.12 * sigma * 0.5;\n          // Beer–Lambert with a softer tail standing in for multiple scattering.\n          float beer = max(exp(-od), exp(-od * 0.25) * 0.6);\n          float powder = 1.0 - exp(-d * 5.0);\n          vec3 ambient = mix(u_c4 * mix(0.82, 0.62, storm), mix(u_c1, u_c3, 0.6), hf);\n          vec3 lum = sunLight * beer * phase * mix(1.0, powder, 0.35) + ambient * 0.72;\n          float dT = exp(-d * sigma * dt);\n          L += T * (1.0 - dT) * lum;\n          T *= dT;\n          if (T < 0.02) break;\n        }\n        tt += dt;\n      }\n      // Aerial perspective: distant clouds melt into the horizon haze.\n      float fog = 1.0 - exp(-max(hitAt, t0) * 0.05);\n      L = mix(L, haze * (1.0 - T), fog * 0.85);\n    }\n  }\n\n  vec3 col = sky * T + L;\n\n  // Lightning, lit from inside the clouds it hits.\n  if (u_flash > 0.0) {\n    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y - 0.5);\n    float bloom = exp(-dot(s - fp, s - fp) * 3.2);\n    vec3 bolt = vec3(0.86, 0.9, 1.0);\n    col += bolt * u_flash * (bloom * (1.0 - T) * 0.95 + 0.05);\n  }\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(luma(col)), 0.04);\n  }\n  col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.008;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\n/** Soft clouds hide resolution, so cap the canvas to keep the march cheap. */\nconst MAX_PIXELS = 720_000\nconst NOISE_SIZE = 256\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/**\n * Seeded random texture for the shader's value noise. Green repeats red\n * offset by (37, 239), which lets one lookup serve two 3D noise slices.\n * Seeded so every visit gets the same sky.\n */\nfunction noiseTexels() {\n  const size = NOISE_SIZE\n  const data = new Uint8Array(size * size * 4)\n  let seed = 0x23d\n  const rand = () => {\n    seed = (seed + 0x6d2b79f5) | 0\n    let r = Math.imul(seed ^ (seed >>> 15), 1 | seed)\n    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n  for (let i = 0; i < size * size; i++) {\n    data[i * 4] = Math.floor(rand() * 256)\n  }\n  for (let y = 0; y < size; y++) {\n    for (let x = 0; x < size; x++) {\n      const from = ((y - 239) & (size - 1)) * size + ((x - 37) & (size - 1))\n      const i = (y * size + x) * 4\n      data[i + 1] = data[from * 4]!\n      data[i + 2] = 0\n      data[i + 3] = 255\n    }\n  }\n  return data\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — volumetric clouds drifting across clear blue in\n * light, storm gray in dark, with optional lightning. Optional\n * window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"lightning\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    lightning: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const noiseTex = gl.createTexture()\n  gl.activeTexture(gl.TEXTURE0)\n  gl.bindTexture(gl.TEXTURE_2D, noiseTex)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    NOISE_SIZE,\n    NOISE_SIZE,\n    0,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    noiseTexels()\n  )\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)\n  gl.uniform1i(gl.getUniformLocation(program, \"u_noise\"), 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uFlash = gl.getUniformLocation(program, \"u_flash\")\n  const uFlashPos = gl.getUniformLocation(program, \"u_flashPos\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.\n  const strike = { at: 0, next: 0, x: 0, y: 0 }\n  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))\n  const flashAt = (now: number) => {\n    if (!options.lightning || reduce) {\n      strike.next = 0\n      return 0\n    }\n    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500\n    if (now >= strike.next) {\n      strike.at = now\n      strike.next = now + 4000 + Math.random() * 6000\n      strike.x = (Math.random() - 0.5) * 0.9\n      strike.y = 0.55 + Math.random() * 0.35\n    }\n    if (strike.at === 0) return 0\n    const s = (now - strike.at) / 1000\n    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))\n  }\n\n  // Device pixels per CSS pixel actually rendered (after the pixel cap).\n  let pixelScale = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    pixelScale = Math.min(dpr, Math.sqrt(MAX_PIXELS / (w * h)))\n    canvas.width = Math.max(1, Math.floor(w * pixelScale))\n    canvas.height = Math.max(1, Math.floor(h * pixelScale))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const glassPx = Math.max(2, options.glassSize ?? 7) * pixelScale\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.uniform1f(uFlash, flashAt(now))\n    gl.uniform2f(uFlashPos, strike.x, strike.y)\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n      gl.deleteTexture(noiseTex)\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends Omit<ShaderSkyOptions, \"onThemeChange\"> {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    colors,\n    speed = 0.1,\n    coverage = 0.5,\n    intensity = 0.9,\n    amount = 0.5,\n    scale = 0.4,\n    variation = 0.7,\n    interactive = false,\n    lightning = false,\n    glass = false,\n    glassSize = 7,\n    theme = \"auto\",\n  }: Props = $props()\n\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let isDark = $state(false)\n  let instance: ShaderSkyInstance | null = null\n\n  onMount(() => {\n    const sync = () => {\n      isDark = resolveDark(theme)\n    }\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n\n    if (!canvas) {\n      return () => {\n        mo.disconnect()\n        mq.removeEventListener(\"change\", sync)\n      }\n    }\n    instance = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: (dark) => {\n        isDark = dark\n      },\n    })\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    isDark = resolveDark(theme)\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n    })\n  })\n\n  const fallback = $derived(skyFallback(colors, isDark))\n</script>\n\n<div\n  data-slot=\"shader-sky\"\n  aria-hidden=\"true\"\n  class={cn(\"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\", className)}\n  style=\"background-color: {fallback.backgroundColor}; background-image: {fallback.backgroundImage};\"\n>\n  <!-- Firefox can hand an opaque WebGL canvas straight to the system\n       compositor, which ignores rounded clips. The mask on the root keeps it\n       in the page's own layer, so the parent's radius holds. -->\n  <canvas bind:this={canvas} class=\"absolute inset-0 size-full rounded-[inherit]\"></canvas>\n</div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/shader-sky.svelte"
     }
diff --git a/public/r/shader-sky.json b/public/r/shader-sky.json
index 7c7dae5..001eab8 100644
--- a/public/r/shader-sky.json
+++ b/public/r/shader-sky.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/shader-sky/shader-sky.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Storm flashes that light the clouds from inside, every few seconds.\n   * Off under reduced motion. Default false\n   */\n  lightning?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\nuniform float u_flash;\nuniform vec2 u_flashPos;\n\n// Where the horizon sits below the frame; the gap sets how steeply the\n// cloud deck recedes (near clouds overhead, small hazy ones low down).\nconst float HORIZON = -0.38;\n// Sun just past the top-right corner, in frame units.\nconst vec2 SUN = vec2(0.36, 1.06);\n\n// Sin-free hash — stays stable at large coordinates on mobile GPUs.\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\nconst mat2 ROT = mat2(1.6, 1.2, -1.2, 1.6);\n\nfloat fbm5(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 5; i++) {\n    v += a * noise(p);\n    p = ROT * p + 7.3;\n    a *= 0.5;\n  }\n  return v / 0.96875;\n}\n\nfloat fbm3(vec2 p) {\n  float v = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    v += a * noise(p);\n    p = ROT * p + 3.1;\n    a *= 0.5;\n  }\n  return v / 0.875;\n}\n\nfloat luma(vec3 c) {\n  return dot(c, vec3(0.2126, 0.7152, 0.0722));\n}\n\n// Cloud-deck coordinates: frame point -> where its ray meets the deck.\n// Returns (x, depth) on the plane; depth grows toward the horizon.\nvec2 deck(vec2 frame, float height) {\n  float rise = max(frame.y - HORIZON, 0.02);\n  return vec2(frame.x, 1.0) * (height / rise);\n}\n\nfloat cloudThreshold() {\n  return mix(0.62, 0.44, u_amount) - (u_coverage - 0.5) * 0.12;\n}\n\n// Raw cumulus field at an already-warped point. Distinct clouds come from\n// a low-frequency clump term splitting the deck.\nfloat cloudField(vec2 p) {\n  float base = fbm5(p);\n  float clump = noise(p * mix(0.22, 0.5, u_amount) + 4.2);\n  return base + (clump - 0.5) * mix(0.55, 0.3, u_amount);\n}\n\nfloat cloudThickness(float d, float th) {\n  return smoothstep(th, th + mix(0.1, 0.2, u_coverage), d);\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  // Frame space: x centred and aspect-true, y 0 at the bottom edge.\n  vec2 frame = vec2((uv.x - 0.5) * aspect, uv.y);\n  vec2 look = (u_mouse - 0.5) * vec2(0.08, 0.035);\n  vec2 view = frame + look;\n\n  // Storm palettes (cloud darker than the horizon) light tops toward the\n  // sky instead of toward white, and mute the sun.\n  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));\n  float sunAmt = (1.0 - storm * 0.8) * smoothstep(0.25, 0.8, luma(u_c3));\n\n  // --- Sky ---------------------------------------------------------------\n  float h = clamp(uv.y, 0.0, 1.0);\n  vec3 sky = mix(u_c2, u_c1, pow(h, 0.72));\n  vec3 haze = mix(u_c2, vec3(1.0), 0.28 * luma(u_c2));\n  sky = mix(sky, haze, pow(1.0 - h, 3.0) * 0.55);\n\n  vec2 sunFrame = vec2(SUN.x * aspect, SUN.y);\n  float sunDist = length(view - sunFrame);\n  vec3 sunCol = mix(vec3(1.0, 0.96, 0.86), u_c3, 0.25);\n  float glow = exp(-sunDist * 2.4) * 0.34 + exp(-sunDist * 9.0) * 0.3;\n  sky += sunCol * glow * sunAmt;\n\n  // --- High cirrus: a slower, farther deck for parallax ------------------\n  vec2 hi = deck(view, 2.6) * mix(1.1, 0.55, u_scale);\n  hi += vec2(t * 0.16, -t * 0.05);\n  float streak = fbm3(vec2(hi.x * 0.55 + hi.y * 0.25, hi.y * 2.6));\n  float cirrus = smoothstep(0.56, 0.86, streak) * smoothstep(-0.1, 0.5, h);\n  cirrus *= mix(0.1, 0.34, u_variation) * (1.0 - storm * 0.6);\n  sky = mix(sky, mix(haze, vec3(1.0), 0.5 * (1.0 - storm)), cirrus);\n\n  // --- Cumulus deck ------------------------------------------------------\n  float freq = mix(3.4, 1.3, u_scale);\n  vec2 plane = deck(view, 1.0);\n  float depth = plane.y;\n  // Wind carries clouds sideways and slowly toward the viewer.\n  vec2 wind = vec2(t * 0.34, -t * 0.22);\n  vec2 q = plane * freq + wind;\n\n  // Far clouds shrink on screen, so soften their edges to stay clean.\n  float edge = 0.012 + 0.014 * depth;\n  // A gentle warp gives the masses lobes without smearing them into paint.\n  vec2 w = vec2(fbm3(q * 0.45 + vec2(1.7, 9.2) + t * 0.05),\n                fbm3(q * 0.45 + vec2(8.3, 2.8) - t * 0.04)) - 0.5;\n  vec2 p = q + w * 0.9;\n\n  float th = cloudThreshold();\n  float d = cloudField(p);\n  // Billowy edges: small puffs eat into the rim, never the core.\n  float puff = fbm3(p * 3.4 + vec2(t * 0.12, 0.0));\n  d -= (1.0 - smoothstep(th - 0.05, th + 0.2, d)) * (puff - 0.45) * mix(0.12, 0.4, u_variation);\n\n  float mask = smoothstep(th, th + edge, d);\n  float thick = cloudThickness(d, th);\n\n  // Compare the cloud here with the cloud toward the sun: thinning ahead\n  // means a sun-facing flank (lit), thickening means the far side (shade),\n  // and a flat interior settles on the body tone.\n  // The warp barely changes over these short steps, so reuse it.\n  vec2 toSun = normalize(vec2(0.8, -0.6)) * 0.14;\n  float ahead = cloudThickness(cloudField(p + toSun), th) * 0.45;\n  ahead += cloudThickness(cloudField(p + toSun * 2.4), th) * 0.35;\n  ahead += cloudThickness(cloudField(p + toSun * 4.0), th) * 0.2;\n  // Soft lobes inside the body catch light so big clouds never go flat.\n  float lobes = fbm3(q * 2.3 + vec2(11.0 + t * 0.1, 4.0));\n  float light = 0.63 + (thick - ahead) * 1.1 - thick * 0.08;\n  light += (lobes - 0.45) * 0.32 * thick;\n  light = clamp(light, 0.0, 1.0);\n\n  // Painterly tone bands: shadow -> body -> sunlit.\n  vec3 shadowCol = mix(u_c4, u_c1, mix(0.42, 0.1, storm));\n  shadowCol *= mix(0.92, 0.78, storm);\n  vec3 bodyCol = mix(u_c4, u_c3, 0.55);\n  vec3 litCol = mix(u_c3, vec3(1.0), 0.45 * luma(u_c3));\n  litCol = mix(litCol, mix(u_c3, u_c2, 0.28), storm);\n  litCol = mix(litCol, litCol * sunCol, sunAmt * 0.6);\n\n  float b1 = smoothstep(0.3, 0.44, light);\n  float b2 = smoothstep(0.6, 0.72, light);\n  vec3 cloud = mix(shadowCol, bodyCol, b1);\n  cloud = mix(cloud, litCol, b2);\n\n  // Silver lining where thin edges face the sun.\n  float rim = mask * (1.0 - thick) * exp(-sunDist * 1.1);\n  cloud += mix(sunCol, u_c2, storm) * rim * 0.55 * (0.4 + sunAmt);\n\n  // Lightning, lit from inside the deck.\n  if (u_flash > 0.0) {\n    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y);\n    float bloom = exp(-dot(view - fp, view - fp) * 3.2);\n    vec3 bolt = vec3(0.86, 0.9, 1.0);\n    cloud += bolt * u_flash * bloom * (0.25 + thick * 0.95);\n    sky += bolt * u_flash * (0.05 + bloom * 0.12);\n  }\n\n  // Distance haze swallows far clouds into the horizon.\n  float fog = smoothstep(1.3, 3.4, depth);\n  cloud = mix(cloud, haze, fog * 0.7);\n\n  float alpha = mask * mix(0.62, 1.0, u_intensity) * (1.0 - fog * 0.45);\n  vec3 col = mix(sky, cloud, alpha);\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(luma(col)), 0.04);\n    col += (hash(gl_FragCoord.xy) - 0.5) * 0.008;\n  } else {\n    col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.01;\n  }\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark. Optional window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"lightning\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    lightning: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uFlash = gl.getUniformLocation(program, \"u_flash\")\n  const uFlashPos = gl.getUniformLocation(program, \"u_flashPos\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.\n  const strike = { at: 0, next: 0, x: 0, y: 0 }\n  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))\n  const flashAt = (now: number) => {\n    if (!options.lightning || reduce) {\n      strike.next = 0\n      return 0\n    }\n    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500\n    if (now >= strike.next) {\n      strike.at = now\n      strike.next = now + 4000 + Math.random() * 6000\n      strike.x = (Math.random() - 0.5) * 0.9\n      strike.y = 0.55 + Math.random() * 0.35\n    }\n    if (strike.at === 0) return 0\n    const s = (now - strike.at) / 1000\n    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))\n  }\n\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    canvas.width = Math.max(1, Math.floor(w * dpr))\n    canvas.height = Math.max(1, Math.floor(h * dpr))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    const glassPx = Math.max(2, options.glassSize ?? 7) * dpr\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.uniform1f(uFlash, flashAt(now))\n    gl.uniform2f(uFlashPos, strike.x, strike.y)\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n    },\n  }\n}\n\nexport type ShaderSkyProps = Omit<ShaderSkyOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark, with optional lightning. Optional window-glass film.\n */\nexport function ShaderSky({\n  className,\n  colors,\n  speed = 0.1,\n  coverage = 0.5,\n  intensity = 0.9,\n  amount = 0.5,\n  scale = 0.4,\n  variation = 0.7,\n  interactive = false,\n  lightning = false,\n  glass = false,\n  glassSize = 7,\n  theme = \"auto\",\n}: ShaderSkyProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderSkyInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    coverage,\n    intensity,\n    amount,\n    scale,\n    variation,\n    interactive,\n    lightning,\n    glass,\n    glassSize,\n    theme,\n  ])\n\n  const fallback = skyFallback(colors, isDark)\n\n  return (\n    <div\n      data-slot=\"shader-sky\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShaderSkyTheme = \"light\" | \"dark\" | \"auto\"\n\nexport type ShaderSkyOptions = {\n  /** Zenith / horizon / cloud / shade hex */\n  colors?: string[]\n  /** Drift speed. Default 0.1 */\n  speed?: number\n  /** How thick the clouds read 0–1. Default 0.5 */\n  coverage?: number\n  /** Cloud strength 0–1. Default 0.9 */\n  intensity?: number\n  /** How many distinct clouds 0–1. Default 0.5 */\n  amount?: number\n  /** Cloud size 0–1. Default 0.4 */\n  scale?: number\n  /** Mix of big and small clouds 0–1. Default 0.7 */\n  variation?: number\n  /** Follow the pointer gently. Default false */\n  interactive?: boolean\n  /**\n   * Storm flashes that light the clouds from inside, every few seconds.\n   * Off under reduced motion. Default false\n   */\n  lightning?: boolean\n  /**\n   * Window glass — a transparent dotted film over the sky.\n   * Default false\n   */\n  glass?: boolean\n  /** Glass texture cell size in CSS px. Default `7` */\n  glassSize?: number\n  /**\n   * Palette mode. Default `auto` follows shadcn / next-themes\n   * (`html.dark` class) **only when `colors` is omitted**, so the stock\n   * clear-sky / rain palettes swap with the site theme. A custom palette\n   * stays put.\n   */\n  theme?: ShaderSkyTheme\n  /** Fires whenever resolved dark mode changes (CSS fallback). */\n  onThemeChange?: (dark: boolean) => void\n}\n\nexport type ShaderSkyInstance = {\n  setOptions: (options: Partial<ShaderSkyOptions>) => void\n  destroy: () => void\n}\n\n/** Open daylight — zenith / horizon / white smoke / cool shade */\nexport const LIGHT_COLORS = [\"#2478C8\", \"#8ECBF2\", \"#F7FBFF\", \"#C5D8EC\"]\n/** Storm ceiling — light slate / rain horizon / mid cloud / cool shade */\nexport const DARK_COLORS = [\"#9AA3AD\", \"#C8CED4\", \"#5C6570\", \"#3F4750\"]\n\nexport const LIGHT_FALLBACK = {\n  backgroundColor: \"#5BA3DC\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #2478C8 0%, #5BA3DC 48%, #8ECBF2 100%)\",\n    \"radial-gradient(28% 18% at 22% 68%, #F7FBFF 0%, transparent 70%)\",\n    \"radial-gradient(24% 16% at 74% 42%, #F7FBFF 0%, transparent 68%)\",\n    \"radial-gradient(20% 14% at 88% 76%, #C5D8EC 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport const DARK_FALLBACK = {\n  backgroundColor: \"#A8B0B8\",\n  backgroundImage: [\n    \"linear-gradient(180deg, #9AA3AD 0%, #B0B7BF 46%, #C8CED4 100%)\",\n    \"radial-gradient(32% 22% at 24% 62%, #5C6570 0%, transparent 70%)\",\n    \"radial-gradient(26% 18% at 76% 34%, #3F4750 0%, transparent 68%)\",\n    \"radial-gradient(22% 16% at 58% 80%, #5C6570 0%, transparent 70%)\",\n  ].join(\", \"),\n} as const\n\nexport function skyFallback(colors: string[] | undefined, dark: boolean) {\n  if (colors && colors.length > 0) {\n    const c1 = colors[0] ?? LIGHT_COLORS[0]!\n    const c2 = colors[1] ?? LIGHT_COLORS[1]!\n    const c3 = colors[2] ?? LIGHT_COLORS[2]!\n    const c4 = colors[3] ?? LIGHT_COLORS[3]!\n    return {\n      backgroundColor: c2,\n      backgroundImage: [\n        `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,\n        `radial-gradient(28% 18% at 22% 68%, ${c3} 0%, transparent 70%)`,\n        `radial-gradient(24% 16% at 74% 42%, ${c3} 0%, transparent 68%)`,\n        `radial-gradient(20% 14% at 88% 76%, ${c4} 0%, transparent 70%)`,\n      ].join(\", \"),\n    }\n  }\n  return dark ? DARK_FALLBACK : LIGHT_FALLBACK\n}\n\nconst VERT = `\nattribute vec2 a_position;\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`\n\n/**\n * Volumetric cumulus: rays from the viewer march through a slab of cloud\n * between BASE and TOP. Density is 3D noise shaped by a height profile and\n * cut back to a slow 2D coverage map, so clouds billow with clear sky\n * between them. Sunlight is attenuated\n * toward the sun (Beer–Lambert) and scattered with a two-lobe phase, so\n * edges near the sun glow and thick cores go gray underneath.\n */\nconst FRAG = `\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_speed;\nuniform float u_coverage;\nuniform float u_intensity;\nuniform float u_amount;\nuniform float u_scale;\nuniform float u_variation;\nuniform float u_glass;\nuniform float u_glassSize;\nuniform vec3 u_c1;\nuniform vec3 u_c2;\nuniform vec3 u_c3;\nuniform vec3 u_c4;\nuniform vec2 u_mouse;\nuniform float u_flash;\nuniform vec2 u_flashPos;\nuniform sampler2D u_noise;\n\n// Cloud slab, in world units above the viewer.\nconst float BASE = 1.0;\nconst float TOP = 1.9;\n// Past this distance the layer is haze, not clouds.\nconst float FAR = 34.0;\nconst int STEPS = 36;\nconst int LIGHT_STEPS = 3;\n// Horizon just inside the bottom edge, like a photo taken from a hill.\nconst float TILT = 0.46;\n\nfloat hash(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * 0.1031);\n  p3 += dot(p3, p3.yzx + 33.33);\n  return fract((p3.x + p3.y) * p3.z);\n}\n\n// Value noise from a 256² random texture: one lookup per sample.\nfloat noise2(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  return texture2D(u_noise, (i + f + 0.5) / 256.0).x;\n}\n\n// 3D value noise: the texture's green channel is red offset by (37, 239),\n// so one lookup returns two neighbouring z slices.\nfloat noise3(vec3 p) {\n  vec3 i = floor(p);\n  vec3 f = fract(p);\n  f = f * f * (3.0 - 2.0 * f);\n  vec2 uv = i.xy + vec2(37.0, 239.0) * i.z + f.xy;\n  vec2 rg = texture2D(u_noise, (uv + 0.5) / 256.0).yx;\n  return mix(rg.x, rg.y, f.z);\n}\n\nfloat luma(vec3 c) {\n  return dot(c, vec3(0.2126, 0.7152, 0.0722));\n}\n\n// Henyey–Greenstein, scaled so isotropic scattering is 1.\nfloat phaseHG(float mu, float g) {\n  float g2 = g * g;\n  return (1.0 - g2) / pow(1.0 + g2 - 2.0 * g * mu, 1.5);\n}\n\n// Local coverage: a slow 2D weather map splits the sky into distinct\n// clouds with clear gaps between them.\nfloat coverageAt(vec2 xz) {\n  float weather = noise2(xz * mix(0.14, 0.32, u_amount) + 13.7);\n  float cov = mix(0.22, 0.72, u_coverage);\n  return clamp(cov + (weather - 0.5) * mix(1.0, 0.55, u_amount), 0.0, 1.0);\n}\n\n// Cumulus density: 3D fbm shaped by a height profile (flat-ish base,\n// billowing top), then cut back to the local coverage.\nfloat density(vec3 q, float hf, float cov, float t, float fine) {\n  float shape = smoothstep(0.0, 0.14, hf) * (1.0 - smoothstep(0.35, 1.0, hf));\n  float n = noise3(q) * 0.52;\n  n += noise3(q * 2.03 + 3.1) * 0.27;\n  n += noise3(q * 4.07 + 7.7) * 0.14;\n  n += fine * noise3(q * 8.3 + 1.9) * 0.1;\n  n /= 0.93 + fine * 0.1;\n  float d = n * shape;\n  d = clamp((d - (1.0 - cov)) / max(cov, 0.05), 0.0, 1.0);\n  if (fine > 0.5 && d > 0.0) {\n    // Wispy erosion at the rims, rising slowly like convection.\n    float e = noise3(q * 6.1 + vec3(0.0, -t * 0.6, 0.0));\n    d = clamp(d - e * mix(0.08, 0.26, u_variation) * (1.0 - d), 0.0, 1.0);\n  }\n  return d;\n}\n\nvoid main() {\n  float aspect = u_resolution.x / max(u_resolution.y, 1.0);\n  float t = u_time * u_speed;\n  float cell = max(u_glassSize, 2.0);\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  vec2 glassLocal = fract(gl_FragCoord.xy / cell) - 0.5;\n  if (u_glass > 0.5) {\n    uv += glassLocal * 0.0032;\n  }\n\n  vec2 s = (uv - 0.5) * vec2(aspect, 1.0);\n  s += (u_mouse - 0.5) * vec2(0.06, 0.03);\n  vec3 dir = normalize(vec3(s.x, s.y + TILT, 1.0));\n  vec3 sunDir = normalize(vec3(0.85, 0.95, 1.0));\n  float mu = dot(dir, sunDir);\n\n  // Storm palettes (cloud darker than the horizon) mute the sun.\n  float storm = smoothstep(0.02, -0.12, luma(u_c3) - luma(u_c2));\n  float sunAmt = 1.0 - storm * 0.75;\n  vec3 sunTint = mix(vec3(1.0, 0.96, 0.88), u_c3, 0.3);\n\n  // --- Sky ---------------------------------------------------------------\n  // Below the horizon there is only haze.\n  float up = clamp(dir.y, 0.0, 1.0);\n  vec3 sky = mix(u_c2, u_c1, pow(smoothstep(0.0, 0.85, up), 0.6));\n  vec3 haze = mix(u_c2, vec3(1.0), 0.3 * luma(u_c2));\n  sky = mix(sky, haze, exp(-up * 9.0) * 0.6);\n  float glow = pow(max(mu, 0.0), 8.0) * 0.14 + pow(max(mu, 0.0), 120.0) * 0.3;\n  sky += sunTint * glow * sunAmt;\n\n  // --- Clouds ------------------------------------------------------------\n  float freq = mix(2.2, 0.9, u_scale);\n  // Wind carries the field sideways and toward the viewer.\n  vec3 drift = vec3(t * 0.5, 0.0, t * 0.2);\n  float sigma = mix(10.0, 26.0, u_intensity);\n  vec3 sunLight = u_c3 * mix(1.12, 1.0, storm) * mix(vec3(1.0), sunTint, sunAmt * 0.5);\n  float phase = mix(phaseHG(mu, -0.2), phaseHG(mu, 0.7), 0.12);\n\n  vec3 L = vec3(0.0);\n  float T = 1.0;\n  float hitAt = 0.0;\n  if (dir.y > 0.02) {\n    float t0 = BASE / dir.y;\n    if (t0 < FAR) {\n      float t1 = min(TOP / dir.y, t0 + 5.0);\n      float dt = (t1 - t0) / float(STEPS);\n      // Jitter the start per pixel so the steps don't band.\n      float tt = t0 + dt * hash(gl_FragCoord.xy);\n      for (int i = 0; i < STEPS; i++) {\n        vec3 p = dir * tt;\n        vec3 q = p * freq + drift;\n        float hf = (p.y - BASE) / (TOP - BASE);\n        float cov = coverageAt(q.xz);\n        float d = cov > 0.02 ? density(q, hf, cov, t, 1.0) : 0.0;\n        if (d > 0.003) {\n          if (hitAt == 0.0) hitAt = tt;\n          // March toward the sun for self-shadowing.\n          float od = 0.0;\n          for (int j = 0; j < LIGHT_STEPS; j++) {\n            vec3 lp = p + sunDir * (0.05 + float(j) * 0.12);\n            float lh = (lp.y - BASE) / (TOP - BASE);\n            od += density(lp * freq + drift, lh, cov, t, 0.0);\n          }\n          od *= 0.12 * sigma * 0.5;\n          // Beer–Lambert with a softer tail standing in for multiple scattering.\n          float beer = max(exp(-od), exp(-od * 0.25) * 0.6);\n          float powder = 1.0 - exp(-d * 5.0);\n          vec3 ambient = mix(u_c4 * mix(0.82, 0.62, storm), mix(u_c1, u_c3, 0.6), hf);\n          vec3 lum = sunLight * beer * phase * mix(1.0, powder, 0.35) + ambient * 0.72;\n          float dT = exp(-d * sigma * dt);\n          L += T * (1.0 - dT) * lum;\n          T *= dT;\n          if (T < 0.02) break;\n        }\n        tt += dt;\n      }\n      // Aerial perspective: distant clouds melt into the horizon haze.\n      float fog = 1.0 - exp(-max(hitAt, t0) * 0.05);\n      L = mix(L, haze * (1.0 - T), fog * 0.85);\n    }\n  }\n\n  vec3 col = sky * T + L;\n\n  // Lightning, lit from inside the clouds it hits.\n  if (u_flash > 0.0) {\n    vec2 fp = vec2(u_flashPos.x * aspect, u_flashPos.y - 0.5);\n    float bloom = exp(-dot(s - fp, s - fp) * 3.2);\n    vec3 bolt = vec3(0.86, 0.9, 1.0);\n    col += bolt * u_flash * (bloom * (1.0 - T) * 0.95 + 0.05);\n  }\n\n  if (u_glass > 0.5) {\n    float pane = smoothstep(0.50, 0.22, length(glassLocal));\n    col *= mix(0.93, 1.0, pane);\n    vec2 hl = glassLocal - vec2(-0.16, 0.18);\n    col += exp(-dot(hl, hl) * 55.0) * 0.035;\n    col = mix(col, vec3(luma(col)), 0.04);\n  }\n  col += (hash(gl_FragCoord.xy + fract(u_time) * 91.0) - 0.5) * 0.008;\n\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n`\n\n/** Soft clouds hide resolution, so cap the canvas to keep the march cheap. */\nconst MAX_PIXELS = 720_000\nconst NOISE_SIZE = 256\n\nfunction isDev() {\n  return (\n    typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\"\n  )\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const h = hex.replace(\"#\", \"\").trim()\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h.padEnd(6, \"0\").slice(0, 6)\n  const n = Number.parseInt(full, 16)\n  if (Number.isNaN(n)) return [0.14, 0.47, 0.78]\n  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/**\n * Seeded random texture for the shader's value noise. Green repeats red\n * offset by (37, 239), which lets one lookup serve two 3D noise slices.\n * Seeded so every visit gets the same sky.\n */\nfunction noiseTexels() {\n  const size = NOISE_SIZE\n  const data = new Uint8Array(size * size * 4)\n  let seed = 0x23d\n  const rand = () => {\n    seed = (seed + 0x6d2b79f5) | 0\n    let r = Math.imul(seed ^ (seed >>> 15), 1 | seed)\n    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r\n    return ((r ^ (r >>> 14)) >>> 0) / 4294967296\n  }\n  for (let i = 0; i < size * size; i++) {\n    data[i * 4] = Math.floor(rand() * 256)\n  }\n  for (let y = 0; y < size; y++) {\n    for (let x = 0; x < size; x++) {\n      const from = ((y - 239) & (size - 1)) * size + ((x - 37) & (size - 1))\n      const i = (y * size + x) * 4\n      data[i + 1] = data[from * 4]!\n      data[i + 2] = 0\n      data[i + 3] = 255\n    }\n  }\n  return data\n}\n\n/** Resolves shadcn / next-themes dark mode (`attribute=\"class\"` → `html.dark`). */\nexport function isDarkTheme(): boolean {\n  if (typeof document === \"undefined\") return false\n  const root = document.documentElement\n  if (root.classList.contains(\"dark\")) return true\n  if (root.classList.contains(\"light\")) return false\n  const dataTheme = root.getAttribute(\"data-theme\")\n  if (dataTheme === \"dark\") return true\n  if (dataTheme === \"light\") return false\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n}\n\nexport function resolveDark(theme: ShaderSkyTheme): boolean {\n  if (theme === \"dark\") return true\n  if (theme === \"light\") return false\n  return isDarkTheme()\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string) {\n  const shader = gl.createShader(type)\n  if (!shader) return null\n  gl.shaderSource(shader, source)\n  gl.compileShader(shader)\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: shader failed to compile\\n\",\n        gl.getShaderInfoLog(shader)\n      )\n    }\n    gl.deleteShader(shader)\n    return null\n  }\n  return shader\n}\n\n/**\n * WebGL sky for heroes — volumetric clouds drifting across clear blue in\n * light, storm gray in dark, with optional lightning. Optional\n * window-glass film.\n */\nexport function createShaderSky(\n  canvas: HTMLCanvasElement,\n  initial: ShaderSkyOptions = {}\n): ShaderSkyInstance | null {\n  let options: Required<\n    Pick<\n      ShaderSkyOptions,\n      | \"speed\"\n      | \"coverage\"\n      | \"intensity\"\n      | \"amount\"\n      | \"scale\"\n      | \"variation\"\n      | \"interactive\"\n      | \"lightning\"\n      | \"glass\"\n      | \"glassSize\"\n      | \"theme\"\n    >\n  > &\n    ShaderSkyOptions = {\n    speed: 0.1,\n    coverage: 0.5,\n    intensity: 0.9,\n    amount: 0.5,\n    scale: 0.4,\n    variation: 0.7,\n    interactive: false,\n    lightning: false,\n    glass: false,\n    glassSize: 7,\n    theme: \"auto\",\n    ...initial,\n  }\n\n  const mouse = { x: 0.5, y: 0.5 }\n  const targetMouse = { x: 0.5, y: 0.5 }\n  let reduce = false\n  let dark = resolveDark(options.theme ?? \"auto\")\n  options.onThemeChange?.(dark)\n\n  const gl = canvas.getContext(\"webgl\", {\n    alpha: false,\n    antialias: false,\n    depth: false,\n    stencil: false,\n    powerPreference: \"high-performance\",\n  })\n  if (!gl) return null\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT)\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG)\n  if (!vs || !fs) {\n    if (vs) gl.deleteShader(vs)\n    if (fs) gl.deleteShader(fs)\n    return null\n  }\n\n  const program = gl.createProgram()\n  if (!program) {\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.attachShader(program, vs)\n  gl.attachShader(program, fs)\n  gl.linkProgram(program)\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    if (isDev()) {\n      console.warn(\n        \"ShaderSky: program failed to link\\n\",\n        gl.getProgramInfoLog(program)\n      )\n    }\n    gl.deleteProgram(program)\n    gl.deleteShader(vs)\n    gl.deleteShader(fs)\n    return null\n  }\n  gl.useProgram(program)\n\n  const buf = gl.createBuffer()\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf)\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW\n  )\n  const loc = gl.getAttribLocation(program, \"a_position\")\n  gl.enableVertexAttribArray(loc)\n  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)\n\n  const noiseTex = gl.createTexture()\n  gl.activeTexture(gl.TEXTURE0)\n  gl.bindTexture(gl.TEXTURE_2D, noiseTex)\n  gl.texImage2D(\n    gl.TEXTURE_2D,\n    0,\n    gl.RGBA,\n    NOISE_SIZE,\n    NOISE_SIZE,\n    0,\n    gl.RGBA,\n    gl.UNSIGNED_BYTE,\n    noiseTexels()\n  )\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT)\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)\n  gl.uniform1i(gl.getUniformLocation(program, \"u_noise\"), 0)\n\n  const uResolution = gl.getUniformLocation(program, \"u_resolution\")\n  const uTime = gl.getUniformLocation(program, \"u_time\")\n  const uSpeed = gl.getUniformLocation(program, \"u_speed\")\n  const uCoverage = gl.getUniformLocation(program, \"u_coverage\")\n  const uIntensity = gl.getUniformLocation(program, \"u_intensity\")\n  const uAmount = gl.getUniformLocation(program, \"u_amount\")\n  const uScale = gl.getUniformLocation(program, \"u_scale\")\n  const uVariation = gl.getUniformLocation(program, \"u_variation\")\n  const uGlass = gl.getUniformLocation(program, \"u_glass\")\n  const uGlassSize = gl.getUniformLocation(program, \"u_glassSize\")\n  const uC1 = gl.getUniformLocation(program, \"u_c1\")\n  const uC2 = gl.getUniformLocation(program, \"u_c2\")\n  const uC3 = gl.getUniformLocation(program, \"u_c3\")\n  const uC4 = gl.getUniformLocation(program, \"u_c4\")\n  const uMouse = gl.getUniformLocation(program, \"u_mouse\")\n  const uFlash = gl.getUniformLocation(program, \"u_flash\")\n  const uFlashPos = gl.getUniformLocation(program, \"u_flashPos\")\n\n  let raf = 0\n  let running = true\n  const start = performance.now()\n  let frozenTime = 0\n\n  // One strike = a bright flicker and a softer echo, then 4–10s of quiet.\n  const strike = { at: 0, next: 0, x: 0, y: 0 }\n  const pulse = (s: number) => (s < 0 ? 0 : Math.exp(-s * 14))\n  const flashAt = (now: number) => {\n    if (!options.lightning || reduce) {\n      strike.next = 0\n      return 0\n    }\n    if (strike.next === 0) strike.next = now + 1500 + Math.random() * 2500\n    if (now >= strike.next) {\n      strike.at = now\n      strike.next = now + 4000 + Math.random() * 6000\n      strike.x = (Math.random() - 0.5) * 0.9\n      strike.y = 0.55 + Math.random() * 0.35\n    }\n    if (strike.at === 0) return 0\n    const s = (now - strike.at) / 1000\n    return Math.min(1, pulse(s) + 0.65 * pulse(s - 0.16))\n  }\n\n  // Device pixels per CSS pixel actually rendered (after the pixel cap).\n  let pixelScale = 1\n  const resize = () => {\n    const parent = canvas.parentElement\n    if (!parent) return\n    const w = parent.clientWidth\n    const h = parent.clientHeight\n    if (w <= 0 || h <= 0) return\n    const dpr = Math.min(window.devicePixelRatio || 1, 2)\n    pixelScale = Math.min(dpr, Math.sqrt(MAX_PIXELS / (w * h)))\n    canvas.width = Math.max(1, Math.floor(w * pixelScale))\n    canvas.height = Math.max(1, Math.floor(h * pixelScale))\n    canvas.style.width = `${w}px`\n    canvas.style.height = `${h}px`\n    gl.viewport(0, 0, canvas.width, canvas.height)\n  }\n\n  resize()\n  const ro = new ResizeObserver(resize)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const onReduce = () => {\n    reduce = mqReduce.matches\n  }\n  onReduce()\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  const syncTheme = () => {\n    const next = resolveDark(options.theme ?? \"auto\")\n    if (next === dark) return\n    dark = next\n    options.onThemeChange?.(dark)\n  }\n  const mo = new MutationObserver(syncTheme)\n  mo.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", syncTheme)\n\n  const onMove = (e: PointerEvent) => {\n    if (!options.interactive) return\n    const parent = canvas.parentElement\n    if (!parent) return\n    const rect = parent.getBoundingClientRect()\n    if (rect.width <= 0 || rect.height <= 0) return\n    targetMouse.x = (e.clientX - rect.left) / rect.width\n    targetMouse.y = 1 - (e.clientY - rect.top) / rect.height\n  }\n  window.addEventListener(\"pointermove\", onMove, { passive: true })\n\n  const tick = (now: number) => {\n    if (!running) return\n\n    if (reduce) {\n      if (frozenTime === 0) frozenTime = (now - start) / 1000\n    } else {\n      frozenTime = 0\n    }\n\n    const time = reduce ? frozenTime : (now - start) / 1000\n    const paletteSrc = options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)\n    const palette = [0, 1, 2, 3].map((i) =>\n      hexToRgb(paletteSrc[i % paletteSrc.length] ?? LIGHT_COLORS[i]!)\n    )\n\n    mouse.x += (targetMouse.x - mouse.x) * 0.03\n    mouse.y += (targetMouse.y - mouse.y) * 0.03\n\n    const glassPx = Math.max(2, options.glassSize ?? 7) * pixelScale\n\n    gl.uniform2f(uResolution, canvas.width, canvas.height)\n    gl.uniform1f(uTime, time)\n    gl.uniform1f(uSpeed, reduce ? 0 : (options.speed ?? 0.1))\n    gl.uniform1f(uCoverage, Math.min(1, Math.max(0, options.coverage ?? 0.5)))\n    gl.uniform1f(uIntensity, Math.min(1, Math.max(0, options.intensity ?? 0.9)))\n    gl.uniform1f(uAmount, Math.min(1, Math.max(0, options.amount ?? 0.5)))\n    gl.uniform1f(uScale, Math.min(1, Math.max(0, options.scale ?? 0.4)))\n    gl.uniform1f(uVariation, Math.min(1, Math.max(0, options.variation ?? 0.7)))\n    gl.uniform1f(uGlass, options.glass ? 1 : 0)\n    gl.uniform1f(uGlassSize, glassPx)\n    gl.uniform3f(uC1, palette[0]![0], palette[0]![1], palette[0]![2])\n    gl.uniform3f(uC2, palette[1]![0], palette[1]![1], palette[1]![2])\n    gl.uniform3f(uC3, palette[2]![0], palette[2]![1], palette[2]![2])\n    gl.uniform3f(uC4, palette[3]![0], palette[3]![1], palette[3]![2])\n    gl.uniform2f(\n      uMouse,\n      options.interactive ? mouse.x : 0.5,\n      options.interactive ? mouse.y : 0.5\n    )\n\n    gl.uniform1f(uFlash, flashAt(now))\n    gl.uniform2f(uFlashPos, strike.x, strike.y)\n\n    gl.drawArrays(gl.TRIANGLES, 0, 6)\n    raf = requestAnimationFrame(tick)\n  }\n\n  raf = requestAnimationFrame(tick)\n\n  return {\n    setOptions(next) {\n      options = { ...options, ...next }\n      syncTheme()\n    },\n    destroy() {\n      running = false\n      cancelAnimationFrame(raf)\n      ro.disconnect()\n      mo.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      mqDark.removeEventListener(\"change\", syncTheme)\n      window.removeEventListener(\"pointermove\", onMove)\n      gl.deleteProgram(program)\n      gl.deleteShader(vs)\n      gl.deleteShader(fs)\n      gl.deleteBuffer(buf)\n      gl.deleteTexture(noiseTex)\n    },\n  }\n}\n\nexport type ShaderSkyProps = Omit<ShaderSkyOptions, \"onThemeChange\"> & {\n  className?: string\n}\n\n/**\n * WebGL sky for heroes — clear blue with drifting clouds in light,\n * storm gray in dark, with optional lightning. Optional window-glass film.\n */\nexport function ShaderSky({\n  className,\n  colors,\n  speed = 0.1,\n  coverage = 0.5,\n  intensity = 0.9,\n  amount = 0.5,\n  scale = 0.4,\n  variation = 0.7,\n  interactive = false,\n  lightning = false,\n  glass = false,\n  glassSize = 7,\n  theme = \"auto\",\n}: ShaderSkyProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const instanceRef = useRef<ShaderSkyInstance | null>(null)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    const sync = () => setIsDark(resolveDark(theme))\n    sync()\n    const mo = new MutationObserver(sync)\n    mo.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    })\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\")\n    mq.addEventListener(\"change\", sync)\n    return () => {\n      mo.disconnect()\n      mq.removeEventListener(\"change\", sync)\n    }\n  }, [theme])\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    instanceRef.current = createShaderSky(canvas, {\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      colors,\n      speed,\n      coverage,\n      intensity,\n      amount,\n      scale,\n      variation,\n      interactive,\n      lightning,\n      glass,\n      glassSize,\n      theme,\n      onThemeChange: setIsDark,\n    })\n  }, [\n    colors,\n    speed,\n    coverage,\n    intensity,\n    amount,\n    scale,\n    variation,\n    interactive,\n    lightning,\n    glass,\n    glassSize,\n    theme,\n  ])\n\n  const fallback = skyFallback(colors, isDark)\n\n  return (\n    <div\n      data-slot=\"shader-sky\"\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [mask-image:linear-gradient(#000,#000)]\",\n        className\n      )}\n      style={{\n        backgroundColor: fallback.backgroundColor,\n        backgroundImage: fallback.backgroundImage,\n      }}\n    >\n      {/* Firefox can hand an opaque WebGL canvas straight to the system\n          compositor, which ignores rounded clips. The mask on the root keeps\n          it in the page's own layer, so the parent's radius holds. */}\n      <canvas\n        ref={canvasRef}\n        className=\"absolute inset-0 size-full rounded-[inherit]\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/shader-sky.tsx"
     }
diff --git a/public/r/stretchy-footer-svelte.json b/public/r/stretchy-footer-svelte.json
index d472ed2..b5ec07f 100644
--- a/public/r/stretchy-footer-svelte.json
+++ b/public/r/stretchy-footer-svelte.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/stretchy-footer/stretchy-footer.svelte",
-      "content": "<script module lang=\"ts\">\n/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */\nexport const DEFAULT_COLORS = [\n  \"#FF1AE6\",\n  \"#FF2E5E\",\n  \"#FF8A1A\",\n  \"#FFC81F\",\n  \"#E2E6EC\",\n  \"#8DB6E6\",\n  \"#2F74DC\",\n  \"#1459E3\",\n  \"#1C2566\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 9\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 16\n/** White floor bloom opacity (0–1). Off by default. */\nexport const DEFAULT_GLOW = 0\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Edge columns stand this share of the centre one; the rest step evenly. */\nconst EDGE_COLUMN = 0.55\n/** The top of each column fades in over this share of its height. */\nconst TOP_FADE = 0.12\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /**\n   * Gradient stops from the top of each column down to the floor, any CSS\n   * colors. Every column carries the whole gradient, squeezed to its height.\n   */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns, stepping down from the middle. Default `9`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `16`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Stepped pyramid: the middle column is tallest, each step out is shorter. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return 1 - (1 - EDGE_COLUMN) * Math.abs(t)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\nconst STRIP = 256\n\n/**\n * One column's gradient, `colors` spread from just under the top to the\n * floor, with the top fading in. Columns stretch it to their own height.\n */\nfunction makeStrip(colors: string[]) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = STRIP\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  const bands = g.createLinearGradient(0, 0, 0, STRIP)\n  colors.forEach((color, i) => {\n    const at = colors.length > 1 ? i / (colors.length - 1) : 1\n    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)\n  })\n  g.fillStyle = bands\n  g.fillRect(0, 0, 1, STRIP)\n  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, STRIP)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while a stepped pyramid of blurred gradient\n * columns stretches up from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strip = document.createElement(\"canvas\")\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = columnScale(i, count)\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrip = () => {\n    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(\n        strip,\n        0,\n        STRIP - 1,\n        1,\n        1,\n        x0,\n        floor,\n        x1 - x0,\n        bottom - floor\n      )\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrip()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrip()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends StretchyFooterOptions {\n    class?: string\n    /**\n     * Page content inside the overflow scroller.\n     * Ignored when `scrollEl` / `windowScroll` paint overlay-only.\n     */\n    children?: import(\"svelte\").Snippet\n    /**\n     * External scroll container. When set, this component only paints the\n     * aurora overlay and binds overscroll to that element.\n     * When omitted (and `windowScroll` is false), this component *is* the scroller.\n     */\n    scrollEl?: HTMLElement\n    /**\n     * Bind overscroll to the window and paint a fixed bottom aurora.\n     * Use on full pages instead of a nested scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element that lifts with the stretch (CSS selector).\n     * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.\n     */\n    contentSelector?: string\n    /** Accessible label for the scroll region. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    scrollEl,\n    windowScroll = false,\n    contentSelector = \"[data-stretchy-page]\",\n    maxStretch = DEFAULT_MAX_STRETCH,\n    colors = DEFAULT_COLORS,\n    stiffness = DEFAULT_STIFFNESS,\n    damping = DEFAULT_DAMPING,\n    columns = DEFAULT_COLUMNS,\n    blur = DEFAULT_BLUR,\n    glow = DEFAULT_GLOW,\n    label = \"Stretchy overflow\",\n    demoId,\n  }: Props = $props()\n\n  let mounted = $state(false)\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let scroller: HTMLDivElement | undefined = $state()\n  let content: HTMLDivElement | undefined = $state()\n  let instance: StretchyFooterInstance | null = null\n\n  onMount(() => {\n    mounted = true\n  })\n\n  // Remount only when the wiring changes; options stream in below.\n  $effect(() => {\n    const target = windowScroll ? window : (scrollEl ?? scroller)\n    if (!canvas || !target) return\n    const lifted = windowScroll || scrollEl ? contentSelector : content\n    const next = createStretchyFooter(\n      { canvas, scroller: target, content: lifted },\n      untrack(() => ({\n        maxStretch,\n        colors,\n        stiffness,\n        damping,\n        columns,\n        blur,\n        glow,\n        demoId,\n      }))\n    )\n    instance = next\n    return () => {\n      next?.destroy()\n      if (instance === next) instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  })\n\n  function portalToBody(node: HTMLElement) {\n    document.body.appendChild(node)\n    return {\n      destroy() {\n        node.remove()\n      },\n    }\n  }\n</script>\n\n{#snippet aurora()}\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n    style=\"height: {maxStretch}px;\"\n  >\n    <canvas bind:this={canvas} class=\"invisible absolute\"></canvas>\n  </div>\n{/snippet}\n\n{#if windowScroll}\n  {#if mounted}\n    <!-- Portal so `fixed` stays on the viewport — the lifted page is\n         transformed and would otherwise pin it to the content. -->\n    <div\n      use:portalToBody\n      data-slot=\"stretchy-footer\"\n      class={cn(\"pointer-events-none fixed inset-x-0 bottom-0 z-50\", className)}\n      style=\"height: {maxStretch}px;\"\n    >\n      {@render aurora()}\n    </div>\n  {/if}\n{:else if scrollEl}\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"pointer-events-none absolute inset-x-0 bottom-0\", className)}\n    style=\"height: {maxStretch}px;\"\n  >\n    {@render aurora()}\n  </div>\n{:else}\n  <!-- The aurora sits beside the scroller, not in it, so it stays on the\n       viewport floor instead of scrolling away with the content. -->\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"relative isolate overflow-hidden\", className)}\n  >\n    <div\n      bind:this={scroller}\n      role=\"region\"\n      aria-label={label}\n      class=\"h-full overflow-x-hidden overflow-y-auto\"\n    >\n      <div bind:this={content} class=\"relative z-10 min-h-full\">\n        {@render children?.()}\n      </div>\n    </div>\n    {@render aurora()}\n  </div>\n{/if}\n",
+      "content": "<script module lang=\"ts\">\n/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */\nexport const DEFAULT_COLORS = [\n  \"#FF1AE6\",\n  \"#FF2E5E\",\n  \"#FF8A1A\",\n  \"#FFC81F\",\n  \"#E2E6EC\",\n  \"#8DB6E6\",\n  \"#2F74DC\",\n  \"#1459E3\",\n  \"#1C2566\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 9\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 16\n/** White floor bloom opacity (0–1). Off by default. */\nexport const DEFAULT_GLOW = 0\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Edge columns stand this share of the centre one; the rest step evenly. */\nconst EDGE_COLUMN = 0.55\n/** The top of each column fades in over this share of its height. */\nconst TOP_FADE = 0.12\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /**\n   * Gradient stops from the top of each column down to the floor, any CSS\n   * colors. Every column carries the whole gradient, squeezed to its height.\n   */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns, stepping down from the middle. Default `9`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `16`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0`. */\n  glow?: number\n  /**\n   * Invert the pyramid: the edge columns stand tallest and the middle\n   * dips, so the wobble ripples in from the sides. Default `false`.\n   */\n  flip?: boolean\n  /**\n   * `180` turns the aurora upside down in place: the columns hang from the\n   * lifted page's edge and the gradient runs floor to top. Default `0`.\n   */\n  rotate?: 0 | 180\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/**\n * Stepped pyramid: the middle column is tallest, each step out is shorter.\n * Flipped, the edges are tallest and each step in is shorter.\n */\nexport function columnScale(\n  index: number,\n  count: number,\n  flip = false\n): number {\n  if (count <= 1) return 1\n  const t = Math.abs((index / (count - 1)) * 2 - 1)\n  return 1 - (1 - EDGE_COLUMN) * (flip ? 1 - t : t)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\nconst STRIP = 256\n\n/**\n * One column's gradient, `colors` spread from just under the top to the\n * floor, with the top fading in. Columns stretch it to their own height.\n */\nfunction makeStrip(colors: string[]) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = STRIP\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  const bands = g.createLinearGradient(0, 0, 0, STRIP)\n  colors.forEach((color, i) => {\n    const at = colors.length > 1 ? i / (colors.length - 1) : 1\n    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)\n  })\n  g.fillStyle = bands\n  g.fillRect(0, 0, 1, STRIP)\n  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, STRIP)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while a stepped pyramid of blurred gradient\n * columns stretches up from the floor (a valley with `flip`, hanging from\n * the page with `rotate: 180`); each column\n * has its own spring, so the edge wobbles as it snaps back. Idle unless\n * stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strip = document.createElement(\"canvas\")\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = columnScale(i, count, options.flip)\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrip = () => {\n    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n    // Rotated, spin the drawing 180° about the gap between the lifted page\n    // and the floor, so the columns hang from the page's edge.\n    const rotated = options.rotate === 180\n    if (rotated) {\n      ctx!.setTransform(-1, 0, 0, -1, canvas.width, 2 * floor - stretch * scale)\n    }\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      // The run-off under the floor would land on the page once rotated.\n      if (rotated) continue\n      ctx!.drawImage(\n        strip,\n        0,\n        STRIP - 1,\n        1,\n        1,\n        x0,\n        floor,\n        x1 - x0,\n        bottom - floor\n      )\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrip()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      const prevFlip = Boolean(options.flip)\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrip()\n      if (countOf() !== columns.length || Boolean(options.flip) !== prevFlip) {\n        rebuildColumns()\n      }\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount, untrack } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends StretchyFooterOptions {\n    class?: string\n    /**\n     * Page content inside the overflow scroller.\n     * Ignored when `scrollEl` / `windowScroll` paint overlay-only.\n     */\n    children?: import(\"svelte\").Snippet\n    /**\n     * External scroll container. When set, this component only paints the\n     * aurora overlay and binds overscroll to that element.\n     * When omitted (and `windowScroll` is false), this component *is* the scroller.\n     */\n    scrollEl?: HTMLElement\n    /**\n     * Bind overscroll to the window and paint a fixed bottom aurora.\n     * Use on full pages instead of a nested scroller.\n     */\n    windowScroll?: boolean\n    /**\n     * Element that lifts with the stretch (CSS selector).\n     * Used with `windowScroll` / `scrollEl`. Default `[data-stretchy-page]`.\n     */\n    contentSelector?: string\n    /** Accessible label for the scroll region. */\n    label?: string\n  }\n\n  let {\n    class: className = \"\",\n    children,\n    scrollEl,\n    windowScroll = false,\n    contentSelector = \"[data-stretchy-page]\",\n    maxStretch = DEFAULT_MAX_STRETCH,\n    colors = DEFAULT_COLORS,\n    stiffness = DEFAULT_STIFFNESS,\n    damping = DEFAULT_DAMPING,\n    columns = DEFAULT_COLUMNS,\n    blur = DEFAULT_BLUR,\n    glow = DEFAULT_GLOW,\n    flip = false,\n    rotate = 0,\n    label = \"Stretchy overflow\",\n    demoId,\n  }: Props = $props()\n\n  let mounted = $state(false)\n  let canvas: HTMLCanvasElement | undefined = $state()\n  let scroller: HTMLDivElement | undefined = $state()\n  let content: HTMLDivElement | undefined = $state()\n  let instance: StretchyFooterInstance | null = null\n\n  onMount(() => {\n    mounted = true\n  })\n\n  // Remount only when the wiring changes; options stream in below.\n  $effect(() => {\n    const target = windowScroll ? window : (scrollEl ?? scroller)\n    if (!canvas || !target) return\n    const lifted = windowScroll || scrollEl ? contentSelector : content\n    const next = createStretchyFooter(\n      { canvas, scroller: target, content: lifted },\n      untrack(() => ({\n        maxStretch,\n        colors,\n        stiffness,\n        damping,\n        columns,\n        blur,\n        glow,\n        flip,\n        rotate,\n        demoId,\n      }))\n    )\n    instance = next\n    return () => {\n      next?.destroy()\n      if (instance === next) instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      flip,\n      rotate,\n      demoId,\n    })\n  })\n\n  function portalToBody(node: HTMLElement) {\n    document.body.appendChild(node)\n    return {\n      destroy() {\n        node.remove()\n      },\n    }\n  }\n</script>\n\n{#snippet aurora()}\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n    style=\"height: {maxStretch}px;\"\n  >\n    <canvas bind:this={canvas} class=\"invisible absolute\"></canvas>\n  </div>\n{/snippet}\n\n{#if windowScroll}\n  {#if mounted}\n    <!-- Portal so `fixed` stays on the viewport — the lifted page is\n         transformed and would otherwise pin it to the content. -->\n    <div\n      use:portalToBody\n      data-slot=\"stretchy-footer\"\n      class={cn(\"pointer-events-none fixed inset-x-0 bottom-0 z-50\", className)}\n      style=\"height: {maxStretch}px;\"\n    >\n      {@render aurora()}\n    </div>\n  {/if}\n{:else if scrollEl}\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"pointer-events-none absolute inset-x-0 bottom-0\", className)}\n    style=\"height: {maxStretch}px;\"\n  >\n    {@render aurora()}\n  </div>\n{:else}\n  <!-- The aurora sits beside the scroller, not in it, so it stays on the\n       viewport floor instead of scrolling away with the content. -->\n  <div\n    data-slot=\"stretchy-footer\"\n    class={cn(\"relative isolate overflow-hidden\", className)}\n  >\n    <div\n      bind:this={scroller}\n      role=\"region\"\n      aria-label={label}\n      class=\"h-full overflow-x-hidden overflow-y-auto\"\n    >\n      <div bind:this={content} class=\"relative z-10 min-h-full\">\n        {@render children?.()}\n      </div>\n    </div>\n    {@render aurora()}\n  </div>\n{/if}\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/stretchy-footer.svelte"
     }
diff --git a/public/r/stretchy-footer.json b/public/r/stretchy-footer.json
index e42eeb7..ca45b46 100644
--- a/public/r/stretchy-footer.json
+++ b/public/r/stretchy-footer.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/stretchy-footer/stretchy-footer.tsx",
-      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { cn } from \"@/lib/utils\"\n\n/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */\nexport const DEFAULT_COLORS = [\n  \"#FF1AE6\",\n  \"#FF2E5E\",\n  \"#FF8A1A\",\n  \"#FFC81F\",\n  \"#E2E6EC\",\n  \"#8DB6E6\",\n  \"#2F74DC\",\n  \"#1459E3\",\n  \"#1C2566\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 9\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 16\n/** White floor bloom opacity (0–1). Off by default. */\nexport const DEFAULT_GLOW = 0\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Edge columns stand this share of the centre one; the rest step evenly. */\nconst EDGE_COLUMN = 0.55\n/** The top of each column fades in over this share of its height. */\nconst TOP_FADE = 0.12\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /**\n   * Gradient stops from the top of each column down to the floor, any CSS\n   * colors. Every column carries the whole gradient, squeezed to its height.\n   */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns, stepping down from the middle. Default `9`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `16`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0`. */\n  glow?: number\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/** Stepped pyramid: the middle column is tallest, each step out is shorter. */\nexport function columnScale(index: number, count: number): number {\n  if (count <= 1) return 1\n  const t = (index / (count - 1)) * 2 - 1\n  return 1 - (1 - EDGE_COLUMN) * Math.abs(t)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\nconst STRIP = 256\n\n/**\n * One column's gradient, `colors` spread from just under the top to the\n * floor, with the top fading in. Columns stretch it to their own height.\n */\nfunction makeStrip(colors: string[]) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = STRIP\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  const bands = g.createLinearGradient(0, 0, 0, STRIP)\n  colors.forEach((color, i) => {\n    const at = colors.length > 1 ? i / (colors.length - 1) : 1\n    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)\n  })\n  g.fillStyle = bands\n  g.fillRect(0, 0, 1, STRIP)\n  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, STRIP)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while a stepped pyramid of blurred gradient\n * columns stretches up from the floor; each column has its own spring, so the edge wobbles as it\n * snaps back. Idle unless stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))\n\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strip = document.createElement(\"canvas\")\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = columnScale(i, count)\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrip = () => {\n    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      ctx!.drawImage(\n        strip,\n        0,\n        STRIP - 1,\n        1,\n        1,\n        x0,\n        floor,\n        x1 - x0,\n        bottom - floor\n      )\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrip()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrip()\n      if (countOf() !== columns.length) rebuildColumns()\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\nexport type StretchyFooterProps = StretchyFooterOptions & {\n  className?: string\n  /**\n   * Page content inside the overflow scroller.\n   * Ignored when `scrollRef` / `windowScroll` paint overlay-only.\n   */\n  children?: ReactNode\n  /**\n   * External scroll container. When set, this component only paints the\n   * aurora overlay and binds overscroll to that element.\n   * When omitted (and `windowScroll` is false), this component *is* the scroller.\n   */\n  scrollRef?: RefObject<HTMLElement | null>\n  /**\n   * Bind overscroll to the window and paint a fixed bottom aurora.\n   * Use on full pages instead of a nested scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element that lifts with the stretch (CSS selector).\n   * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.\n   */\n  contentSelector?: string\n  /** Accessible label for the scroll region. */\n  label?: string\n}\n\nconst noopSubscribe = () => () => {}\n\n/**\n * Dia-style stretchy overflow — overscroll past the bottom and a rainbow\n * aurora stretches up from the floor while the page lifts with it, then\n * springs back with a wobble. Honors `prefers-reduced-motion`.\n */\nexport function StretchyFooter({\n  className,\n  children,\n  scrollRef,\n  windowScroll = false,\n  contentSelector = \"[data-stretchy-page]\",\n  maxStretch = DEFAULT_MAX_STRETCH,\n  colors = DEFAULT_COLORS,\n  stiffness = DEFAULT_STIFFNESS,\n  damping = DEFAULT_DAMPING,\n  columns = DEFAULT_COLUMNS,\n  blur = DEFAULT_BLUR,\n  glow = DEFAULT_GLOW,\n  label = \"Stretchy overflow\",\n  demoId,\n}: StretchyFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<StretchyFooterInstance | null>(null)\n  // The window aurora portals to <body>, which only exists on the client.\n  const onClient = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  )\n  const portalHost = windowScroll && onClient ? document.body : null\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const scroller = windowScroll\n      ? window\n      : (scrollRef?.current ?? scrollerRef.current)\n    if (!canvas || !scroller) return\n    const content =\n      windowScroll || scrollRef ? contentSelector : contentRef.current\n    instanceRef.current = createStretchyFooter(\n      { canvas, scroller, content },\n      { maxStretch, colors, stiffness, damping, columns, blur, glow, demoId }\n    )\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Options stream in through setOptions; only the wiring remounts.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, scrollRef, contentSelector, portalHost])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      demoId,\n    })\n  }, [maxStretch, colors, stiffness, damping, columns, blur, glow, demoId])\n\n  const aurora = (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n      style={{ height: maxStretch }}\n    >\n      <canvas ref={canvasRef} className=\"invisible absolute\" />\n    </div>\n  )\n\n  if (windowScroll) {\n    if (!portalHost) return null\n    // Portal so `fixed` stays on the viewport — the lifted page is\n    // transformed and would otherwise pin it to the content.\n    return createPortal(\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>,\n      portalHost\n    )\n  }\n\n  if (scrollRef) {\n    return (\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 bottom-0\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>\n    )\n  }\n\n  // The aurora sits beside the scroller, not in it, so it stays on the\n  // viewport floor instead of scrolling away with the content.\n  return (\n    <div\n      data-slot=\"stretchy-footer\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n    >\n      <div\n        ref={scrollerRef}\n        role=\"region\"\n        aria-label={label}\n        className=\"h-full overflow-x-hidden overflow-y-auto\"\n      >\n        <div ref={contentRef} className=\"relative z-10 min-h-full\">\n          {children}\n        </div>\n      </div>\n      {aurora}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { cn } from \"@/lib/utils\"\n\n/** Gradient stops, top to bottom: magenta through sunlight to deep navy. */\nexport const DEFAULT_COLORS = [\n  \"#FF1AE6\",\n  \"#FF2E5E\",\n  \"#FF8A1A\",\n  \"#FFC81F\",\n  \"#E2E6EC\",\n  \"#8DB6E6\",\n  \"#2F74DC\",\n  \"#1459E3\",\n  \"#1C2566\",\n]\n\nexport const DEFAULT_MAX_STRETCH = 280\nexport const DEFAULT_COLUMNS = 9\n/** Gaussian blur on the aurora, in px. */\nexport const DEFAULT_BLUR = 16\n/** White floor bloom opacity (0–1). Off by default. */\nexport const DEFAULT_GLOW = 0\nexport const DEFAULT_STIFFNESS = 380\nexport const DEFAULT_DAMPING = 32\n\n/** Docs / demos — dispatch to play the rubber stretch without faking wheel input. */\nexport const STRETCHY_FOOTER_PLAY = \"stretchy-footer:play\"\n\n/** Stretch per px of overscroll at rest; it falls off toward `maxStretch`. */\nconst RUBBER = 0.9\n/** Wheel silence that counts as letting go, in ms. */\nconst RELEASE_MS = 110\n/** After letting go, wheel events closer together than this are momentum. */\nconst MOMENTUM_GAP_MS = 180\n/** Consecutive shrinking wheel deltas that read as a trackpad coasting. */\nconst COAST_EVENTS = 6\nconst MASS = 0.35\nconst REST = 0.15\n/** Edge columns stand this share of the centre one; the rest step evenly. */\nconst EDGE_COLUMN = 0.55\n/** The top of each column fades in over this share of its height. */\nconst TOP_FADE = 0.12\n/** Field opacity ramps in over this share of `maxStretch`. */\nconst FADE_IN = 0.08\n/** Physics substep, in seconds. */\nconst STEP = 1 / 120\n\nexport type StretchyFooterOptions = {\n  /** Peak stretch in px. Default `280`. */\n  maxStretch?: number\n  /**\n   * Gradient stops from the top of each column down to the floor, any CSS\n   * colors. Every column carries the whole gradient, squeezed to its height.\n   */\n  colors?: string[]\n  /** Spring stiffness. Default `380`. */\n  stiffness?: number\n  /** Spring damping. Default `32`. */\n  damping?: number\n  /** How many aurora columns, stepping down from the middle. Default `9`. */\n  columns?: number\n  /** Gaussian blur on the aurora, in px. Default `16`. */\n  blur?: number\n  /** White floor bloom opacity (0–1). Default `0`. */\n  glow?: number\n  /**\n   * Invert the pyramid: the edge columns stand tallest and the middle\n   * dips, so the wobble ripples in from the sides. Default `false`.\n   */\n  flip?: boolean\n  /**\n   * `180` turns the aurora upside down in place: the columns hang from the\n   * lifted page's edge and the gradient runs floor to top. Default `0`.\n   */\n  rotate?: 0 | 180\n  /**\n   * Optional id for docs demos. `playStretchyFooterDemo({ target })` only\n   * plays footers whose `demoId` matches.\n   */\n  demoId?: string\n}\n\nexport type StretchyFooterMount = {\n  /** Canvas the aurora paints into. Its parent sets the width. */\n  canvas: HTMLCanvasElement\n  /** Where overscroll is read: a scroll container, or `window`. */\n  scroller: HTMLElement | Window\n  /** Lifts with the stretch: an element, or a selector looked up when needed. */\n  content?: HTMLElement | string | null\n}\n\nexport type StretchyFooterPlayDetail = {\n  /** Peak pull as a fraction of `maxStretch`. Default `0.82`. */\n  amount?: number\n  /** How long to hold the stretch before snapping back, in ms. Default `700`. */\n  holdMs?: number\n  /** Only footers with this `demoId` respond. */\n  target?: string\n  /** Scroll this element (or the window) to the end before playing. */\n  scrollRoot?: HTMLElement | null\n}\n\nexport type StretchyFooterInstance = {\n  setOptions: (options: Partial<StretchyFooterOptions>) => void\n  /** Stretch and snap back, even under `prefers-reduced-motion`. */\n  play: (detail?: Pick<StretchyFooterPlayDetail, \"amount\" | \"holdMs\">) => void\n  destroy: () => void\n}\n\nexport async function scrollToEnd(root?: HTMLElement | null) {\n  const el = root ?? document.documentElement\n  const max = () => Math.max(0, el.scrollHeight - el.clientHeight)\n  const top = () => (root ? root.scrollTop : window.scrollY)\n  const scroll = (behavior: ScrollBehavior) =>\n    (root ?? window).scrollTo({ top: max(), behavior })\n  scroll(\"smooth\")\n  const started = performance.now()\n  while (performance.now() - started < 2000 && top() < max() - 2) {\n    await new Promise<void>((r) => window.setTimeout(r, 32))\n  }\n  scroll(\"instant\")\n}\n\n/** Scroll to the end, then play the stretch on matching footers. */\nexport async function playStretchyFooterDemo(\n  detail: StretchyFooterPlayDetail = {}\n) {\n  if (typeof window === \"undefined\") return\n  await scrollToEnd(detail.scrollRoot)\n  window.dispatchEvent(\n    new CustomEvent<StretchyFooterPlayDetail>(STRETCHY_FOOTER_PLAY, { detail })\n  )\n  // Travel out, hold, spring home.\n  await new Promise<void>((r) =>\n    window.setTimeout(r, (detail.holdMs ?? 700) + 900)\n  )\n}\n\n/**\n * Stepped pyramid: the middle column is tallest, each step out is shorter.\n * Flipped, the edges are tallest and each step in is shorter.\n */\nexport function columnScale(\n  index: number,\n  count: number,\n  flip = false\n): number {\n  if (count <= 1) return 1\n  const t = Math.abs((index / (count - 1)) * 2 - 1)\n  return 1 - (1 - EDGE_COLUMN) * (flip ? 1 - t : t)\n}\n\n/** Overscroll distance → stretch. Linear at first, never past `max`. */\nexport function rubberBand(distance: number, max: number): number {\n  if (max <= 0 || distance <= 0) return 0\n  return max * (1 - 1 / ((distance * RUBBER) / max + 1))\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Wheel delta in px, whatever unit the device reports in. */\nfunction wheelPixels(event: WheelEvent) {\n  if (event.deltaMode === 1) return event.deltaY * 16\n  if (event.deltaMode === 2) return event.deltaY * window.innerHeight\n  return event.deltaY\n}\n\n/**\n * True when something between `target` and the scroller can still scroll\n * in that direction — a code block or a menu gets the wheel, not us.\n */\nfunction nestedCanScroll(\n  target: EventTarget | null,\n  root: Element,\n  dy: number\n) {\n  let el = target instanceof Element ? target : null\n  while (el && el !== root && el !== document.documentElement) {\n    if (el.scrollHeight > el.clientHeight + 1) {\n      const overflow = getComputedStyle(el).overflowY\n      if (overflow === \"auto\" || overflow === \"scroll\") {\n        const room =\n          dy > 0\n            ? el.scrollHeight - el.clientHeight - el.scrollTop\n            : el.scrollTop\n        if (room > 1) return true\n      }\n    }\n    el = el.parentElement\n  }\n  return false\n}\n\nconst STRIP = 256\n\n/**\n * One column's gradient, `colors` spread from just under the top to the\n * floor, with the top fading in. Columns stretch it to their own height.\n */\nfunction makeStrip(colors: string[]) {\n  const strip = document.createElement(\"canvas\")\n  strip.width = 1\n  strip.height = STRIP\n  const g = strip.getContext(\"2d\")\n  if (!g) return strip\n  const bands = g.createLinearGradient(0, 0, 0, STRIP)\n  colors.forEach((color, i) => {\n    const at = colors.length > 1 ? i / (colors.length - 1) : 1\n    bands.addColorStop(TOP_FADE * 0.8 + (1 - TOP_FADE * 0.8) * at, color)\n  })\n  g.fillStyle = bands\n  g.fillRect(0, 0, 1, STRIP)\n  const fade = g.createLinearGradient(0, 0, 0, STRIP * TOP_FADE)\n  fade.addColorStop(0, \"rgba(0,0,0,0)\")\n  fade.addColorStop(1, \"rgba(0,0,0,1)\")\n  g.globalCompositeOperation = \"destination-in\"\n  g.fillStyle = fade\n  g.fillRect(0, 0, 1, STRIP)\n  return strip\n}\n\n/** Half a white radial glow, flat side down, for the floor bloom. */\nfunction makeBloom() {\n  const bloom = document.createElement(\"canvas\")\n  bloom.width = 128\n  bloom.height = 64\n  const g = bloom.getContext(\"2d\")\n  if (!g) return bloom\n  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64)\n  grad.addColorStop(0, \"rgba(255,255,255,1)\")\n  grad.addColorStop(1, \"rgba(255,255,255,0)\")\n  g.fillStyle = grad\n  g.fillRect(0, 0, 128, 64)\n  return bloom\n}\n\ntype Spring = { x: number; v: number; target: number }\n\nfunction stepSpring(s: Spring, k: number, c: number, dt: number) {\n  const accel = (-k * (s.x - s.target) - c * s.v) / MASS\n  s.v += accel * dt\n  s.x += s.v * dt\n}\n\nconst atRest = (s: Spring) =>\n  Math.abs(s.x - s.target) < REST && Math.abs(s.v) < REST\n\n/**\n * Dia-style rubber overscroll. Pull past the bottom of `scroller` and the\n * content lifts on a spring while a stepped pyramid of blurred gradient\n * columns stretches up from the floor (a valley with `flip`, hanging from\n * the page with `rotate: 180`); each column\n * has its own spring, so the edge wobbles as it snaps back. Idle unless\n * stretched.\n */\nexport function createStretchyFooter(\n  mount: StretchyFooterMount,\n  initial: StretchyFooterOptions = {}\n): StretchyFooterInstance | null {\n  const { canvas, scroller } = mount\n  const ctx = canvas.getContext(\"2d\")\n  if (!ctx) return null\n\n  let options: StretchyFooterOptions = { ...initial }\n  const maxOf = () => numberOr(options.maxStretch, DEFAULT_MAX_STRETCH, 0, 4000)\n  const blurOf = () => numberOr(options.blur, DEFAULT_BLUR, 0, 64)\n  const glowOf = () => numberOr(options.glow, DEFAULT_GLOW, 0, 1)\n  const stiffnessOf = () =>\n    numberOr(options.stiffness, DEFAULT_STIFFNESS, 10, 4000)\n  const dampingOf = () => numberOr(options.damping, DEFAULT_DAMPING, 0, 400)\n  const countOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 3, 96))\n  /** Overscroll the user has put in, in px. The stretch is its rubber band. */\n  let distance = 0\n  /** `play()` holds the stretch here, overriding the gesture. */\n  let forced: number | null = null\n  const lift: Spring = { x: 0, v: 0, target: 0 }\n  let columns: (Spring & { share: number })[] = []\n  let strip = document.createElement(\"canvas\")\n  const bloom = makeBloom()\n\n  const rebuildColumns = () => {\n    const count = countOf()\n    const target = lift.target\n    columns = Array.from({ length: count }, (_, i) => {\n      const share = columnScale(i, count, options.flip)\n      return { x: lift.x * share, v: 0, target: target * share, share }\n    })\n  }\n  const rebuildStrip = () => {\n    strip = makeStrip(options.colors?.length ? options.colors : DEFAULT_COLORS)\n  }\n\n  const size = { w: 0, pad: 0, scale: 1 }\n  const layout = () => {\n    const parent = canvas.parentElement\n    const blur = blurOf()\n    const max = maxOf()\n    // Room past the edges, so the blur doesn't fade the sides and floor.\n    const pad = Math.ceil(blur * 2)\n    // Blurred anyway — half resolution is plenty and half the fill.\n    const scale = blur >= 6 ? 0.5 : Math.min(window.devicePixelRatio || 1, 2)\n    size.w = (parent?.clientWidth ?? 0) + pad * 2\n    size.pad = pad\n    size.scale = scale\n    canvas.width = Math.max(1, Math.ceil(size.w * scale))\n    canvas.height = Math.max(1, Math.ceil((max + pad) * scale))\n    Object.assign(canvas.style, {\n      position: \"absolute\",\n      left: `${-pad}px`,\n      bottom: `${-pad}px`,\n      width: `${size.w}px`,\n      height: `${max + pad}px`,\n      filter: blur > 0 ? `blur(${blur}px)` : \"\",\n      pointerEvents: \"none\",\n    })\n    draw()\n  }\n\n  // The page element that rides the stretch.\n  let lifted: HTMLElement | null = null\n  let liftedTransform = \"\"\n  const contentEl = () => {\n    const content = mount.content\n    if (!content) return null\n    if (typeof content !== \"string\") return content\n    if (lifted?.isConnected && lifted.matches(content)) return lifted\n    const scope = scroller instanceof HTMLElement ? scroller : document\n    return (\n      scope.querySelector<HTMLElement>(content) ??\n      document.querySelector<HTMLElement>(content)\n    )\n  }\n  const liftContent = (y: number) => {\n    const el = contentEl()\n    if (el !== lifted) {\n      if (lifted) lifted.style.transform = liftedTransform\n      lifted = el\n      liftedTransform = el?.style.transform ?? \"\"\n    }\n    if (!lifted) return\n    if (y > 0.2) {\n      lifted.style.transform = `translate3d(0, ${-y}px, 0)`\n      lifted.style.willChange = \"transform\"\n    } else {\n      lifted.style.transform = liftedTransform\n      lifted.style.willChange = \"\"\n    }\n  }\n\n  function draw() {\n    const stretch = Math.max(0, lift.x)\n    liftContent(stretch)\n    const max = maxOf()\n    const visible = stretch > 0.2 || columns.some((column) => column.x > 0.2)\n    canvas.style.visibility = visible ? \"visible\" : \"hidden\"\n    if (!visible) return\n\n    const { w, pad, scale } = size\n    const floor = max * scale\n    const bottom = canvas.height\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n    ctx!.clearRect(0, 0, canvas.width, canvas.height)\n    ctx!.globalAlpha = clamp(stretch / Math.max(1, max * FADE_IN), 0, 1)\n    // Rotated, spin the drawing 180° about the gap between the lifted page\n    // and the floor, so the columns hang from the page's edge.\n    const rotated = options.rotate === 180\n    if (rotated) {\n      ctx!.setTransform(-1, 0, 0, -1, canvas.width, 2 * floor - stretch * scale)\n    }\n\n    // Columns span the visible width; the outer two run on into the pad.\n    const count = columns.length\n    const inner = (w - pad * 2) * scale\n    const edge = (i: number) =>\n      i <= 0\n        ? 0\n        : i >= count\n          ? canvas.width\n          : Math.round(pad * scale + (inner * i) / count)\n    for (let i = 0; i < count; i++) {\n      const h = Math.max(0, columns[i]!.x) * scale\n      if (h < 0.5) continue\n      const x0 = edge(i)\n      const x1 = edge(i + 1)\n      ctx!.drawImage(strip, x0, floor - h, x1 - x0, h)\n      // The run-off under the floor would land on the page once rotated.\n      if (rotated) continue\n      ctx!.drawImage(\n        strip,\n        0,\n        STRIP - 1,\n        1,\n        1,\n        x0,\n        floor,\n        x1 - x0,\n        bottom - floor\n      )\n    }\n\n    const glow = glowOf()\n    if (glow > 0) {\n      const rx = inner * 0.49\n      const ry = stretch * 0.35 * scale\n      ctx!.globalAlpha *= glow\n      ctx!.drawImage(bloom, w * scale * 0.5 - rx, floor - ry, rx * 2, ry)\n    }\n    ctx!.globalAlpha = 1\n    ctx!.setTransform(1, 0, 0, 1, 0, 0)\n  }\n\n  let raf = 0\n  let last = 0\n  const retarget = () => {\n    const max = maxOf()\n    const target = forced ?? rubberBand(distance, max)\n    lift.target = target\n    for (const column of columns) column.target = target * column.share\n    if (!raf) {\n      last = performance.now()\n      raf = requestAnimationFrame(frame)\n    }\n  }\n\n  function frame(now: number) {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    const k = stiffnessOf()\n    const c = dampingOf()\n    const steps = Math.max(1, Math.ceil(dt / STEP))\n    for (let n = 0; n < steps; n++) {\n      stepSpring(lift, k, c, dt / steps)\n      for (const column of columns) {\n        // Short edge columns are softer and bouncier than the middle, so the\n        // top edge ripples out from the centre.\n        const ck = k * (0.6 + 0.4 * column.share)\n        stepSpring(column, ck, c * 0.5 * Math.sqrt(ck / k), dt / steps)\n      }\n    }\n    const settled = atRest(lift) && columns.every(atRest)\n    if (settled) {\n      lift.x = lift.target\n      lift.v = 0\n      for (const column of columns) {\n        column.x = column.target\n        column.v = 0\n      }\n    }\n    draw()\n    if (!settled) raf = requestAnimationFrame(frame)\n  }\n\n  // Gestures.\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  let reduce = mqReduce.matches\n  let releaseTimer = 0\n  let holdTimer = 0\n  let lastWheel = 0\n  let lastDelta = 0\n  let coasting = 0\n  let cooling = false\n  let lastTouchY = 0\n\n  const root =\n    scroller instanceof HTMLElement ? scroller : document.documentElement\n  const atBottom = () =>\n    root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n\n  const release = () => {\n    window.clearTimeout(releaseTimer)\n    releaseTimer = 0\n    if (distance <= 0) return\n    distance = 0\n    cooling = true\n    retarget()\n  }\n  const stopPlay = () => {\n    if (forced === null) return\n    window.clearTimeout(holdTimer)\n    forced = null\n    retarget()\n  }\n\n  const onWheel = (event: WheelEvent) => {\n    if (reduce || event.ctrlKey) return\n    const dy = wheelPixels(event)\n    if (dy === 0 || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return\n    stopPlay()\n    const now = performance.now()\n    const gap = now - lastWheel\n    lastWheel = now\n\n    if (distance > 0) {\n      event.preventDefault()\n      // A trackpad coasting out: deltas shrink every event. Treat it as\n      // letting go instead of holding the stretch until momentum ends.\n      coasting = dy > 0 && Math.abs(dy) < Math.abs(lastDelta) ? coasting + 1 : 0\n      lastDelta = dy\n      if (coasting >= COAST_EVENTS) {\n        release()\n        return\n      }\n      distance = Math.max(0, distance + dy)\n      retarget()\n      window.clearTimeout(releaseTimer)\n      if (distance > 0) releaseTimer = window.setTimeout(release, RELEASE_MS)\n      return\n    }\n\n    // Momentum still arriving after a release shouldn't pull again.\n    if (cooling) {\n      if (gap < MOMENTUM_GAP_MS) return\n      cooling = false\n    }\n    if (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy)) {\n      event.preventDefault()\n      distance = dy\n      lastDelta = dy\n      coasting = 0\n      retarget()\n      releaseTimer = window.setTimeout(release, RELEASE_MS)\n    }\n  }\n\n  const onTouchStart = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch) return\n    stopPlay()\n    cooling = false\n    lastTouchY = touch.clientY\n  }\n  const onTouchMove = (event: TouchEvent) => {\n    const touch = event.touches[0]\n    if (!touch || reduce) return\n    const dy = lastTouchY - touch.clientY\n    lastTouchY = touch.clientY\n    if (\n      distance > 0 ||\n      (dy > 0 && atBottom() && !nestedCanScroll(event.target, root, dy))\n    ) {\n      if (event.cancelable) event.preventDefault()\n      distance = Math.max(0, distance + dy)\n      retarget()\n    }\n  }\n  const onTouchEnd = () => release()\n\n  const onPlayEvent = (event: Event) => {\n    const detail = (event as CustomEvent<StretchyFooterPlayDetail>).detail ?? {}\n    // Scoped footers only answer their own demo; unscoped ones, broadcasts.\n    if ((detail.target ?? null) !== (options.demoId ?? null)) return\n    instance.play(detail)\n  }\n\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    if (reduce) release()\n  }\n\n  const target: HTMLElement | Window = scroller\n  const prevOverscroll = root.style.overscrollBehaviorY\n  // The browser's own rubber band would fight ours.\n  root.style.overscrollBehaviorY = \"none\"\n  target.addEventListener(\"wheel\", onWheel as EventListener, { passive: false })\n  target.addEventListener(\"touchstart\", onTouchStart as EventListener, {\n    passive: true,\n  })\n  target.addEventListener(\"touchmove\", onTouchMove as EventListener, {\n    passive: false,\n  })\n  target.addEventListener(\"touchend\", onTouchEnd)\n  target.addEventListener(\"touchcancel\", onTouchEnd)\n  window.addEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n  mqReduce.addEventListener(\"change\", onReduce)\n  const ro = new ResizeObserver(layout)\n  if (canvas.parentElement) ro.observe(canvas.parentElement)\n\n  rebuildStrip()\n  rebuildColumns()\n  layout()\n\n  const instance: StretchyFooterInstance = {\n    setOptions(next) {\n      const prevColors = options.colors\n      const prevMax = maxOf()\n      const prevBlur = blurOf()\n      const prevFlip = Boolean(options.flip)\n      options = { ...options, ...next }\n      if (options.colors !== prevColors) rebuildStrip()\n      if (countOf() !== columns.length || Boolean(options.flip) !== prevFlip) {\n        rebuildColumns()\n      }\n      if (maxOf() !== prevMax || blurOf() !== prevBlur) layout()\n      if (forced !== null) forced = Math.min(forced, maxOf())\n      retarget()\n    },\n    play({ amount = 0.82, holdMs = 700 } = {}) {\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      distance = 0\n      forced = maxOf() * clamp(amount, 0, 1)\n      retarget()\n      holdTimer = window.setTimeout(stopPlay, holdMs)\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n      window.clearTimeout(releaseTimer)\n      window.clearTimeout(holdTimer)\n      root.style.overscrollBehaviorY = prevOverscroll\n      target.removeEventListener(\"wheel\", onWheel as EventListener)\n      target.removeEventListener(\"touchstart\", onTouchStart as EventListener)\n      target.removeEventListener(\"touchmove\", onTouchMove as EventListener)\n      target.removeEventListener(\"touchend\", onTouchEnd)\n      target.removeEventListener(\"touchcancel\", onTouchEnd)\n      window.removeEventListener(STRETCHY_FOOTER_PLAY, onPlayEvent)\n      mqReduce.removeEventListener(\"change\", onReduce)\n      ro.disconnect()\n      if (lifted) {\n        lifted.style.transform = liftedTransform\n        lifted.style.willChange = \"\"\n      }\n    },\n  }\n  return instance\n}\n\nexport type StretchyFooterProps = StretchyFooterOptions & {\n  className?: string\n  /**\n   * Page content inside the overflow scroller.\n   * Ignored when `scrollRef` / `windowScroll` paint overlay-only.\n   */\n  children?: ReactNode\n  /**\n   * External scroll container. When set, this component only paints the\n   * aurora overlay and binds overscroll to that element.\n   * When omitted (and `windowScroll` is false), this component *is* the scroller.\n   */\n  scrollRef?: RefObject<HTMLElement | null>\n  /**\n   * Bind overscroll to the window and paint a fixed bottom aurora.\n   * Use on full pages instead of a nested scroller.\n   */\n  windowScroll?: boolean\n  /**\n   * Element that lifts with the stretch (CSS selector).\n   * Used with `windowScroll` / `scrollRef`. Default `[data-stretchy-page]`.\n   */\n  contentSelector?: string\n  /** Accessible label for the scroll region. */\n  label?: string\n}\n\nconst noopSubscribe = () => () => {}\n\n/**\n * Dia-style stretchy overflow — overscroll past the bottom and a rainbow\n * aurora stretches up from the floor while the page lifts with it, then\n * springs back with a wobble. Honors `prefers-reduced-motion`.\n */\nexport function StretchyFooter({\n  className,\n  children,\n  scrollRef,\n  windowScroll = false,\n  contentSelector = \"[data-stretchy-page]\",\n  maxStretch = DEFAULT_MAX_STRETCH,\n  colors = DEFAULT_COLORS,\n  stiffness = DEFAULT_STIFFNESS,\n  damping = DEFAULT_DAMPING,\n  columns = DEFAULT_COLUMNS,\n  blur = DEFAULT_BLUR,\n  glow = DEFAULT_GLOW,\n  flip = false,\n  rotate = 0,\n  label = \"Stretchy overflow\",\n  demoId,\n}: StretchyFooterProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const scrollerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<StretchyFooterInstance | null>(null)\n  // The window aurora portals to <body>, which only exists on the client.\n  const onClient = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  )\n  const portalHost = windowScroll && onClient ? document.body : null\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const scroller = windowScroll\n      ? window\n      : (scrollRef?.current ?? scrollerRef.current)\n    if (!canvas || !scroller) return\n    const content =\n      windowScroll || scrollRef ? contentSelector : contentRef.current\n    instanceRef.current = createStretchyFooter(\n      { canvas, scroller, content },\n      {\n        maxStretch,\n        colors,\n        stiffness,\n        damping,\n        columns,\n        blur,\n        glow,\n        flip,\n        rotate,\n        demoId,\n      }\n    )\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Options stream in through setOptions; only the wiring remounts.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [windowScroll, scrollRef, contentSelector, portalHost])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      maxStretch,\n      colors,\n      stiffness,\n      damping,\n      columns,\n      blur,\n      glow,\n      flip,\n      rotate,\n      demoId,\n    })\n  }, [\n    maxStretch,\n    colors,\n    stiffness,\n    damping,\n    columns,\n    blur,\n    glow,\n    flip,\n    rotate,\n    demoId,\n  ])\n\n  const aurora = (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-hidden\"\n      style={{ height: maxStretch }}\n    >\n      <canvas ref={canvasRef} className=\"invisible absolute\" />\n    </div>\n  )\n\n  if (windowScroll) {\n    if (!portalHost) return null\n    // Portal so `fixed` stays on the viewport — the lifted page is\n    // transformed and would otherwise pin it to the content.\n    return createPortal(\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none fixed inset-x-0 bottom-0 z-50\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>,\n      portalHost\n    )\n  }\n\n  if (scrollRef) {\n    return (\n      <div\n        data-slot=\"stretchy-footer\"\n        className={cn(\n          \"pointer-events-none absolute inset-x-0 bottom-0\",\n          className\n        )}\n        style={{ height: maxStretch }}\n      >\n        {aurora}\n      </div>\n    )\n  }\n\n  // The aurora sits beside the scroller, not in it, so it stays on the\n  // viewport floor instead of scrolling away with the content.\n  return (\n    <div\n      data-slot=\"stretchy-footer\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n    >\n      <div\n        ref={scrollerRef}\n        role=\"region\"\n        aria-label={label}\n        className=\"h-full overflow-x-hidden overflow-y-auto\"\n      >\n        <div ref={contentRef} className=\"relative z-10 min-h-full\">\n          {children}\n        </div>\n      </div>\n      {aurora}\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/stretchy-footer.tsx"
     }

From 57105f5416676f1149c9974c0731afb08a1f76c6 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Thu, 1 Oct 2026 14:16:26 +0530
Subject: [PATCH 44/49] Add Typewriter.

Text is typed onto the page by a typeball riding a rail that spans the
frame. For every letter the ball spins and tilts that glyph to the
front, strikes, and steps one cell right; at the margin it whirls home
along the rail and drops a line, and the paper feeds up when the page
fills. With loop on, the finished sheet is pulled out and typed again.

Ink, rail and ball all use currentColor, the text sits in the mono font
at the inherited size, and words wrap to the frame or to `columns`.
Optional humanized rhythm, per-letter jitter, scale ticks and
synthesized key, bell and return sounds. Screen readers get the whole
text, reduced motion prints the page at once, and typing pauses
off-screen. Ships for React and Svelte with a docs page, demo, OG card
and skill entry.
---
 .cursor/skills/23rd/SKILL.md                  |    9 +-
 .cursor/skills/23rd/apis.md                   |   23 +
 .cursor/skills/23rd/components.md             |   26 +
 .cursor/skills/23rd/recipes.md                |   15 +
 README.md                                     |    1 +
 content/docs/components/meta.json             |    3 +-
 content/docs/components/typewriter.mdx        |   92 ++
 content/docs/getting-started.mdx              |    4 +-
 .../og/docs/components/typewriter/image.png   |  Bin 0 -> 45430 bytes
 public/r/registry.json                        |   26 +
 public/r/typewriter-svelte.json               |   15 +
 public/r/typewriter.json                      |   15 +
 registry.json                                 |    3 +-
 registry/typewriter/registry.json             |   31 +
 registry/typewriter/typewriter-demo.tsx       |  150 +++
 registry/typewriter/typewriter-vanilla.ts     | 1191 +++++++++++++++++
 registry/typewriter/typewriter.svelte         |   88 ++
 registry/typewriter/typewriter.tsx            |  124 ++
 skills/23rd/SKILL.md                          |    9 +-
 skills/23rd/apis.md                           |   23 +
 skills/23rd/components.md                     |   26 +
 skills/23rd/recipes.md                        |   15 +
 22 files changed, 1881 insertions(+), 8 deletions(-)
 create mode 100644 content/docs/components/typewriter.mdx
 create mode 100644 public/og/docs/components/typewriter/image.png
 create mode 100644 public/r/typewriter-svelte.json
 create mode 100644 public/r/typewriter.json
 create mode 100644 registry/typewriter/registry.json
 create mode 100644 registry/typewriter/typewriter-demo.tsx
 create mode 100644 registry/typewriter/typewriter-vanilla.ts
 create mode 100644 registry/typewriter/typewriter.svelte
 create mode 100644 registry/typewriter/typewriter.tsx

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index bf6563c..94737ec 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -3,8 +3,8 @@ name: 23rd
 description: >
   Install, choose, and compose 23rd shadcn/ui registry components for React and
   Svelte 5. Use when the user wants a UI component, background, shader, WebGL
-  wash, hero atmosphere, footer, 404, color picker, ASCII effect, starfield,
-  orb, or page-tilt from the 23rd registry (@23rd, 23rd.dev, radiumcoders/23rd.dev),
+  wash, hero atmosphere, footer, 404, color picker, typewriter text, ASCII effect,
+  starfield, orb, or page-tilt from the 23rd registry (@23rd, 23rd.dev, radiumcoders/23rd.dev),
   or when adding a new component to this registry. Covers install commands,
   import paths, props, theming, and when not to use each item.
 metadata:
@@ -91,6 +91,7 @@ flowchart TD
   pick -->|Full page 404| d404[dithered-404]
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
+  pick -->|Type text out letter by letter| tw[typewriter]
   atmo -->|Quiet wash| sg[shader-gradient]
   atmo -->|Cel-shaded fire from the bottom| saf[shader-anime-fire]
   atmo -->|Soft fire wash from the bottom| sf[shader-fire]
@@ -120,6 +121,7 @@ Disambiguation that agents get wrong:
 | ASCII letters that shove, scatter, and fall | `ascii-logo` | `ascii-fluid` (trails, not a wordmark) |
 | CRT notation, phosphor, staves | `phosphor-score` | `shader-sky` |
 | A face / orb / mascot | `live-orb` | `logo-burst` |
+| Typing effect, typewriter, text that types itself | `typewriter` | `ascii-logo` (a wordmark, not prose) |
 
 There is one variant enum in the whole registry: `LiveOrb` `variant` is `"white" | "black" | "webgl" | "custom"`. Nothing else has `variant`.
 
@@ -140,6 +142,8 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
+`Typewriter` fills its parent like a background but is content: it types `text` in the mono font, inherits the font size, and inks in `currentColor`. Give the parent a height; the paper feeds up when the page fills.
+
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
 `LiveOrb` is a fixed square (`size`, default `280`). It does not fill the viewport. The body stays put; only the eyes move.
@@ -182,6 +186,7 @@ Categories match `content/docs/components/meta.json`.
 | `dithered-404` | Pages | Bayer 404 burned by a fireball cursor, then reforms | React + Svelte |
 | `folio` | Sections | Page leans on scroll, then springs flat | React + Svelte |
 | `gooey-color-picker` | Components | Swatch opens into hue, alpha, and hex under an SVG goo filter | React + Svelte |
+| `typewriter` | Components | A typeball on a rail types text letter by letter, returns at the margin | React + Svelte |
 
 ## Minimal installs that must be right
 
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index ecb1489..0ae5470 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -362,6 +362,29 @@ type FolioPlayDetail = {
 
 React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`. The Svelte component listens for that window event. Reduced motion: no tilt, no blur.
 
+## typewriter
+
+```ts
+type TypewriterProps = {
+  text?: string // DEFAULT_TEXT; "\n" breaks a line
+  speed?: number // 14 characters per second, clamped 1–120
+  humanize?: boolean // true
+  loop?: boolean // true
+  hold?: number // 2600 ms on the finished page before looping
+  startDelay?: number // 600 ms before the first keystroke
+  columns?: number // 0 = fit the frame; never wider than the frame
+  ticks?: boolean // true
+  jitter?: number // 0.3, 0–1
+  sound?: boolean // false
+  onDone?: () => void // each time the last character lands
+  className?: string
+}
+```
+
+Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again.
+
 ## Events that are not props
 
 | Name | Constant | Who listens |
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index efd8c7a..e579b00 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -385,3 +385,29 @@ Controlled when `value` is not `undefined`. Otherwise uncontrolled, seeded from
 `GooeyColor` is `{ h: 0–360, s: 0–100, l: 0–100, a: 0–1 }`. Strings accept hex (`#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`) and `hsl` / `hsla`. `onChange` second arg is `hsla(...)` from `toCss`. EyeDropper appears only when `window.EyeDropper` exists; it is not a prop.
 
 Pitfalls: the panel overflows the trigger. Do not put it in `overflow-hidden`. React also exports `parseColor`. No `className` on Svelte — use `class`.
+
+## typewriter
+
+Component. Text typed onto the page by a typeball that rides a full-width rail. For each letter the ball spins that glyph to the front, strikes, and steps one cell right; at the margin it whirls home and drops a line. The paper feeds up when the page fills. With `loop`, the finished sheet is pulled out and typed again.
+
+Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke at a time.
+
+Not this: a wordmark (`ascii-logo`), a blinking input caret, or a background behind other copy.
+
+Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (14 chars/s), `humanize` (true), `jitter` (0.3), `columns` (0 = fit), `ticks` (true), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+
+```tsx
+"use client"
+import { Typewriter } from "@/components/ui/typewriter"
+
+export function Letter() {
+  return (
+    <div className="h-80 w-full overflow-hidden rounded-xl border">
+      <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
+    </div>
+  )
+}
+```
+
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words. The font is the project's `font-mono` at the inherited size; set a size with `className="text-lg"`. Ink, rail, and carriage use `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index 463b4c9..5fe706e 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -221,6 +221,21 @@ export function Brand() {
 
 `text` longer than 5 characters is truncated.
 
+Letter that types itself:
+
+```tsx
+"use client"
+import { Typewriter } from "@/components/ui/typewriter"
+
+export function Note() {
+  return (
+    <div className="h-72 overflow-hidden rounded-xl border text-lg">
+      <Typewriter text={"Dear reader,\nwe shipped it."} loop={false} />
+    </div>
+  )
+}
+```
+
 ## Anti-patterns
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.
diff --git a/README.md b/README.md
index e07b3ac..356c056 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
+| [Typewriter](https://23rd.dev/docs/components/typewriter)                 | `@23rd/typewriter`         | A typeball on a rail spins each letter to the front, strikes, and drops a line at the margin |
 
 ```tsx
 import { GooeyColorPicker } from "@/components/ui/gooey-color-picker"
diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json
index 82cda89..83700f7 100644
--- a/content/docs/components/meta.json
+++ b/content/docs/components/meta.json
@@ -21,6 +21,7 @@
     "---Sections---",
     "folio",
     "---Components---",
-    "gooey-color-picker"
+    "gooey-color-picker",
+    "typewriter"
   ]
 }
diff --git a/content/docs/components/typewriter.mdx b/content/docs/components/typewriter.mdx
new file mode 100644
index 0000000..ab30085
--- /dev/null
+++ b/content/docs/components/typewriter.mdx
@@ -0,0 +1,92 @@
+---
+title: Typewriter
+description: Text typed onto the page by a typeball on a rail — it spins each letter to the front and strikes, steps right, and at the margin whirls home and drops a line.
+---
+
+import { TypewriterDemo } from "@/registry/typewriter/typewriter-demo"
+
+A typewriter, not a blinking caret. A rail spans the frame with a scale of ticks and two margin stops, and a typeball rides it — a sphere wearing the keyboard in three rows, clamped to the rail. For every keystroke the ball spins and tilts until that letter faces the paper, strikes, and steps one cell right. At the end of a line it whirls home along the rail and drops to the next; when the page is full the paper feeds up. Between pages the ball turns slowly on its own. With `loop` on, the finished sheet is pulled out and typed again. Everything is ink in `currentColor`, so it follows the theme.
+
+## Preview
+
+<TypewriterDemo />
+
+## Installation
+
+<CliCommand item="typewriter" />
+
+Or install straight from the public GitHub source registry:
+
+<CliCommand item="typewriter" github />
+
+## Usage
+
+Give the parent a size. The typewriter fills it, sets its text in your mono font, and inherits the font size.
+
+<FrameworkCode>
+  <FrameworkReact>
+```tsx
+"use client"
+
+import { Typewriter } from "@/components/ui/typewriter"
+
+export function Letter() {
+  return (
+    <div className="h-80 w-full overflow-hidden rounded-xl border">
+      <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
+    </div>
+  )
+}
+```
+  </FrameworkReact>
+  <FrameworkSvelte>
+```svelte
+<script>
+  import Typewriter from "$lib/components/ui/typewriter.svelte"
+</script>
+
+<div class="h-80 w-full overflow-hidden rounded-xl border">
+  <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
+</div>
+```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+`\n` starts a new line; everything else wraps at words to fit the frame, or at `columns` characters when you set it. Type once and stop, or slow it down and switch the clicks on.
+
+<FrameworkCode>
+  <FrameworkReact>
+    ```tsx
+    <Typewriter loop={false} onDone={() => console.log("typed")} />
+    <Typewriter speed={8} columns={40} sound />
+    ```
+  </FrameworkReact>
+  <FrameworkSvelte>
+    ```svelte
+    <Typewriter loop={false} onDone={() => console.log("typed")} />
+    <Typewriter speed={8} columns={40} sound />
+    ```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+`sound` synthesizes the key clicks, the margin bell, and the carriage return with Web Audio; browsers only let it play after the visitor has clicked or pressed a key on the page. Screen readers get the whole text at once. `prefers-reduced-motion: reduce` prints the finished page with no animation, and typing pauses while the typewriter is off-screen or the tab is hidden.
+
+## Props
+
+| Prop         | Type         | Default                                              |
+| ------------ | ------------ | ---------------------------------------------------- |
+| `text`       | `string`     | a short letter — `\n` breaks a line                  |
+| `speed`      | `number`     | `14` — characters per second                         |
+| `humanize`   | `boolean`    | `true` — uneven keys, rests after punctuation        |
+| `jitter`     | `number`     | `0.3` — 0–1, per-letter baseline, tilt, and ink      |
+| `columns`    | `number`     | `0` — wrap width in characters, `0` fits the frame   |
+| `ticks`      | `boolean`    | `true` — scale marks along the rail                  |
+| `loop`       | `boolean`    | `true` — feed the page out and type it again         |
+| `hold`       | `number`     | `2600` — ms on the finished page before looping      |
+| `startDelay` | `number`     | `600` — ms before the first keystroke                |
+| `sound`      | `boolean`    | `false` — synthesized clicks, bell, and return       |
+| `onDone`     | `() => void` | called each time the last character lands            |
+| `className`  | `string`     | React only                                           |
+| `class`      | `string`     | Svelte only                                          |
+
+Color it with a text color on the component or its parent (`className="text-sky-700"`); the rail, carriage, and letters all use `currentColor`. The root has `p-6` padding, and the text margin moves in further when the carriage needs room to stay inside the frame.
diff --git a/content/docs/getting-started.mdx b/content/docs/getting-started.mdx
index 2503109..2c7f08e 100644
--- a/content/docs/getting-started.mdx
+++ b/content/docs/getting-started.mdx
@@ -13,7 +13,7 @@ Or pull straight from the public GitHub source registry:
 
 <CliCommand item="shader-gradient" github />
 
-Swap `shader-gradient` for any item name — `shader-sky`, `shader-anime-fire`, `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
+Swap `shader-gradient` for any item name — `shader-sky`, `shader-anime-fire`, `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `phosphor-score`, `radiant-lines`, `dithered-404`, `typewriter`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
 
 ## Use a background or shader
 
@@ -61,4 +61,4 @@ Shaders such as [Shader Gradient](/docs/components/shader-gradient), [Shader Ani
 | Footers    | [Stretchy Footer](/docs/components/stretchy-footer)                                                                                       |
 | Characters | [Live Orb](/docs/components/live-orb), [ASCII Logo](/docs/components/ascii-logo)                                                                                                           |
 | Pages      | [Dithered 404](/docs/components/dithered-404)                                                                                                                                              |
-| Components | [Gooey Color Picker](/docs/components/gooey-color-picker)                                                                                                                                  |
+| Components | [Gooey Color Picker](/docs/components/gooey-color-picker), [Typewriter](/docs/components/typewriter)                                                                                       |
diff --git a/public/og/docs/components/typewriter/image.png b/public/og/docs/components/typewriter/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..27615bb26401e5b6f9d4c4323af7b4eed98a725c
GIT binary patch
literal 45430
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
E00nZVVE_OC

literal 0
HcmV?d00001

diff --git a/public/r/registry.json b/public/r/registry.json
index 52ccb12..6e6ccce 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -374,6 +374,32 @@
         }
       ],
       "type": "registry:ui"
+    },
+    {
+      "name": "typewriter",
+      "title": "Typewriter",
+      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "files": [
+        {
+          "path": "registry/typewriter/typewriter.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/typewriter.tsx"
+        }
+      ],
+      "type": "registry:ui"
+    },
+    {
+      "name": "typewriter-svelte",
+      "title": "Typewriter",
+      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "files": [
+        {
+          "path": "registry/typewriter/typewriter.svelte",
+          "type": "registry:file",
+          "target": "src/lib/components/ui/typewriter.svelte"
+        }
+      ],
+      "type": "registry:ui"
     }
   ]
 }
\ No newline at end of file
diff --git a/public/r/typewriter-svelte.json b/public/r/typewriter-svelte.json
new file mode 100644
index 0000000..0355dbf
--- /dev/null
+++ b/public/r/typewriter-svelte.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typewriter-svelte",
+  "title": "Typewriter",
+  "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+  "files": [
+    {
+      "path": "registry/typewriter/typewriter.svelte",
+      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery letter lands where the carriage stands, then the carriage steps aside for the next one. At the margin it rings, glides home, and drops a line.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 14\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Line pitch, in font sizes. Leaves the carriage room under each line. */\nconst LEADING = 2.2\n/** Typeball radius, in font sizes. */\nconst BALL_R = 1.1\n/** Baseline to the top of the typeball, in font sizes. */\nconst BALL_GAP = 0.2\n/** Glyph size on the ball, as a share of its radius. */\nconst BALL_GLYPH = 0.56\n/** Rail thickness, in font sizes. */\nconst RAIL_H = 0.32\n/** Rail clamp width, in font sizes. */\nconst CLAMP_W = 0.26\n/** Gap between the ball and each clamp, in font sizes. */\nconst CLAMP_GAP = 0.14\n/** Bell rings this many cells before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `14`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Feed the page out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Wrap width in characters. `0` fits the frame. Default `0`. */\n  columns?: number\n  /** Scale ticks along the rail. Default `true`. */\n  ticks?: boolean\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Clear the page and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\nfunction svgEl<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number> = {}\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    node.setAttribute(key, String(value))\n  }\n  return node\n}\n\nfunction div(style: Partial<CSSStyleDeclaration>) {\n  const node = document.createElement(\"div\")\n  Object.assign(node.style, style)\n  return node\n}\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n/** The ball's glyph rows, top to bottom — the keyboard's three letter rows. */\nconst BALL_FACES = [\"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,.?\"]\n/** Latitude of each row on the ball, in radians. */\nconst BALL_ROWS = [0.66, 0, -0.66]\n/** Glyphs sit a little inside the silhouette, so the limb stays clean. */\nconst BALL_INSET = 0.8\n/** Idle spin, in radians per second. */\nconst BALL_DRIFT = 0.55\n\ntype Tween = {\n  from: number\n  to: number\n  start: number\n  ms: number\n  ease: (t: number) => number\n}\n\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Nearest turn of `angle` to `from`, so the ball spins the short way. */\nfunction nearest(from: number, angle: number) {\n  return from + ((((angle - from) % TAU) + TAU * 1.5) % TAU) - Math.PI\n}\n\ntype Typeball = {\n  el: SVGSVGElement\n  /**\n   * Size the ball; `radius` and the glyph size are in px. `font` is the\n   * page's computed style — mask content doesn't inherit it everywhere.\n   */\n  layout: (radius: number, glyph: number, font: CSSStyleDeclaration) => void\n  /** Spin and tilt until `ch` faces the paper. */\n  select: (ch: string, ms: number) => void\n  /** Spin whole turns, for the glide home. */\n  whirl: (turns: number, ms: number) => void\n  /** Turn slowly while nothing is being typed. */\n  drift: (on: boolean) => void\n  destroy: () => void\n}\n\nlet ballIds = 0\n\n/**\n * The type element: a sphere wearing the keyboard in three rows. It spins\n * about its axis and tilts to bring a glyph to the front — the letters are\n * cut through the ink, so the page shows through them.\n */\nfunction createTypeball(): Typeball {\n  const id = `typewriter-ball-${++ballIds}`\n  const el = svgEl(\"svg\", { overflow: \"visible\" })\n  el.style.position = \"absolute\"\n  el.style.overflow = \"visible\"\n  const defs = svgEl(\"defs\")\n  const shade = svgEl(\"radialGradient\", {\n    id: `${id}-shade`,\n    cx: 0.36,\n    cy: 0.3,\n    r: 0.8,\n  })\n  for (const [offset, alpha] of [\n    [0, 0.5],\n    [0.5, 0.86],\n    [1, 1],\n  ] as const) {\n    shade.append(\n      svgEl(\"stop\", {\n        offset,\n        \"stop-color\": \"currentColor\",\n        \"stop-opacity\": alpha,\n      })\n    )\n  }\n  const mask = svgEl(\"mask\", { id: `${id}-cut`, maskUnits: \"userSpaceOnUse\" })\n  const paper = svgEl(\"rect\", { fill: \"#fff\" })\n  const letters = svgEl(\"g\", {\n    fill: \"#000\",\n    \"text-anchor\": \"middle\",\n    \"dominant-baseline\": \"central\",\n  })\n  mask.append(paper, letters)\n  defs.append(shade, mask)\n  const sphere = svgEl(\"circle\", {\n    fill: `url(#${id}-shade)`,\n    mask: `url(#${id}-cut)`,\n  })\n  el.append(defs, sphere)\n\n  const cols = BALL_FACES[0]!.length\n  const slots = BALL_FACES.flatMap((face, row) =>\n    Array.from(face, (glyph, col) => {\n      const node = svgEl(\"text\")\n      node.textContent = glyph\n      letters.append(node)\n      return { row, col, glyph, node }\n    })\n  )\n\n  let radius = 16\n  let lon = 0\n  let tilt = 0\n  let lonTween: Tween | null = null\n  let tiltTween: Tween | null = null\n  let drifting = false\n  let raf = 0\n  let last = 0\n  let swapped: (typeof slots)[number] | null = null\n\n  const render = () => {\n    const r = radius * BALL_INSET\n    const sin = Math.sin(tilt)\n    const cos = Math.cos(tilt)\n    for (const slot of slots) {\n      const lat = BALL_ROWS[slot.row]!\n      const theta = (slot.col / cols) * TAU - lon\n      const x = Math.cos(lat) * Math.sin(theta)\n      const y0 = Math.sin(lat)\n      const z0 = Math.cos(lat) * Math.cos(theta)\n      const y = y0 * cos - z0 * sin\n      const z = y0 * sin + z0 * cos\n      const seen = clamp((z - 0.12) / 0.4, 0, 1)\n      if (seen <= 0) {\n        slot.node.setAttribute(\"fill-opacity\", \"0\")\n        continue\n      }\n      const sx = Math.sqrt(Math.max(0.02, 1 - x * x))\n      const sy = Math.sqrt(Math.max(0.02, 1 - y * y))\n      slot.node.setAttribute(\"fill-opacity\", (seen * 0.86).toFixed(3))\n      slot.node.setAttribute(\n        \"transform\",\n        `translate(${(x * r).toFixed(2)} ${(-y * r).toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`\n      )\n    }\n  }\n\n  const valueOf = (tween: Tween, now: number) => {\n    const t = clamp((now - tween.start) / Math.max(1, tween.ms), 0, 1)\n    return tween.from + (tween.to - tween.from) * tween.ease(t)\n  }\n\n  const frame = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (lonTween) {\n      lon = valueOf(lonTween, now)\n      if (now - lonTween.start >= lonTween.ms) lonTween = null\n    } else if (drifting) {\n      lon += BALL_DRIFT * dt\n    }\n    if (tiltTween) {\n      tilt = valueOf(tiltTween, now)\n      if (now - tiltTween.start >= tiltTween.ms) tiltTween = null\n    }\n    render()\n    if (lonTween || tiltTween || drifting) raf = requestAnimationFrame(frame)\n  }\n\n  const wake = () => {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(frame)\n  }\n\n  const tweenTo = (current: number, to: number, ms: number, ease = easeOut) => {\n    const now = performance.now()\n    return { from: current, to, start: now, ms, ease }\n  }\n\n  const settle = () => {\n    const now = performance.now()\n    if (lonTween) lon = valueOf(lonTween, now)\n    if (tiltTween) tilt = valueOf(tiltTween, now)\n  }\n\n  return {\n    el,\n    layout(nextRadius, glyph, font) {\n      radius = nextRadius\n      const box = radius + 2\n      el.setAttribute(\"width\", String(box * 2))\n      el.setAttribute(\"height\", String(box * 2))\n      el.setAttribute(\"viewBox\", `${-box} ${-box} ${box * 2} ${box * 2}`)\n      sphere.setAttribute(\"r\", String(radius))\n      for (const [key, value] of Object.entries({\n        x: -box,\n        y: -box,\n        width: box * 2,\n        height: box * 2,\n      })) {\n        mask.setAttribute(key, String(value))\n        paper.setAttribute(key, String(value))\n      }\n      letters.setAttribute(\"font-size\", glyph.toFixed(2))\n      Object.assign(letters.style, {\n        fontFamily: font.fontFamily,\n        fontStretch: font.fontStretch,\n        fontWeight: font.fontWeight,\n        fontVariationSettings: font.fontVariationSettings,\n      })\n      render()\n    },\n    select(ch, ms) {\n      const key = ch.toLowerCase()\n      let slot = slots.find((s) => s.glyph === key)\n      if (!slot) {\n        const code = ch.codePointAt(0) ?? 0\n        slot = slots[(code * 7) % slots.length]!\n      }\n      // Capitals and symbols borrow a slot's face until the next letter.\n      if (swapped && swapped !== slot) swapped.node.textContent = swapped.glyph\n      swapped = ch === slot.glyph ? null : slot\n      slot.node.textContent = ch\n      settle()\n      const target = nearest(lon, (slot.col / cols) * TAU)\n      lonTween = tweenTo(lon, target, ms)\n      tiltTween = tweenTo(tilt, BALL_ROWS[slot.row]!, ms)\n      wake()\n    },\n    whirl(turns, ms) {\n      settle()\n      lonTween = tweenTo(lon, lon + turns * TAU, ms, easeInOut)\n      tiltTween = tweenTo(tilt, 0, ms, easeInOut)\n      wake()\n    },\n    drift(on) {\n      drifting = on\n      if (on) wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\n/**\n * A typewriter on the page. A rail spans the frame and a typeball rides it:\n * for every letter the ball spins that glyph to the front, strikes, and\n * steps one cell right. At the end of a line it whirls home and drops to\n * the next, and when the page is full the paper feeds up. Idle when\n * finished, off-screen, or under `prefers-reduced-motion` (which prints the\n * whole page at once).\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 120)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n\n  const stage = div({\n    position: \"absolute\",\n    inset: \"0\",\n    overflow: \"hidden\",\n    borderRadius: \"inherit\",\n    pointerEvents: \"none\",\n  })\n  stage.setAttribute(\"aria-hidden\", \"true\")\n  const viewport = div({ position: \"absolute\", inset: \"0\" })\n  const page = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    right: \"0\",\n    whiteSpace: \"pre\",\n    willChange: \"transform\",\n  })\n  const carriage = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    width: \"100%\",\n    willChange: \"transform\",\n  })\n  const rail = svgEl(\"svg\", { overflow: \"visible\" })\n  rail.style.position = \"absolute\"\n  rail.style.left = \"0\"\n  rail.style.overflow = \"visible\"\n  const head = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    willChange: \"transform\",\n  })\n  const clamps = svgEl(\"svg\", { overflow: \"visible\" })\n  clamps.style.position = \"absolute\"\n  clamps.style.overflow = \"visible\"\n  const ball = createTypeball()\n\n  head.append(clamps, ball.el)\n  carriage.append(rail, head)\n  viewport.append(page)\n  stage.append(viewport, carriage)\n  root.append(spoken, stage)\n\n  // Font metrics and frame, refreshed by `measure`.\n  const m = {\n    fs: 16,\n    cw: 9.6,\n    lh: 35,\n    base: 22,\n    width: 0,\n    height: 0,\n    padT: 0,\n    padB: 0,\n    margin: 0,\n    columns: 1,\n    radius: 16,\n    /** Baseline to the ball's centre, which is also the rail's. */\n    axis: 20,\n    /** Cell centre to the outer edge of a rail clamp. */\n    half: 24,\n  }\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let scroll = 0\n  let lines: HTMLDivElement[] = []\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  /** The ball turns idly between pages, but only while anyone can see it. */\n  const idle = () =>\n    ball.drift((phase === \"waiting\" || phase === \"done\") && active())\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n    idle()\n  }\n  const setPhase = (next: typeof phase) => {\n    phase = next\n    idle()\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const cellX = (col: number) => m.margin + col * m.cw\n  const lineTop = (line: number) => m.padT + line * m.lh\n  /** How far the paper must feed up to keep the carriage on `line` in frame. */\n  const scrollFor = (line: number) => {\n    const floor = m.height - Math.min(m.padB, m.fs * 0.6)\n    return Math.max(0, lineTop(line) + m.base + m.axis + m.radius - floor)\n  }\n\n  const setTransition = (\n    el: HTMLElement,\n    ms: number,\n    ease: string,\n    delay = 0\n  ) => {\n    el.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease} ${Math.round(delay)}ms` : \"none\"\n  }\n  const placeHead = (col: number, ms = 0, ease = \"linear\", delay = 0) => {\n    setTransition(head, ms, ease, delay)\n    head.style.transform = `translate3d(${cellX(col)}px,0,0)`\n  }\n  const placeCarriage = (line: number, ms = 0, ease = \"linear\") => {\n    setTransition(carriage, ms, ease)\n    const y = Math.round(lineTop(line) - scroll + m.base)\n    carriage.style.transform = `translate3d(0,${y}px,0)`\n  }\n  const placePage = (ms = 0, ease = \"linear\") => {\n    page.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease}, opacity ${ms}ms ${ease}` : \"none\"\n    page.style.transform = `translate3d(0,${-scroll}px,0)`\n    viewport.style.maskImage = viewport.style.webkitMaskImage =\n      scroll > 0\n        ? `linear-gradient(to bottom, transparent 0, #000 ${Math.max(m.padT, m.lh * 0.8)}px)`\n        : \"\"\n  }\n\n  const lineEl = (index: number) => {\n    while (lines.length <= index) {\n      const el = div({\n        position: \"absolute\",\n        left: \"0\",\n        right: \"0\",\n        top: `${lineTop(lines.length)}px`,\n        height: `${m.lh}px`,\n      })\n      page.append(el)\n      lines.push(el)\n    }\n    return lines[index]!\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const el = document.createElement(\"span\")\n    el.textContent = stroke.ch\n    Object.assign(el.style, {\n      position: \"absolute\",\n      top: \"0\",\n      left: `${cellX(stroke.col)}px`,\n      width: `${m.cw}px`,\n      height: `${m.lh}px`,\n      lineHeight: `${m.lh}px`,\n      textAlign: \"center\",\n    })\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 0.07 * m.fs\n      const dy = (hash(n + 1) - 0.5) * jitter * 0.1 * m.fs\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.style.transform = `translate(${dx.toFixed(2)}px,${dy.toFixed(2)}px) rotate(${tilt.toFixed(2)}deg)`\n      el.style.opacity = (1 - hash(n + 3) * jitter * 0.42).toFixed(3)\n    }\n    lineEl(stroke.line).append(el)\n    return el\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  /** Paint the first `pos` strokes and park the carriage, without motion. */\n  const paint = () => {\n    page.replaceChildren()\n    lines = []\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    scroll = scrollFor(cursor.line)\n    placePage()\n    placeCarriage(cursor.line)\n    placeHead(cursor.col)\n    rang = cursor.col >= m.columns - BELL_CELLS\n  }\n\n  const drawRail = () => {\n    const { width, fs, cw, columns } = m\n    const h = Math.max(3, Math.round(RAIL_H * fs))\n    rail.setAttribute(\"width\", String(width))\n    rail.setAttribute(\"height\", String(h + 1))\n    rail.setAttribute(\"viewBox\", `0 0 ${width} ${h + 1}`)\n    rail.style.top = `${Math.round(m.axis - h / 2)}px`\n    rail.replaceChildren()\n    const g = svgEl(\"g\", { fill: \"none\", stroke: \"currentColor\" })\n    g.append(\n      svgEl(\"path\", {\n        d: `M0 0.5H${width}M0 ${h + 0.5}H${width}`,\n        \"stroke-opacity\": 0.3,\n        \"stroke-width\": 1,\n      })\n    )\n    if (options.ticks ?? true) {\n      let minor = \"\"\n      let major = \"\"\n      for (let c = 0; c <= columns; c++) {\n        const x = Math.round(m.margin + c * cw + cw / 2) + 0.5\n        if (c % 5 === 0) major += `M${x} 1V${c % 10 === 0 ? h : h * 0.62}`\n        else minor += `M${x} 1V${h * 0.36}`\n      }\n      g.append(\n        svgEl(\"path\", { d: minor, \"stroke-opacity\": 0.22, \"stroke-width\": 1 }),\n        svgEl(\"path\", { d: major, \"stroke-opacity\": 0.42, \"stroke-width\": 1 })\n      )\n    }\n    // Margin stops: where the carriage returns to, and where the bell rings.\n    const stopW = Math.max(2, Math.round(fs * 0.14))\n    const stopH = h + Math.round(fs * 0.32)\n    for (const x of [m.margin, m.margin + columns * cw]) {\n      g.append(\n        svgEl(\"rect\", {\n          x: Math.round(x - stopW / 2),\n          y: Math.round((h - stopH) / 2) + 0.5,\n          width: stopW,\n          height: stopH,\n          rx: stopW / 2,\n          fill: \"currentColor\",\n          \"fill-opacity\": 0.55,\n          stroke: \"none\",\n        })\n      )\n    }\n    rail.append(g)\n  }\n\n  /** The ball, and the two clamps that hold it on the rail. */\n  const drawHead = () => {\n    const { fs, cw, radius, axis, half } = m\n    const box = radius + 2\n    ball.layout(radius, radius * BALL_GLYPH, getComputedStyle(root))\n    ball.el.style.left = `${cw / 2 - box}px`\n    ball.el.style.top = `${axis - box}px`\n\n    const railH = Math.max(3, Math.round(RAIL_H * fs))\n    const w = Math.max(3, Math.round(CLAMP_W * fs))\n    const h = railH + Math.round(fs * 0.42)\n    const gap = Math.round(CLAMP_GAP * fs)\n    clamps.setAttribute(\"width\", String(half * 2))\n    clamps.setAttribute(\"height\", String(h))\n    clamps.setAttribute(\"viewBox\", `${-half} ${-h / 2} ${half * 2} ${h}`)\n    clamps.style.left = `${cw / 2 - half}px`\n    clamps.style.top = `${axis - h / 2}px`\n    clamps.replaceChildren()\n    for (const side of [-1, 1]) {\n      const inner = radius + gap\n      const x = side < 0 ? -inner - w : inner\n      clamps.append(\n        // The collar that grips the rail…\n        svgEl(\"rect\", {\n          x,\n          y: -h / 2,\n          width: w,\n          height: h,\n          rx: Math.min(w / 2, fs * 0.12),\n          fill: \"currentColor\",\n        }),\n        // …and the axle stub it holds the ball by.\n        svgEl(\"rect\", {\n          x: side < 0 ? -inner : radius - 1,\n          y: -Math.max(1, railH * 0.25),\n          width: gap + 1,\n          height: Math.max(2, railH * 0.5),\n          fill: \"currentColor\",\n        })\n      )\n    }\n  }\n\n  const measure = () => {\n    const cs = getComputedStyle(root)\n    const fs = parseFloat(cs.fontSize) || 16\n    const probe = document.createElement(\"span\")\n    probe.textContent = \"0000000000\"\n    Object.assign(probe.style, {\n      position: \"absolute\",\n      visibility: \"hidden\",\n      whiteSpace: \"pre\",\n    })\n    const marker = document.createElement(\"span\")\n    Object.assign(marker.style, {\n      display: \"inline-block\",\n      width: \"0\",\n      height: \"0\",\n      verticalAlign: \"baseline\",\n    })\n    const lh = Math.round(fs * LEADING)\n    const row = div({\n      position: \"absolute\",\n      visibility: \"hidden\",\n      lineHeight: `${lh}px`,\n      height: `${lh}px`,\n    })\n    row.append(\"x\", marker)\n    stage.append(probe, row)\n    const cw = probe.getBoundingClientRect().width / 10 || fs * 0.6\n    const base = marker.offsetTop\n    probe.remove()\n    row.remove()\n\n    const width = root.clientWidth\n    const height = root.clientHeight\n    const padL = parseFloat(cs.paddingLeft) || 0\n    const padR = parseFloat(cs.paddingRight) || 0\n    const radius = Math.round(fs * BALL_R)\n    const half = Math.ceil(\n      radius + Math.round(CLAMP_GAP * fs) + Math.round(CLAMP_W * fs)\n    )\n    const reach = half - cw / 2\n    const edge = fs * 0.5\n    // The carriage never hangs off the frame, even at the margins.\n    const margin = Math.max(padL, Math.ceil(reach + edge))\n    const fit = Math.floor(\n      Math.min(width - padR - margin, width - edge - reach - cw - margin) / cw\n    )\n    const wanted = Math.floor(numberOr(options.columns, 0, 0, 1000))\n    const columns = Math.max(1, wanted > 0 ? Math.min(wanted, fit) : fit)\n\n    const changed =\n      fs !== m.fs ||\n      cw !== m.cw ||\n      lh !== m.lh ||\n      columns !== m.columns ||\n      width !== m.width\n    Object.assign(m, {\n      fs,\n      cw,\n      lh,\n      base,\n      width,\n      height,\n      padT: parseFloat(cs.paddingTop) || 0,\n      padB: parseFloat(cs.paddingBottom) || 0,\n      margin,\n      columns,\n      radius,\n      axis: Math.round(BALL_GAP * fs + radius),\n      half,\n    })\n    return changed\n  }\n\n  /** Lay the text out again for the current frame, keeping the place. */\n  const relayout = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    strokes = layoutTypewriter(textOf(), m.columns)\n    pos = phase === \"done\" ? strokes.length : 0\n    if (phase !== \"done\") {\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    drawRail()\n    drawHead()\n    paint()\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Spin the glyph round, strike, then step the carriage a cell right. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const spin = stroke.ch === \" \" ? 0 : clamp(base * 0.4, 16, 70)\n    const step = Math.min(90, base * 0.7)\n    if (stroke.ch !== \" \") {\n      ball.select(stroke.ch, spin)\n      letter(stroke).animate([{ opacity: 0 }, {}], {\n        duration: Math.min(70, step),\n        delay: spin,\n        easing: \"ease-out\",\n        fill: \"backwards\",\n      })\n      ball.el.animate(\n        [\n          { transform: \"translateY(0)\" },\n          { transform: `translateY(${(-m.fs * 0.22).toFixed(2)}px)` },\n          { transform: \"translateY(0)\" },\n        ],\n        {\n          duration: Math.min(110, base * 0.9),\n          delay: spin * 0.55,\n          easing: \"cubic-bezier(.3,.7,.4,1)\",\n        }\n      )\n    }\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n    placeHead(cursor.col, step, \"cubic-bezier(.2,.8,.2,1)\", spin)\n    const audio = soundOn()\n    audio?.key(stroke.ch === \" \")\n    if (\n      !rang &&\n      cursor.col >= m.columns - BELL_CELLS &&\n      m.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Whirl home along the rail and drop a line. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(200 + stroke.from * 7, 240, 620)\n    const drop = 260\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    const next = Math.max(scroll, scrollFor(cursor.line))\n    if (next !== scroll) {\n      scroll = next\n      placePage(drop, \"cubic-bezier(.3,.7,.2,1)\")\n    }\n    placeCarriage(cursor.line, drop, \"cubic-bezier(.3,.7,.2,1)\")\n    placeHead(0, glide, \"cubic-bezier(.65,0,.25,1)\")\n    if (stroke.from > 0) {\n      ball.whirl(-(0.5 + stroke.from / Math.max(1, m.columns)), glide)\n    }\n    soundOn()?.carriage(glide)\n    return glide\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    if (phase !== \"typing\") setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const glide = carriageReturn(stroke)\n      schedule(step, glide + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 820\n    const pull = \"cubic-bezier(.55,0,.75,.2)\"\n    const lift = lineTop(cursor.line + 1) + m.lh\n    page.style.transition = `transform ${ms}ms ${pull}, opacity ${ms}ms ease-in`\n    page.style.transform = `translate3d(0,${-scroll - lift}px,0)`\n    page.style.opacity = \"0\"\n    scroll = 0\n    // Same curve as the sheet, which travels further, so the carriage rises\n    // behind the last line instead of through it.\n    placeCarriage(0, ms, pull)\n    placeHead(0, ms, \"cubic-bezier(.65,0,.35,1)\")\n    if (cursor.col > 0) ball.whirl(-1, ms)\n    schedule(() => {\n      pos = 0\n      page.style.opacity = \"\"\n      paint()\n      setPhase(\"waiting\")\n      schedule(step, startOf() * 0.6)\n    }, ms + 60)\n  }\n\n  const start = () => {\n    cancel()\n    page.style.opacity = \"\"\n    strokes = layoutTypewriter(textOf(), m.columns)\n    spoken.textContent = textOf()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    schedule(step, startOf())\n  }\n\n  measure()\n  drawRail()\n  drawHead()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const onResize = () => {\n    if (measure()) relayout()\n    else {\n      scroll = Math.max(scroll, scrollFor(cursor.line))\n      placePage()\n      placeCarriage(cursor.line)\n    }\n  }\n  const ro = new ResizeObserver(onResize)\n  ro.observe(root)\n  // Webfonts can land after mount and change the cell width.\n  void document.fonts?.ready.then(() => {\n    if (!destroyed) onResize()\n  })\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (options.columns !== prev.columns) {\n        measure()\n        relayout()\n      } else if (options.jitter !== prev.jitter) {\n        paint()\n      }\n      if (options.ticks !== prev.ticks) drawRail()\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      ball.destroy()\n      ro.disconnect()\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      spoken.remove()\n      stage.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    columns = 0,\n    ticks = true,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background p-6 font-mono text-foreground\",\n    className\n  )}\n></div>\n",
+      "type": "registry:file",
+      "target": "src/lib/components/ui/typewriter.svelte"
+    }
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/public/r/typewriter.json b/public/r/typewriter.json
new file mode 100644
index 0000000..152c1ce
--- /dev/null
+++ b/public/r/typewriter.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typewriter",
+  "title": "Typewriter",
+  "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+  "files": [
+    {
+      "path": "registry/typewriter/typewriter.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery letter lands where the carriage stands, then the carriage steps aside for the next one. At the margin it rings, glides home, and drops a line.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 14\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Line pitch, in font sizes. Leaves the carriage room under each line. */\nconst LEADING = 2.2\n/** Typeball radius, in font sizes. */\nconst BALL_R = 1.1\n/** Baseline to the top of the typeball, in font sizes. */\nconst BALL_GAP = 0.2\n/** Glyph size on the ball, as a share of its radius. */\nconst BALL_GLYPH = 0.56\n/** Rail thickness, in font sizes. */\nconst RAIL_H = 0.32\n/** Rail clamp width, in font sizes. */\nconst CLAMP_W = 0.26\n/** Gap between the ball and each clamp, in font sizes. */\nconst CLAMP_GAP = 0.14\n/** Bell rings this many cells before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `14`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Feed the page out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Wrap width in characters. `0` fits the frame. Default `0`. */\n  columns?: number\n  /** Scale ticks along the rail. Default `true`. */\n  ticks?: boolean\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Clear the page and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\nfunction svgEl<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number> = {}\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    node.setAttribute(key, String(value))\n  }\n  return node\n}\n\nfunction div(style: Partial<CSSStyleDeclaration>) {\n  const node = document.createElement(\"div\")\n  Object.assign(node.style, style)\n  return node\n}\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n/** The ball's glyph rows, top to bottom — the keyboard's three letter rows. */\nconst BALL_FACES = [\"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,.?\"]\n/** Latitude of each row on the ball, in radians. */\nconst BALL_ROWS = [0.66, 0, -0.66]\n/** Glyphs sit a little inside the silhouette, so the limb stays clean. */\nconst BALL_INSET = 0.8\n/** Idle spin, in radians per second. */\nconst BALL_DRIFT = 0.55\n\ntype Tween = {\n  from: number\n  to: number\n  start: number\n  ms: number\n  ease: (t: number) => number\n}\n\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Nearest turn of `angle` to `from`, so the ball spins the short way. */\nfunction nearest(from: number, angle: number) {\n  return from + ((((angle - from) % TAU) + TAU * 1.5) % TAU) - Math.PI\n}\n\ntype Typeball = {\n  el: SVGSVGElement\n  /**\n   * Size the ball; `radius` and the glyph size are in px. `font` is the\n   * page's computed style — mask content doesn't inherit it everywhere.\n   */\n  layout: (radius: number, glyph: number, font: CSSStyleDeclaration) => void\n  /** Spin and tilt until `ch` faces the paper. */\n  select: (ch: string, ms: number) => void\n  /** Spin whole turns, for the glide home. */\n  whirl: (turns: number, ms: number) => void\n  /** Turn slowly while nothing is being typed. */\n  drift: (on: boolean) => void\n  destroy: () => void\n}\n\nlet ballIds = 0\n\n/**\n * The type element: a sphere wearing the keyboard in three rows. It spins\n * about its axis and tilts to bring a glyph to the front — the letters are\n * cut through the ink, so the page shows through them.\n */\nfunction createTypeball(): Typeball {\n  const id = `typewriter-ball-${++ballIds}`\n  const el = svgEl(\"svg\", { overflow: \"visible\" })\n  el.style.position = \"absolute\"\n  el.style.overflow = \"visible\"\n  const defs = svgEl(\"defs\")\n  const shade = svgEl(\"radialGradient\", {\n    id: `${id}-shade`,\n    cx: 0.36,\n    cy: 0.3,\n    r: 0.8,\n  })\n  for (const [offset, alpha] of [\n    [0, 0.5],\n    [0.5, 0.86],\n    [1, 1],\n  ] as const) {\n    shade.append(\n      svgEl(\"stop\", {\n        offset,\n        \"stop-color\": \"currentColor\",\n        \"stop-opacity\": alpha,\n      })\n    )\n  }\n  const mask = svgEl(\"mask\", { id: `${id}-cut`, maskUnits: \"userSpaceOnUse\" })\n  const paper = svgEl(\"rect\", { fill: \"#fff\" })\n  const letters = svgEl(\"g\", {\n    fill: \"#000\",\n    \"text-anchor\": \"middle\",\n    \"dominant-baseline\": \"central\",\n  })\n  mask.append(paper, letters)\n  defs.append(shade, mask)\n  const sphere = svgEl(\"circle\", {\n    fill: `url(#${id}-shade)`,\n    mask: `url(#${id}-cut)`,\n  })\n  el.append(defs, sphere)\n\n  const cols = BALL_FACES[0]!.length\n  const slots = BALL_FACES.flatMap((face, row) =>\n    Array.from(face, (glyph, col) => {\n      const node = svgEl(\"text\")\n      node.textContent = glyph\n      letters.append(node)\n      return { row, col, glyph, node }\n    })\n  )\n\n  let radius = 16\n  let lon = 0\n  let tilt = 0\n  let lonTween: Tween | null = null\n  let tiltTween: Tween | null = null\n  let drifting = false\n  let raf = 0\n  let last = 0\n  let swapped: (typeof slots)[number] | null = null\n\n  const render = () => {\n    const r = radius * BALL_INSET\n    const sin = Math.sin(tilt)\n    const cos = Math.cos(tilt)\n    for (const slot of slots) {\n      const lat = BALL_ROWS[slot.row]!\n      const theta = (slot.col / cols) * TAU - lon\n      const x = Math.cos(lat) * Math.sin(theta)\n      const y0 = Math.sin(lat)\n      const z0 = Math.cos(lat) * Math.cos(theta)\n      const y = y0 * cos - z0 * sin\n      const z = y0 * sin + z0 * cos\n      const seen = clamp((z - 0.12) / 0.4, 0, 1)\n      if (seen <= 0) {\n        slot.node.setAttribute(\"fill-opacity\", \"0\")\n        continue\n      }\n      const sx = Math.sqrt(Math.max(0.02, 1 - x * x))\n      const sy = Math.sqrt(Math.max(0.02, 1 - y * y))\n      slot.node.setAttribute(\"fill-opacity\", (seen * 0.86).toFixed(3))\n      slot.node.setAttribute(\n        \"transform\",\n        `translate(${(x * r).toFixed(2)} ${(-y * r).toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`\n      )\n    }\n  }\n\n  const valueOf = (tween: Tween, now: number) => {\n    const t = clamp((now - tween.start) / Math.max(1, tween.ms), 0, 1)\n    return tween.from + (tween.to - tween.from) * tween.ease(t)\n  }\n\n  const frame = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (lonTween) {\n      lon = valueOf(lonTween, now)\n      if (now - lonTween.start >= lonTween.ms) lonTween = null\n    } else if (drifting) {\n      lon += BALL_DRIFT * dt\n    }\n    if (tiltTween) {\n      tilt = valueOf(tiltTween, now)\n      if (now - tiltTween.start >= tiltTween.ms) tiltTween = null\n    }\n    render()\n    if (lonTween || tiltTween || drifting) raf = requestAnimationFrame(frame)\n  }\n\n  const wake = () => {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(frame)\n  }\n\n  const tweenTo = (current: number, to: number, ms: number, ease = easeOut) => {\n    const now = performance.now()\n    return { from: current, to, start: now, ms, ease }\n  }\n\n  const settle = () => {\n    const now = performance.now()\n    if (lonTween) lon = valueOf(lonTween, now)\n    if (tiltTween) tilt = valueOf(tiltTween, now)\n  }\n\n  return {\n    el,\n    layout(nextRadius, glyph, font) {\n      radius = nextRadius\n      const box = radius + 2\n      el.setAttribute(\"width\", String(box * 2))\n      el.setAttribute(\"height\", String(box * 2))\n      el.setAttribute(\"viewBox\", `${-box} ${-box} ${box * 2} ${box * 2}`)\n      sphere.setAttribute(\"r\", String(radius))\n      for (const [key, value] of Object.entries({\n        x: -box,\n        y: -box,\n        width: box * 2,\n        height: box * 2,\n      })) {\n        mask.setAttribute(key, String(value))\n        paper.setAttribute(key, String(value))\n      }\n      letters.setAttribute(\"font-size\", glyph.toFixed(2))\n      Object.assign(letters.style, {\n        fontFamily: font.fontFamily,\n        fontStretch: font.fontStretch,\n        fontWeight: font.fontWeight,\n        fontVariationSettings: font.fontVariationSettings,\n      })\n      render()\n    },\n    select(ch, ms) {\n      const key = ch.toLowerCase()\n      let slot = slots.find((s) => s.glyph === key)\n      if (!slot) {\n        const code = ch.codePointAt(0) ?? 0\n        slot = slots[(code * 7) % slots.length]!\n      }\n      // Capitals and symbols borrow a slot's face until the next letter.\n      if (swapped && swapped !== slot) swapped.node.textContent = swapped.glyph\n      swapped = ch === slot.glyph ? null : slot\n      slot.node.textContent = ch\n      settle()\n      const target = nearest(lon, (slot.col / cols) * TAU)\n      lonTween = tweenTo(lon, target, ms)\n      tiltTween = tweenTo(tilt, BALL_ROWS[slot.row]!, ms)\n      wake()\n    },\n    whirl(turns, ms) {\n      settle()\n      lonTween = tweenTo(lon, lon + turns * TAU, ms, easeInOut)\n      tiltTween = tweenTo(tilt, 0, ms, easeInOut)\n      wake()\n    },\n    drift(on) {\n      drifting = on\n      if (on) wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\n/**\n * A typewriter on the page. A rail spans the frame and a typeball rides it:\n * for every letter the ball spins that glyph to the front, strikes, and\n * steps one cell right. At the end of a line it whirls home and drops to\n * the next, and when the page is full the paper feeds up. Idle when\n * finished, off-screen, or under `prefers-reduced-motion` (which prints the\n * whole page at once).\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 120)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n\n  const stage = div({\n    position: \"absolute\",\n    inset: \"0\",\n    overflow: \"hidden\",\n    borderRadius: \"inherit\",\n    pointerEvents: \"none\",\n  })\n  stage.setAttribute(\"aria-hidden\", \"true\")\n  const viewport = div({ position: \"absolute\", inset: \"0\" })\n  const page = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    right: \"0\",\n    whiteSpace: \"pre\",\n    willChange: \"transform\",\n  })\n  const carriage = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    width: \"100%\",\n    willChange: \"transform\",\n  })\n  const rail = svgEl(\"svg\", { overflow: \"visible\" })\n  rail.style.position = \"absolute\"\n  rail.style.left = \"0\"\n  rail.style.overflow = \"visible\"\n  const head = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    willChange: \"transform\",\n  })\n  const clamps = svgEl(\"svg\", { overflow: \"visible\" })\n  clamps.style.position = \"absolute\"\n  clamps.style.overflow = \"visible\"\n  const ball = createTypeball()\n\n  head.append(clamps, ball.el)\n  carriage.append(rail, head)\n  viewport.append(page)\n  stage.append(viewport, carriage)\n  root.append(spoken, stage)\n\n  // Font metrics and frame, refreshed by `measure`.\n  const m = {\n    fs: 16,\n    cw: 9.6,\n    lh: 35,\n    base: 22,\n    width: 0,\n    height: 0,\n    padT: 0,\n    padB: 0,\n    margin: 0,\n    columns: 1,\n    radius: 16,\n    /** Baseline to the ball's centre, which is also the rail's. */\n    axis: 20,\n    /** Cell centre to the outer edge of a rail clamp. */\n    half: 24,\n  }\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let scroll = 0\n  let lines: HTMLDivElement[] = []\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  /** The ball turns idly between pages, but only while anyone can see it. */\n  const idle = () =>\n    ball.drift((phase === \"waiting\" || phase === \"done\") && active())\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n    idle()\n  }\n  const setPhase = (next: typeof phase) => {\n    phase = next\n    idle()\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const cellX = (col: number) => m.margin + col * m.cw\n  const lineTop = (line: number) => m.padT + line * m.lh\n  /** How far the paper must feed up to keep the carriage on `line` in frame. */\n  const scrollFor = (line: number) => {\n    const floor = m.height - Math.min(m.padB, m.fs * 0.6)\n    return Math.max(0, lineTop(line) + m.base + m.axis + m.radius - floor)\n  }\n\n  const setTransition = (\n    el: HTMLElement,\n    ms: number,\n    ease: string,\n    delay = 0\n  ) => {\n    el.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease} ${Math.round(delay)}ms` : \"none\"\n  }\n  const placeHead = (col: number, ms = 0, ease = \"linear\", delay = 0) => {\n    setTransition(head, ms, ease, delay)\n    head.style.transform = `translate3d(${cellX(col)}px,0,0)`\n  }\n  const placeCarriage = (line: number, ms = 0, ease = \"linear\") => {\n    setTransition(carriage, ms, ease)\n    const y = Math.round(lineTop(line) - scroll + m.base)\n    carriage.style.transform = `translate3d(0,${y}px,0)`\n  }\n  const placePage = (ms = 0, ease = \"linear\") => {\n    page.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease}, opacity ${ms}ms ${ease}` : \"none\"\n    page.style.transform = `translate3d(0,${-scroll}px,0)`\n    viewport.style.maskImage = viewport.style.webkitMaskImage =\n      scroll > 0\n        ? `linear-gradient(to bottom, transparent 0, #000 ${Math.max(m.padT, m.lh * 0.8)}px)`\n        : \"\"\n  }\n\n  const lineEl = (index: number) => {\n    while (lines.length <= index) {\n      const el = div({\n        position: \"absolute\",\n        left: \"0\",\n        right: \"0\",\n        top: `${lineTop(lines.length)}px`,\n        height: `${m.lh}px`,\n      })\n      page.append(el)\n      lines.push(el)\n    }\n    return lines[index]!\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const el = document.createElement(\"span\")\n    el.textContent = stroke.ch\n    Object.assign(el.style, {\n      position: \"absolute\",\n      top: \"0\",\n      left: `${cellX(stroke.col)}px`,\n      width: `${m.cw}px`,\n      height: `${m.lh}px`,\n      lineHeight: `${m.lh}px`,\n      textAlign: \"center\",\n    })\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 0.07 * m.fs\n      const dy = (hash(n + 1) - 0.5) * jitter * 0.1 * m.fs\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.style.transform = `translate(${dx.toFixed(2)}px,${dy.toFixed(2)}px) rotate(${tilt.toFixed(2)}deg)`\n      el.style.opacity = (1 - hash(n + 3) * jitter * 0.42).toFixed(3)\n    }\n    lineEl(stroke.line).append(el)\n    return el\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  /** Paint the first `pos` strokes and park the carriage, without motion. */\n  const paint = () => {\n    page.replaceChildren()\n    lines = []\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    scroll = scrollFor(cursor.line)\n    placePage()\n    placeCarriage(cursor.line)\n    placeHead(cursor.col)\n    rang = cursor.col >= m.columns - BELL_CELLS\n  }\n\n  const drawRail = () => {\n    const { width, fs, cw, columns } = m\n    const h = Math.max(3, Math.round(RAIL_H * fs))\n    rail.setAttribute(\"width\", String(width))\n    rail.setAttribute(\"height\", String(h + 1))\n    rail.setAttribute(\"viewBox\", `0 0 ${width} ${h + 1}`)\n    rail.style.top = `${Math.round(m.axis - h / 2)}px`\n    rail.replaceChildren()\n    const g = svgEl(\"g\", { fill: \"none\", stroke: \"currentColor\" })\n    g.append(\n      svgEl(\"path\", {\n        d: `M0 0.5H${width}M0 ${h + 0.5}H${width}`,\n        \"stroke-opacity\": 0.3,\n        \"stroke-width\": 1,\n      })\n    )\n    if (options.ticks ?? true) {\n      let minor = \"\"\n      let major = \"\"\n      for (let c = 0; c <= columns; c++) {\n        const x = Math.round(m.margin + c * cw + cw / 2) + 0.5\n        if (c % 5 === 0) major += `M${x} 1V${c % 10 === 0 ? h : h * 0.62}`\n        else minor += `M${x} 1V${h * 0.36}`\n      }\n      g.append(\n        svgEl(\"path\", { d: minor, \"stroke-opacity\": 0.22, \"stroke-width\": 1 }),\n        svgEl(\"path\", { d: major, \"stroke-opacity\": 0.42, \"stroke-width\": 1 })\n      )\n    }\n    // Margin stops: where the carriage returns to, and where the bell rings.\n    const stopW = Math.max(2, Math.round(fs * 0.14))\n    const stopH = h + Math.round(fs * 0.32)\n    for (const x of [m.margin, m.margin + columns * cw]) {\n      g.append(\n        svgEl(\"rect\", {\n          x: Math.round(x - stopW / 2),\n          y: Math.round((h - stopH) / 2) + 0.5,\n          width: stopW,\n          height: stopH,\n          rx: stopW / 2,\n          fill: \"currentColor\",\n          \"fill-opacity\": 0.55,\n          stroke: \"none\",\n        })\n      )\n    }\n    rail.append(g)\n  }\n\n  /** The ball, and the two clamps that hold it on the rail. */\n  const drawHead = () => {\n    const { fs, cw, radius, axis, half } = m\n    const box = radius + 2\n    ball.layout(radius, radius * BALL_GLYPH, getComputedStyle(root))\n    ball.el.style.left = `${cw / 2 - box}px`\n    ball.el.style.top = `${axis - box}px`\n\n    const railH = Math.max(3, Math.round(RAIL_H * fs))\n    const w = Math.max(3, Math.round(CLAMP_W * fs))\n    const h = railH + Math.round(fs * 0.42)\n    const gap = Math.round(CLAMP_GAP * fs)\n    clamps.setAttribute(\"width\", String(half * 2))\n    clamps.setAttribute(\"height\", String(h))\n    clamps.setAttribute(\"viewBox\", `${-half} ${-h / 2} ${half * 2} ${h}`)\n    clamps.style.left = `${cw / 2 - half}px`\n    clamps.style.top = `${axis - h / 2}px`\n    clamps.replaceChildren()\n    for (const side of [-1, 1]) {\n      const inner = radius + gap\n      const x = side < 0 ? -inner - w : inner\n      clamps.append(\n        // The collar that grips the rail…\n        svgEl(\"rect\", {\n          x,\n          y: -h / 2,\n          width: w,\n          height: h,\n          rx: Math.min(w / 2, fs * 0.12),\n          fill: \"currentColor\",\n        }),\n        // …and the axle stub it holds the ball by.\n        svgEl(\"rect\", {\n          x: side < 0 ? -inner : radius - 1,\n          y: -Math.max(1, railH * 0.25),\n          width: gap + 1,\n          height: Math.max(2, railH * 0.5),\n          fill: \"currentColor\",\n        })\n      )\n    }\n  }\n\n  const measure = () => {\n    const cs = getComputedStyle(root)\n    const fs = parseFloat(cs.fontSize) || 16\n    const probe = document.createElement(\"span\")\n    probe.textContent = \"0000000000\"\n    Object.assign(probe.style, {\n      position: \"absolute\",\n      visibility: \"hidden\",\n      whiteSpace: \"pre\",\n    })\n    const marker = document.createElement(\"span\")\n    Object.assign(marker.style, {\n      display: \"inline-block\",\n      width: \"0\",\n      height: \"0\",\n      verticalAlign: \"baseline\",\n    })\n    const lh = Math.round(fs * LEADING)\n    const row = div({\n      position: \"absolute\",\n      visibility: \"hidden\",\n      lineHeight: `${lh}px`,\n      height: `${lh}px`,\n    })\n    row.append(\"x\", marker)\n    stage.append(probe, row)\n    const cw = probe.getBoundingClientRect().width / 10 || fs * 0.6\n    const base = marker.offsetTop\n    probe.remove()\n    row.remove()\n\n    const width = root.clientWidth\n    const height = root.clientHeight\n    const padL = parseFloat(cs.paddingLeft) || 0\n    const padR = parseFloat(cs.paddingRight) || 0\n    const radius = Math.round(fs * BALL_R)\n    const half = Math.ceil(\n      radius + Math.round(CLAMP_GAP * fs) + Math.round(CLAMP_W * fs)\n    )\n    const reach = half - cw / 2\n    const edge = fs * 0.5\n    // The carriage never hangs off the frame, even at the margins.\n    const margin = Math.max(padL, Math.ceil(reach + edge))\n    const fit = Math.floor(\n      Math.min(width - padR - margin, width - edge - reach - cw - margin) / cw\n    )\n    const wanted = Math.floor(numberOr(options.columns, 0, 0, 1000))\n    const columns = Math.max(1, wanted > 0 ? Math.min(wanted, fit) : fit)\n\n    const changed =\n      fs !== m.fs ||\n      cw !== m.cw ||\n      lh !== m.lh ||\n      columns !== m.columns ||\n      width !== m.width\n    Object.assign(m, {\n      fs,\n      cw,\n      lh,\n      base,\n      width,\n      height,\n      padT: parseFloat(cs.paddingTop) || 0,\n      padB: parseFloat(cs.paddingBottom) || 0,\n      margin,\n      columns,\n      radius,\n      axis: Math.round(BALL_GAP * fs + radius),\n      half,\n    })\n    return changed\n  }\n\n  /** Lay the text out again for the current frame, keeping the place. */\n  const relayout = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    strokes = layoutTypewriter(textOf(), m.columns)\n    pos = phase === \"done\" ? strokes.length : 0\n    if (phase !== \"done\") {\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    drawRail()\n    drawHead()\n    paint()\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Spin the glyph round, strike, then step the carriage a cell right. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const spin = stroke.ch === \" \" ? 0 : clamp(base * 0.4, 16, 70)\n    const step = Math.min(90, base * 0.7)\n    if (stroke.ch !== \" \") {\n      ball.select(stroke.ch, spin)\n      letter(stroke).animate([{ opacity: 0 }, {}], {\n        duration: Math.min(70, step),\n        delay: spin,\n        easing: \"ease-out\",\n        fill: \"backwards\",\n      })\n      ball.el.animate(\n        [\n          { transform: \"translateY(0)\" },\n          { transform: `translateY(${(-m.fs * 0.22).toFixed(2)}px)` },\n          { transform: \"translateY(0)\" },\n        ],\n        {\n          duration: Math.min(110, base * 0.9),\n          delay: spin * 0.55,\n          easing: \"cubic-bezier(.3,.7,.4,1)\",\n        }\n      )\n    }\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n    placeHead(cursor.col, step, \"cubic-bezier(.2,.8,.2,1)\", spin)\n    const audio = soundOn()\n    audio?.key(stroke.ch === \" \")\n    if (\n      !rang &&\n      cursor.col >= m.columns - BELL_CELLS &&\n      m.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Whirl home along the rail and drop a line. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(200 + stroke.from * 7, 240, 620)\n    const drop = 260\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    const next = Math.max(scroll, scrollFor(cursor.line))\n    if (next !== scroll) {\n      scroll = next\n      placePage(drop, \"cubic-bezier(.3,.7,.2,1)\")\n    }\n    placeCarriage(cursor.line, drop, \"cubic-bezier(.3,.7,.2,1)\")\n    placeHead(0, glide, \"cubic-bezier(.65,0,.25,1)\")\n    if (stroke.from > 0) {\n      ball.whirl(-(0.5 + stroke.from / Math.max(1, m.columns)), glide)\n    }\n    soundOn()?.carriage(glide)\n    return glide\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    if (phase !== \"typing\") setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const glide = carriageReturn(stroke)\n      schedule(step, glide + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 820\n    const pull = \"cubic-bezier(.55,0,.75,.2)\"\n    const lift = lineTop(cursor.line + 1) + m.lh\n    page.style.transition = `transform ${ms}ms ${pull}, opacity ${ms}ms ease-in`\n    page.style.transform = `translate3d(0,${-scroll - lift}px,0)`\n    page.style.opacity = \"0\"\n    scroll = 0\n    // Same curve as the sheet, which travels further, so the carriage rises\n    // behind the last line instead of through it.\n    placeCarriage(0, ms, pull)\n    placeHead(0, ms, \"cubic-bezier(.65,0,.35,1)\")\n    if (cursor.col > 0) ball.whirl(-1, ms)\n    schedule(() => {\n      pos = 0\n      page.style.opacity = \"\"\n      paint()\n      setPhase(\"waiting\")\n      schedule(step, startOf() * 0.6)\n    }, ms + 60)\n  }\n\n  const start = () => {\n    cancel()\n    page.style.opacity = \"\"\n    strokes = layoutTypewriter(textOf(), m.columns)\n    spoken.textContent = textOf()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    schedule(step, startOf())\n  }\n\n  measure()\n  drawRail()\n  drawHead()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const onResize = () => {\n    if (measure()) relayout()\n    else {\n      scroll = Math.max(scroll, scrollFor(cursor.line))\n      placePage()\n      placeCarriage(cursor.line)\n    }\n  }\n  const ro = new ResizeObserver(onResize)\n  ro.observe(root)\n  // Webfonts can land after mount and change the cell width.\n  void document.fonts?.ready.then(() => {\n    if (!destroyed) onResize()\n  })\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (options.columns !== prev.columns) {\n        measure()\n        relayout()\n      } else if (options.jitter !== prev.jitter) {\n        paint()\n      }\n      if (options.ticks !== prev.ticks) drawRail()\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      ball.destroy()\n      ro.disconnect()\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      spoken.remove()\n      stage.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter on the page — a typeball rides a rail across the frame,\n * spins each letter to the front, strikes, steps right, and at the margin\n * whirls home and drops a line. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  columns = 0,\n  ticks = true,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n    })\n  }, [\n    text,\n    speed,\n    humanize,\n    loop,\n    hold,\n    startDelay,\n    columns,\n    ticks,\n    jitter,\n    sound,\n  ])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background p-6 font-mono text-foreground\",\n        className\n      )}\n    />\n  )\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/typewriter.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index 545a227..d1f7521 100644
--- a/registry.json
+++ b/registry.json
@@ -16,6 +16,7 @@
     "registry/shader-fire/registry.json",
     "registry/shader-gradient/registry.json",
     "registry/shader-sky/registry.json",
-    "registry/stretchy-footer/registry.json"
+    "registry/stretchy-footer/registry.json",
+    "registry/typewriter/registry.json"
   ]
 }
diff --git a/registry/typewriter/registry.json b/registry/typewriter/registry.json
new file mode 100644
index 0000000..29db8c3
--- /dev/null
+++ b/registry/typewriter/registry.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "items": [
+    {
+      "name": "typewriter",
+      "type": "registry:ui",
+      "title": "Typewriter",
+      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "files": [
+        {
+          "path": "typewriter.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/typewriter.tsx"
+        }
+      ]
+    },
+    {
+      "name": "typewriter-svelte",
+      "type": "registry:ui",
+      "title": "Typewriter",
+      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "files": [
+        {
+          "path": "typewriter.svelte",
+          "type": "registry:file",
+          "target": "src/lib/components/ui/typewriter.svelte"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/typewriter/typewriter-demo.tsx b/registry/typewriter/typewriter-demo.tsx
new file mode 100644
index 0000000..0ec9709
--- /dev/null
+++ b/registry/typewriter/typewriter-demo.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import { useId, useState } from "react"
+import { RiRestartLine } from "@remixicon/react"
+
+import { Button } from "@/components/ui/button"
+import {
+  ComponentControls,
+  ControlSlider,
+  ControlSwitch,
+} from "@/components/component-controls"
+import { ComponentPreview } from "@/components/component-preview"
+import { usePreviewProps } from "@/hooks/use-preview-props"
+import {
+  DEFAULT_JITTER,
+  DEFAULT_SPEED,
+  DEFAULT_TEXT,
+  Typewriter,
+} from "@/registry/typewriter/typewriter"
+
+const DEFAULTS = {
+  text: DEFAULT_TEXT,
+  speed: DEFAULT_SPEED,
+  jitter: DEFAULT_JITTER,
+  columns: 0,
+  humanize: true,
+  ticks: true,
+  loop: true,
+  sound: false,
+}
+
+export function TypewriterDemo() {
+  const textId = useId()
+  const [take, setTake] = useState(0)
+  const { props, updateProp, resetProps, hasChanges } =
+    usePreviewProps(DEFAULTS)
+
+  return (
+    <>
+      <ComponentPreview title="Typewriter" stageClassName="min-h-0 p-0">
+        <div className="h-[46svh] min-h-80 w-full">
+          <Typewriter
+            key={take}
+            text={props.text}
+            speed={props.speed}
+            jitter={props.jitter}
+            columns={props.columns}
+            humanize={props.humanize}
+            ticks={props.ticks}
+            loop={props.loop}
+            sound={props.sound}
+            className="text-[15px] sm:text-lg"
+          />
+        </div>
+      </ComponentPreview>
+
+      <ComponentControls
+        hasChanges={hasChanges}
+        onReset={resetProps}
+        component="Typewriter"
+        snippetProps={{
+          text: props.text === DEFAULTS.text ? undefined : props.text,
+          speed: props.speed,
+          jitter: props.jitter,
+          columns: props.columns || undefined,
+          humanize: props.humanize ? undefined : false,
+          ticks: props.ticks ? undefined : false,
+          loop: props.loop ? undefined : false,
+          sound: props.sound ? true : undefined,
+        }}
+      >
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center justify-between gap-3">
+            <label htmlFor={textId} className="text-sm text-foreground/85">
+              Text
+            </label>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              onClick={() => setTake((n) => n + 1)}
+              className="-me-1.5 rounded-md text-muted-foreground"
+            >
+              <RiRestartLine data-icon="inline-start" />
+              Type again
+            </Button>
+          </div>
+          <textarea
+            id={textId}
+            value={props.text}
+            rows={3}
+            spellCheck={false}
+            onChange={(event) => updateProp("text", event.target.value)}
+            className="field-sizing-content min-h-16 w-full resize-none bg-transparent font-mono text-[12.5px] leading-relaxed text-foreground outline-none"
+          />
+        </div>
+        <ControlSlider
+          label="Speed"
+          value={props.speed}
+          min={4}
+          max={40}
+          step={1}
+          format={(v) => `${v} / s`}
+          onChange={(v) => updateProp("speed", v)}
+        />
+        <ControlSlider
+          label="Jitter"
+          value={props.jitter}
+          min={0}
+          max={1}
+          step={0.05}
+          onChange={(v) => updateProp("jitter", v)}
+        />
+        <ControlSlider
+          label="Columns"
+          value={props.columns}
+          min={0}
+          max={72}
+          step={1}
+          format={(v) => (v === 0 ? "fit" : String(v))}
+          onChange={(v) => updateProp("columns", v)}
+        />
+        <ControlSwitch
+          label="Humanize"
+          description="Uneven keys, rests after punctuation"
+          checked={props.humanize}
+          onChange={(v) => updateProp("humanize", v)}
+        />
+        <ControlSwitch
+          label="Ticks"
+          description="Scale marks along the rail"
+          checked={props.ticks}
+          onChange={(v) => updateProp("ticks", v)}
+        />
+        <ControlSwitch
+          label="Loop"
+          description="Feed the page out and type it again"
+          checked={props.loop}
+          onChange={(v) => updateProp("loop", v)}
+        />
+        <ControlSwitch
+          label="Sound"
+          description="Key clicks, bell, and return"
+          checked={props.sound}
+          onChange={(v) => updateProp("sound", v)}
+        />
+      </ComponentControls>
+    </>
+  )
+}
diff --git a/registry/typewriter/typewriter-vanilla.ts b/registry/typewriter/typewriter-vanilla.ts
new file mode 100644
index 0000000..e9d93e5
--- /dev/null
+++ b/registry/typewriter/typewriter-vanilla.ts
@@ -0,0 +1,1191 @@
+export const DEFAULT_TEXT =
+  "Dear reader,\nevery letter lands where the carriage stands, then the carriage steps aside for the next one. At the margin it rings, glides home, and drops a line.\n\nYours, 23rd"
+
+/** Characters per second. */
+export const DEFAULT_SPEED = 14
+/** Pause on the finished page before it feeds out and starts over, in ms. */
+export const DEFAULT_HOLD = 2600
+/** Wait before the first keystroke, in ms. */
+export const DEFAULT_START_DELAY = 600
+/** Per-letter baseline, tilt, and ink wobble (0–1). */
+export const DEFAULT_JITTER = 0.3
+
+/** Line pitch, in font sizes. Leaves the carriage room under each line. */
+const LEADING = 2.2
+/** Typeball radius, in font sizes. */
+const BALL_R = 1.1
+/** Baseline to the top of the typeball, in font sizes. */
+const BALL_GAP = 0.2
+/** Glyph size on the ball, as a share of its radius. */
+const BALL_GLYPH = 0.56
+/** Rail thickness, in font sizes. */
+const RAIL_H = 0.32
+/** Rail clamp width, in font sizes. */
+const CLAMP_W = 0.26
+/** Gap between the ball and each clamp, in font sizes. */
+const CLAMP_GAP = 0.14
+/** Bell rings this many cells before the right margin. */
+const BELL_CELLS = 6
+
+export type TypewriterOptions = {
+  /** What gets typed. `\n` starts a new line; long lines wrap at words. */
+  text?: string
+  /** Characters per second. Default `14`. */
+  speed?: number
+  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */
+  humanize?: boolean
+  /** Feed the page out and type it again after `hold`. Default `true`. */
+  loop?: boolean
+  /** Pause on the finished page before looping, in ms. Default `2600`. */
+  hold?: number
+  /** Wait before the first keystroke, in ms. Default `600`. */
+  startDelay?: number
+  /** Wrap width in characters. `0` fits the frame. Default `0`. */
+  columns?: number
+  /** Scale ticks along the rail. Default `true`. */
+  ticks?: boolean
+  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */
+  jitter?: number
+  /** Synthesized key clicks, bell, and return. Default `false`. */
+  sound?: boolean
+  /** Called each time the last character lands. */
+  onDone?: () => void
+}
+
+export type TypewriterInstance = {
+  setOptions: (options: Partial<TypewriterOptions>) => void
+  /** Clear the page and type from the first character. */
+  restart: () => void
+  destroy: () => void
+}
+
+export type TypewriterStroke =
+  | { kind: "char"; ch: string; line: number; col: number; src: number }
+  | { kind: "return"; line: number; from: number; src: number }
+
+/**
+ * The keystrokes that type `text` into `columns`-wide lines: characters
+ * with their cell, and carriage returns. Words wrap whole unless a word is
+ * wider than the line. `src` orders strokes against the source text, so a
+ * relayout can resume at the same point.
+ */
+export function layoutTypewriter(
+  text: string,
+  columns: number
+): TypewriterStroke[] {
+  const width = Math.max(1, Math.floor(columns))
+  const source = Array.from(text.replace(/\r\n?/g, "\n").replace(/\t/g, "  "))
+  const strokes: TypewriterStroke[] = []
+  let line = 0
+  let col = 0
+  /** Wrap returns wait for the character after them. */
+  let pendingWraps: TypewriterStroke[] = []
+
+  const feed = (src: number) => {
+    const stroke: TypewriterStroke = {
+      kind: "return",
+      line: line + 1,
+      from: col,
+      src,
+    }
+    strokes.push(stroke)
+    line += 1
+    col = 0
+    return stroke
+  }
+  const wrap = () => pendingWraps.push(feed(Infinity))
+  const type = (ch: string, src: number) => {
+    for (const stroke of pendingWraps) stroke.src = src - 0.5
+    pendingWraps = []
+    strokes.push({ kind: "char", ch, line, col, src })
+    col += 1
+  }
+
+  let i = 0
+  while (i < source.length) {
+    const ch = source[i]!
+    if (ch === "\n") {
+      for (const stroke of pendingWraps) stroke.src = i - 0.5
+      pendingWraps = []
+      feed(i)
+      i += 1
+      continue
+    }
+    if (/\s/.test(ch)) {
+      // Spaces past the margin fall off the page.
+      if (col < width) type(" ", i)
+      i += 1
+      continue
+    }
+    let end = i
+    while (end < source.length && !/\s/.test(source[end]!)) end += 1
+    const length = end - i
+    if (col > 0 && col + length > width) wrap()
+    for (let k = i; k < end; k++) {
+      if (col >= width) wrap()
+      type(source[k]!, k)
+    }
+    i = end
+  }
+  return strokes
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function numberOr(value: unknown, fallback: number, min: number, max: number) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback
+  return clamp(value, min, max)
+}
+
+/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */
+function hash(n: number) {
+  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1
+  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)
+  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)
+  return ((x ^ (x >>> 16)) >>> 0) / 4294967296
+}
+
+const SVG_NS = "http://www.w3.org/2000/svg"
+
+function svgEl<K extends keyof SVGElementTagNameMap>(
+  tag: K,
+  attrs: Record<string, string | number> = {}
+) {
+  const node = document.createElementNS(SVG_NS, tag)
+  for (const [key, value] of Object.entries(attrs)) {
+    node.setAttribute(key, String(value))
+  }
+  return node
+}
+
+function div(style: Partial<CSSStyleDeclaration>) {
+  const node = document.createElement("div")
+  Object.assign(node.style, style)
+  return node
+}
+
+type Sound = {
+  key: (space: boolean) => void
+  bell: () => void
+  carriage: (ms: number) => void
+  close: () => void
+}
+
+/** Key clicks, the margin bell, and the return ratchet, all synthesized. */
+function createSound(): Sound | null {
+  const Ctx =
+    window.AudioContext ??
+    (window as unknown as { webkitAudioContext?: typeof AudioContext })
+      .webkitAudioContext
+  if (!Ctx) return null
+  let audio: AudioContext | null = null
+  let out: GainNode | null = null
+  let noise: AudioBuffer | null = null
+
+  const ready = () => {
+    if (!audio) {
+      audio = new Ctx()
+      out = audio.createGain()
+      out.gain.value = 0.55
+      out.connect(audio.destination)
+      noise = audio.createBuffer(
+        1,
+        Math.floor(audio.sampleRate * 0.4),
+        audio.sampleRate
+      )
+      const data = noise.getChannelData(0)
+      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1
+    }
+    if (audio.state === "suspended") void audio.resume().catch(() => {})
+    return audio.state === "running" ? audio : null
+  }
+
+  const burst = (
+    a: AudioContext,
+    at: number,
+    freq: number,
+    q: number,
+    peak: number,
+    decay: number
+  ) => {
+    const src = a.createBufferSource()
+    src.buffer = noise
+    const band = a.createBiquadFilter()
+    band.type = "bandpass"
+    band.frequency.value = freq
+    band.Q.value = q
+    const gain = a.createGain()
+    gain.gain.setValueAtTime(0.0001, at)
+    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)
+    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)
+    src.connect(band).connect(gain).connect(out!)
+    src.start(at, Math.random() * 0.2)
+    src.stop(at + decay + 0.02)
+  }
+
+  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {
+    const osc = a.createOscillator()
+    osc.frequency.setValueAtTime(freq, at)
+    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)
+    const gain = a.createGain()
+    gain.gain.setValueAtTime(0.0001, at)
+    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)
+    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)
+    osc.connect(gain).connect(out!)
+    osc.start(at)
+    osc.stop(at + 0.08)
+  }
+
+  return {
+    key(space) {
+      const a = ready()
+      if (!a) return
+      const at = a.currentTime
+      if (space) {
+        burst(a, at, 900, 0.9, 0.22, 0.05)
+        thump(a, at, 110, 0.3)
+      } else {
+        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)
+        thump(a, at, 150 + Math.random() * 30, 0.2)
+      }
+    },
+    bell() {
+      const a = ready()
+      if (!a) return
+      const at = a.currentTime
+      for (const [freq, peak] of [
+        [2093, 0.16],
+        [5776, 0.05],
+      ] as const) {
+        const osc = a.createOscillator()
+        osc.frequency.value = freq
+        const gain = a.createGain()
+        gain.gain.setValueAtTime(0.0001, at)
+        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)
+        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)
+        osc.connect(gain).connect(out!)
+        osc.start(at)
+        osc.stop(at + 1.2)
+      }
+    },
+    carriage(ms) {
+      const a = ready()
+      if (!a) return
+      const at = a.currentTime
+      const seconds = ms / 1000
+      // Ratchet clicks as the line feeds, then the glide home.
+      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)
+      const src = a.createBufferSource()
+      src.buffer = noise
+      src.loop = true
+      const low = a.createBiquadFilter()
+      low.type = "bandpass"
+      low.Q.value = 0.8
+      low.frequency.setValueAtTime(700, at)
+      low.frequency.linearRampToValueAtTime(1400, at + seconds)
+      const gain = a.createGain()
+      gain.gain.setValueAtTime(0.0001, at)
+      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)
+      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)
+      src.connect(low).connect(gain).connect(out!)
+      src.start(at)
+      src.stop(at + seconds + 0.02)
+      thump(a, at + seconds, 120, 0.28)
+    },
+    close() {
+      void audio?.close().catch(() => {})
+      audio = null
+    },
+  }
+}
+
+const TAU = Math.PI * 2
+
+/** The ball's glyph rows, top to bottom — the keyboard's three letter rows. */
+const BALL_FACES = ["qwertyuiop", "asdfghjkl;", "zxcvbnm,.?"]
+/** Latitude of each row on the ball, in radians. */
+const BALL_ROWS = [0.66, 0, -0.66]
+/** Glyphs sit a little inside the silhouette, so the limb stays clean. */
+const BALL_INSET = 0.8
+/** Idle spin, in radians per second. */
+const BALL_DRIFT = 0.55
+
+type Tween = {
+  from: number
+  to: number
+  start: number
+  ms: number
+  ease: (t: number) => number
+}
+
+const easeOut = (t: number) => 1 - (1 - t) ** 3
+const easeInOut = (t: number) =>
+  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2
+
+/** Nearest turn of `angle` to `from`, so the ball spins the short way. */
+function nearest(from: number, angle: number) {
+  return from + ((((angle - from) % TAU) + TAU * 1.5) % TAU) - Math.PI
+}
+
+type Typeball = {
+  el: SVGSVGElement
+  /**
+   * Size the ball; `radius` and the glyph size are in px. `font` is the
+   * page's computed style — mask content doesn't inherit it everywhere.
+   */
+  layout: (radius: number, glyph: number, font: CSSStyleDeclaration) => void
+  /** Spin and tilt until `ch` faces the paper. */
+  select: (ch: string, ms: number) => void
+  /** Spin whole turns, for the glide home. */
+  whirl: (turns: number, ms: number) => void
+  /** Turn slowly while nothing is being typed. */
+  drift: (on: boolean) => void
+  destroy: () => void
+}
+
+let ballIds = 0
+
+/**
+ * The type element: a sphere wearing the keyboard in three rows. It spins
+ * about its axis and tilts to bring a glyph to the front — the letters are
+ * cut through the ink, so the page shows through them.
+ */
+function createTypeball(): Typeball {
+  const id = `typewriter-ball-${++ballIds}`
+  const el = svgEl("svg", { overflow: "visible" })
+  el.style.position = "absolute"
+  el.style.overflow = "visible"
+  const defs = svgEl("defs")
+  const shade = svgEl("radialGradient", {
+    id: `${id}-shade`,
+    cx: 0.36,
+    cy: 0.3,
+    r: 0.8,
+  })
+  for (const [offset, alpha] of [
+    [0, 0.5],
+    [0.5, 0.86],
+    [1, 1],
+  ] as const) {
+    shade.append(
+      svgEl("stop", {
+        offset,
+        "stop-color": "currentColor",
+        "stop-opacity": alpha,
+      })
+    )
+  }
+  const mask = svgEl("mask", { id: `${id}-cut`, maskUnits: "userSpaceOnUse" })
+  const paper = svgEl("rect", { fill: "#fff" })
+  const letters = svgEl("g", {
+    fill: "#000",
+    "text-anchor": "middle",
+    "dominant-baseline": "central",
+  })
+  mask.append(paper, letters)
+  defs.append(shade, mask)
+  const sphere = svgEl("circle", {
+    fill: `url(#${id}-shade)`,
+    mask: `url(#${id}-cut)`,
+  })
+  el.append(defs, sphere)
+
+  const cols = BALL_FACES[0]!.length
+  const slots = BALL_FACES.flatMap((face, row) =>
+    Array.from(face, (glyph, col) => {
+      const node = svgEl("text")
+      node.textContent = glyph
+      letters.append(node)
+      return { row, col, glyph, node }
+    })
+  )
+
+  let radius = 16
+  let lon = 0
+  let tilt = 0
+  let lonTween: Tween | null = null
+  let tiltTween: Tween | null = null
+  let drifting = false
+  let raf = 0
+  let last = 0
+  let swapped: (typeof slots)[number] | null = null
+
+  const render = () => {
+    const r = radius * BALL_INSET
+    const sin = Math.sin(tilt)
+    const cos = Math.cos(tilt)
+    for (const slot of slots) {
+      const lat = BALL_ROWS[slot.row]!
+      const theta = (slot.col / cols) * TAU - lon
+      const x = Math.cos(lat) * Math.sin(theta)
+      const y0 = Math.sin(lat)
+      const z0 = Math.cos(lat) * Math.cos(theta)
+      const y = y0 * cos - z0 * sin
+      const z = y0 * sin + z0 * cos
+      const seen = clamp((z - 0.12) / 0.4, 0, 1)
+      if (seen <= 0) {
+        slot.node.setAttribute("fill-opacity", "0")
+        continue
+      }
+      const sx = Math.sqrt(Math.max(0.02, 1 - x * x))
+      const sy = Math.sqrt(Math.max(0.02, 1 - y * y))
+      slot.node.setAttribute("fill-opacity", (seen * 0.86).toFixed(3))
+      slot.node.setAttribute(
+        "transform",
+        `translate(${(x * r).toFixed(2)} ${(-y * r).toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`
+      )
+    }
+  }
+
+  const valueOf = (tween: Tween, now: number) => {
+    const t = clamp((now - tween.start) / Math.max(1, tween.ms), 0, 1)
+    return tween.from + (tween.to - tween.from) * tween.ease(t)
+  }
+
+  const frame = (now: number) => {
+    raf = 0
+    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
+    last = now
+    if (lonTween) {
+      lon = valueOf(lonTween, now)
+      if (now - lonTween.start >= lonTween.ms) lonTween = null
+    } else if (drifting) {
+      lon += BALL_DRIFT * dt
+    }
+    if (tiltTween) {
+      tilt = valueOf(tiltTween, now)
+      if (now - tiltTween.start >= tiltTween.ms) tiltTween = null
+    }
+    render()
+    if (lonTween || tiltTween || drifting) raf = requestAnimationFrame(frame)
+  }
+
+  const wake = () => {
+    if (raf) return
+    last = performance.now()
+    raf = requestAnimationFrame(frame)
+  }
+
+  const tweenTo = (current: number, to: number, ms: number, ease = easeOut) => {
+    const now = performance.now()
+    return { from: current, to, start: now, ms, ease }
+  }
+
+  const settle = () => {
+    const now = performance.now()
+    if (lonTween) lon = valueOf(lonTween, now)
+    if (tiltTween) tilt = valueOf(tiltTween, now)
+  }
+
+  return {
+    el,
+    layout(nextRadius, glyph, font) {
+      radius = nextRadius
+      const box = radius + 2
+      el.setAttribute("width", String(box * 2))
+      el.setAttribute("height", String(box * 2))
+      el.setAttribute("viewBox", `${-box} ${-box} ${box * 2} ${box * 2}`)
+      sphere.setAttribute("r", String(radius))
+      for (const [key, value] of Object.entries({
+        x: -box,
+        y: -box,
+        width: box * 2,
+        height: box * 2,
+      })) {
+        mask.setAttribute(key, String(value))
+        paper.setAttribute(key, String(value))
+      }
+      letters.setAttribute("font-size", glyph.toFixed(2))
+      Object.assign(letters.style, {
+        fontFamily: font.fontFamily,
+        fontStretch: font.fontStretch,
+        fontWeight: font.fontWeight,
+        fontVariationSettings: font.fontVariationSettings,
+      })
+      render()
+    },
+    select(ch, ms) {
+      const key = ch.toLowerCase()
+      let slot = slots.find((s) => s.glyph === key)
+      if (!slot) {
+        const code = ch.codePointAt(0) ?? 0
+        slot = slots[(code * 7) % slots.length]!
+      }
+      // Capitals and symbols borrow a slot's face until the next letter.
+      if (swapped && swapped !== slot) swapped.node.textContent = swapped.glyph
+      swapped = ch === slot.glyph ? null : slot
+      slot.node.textContent = ch
+      settle()
+      const target = nearest(lon, (slot.col / cols) * TAU)
+      lonTween = tweenTo(lon, target, ms)
+      tiltTween = tweenTo(tilt, BALL_ROWS[slot.row]!, ms)
+      wake()
+    },
+    whirl(turns, ms) {
+      settle()
+      lonTween = tweenTo(lon, lon + turns * TAU, ms, easeInOut)
+      tiltTween = tweenTo(tilt, 0, ms, easeInOut)
+      wake()
+    },
+    drift(on) {
+      drifting = on
+      if (on) wake()
+    },
+    destroy() {
+      cancelAnimationFrame(raf)
+      raf = 0
+    },
+  }
+}
+
+/**
+ * A typewriter on the page. A rail spans the frame and a typeball rides it:
+ * for every letter the ball spins that glyph to the front, strikes, and
+ * steps one cell right. At the end of a line it whirls home and drops to
+ * the next, and when the page is full the paper feeds up. Idle when
+ * finished, off-screen, or under `prefers-reduced-motion` (which prints the
+ * whole page at once).
+ */
+export function createTypewriter(
+  root: HTMLElement,
+  initial: TypewriterOptions = {}
+): TypewriterInstance {
+  let options: TypewriterOptions = { ...initial }
+  const textOf = () => options.text ?? DEFAULT_TEXT
+  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 120)
+  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)
+  const startOf = () =>
+    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)
+  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)
+
+  // Screen readers get the whole text once; the machine is decoration.
+  const spoken = document.createElement("span")
+  Object.assign(spoken.style, {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    whiteSpace: "nowrap",
+    border: "0",
+  })
+
+  const stage = div({
+    position: "absolute",
+    inset: "0",
+    overflow: "hidden",
+    borderRadius: "inherit",
+    pointerEvents: "none",
+  })
+  stage.setAttribute("aria-hidden", "true")
+  const viewport = div({ position: "absolute", inset: "0" })
+  const page = div({
+    position: "absolute",
+    left: "0",
+    top: "0",
+    right: "0",
+    whiteSpace: "pre",
+    willChange: "transform",
+  })
+  const carriage = div({
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: "100%",
+    willChange: "transform",
+  })
+  const rail = svgEl("svg", { overflow: "visible" })
+  rail.style.position = "absolute"
+  rail.style.left = "0"
+  rail.style.overflow = "visible"
+  const head = div({
+    position: "absolute",
+    left: "0",
+    top: "0",
+    willChange: "transform",
+  })
+  const clamps = svgEl("svg", { overflow: "visible" })
+  clamps.style.position = "absolute"
+  clamps.style.overflow = "visible"
+  const ball = createTypeball()
+
+  head.append(clamps, ball.el)
+  carriage.append(rail, head)
+  viewport.append(page)
+  stage.append(viewport, carriage)
+  root.append(spoken, stage)
+
+  // Font metrics and frame, refreshed by `measure`.
+  const m = {
+    fs: 16,
+    cw: 9.6,
+    lh: 35,
+    base: 22,
+    width: 0,
+    height: 0,
+    padT: 0,
+    padB: 0,
+    margin: 0,
+    columns: 1,
+    radius: 16,
+    /** Baseline to the ball's centre, which is also the rail's. */
+    axis: 20,
+    /** Cell centre to the outer edge of a rail clamp. */
+    half: 24,
+  }
+
+  let strokes: TypewriterStroke[] = []
+  /** Strokes on the page. */
+  let pos = 0
+  let cursor = { line: 0, col: 0 }
+  let scroll = 0
+  let lines: HTMLDivElement[] = []
+  let phase: "waiting" | "typing" | "done" | "feeding" = "waiting"
+  let rang = false
+  let destroyed = false
+  let reduce = false
+  let onScreen = true
+  let sound: Sound | null = null
+
+  // One pending step, paused while the machine can't be seen.
+  let pending: (() => void) | null = null
+  let timer = 0
+  let remaining = 0
+  let dueAt = 0
+  const active = () =>
+    !destroyed && onScreen && !reduce && document.visibilityState !== "hidden"
+  const arm = () => {
+    dueAt = performance.now() + remaining
+    timer = window.setTimeout(() => {
+      timer = 0
+      const run = pending
+      pending = null
+      run?.()
+    }, remaining)
+  }
+  const schedule = (run: () => void, ms: number) => {
+    window.clearTimeout(timer)
+    timer = 0
+    pending = run
+    remaining = Math.max(0, ms)
+    if (active()) arm()
+  }
+  const cancel = () => {
+    window.clearTimeout(timer)
+    timer = 0
+    pending = null
+  }
+  /** The ball turns idly between pages, but only while anyone can see it. */
+  const idle = () =>
+    ball.drift((phase === "waiting" || phase === "done") && active())
+  const sync = () => {
+    if (active()) {
+      if (pending && !timer) arm()
+    } else if (timer) {
+      window.clearTimeout(timer)
+      timer = 0
+      remaining = Math.max(0, dueAt - performance.now())
+    }
+    idle()
+  }
+  const setPhase = (next: typeof phase) => {
+    phase = next
+    idle()
+  }
+
+  const soundOn = () => {
+    if (!options.sound) return null
+    sound ??= createSound()
+    return sound
+  }
+
+  const cellX = (col: number) => m.margin + col * m.cw
+  const lineTop = (line: number) => m.padT + line * m.lh
+  /** How far the paper must feed up to keep the carriage on `line` in frame. */
+  const scrollFor = (line: number) => {
+    const floor = m.height - Math.min(m.padB, m.fs * 0.6)
+    return Math.max(0, lineTop(line) + m.base + m.axis + m.radius - floor)
+  }
+
+  const setTransition = (
+    el: HTMLElement,
+    ms: number,
+    ease: string,
+    delay = 0
+  ) => {
+    el.style.transition =
+      ms > 0 ? `transform ${ms}ms ${ease} ${Math.round(delay)}ms` : "none"
+  }
+  const placeHead = (col: number, ms = 0, ease = "linear", delay = 0) => {
+    setTransition(head, ms, ease, delay)
+    head.style.transform = `translate3d(${cellX(col)}px,0,0)`
+  }
+  const placeCarriage = (line: number, ms = 0, ease = "linear") => {
+    setTransition(carriage, ms, ease)
+    const y = Math.round(lineTop(line) - scroll + m.base)
+    carriage.style.transform = `translate3d(0,${y}px,0)`
+  }
+  const placePage = (ms = 0, ease = "linear") => {
+    page.style.transition =
+      ms > 0 ? `transform ${ms}ms ${ease}, opacity ${ms}ms ${ease}` : "none"
+    page.style.transform = `translate3d(0,${-scroll}px,0)`
+    viewport.style.maskImage = viewport.style.webkitMaskImage =
+      scroll > 0
+        ? `linear-gradient(to bottom, transparent 0, #000 ${Math.max(m.padT, m.lh * 0.8)}px)`
+        : ""
+  }
+
+  const lineEl = (index: number) => {
+    while (lines.length <= index) {
+      const el = div({
+        position: "absolute",
+        left: "0",
+        right: "0",
+        top: `${lineTop(lines.length)}px`,
+        height: `${m.lh}px`,
+      })
+      page.append(el)
+      lines.push(el)
+    }
+    return lines[index]!
+  }
+
+  const letter = (stroke: Extract<TypewriterStroke, { kind: "char" }>) => {
+    const jitter = jitterOf()
+    const n = Math.floor(stroke.src) * 4
+    const el = document.createElement("span")
+    el.textContent = stroke.ch
+    Object.assign(el.style, {
+      position: "absolute",
+      top: "0",
+      left: `${cellX(stroke.col)}px`,
+      width: `${m.cw}px`,
+      height: `${m.lh}px`,
+      lineHeight: `${m.lh}px`,
+      textAlign: "center",
+    })
+    if (jitter > 0) {
+      const dx = (hash(n) - 0.5) * jitter * 0.07 * m.fs
+      const dy = (hash(n + 1) - 0.5) * jitter * 0.1 * m.fs
+      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2
+      el.style.transform = `translate(${dx.toFixed(2)}px,${dy.toFixed(2)}px) rotate(${tilt.toFixed(2)}deg)`
+      el.style.opacity = (1 - hash(n + 3) * jitter * 0.42).toFixed(3)
+    }
+    lineEl(stroke.line).append(el)
+    return el
+  }
+
+  const after = (stroke: TypewriterStroke | undefined) => {
+    if (!stroke) return { line: 0, col: 0 }
+    return stroke.kind === "char"
+      ? { line: stroke.line, col: stroke.col + 1 }
+      : { line: stroke.line, col: 0 }
+  }
+
+  /** Paint the first `pos` strokes and park the carriage, without motion. */
+  const paint = () => {
+    page.replaceChildren()
+    lines = []
+    for (let i = 0; i < pos; i++) {
+      const stroke = strokes[i]!
+      if (stroke.kind === "char" && stroke.ch !== " ") letter(stroke)
+    }
+    cursor = after(strokes[pos - 1])
+    scroll = scrollFor(cursor.line)
+    placePage()
+    placeCarriage(cursor.line)
+    placeHead(cursor.col)
+    rang = cursor.col >= m.columns - BELL_CELLS
+  }
+
+  const drawRail = () => {
+    const { width, fs, cw, columns } = m
+    const h = Math.max(3, Math.round(RAIL_H * fs))
+    rail.setAttribute("width", String(width))
+    rail.setAttribute("height", String(h + 1))
+    rail.setAttribute("viewBox", `0 0 ${width} ${h + 1}`)
+    rail.style.top = `${Math.round(m.axis - h / 2)}px`
+    rail.replaceChildren()
+    const g = svgEl("g", { fill: "none", stroke: "currentColor" })
+    g.append(
+      svgEl("path", {
+        d: `M0 0.5H${width}M0 ${h + 0.5}H${width}`,
+        "stroke-opacity": 0.3,
+        "stroke-width": 1,
+      })
+    )
+    if (options.ticks ?? true) {
+      let minor = ""
+      let major = ""
+      for (let c = 0; c <= columns; c++) {
+        const x = Math.round(m.margin + c * cw + cw / 2) + 0.5
+        if (c % 5 === 0) major += `M${x} 1V${c % 10 === 0 ? h : h * 0.62}`
+        else minor += `M${x} 1V${h * 0.36}`
+      }
+      g.append(
+        svgEl("path", { d: minor, "stroke-opacity": 0.22, "stroke-width": 1 }),
+        svgEl("path", { d: major, "stroke-opacity": 0.42, "stroke-width": 1 })
+      )
+    }
+    // Margin stops: where the carriage returns to, and where the bell rings.
+    const stopW = Math.max(2, Math.round(fs * 0.14))
+    const stopH = h + Math.round(fs * 0.32)
+    for (const x of [m.margin, m.margin + columns * cw]) {
+      g.append(
+        svgEl("rect", {
+          x: Math.round(x - stopW / 2),
+          y: Math.round((h - stopH) / 2) + 0.5,
+          width: stopW,
+          height: stopH,
+          rx: stopW / 2,
+          fill: "currentColor",
+          "fill-opacity": 0.55,
+          stroke: "none",
+        })
+      )
+    }
+    rail.append(g)
+  }
+
+  /** The ball, and the two clamps that hold it on the rail. */
+  const drawHead = () => {
+    const { fs, cw, radius, axis, half } = m
+    const box = radius + 2
+    ball.layout(radius, radius * BALL_GLYPH, getComputedStyle(root))
+    ball.el.style.left = `${cw / 2 - box}px`
+    ball.el.style.top = `${axis - box}px`
+
+    const railH = Math.max(3, Math.round(RAIL_H * fs))
+    const w = Math.max(3, Math.round(CLAMP_W * fs))
+    const h = railH + Math.round(fs * 0.42)
+    const gap = Math.round(CLAMP_GAP * fs)
+    clamps.setAttribute("width", String(half * 2))
+    clamps.setAttribute("height", String(h))
+    clamps.setAttribute("viewBox", `${-half} ${-h / 2} ${half * 2} ${h}`)
+    clamps.style.left = `${cw / 2 - half}px`
+    clamps.style.top = `${axis - h / 2}px`
+    clamps.replaceChildren()
+    for (const side of [-1, 1]) {
+      const inner = radius + gap
+      const x = side < 0 ? -inner - w : inner
+      clamps.append(
+        // The collar that grips the rail…
+        svgEl("rect", {
+          x,
+          y: -h / 2,
+          width: w,
+          height: h,
+          rx: Math.min(w / 2, fs * 0.12),
+          fill: "currentColor",
+        }),
+        // …and the axle stub it holds the ball by.
+        svgEl("rect", {
+          x: side < 0 ? -inner : radius - 1,
+          y: -Math.max(1, railH * 0.25),
+          width: gap + 1,
+          height: Math.max(2, railH * 0.5),
+          fill: "currentColor",
+        })
+      )
+    }
+  }
+
+  const measure = () => {
+    const cs = getComputedStyle(root)
+    const fs = parseFloat(cs.fontSize) || 16
+    const probe = document.createElement("span")
+    probe.textContent = "0000000000"
+    Object.assign(probe.style, {
+      position: "absolute",
+      visibility: "hidden",
+      whiteSpace: "pre",
+    })
+    const marker = document.createElement("span")
+    Object.assign(marker.style, {
+      display: "inline-block",
+      width: "0",
+      height: "0",
+      verticalAlign: "baseline",
+    })
+    const lh = Math.round(fs * LEADING)
+    const row = div({
+      position: "absolute",
+      visibility: "hidden",
+      lineHeight: `${lh}px`,
+      height: `${lh}px`,
+    })
+    row.append("x", marker)
+    stage.append(probe, row)
+    const cw = probe.getBoundingClientRect().width / 10 || fs * 0.6
+    const base = marker.offsetTop
+    probe.remove()
+    row.remove()
+
+    const width = root.clientWidth
+    const height = root.clientHeight
+    const padL = parseFloat(cs.paddingLeft) || 0
+    const padR = parseFloat(cs.paddingRight) || 0
+    const radius = Math.round(fs * BALL_R)
+    const half = Math.ceil(
+      radius + Math.round(CLAMP_GAP * fs) + Math.round(CLAMP_W * fs)
+    )
+    const reach = half - cw / 2
+    const edge = fs * 0.5
+    // The carriage never hangs off the frame, even at the margins.
+    const margin = Math.max(padL, Math.ceil(reach + edge))
+    const fit = Math.floor(
+      Math.min(width - padR - margin, width - edge - reach - cw - margin) / cw
+    )
+    const wanted = Math.floor(numberOr(options.columns, 0, 0, 1000))
+    const columns = Math.max(1, wanted > 0 ? Math.min(wanted, fit) : fit)
+
+    const changed =
+      fs !== m.fs ||
+      cw !== m.cw ||
+      lh !== m.lh ||
+      columns !== m.columns ||
+      width !== m.width
+    Object.assign(m, {
+      fs,
+      cw,
+      lh,
+      base,
+      width,
+      height,
+      padT: parseFloat(cs.paddingTop) || 0,
+      padB: parseFloat(cs.paddingBottom) || 0,
+      margin,
+      columns,
+      radius,
+      axis: Math.round(BALL_GAP * fs + radius),
+      half,
+    })
+    return changed
+  }
+
+  /** Lay the text out again for the current frame, keeping the place. */
+  const relayout = () => {
+    const at = strokes[pos - 1]?.src ?? -1
+    strokes = layoutTypewriter(textOf(), m.columns)
+    pos = phase === "done" ? strokes.length : 0
+    if (phase !== "done") {
+      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1
+    }
+    drawRail()
+    drawHead()
+    paint()
+  }
+
+  const pace = (ch: string) => {
+    const base = 1000 / speedOf()
+    if (!(options.humanize ?? true)) return base
+    let factor = 0.55 + Math.random() * 0.9
+    if (ch === " ") factor *= 1.15
+    else if (/[,;:]/.test(ch)) factor *= 2.4
+    else if (/[.!?]/.test(ch)) factor *= 3.4
+    if (Math.random() < 0.04) factor *= 2.6
+    return base * factor
+  }
+
+  /** Spin the glyph round, strike, then step the carriage a cell right. */
+  const strike = (stroke: Extract<TypewriterStroke, { kind: "char" }>) => {
+    const base = 1000 / speedOf()
+    const spin = stroke.ch === " " ? 0 : clamp(base * 0.4, 16, 70)
+    const step = Math.min(90, base * 0.7)
+    if (stroke.ch !== " ") {
+      ball.select(stroke.ch, spin)
+      letter(stroke).animate([{ opacity: 0 }, {}], {
+        duration: Math.min(70, step),
+        delay: spin,
+        easing: "ease-out",
+        fill: "backwards",
+      })
+      ball.el.animate(
+        [
+          { transform: "translateY(0)" },
+          { transform: `translateY(${(-m.fs * 0.22).toFixed(2)}px)` },
+          { transform: "translateY(0)" },
+        ],
+        {
+          duration: Math.min(110, base * 0.9),
+          delay: spin * 0.55,
+          easing: "cubic-bezier(.3,.7,.4,1)",
+        }
+      )
+    }
+    cursor = { line: stroke.line, col: stroke.col + 1 }
+    placeHead(cursor.col, step, "cubic-bezier(.2,.8,.2,1)", spin)
+    const audio = soundOn()
+    audio?.key(stroke.ch === " ")
+    if (
+      !rang &&
+      cursor.col >= m.columns - BELL_CELLS &&
+      m.columns > BELL_CELLS * 2
+    ) {
+      rang = true
+      audio?.bell()
+    }
+  }
+
+  /** Whirl home along the rail and drop a line. */
+  const carriageReturn = (
+    stroke: Extract<TypewriterStroke, { kind: "return" }>
+  ) => {
+    const glide = clamp(200 + stroke.from * 7, 240, 620)
+    const drop = 260
+    cursor = { line: stroke.line, col: 0 }
+    rang = false
+    const next = Math.max(scroll, scrollFor(cursor.line))
+    if (next !== scroll) {
+      scroll = next
+      placePage(drop, "cubic-bezier(.3,.7,.2,1)")
+    }
+    placeCarriage(cursor.line, drop, "cubic-bezier(.3,.7,.2,1)")
+    placeHead(0, glide, "cubic-bezier(.65,0,.25,1)")
+    if (stroke.from > 0) {
+      ball.whirl(-(0.5 + stroke.from / Math.max(1, m.columns)), glide)
+    }
+    soundOn()?.carriage(glide)
+    return glide
+  }
+
+  const finish = () => {
+    setPhase("done")
+    options.onDone?.()
+    if (options.loop ?? true) schedule(feedOut, holdOf())
+  }
+
+  const step = () => {
+    if (pos >= strokes.length) {
+      finish()
+      return
+    }
+    if (phase !== "typing") setPhase("typing")
+    const stroke = strokes[pos++]!
+    if (stroke.kind === "char") {
+      strike(stroke)
+      schedule(step, pace(stroke.ch))
+    } else {
+      const glide = carriageReturn(stroke)
+      schedule(step, glide + pace(" ") * 0.8)
+    }
+  }
+
+  /** Pull the finished sheet up and out, bring the carriage home, go again. */
+  const feedOut = () => {
+    setPhase("feeding")
+    const ms = 820
+    const pull = "cubic-bezier(.55,0,.75,.2)"
+    const lift = lineTop(cursor.line + 1) + m.lh
+    page.style.transition = `transform ${ms}ms ${pull}, opacity ${ms}ms ease-in`
+    page.style.transform = `translate3d(0,${-scroll - lift}px,0)`
+    page.style.opacity = "0"
+    scroll = 0
+    // Same curve as the sheet, which travels further, so the carriage rises
+    // behind the last line instead of through it.
+    placeCarriage(0, ms, pull)
+    placeHead(0, ms, "cubic-bezier(.65,0,.35,1)")
+    if (cursor.col > 0) ball.whirl(-1, ms)
+    schedule(() => {
+      pos = 0
+      page.style.opacity = ""
+      paint()
+      setPhase("waiting")
+      schedule(step, startOf() * 0.6)
+    }, ms + 60)
+  }
+
+  const start = () => {
+    cancel()
+    page.style.opacity = ""
+    strokes = layoutTypewriter(textOf(), m.columns)
+    spoken.textContent = textOf()
+    if (reduce) {
+      pos = strokes.length
+      setPhase("done")
+      paint()
+      return
+    }
+    pos = 0
+    setPhase("waiting")
+    paint()
+    schedule(step, startOf())
+  }
+
+  measure()
+  drawRail()
+  drawHead()
+
+  const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
+  reduce = mqReduce.matches
+  const onReduce = () => {
+    reduce = mqReduce.matches
+    start()
+  }
+  mqReduce.addEventListener("change", onReduce)
+
+  start()
+
+  const onResize = () => {
+    if (measure()) relayout()
+    else {
+      scroll = Math.max(scroll, scrollFor(cursor.line))
+      placePage()
+      placeCarriage(cursor.line)
+    }
+  }
+  const ro = new ResizeObserver(onResize)
+  ro.observe(root)
+  // Webfonts can land after mount and change the cell width.
+  void document.fonts?.ready.then(() => {
+    if (!destroyed) onResize()
+  })
+
+  const io = new IntersectionObserver(([entry]) => {
+    onScreen = entry?.isIntersecting ?? true
+    sync()
+  })
+  io.observe(root)
+  const onVisibility = () => sync()
+  document.addEventListener("visibilitychange", onVisibility)
+
+  return {
+    setOptions(next) {
+      const prev = options
+      options = { ...options, ...next }
+      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {
+        start()
+        return
+      }
+      if (options.columns !== prev.columns) {
+        measure()
+        relayout()
+      } else if (options.jitter !== prev.jitter) {
+        paint()
+      }
+      if (options.ticks !== prev.ticks) drawRail()
+      const loop = options.loop ?? true
+      if (loop !== (prev.loop ?? true) && phase === "done") {
+        if (loop) schedule(feedOut, holdOf())
+        else cancel()
+      }
+    },
+    restart: start,
+    destroy() {
+      destroyed = true
+      cancel()
+      ball.destroy()
+      ro.disconnect()
+      io.disconnect()
+      mqReduce.removeEventListener("change", onReduce)
+      document.removeEventListener("visibilitychange", onVisibility)
+      sound?.close()
+      spoken.remove()
+      stage.remove()
+    },
+  }
+}
diff --git a/registry/typewriter/typewriter.svelte b/registry/typewriter/typewriter.svelte
new file mode 100644
index 0000000..4d487d0
--- /dev/null
+++ b/registry/typewriter/typewriter.svelte
@@ -0,0 +1,88 @@
+<script module lang="ts">
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte"
+  import {
+    createTypewriter,
+    DEFAULT_HOLD,
+    DEFAULT_JITTER,
+    DEFAULT_SPEED,
+    DEFAULT_START_DELAY,
+    DEFAULT_TEXT,
+    type TypewriterInstance,
+    type TypewriterOptions,
+  } from "./typewriter-vanilla"
+
+  function cn(...parts: Array<string | false | null | undefined>) {
+    return parts.filter(Boolean).join(" ")
+  }
+
+  interface Props extends TypewriterOptions {
+    class?: string
+  }
+
+  let {
+    class: className = "",
+    text = DEFAULT_TEXT,
+    speed = DEFAULT_SPEED,
+    humanize = true,
+    loop = true,
+    hold = DEFAULT_HOLD,
+    startDelay = DEFAULT_START_DELAY,
+    columns = 0,
+    ticks = true,
+    jitter = DEFAULT_JITTER,
+    sound = false,
+    onDone,
+  }: Props = $props()
+
+  let root: HTMLDivElement | undefined = $state()
+  let instance: TypewriterInstance | null = null
+
+  onMount(() => {
+    if (!root) return
+    instance = createTypewriter(root, {
+      text,
+      speed,
+      humanize,
+      loop,
+      hold,
+      startDelay,
+      columns,
+      ticks,
+      jitter,
+      sound,
+      onDone,
+    })
+    return () => {
+      instance?.destroy()
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    instance?.setOptions({
+      text,
+      speed,
+      humanize,
+      loop,
+      hold,
+      startDelay,
+      columns,
+      ticks,
+      jitter,
+      sound,
+      onDone,
+    })
+  })
+</script>
+
+<div
+  bind:this={root}
+  data-slot="typewriter"
+  class={cn(
+    "relative size-full overflow-hidden bg-background p-6 font-mono text-foreground",
+    className
+  )}
+></div>
diff --git a/registry/typewriter/typewriter.tsx b/registry/typewriter/typewriter.tsx
new file mode 100644
index 0000000..cf24e7e
--- /dev/null
+++ b/registry/typewriter/typewriter.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import { cn } from "@/lib/utils"
+
+import {
+  createTypewriter,
+  DEFAULT_HOLD,
+  DEFAULT_JITTER,
+  DEFAULT_SPEED,
+  DEFAULT_START_DELAY,
+  DEFAULT_TEXT,
+  type TypewriterInstance,
+  type TypewriterOptions,
+} from "./typewriter-vanilla"
+
+export {
+  DEFAULT_HOLD,
+  DEFAULT_JITTER,
+  DEFAULT_SPEED,
+  DEFAULT_START_DELAY,
+  DEFAULT_TEXT,
+  layoutTypewriter,
+} from "./typewriter-vanilla"
+export type {
+  TypewriterInstance,
+  TypewriterOptions,
+  TypewriterStroke,
+} from "./typewriter-vanilla"
+
+export type TypewriterProps = TypewriterOptions & {
+  className?: string
+}
+
+/**
+ * A typewriter on the page — a typeball rides a rail across the frame,
+ * spins each letter to the front, strikes, steps right, and at the margin
+ * whirls home and drops a line. Ink follows `currentColor`. Honors
+ * `prefers-reduced-motion`.
+ */
+export function Typewriter({
+  className,
+  text = DEFAULT_TEXT,
+  speed = DEFAULT_SPEED,
+  humanize = true,
+  loop = true,
+  hold = DEFAULT_HOLD,
+  startDelay = DEFAULT_START_DELAY,
+  columns = 0,
+  ticks = true,
+  jitter = DEFAULT_JITTER,
+  sound = false,
+  onDone,
+}: TypewriterProps) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const instanceRef = useRef<TypewriterInstance | null>(null)
+  const onDoneRef = useRef(onDone)
+
+  useEffect(() => {
+    onDoneRef.current = onDone
+  }, [onDone])
+
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    instanceRef.current = createTypewriter(root, {
+      text,
+      speed,
+      humanize,
+      loop,
+      hold,
+      startDelay,
+      columns,
+      ticks,
+      jitter,
+      sound,
+      onDone: () => onDoneRef.current?.(),
+    })
+    return () => {
+      instanceRef.current?.destroy()
+      instanceRef.current = null
+    }
+    // Engine reads live options via setOptions; mount once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    instanceRef.current?.setOptions({
+      text,
+      speed,
+      humanize,
+      loop,
+      hold,
+      startDelay,
+      columns,
+      ticks,
+      jitter,
+      sound,
+    })
+  }, [
+    text,
+    speed,
+    humanize,
+    loop,
+    hold,
+    startDelay,
+    columns,
+    ticks,
+    jitter,
+    sound,
+  ])
+
+  return (
+    <div
+      ref={rootRef}
+      data-slot="typewriter"
+      className={cn(
+        "relative size-full overflow-hidden bg-background p-6 font-mono text-foreground",
+        className
+      )}
+    />
+  )
+}
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index bf6563c..94737ec 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -3,8 +3,8 @@ name: 23rd
 description: >
   Install, choose, and compose 23rd shadcn/ui registry components for React and
   Svelte 5. Use when the user wants a UI component, background, shader, WebGL
-  wash, hero atmosphere, footer, 404, color picker, ASCII effect, starfield,
-  orb, or page-tilt from the 23rd registry (@23rd, 23rd.dev, radiumcoders/23rd.dev),
+  wash, hero atmosphere, footer, 404, color picker, typewriter text, ASCII effect,
+  starfield, orb, or page-tilt from the 23rd registry (@23rd, 23rd.dev, radiumcoders/23rd.dev),
   or when adding a new component to this registry. Covers install commands,
   import paths, props, theming, and when not to use each item.
 metadata:
@@ -91,6 +91,7 @@ flowchart TD
   pick -->|Full page 404| d404[dithered-404]
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
+  pick -->|Type text out letter by letter| tw[typewriter]
   atmo -->|Quiet wash| sg[shader-gradient]
   atmo -->|Cel-shaded fire from the bottom| saf[shader-anime-fire]
   atmo -->|Soft fire wash from the bottom| sf[shader-fire]
@@ -120,6 +121,7 @@ Disambiguation that agents get wrong:
 | ASCII letters that shove, scatter, and fall | `ascii-logo` | `ascii-fluid` (trails, not a wordmark) |
 | CRT notation, phosphor, staves | `phosphor-score` | `shader-sky` |
 | A face / orb / mascot | `live-orb` | `logo-burst` |
+| Typing effect, typewriter, text that types itself | `typewriter` | `ascii-logo` (a wordmark, not prose) |
 
 There is one variant enum in the whole registry: `LiveOrb` `variant` is `"white" | "black" | "webgl" | "custom"`. Nothing else has `variant`.
 
@@ -140,6 +142,8 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
+`Typewriter` fills its parent like a background but is content: it types `text` in the mono font, inherits the font size, and inks in `currentColor`. Give the parent a height; the paper feeds up when the page fills.
+
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
 `LiveOrb` is a fixed square (`size`, default `280`). It does not fill the viewport. The body stays put; only the eyes move.
@@ -182,6 +186,7 @@ Categories match `content/docs/components/meta.json`.
 | `dithered-404` | Pages | Bayer 404 burned by a fireball cursor, then reforms | React + Svelte |
 | `folio` | Sections | Page leans on scroll, then springs flat | React + Svelte |
 | `gooey-color-picker` | Components | Swatch opens into hue, alpha, and hex under an SVG goo filter | React + Svelte |
+| `typewriter` | Components | A typeball on a rail types text letter by letter, returns at the margin | React + Svelte |
 
 ## Minimal installs that must be right
 
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index ecb1489..0ae5470 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -362,6 +362,29 @@ type FolioPlayDetail = {
 
 React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`. The Svelte component listens for that window event. Reduced motion: no tilt, no blur.
 
+## typewriter
+
+```ts
+type TypewriterProps = {
+  text?: string // DEFAULT_TEXT; "\n" breaks a line
+  speed?: number // 14 characters per second, clamped 1–120
+  humanize?: boolean // true
+  loop?: boolean // true
+  hold?: number // 2600 ms on the finished page before looping
+  startDelay?: number // 600 ms before the first keystroke
+  columns?: number // 0 = fit the frame; never wider than the frame
+  ticks?: boolean // true
+  jitter?: number // 0.3, 0–1
+  sound?: boolean // false
+  onDone?: () => void // each time the last character lands
+  className?: string
+}
+```
+
+Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again.
+
 ## Events that are not props
 
 | Name | Constant | Who listens |
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index efd8c7a..e579b00 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -385,3 +385,29 @@ Controlled when `value` is not `undefined`. Otherwise uncontrolled, seeded from
 `GooeyColor` is `{ h: 0–360, s: 0–100, l: 0–100, a: 0–1 }`. Strings accept hex (`#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`) and `hsl` / `hsla`. `onChange` second arg is `hsla(...)` from `toCss`. EyeDropper appears only when `window.EyeDropper` exists; it is not a prop.
 
 Pitfalls: the panel overflows the trigger. Do not put it in `overflow-hidden`. React also exports `parseColor`. No `className` on Svelte — use `class`.
+
+## typewriter
+
+Component. Text typed onto the page by a typeball that rides a full-width rail. For each letter the ball spins that glyph to the front, strikes, and steps one cell right; at the margin it whirls home and drops a line. The paper feeds up when the page fills. With `loop`, the finished sheet is pulled out and typed again.
+
+Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke at a time.
+
+Not this: a wordmark (`ascii-logo`), a blinking input caret, or a background behind other copy.
+
+Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (14 chars/s), `humanize` (true), `jitter` (0.3), `columns` (0 = fit), `ticks` (true), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+
+```tsx
+"use client"
+import { Typewriter } from "@/components/ui/typewriter"
+
+export function Letter() {
+  return (
+    <div className="h-80 w-full overflow-hidden rounded-xl border">
+      <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
+    </div>
+  )
+}
+```
+
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words. The font is the project's `font-mono` at the inherited size; set a size with `className="text-lg"`. Ink, rail, and carriage use `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index 463b4c9..5fe706e 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -221,6 +221,21 @@ export function Brand() {
 
 `text` longer than 5 characters is truncated.
 
+Letter that types itself:
+
+```tsx
+"use client"
+import { Typewriter } from "@/components/ui/typewriter"
+
+export function Note() {
+  return (
+    <div className="h-72 overflow-hidden rounded-xl border text-lg">
+      <Typewriter text={"Dear reader,\nwe shipped it."} loop={false} />
+    </div>
+  )
+}
+```
+
 ## Anti-patterns
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.

From 978f261e05f88bcc5f055c0fafa5114cc944e7a8 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Thu, 1 Oct 2026 16:30:09 +0530
Subject: [PATCH 45/49] Rebuild Typewriter as a real typewriter in SVG.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The rail and typeball give way to a whole machine: carriage with platen,
knurled knobs and return lever, a typebar basket, ribbon spools and
vibrator, and four rows of round keys with shift and a space bar. Every
key is wired to its own typebar. A letter presses its key, swings that
bar up out of the fan to strike the ribbon, lands on the sheet, and the
carriage steps one character left. Capitals hold shift, which drops the
basket. At the margin the lever kicks, the platen turns the paper up a
line, and the carriage slides home; with loop, the sheet is pulled out
and a fresh one rolls in from behind the platen.

Ink is currentColor and the sheet takes the first opaque background
behind the machine, so it follows light and dark. `columns` now sets
the line length (16–60, default 32) and resizes the sheet and carriage
travel; `ticks` is gone with the rail.
---
 .cursor/skills/23rd/SKILL.md                  |    4 +-
 .cursor/skills/23rd/apis.md                   |    9 +-
 .cursor/skills/23rd/components.md             |   10 +-
 .cursor/skills/23rd/recipes.md                |    2 +-
 README.md                                     |    2 +-
 content/docs/components/typewriter.mdx        |   45 +-
 .../og/docs/components/typewriter/image.png   |  Bin 45430 -> 47312 bytes
 public/r/registry.json                        |    4 +-
 public/r/typewriter-svelte.json               |    4 +-
 public/r/typewriter.json                      |    4 +-
 registry/typewriter/registry.json             |    4 +-
 registry/typewriter/typewriter-demo.tsx       |   27 +-
 registry/typewriter/typewriter-vanilla.ts     | 1860 +++++++++++------
 registry/typewriter/typewriter.svelte         |    8 +-
 registry/typewriter/typewriter.tsx            |   29 +-
 skills/23rd/SKILL.md                          |    4 +-
 skills/23rd/apis.md                           |    9 +-
 skills/23rd/components.md                     |   10 +-
 skills/23rd/recipes.md                        |    2 +-
 19 files changed, 1257 insertions(+), 780 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index 94737ec..143888f 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -142,7 +142,7 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`Typewriter` fills its parent like a background but is content: it types `text` in the mono font, inherits the font size, and inks in `currentColor`. Give the parent a height; the paper feeds up when the page fills.
+`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). Ink is `currentColor`; the sheet takes the first opaque background behind it.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
@@ -186,7 +186,7 @@ Categories match `content/docs/components/meta.json`.
 | `dithered-404` | Pages | Bayer 404 burned by a fireball cursor, then reforms | React + Svelte |
 | `folio` | Sections | Page leans on scroll, then springs flat | React + Svelte |
 | `gooey-color-picker` | Components | Swatch opens into hue, alpha, and hex under an SVG goo filter | React + Svelte |
-| `typewriter` | Components | A typeball on a rail types text letter by letter, returns at the margin | React + Svelte |
+| `typewriter` | Components | A real typewriter in SVG: keys press, typebars strike, the carriage steps | React + Svelte |
 
 ## Minimal installs that must be right
 
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index 0ae5470..bbbf2ed 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -367,13 +367,12 @@ React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`.
 ```ts
 type TypewriterProps = {
   text?: string // DEFAULT_TEXT; "\n" breaks a line
-  speed?: number // 14 characters per second, clamped 1–120
+  speed?: number // 12 characters per second, clamped 1–60
   humanize?: boolean // true
   loop?: boolean // true
   hold?: number // 2600 ms on the finished page before looping
   startDelay?: number // 600 ms before the first keystroke
-  columns?: number // 0 = fit the frame; never wider than the frame
-  ticks?: boolean // true
+  columns?: number // 32 characters per line, clamped 16–60
   jitter?: number // 0.3, 0–1
   sound?: boolean // false
   onDone?: () => void // each time the last character lands
@@ -381,9 +380,9 @@ type TypewriterProps = {
 }
 ```
 
-Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_COLUMNS`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
 
-Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again.
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again. No `ticks`, `theme`, or color props: ink is `currentColor` and the sheet is the page background.
 
 ## Events that are not props
 
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index e579b00..d9ea9cc 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -388,13 +388,13 @@ Pitfalls: the panel overflows the trigger. Do not put it in `overflow-hidden`. R
 
 ## typewriter
 
-Component. Text typed onto the page by a typeball that rides a full-width rail. For each letter the ball spins that glyph to the front, strikes, and steps one cell right; at the margin it whirls home and drops a line. The paper feeds up when the page fills. With `loop`, the finished sheet is pulled out and typed again.
+Component. A real typewriter drawn in SVG. Every key is wired to its own typebar: a letter presses its key, swings that bar up out of the basket to strike the ribbon, lands on the sheet, and the carriage steps one character left. Capitals hold shift. At the margin the return lever kicks, the platen turns the paper up a line, and the carriage slides home. With `loop`, the sheet is pulled out and a fresh one rolls in.
 
 Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke at a time.
 
-Not this: a wordmark (`ascii-logo`), a blinking input caret, or a background behind other copy.
+Not this: a wordmark (`ascii-logo`), a blinking input caret, plain typed text in a paragraph (this draws the whole machine), or a background behind other copy.
 
-Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (14 chars/s), `humanize` (true), `jitter` (0.3), `columns` (0 = fit), `ticks` (true), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
 
 ```tsx
 "use client"
@@ -402,12 +402,12 @@ import { Typewriter } from "@/components/ui/typewriter"
 
 export function Letter() {
   return (
-    <div className="h-80 w-full overflow-hidden rounded-xl border">
+    <div className="h-96 w-full overflow-hidden rounded-xl border">
       <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
     </div>
   )
 }
 ```
 
-Pitfalls: `\n` is the only way to force a line break; everything else wraps at words. The font is the project's `font-mono` at the inherited size; set a size with `className="text-lg"`. Ink, rail, and carriage use `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. The sheet uses the first opaque background up the tree, so put it on a surface with a real background color. Ink uses `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
 
diff --git a/.cursor/skills/23rd/recipes.md b/.cursor/skills/23rd/recipes.md
index 5fe706e..7aa2ba7 100644
--- a/.cursor/skills/23rd/recipes.md
+++ b/.cursor/skills/23rd/recipes.md
@@ -229,7 +229,7 @@ import { Typewriter } from "@/components/ui/typewriter"
 
 export function Note() {
   return (
-    <div className="h-72 overflow-hidden rounded-xl border text-lg">
+    <div className="h-96 overflow-hidden rounded-xl border">
       <Typewriter text={"Dear reader,\nwe shipped it."} loop={false} />
     </div>
   )
diff --git a/README.md b/README.md
index 356c056..110bc55 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
-| [Typewriter](https://23rd.dev/docs/components/typewriter)                 | `@23rd/typewriter`         | A typeball on a rail spins each letter to the front, strikes, and drops a line at the margin |
+| [Typewriter](https://23rd.dev/docs/components/typewriter)                 | `@23rd/typewriter`         | A real typewriter in SVG — keys press, typebars strike the ribbon, the carriage steps |
 
 ```tsx
 import { GooeyColorPicker } from "@/components/ui/gooey-color-picker"
diff --git a/content/docs/components/typewriter.mdx b/content/docs/components/typewriter.mdx
index ab30085..995cb3a 100644
--- a/content/docs/components/typewriter.mdx
+++ b/content/docs/components/typewriter.mdx
@@ -1,11 +1,11 @@
 ---
 title: Typewriter
-description: Text typed onto the page by a typeball on a rail — it spins each letter to the front and strikes, steps right, and at the margin whirls home and drops a line.
+description: A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.
 ---
 
 import { TypewriterDemo } from "@/registry/typewriter/typewriter-demo"
 
-A typewriter, not a blinking caret. A rail spans the frame with a scale of ticks and two margin stops, and a typeball rides it — a sphere wearing the keyboard in three rows, clamped to the rail. For every keystroke the ball spins and tilts until that letter faces the paper, strikes, and steps one cell right. At the end of a line it whirls home along the rail and drops to the next; when the page is full the paper feeds up. Between pages the ball turns slowly on its own. With `loop` on, the finished sheet is pulled out and typed again. Everything is ink in `currentColor`, so it follows the theme.
+A typewriter that actually types. Every key on the keyboard is wired to its own typebar in the basket. Press a letter and its key goes down, that bar swings up out of the fan, the ribbon lifts, and the letter lands on the sheet as the carriage steps one character left. Capitals hold shift, which drops the basket. At the end of a line the return lever kicks, the platen turns the paper up a line, and the carriage slides home. With `loop` on, the finished sheet is pulled out and a fresh one rolls in from behind the platen.
 
 ## Preview
 
@@ -21,7 +21,7 @@ Or install straight from the public GitHub source registry:
 
 ## Usage
 
-Give the parent a size. The typewriter fills it, sets its text in your mono font, and inherits the font size.
+Give the parent a size. The machine scales to fit and stays centered, with room above it for the sheet to grow as lines feed up.
 
 <FrameworkCode>
   <FrameworkReact>
@@ -32,7 +32,7 @@ import { Typewriter } from "@/components/ui/typewriter"
 
 export function Letter() {
   return (
-    <div className="h-80 w-full overflow-hidden rounded-xl border">
+    <div className="h-96 w-full overflow-hidden rounded-xl border">
       <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
     </div>
   )
@@ -45,14 +45,14 @@ export function Letter() {
   import Typewriter from "$lib/components/ui/typewriter.svelte"
 </script>
 
-<div class="h-80 w-full overflow-hidden rounded-xl border">
+<div class="h-96 w-full overflow-hidden rounded-xl border">
   <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
 </div>
 ```
   </FrameworkSvelte>
 </FrameworkCode>
 
-`\n` starts a new line; everything else wraps at words to fit the frame, or at `columns` characters when you set it. Type once and stop, or slow it down and switch the clicks on.
+`\n` starts a new line; everything else wraps at words to `columns` characters, and the sheet, platen, and carriage travel resize to match. Type once and stop, or slow it down and switch the clicks on.
 
 <FrameworkCode>
   <FrameworkReact>
@@ -73,20 +73,19 @@ export function Letter() {
 
 ## Props
 
-| Prop         | Type         | Default                                              |
-| ------------ | ------------ | ---------------------------------------------------- |
-| `text`       | `string`     | a short letter — `\n` breaks a line                  |
-| `speed`      | `number`     | `14` — characters per second                         |
-| `humanize`   | `boolean`    | `true` — uneven keys, rests after punctuation        |
-| `jitter`     | `number`     | `0.3` — 0–1, per-letter baseline, tilt, and ink      |
-| `columns`    | `number`     | `0` — wrap width in characters, `0` fits the frame   |
-| `ticks`      | `boolean`    | `true` — scale marks along the rail                  |
-| `loop`       | `boolean`    | `true` — feed the page out and type it again         |
-| `hold`       | `number`     | `2600` — ms on the finished page before looping      |
-| `startDelay` | `number`     | `600` — ms before the first keystroke                |
-| `sound`      | `boolean`    | `false` — synthesized clicks, bell, and return       |
-| `onDone`     | `() => void` | called each time the last character lands            |
-| `className`  | `string`     | React only                                           |
-| `class`      | `string`     | Svelte only                                          |
-
-Color it with a text color on the component or its parent (`className="text-sky-700"`); the rail, carriage, and letters all use `currentColor`. The root has `p-6` padding, and the text margin moves in further when the carriage needs room to stay inside the frame.
+| Prop         | Type         | Default                                             |
+| ------------ | ------------ | --------------------------------------------------- |
+| `text`       | `string`     | a short letter — `\n` breaks a line                 |
+| `speed`      | `number`     | `12` — characters per second                        |
+| `humanize`   | `boolean`    | `true` — uneven keys, rests after punctuation       |
+| `jitter`     | `number`     | `0.3` — 0–1, per-letter baseline, tilt, and ink     |
+| `columns`    | `number`     | `32` — line length on the sheet, 16–60              |
+| `loop`       | `boolean`    | `true` — pull the sheet out and type it again       |
+| `hold`       | `number`     | `2600` — ms on the finished page before looping     |
+| `startDelay` | `number`     | `600` — ms before the first keystroke               |
+| `sound`      | `boolean`    | `false` — synthesized clicks, bell, and return      |
+| `onDone`     | `() => void` | called each time the last character lands          |
+| `className`  | `string`     | React only                                          |
+| `class`      | `string`     | Svelte only                                         |
+
+The machine and the letters are inked in `currentColor`, so color it with a text class (`className="text-sky-800"`). The sheet takes the page color: the first opaque background behind the component, so it matches light and dark themes on its own.
diff --git a/public/og/docs/components/typewriter/image.png b/public/og/docs/components/typewriter/image.png
index 27615bb26401e5b6f9d4c4323af7b4eed98a725c..1da9076ea8a42896f3c05e16f2c0e66eed7e258d 100644
GIT binary patch
literal 47312
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

literal 45430
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
E00nZVVE_OC

diff --git a/public/r/registry.json b/public/r/registry.json
index 6e6ccce..34a7ca9 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -378,7 +378,7 @@
     {
       "name": "typewriter",
       "title": "Typewriter",
-      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
       "files": [
         {
           "path": "registry/typewriter/typewriter.tsx",
@@ -391,7 +391,7 @@
     {
       "name": "typewriter-svelte",
       "title": "Typewriter",
-      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
       "files": [
         {
           "path": "registry/typewriter/typewriter.svelte",
diff --git a/public/r/typewriter-svelte.json b/public/r/typewriter-svelte.json
index 0355dbf..6fe6d44 100644
--- a/public/r/typewriter-svelte.json
+++ b/public/r/typewriter-svelte.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "typewriter-svelte",
   "title": "Typewriter",
-  "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+  "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
   "files": [
     {
       "path": "registry/typewriter/typewriter.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery letter lands where the carriage stands, then the carriage steps aside for the next one. At the margin it rings, glides home, and drops a line.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 14\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Line pitch, in font sizes. Leaves the carriage room under each line. */\nconst LEADING = 2.2\n/** Typeball radius, in font sizes. */\nconst BALL_R = 1.1\n/** Baseline to the top of the typeball, in font sizes. */\nconst BALL_GAP = 0.2\n/** Glyph size on the ball, as a share of its radius. */\nconst BALL_GLYPH = 0.56\n/** Rail thickness, in font sizes. */\nconst RAIL_H = 0.32\n/** Rail clamp width, in font sizes. */\nconst CLAMP_W = 0.26\n/** Gap between the ball and each clamp, in font sizes. */\nconst CLAMP_GAP = 0.14\n/** Bell rings this many cells before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `14`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Feed the page out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Wrap width in characters. `0` fits the frame. Default `0`. */\n  columns?: number\n  /** Scale ticks along the rail. Default `true`. */\n  ticks?: boolean\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Clear the page and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\nfunction svgEl<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number> = {}\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    node.setAttribute(key, String(value))\n  }\n  return node\n}\n\nfunction div(style: Partial<CSSStyleDeclaration>) {\n  const node = document.createElement(\"div\")\n  Object.assign(node.style, style)\n  return node\n}\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n/** The ball's glyph rows, top to bottom — the keyboard's three letter rows. */\nconst BALL_FACES = [\"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,.?\"]\n/** Latitude of each row on the ball, in radians. */\nconst BALL_ROWS = [0.66, 0, -0.66]\n/** Glyphs sit a little inside the silhouette, so the limb stays clean. */\nconst BALL_INSET = 0.8\n/** Idle spin, in radians per second. */\nconst BALL_DRIFT = 0.55\n\ntype Tween = {\n  from: number\n  to: number\n  start: number\n  ms: number\n  ease: (t: number) => number\n}\n\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Nearest turn of `angle` to `from`, so the ball spins the short way. */\nfunction nearest(from: number, angle: number) {\n  return from + ((((angle - from) % TAU) + TAU * 1.5) % TAU) - Math.PI\n}\n\ntype Typeball = {\n  el: SVGSVGElement\n  /**\n   * Size the ball; `radius` and the glyph size are in px. `font` is the\n   * page's computed style — mask content doesn't inherit it everywhere.\n   */\n  layout: (radius: number, glyph: number, font: CSSStyleDeclaration) => void\n  /** Spin and tilt until `ch` faces the paper. */\n  select: (ch: string, ms: number) => void\n  /** Spin whole turns, for the glide home. */\n  whirl: (turns: number, ms: number) => void\n  /** Turn slowly while nothing is being typed. */\n  drift: (on: boolean) => void\n  destroy: () => void\n}\n\nlet ballIds = 0\n\n/**\n * The type element: a sphere wearing the keyboard in three rows. It spins\n * about its axis and tilts to bring a glyph to the front — the letters are\n * cut through the ink, so the page shows through them.\n */\nfunction createTypeball(): Typeball {\n  const id = `typewriter-ball-${++ballIds}`\n  const el = svgEl(\"svg\", { overflow: \"visible\" })\n  el.style.position = \"absolute\"\n  el.style.overflow = \"visible\"\n  const defs = svgEl(\"defs\")\n  const shade = svgEl(\"radialGradient\", {\n    id: `${id}-shade`,\n    cx: 0.36,\n    cy: 0.3,\n    r: 0.8,\n  })\n  for (const [offset, alpha] of [\n    [0, 0.5],\n    [0.5, 0.86],\n    [1, 1],\n  ] as const) {\n    shade.append(\n      svgEl(\"stop\", {\n        offset,\n        \"stop-color\": \"currentColor\",\n        \"stop-opacity\": alpha,\n      })\n    )\n  }\n  const mask = svgEl(\"mask\", { id: `${id}-cut`, maskUnits: \"userSpaceOnUse\" })\n  const paper = svgEl(\"rect\", { fill: \"#fff\" })\n  const letters = svgEl(\"g\", {\n    fill: \"#000\",\n    \"text-anchor\": \"middle\",\n    \"dominant-baseline\": \"central\",\n  })\n  mask.append(paper, letters)\n  defs.append(shade, mask)\n  const sphere = svgEl(\"circle\", {\n    fill: `url(#${id}-shade)`,\n    mask: `url(#${id}-cut)`,\n  })\n  el.append(defs, sphere)\n\n  const cols = BALL_FACES[0]!.length\n  const slots = BALL_FACES.flatMap((face, row) =>\n    Array.from(face, (glyph, col) => {\n      const node = svgEl(\"text\")\n      node.textContent = glyph\n      letters.append(node)\n      return { row, col, glyph, node }\n    })\n  )\n\n  let radius = 16\n  let lon = 0\n  let tilt = 0\n  let lonTween: Tween | null = null\n  let tiltTween: Tween | null = null\n  let drifting = false\n  let raf = 0\n  let last = 0\n  let swapped: (typeof slots)[number] | null = null\n\n  const render = () => {\n    const r = radius * BALL_INSET\n    const sin = Math.sin(tilt)\n    const cos = Math.cos(tilt)\n    for (const slot of slots) {\n      const lat = BALL_ROWS[slot.row]!\n      const theta = (slot.col / cols) * TAU - lon\n      const x = Math.cos(lat) * Math.sin(theta)\n      const y0 = Math.sin(lat)\n      const z0 = Math.cos(lat) * Math.cos(theta)\n      const y = y0 * cos - z0 * sin\n      const z = y0 * sin + z0 * cos\n      const seen = clamp((z - 0.12) / 0.4, 0, 1)\n      if (seen <= 0) {\n        slot.node.setAttribute(\"fill-opacity\", \"0\")\n        continue\n      }\n      const sx = Math.sqrt(Math.max(0.02, 1 - x * x))\n      const sy = Math.sqrt(Math.max(0.02, 1 - y * y))\n      slot.node.setAttribute(\"fill-opacity\", (seen * 0.86).toFixed(3))\n      slot.node.setAttribute(\n        \"transform\",\n        `translate(${(x * r).toFixed(2)} ${(-y * r).toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`\n      )\n    }\n  }\n\n  const valueOf = (tween: Tween, now: number) => {\n    const t = clamp((now - tween.start) / Math.max(1, tween.ms), 0, 1)\n    return tween.from + (tween.to - tween.from) * tween.ease(t)\n  }\n\n  const frame = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (lonTween) {\n      lon = valueOf(lonTween, now)\n      if (now - lonTween.start >= lonTween.ms) lonTween = null\n    } else if (drifting) {\n      lon += BALL_DRIFT * dt\n    }\n    if (tiltTween) {\n      tilt = valueOf(tiltTween, now)\n      if (now - tiltTween.start >= tiltTween.ms) tiltTween = null\n    }\n    render()\n    if (lonTween || tiltTween || drifting) raf = requestAnimationFrame(frame)\n  }\n\n  const wake = () => {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(frame)\n  }\n\n  const tweenTo = (current: number, to: number, ms: number, ease = easeOut) => {\n    const now = performance.now()\n    return { from: current, to, start: now, ms, ease }\n  }\n\n  const settle = () => {\n    const now = performance.now()\n    if (lonTween) lon = valueOf(lonTween, now)\n    if (tiltTween) tilt = valueOf(tiltTween, now)\n  }\n\n  return {\n    el,\n    layout(nextRadius, glyph, font) {\n      radius = nextRadius\n      const box = radius + 2\n      el.setAttribute(\"width\", String(box * 2))\n      el.setAttribute(\"height\", String(box * 2))\n      el.setAttribute(\"viewBox\", `${-box} ${-box} ${box * 2} ${box * 2}`)\n      sphere.setAttribute(\"r\", String(radius))\n      for (const [key, value] of Object.entries({\n        x: -box,\n        y: -box,\n        width: box * 2,\n        height: box * 2,\n      })) {\n        mask.setAttribute(key, String(value))\n        paper.setAttribute(key, String(value))\n      }\n      letters.setAttribute(\"font-size\", glyph.toFixed(2))\n      Object.assign(letters.style, {\n        fontFamily: font.fontFamily,\n        fontStretch: font.fontStretch,\n        fontWeight: font.fontWeight,\n        fontVariationSettings: font.fontVariationSettings,\n      })\n      render()\n    },\n    select(ch, ms) {\n      const key = ch.toLowerCase()\n      let slot = slots.find((s) => s.glyph === key)\n      if (!slot) {\n        const code = ch.codePointAt(0) ?? 0\n        slot = slots[(code * 7) % slots.length]!\n      }\n      // Capitals and symbols borrow a slot's face until the next letter.\n      if (swapped && swapped !== slot) swapped.node.textContent = swapped.glyph\n      swapped = ch === slot.glyph ? null : slot\n      slot.node.textContent = ch\n      settle()\n      const target = nearest(lon, (slot.col / cols) * TAU)\n      lonTween = tweenTo(lon, target, ms)\n      tiltTween = tweenTo(tilt, BALL_ROWS[slot.row]!, ms)\n      wake()\n    },\n    whirl(turns, ms) {\n      settle()\n      lonTween = tweenTo(lon, lon + turns * TAU, ms, easeInOut)\n      tiltTween = tweenTo(tilt, 0, ms, easeInOut)\n      wake()\n    },\n    drift(on) {\n      drifting = on\n      if (on) wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\n/**\n * A typewriter on the page. A rail spans the frame and a typeball rides it:\n * for every letter the ball spins that glyph to the front, strikes, and\n * steps one cell right. At the end of a line it whirls home and drops to\n * the next, and when the page is full the paper feeds up. Idle when\n * finished, off-screen, or under `prefers-reduced-motion` (which prints the\n * whole page at once).\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 120)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n\n  const stage = div({\n    position: \"absolute\",\n    inset: \"0\",\n    overflow: \"hidden\",\n    borderRadius: \"inherit\",\n    pointerEvents: \"none\",\n  })\n  stage.setAttribute(\"aria-hidden\", \"true\")\n  const viewport = div({ position: \"absolute\", inset: \"0\" })\n  const page = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    right: \"0\",\n    whiteSpace: \"pre\",\n    willChange: \"transform\",\n  })\n  const carriage = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    width: \"100%\",\n    willChange: \"transform\",\n  })\n  const rail = svgEl(\"svg\", { overflow: \"visible\" })\n  rail.style.position = \"absolute\"\n  rail.style.left = \"0\"\n  rail.style.overflow = \"visible\"\n  const head = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    willChange: \"transform\",\n  })\n  const clamps = svgEl(\"svg\", { overflow: \"visible\" })\n  clamps.style.position = \"absolute\"\n  clamps.style.overflow = \"visible\"\n  const ball = createTypeball()\n\n  head.append(clamps, ball.el)\n  carriage.append(rail, head)\n  viewport.append(page)\n  stage.append(viewport, carriage)\n  root.append(spoken, stage)\n\n  // Font metrics and frame, refreshed by `measure`.\n  const m = {\n    fs: 16,\n    cw: 9.6,\n    lh: 35,\n    base: 22,\n    width: 0,\n    height: 0,\n    padT: 0,\n    padB: 0,\n    margin: 0,\n    columns: 1,\n    radius: 16,\n    /** Baseline to the ball's centre, which is also the rail's. */\n    axis: 20,\n    /** Cell centre to the outer edge of a rail clamp. */\n    half: 24,\n  }\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let scroll = 0\n  let lines: HTMLDivElement[] = []\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  /** The ball turns idly between pages, but only while anyone can see it. */\n  const idle = () =>\n    ball.drift((phase === \"waiting\" || phase === \"done\") && active())\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n    idle()\n  }\n  const setPhase = (next: typeof phase) => {\n    phase = next\n    idle()\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const cellX = (col: number) => m.margin + col * m.cw\n  const lineTop = (line: number) => m.padT + line * m.lh\n  /** How far the paper must feed up to keep the carriage on `line` in frame. */\n  const scrollFor = (line: number) => {\n    const floor = m.height - Math.min(m.padB, m.fs * 0.6)\n    return Math.max(0, lineTop(line) + m.base + m.axis + m.radius - floor)\n  }\n\n  const setTransition = (\n    el: HTMLElement,\n    ms: number,\n    ease: string,\n    delay = 0\n  ) => {\n    el.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease} ${Math.round(delay)}ms` : \"none\"\n  }\n  const placeHead = (col: number, ms = 0, ease = \"linear\", delay = 0) => {\n    setTransition(head, ms, ease, delay)\n    head.style.transform = `translate3d(${cellX(col)}px,0,0)`\n  }\n  const placeCarriage = (line: number, ms = 0, ease = \"linear\") => {\n    setTransition(carriage, ms, ease)\n    const y = Math.round(lineTop(line) - scroll + m.base)\n    carriage.style.transform = `translate3d(0,${y}px,0)`\n  }\n  const placePage = (ms = 0, ease = \"linear\") => {\n    page.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease}, opacity ${ms}ms ${ease}` : \"none\"\n    page.style.transform = `translate3d(0,${-scroll}px,0)`\n    viewport.style.maskImage = viewport.style.webkitMaskImage =\n      scroll > 0\n        ? `linear-gradient(to bottom, transparent 0, #000 ${Math.max(m.padT, m.lh * 0.8)}px)`\n        : \"\"\n  }\n\n  const lineEl = (index: number) => {\n    while (lines.length <= index) {\n      const el = div({\n        position: \"absolute\",\n        left: \"0\",\n        right: \"0\",\n        top: `${lineTop(lines.length)}px`,\n        height: `${m.lh}px`,\n      })\n      page.append(el)\n      lines.push(el)\n    }\n    return lines[index]!\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const el = document.createElement(\"span\")\n    el.textContent = stroke.ch\n    Object.assign(el.style, {\n      position: \"absolute\",\n      top: \"0\",\n      left: `${cellX(stroke.col)}px`,\n      width: `${m.cw}px`,\n      height: `${m.lh}px`,\n      lineHeight: `${m.lh}px`,\n      textAlign: \"center\",\n    })\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 0.07 * m.fs\n      const dy = (hash(n + 1) - 0.5) * jitter * 0.1 * m.fs\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.style.transform = `translate(${dx.toFixed(2)}px,${dy.toFixed(2)}px) rotate(${tilt.toFixed(2)}deg)`\n      el.style.opacity = (1 - hash(n + 3) * jitter * 0.42).toFixed(3)\n    }\n    lineEl(stroke.line).append(el)\n    return el\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  /** Paint the first `pos` strokes and park the carriage, without motion. */\n  const paint = () => {\n    page.replaceChildren()\n    lines = []\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    scroll = scrollFor(cursor.line)\n    placePage()\n    placeCarriage(cursor.line)\n    placeHead(cursor.col)\n    rang = cursor.col >= m.columns - BELL_CELLS\n  }\n\n  const drawRail = () => {\n    const { width, fs, cw, columns } = m\n    const h = Math.max(3, Math.round(RAIL_H * fs))\n    rail.setAttribute(\"width\", String(width))\n    rail.setAttribute(\"height\", String(h + 1))\n    rail.setAttribute(\"viewBox\", `0 0 ${width} ${h + 1}`)\n    rail.style.top = `${Math.round(m.axis - h / 2)}px`\n    rail.replaceChildren()\n    const g = svgEl(\"g\", { fill: \"none\", stroke: \"currentColor\" })\n    g.append(\n      svgEl(\"path\", {\n        d: `M0 0.5H${width}M0 ${h + 0.5}H${width}`,\n        \"stroke-opacity\": 0.3,\n        \"stroke-width\": 1,\n      })\n    )\n    if (options.ticks ?? true) {\n      let minor = \"\"\n      let major = \"\"\n      for (let c = 0; c <= columns; c++) {\n        const x = Math.round(m.margin + c * cw + cw / 2) + 0.5\n        if (c % 5 === 0) major += `M${x} 1V${c % 10 === 0 ? h : h * 0.62}`\n        else minor += `M${x} 1V${h * 0.36}`\n      }\n      g.append(\n        svgEl(\"path\", { d: minor, \"stroke-opacity\": 0.22, \"stroke-width\": 1 }),\n        svgEl(\"path\", { d: major, \"stroke-opacity\": 0.42, \"stroke-width\": 1 })\n      )\n    }\n    // Margin stops: where the carriage returns to, and where the bell rings.\n    const stopW = Math.max(2, Math.round(fs * 0.14))\n    const stopH = h + Math.round(fs * 0.32)\n    for (const x of [m.margin, m.margin + columns * cw]) {\n      g.append(\n        svgEl(\"rect\", {\n          x: Math.round(x - stopW / 2),\n          y: Math.round((h - stopH) / 2) + 0.5,\n          width: stopW,\n          height: stopH,\n          rx: stopW / 2,\n          fill: \"currentColor\",\n          \"fill-opacity\": 0.55,\n          stroke: \"none\",\n        })\n      )\n    }\n    rail.append(g)\n  }\n\n  /** The ball, and the two clamps that hold it on the rail. */\n  const drawHead = () => {\n    const { fs, cw, radius, axis, half } = m\n    const box = radius + 2\n    ball.layout(radius, radius * BALL_GLYPH, getComputedStyle(root))\n    ball.el.style.left = `${cw / 2 - box}px`\n    ball.el.style.top = `${axis - box}px`\n\n    const railH = Math.max(3, Math.round(RAIL_H * fs))\n    const w = Math.max(3, Math.round(CLAMP_W * fs))\n    const h = railH + Math.round(fs * 0.42)\n    const gap = Math.round(CLAMP_GAP * fs)\n    clamps.setAttribute(\"width\", String(half * 2))\n    clamps.setAttribute(\"height\", String(h))\n    clamps.setAttribute(\"viewBox\", `${-half} ${-h / 2} ${half * 2} ${h}`)\n    clamps.style.left = `${cw / 2 - half}px`\n    clamps.style.top = `${axis - h / 2}px`\n    clamps.replaceChildren()\n    for (const side of [-1, 1]) {\n      const inner = radius + gap\n      const x = side < 0 ? -inner - w : inner\n      clamps.append(\n        // The collar that grips the rail…\n        svgEl(\"rect\", {\n          x,\n          y: -h / 2,\n          width: w,\n          height: h,\n          rx: Math.min(w / 2, fs * 0.12),\n          fill: \"currentColor\",\n        }),\n        // …and the axle stub it holds the ball by.\n        svgEl(\"rect\", {\n          x: side < 0 ? -inner : radius - 1,\n          y: -Math.max(1, railH * 0.25),\n          width: gap + 1,\n          height: Math.max(2, railH * 0.5),\n          fill: \"currentColor\",\n        })\n      )\n    }\n  }\n\n  const measure = () => {\n    const cs = getComputedStyle(root)\n    const fs = parseFloat(cs.fontSize) || 16\n    const probe = document.createElement(\"span\")\n    probe.textContent = \"0000000000\"\n    Object.assign(probe.style, {\n      position: \"absolute\",\n      visibility: \"hidden\",\n      whiteSpace: \"pre\",\n    })\n    const marker = document.createElement(\"span\")\n    Object.assign(marker.style, {\n      display: \"inline-block\",\n      width: \"0\",\n      height: \"0\",\n      verticalAlign: \"baseline\",\n    })\n    const lh = Math.round(fs * LEADING)\n    const row = div({\n      position: \"absolute\",\n      visibility: \"hidden\",\n      lineHeight: `${lh}px`,\n      height: `${lh}px`,\n    })\n    row.append(\"x\", marker)\n    stage.append(probe, row)\n    const cw = probe.getBoundingClientRect().width / 10 || fs * 0.6\n    const base = marker.offsetTop\n    probe.remove()\n    row.remove()\n\n    const width = root.clientWidth\n    const height = root.clientHeight\n    const padL = parseFloat(cs.paddingLeft) || 0\n    const padR = parseFloat(cs.paddingRight) || 0\n    const radius = Math.round(fs * BALL_R)\n    const half = Math.ceil(\n      radius + Math.round(CLAMP_GAP * fs) + Math.round(CLAMP_W * fs)\n    )\n    const reach = half - cw / 2\n    const edge = fs * 0.5\n    // The carriage never hangs off the frame, even at the margins.\n    const margin = Math.max(padL, Math.ceil(reach + edge))\n    const fit = Math.floor(\n      Math.min(width - padR - margin, width - edge - reach - cw - margin) / cw\n    )\n    const wanted = Math.floor(numberOr(options.columns, 0, 0, 1000))\n    const columns = Math.max(1, wanted > 0 ? Math.min(wanted, fit) : fit)\n\n    const changed =\n      fs !== m.fs ||\n      cw !== m.cw ||\n      lh !== m.lh ||\n      columns !== m.columns ||\n      width !== m.width\n    Object.assign(m, {\n      fs,\n      cw,\n      lh,\n      base,\n      width,\n      height,\n      padT: parseFloat(cs.paddingTop) || 0,\n      padB: parseFloat(cs.paddingBottom) || 0,\n      margin,\n      columns,\n      radius,\n      axis: Math.round(BALL_GAP * fs + radius),\n      half,\n    })\n    return changed\n  }\n\n  /** Lay the text out again for the current frame, keeping the place. */\n  const relayout = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    strokes = layoutTypewriter(textOf(), m.columns)\n    pos = phase === \"done\" ? strokes.length : 0\n    if (phase !== \"done\") {\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    drawRail()\n    drawHead()\n    paint()\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Spin the glyph round, strike, then step the carriage a cell right. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const spin = stroke.ch === \" \" ? 0 : clamp(base * 0.4, 16, 70)\n    const step = Math.min(90, base * 0.7)\n    if (stroke.ch !== \" \") {\n      ball.select(stroke.ch, spin)\n      letter(stroke).animate([{ opacity: 0 }, {}], {\n        duration: Math.min(70, step),\n        delay: spin,\n        easing: \"ease-out\",\n        fill: \"backwards\",\n      })\n      ball.el.animate(\n        [\n          { transform: \"translateY(0)\" },\n          { transform: `translateY(${(-m.fs * 0.22).toFixed(2)}px)` },\n          { transform: \"translateY(0)\" },\n        ],\n        {\n          duration: Math.min(110, base * 0.9),\n          delay: spin * 0.55,\n          easing: \"cubic-bezier(.3,.7,.4,1)\",\n        }\n      )\n    }\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n    placeHead(cursor.col, step, \"cubic-bezier(.2,.8,.2,1)\", spin)\n    const audio = soundOn()\n    audio?.key(stroke.ch === \" \")\n    if (\n      !rang &&\n      cursor.col >= m.columns - BELL_CELLS &&\n      m.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Whirl home along the rail and drop a line. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(200 + stroke.from * 7, 240, 620)\n    const drop = 260\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    const next = Math.max(scroll, scrollFor(cursor.line))\n    if (next !== scroll) {\n      scroll = next\n      placePage(drop, \"cubic-bezier(.3,.7,.2,1)\")\n    }\n    placeCarriage(cursor.line, drop, \"cubic-bezier(.3,.7,.2,1)\")\n    placeHead(0, glide, \"cubic-bezier(.65,0,.25,1)\")\n    if (stroke.from > 0) {\n      ball.whirl(-(0.5 + stroke.from / Math.max(1, m.columns)), glide)\n    }\n    soundOn()?.carriage(glide)\n    return glide\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    if (phase !== \"typing\") setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const glide = carriageReturn(stroke)\n      schedule(step, glide + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 820\n    const pull = \"cubic-bezier(.55,0,.75,.2)\"\n    const lift = lineTop(cursor.line + 1) + m.lh\n    page.style.transition = `transform ${ms}ms ${pull}, opacity ${ms}ms ease-in`\n    page.style.transform = `translate3d(0,${-scroll - lift}px,0)`\n    page.style.opacity = \"0\"\n    scroll = 0\n    // Same curve as the sheet, which travels further, so the carriage rises\n    // behind the last line instead of through it.\n    placeCarriage(0, ms, pull)\n    placeHead(0, ms, \"cubic-bezier(.65,0,.35,1)\")\n    if (cursor.col > 0) ball.whirl(-1, ms)\n    schedule(() => {\n      pos = 0\n      page.style.opacity = \"\"\n      paint()\n      setPhase(\"waiting\")\n      schedule(step, startOf() * 0.6)\n    }, ms + 60)\n  }\n\n  const start = () => {\n    cancel()\n    page.style.opacity = \"\"\n    strokes = layoutTypewriter(textOf(), m.columns)\n    spoken.textContent = textOf()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    schedule(step, startOf())\n  }\n\n  measure()\n  drawRail()\n  drawHead()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const onResize = () => {\n    if (measure()) relayout()\n    else {\n      scroll = Math.max(scroll, scrollFor(cursor.line))\n      placePage()\n      placeCarriage(cursor.line)\n    }\n  }\n  const ro = new ResizeObserver(onResize)\n  ro.observe(root)\n  // Webfonts can land after mount and change the cell width.\n  void document.fonts?.ready.then(() => {\n    if (!destroyed) onResize()\n  })\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (options.columns !== prev.columns) {\n        measure()\n        relayout()\n      } else if (options.jitter !== prev.jitter) {\n        paint()\n      }\n      if (options.ticks !== prev.ticks) drawRail()\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      ball.destroy()\n      ro.disconnect()\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      spoken.remove()\n      stage.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    columns = 0,\n    ticks = true,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background p-6 font-mono text-foreground\",\n    className\n  )}\n></div>\n",
+      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space. The print point sits at\n// the origin: the line being typed has its baseline on y = 0, and the\n// carriage slides so the next column always lands at x = 0.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 302\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 50\nconst PIVOT_R = 58\nconst REST_R = 30\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 9\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [142, 172, 202, 232]\nconst KEY_PITCH = 35\nconst KEY_R = 12\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4.5\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst PAPER = \"var(--typewriter-paper)\"\n\n/** An SVG element. `fill` / `stroke` of `\"paper\"` paint in the page color. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if ((key === \"fill\" || key === \"stroke\") && value === \"paper\") {\n      node.style.setProperty(key, PAPER)\n    } else {\n      node.setAttribute(key, String(value))\n    }\n  }\n  parent?.append(node)\n  return node\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGLineElement\n  strike: SVGGElement\n  /** Page-colored outline under the bar, so it reads over the machine. */\n  arm: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: SVGPathElement[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. Ink is `currentColor`; the paper takes the page\n * color behind it. `prefers-reduced-motion` prints the whole page at once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    const columns = columnsOf()\n    const span = columns * CW\n    const platenL = -PAD - 22\n    const platenR = span + PAD + 22\n    const knobW = 14\n    const leverX = platenL - knobW - 3\n    // Room for the carriage at both ends of its travel, and the body.\n    const left = leverX - 52 - (span + CW / 2)\n    const right = platenR + knobW - CW / 2\n    const half = Math.ceil(Math.max(-left, right, 262) + 14)\n    svg.replaceChildren()\n    svg.setAttribute(\n      \"viewBox\",\n      `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n    )\n\n    // The sheet fades out at the top of the frame and tucks behind the\n    // platen at the bottom.\n    const defs = draw(\"defs\", {}, svg)\n    const fade = draw(\n      \"linearGradient\",\n      {\n        id: `${id}-fade-g`,\n        gradientUnits: \"userSpaceOnUse\",\n        x1: 0,\n        x2: 0,\n        y1: VIEW_TOP,\n        y2: 40,\n      },\n      defs\n    )\n    const soft = 84 / (40 - VIEW_TOP)\n    for (const [offset, alpha] of [\n      [0, 0],\n      [soft, 1],\n      [0.998, 1],\n      [1, 0],\n    ] as const) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": \"#fff\", \"stop-opacity\": alpha },\n        fade\n      )\n    }\n    const box = {\n      x: -4000,\n      y: VIEW_TOP - 4,\n      width: 8000,\n      height: 48 - VIEW_TOP,\n    }\n    const mask = draw(\n      \"mask\",\n      { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n      defs\n    )\n    draw(\"rect\", { ...box, fill: `url(#${id}-fade-g)` }, mask)\n\n    /* Carriage: rail, platen, knobs, return lever, the sheet, the scale. */\n    const carriage = draw(\"g\", {}, svg)\n    draw(\n      \"rect\",\n      {\n        x: platenL - knobW,\n        y: 42,\n        width: platenR - platenL + knobW * 2,\n        height: 6,\n        rx: 3,\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.7,\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL,\n        y: 6,\n        width: platenR - platenL,\n        height: 34,\n        rx: 10,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL + 8,\n        y: 11,\n        width: platenR - platenL - 16,\n        height: 2,\n        rx: 1,\n        fill: \"paper\",\n        \"fill-opacity\": 0.3,\n      },\n      carriage\n    )\n    const knobs = [platenL - knobW, platenR].map((x) => {\n      draw(\n        \"rect\",\n        { x, y: 2, width: knobW, height: 42, rx: 5, fill: \"currentColor\" },\n        carriage\n      )\n      const lines = Array.from({ length: RIDGES }, () =>\n        draw(\n          \"line\",\n          {\n            x1: x + 2.6,\n            x2: x + knobW - 2.6,\n            stroke: \"paper\",\n            \"stroke-width\": 1.1,\n            \"stroke-linecap\": \"round\",\n          },\n          carriage\n        )\n      )\n      return { x, lines }\n    })\n    const lever = draw(\"g\", {}, carriage)\n    const leverPivot: [number, number] = [leverX, 32]\n    draw(\n      \"rect\",\n      {\n        x: leverX - 5,\n        y: 22,\n        width: 9,\n        height: 22,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      lever\n    )\n    draw(\n      \"path\",\n      {\n        d: `M${leverX} 30L${leverX - 12} 6L${leverX - 34} -12`,\n        fill: \"none\",\n        stroke: \"currentColor\",\n        \"stroke-width\": 5,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n    draw(\n      \"rect\",\n      {\n        x: leverX - 52,\n        y: -23,\n        width: 26,\n        height: 10,\n        rx: 5,\n        fill: \"currentColor\",\n        transform: `rotate(-24 ${leverX - 39} -18)`,\n      },\n      lever\n    )\n\n    const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n    const paper = draw(\"g\", {}, wrap)\n    const sheet = draw(\n      \"rect\",\n      {\n        x: -PAD,\n        y: -TOP_MARGIN,\n        width: span + PAD * 2,\n        height: 600,\n        fill: \"paper\",\n        stroke: \"currentColor\",\n        \"stroke-opacity\": 0.24,\n        \"stroke-width\": 1,\n      },\n      paper\n    )\n    const ink = draw(\n      \"g\",\n      { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: \"currentColor\" },\n      paper\n    )\n\n    // The paper scale, just under the print line.\n    draw(\n      \"rect\",\n      {\n        x: -PAD + 4,\n        y: 9,\n        width: span + PAD * 2 - 8,\n        height: 5,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    let ticks = \"\"\n    for (let c = 0; c <= columns; c++) {\n      const x = c * CW\n      ticks += `M${x} 9.7V${c % 10 === 0 ? 13.3 : c % 5 === 0 ? 12.2 : 11}`\n    }\n    draw(\n      \"path\",\n      {\n        d: ticks,\n        stroke: \"paper\",\n        \"stroke-width\": 0.8,\n        \"stroke-opacity\": 0.75,\n        fill: \"none\",\n      },\n      carriage\n    )\n\n    /* Body: keyboard well, frame, basket, deck, spools, ribbon, keys. */\n    const body = draw(\"g\", {}, svg)\n    draw(\n      \"path\",\n      {\n        d: \"M-226 112H226L246 272H-246Z\",\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.07,\n      },\n      body\n    )\n    for (const side of [-1, 1]) {\n      draw(\n        \"path\",\n        {\n          d: `M${side * 212} 108L${side * 232} 108L${side * 260} 272L${side * 238} 272Z`,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    const basket = draw(\"g\", {}, body)\n    const [ax, ay] = polar(63, -SPREAD - 0.1)\n    const [bx, by] = polar(63, SPREAD + 0.1)\n    const [cx, cy] = polar(55, SPREAD + 0.1)\n    const [dx, dy] = polar(55, -SPREAD - 0.1)\n    draw(\n      \"path\",\n      {\n        d: `M${ax} ${ay}A63 63 0 0 0 ${bx} ${by}L${cx} ${cy}A55 55 0 0 1 ${dx} ${dy}Z`,\n        fill: \"currentColor\",\n      },\n      basket\n    )\n\n    // The deck, with the basket showing through its notch.\n    draw(\n      \"path\",\n      {\n        d: \"M-194 50H-67A67 67 0 0 0 67 50H194Q210 50 212 66L228 108Q230 116 220 116H-220Q-230 116 -228 108L-212 66Q-210 50 -194 50Z\",\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-216 109H216\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n\n    const spools = [-150, 150].map((x) => {\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: 84,\n          r: 23,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 1.1,\n        },\n        body\n      )\n      const turn = draw(\"g\", {}, body)\n      for (let i = 0; i < 5; i++) {\n        const a = (i / 5) * TAU\n        draw(\n          \"circle\",\n          {\n            cx: x + Math.cos(a) * 13,\n            cy: 84 + Math.sin(a) * 13,\n            r: 3.6,\n            fill: \"paper\",\n          },\n          turn\n        )\n      }\n      draw(\"circle\", { cx: x, cy: 84, r: 4.4, fill: \"paper\" }, turn)\n      draw(\"circle\", { cx: x, cy: 84, r: 1.8, fill: \"currentColor\" }, turn)\n      return turn\n    })\n\n    // The type guide either side of the print point.\n    for (const side of [-1, 1]) {\n      draw(\n        \"rect\",\n        {\n          x: side < 0 ? -22 : 17,\n          y: 1,\n          width: 5,\n          height: 15,\n          rx: 1.5,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-width\": 1.2,\n          \"paint-order\": \"stroke\",\n        },\n        body\n      )\n    }\n\n    const ribbon = [\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-width\": 6.4,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"currentColor\",\n          \"stroke-width\": 3.2,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n    ]\n    const vibrator = draw(\"g\", {}, body)\n    for (const [stroke, width] of [\n      [\"paper\", 4.4],\n      [\"currentColor\", 2],\n    ] as const) {\n      draw(\n        \"path\",\n        {\n          d: \"M-12 3V11.5H12V3\",\n          fill: \"none\",\n          stroke,\n          \"stroke-width\": width,\n          \"stroke-linejoin\": \"round\",\n          \"stroke-linecap\": \"round\",\n        },\n        vibrator\n      )\n    }\n\n    // Keys: round caps on stems, in four staggered rows.\n    const keyAt = (x: number, y: number, label: string) => {\n      draw(\n        \"line\",\n        {\n          x1: x,\n          y1: y,\n          x2: x,\n          y2: y + 24,\n          stroke: \"currentColor\",\n          \"stroke-opacity\": 0.42,\n          \"stroke-width\": 2.4,\n          \"stroke-linecap\": \"round\",\n        },\n        body\n      )\n      const cap = draw(\"g\", {}, body)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R + 1.6, fill: \"paper\" }, cap)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R, fill: \"currentColor\" }, cap)\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: y,\n          r: KEY_R - 2.6,\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 0.9,\n        },\n        cap\n      )\n      const text = draw(\n        \"text\",\n        {\n          x,\n          y: y + 0.5,\n          \"text-anchor\": \"middle\",\n          \"dominant-baseline\": \"central\",\n          \"font-size\": 10,\n          \"font-weight\": 600,\n          fill: \"paper\",\n        },\n        cap\n      )\n      text.textContent = label\n      return cap\n    }\n\n    const keys = new Map<string, Key>()\n    const placed: { ch: string; x: number; key: Key }[] = []\n    KEY_ROWS.forEach((row, r) => {\n      Array.from(row).forEach((ch, i) => {\n        const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n        const key: Key = {\n          cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n          bar: null,\n          v: 0,\n        }\n        keys.set(ch, key)\n        placed.push({ ch, x, key })\n      })\n    })\n\n    const pill = (x: number, y: number, w: number, h: number) => {\n      for (const sx of [x - w * 0.3, x + w * 0.3]) {\n        draw(\n          \"line\",\n          {\n            x1: sx,\n            y1: y,\n            x2: sx,\n            y2: y + 22,\n            stroke: \"currentColor\",\n            \"stroke-opacity\": 0.42,\n            \"stroke-width\": 2.4,\n            \"stroke-linecap\": \"round\",\n          },\n          body\n        )\n      }\n      const cap = draw(\"g\", {}, body)\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2 - 1.6,\n          y: y - h / 2 - 1.6,\n          width: w + 3.2,\n          height: h + 3.2,\n          rx: h / 2 + 1.6,\n          fill: \"paper\",\n        },\n        cap\n      )\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2,\n          y: y - h / 2,\n          width: w,\n          height: h,\n          rx: h / 2,\n          fill: \"currentColor\",\n        },\n        cap\n      )\n      return cap\n    }\n    const shifts = [-1, 1].map((side) => {\n      const x = side * 201\n      const cap = pill(x, KEY_Y[3]!, 30, 22)\n      draw(\n        \"path\",\n        {\n          d: `M${x} ${KEY_Y[3]! - 5}L${x + 5} ${KEY_Y[3]! + 1}H${x + 2}V${KEY_Y[3]! + 5}H${x - 2}V${KEY_Y[3]! + 1}H${x - 5}Z`,\n          fill: \"paper\",\n        },\n        cap\n      )\n      return { cap, bar: null, v: 0 } satisfies Key\n    })\n    const space: Key = { cap: pill(0, 258, 210, 11), bar: null, v: 0 }\n\n    // Base and feet.\n    draw(\n      \"rect\",\n      {\n        x: -260,\n        y: 272,\n        width: 520,\n        height: 20,\n        rx: 8,\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-250 277H250\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n    for (const x of [-238, 202]) {\n      draw(\n        \"rect\",\n        {\n          x,\n          y: 290,\n          width: 36,\n          height: 8,\n          rx: 3,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    // One typebar per key, fanned left to right in key order.\n    const overlay = draw(\"g\", {}, svg)\n    placed.sort((a, b) => a.x - b.x)\n    const bars = placed.map(({ key }, i) => {\n      const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n      const pivot = polar(PIVOT_R, angle)\n      const tip = polar(REST_R, angle)\n      const rest = draw(\n        \"line\",\n        {\n          x1: pivot[0],\n          y1: pivot[1],\n          x2: tip[0],\n          y2: tip[1],\n          stroke: \"currentColor\",\n          \"stroke-width\": 1.3,\n          \"stroke-linecap\": \"round\",\n        },\n        basket\n      )\n      const strike = draw(\"g\", { display: \"none\" }, overlay)\n      const arm = draw(\n        \"line\",\n        {\n          stroke: \"paper\",\n          \"stroke-width\": 4.4,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const core = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 2,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const slug = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 5.5,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const bar: Bar = { rest, strike, arm, core, slug, pivot, tip, v: 0 }\n      key.bar = bar\n      return bar\n    })\n\n    M = {\n      columns,\n      carriage,\n      paper,\n      sheet,\n      ink,\n      lever,\n      leverPivot,\n      knobs,\n      keys,\n      shifts,\n      space,\n      basket,\n      bars,\n      ribbon,\n      vibrator,\n      spools,\n    }\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -150 : 150\n      spool.setAttribute(\"transform\", `rotate(${deg.toFixed(1)} ${x} 84)`)\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const d = `M-150 61L-12 ${y.toFixed(2)}H12L150 61`\n    for (const path of M.ribbon) path.setAttribute(\"d\", d)\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.arm, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Paper color                                                       */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** The sheet is the page: the first opaque background behind the machine. */\n  const paintPaper = () => {\n    let color = \"\"\n    for (let el: Element | null = root; el; el = el.parentElement) {\n      const bg = getComputedStyle(el).backgroundColor\n      if (bg && !/^transparent$|,\\s*0\\)$|\\/\\s*0\\)$/.test(bg)) {\n        color = bg\n        break\n      }\n    }\n    root.style.setProperty(\n      \"--typewriter-paper\",\n      color || (isDark() ? \"#0a0a0a\" : \"#ffffff\")\n    )\n  }\n\n  build()\n  paintPaper()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(paintPaper)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", paintPaper)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", paintPaper)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-paper\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    columns = DEFAULT_COLUMNS,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n    className\n  )}\n></div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/typewriter.svelte"
     }
diff --git a/public/r/typewriter.json b/public/r/typewriter.json
index 152c1ce..206ba89 100644
--- a/public/r/typewriter.json
+++ b/public/r/typewriter.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "typewriter",
   "title": "Typewriter",
-  "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+  "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
   "files": [
     {
       "path": "registry/typewriter/typewriter.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery letter lands where the carriage stands, then the carriage steps aside for the next one. At the margin it rings, glides home, and drops a line.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 14\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Line pitch, in font sizes. Leaves the carriage room under each line. */\nconst LEADING = 2.2\n/** Typeball radius, in font sizes. */\nconst BALL_R = 1.1\n/** Baseline to the top of the typeball, in font sizes. */\nconst BALL_GAP = 0.2\n/** Glyph size on the ball, as a share of its radius. */\nconst BALL_GLYPH = 0.56\n/** Rail thickness, in font sizes. */\nconst RAIL_H = 0.32\n/** Rail clamp width, in font sizes. */\nconst CLAMP_W = 0.26\n/** Gap between the ball and each clamp, in font sizes. */\nconst CLAMP_GAP = 0.14\n/** Bell rings this many cells before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `14`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Feed the page out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Wrap width in characters. `0` fits the frame. Default `0`. */\n  columns?: number\n  /** Scale ticks along the rail. Default `true`. */\n  ticks?: boolean\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Clear the page and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\nfunction svgEl<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number> = {}\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    node.setAttribute(key, String(value))\n  }\n  return node\n}\n\nfunction div(style: Partial<CSSStyleDeclaration>) {\n  const node = document.createElement(\"div\")\n  Object.assign(node.style, style)\n  return node\n}\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n/** The ball's glyph rows, top to bottom — the keyboard's three letter rows. */\nconst BALL_FACES = [\"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,.?\"]\n/** Latitude of each row on the ball, in radians. */\nconst BALL_ROWS = [0.66, 0, -0.66]\n/** Glyphs sit a little inside the silhouette, so the limb stays clean. */\nconst BALL_INSET = 0.8\n/** Idle spin, in radians per second. */\nconst BALL_DRIFT = 0.55\n\ntype Tween = {\n  from: number\n  to: number\n  start: number\n  ms: number\n  ease: (t: number) => number\n}\n\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Nearest turn of `angle` to `from`, so the ball spins the short way. */\nfunction nearest(from: number, angle: number) {\n  return from + ((((angle - from) % TAU) + TAU * 1.5) % TAU) - Math.PI\n}\n\ntype Typeball = {\n  el: SVGSVGElement\n  /**\n   * Size the ball; `radius` and the glyph size are in px. `font` is the\n   * page's computed style — mask content doesn't inherit it everywhere.\n   */\n  layout: (radius: number, glyph: number, font: CSSStyleDeclaration) => void\n  /** Spin and tilt until `ch` faces the paper. */\n  select: (ch: string, ms: number) => void\n  /** Spin whole turns, for the glide home. */\n  whirl: (turns: number, ms: number) => void\n  /** Turn slowly while nothing is being typed. */\n  drift: (on: boolean) => void\n  destroy: () => void\n}\n\nlet ballIds = 0\n\n/**\n * The type element: a sphere wearing the keyboard in three rows. It spins\n * about its axis and tilts to bring a glyph to the front — the letters are\n * cut through the ink, so the page shows through them.\n */\nfunction createTypeball(): Typeball {\n  const id = `typewriter-ball-${++ballIds}`\n  const el = svgEl(\"svg\", { overflow: \"visible\" })\n  el.style.position = \"absolute\"\n  el.style.overflow = \"visible\"\n  const defs = svgEl(\"defs\")\n  const shade = svgEl(\"radialGradient\", {\n    id: `${id}-shade`,\n    cx: 0.36,\n    cy: 0.3,\n    r: 0.8,\n  })\n  for (const [offset, alpha] of [\n    [0, 0.5],\n    [0.5, 0.86],\n    [1, 1],\n  ] as const) {\n    shade.append(\n      svgEl(\"stop\", {\n        offset,\n        \"stop-color\": \"currentColor\",\n        \"stop-opacity\": alpha,\n      })\n    )\n  }\n  const mask = svgEl(\"mask\", { id: `${id}-cut`, maskUnits: \"userSpaceOnUse\" })\n  const paper = svgEl(\"rect\", { fill: \"#fff\" })\n  const letters = svgEl(\"g\", {\n    fill: \"#000\",\n    \"text-anchor\": \"middle\",\n    \"dominant-baseline\": \"central\",\n  })\n  mask.append(paper, letters)\n  defs.append(shade, mask)\n  const sphere = svgEl(\"circle\", {\n    fill: `url(#${id}-shade)`,\n    mask: `url(#${id}-cut)`,\n  })\n  el.append(defs, sphere)\n\n  const cols = BALL_FACES[0]!.length\n  const slots = BALL_FACES.flatMap((face, row) =>\n    Array.from(face, (glyph, col) => {\n      const node = svgEl(\"text\")\n      node.textContent = glyph\n      letters.append(node)\n      return { row, col, glyph, node }\n    })\n  )\n\n  let radius = 16\n  let lon = 0\n  let tilt = 0\n  let lonTween: Tween | null = null\n  let tiltTween: Tween | null = null\n  let drifting = false\n  let raf = 0\n  let last = 0\n  let swapped: (typeof slots)[number] | null = null\n\n  const render = () => {\n    const r = radius * BALL_INSET\n    const sin = Math.sin(tilt)\n    const cos = Math.cos(tilt)\n    for (const slot of slots) {\n      const lat = BALL_ROWS[slot.row]!\n      const theta = (slot.col / cols) * TAU - lon\n      const x = Math.cos(lat) * Math.sin(theta)\n      const y0 = Math.sin(lat)\n      const z0 = Math.cos(lat) * Math.cos(theta)\n      const y = y0 * cos - z0 * sin\n      const z = y0 * sin + z0 * cos\n      const seen = clamp((z - 0.12) / 0.4, 0, 1)\n      if (seen <= 0) {\n        slot.node.setAttribute(\"fill-opacity\", \"0\")\n        continue\n      }\n      const sx = Math.sqrt(Math.max(0.02, 1 - x * x))\n      const sy = Math.sqrt(Math.max(0.02, 1 - y * y))\n      slot.node.setAttribute(\"fill-opacity\", (seen * 0.86).toFixed(3))\n      slot.node.setAttribute(\n        \"transform\",\n        `translate(${(x * r).toFixed(2)} ${(-y * r).toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`\n      )\n    }\n  }\n\n  const valueOf = (tween: Tween, now: number) => {\n    const t = clamp((now - tween.start) / Math.max(1, tween.ms), 0, 1)\n    return tween.from + (tween.to - tween.from) * tween.ease(t)\n  }\n\n  const frame = (now: number) => {\n    raf = 0\n    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))\n    last = now\n    if (lonTween) {\n      lon = valueOf(lonTween, now)\n      if (now - lonTween.start >= lonTween.ms) lonTween = null\n    } else if (drifting) {\n      lon += BALL_DRIFT * dt\n    }\n    if (tiltTween) {\n      tilt = valueOf(tiltTween, now)\n      if (now - tiltTween.start >= tiltTween.ms) tiltTween = null\n    }\n    render()\n    if (lonTween || tiltTween || drifting) raf = requestAnimationFrame(frame)\n  }\n\n  const wake = () => {\n    if (raf) return\n    last = performance.now()\n    raf = requestAnimationFrame(frame)\n  }\n\n  const tweenTo = (current: number, to: number, ms: number, ease = easeOut) => {\n    const now = performance.now()\n    return { from: current, to, start: now, ms, ease }\n  }\n\n  const settle = () => {\n    const now = performance.now()\n    if (lonTween) lon = valueOf(lonTween, now)\n    if (tiltTween) tilt = valueOf(tiltTween, now)\n  }\n\n  return {\n    el,\n    layout(nextRadius, glyph, font) {\n      radius = nextRadius\n      const box = radius + 2\n      el.setAttribute(\"width\", String(box * 2))\n      el.setAttribute(\"height\", String(box * 2))\n      el.setAttribute(\"viewBox\", `${-box} ${-box} ${box * 2} ${box * 2}`)\n      sphere.setAttribute(\"r\", String(radius))\n      for (const [key, value] of Object.entries({\n        x: -box,\n        y: -box,\n        width: box * 2,\n        height: box * 2,\n      })) {\n        mask.setAttribute(key, String(value))\n        paper.setAttribute(key, String(value))\n      }\n      letters.setAttribute(\"font-size\", glyph.toFixed(2))\n      Object.assign(letters.style, {\n        fontFamily: font.fontFamily,\n        fontStretch: font.fontStretch,\n        fontWeight: font.fontWeight,\n        fontVariationSettings: font.fontVariationSettings,\n      })\n      render()\n    },\n    select(ch, ms) {\n      const key = ch.toLowerCase()\n      let slot = slots.find((s) => s.glyph === key)\n      if (!slot) {\n        const code = ch.codePointAt(0) ?? 0\n        slot = slots[(code * 7) % slots.length]!\n      }\n      // Capitals and symbols borrow a slot's face until the next letter.\n      if (swapped && swapped !== slot) swapped.node.textContent = swapped.glyph\n      swapped = ch === slot.glyph ? null : slot\n      slot.node.textContent = ch\n      settle()\n      const target = nearest(lon, (slot.col / cols) * TAU)\n      lonTween = tweenTo(lon, target, ms)\n      tiltTween = tweenTo(tilt, BALL_ROWS[slot.row]!, ms)\n      wake()\n    },\n    whirl(turns, ms) {\n      settle()\n      lonTween = tweenTo(lon, lon + turns * TAU, ms, easeInOut)\n      tiltTween = tweenTo(tilt, 0, ms, easeInOut)\n      wake()\n    },\n    drift(on) {\n      drifting = on\n      if (on) wake()\n    },\n    destroy() {\n      cancelAnimationFrame(raf)\n      raf = 0\n    },\n  }\n}\n\n/**\n * A typewriter on the page. A rail spans the frame and a typeball rides it:\n * for every letter the ball spins that glyph to the front, strikes, and\n * steps one cell right. At the end of a line it whirls home and drops to\n * the next, and when the page is full the paper feeds up. Idle when\n * finished, off-screen, or under `prefers-reduced-motion` (which prints the\n * whole page at once).\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 120)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n\n  const stage = div({\n    position: \"absolute\",\n    inset: \"0\",\n    overflow: \"hidden\",\n    borderRadius: \"inherit\",\n    pointerEvents: \"none\",\n  })\n  stage.setAttribute(\"aria-hidden\", \"true\")\n  const viewport = div({ position: \"absolute\", inset: \"0\" })\n  const page = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    right: \"0\",\n    whiteSpace: \"pre\",\n    willChange: \"transform\",\n  })\n  const carriage = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    width: \"100%\",\n    willChange: \"transform\",\n  })\n  const rail = svgEl(\"svg\", { overflow: \"visible\" })\n  rail.style.position = \"absolute\"\n  rail.style.left = \"0\"\n  rail.style.overflow = \"visible\"\n  const head = div({\n    position: \"absolute\",\n    left: \"0\",\n    top: \"0\",\n    willChange: \"transform\",\n  })\n  const clamps = svgEl(\"svg\", { overflow: \"visible\" })\n  clamps.style.position = \"absolute\"\n  clamps.style.overflow = \"visible\"\n  const ball = createTypeball()\n\n  head.append(clamps, ball.el)\n  carriage.append(rail, head)\n  viewport.append(page)\n  stage.append(viewport, carriage)\n  root.append(spoken, stage)\n\n  // Font metrics and frame, refreshed by `measure`.\n  const m = {\n    fs: 16,\n    cw: 9.6,\n    lh: 35,\n    base: 22,\n    width: 0,\n    height: 0,\n    padT: 0,\n    padB: 0,\n    margin: 0,\n    columns: 1,\n    radius: 16,\n    /** Baseline to the ball's centre, which is also the rail's. */\n    axis: 20,\n    /** Cell centre to the outer edge of a rail clamp. */\n    half: 24,\n  }\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let scroll = 0\n  let lines: HTMLDivElement[] = []\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  /** The ball turns idly between pages, but only while anyone can see it. */\n  const idle = () =>\n    ball.drift((phase === \"waiting\" || phase === \"done\") && active())\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n    idle()\n  }\n  const setPhase = (next: typeof phase) => {\n    phase = next\n    idle()\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const cellX = (col: number) => m.margin + col * m.cw\n  const lineTop = (line: number) => m.padT + line * m.lh\n  /** How far the paper must feed up to keep the carriage on `line` in frame. */\n  const scrollFor = (line: number) => {\n    const floor = m.height - Math.min(m.padB, m.fs * 0.6)\n    return Math.max(0, lineTop(line) + m.base + m.axis + m.radius - floor)\n  }\n\n  const setTransition = (\n    el: HTMLElement,\n    ms: number,\n    ease: string,\n    delay = 0\n  ) => {\n    el.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease} ${Math.round(delay)}ms` : \"none\"\n  }\n  const placeHead = (col: number, ms = 0, ease = \"linear\", delay = 0) => {\n    setTransition(head, ms, ease, delay)\n    head.style.transform = `translate3d(${cellX(col)}px,0,0)`\n  }\n  const placeCarriage = (line: number, ms = 0, ease = \"linear\") => {\n    setTransition(carriage, ms, ease)\n    const y = Math.round(lineTop(line) - scroll + m.base)\n    carriage.style.transform = `translate3d(0,${y}px,0)`\n  }\n  const placePage = (ms = 0, ease = \"linear\") => {\n    page.style.transition =\n      ms > 0 ? `transform ${ms}ms ${ease}, opacity ${ms}ms ${ease}` : \"none\"\n    page.style.transform = `translate3d(0,${-scroll}px,0)`\n    viewport.style.maskImage = viewport.style.webkitMaskImage =\n      scroll > 0\n        ? `linear-gradient(to bottom, transparent 0, #000 ${Math.max(m.padT, m.lh * 0.8)}px)`\n        : \"\"\n  }\n\n  const lineEl = (index: number) => {\n    while (lines.length <= index) {\n      const el = div({\n        position: \"absolute\",\n        left: \"0\",\n        right: \"0\",\n        top: `${lineTop(lines.length)}px`,\n        height: `${m.lh}px`,\n      })\n      page.append(el)\n      lines.push(el)\n    }\n    return lines[index]!\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const el = document.createElement(\"span\")\n    el.textContent = stroke.ch\n    Object.assign(el.style, {\n      position: \"absolute\",\n      top: \"0\",\n      left: `${cellX(stroke.col)}px`,\n      width: `${m.cw}px`,\n      height: `${m.lh}px`,\n      lineHeight: `${m.lh}px`,\n      textAlign: \"center\",\n    })\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 0.07 * m.fs\n      const dy = (hash(n + 1) - 0.5) * jitter * 0.1 * m.fs\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.style.transform = `translate(${dx.toFixed(2)}px,${dy.toFixed(2)}px) rotate(${tilt.toFixed(2)}deg)`\n      el.style.opacity = (1 - hash(n + 3) * jitter * 0.42).toFixed(3)\n    }\n    lineEl(stroke.line).append(el)\n    return el\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  /** Paint the first `pos` strokes and park the carriage, without motion. */\n  const paint = () => {\n    page.replaceChildren()\n    lines = []\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    scroll = scrollFor(cursor.line)\n    placePage()\n    placeCarriage(cursor.line)\n    placeHead(cursor.col)\n    rang = cursor.col >= m.columns - BELL_CELLS\n  }\n\n  const drawRail = () => {\n    const { width, fs, cw, columns } = m\n    const h = Math.max(3, Math.round(RAIL_H * fs))\n    rail.setAttribute(\"width\", String(width))\n    rail.setAttribute(\"height\", String(h + 1))\n    rail.setAttribute(\"viewBox\", `0 0 ${width} ${h + 1}`)\n    rail.style.top = `${Math.round(m.axis - h / 2)}px`\n    rail.replaceChildren()\n    const g = svgEl(\"g\", { fill: \"none\", stroke: \"currentColor\" })\n    g.append(\n      svgEl(\"path\", {\n        d: `M0 0.5H${width}M0 ${h + 0.5}H${width}`,\n        \"stroke-opacity\": 0.3,\n        \"stroke-width\": 1,\n      })\n    )\n    if (options.ticks ?? true) {\n      let minor = \"\"\n      let major = \"\"\n      for (let c = 0; c <= columns; c++) {\n        const x = Math.round(m.margin + c * cw + cw / 2) + 0.5\n        if (c % 5 === 0) major += `M${x} 1V${c % 10 === 0 ? h : h * 0.62}`\n        else minor += `M${x} 1V${h * 0.36}`\n      }\n      g.append(\n        svgEl(\"path\", { d: minor, \"stroke-opacity\": 0.22, \"stroke-width\": 1 }),\n        svgEl(\"path\", { d: major, \"stroke-opacity\": 0.42, \"stroke-width\": 1 })\n      )\n    }\n    // Margin stops: where the carriage returns to, and where the bell rings.\n    const stopW = Math.max(2, Math.round(fs * 0.14))\n    const stopH = h + Math.round(fs * 0.32)\n    for (const x of [m.margin, m.margin + columns * cw]) {\n      g.append(\n        svgEl(\"rect\", {\n          x: Math.round(x - stopW / 2),\n          y: Math.round((h - stopH) / 2) + 0.5,\n          width: stopW,\n          height: stopH,\n          rx: stopW / 2,\n          fill: \"currentColor\",\n          \"fill-opacity\": 0.55,\n          stroke: \"none\",\n        })\n      )\n    }\n    rail.append(g)\n  }\n\n  /** The ball, and the two clamps that hold it on the rail. */\n  const drawHead = () => {\n    const { fs, cw, radius, axis, half } = m\n    const box = radius + 2\n    ball.layout(radius, radius * BALL_GLYPH, getComputedStyle(root))\n    ball.el.style.left = `${cw / 2 - box}px`\n    ball.el.style.top = `${axis - box}px`\n\n    const railH = Math.max(3, Math.round(RAIL_H * fs))\n    const w = Math.max(3, Math.round(CLAMP_W * fs))\n    const h = railH + Math.round(fs * 0.42)\n    const gap = Math.round(CLAMP_GAP * fs)\n    clamps.setAttribute(\"width\", String(half * 2))\n    clamps.setAttribute(\"height\", String(h))\n    clamps.setAttribute(\"viewBox\", `${-half} ${-h / 2} ${half * 2} ${h}`)\n    clamps.style.left = `${cw / 2 - half}px`\n    clamps.style.top = `${axis - h / 2}px`\n    clamps.replaceChildren()\n    for (const side of [-1, 1]) {\n      const inner = radius + gap\n      const x = side < 0 ? -inner - w : inner\n      clamps.append(\n        // The collar that grips the rail…\n        svgEl(\"rect\", {\n          x,\n          y: -h / 2,\n          width: w,\n          height: h,\n          rx: Math.min(w / 2, fs * 0.12),\n          fill: \"currentColor\",\n        }),\n        // …and the axle stub it holds the ball by.\n        svgEl(\"rect\", {\n          x: side < 0 ? -inner : radius - 1,\n          y: -Math.max(1, railH * 0.25),\n          width: gap + 1,\n          height: Math.max(2, railH * 0.5),\n          fill: \"currentColor\",\n        })\n      )\n    }\n  }\n\n  const measure = () => {\n    const cs = getComputedStyle(root)\n    const fs = parseFloat(cs.fontSize) || 16\n    const probe = document.createElement(\"span\")\n    probe.textContent = \"0000000000\"\n    Object.assign(probe.style, {\n      position: \"absolute\",\n      visibility: \"hidden\",\n      whiteSpace: \"pre\",\n    })\n    const marker = document.createElement(\"span\")\n    Object.assign(marker.style, {\n      display: \"inline-block\",\n      width: \"0\",\n      height: \"0\",\n      verticalAlign: \"baseline\",\n    })\n    const lh = Math.round(fs * LEADING)\n    const row = div({\n      position: \"absolute\",\n      visibility: \"hidden\",\n      lineHeight: `${lh}px`,\n      height: `${lh}px`,\n    })\n    row.append(\"x\", marker)\n    stage.append(probe, row)\n    const cw = probe.getBoundingClientRect().width / 10 || fs * 0.6\n    const base = marker.offsetTop\n    probe.remove()\n    row.remove()\n\n    const width = root.clientWidth\n    const height = root.clientHeight\n    const padL = parseFloat(cs.paddingLeft) || 0\n    const padR = parseFloat(cs.paddingRight) || 0\n    const radius = Math.round(fs * BALL_R)\n    const half = Math.ceil(\n      radius + Math.round(CLAMP_GAP * fs) + Math.round(CLAMP_W * fs)\n    )\n    const reach = half - cw / 2\n    const edge = fs * 0.5\n    // The carriage never hangs off the frame, even at the margins.\n    const margin = Math.max(padL, Math.ceil(reach + edge))\n    const fit = Math.floor(\n      Math.min(width - padR - margin, width - edge - reach - cw - margin) / cw\n    )\n    const wanted = Math.floor(numberOr(options.columns, 0, 0, 1000))\n    const columns = Math.max(1, wanted > 0 ? Math.min(wanted, fit) : fit)\n\n    const changed =\n      fs !== m.fs ||\n      cw !== m.cw ||\n      lh !== m.lh ||\n      columns !== m.columns ||\n      width !== m.width\n    Object.assign(m, {\n      fs,\n      cw,\n      lh,\n      base,\n      width,\n      height,\n      padT: parseFloat(cs.paddingTop) || 0,\n      padB: parseFloat(cs.paddingBottom) || 0,\n      margin,\n      columns,\n      radius,\n      axis: Math.round(BALL_GAP * fs + radius),\n      half,\n    })\n    return changed\n  }\n\n  /** Lay the text out again for the current frame, keeping the place. */\n  const relayout = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    strokes = layoutTypewriter(textOf(), m.columns)\n    pos = phase === \"done\" ? strokes.length : 0\n    if (phase !== \"done\") {\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    drawRail()\n    drawHead()\n    paint()\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Spin the glyph round, strike, then step the carriage a cell right. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const spin = stroke.ch === \" \" ? 0 : clamp(base * 0.4, 16, 70)\n    const step = Math.min(90, base * 0.7)\n    if (stroke.ch !== \" \") {\n      ball.select(stroke.ch, spin)\n      letter(stroke).animate([{ opacity: 0 }, {}], {\n        duration: Math.min(70, step),\n        delay: spin,\n        easing: \"ease-out\",\n        fill: \"backwards\",\n      })\n      ball.el.animate(\n        [\n          { transform: \"translateY(0)\" },\n          { transform: `translateY(${(-m.fs * 0.22).toFixed(2)}px)` },\n          { transform: \"translateY(0)\" },\n        ],\n        {\n          duration: Math.min(110, base * 0.9),\n          delay: spin * 0.55,\n          easing: \"cubic-bezier(.3,.7,.4,1)\",\n        }\n      )\n    }\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n    placeHead(cursor.col, step, \"cubic-bezier(.2,.8,.2,1)\", spin)\n    const audio = soundOn()\n    audio?.key(stroke.ch === \" \")\n    if (\n      !rang &&\n      cursor.col >= m.columns - BELL_CELLS &&\n      m.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Whirl home along the rail and drop a line. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(200 + stroke.from * 7, 240, 620)\n    const drop = 260\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    const next = Math.max(scroll, scrollFor(cursor.line))\n    if (next !== scroll) {\n      scroll = next\n      placePage(drop, \"cubic-bezier(.3,.7,.2,1)\")\n    }\n    placeCarriage(cursor.line, drop, \"cubic-bezier(.3,.7,.2,1)\")\n    placeHead(0, glide, \"cubic-bezier(.65,0,.25,1)\")\n    if (stroke.from > 0) {\n      ball.whirl(-(0.5 + stroke.from / Math.max(1, m.columns)), glide)\n    }\n    soundOn()?.carriage(glide)\n    return glide\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    if (phase !== \"typing\") setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const glide = carriageReturn(stroke)\n      schedule(step, glide + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 820\n    const pull = \"cubic-bezier(.55,0,.75,.2)\"\n    const lift = lineTop(cursor.line + 1) + m.lh\n    page.style.transition = `transform ${ms}ms ${pull}, opacity ${ms}ms ease-in`\n    page.style.transform = `translate3d(0,${-scroll - lift}px,0)`\n    page.style.opacity = \"0\"\n    scroll = 0\n    // Same curve as the sheet, which travels further, so the carriage rises\n    // behind the last line instead of through it.\n    placeCarriage(0, ms, pull)\n    placeHead(0, ms, \"cubic-bezier(.65,0,.35,1)\")\n    if (cursor.col > 0) ball.whirl(-1, ms)\n    schedule(() => {\n      pos = 0\n      page.style.opacity = \"\"\n      paint()\n      setPhase(\"waiting\")\n      schedule(step, startOf() * 0.6)\n    }, ms + 60)\n  }\n\n  const start = () => {\n    cancel()\n    page.style.opacity = \"\"\n    strokes = layoutTypewriter(textOf(), m.columns)\n    spoken.textContent = textOf()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    schedule(step, startOf())\n  }\n\n  measure()\n  drawRail()\n  drawHead()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const onResize = () => {\n    if (measure()) relayout()\n    else {\n      scroll = Math.max(scroll, scrollFor(cursor.line))\n      placePage()\n      placeCarriage(cursor.line)\n    }\n  }\n  const ro = new ResizeObserver(onResize)\n  ro.observe(root)\n  // Webfonts can land after mount and change the cell width.\n  void document.fonts?.ready.then(() => {\n    if (!destroyed) onResize()\n  })\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (options.columns !== prev.columns) {\n        measure()\n        relayout()\n      } else if (options.jitter !== prev.jitter) {\n        paint()\n      }\n      if (options.ticks !== prev.ticks) drawRail()\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      ball.destroy()\n      ro.disconnect()\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      spoken.remove()\n      stage.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter on the page — a typeball rides a rail across the frame,\n * spins each letter to the front, strikes, steps right, and at the margin\n * whirls home and drops a line. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  columns = 0,\n  ticks = true,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      ticks,\n      jitter,\n      sound,\n    })\n  }, [\n    text,\n    speed,\n    humanize,\n    loop,\n    hold,\n    startDelay,\n    columns,\n    ticks,\n    jitter,\n    sound,\n  ])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background p-6 font-mono text-foreground\",\n        className\n      )}\n    />\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space. The print point sits at\n// the origin: the line being typed has its baseline on y = 0, and the\n// carriage slides so the next column always lands at x = 0.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 302\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 50\nconst PIVOT_R = 58\nconst REST_R = 30\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 9\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [142, 172, 202, 232]\nconst KEY_PITCH = 35\nconst KEY_R = 12\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4.5\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst PAPER = \"var(--typewriter-paper)\"\n\n/** An SVG element. `fill` / `stroke` of `\"paper\"` paint in the page color. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if ((key === \"fill\" || key === \"stroke\") && value === \"paper\") {\n      node.style.setProperty(key, PAPER)\n    } else {\n      node.setAttribute(key, String(value))\n    }\n  }\n  parent?.append(node)\n  return node\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGLineElement\n  strike: SVGGElement\n  /** Page-colored outline under the bar, so it reads over the machine. */\n  arm: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: SVGPathElement[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. Ink is `currentColor`; the paper takes the page\n * color behind it. `prefers-reduced-motion` prints the whole page at once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    const columns = columnsOf()\n    const span = columns * CW\n    const platenL = -PAD - 22\n    const platenR = span + PAD + 22\n    const knobW = 14\n    const leverX = platenL - knobW - 3\n    // Room for the carriage at both ends of its travel, and the body.\n    const left = leverX - 52 - (span + CW / 2)\n    const right = platenR + knobW - CW / 2\n    const half = Math.ceil(Math.max(-left, right, 262) + 14)\n    svg.replaceChildren()\n    svg.setAttribute(\n      \"viewBox\",\n      `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n    )\n\n    // The sheet fades out at the top of the frame and tucks behind the\n    // platen at the bottom.\n    const defs = draw(\"defs\", {}, svg)\n    const fade = draw(\n      \"linearGradient\",\n      {\n        id: `${id}-fade-g`,\n        gradientUnits: \"userSpaceOnUse\",\n        x1: 0,\n        x2: 0,\n        y1: VIEW_TOP,\n        y2: 40,\n      },\n      defs\n    )\n    const soft = 84 / (40 - VIEW_TOP)\n    for (const [offset, alpha] of [\n      [0, 0],\n      [soft, 1],\n      [0.998, 1],\n      [1, 0],\n    ] as const) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": \"#fff\", \"stop-opacity\": alpha },\n        fade\n      )\n    }\n    const box = {\n      x: -4000,\n      y: VIEW_TOP - 4,\n      width: 8000,\n      height: 48 - VIEW_TOP,\n    }\n    const mask = draw(\n      \"mask\",\n      { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n      defs\n    )\n    draw(\"rect\", { ...box, fill: `url(#${id}-fade-g)` }, mask)\n\n    /* Carriage: rail, platen, knobs, return lever, the sheet, the scale. */\n    const carriage = draw(\"g\", {}, svg)\n    draw(\n      \"rect\",\n      {\n        x: platenL - knobW,\n        y: 42,\n        width: platenR - platenL + knobW * 2,\n        height: 6,\n        rx: 3,\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.7,\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL,\n        y: 6,\n        width: platenR - platenL,\n        height: 34,\n        rx: 10,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL + 8,\n        y: 11,\n        width: platenR - platenL - 16,\n        height: 2,\n        rx: 1,\n        fill: \"paper\",\n        \"fill-opacity\": 0.3,\n      },\n      carriage\n    )\n    const knobs = [platenL - knobW, platenR].map((x) => {\n      draw(\n        \"rect\",\n        { x, y: 2, width: knobW, height: 42, rx: 5, fill: \"currentColor\" },\n        carriage\n      )\n      const lines = Array.from({ length: RIDGES }, () =>\n        draw(\n          \"line\",\n          {\n            x1: x + 2.6,\n            x2: x + knobW - 2.6,\n            stroke: \"paper\",\n            \"stroke-width\": 1.1,\n            \"stroke-linecap\": \"round\",\n          },\n          carriage\n        )\n      )\n      return { x, lines }\n    })\n    const lever = draw(\"g\", {}, carriage)\n    const leverPivot: [number, number] = [leverX, 32]\n    draw(\n      \"rect\",\n      {\n        x: leverX - 5,\n        y: 22,\n        width: 9,\n        height: 22,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      lever\n    )\n    draw(\n      \"path\",\n      {\n        d: `M${leverX} 30L${leverX - 12} 6L${leverX - 34} -12`,\n        fill: \"none\",\n        stroke: \"currentColor\",\n        \"stroke-width\": 5,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n    draw(\n      \"rect\",\n      {\n        x: leverX - 52,\n        y: -23,\n        width: 26,\n        height: 10,\n        rx: 5,\n        fill: \"currentColor\",\n        transform: `rotate(-24 ${leverX - 39} -18)`,\n      },\n      lever\n    )\n\n    const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n    const paper = draw(\"g\", {}, wrap)\n    const sheet = draw(\n      \"rect\",\n      {\n        x: -PAD,\n        y: -TOP_MARGIN,\n        width: span + PAD * 2,\n        height: 600,\n        fill: \"paper\",\n        stroke: \"currentColor\",\n        \"stroke-opacity\": 0.24,\n        \"stroke-width\": 1,\n      },\n      paper\n    )\n    const ink = draw(\n      \"g\",\n      { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: \"currentColor\" },\n      paper\n    )\n\n    // The paper scale, just under the print line.\n    draw(\n      \"rect\",\n      {\n        x: -PAD + 4,\n        y: 9,\n        width: span + PAD * 2 - 8,\n        height: 5,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    let ticks = \"\"\n    for (let c = 0; c <= columns; c++) {\n      const x = c * CW\n      ticks += `M${x} 9.7V${c % 10 === 0 ? 13.3 : c % 5 === 0 ? 12.2 : 11}`\n    }\n    draw(\n      \"path\",\n      {\n        d: ticks,\n        stroke: \"paper\",\n        \"stroke-width\": 0.8,\n        \"stroke-opacity\": 0.75,\n        fill: \"none\",\n      },\n      carriage\n    )\n\n    /* Body: keyboard well, frame, basket, deck, spools, ribbon, keys. */\n    const body = draw(\"g\", {}, svg)\n    draw(\n      \"path\",\n      {\n        d: \"M-226 112H226L246 272H-246Z\",\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.07,\n      },\n      body\n    )\n    for (const side of [-1, 1]) {\n      draw(\n        \"path\",\n        {\n          d: `M${side * 212} 108L${side * 232} 108L${side * 260} 272L${side * 238} 272Z`,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    const basket = draw(\"g\", {}, body)\n    const [ax, ay] = polar(63, -SPREAD - 0.1)\n    const [bx, by] = polar(63, SPREAD + 0.1)\n    const [cx, cy] = polar(55, SPREAD + 0.1)\n    const [dx, dy] = polar(55, -SPREAD - 0.1)\n    draw(\n      \"path\",\n      {\n        d: `M${ax} ${ay}A63 63 0 0 0 ${bx} ${by}L${cx} ${cy}A55 55 0 0 1 ${dx} ${dy}Z`,\n        fill: \"currentColor\",\n      },\n      basket\n    )\n\n    // The deck, with the basket showing through its notch.\n    draw(\n      \"path\",\n      {\n        d: \"M-194 50H-67A67 67 0 0 0 67 50H194Q210 50 212 66L228 108Q230 116 220 116H-220Q-230 116 -228 108L-212 66Q-210 50 -194 50Z\",\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-216 109H216\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n\n    const spools = [-150, 150].map((x) => {\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: 84,\n          r: 23,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 1.1,\n        },\n        body\n      )\n      const turn = draw(\"g\", {}, body)\n      for (let i = 0; i < 5; i++) {\n        const a = (i / 5) * TAU\n        draw(\n          \"circle\",\n          {\n            cx: x + Math.cos(a) * 13,\n            cy: 84 + Math.sin(a) * 13,\n            r: 3.6,\n            fill: \"paper\",\n          },\n          turn\n        )\n      }\n      draw(\"circle\", { cx: x, cy: 84, r: 4.4, fill: \"paper\" }, turn)\n      draw(\"circle\", { cx: x, cy: 84, r: 1.8, fill: \"currentColor\" }, turn)\n      return turn\n    })\n\n    // The type guide either side of the print point.\n    for (const side of [-1, 1]) {\n      draw(\n        \"rect\",\n        {\n          x: side < 0 ? -22 : 17,\n          y: 1,\n          width: 5,\n          height: 15,\n          rx: 1.5,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-width\": 1.2,\n          \"paint-order\": \"stroke\",\n        },\n        body\n      )\n    }\n\n    const ribbon = [\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-width\": 6.4,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"currentColor\",\n          \"stroke-width\": 3.2,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n    ]\n    const vibrator = draw(\"g\", {}, body)\n    for (const [stroke, width] of [\n      [\"paper\", 4.4],\n      [\"currentColor\", 2],\n    ] as const) {\n      draw(\n        \"path\",\n        {\n          d: \"M-12 3V11.5H12V3\",\n          fill: \"none\",\n          stroke,\n          \"stroke-width\": width,\n          \"stroke-linejoin\": \"round\",\n          \"stroke-linecap\": \"round\",\n        },\n        vibrator\n      )\n    }\n\n    // Keys: round caps on stems, in four staggered rows.\n    const keyAt = (x: number, y: number, label: string) => {\n      draw(\n        \"line\",\n        {\n          x1: x,\n          y1: y,\n          x2: x,\n          y2: y + 24,\n          stroke: \"currentColor\",\n          \"stroke-opacity\": 0.42,\n          \"stroke-width\": 2.4,\n          \"stroke-linecap\": \"round\",\n        },\n        body\n      )\n      const cap = draw(\"g\", {}, body)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R + 1.6, fill: \"paper\" }, cap)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R, fill: \"currentColor\" }, cap)\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: y,\n          r: KEY_R - 2.6,\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 0.9,\n        },\n        cap\n      )\n      const text = draw(\n        \"text\",\n        {\n          x,\n          y: y + 0.5,\n          \"text-anchor\": \"middle\",\n          \"dominant-baseline\": \"central\",\n          \"font-size\": 10,\n          \"font-weight\": 600,\n          fill: \"paper\",\n        },\n        cap\n      )\n      text.textContent = label\n      return cap\n    }\n\n    const keys = new Map<string, Key>()\n    const placed: { ch: string; x: number; key: Key }[] = []\n    KEY_ROWS.forEach((row, r) => {\n      Array.from(row).forEach((ch, i) => {\n        const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n        const key: Key = {\n          cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n          bar: null,\n          v: 0,\n        }\n        keys.set(ch, key)\n        placed.push({ ch, x, key })\n      })\n    })\n\n    const pill = (x: number, y: number, w: number, h: number) => {\n      for (const sx of [x - w * 0.3, x + w * 0.3]) {\n        draw(\n          \"line\",\n          {\n            x1: sx,\n            y1: y,\n            x2: sx,\n            y2: y + 22,\n            stroke: \"currentColor\",\n            \"stroke-opacity\": 0.42,\n            \"stroke-width\": 2.4,\n            \"stroke-linecap\": \"round\",\n          },\n          body\n        )\n      }\n      const cap = draw(\"g\", {}, body)\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2 - 1.6,\n          y: y - h / 2 - 1.6,\n          width: w + 3.2,\n          height: h + 3.2,\n          rx: h / 2 + 1.6,\n          fill: \"paper\",\n        },\n        cap\n      )\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2,\n          y: y - h / 2,\n          width: w,\n          height: h,\n          rx: h / 2,\n          fill: \"currentColor\",\n        },\n        cap\n      )\n      return cap\n    }\n    const shifts = [-1, 1].map((side) => {\n      const x = side * 201\n      const cap = pill(x, KEY_Y[3]!, 30, 22)\n      draw(\n        \"path\",\n        {\n          d: `M${x} ${KEY_Y[3]! - 5}L${x + 5} ${KEY_Y[3]! + 1}H${x + 2}V${KEY_Y[3]! + 5}H${x - 2}V${KEY_Y[3]! + 1}H${x - 5}Z`,\n          fill: \"paper\",\n        },\n        cap\n      )\n      return { cap, bar: null, v: 0 } satisfies Key\n    })\n    const space: Key = { cap: pill(0, 258, 210, 11), bar: null, v: 0 }\n\n    // Base and feet.\n    draw(\n      \"rect\",\n      {\n        x: -260,\n        y: 272,\n        width: 520,\n        height: 20,\n        rx: 8,\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-250 277H250\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n    for (const x of [-238, 202]) {\n      draw(\n        \"rect\",\n        {\n          x,\n          y: 290,\n          width: 36,\n          height: 8,\n          rx: 3,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    // One typebar per key, fanned left to right in key order.\n    const overlay = draw(\"g\", {}, svg)\n    placed.sort((a, b) => a.x - b.x)\n    const bars = placed.map(({ key }, i) => {\n      const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n      const pivot = polar(PIVOT_R, angle)\n      const tip = polar(REST_R, angle)\n      const rest = draw(\n        \"line\",\n        {\n          x1: pivot[0],\n          y1: pivot[1],\n          x2: tip[0],\n          y2: tip[1],\n          stroke: \"currentColor\",\n          \"stroke-width\": 1.3,\n          \"stroke-linecap\": \"round\",\n        },\n        basket\n      )\n      const strike = draw(\"g\", { display: \"none\" }, overlay)\n      const arm = draw(\n        \"line\",\n        {\n          stroke: \"paper\",\n          \"stroke-width\": 4.4,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const core = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 2,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const slug = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 5.5,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const bar: Bar = { rest, strike, arm, core, slug, pivot, tip, v: 0 }\n      key.bar = bar\n      return bar\n    })\n\n    M = {\n      columns,\n      carriage,\n      paper,\n      sheet,\n      ink,\n      lever,\n      leverPivot,\n      knobs,\n      keys,\n      shifts,\n      space,\n      basket,\n      bars,\n      ribbon,\n      vibrator,\n      spools,\n    }\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -150 : 150\n      spool.setAttribute(\"transform\", `rotate(${deg.toFixed(1)} ${x} 84)`)\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const d = `M-150 61L-12 ${y.toFixed(2)}H12L150 61`\n    for (const path of M.ribbon) path.setAttribute(\"d\", d)\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.arm, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Paper color                                                       */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** The sheet is the page: the first opaque background behind the machine. */\n  const paintPaper = () => {\n    let color = \"\"\n    for (let el: Element | null = root; el; el = el.parentElement) {\n      const bg = getComputedStyle(el).backgroundColor\n      if (bg && !/^transparent$|,\\s*0\\)$|\\/\\s*0\\)$/.test(bg)) {\n        color = bg\n        break\n      }\n    }\n    root.style.setProperty(\n      \"--typewriter-paper\",\n      color || (isDark() ? \"#0a0a0a\" : \"#ffffff\")\n    )\n  }\n\n  build()\n  paintPaper()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(paintPaper)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", paintPaper)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", paintPaper)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-paper\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter that types — each letter presses its key, swings that key's\n * typebar up to strike the ribbon, and steps the carriage left. At the\n * margin the lever kicks, the platen turns up a line, and the carriage\n * slides home. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  columns = DEFAULT_COLUMNS,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n    })\n  }, [text, speed, humanize, loop, hold, startDelay, columns, jitter, sound])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n        className\n      )}\n    />\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/typewriter.tsx"
     }
diff --git a/registry/typewriter/registry.json b/registry/typewriter/registry.json
index 29db8c3..10a9095 100644
--- a/registry/typewriter/registry.json
+++ b/registry/typewriter/registry.json
@@ -5,7 +5,7 @@
       "name": "typewriter",
       "type": "registry:ui",
       "title": "Typewriter",
-      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
       "files": [
         {
           "path": "typewriter.tsx",
@@ -18,7 +18,7 @@
       "name": "typewriter-svelte",
       "type": "registry:ui",
       "title": "Typewriter",
-      "description": "Text typed onto the page by a typeball riding a rail — it spins each letter to the front, strikes, steps right, and at the margin whirls home and drops a line.",
+      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
       "files": [
         {
           "path": "typewriter.svelte",
diff --git a/registry/typewriter/typewriter-demo.tsx b/registry/typewriter/typewriter-demo.tsx
index 0ec9709..ba62359 100644
--- a/registry/typewriter/typewriter-demo.tsx
+++ b/registry/typewriter/typewriter-demo.tsx
@@ -12,6 +12,7 @@ import {
 import { ComponentPreview } from "@/components/component-preview"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
+  DEFAULT_COLUMNS,
   DEFAULT_JITTER,
   DEFAULT_SPEED,
   DEFAULT_TEXT,
@@ -22,9 +23,8 @@ const DEFAULTS = {
   text: DEFAULT_TEXT,
   speed: DEFAULT_SPEED,
   jitter: DEFAULT_JITTER,
-  columns: 0,
+  columns: DEFAULT_COLUMNS,
   humanize: true,
-  ticks: true,
   loop: true,
   sound: false,
 }
@@ -38,7 +38,7 @@ export function TypewriterDemo() {
   return (
     <>
       <ComponentPreview title="Typewriter" stageClassName="min-h-0 p-0">
-        <div className="h-[46svh] min-h-80 w-full">
+        <div className="aspect-[16/9] max-h-[70svh] w-full px-4 pt-2 pb-4">
           <Typewriter
             key={take}
             text={props.text}
@@ -46,10 +46,8 @@ export function TypewriterDemo() {
             jitter={props.jitter}
             columns={props.columns}
             humanize={props.humanize}
-            ticks={props.ticks}
             loop={props.loop}
             sound={props.sound}
-            className="text-[15px] sm:text-lg"
           />
         </div>
       </ComponentPreview>
@@ -62,9 +60,9 @@ export function TypewriterDemo() {
           text: props.text === DEFAULTS.text ? undefined : props.text,
           speed: props.speed,
           jitter: props.jitter,
-          columns: props.columns || undefined,
+          columns:
+            props.columns === DEFAULTS.columns ? undefined : props.columns,
           humanize: props.humanize ? undefined : false,
-          ticks: props.ticks ? undefined : false,
           loop: props.loop ? undefined : false,
           sound: props.sound ? true : undefined,
         }}
@@ -98,7 +96,7 @@ export function TypewriterDemo() {
           label="Speed"
           value={props.speed}
           min={4}
-          max={40}
+          max={30}
           step={1}
           format={(v) => `${v} / s`}
           onChange={(v) => updateProp("speed", v)}
@@ -114,10 +112,9 @@ export function TypewriterDemo() {
         <ControlSlider
           label="Columns"
           value={props.columns}
-          min={0}
-          max={72}
+          min={16}
+          max={60}
           step={1}
-          format={(v) => (v === 0 ? "fit" : String(v))}
           onChange={(v) => updateProp("columns", v)}
         />
         <ControlSwitch
@@ -126,15 +123,9 @@ export function TypewriterDemo() {
           checked={props.humanize}
           onChange={(v) => updateProp("humanize", v)}
         />
-        <ControlSwitch
-          label="Ticks"
-          description="Scale marks along the rail"
-          checked={props.ticks}
-          onChange={(v) => updateProp("ticks", v)}
-        />
         <ControlSwitch
           label="Loop"
-          description="Feed the page out and type it again"
+          description="Pull the sheet out and type it again"
           checked={props.loop}
           onChange={(v) => updateProp("loop", v)}
         />
diff --git a/registry/typewriter/typewriter-vanilla.ts b/registry/typewriter/typewriter-vanilla.ts
index e9d93e5..5cfd6af 100644
--- a/registry/typewriter/typewriter-vanilla.ts
+++ b/registry/typewriter/typewriter-vanilla.ts
@@ -1,8 +1,10 @@
 export const DEFAULT_TEXT =
-  "Dear reader,\nevery letter lands where the carriage stands, then the carriage steps aside for the next one. At the margin it rings, glides home, and drops a line.\n\nYours, 23rd"
+  "Dear reader,\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\n\nYours, 23rd"
 
 /** Characters per second. */
-export const DEFAULT_SPEED = 14
+export const DEFAULT_SPEED = 12
+/** Line length on the sheet, in characters. */
+export const DEFAULT_COLUMNS = 32
 /** Pause on the finished page before it feeds out and starts over, in ms. */
 export const DEFAULT_HOLD = 2600
 /** Wait before the first keystroke, in ms. */
@@ -10,40 +12,24 @@ export const DEFAULT_START_DELAY = 600
 /** Per-letter baseline, tilt, and ink wobble (0–1). */
 export const DEFAULT_JITTER = 0.3
 
-/** Line pitch, in font sizes. Leaves the carriage room under each line. */
-const LEADING = 2.2
-/** Typeball radius, in font sizes. */
-const BALL_R = 1.1
-/** Baseline to the top of the typeball, in font sizes. */
-const BALL_GAP = 0.2
-/** Glyph size on the ball, as a share of its radius. */
-const BALL_GLYPH = 0.56
-/** Rail thickness, in font sizes. */
-const RAIL_H = 0.32
-/** Rail clamp width, in font sizes. */
-const CLAMP_W = 0.26
-/** Gap between the ball and each clamp, in font sizes. */
-const CLAMP_GAP = 0.14
-/** Bell rings this many cells before the right margin. */
+/** Bell rings this many characters before the right margin. */
 const BELL_CELLS = 6
 
 export type TypewriterOptions = {
   /** What gets typed. `\n` starts a new line; long lines wrap at words. */
   text?: string
-  /** Characters per second. Default `14`. */
+  /** Characters per second. Default `12`. */
   speed?: number
   /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */
   humanize?: boolean
-  /** Feed the page out and type it again after `hold`. Default `true`. */
+  /** Pull the sheet out and type it again after `hold`. Default `true`. */
   loop?: boolean
   /** Pause on the finished page before looping, in ms. Default `2600`. */
   hold?: number
   /** Wait before the first keystroke, in ms. Default `600`. */
   startDelay?: number
-  /** Wrap width in characters. `0` fits the frame. Default `0`. */
+  /** Line length on the sheet, in characters (16–60). Default `32`. */
   columns?: number
-  /** Scale ticks along the rail. Default `true`. */
-  ticks?: boolean
   /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */
   jitter?: number
   /** Synthesized key clicks, bell, and return. Default `false`. */
@@ -54,7 +40,7 @@ export type TypewriterOptions = {
 
 export type TypewriterInstance = {
   setOptions: (options: Partial<TypewriterOptions>) => void
-  /** Clear the page and type from the first character. */
+  /** Feed a fresh sheet and type from the first character. */
   restart: () => void
   destroy: () => void
 }
@@ -149,23 +135,6 @@ function hash(n: number) {
 
 const SVG_NS = "http://www.w3.org/2000/svg"
 
-function svgEl<K extends keyof SVGElementTagNameMap>(
-  tag: K,
-  attrs: Record<string, string | number> = {}
-) {
-  const node = document.createElementNS(SVG_NS, tag)
-  for (const [key, value] of Object.entries(attrs)) {
-    node.setAttribute(key, String(value))
-  }
-  return node
-}
-
-function div(style: Partial<CSSStyleDeclaration>) {
-  const node = document.createElement("div")
-  Object.assign(node.style, style)
-  return node
-}
-
 type Sound = {
   key: (space: boolean) => void
   bell: () => void
@@ -303,250 +272,146 @@ function createSound(): Sound | null {
 
 const TAU = Math.PI * 2
 
-/** The ball's glyph rows, top to bottom — the keyboard's three letter rows. */
-const BALL_FACES = ["qwertyuiop", "asdfghjkl;", "zxcvbnm,.?"]
-/** Latitude of each row on the ball, in radians. */
-const BALL_ROWS = [0.66, 0, -0.66]
-/** Glyphs sit a little inside the silhouette, so the limb stays clean. */
-const BALL_INSET = 0.8
-/** Idle spin, in radians per second. */
-const BALL_DRIFT = 0.55
-
-type Tween = {
-  from: number
-  to: number
-  start: number
-  ms: number
-  ease: (t: number) => number
+// The machine is drawn in one SVG coordinate space. The print point sits at
+// the origin: the line being typed has its baseline on y = 0, and the
+// carriage slides so the next column always lands at x = 0.
+
+/** Character pitch on the sheet. */
+const CW = 10
+/** Line pitch on the sheet. */
+const LH = 22
+const FONT = 16.5
+/** Sheet margin either side of the text. */
+const PAD = 30
+/** Sheet above the first baseline once it's fed in. */
+const TOP_MARGIN = 38
+const VIEW_TOP = -178
+const VIEW_BOTTOM = 302
+/** Where a typebar's slug lands: the middle of the glyph on the print line. */
+const STRIKE_Y = -5
+/** Centre of the typebar basket, under the print point. */
+const BASKET_Y = 50
+const PIVOT_R = 58
+const REST_R = 30
+/** Half the basket's fan, in radians from straight down. */
+const SPREAD = (74 * Math.PI) / 180
+/** Platen knob radius, for how far it turns per line. */
+const KNOB_R = 21
+const RIDGES = 9
+const KEY_ROWS = ["1234567890", "qwertyuiop", "asdfghjkl;", "zxcvbnm,./"]
+const KEY_Y = [142, 172, 202, 232]
+const KEY_PITCH = 35
+const KEY_R = 12
+/** How far a key travels when pressed. */
+const KEY_TRAVEL = 4.5
+/** Shifted characters, and the key that types them. */
+const SHIFTED: Record<string, string> = {
+  "!": "1",
+  '"': "2",
+  "#": "3",
+  $: "4",
+  "%": "5",
+  _: "6",
+  "&": "7",
+  "'": "8",
+  "(": "9",
+  ")": "0",
+  ":": ";",
+  "?": "/",
+  "<": ",",
+  ">": ".",
 }
 
+const PAPER = "var(--typewriter-paper)"
+
+/** An SVG element. `fill` / `stroke` of `"paper"` paint in the page color. */
+function draw<K extends keyof SVGElementTagNameMap>(
+  tag: K,
+  attrs: Record<string, string | number>,
+  parent?: Element
+) {
+  const node = document.createElementNS(SVG_NS, tag)
+  for (const [key, value] of Object.entries(attrs)) {
+    if ((key === "fill" || key === "stroke") && value === "paper") {
+      node.style.setProperty(key, PAPER)
+    } else {
+      node.setAttribute(key, String(value))
+    }
+  }
+  parent?.append(node)
+  return node
+}
+
+const linear = (t: number) => t
+const easeIn = (t: number) => t * t * t
 const easeOut = (t: number) => 1 - (1 - t) ** 3
 const easeInOut = (t: number) =>
   t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2
 
-/** Nearest turn of `angle` to `from`, so the ball spins the short way. */
-function nearest(from: number, angle: number) {
-  return from + ((((angle - from) % TAU) + TAU * 1.5) % TAU) - Math.PI
+/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */
+function pulse(t: number, from: number, rise: number, hold: number) {
+  if (t < rise) return from + (1 - from) * easeOut(t / rise)
+  if (t < rise + hold) return 1
+  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))
 }
 
-type Typeball = {
-  el: SVGSVGElement
-  /**
-   * Size the ball; `radius` and the glyph size are in px. `font` is the
-   * page's computed style — mask content doesn't inherit it everywhere.
-   */
-  layout: (radius: number, glyph: number, font: CSSStyleDeclaration) => void
-  /** Spin and tilt until `ch` faces the paper. */
-  select: (ch: string, ms: number) => void
-  /** Spin whole turns, for the glide home. */
-  whirl: (turns: number, ms: number) => void
-  /** Turn slowly while nothing is being typed. */
-  drift: (on: boolean) => void
-  destroy: () => void
+/** A point on the basket, `angle` radians from straight down. */
+function polar(r: number, angle: number): [number, number] {
+  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]
 }
 
-let ballIds = 0
-
-/**
- * The type element: a sphere wearing the keyboard in three rows. It spins
- * about its axis and tilts to bring a glyph to the front — the letters are
- * cut through the ink, so the page shows through them.
- */
-function createTypeball(): Typeball {
-  const id = `typewriter-ball-${++ballIds}`
-  const el = svgEl("svg", { overflow: "visible" })
-  el.style.position = "absolute"
-  el.style.overflow = "visible"
-  const defs = svgEl("defs")
-  const shade = svgEl("radialGradient", {
-    id: `${id}-shade`,
-    cx: 0.36,
-    cy: 0.3,
-    r: 0.8,
-  })
-  for (const [offset, alpha] of [
-    [0, 0.5],
-    [0.5, 0.86],
-    [1, 1],
-  ] as const) {
-    shade.append(
-      svgEl("stop", {
-        offset,
-        "stop-color": "currentColor",
-        "stop-opacity": alpha,
-      })
-    )
-  }
-  const mask = svgEl("mask", { id: `${id}-cut`, maskUnits: "userSpaceOnUse" })
-  const paper = svgEl("rect", { fill: "#fff" })
-  const letters = svgEl("g", {
-    fill: "#000",
-    "text-anchor": "middle",
-    "dominant-baseline": "central",
-  })
-  mask.append(paper, letters)
-  defs.append(shade, mask)
-  const sphere = svgEl("circle", {
-    fill: `url(#${id}-shade)`,
-    mask: `url(#${id}-cut)`,
-  })
-  el.append(defs, sphere)
-
-  const cols = BALL_FACES[0]!.length
-  const slots = BALL_FACES.flatMap((face, row) =>
-    Array.from(face, (glyph, col) => {
-      const node = svgEl("text")
-      node.textContent = glyph
-      letters.append(node)
-      return { row, col, glyph, node }
-    })
-  )
-
-  let radius = 16
-  let lon = 0
-  let tilt = 0
-  let lonTween: Tween | null = null
-  let tiltTween: Tween | null = null
-  let drifting = false
-  let raf = 0
-  let last = 0
-  let swapped: (typeof slots)[number] | null = null
-
-  const render = () => {
-    const r = radius * BALL_INSET
-    const sin = Math.sin(tilt)
-    const cos = Math.cos(tilt)
-    for (const slot of slots) {
-      const lat = BALL_ROWS[slot.row]!
-      const theta = (slot.col / cols) * TAU - lon
-      const x = Math.cos(lat) * Math.sin(theta)
-      const y0 = Math.sin(lat)
-      const z0 = Math.cos(lat) * Math.cos(theta)
-      const y = y0 * cos - z0 * sin
-      const z = y0 * sin + z0 * cos
-      const seen = clamp((z - 0.12) / 0.4, 0, 1)
-      if (seen <= 0) {
-        slot.node.setAttribute("fill-opacity", "0")
-        continue
-      }
-      const sx = Math.sqrt(Math.max(0.02, 1 - x * x))
-      const sy = Math.sqrt(Math.max(0.02, 1 - y * y))
-      slot.node.setAttribute("fill-opacity", (seen * 0.86).toFixed(3))
-      slot.node.setAttribute(
-        "transform",
-        `translate(${(x * r).toFixed(2)} ${(-y * r).toFixed(2)}) scale(${sx.toFixed(3)} ${sy.toFixed(3)})`
-      )
-    }
-  }
-
-  const valueOf = (tween: Tween, now: number) => {
-    const t = clamp((now - tween.start) / Math.max(1, tween.ms), 0, 1)
-    return tween.from + (tween.to - tween.from) * tween.ease(t)
-  }
-
-  const frame = (now: number) => {
-    raf = 0
-    const dt = Math.min(0.05, Math.max(0, (now - last) / 1000))
-    last = now
-    if (lonTween) {
-      lon = valueOf(lonTween, now)
-      if (now - lonTween.start >= lonTween.ms) lonTween = null
-    } else if (drifting) {
-      lon += BALL_DRIFT * dt
-    }
-    if (tiltTween) {
-      tilt = valueOf(tiltTween, now)
-      if (now - tiltTween.start >= tiltTween.ms) tiltTween = null
-    }
-    render()
-    if (lonTween || tiltTween || drifting) raf = requestAnimationFrame(frame)
-  }
-
-  const wake = () => {
-    if (raf) return
-    last = performance.now()
-    raf = requestAnimationFrame(frame)
-  }
+type Bar = {
+  rest: SVGLineElement
+  strike: SVGGElement
+  /** Page-colored outline under the bar, so it reads over the machine. */
+  arm: SVGLineElement
+  core: SVGLineElement
+  slug: SVGLineElement
+  pivot: [number, number]
+  tip: [number, number]
+  v: number
+}
 
-  const tweenTo = (current: number, to: number, ms: number, ease = easeOut) => {
-    const now = performance.now()
-    return { from: current, to, start: now, ms, ease }
-  }
+type Key = { cap: SVGGElement; bar: Bar | null; v: number }
 
-  const settle = () => {
-    const now = performance.now()
-    if (lonTween) lon = valueOf(lonTween, now)
-    if (tiltTween) tilt = valueOf(tiltTween, now)
-  }
+type Machine = {
+  columns: number
+  carriage: SVGGElement
+  paper: SVGGElement
+  sheet: SVGRectElement
+  ink: SVGGElement
+  lever: SVGGElement
+  leverPivot: [number, number]
+  knobs: { x: number; lines: SVGLineElement[] }[]
+  keys: Map<string, Key>
+  shifts: Key[]
+  space: Key
+  basket: SVGGElement
+  bars: Bar[]
+  ribbon: SVGPathElement[]
+  vibrator: SVGGElement
+  spools: SVGGElement[]
+}
 
-  return {
-    el,
-    layout(nextRadius, glyph, font) {
-      radius = nextRadius
-      const box = radius + 2
-      el.setAttribute("width", String(box * 2))
-      el.setAttribute("height", String(box * 2))
-      el.setAttribute("viewBox", `${-box} ${-box} ${box * 2} ${box * 2}`)
-      sphere.setAttribute("r", String(radius))
-      for (const [key, value] of Object.entries({
-        x: -box,
-        y: -box,
-        width: box * 2,
-        height: box * 2,
-      })) {
-        mask.setAttribute(key, String(value))
-        paper.setAttribute(key, String(value))
-      }
-      letters.setAttribute("font-size", glyph.toFixed(2))
-      Object.assign(letters.style, {
-        fontFamily: font.fontFamily,
-        fontStretch: font.fontStretch,
-        fontWeight: font.fontWeight,
-        fontVariationSettings: font.fontVariationSettings,
-      })
-      render()
-    },
-    select(ch, ms) {
-      const key = ch.toLowerCase()
-      let slot = slots.find((s) => s.glyph === key)
-      if (!slot) {
-        const code = ch.codePointAt(0) ?? 0
-        slot = slots[(code * 7) % slots.length]!
-      }
-      // Capitals and symbols borrow a slot's face until the next letter.
-      if (swapped && swapped !== slot) swapped.node.textContent = swapped.glyph
-      swapped = ch === slot.glyph ? null : slot
-      slot.node.textContent = ch
-      settle()
-      const target = nearest(lon, (slot.col / cols) * TAU)
-      lonTween = tweenTo(lon, target, ms)
-      tiltTween = tweenTo(tilt, BALL_ROWS[slot.row]!, ms)
-      wake()
-    },
-    whirl(turns, ms) {
-      settle()
-      lonTween = tweenTo(lon, lon + turns * TAU, ms, easeInOut)
-      tiltTween = tweenTo(tilt, 0, ms, easeInOut)
-      wake()
-    },
-    drift(on) {
-      drifting = on
-      if (on) wake()
-    },
-    destroy() {
-      cancelAnimationFrame(raf)
-      raf = 0
-    },
-  }
+type Motion = {
+  key: string
+  start: number
+  ms: number
+  ease: (t: number) => number
+  run: (v: number) => void
+  begin?: () => void
 }
 
+let machineIds = 0
+
 /**
- * A typewriter on the page. A rail spans the frame and a typeball rides it:
- * for every letter the ball spins that glyph to the front, strikes, and
- * steps one cell right. At the end of a line it whirls home and drops to
- * the next, and when the page is full the paper feeds up. Idle when
- * finished, off-screen, or under `prefers-reduced-motion` (which prints the
- * whole page at once).
+ * A typewriter that types. Each letter presses its key, swings that key's
+ * typebar up out of the basket to strike the ribbon, and the carriage
+ * steps one character left. Capitals hold shift, which drops the basket. At
+ * the margin the return lever kicks, the platen turns up a line, and the
+ * carriage slides home. With `loop`, the finished sheet is pulled out and
+ * a fresh one rolls in. Ink is `currentColor`; the paper takes the page
+ * color behind it. `prefers-reduced-motion` prints the whole page at once.
  */
 export function createTypewriter(
   root: HTMLElement,
@@ -554,11 +419,14 @@ export function createTypewriter(
 ): TypewriterInstance {
   let options: TypewriterOptions = { ...initial }
   const textOf = () => options.text ?? DEFAULT_TEXT
-  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 120)
+  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)
   const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)
   const startOf = () =>
     numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)
   const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)
+  const columnsOf = () =>
+    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))
+  const id = `typewriter-${++machineIds}`
 
   // Screen readers get the whole text once; the machine is decoration.
   const spoken = document.createElement("span")
@@ -573,77 +441,828 @@ export function createTypewriter(
     whiteSpace: "nowrap",
     border: "0",
   })
-
-  const stage = div({
-    position: "absolute",
-    inset: "0",
-    overflow: "hidden",
-    borderRadius: "inherit",
-    pointerEvents: "none",
-  })
-  stage.setAttribute("aria-hidden", "true")
-  const viewport = div({ position: "absolute", inset: "0" })
-  const page = div({
-    position: "absolute",
-    left: "0",
-    top: "0",
-    right: "0",
-    whiteSpace: "pre",
-    willChange: "transform",
-  })
-  const carriage = div({
-    position: "absolute",
-    left: "0",
-    top: "0",
+  const svg = draw("svg", {
     width: "100%",
-    willChange: "transform",
-  })
-  const rail = svgEl("svg", { overflow: "visible" })
-  rail.style.position = "absolute"
-  rail.style.left = "0"
-  rail.style.overflow = "visible"
-  const head = div({
-    position: "absolute",
-    left: "0",
-    top: "0",
-    willChange: "transform",
+    height: "100%",
+    preserveAspectRatio: "xMidYMid meet",
+    "aria-hidden": "true",
   })
-  const clamps = svgEl("svg", { overflow: "visible" })
-  clamps.style.position = "absolute"
-  clamps.style.overflow = "visible"
-  const ball = createTypeball()
-
-  head.append(clamps, ball.el)
-  carriage.append(rail, head)
-  viewport.append(page)
-  stage.append(viewport, carriage)
-  root.append(spoken, stage)
-
-  // Font metrics and frame, refreshed by `measure`.
-  const m = {
-    fs: 16,
-    cw: 9.6,
-    lh: 35,
-    base: 22,
-    width: 0,
-    height: 0,
-    padT: 0,
-    padB: 0,
-    margin: 0,
-    columns: 1,
-    radius: 16,
-    /** Baseline to the ball's centre, which is also the rail's. */
-    axis: 20,
-    /** Cell centre to the outer edge of a rail clamp. */
-    half: 24,
+  svg.style.display = "block"
+  root.append(spoken, svg)
+
+  let M!: Machine
+
+  /* ---------------------------------------------------------------- */
+  /* Drawing                                                           */
+  /* ---------------------------------------------------------------- */
+
+  const build = () => {
+    const columns = columnsOf()
+    const span = columns * CW
+    const platenL = -PAD - 22
+    const platenR = span + PAD + 22
+    const knobW = 14
+    const leverX = platenL - knobW - 3
+    // Room for the carriage at both ends of its travel, and the body.
+    const left = leverX - 52 - (span + CW / 2)
+    const right = platenR + knobW - CW / 2
+    const half = Math.ceil(Math.max(-left, right, 262) + 14)
+    svg.replaceChildren()
+    svg.setAttribute(
+      "viewBox",
+      `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`
+    )
+
+    // The sheet fades out at the top of the frame and tucks behind the
+    // platen at the bottom.
+    const defs = draw("defs", {}, svg)
+    const fade = draw(
+      "linearGradient",
+      {
+        id: `${id}-fade-g`,
+        gradientUnits: "userSpaceOnUse",
+        x1: 0,
+        x2: 0,
+        y1: VIEW_TOP,
+        y2: 40,
+      },
+      defs
+    )
+    const soft = 84 / (40 - VIEW_TOP)
+    for (const [offset, alpha] of [
+      [0, 0],
+      [soft, 1],
+      [0.998, 1],
+      [1, 0],
+    ] as const) {
+      draw(
+        "stop",
+        { offset, "stop-color": "#fff", "stop-opacity": alpha },
+        fade
+      )
+    }
+    const box = {
+      x: -4000,
+      y: VIEW_TOP - 4,
+      width: 8000,
+      height: 48 - VIEW_TOP,
+    }
+    const mask = draw(
+      "mask",
+      { id: `${id}-fade`, maskUnits: "userSpaceOnUse", ...box },
+      defs
+    )
+    draw("rect", { ...box, fill: `url(#${id}-fade-g)` }, mask)
+
+    /* Carriage: rail, platen, knobs, return lever, the sheet, the scale. */
+    const carriage = draw("g", {}, svg)
+    draw(
+      "rect",
+      {
+        x: platenL - knobW,
+        y: 42,
+        width: platenR - platenL + knobW * 2,
+        height: 6,
+        rx: 3,
+        fill: "currentColor",
+        "fill-opacity": 0.7,
+      },
+      carriage
+    )
+    draw(
+      "rect",
+      {
+        x: platenL,
+        y: 6,
+        width: platenR - platenL,
+        height: 34,
+        rx: 10,
+        fill: "currentColor",
+      },
+      carriage
+    )
+    draw(
+      "rect",
+      {
+        x: platenL + 8,
+        y: 11,
+        width: platenR - platenL - 16,
+        height: 2,
+        rx: 1,
+        fill: "paper",
+        "fill-opacity": 0.3,
+      },
+      carriage
+    )
+    const knobs = [platenL - knobW, platenR].map((x) => {
+      draw(
+        "rect",
+        { x, y: 2, width: knobW, height: 42, rx: 5, fill: "currentColor" },
+        carriage
+      )
+      const lines = Array.from({ length: RIDGES }, () =>
+        draw(
+          "line",
+          {
+            x1: x + 2.6,
+            x2: x + knobW - 2.6,
+            stroke: "paper",
+            "stroke-width": 1.1,
+            "stroke-linecap": "round",
+          },
+          carriage
+        )
+      )
+      return { x, lines }
+    })
+    const lever = draw("g", {}, carriage)
+    const leverPivot: [number, number] = [leverX, 32]
+    draw(
+      "rect",
+      {
+        x: leverX - 5,
+        y: 22,
+        width: 9,
+        height: 22,
+        rx: 2.5,
+        fill: "currentColor",
+      },
+      lever
+    )
+    draw(
+      "path",
+      {
+        d: `M${leverX} 30L${leverX - 12} 6L${leverX - 34} -12`,
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": 5,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+      },
+      lever
+    )
+    draw(
+      "rect",
+      {
+        x: leverX - 52,
+        y: -23,
+        width: 26,
+        height: 10,
+        rx: 5,
+        fill: "currentColor",
+        transform: `rotate(-24 ${leverX - 39} -18)`,
+      },
+      lever
+    )
+
+    const wrap = draw("g", { mask: `url(#${id}-fade)` }, carriage)
+    const paper = draw("g", {}, wrap)
+    const sheet = draw(
+      "rect",
+      {
+        x: -PAD,
+        y: -TOP_MARGIN,
+        width: span + PAD * 2,
+        height: 600,
+        fill: "paper",
+        stroke: "currentColor",
+        "stroke-opacity": 0.24,
+        "stroke-width": 1,
+      },
+      paper
+    )
+    const ink = draw(
+      "g",
+      { "text-anchor": "middle", "font-size": FONT, fill: "currentColor" },
+      paper
+    )
+
+    // The paper scale, just under the print line.
+    draw(
+      "rect",
+      {
+        x: -PAD + 4,
+        y: 9,
+        width: span + PAD * 2 - 8,
+        height: 5,
+        rx: 2.5,
+        fill: "currentColor",
+      },
+      carriage
+    )
+    let ticks = ""
+    for (let c = 0; c <= columns; c++) {
+      const x = c * CW
+      ticks += `M${x} 9.7V${c % 10 === 0 ? 13.3 : c % 5 === 0 ? 12.2 : 11}`
+    }
+    draw(
+      "path",
+      {
+        d: ticks,
+        stroke: "paper",
+        "stroke-width": 0.8,
+        "stroke-opacity": 0.75,
+        fill: "none",
+      },
+      carriage
+    )
+
+    /* Body: keyboard well, frame, basket, deck, spools, ribbon, keys. */
+    const body = draw("g", {}, svg)
+    draw(
+      "path",
+      {
+        d: "M-226 112H226L246 272H-246Z",
+        fill: "currentColor",
+        "fill-opacity": 0.07,
+      },
+      body
+    )
+    for (const side of [-1, 1]) {
+      draw(
+        "path",
+        {
+          d: `M${side * 212} 108L${side * 232} 108L${side * 260} 272L${side * 238} 272Z`,
+          fill: "currentColor",
+        },
+        body
+      )
+    }
+
+    const basket = draw("g", {}, body)
+    const [ax, ay] = polar(63, -SPREAD - 0.1)
+    const [bx, by] = polar(63, SPREAD + 0.1)
+    const [cx, cy] = polar(55, SPREAD + 0.1)
+    const [dx, dy] = polar(55, -SPREAD - 0.1)
+    draw(
+      "path",
+      {
+        d: `M${ax} ${ay}A63 63 0 0 0 ${bx} ${by}L${cx} ${cy}A55 55 0 0 1 ${dx} ${dy}Z`,
+        fill: "currentColor",
+      },
+      basket
+    )
+
+    // The deck, with the basket showing through its notch.
+    draw(
+      "path",
+      {
+        d: "M-194 50H-67A67 67 0 0 0 67 50H194Q210 50 212 66L228 108Q230 116 220 116H-220Q-230 116 -228 108L-212 66Q-210 50 -194 50Z",
+        fill: "currentColor",
+      },
+      body
+    )
+    draw(
+      "path",
+      {
+        d: "M-216 109H216",
+        stroke: "paper",
+        "stroke-opacity": 0.22,
+        "stroke-width": 1,
+      },
+      body
+    )
+
+    const spools = [-150, 150].map((x) => {
+      draw(
+        "circle",
+        {
+          cx: x,
+          cy: 84,
+          r: 23,
+          fill: "currentColor",
+          stroke: "paper",
+          "stroke-opacity": 0.45,
+          "stroke-width": 1.1,
+        },
+        body
+      )
+      const turn = draw("g", {}, body)
+      for (let i = 0; i < 5; i++) {
+        const a = (i / 5) * TAU
+        draw(
+          "circle",
+          {
+            cx: x + Math.cos(a) * 13,
+            cy: 84 + Math.sin(a) * 13,
+            r: 3.6,
+            fill: "paper",
+          },
+          turn
+        )
+      }
+      draw("circle", { cx: x, cy: 84, r: 4.4, fill: "paper" }, turn)
+      draw("circle", { cx: x, cy: 84, r: 1.8, fill: "currentColor" }, turn)
+      return turn
+    })
+
+    // The type guide either side of the print point.
+    for (const side of [-1, 1]) {
+      draw(
+        "rect",
+        {
+          x: side < 0 ? -22 : 17,
+          y: 1,
+          width: 5,
+          height: 15,
+          rx: 1.5,
+          fill: "currentColor",
+          stroke: "paper",
+          "stroke-width": 1.2,
+          "paint-order": "stroke",
+        },
+        body
+      )
+    }
+
+    const ribbon = [
+      draw(
+        "path",
+        {
+          fill: "none",
+          stroke: "paper",
+          "stroke-width": 6.4,
+          "stroke-linejoin": "round",
+        },
+        body
+      ),
+      draw(
+        "path",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": 3.2,
+          "stroke-linejoin": "round",
+        },
+        body
+      ),
+    ]
+    const vibrator = draw("g", {}, body)
+    for (const [stroke, width] of [
+      ["paper", 4.4],
+      ["currentColor", 2],
+    ] as const) {
+      draw(
+        "path",
+        {
+          d: "M-12 3V11.5H12V3",
+          fill: "none",
+          stroke,
+          "stroke-width": width,
+          "stroke-linejoin": "round",
+          "stroke-linecap": "round",
+        },
+        vibrator
+      )
+    }
+
+    // Keys: round caps on stems, in four staggered rows.
+    const keyAt = (x: number, y: number, label: string) => {
+      draw(
+        "line",
+        {
+          x1: x,
+          y1: y,
+          x2: x,
+          y2: y + 24,
+          stroke: "currentColor",
+          "stroke-opacity": 0.42,
+          "stroke-width": 2.4,
+          "stroke-linecap": "round",
+        },
+        body
+      )
+      const cap = draw("g", {}, body)
+      draw("circle", { cx: x, cy: y, r: KEY_R + 1.6, fill: "paper" }, cap)
+      draw("circle", { cx: x, cy: y, r: KEY_R, fill: "currentColor" }, cap)
+      draw(
+        "circle",
+        {
+          cx: x,
+          cy: y,
+          r: KEY_R - 2.6,
+          fill: "none",
+          stroke: "paper",
+          "stroke-opacity": 0.45,
+          "stroke-width": 0.9,
+        },
+        cap
+      )
+      const text = draw(
+        "text",
+        {
+          x,
+          y: y + 0.5,
+          "text-anchor": "middle",
+          "dominant-baseline": "central",
+          "font-size": 10,
+          "font-weight": 600,
+          fill: "paper",
+        },
+        cap
+      )
+      text.textContent = label
+      return cap
+    }
+
+    const keys = new Map<string, Key>()
+    const placed: { ch: string; x: number; key: Key }[] = []
+    KEY_ROWS.forEach((row, r) => {
+      Array.from(row).forEach((ch, i) => {
+        const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH
+        const key: Key = {
+          cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),
+          bar: null,
+          v: 0,
+        }
+        keys.set(ch, key)
+        placed.push({ ch, x, key })
+      })
+    })
+
+    const pill = (x: number, y: number, w: number, h: number) => {
+      for (const sx of [x - w * 0.3, x + w * 0.3]) {
+        draw(
+          "line",
+          {
+            x1: sx,
+            y1: y,
+            x2: sx,
+            y2: y + 22,
+            stroke: "currentColor",
+            "stroke-opacity": 0.42,
+            "stroke-width": 2.4,
+            "stroke-linecap": "round",
+          },
+          body
+        )
+      }
+      const cap = draw("g", {}, body)
+      draw(
+        "rect",
+        {
+          x: x - w / 2 - 1.6,
+          y: y - h / 2 - 1.6,
+          width: w + 3.2,
+          height: h + 3.2,
+          rx: h / 2 + 1.6,
+          fill: "paper",
+        },
+        cap
+      )
+      draw(
+        "rect",
+        {
+          x: x - w / 2,
+          y: y - h / 2,
+          width: w,
+          height: h,
+          rx: h / 2,
+          fill: "currentColor",
+        },
+        cap
+      )
+      return cap
+    }
+    const shifts = [-1, 1].map((side) => {
+      const x = side * 201
+      const cap = pill(x, KEY_Y[3]!, 30, 22)
+      draw(
+        "path",
+        {
+          d: `M${x} ${KEY_Y[3]! - 5}L${x + 5} ${KEY_Y[3]! + 1}H${x + 2}V${KEY_Y[3]! + 5}H${x - 2}V${KEY_Y[3]! + 1}H${x - 5}Z`,
+          fill: "paper",
+        },
+        cap
+      )
+      return { cap, bar: null, v: 0 } satisfies Key
+    })
+    const space: Key = { cap: pill(0, 258, 210, 11), bar: null, v: 0 }
+
+    // Base and feet.
+    draw(
+      "rect",
+      {
+        x: -260,
+        y: 272,
+        width: 520,
+        height: 20,
+        rx: 8,
+        fill: "currentColor",
+      },
+      body
+    )
+    draw(
+      "path",
+      {
+        d: "M-250 277H250",
+        stroke: "paper",
+        "stroke-opacity": 0.22,
+        "stroke-width": 1,
+      },
+      body
+    )
+    for (const x of [-238, 202]) {
+      draw(
+        "rect",
+        {
+          x,
+          y: 290,
+          width: 36,
+          height: 8,
+          rx: 3,
+          fill: "currentColor",
+        },
+        body
+      )
+    }
+
+    // One typebar per key, fanned left to right in key order.
+    const overlay = draw("g", {}, svg)
+    placed.sort((a, b) => a.x - b.x)
+    const bars = placed.map(({ key }, i) => {
+      const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)
+      const pivot = polar(PIVOT_R, angle)
+      const tip = polar(REST_R, angle)
+      const rest = draw(
+        "line",
+        {
+          x1: pivot[0],
+          y1: pivot[1],
+          x2: tip[0],
+          y2: tip[1],
+          stroke: "currentColor",
+          "stroke-width": 1.3,
+          "stroke-linecap": "round",
+        },
+        basket
+      )
+      const strike = draw("g", { display: "none" }, overlay)
+      const arm = draw(
+        "line",
+        {
+          stroke: "paper",
+          "stroke-width": 4.4,
+          "stroke-linecap": "round",
+        },
+        strike
+      )
+      const core = draw(
+        "line",
+        {
+          stroke: "currentColor",
+          "stroke-width": 2,
+          "stroke-linecap": "round",
+        },
+        strike
+      )
+      const slug = draw(
+        "line",
+        {
+          stroke: "currentColor",
+          "stroke-width": 5.5,
+          "stroke-linecap": "round",
+        },
+        strike
+      )
+      const bar: Bar = { rest, strike, arm, core, slug, pivot, tip, v: 0 }
+      key.bar = bar
+      return bar
+    })
+
+    M = {
+      columns,
+      carriage,
+      paper,
+      sheet,
+      ink,
+      lever,
+      leverPivot,
+      knobs,
+      keys,
+      shifts,
+      space,
+      basket,
+      bars,
+      ribbon,
+      vibrator,
+      spools,
+    }
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Poses                                                             */
+  /* ---------------------------------------------------------------- */
+
+  const pose = {
+    carriage: 0,
+    paper: 0,
+    knob: 0,
+    spool: 0,
+    lever: 0,
+    shift: 0,
+    ribbon: 0,
+  }
+
+  const carriageAt = (col: number) => -(col * CW + CW / 2)
+
+  const setCarriage = (x: number) => {
+    pose.carriage = x
+    M.carriage.setAttribute("transform", `translate(${x.toFixed(2)} 0)`)
+  }
+  const setPaper = (y: number) => {
+    pose.paper = y
+    M.paper.setAttribute("transform", `translate(0 ${y.toFixed(2)})`)
+  }
+  /** Knurling on the platen knobs, scrolling as the platen turns. */
+  const setKnob = (phase: number) => {
+    pose.knob = phase
+    for (const knob of M.knobs) {
+      knob.lines.forEach((line, i) => {
+        const a = phase + (i / RIDGES) * TAU
+        const facing = Math.cos(a)
+        if (facing <= 0.05) {
+          line.setAttribute("stroke-opacity", "0")
+          return
+        }
+        const y = (23 + Math.sin(a) * 19).toFixed(2)
+        line.setAttribute("y1", y)
+        line.setAttribute("y2", y)
+        line.setAttribute("stroke-opacity", (0.18 + facing * 0.42).toFixed(2))
+      })
+    }
+  }
+  const setSpool = (deg: number) => {
+    pose.spool = deg
+    M.spools.forEach((spool, i) => {
+      const x = i === 0 ? -150 : 150
+      spool.setAttribute("transform", `rotate(${deg.toFixed(1)} ${x} 84)`)
+    })
+  }
+  const setLever = (deg: number) => {
+    pose.lever = deg
+    const [x, y] = M.leverPivot
+    M.lever.setAttribute("transform", `rotate(${deg.toFixed(2)} ${x} ${y})`)
+  }
+  const setShift = (v: number) => {
+    pose.shift = v
+    M.basket.setAttribute("transform", `translate(0 ${(v * 4).toFixed(2)})`)
+    for (const key of M.shifts) setKey(key, v)
+  }
+  /** The ribbon vibrator lifts the ribbon over the print point. */
+  const setRibbon = (v: number) => {
+    pose.ribbon = v
+    const lift = v * 13
+    const y = 7.5 - lift
+    const d = `M-150 61L-12 ${y.toFixed(2)}H12L150 61`
+    for (const path of M.ribbon) path.setAttribute("d", d)
+    M.vibrator.setAttribute("transform", `translate(0 ${(-lift).toFixed(2)})`)
+  }
+  const setKey = (key: Key, v: number) => {
+    key.v = v
+    key.cap.setAttribute(
+      "transform",
+      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : ""
+    )
+  }
+  /** 0 rests in the basket; 1 is the slug on the paper. */
+  const setBar = (bar: Bar, v: number) => {
+    bar.v = v
+    if (v <= 0.001) {
+      bar.rest.removeAttribute("display")
+      bar.strike.setAttribute("display", "none")
+      return
+    }
+    bar.rest.setAttribute("display", "none")
+    bar.strike.removeAttribute("display")
+    const drop = pose.shift * 4
+    const [px, py0] = bar.pivot
+    const py = py0 + drop
+    const tx = bar.tip[0] + (0 - bar.tip[0]) * v
+    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v
+    const len = Math.hypot(tx - px, ty - py) || 1
+    const ux = (tx - px) / len
+    const uy = (ty - py) / len
+    for (const line of [bar.arm, bar.core]) {
+      line.setAttribute("x1", px.toFixed(2))
+      line.setAttribute("y1", py.toFixed(2))
+      line.setAttribute("x2", tx.toFixed(2))
+      line.setAttribute("y2", ty.toFixed(2))
+    }
+    bar.slug.setAttribute("x1", (tx - ux * 6).toFixed(2))
+    bar.slug.setAttribute("y1", (ty - uy * 6).toFixed(2))
+    bar.slug.setAttribute("x2", tx.toFixed(2))
+    bar.slug.setAttribute("y2", ty.toFixed(2))
+  }
+
+  /** Everything at rest, the carriage and sheet where the text has got to. */
+  const restPose = () => {
+    setCarriage(carriageAt(cursor.col))
+    setPaper(-cursor.line * LH)
+    setKnob(pose.knob)
+    setSpool(pose.spool)
+    setLever(0)
+    setShift(0)
+    setRibbon(0)
+    for (const key of M.keys.values()) setKey(key, 0)
+    setKey(M.space, 0)
+    for (const bar of M.bars) setBar(bar, 0)
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Motion                                                            */
+  /* ---------------------------------------------------------------- */
+
+  const queued: Motion[] = []
+  const running = new Map<string, Motion>()
+  let raf = 0
+
+  const frame = (now: number) => {
+    raf = 0
+    queued.sort((a, b) => a.start - b.start)
+    while (queued.length && queued[0]!.start <= now) {
+      const motion = queued.shift()!
+      motion.begin?.()
+      running.set(motion.key, motion)
+    }
+    for (const [key, motion] of running) {
+      const t = clamp((now - motion.start) / motion.ms, 0, 1)
+      motion.run(motion.ease(t))
+      if (t >= 1) running.delete(key)
+    }
+    if (queued.length || running.size) raf = requestAnimationFrame(frame)
+  }
+  const wake = () => {
+    if (!raf) raf = requestAnimationFrame(frame)
+  }
+  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */
+  const play = (
+    key: string,
+    ms: number,
+    run: (v: number) => void,
+    {
+      delay = 0,
+      ease = linear,
+      begin,
+    }: {
+      delay?: number
+      ease?: (t: number) => number
+      begin?: () => void
+    } = {}
+  ) => {
+    queued.push({
+      key,
+      start: performance.now() + delay,
+      ms: Math.max(1, ms),
+      ease,
+      run,
+      begin,
+    })
+    wake()
+  }
+  /** Ease a pose from wherever it is when the motion starts. */
+  const tween = (
+    key: string,
+    get: () => number,
+    set: (v: number) => void,
+    to: number,
+    ms: number,
+    opts: { delay?: number; ease?: (t: number) => number } = {}
+  ) => {
+    let from = 0
+    play(key, ms, (v) => set(from + (to - from) * v), {
+      ...opts,
+      begin: () => {
+        from = get()
+      },
+    })
   }
+  const stopMotion = () => {
+    queued.length = 0
+    running.clear()
+    cancelAnimationFrame(raf)
+    raf = 0
+  }
+
+  const press = (name: string, key: Key, ms: number, delay = 0) => {
+    let from = 0
+    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {
+      delay,
+      begin: () => {
+        from = key.v
+      },
+    })
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Typing                                                            */
+  /* ---------------------------------------------------------------- */
 
   let strokes: TypewriterStroke[] = []
   /** Strokes on the page. */
   let pos = 0
   let cursor = { line: 0, col: 0 }
-  let scroll = 0
-  let lines: HTMLDivElement[] = []
+  let sheetH = 600
   let phase: "waiting" | "typing" | "done" | "feeding" = "waiting"
   let rang = false
   let destroyed = false
@@ -679,9 +1298,6 @@ export function createTypewriter(
     timer = 0
     pending = null
   }
-  /** The ball turns idly between pages, but only while anyone can see it. */
-  const idle = () =>
-    ball.drift((phase === "waiting" || phase === "done") && active())
   const sync = () => {
     if (active()) {
       if (pending && !timer) arm()
@@ -690,11 +1306,6 @@ export function createTypewriter(
       timer = 0
       remaining = Math.max(0, dueAt - performance.now())
     }
-    idle()
-  }
-  const setPhase = (next: typeof phase) => {
-    phase = next
-    idle()
   }
 
   const soundOn = () => {
@@ -703,283 +1314,70 @@ export function createTypewriter(
     return sound
   }
 
-  const cellX = (col: number) => m.margin + col * m.cw
-  const lineTop = (line: number) => m.padT + line * m.lh
-  /** How far the paper must feed up to keep the carriage on `line` in frame. */
-  const scrollFor = (line: number) => {
-    const floor = m.height - Math.min(m.padB, m.fs * 0.6)
-    return Math.max(0, lineTop(line) + m.base + m.axis + m.radius - floor)
-  }
-
-  const setTransition = (
-    el: HTMLElement,
-    ms: number,
-    ease: string,
-    delay = 0
-  ) => {
-    el.style.transition =
-      ms > 0 ? `transform ${ms}ms ${ease} ${Math.round(delay)}ms` : "none"
-  }
-  const placeHead = (col: number, ms = 0, ease = "linear", delay = 0) => {
-    setTransition(head, ms, ease, delay)
-    head.style.transform = `translate3d(${cellX(col)}px,0,0)`
-  }
-  const placeCarriage = (line: number, ms = 0, ease = "linear") => {
-    setTransition(carriage, ms, ease)
-    const y = Math.round(lineTop(line) - scroll + m.base)
-    carriage.style.transform = `translate3d(0,${y}px,0)`
-  }
-  const placePage = (ms = 0, ease = "linear") => {
-    page.style.transition =
-      ms > 0 ? `transform ${ms}ms ${ease}, opacity ${ms}ms ${ease}` : "none"
-    page.style.transform = `translate3d(0,${-scroll}px,0)`
-    viewport.style.maskImage = viewport.style.webkitMaskImage =
-      scroll > 0
-        ? `linear-gradient(to bottom, transparent 0, #000 ${Math.max(m.padT, m.lh * 0.8)}px)`
-        : ""
-  }
-
-  const lineEl = (index: number) => {
-    while (lines.length <= index) {
-      const el = div({
-        position: "absolute",
-        left: "0",
-        right: "0",
-        top: `${lineTop(lines.length)}px`,
-        height: `${m.lh}px`,
-      })
-      page.append(el)
-      lines.push(el)
-    }
-    return lines[index]!
+  const after = (stroke: TypewriterStroke | undefined) => {
+    if (!stroke) return { line: 0, col: 0 }
+    return stroke.kind === "char"
+      ? { line: stroke.line, col: stroke.col + 1 }
+      : { line: stroke.line, col: 0 }
   }
 
   const letter = (stroke: Extract<TypewriterStroke, { kind: "char" }>) => {
     const jitter = jitterOf()
     const n = Math.floor(stroke.src) * 4
-    const el = document.createElement("span")
+    const x = stroke.col * CW + CW / 2
+    const y = stroke.line * LH
+    const el = draw("text", { x, y }, M.ink)
     el.textContent = stroke.ch
-    Object.assign(el.style, {
-      position: "absolute",
-      top: "0",
-      left: `${cellX(stroke.col)}px`,
-      width: `${m.cw}px`,
-      height: `${m.lh}px`,
-      lineHeight: `${m.lh}px`,
-      textAlign: "center",
-    })
+    let ink = 1
     if (jitter > 0) {
-      const dx = (hash(n) - 0.5) * jitter * 0.07 * m.fs
-      const dy = (hash(n + 1) - 0.5) * jitter * 0.1 * m.fs
+      const dx = (hash(n) - 0.5) * jitter * 1.1
+      const dy = (hash(n + 1) - 0.5) * jitter * 1.6
       const tilt = (hash(n + 2) - 0.5) * jitter * 3.2
-      el.style.transform = `translate(${dx.toFixed(2)}px,${dy.toFixed(2)}px) rotate(${tilt.toFixed(2)}deg)`
-      el.style.opacity = (1 - hash(n + 3) * jitter * 0.42).toFixed(3)
+      el.setAttribute(
+        "transform",
+        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`
+      )
+      ink = 1 - hash(n + 3) * jitter * 0.42
     }
-    lineEl(stroke.line).append(el)
-    return el
+    el.setAttribute("fill-opacity", ink.toFixed(3))
+    return { el, ink }
   }
 
-  const after = (stroke: TypewriterStroke | undefined) => {
-    if (!stroke) return { line: 0, col: 0 }
-    return stroke.kind === "char"
-      ? { line: stroke.line, col: stroke.col + 1 }
-      : { line: stroke.line, col: 0 }
+  const sizeSheet = () => {
+    const lines = (strokes.at(-1)?.line ?? 0) + 1
+    sheetH = Math.max(
+      TOP_MARGIN + lines * LH + 60,
+      (M.columns * CW + PAD * 2) * 1.3
+    )
+    M.sheet.setAttribute("height", sheetH.toFixed(0))
   }
 
-  /** Paint the first `pos` strokes and park the carriage, without motion. */
+  /** Print the first `pos` strokes and park the machine, without motion. */
   const paint = () => {
-    page.replaceChildren()
-    lines = []
+    M.ink.replaceChildren()
     for (let i = 0; i < pos; i++) {
       const stroke = strokes[i]!
       if (stroke.kind === "char" && stroke.ch !== " ") letter(stroke)
     }
     cursor = after(strokes[pos - 1])
-    scroll = scrollFor(cursor.line)
-    placePage()
-    placeCarriage(cursor.line)
-    placeHead(cursor.col)
-    rang = cursor.col >= m.columns - BELL_CELLS
-  }
-
-  const drawRail = () => {
-    const { width, fs, cw, columns } = m
-    const h = Math.max(3, Math.round(RAIL_H * fs))
-    rail.setAttribute("width", String(width))
-    rail.setAttribute("height", String(h + 1))
-    rail.setAttribute("viewBox", `0 0 ${width} ${h + 1}`)
-    rail.style.top = `${Math.round(m.axis - h / 2)}px`
-    rail.replaceChildren()
-    const g = svgEl("g", { fill: "none", stroke: "currentColor" })
-    g.append(
-      svgEl("path", {
-        d: `M0 0.5H${width}M0 ${h + 0.5}H${width}`,
-        "stroke-opacity": 0.3,
-        "stroke-width": 1,
-      })
-    )
-    if (options.ticks ?? true) {
-      let minor = ""
-      let major = ""
-      for (let c = 0; c <= columns; c++) {
-        const x = Math.round(m.margin + c * cw + cw / 2) + 0.5
-        if (c % 5 === 0) major += `M${x} 1V${c % 10 === 0 ? h : h * 0.62}`
-        else minor += `M${x} 1V${h * 0.36}`
-      }
-      g.append(
-        svgEl("path", { d: minor, "stroke-opacity": 0.22, "stroke-width": 1 }),
-        svgEl("path", { d: major, "stroke-opacity": 0.42, "stroke-width": 1 })
-      )
-    }
-    // Margin stops: where the carriage returns to, and where the bell rings.
-    const stopW = Math.max(2, Math.round(fs * 0.14))
-    const stopH = h + Math.round(fs * 0.32)
-    for (const x of [m.margin, m.margin + columns * cw]) {
-      g.append(
-        svgEl("rect", {
-          x: Math.round(x - stopW / 2),
-          y: Math.round((h - stopH) / 2) + 0.5,
-          width: stopW,
-          height: stopH,
-          rx: stopW / 2,
-          fill: "currentColor",
-          "fill-opacity": 0.55,
-          stroke: "none",
-        })
-      )
-    }
-    rail.append(g)
+    rang = cursor.col >= M.columns - BELL_CELLS
+    restPose()
   }
 
-  /** The ball, and the two clamps that hold it on the rail. */
-  const drawHead = () => {
-    const { fs, cw, radius, axis, half } = m
-    const box = radius + 2
-    ball.layout(radius, radius * BALL_GLYPH, getComputedStyle(root))
-    ball.el.style.left = `${cw / 2 - box}px`
-    ball.el.style.top = `${axis - box}px`
-
-    const railH = Math.max(3, Math.round(RAIL_H * fs))
-    const w = Math.max(3, Math.round(CLAMP_W * fs))
-    const h = railH + Math.round(fs * 0.42)
-    const gap = Math.round(CLAMP_GAP * fs)
-    clamps.setAttribute("width", String(half * 2))
-    clamps.setAttribute("height", String(h))
-    clamps.setAttribute("viewBox", `${-half} ${-h / 2} ${half * 2} ${h}`)
-    clamps.style.left = `${cw / 2 - half}px`
-    clamps.style.top = `${axis - h / 2}px`
-    clamps.replaceChildren()
-    for (const side of [-1, 1]) {
-      const inner = radius + gap
-      const x = side < 0 ? -inner - w : inner
-      clamps.append(
-        // The collar that grips the rail…
-        svgEl("rect", {
-          x,
-          y: -h / 2,
-          width: w,
-          height: h,
-          rx: Math.min(w / 2, fs * 0.12),
-          fill: "currentColor",
-        }),
-        // …and the axle stub it holds the ball by.
-        svgEl("rect", {
-          x: side < 0 ? -inner : radius - 1,
-          y: -Math.max(1, railH * 0.25),
-          width: gap + 1,
-          height: Math.max(2, railH * 0.5),
-          fill: "currentColor",
-        })
-      )
+  const keyFor = (ch: string) => {
+    const lower = ch.toLowerCase()
+    const own = M.keys.get(lower)
+    if (own) return { key: own, shift: ch !== lower }
+    const base = SHIFTED[ch]
+    if (base) return { key: M.keys.get(base)!, shift: true }
+    // Anything the keyboard doesn't have borrows a key.
+    const all = [...M.keys.values()]
+    return {
+      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,
+      shift: false,
     }
   }
 
-  const measure = () => {
-    const cs = getComputedStyle(root)
-    const fs = parseFloat(cs.fontSize) || 16
-    const probe = document.createElement("span")
-    probe.textContent = "0000000000"
-    Object.assign(probe.style, {
-      position: "absolute",
-      visibility: "hidden",
-      whiteSpace: "pre",
-    })
-    const marker = document.createElement("span")
-    Object.assign(marker.style, {
-      display: "inline-block",
-      width: "0",
-      height: "0",
-      verticalAlign: "baseline",
-    })
-    const lh = Math.round(fs * LEADING)
-    const row = div({
-      position: "absolute",
-      visibility: "hidden",
-      lineHeight: `${lh}px`,
-      height: `${lh}px`,
-    })
-    row.append("x", marker)
-    stage.append(probe, row)
-    const cw = probe.getBoundingClientRect().width / 10 || fs * 0.6
-    const base = marker.offsetTop
-    probe.remove()
-    row.remove()
-
-    const width = root.clientWidth
-    const height = root.clientHeight
-    const padL = parseFloat(cs.paddingLeft) || 0
-    const padR = parseFloat(cs.paddingRight) || 0
-    const radius = Math.round(fs * BALL_R)
-    const half = Math.ceil(
-      radius + Math.round(CLAMP_GAP * fs) + Math.round(CLAMP_W * fs)
-    )
-    const reach = half - cw / 2
-    const edge = fs * 0.5
-    // The carriage never hangs off the frame, even at the margins.
-    const margin = Math.max(padL, Math.ceil(reach + edge))
-    const fit = Math.floor(
-      Math.min(width - padR - margin, width - edge - reach - cw - margin) / cw
-    )
-    const wanted = Math.floor(numberOr(options.columns, 0, 0, 1000))
-    const columns = Math.max(1, wanted > 0 ? Math.min(wanted, fit) : fit)
-
-    const changed =
-      fs !== m.fs ||
-      cw !== m.cw ||
-      lh !== m.lh ||
-      columns !== m.columns ||
-      width !== m.width
-    Object.assign(m, {
-      fs,
-      cw,
-      lh,
-      base,
-      width,
-      height,
-      padT: parseFloat(cs.paddingTop) || 0,
-      padB: parseFloat(cs.paddingBottom) || 0,
-      margin,
-      columns,
-      radius,
-      axis: Math.round(BALL_GAP * fs + radius),
-      half,
-    })
-    return changed
-  }
-
-  /** Lay the text out again for the current frame, keeping the place. */
-  const relayout = () => {
-    const at = strokes[pos - 1]?.src ?? -1
-    strokes = layoutTypewriter(textOf(), m.columns)
-    pos = phase === "done" ? strokes.length : 0
-    if (phase !== "done") {
-      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1
-    }
-    drawRail()
-    drawHead()
-    paint()
-  }
-
   const pace = (ch: string) => {
     const base = 1000 / speedOf()
     if (!(options.humanize ?? true)) return base
@@ -991,66 +1389,118 @@ export function createTypewriter(
     return base * factor
   }
 
-  /** Spin the glyph round, strike, then step the carriage a cell right. */
+  /** Press the key, swing its bar into the ribbon, step the carriage. */
   const strike = (stroke: Extract<TypewriterStroke, { kind: "char" }>) => {
     const base = 1000 / speedOf()
-    const spin = stroke.ch === " " ? 0 : clamp(base * 0.4, 16, 70)
-    const step = Math.min(90, base * 0.7)
-    if (stroke.ch !== " ") {
-      ball.select(stroke.ch, spin)
-      letter(stroke).animate([{ opacity: 0 }, {}], {
-        duration: Math.min(70, step),
-        delay: spin,
-        easing: "ease-out",
-        fill: "backwards",
+    const ms = clamp(base * 1.7, 90, 170)
+    const audio = soundOn()
+    const step = carriageAt(stroke.col + 1)
+    cursor = { line: stroke.line, col: stroke.col + 1 }
+
+    if (stroke.ch === " ") {
+      press("space", M.space, ms)
+      tween("carriage", () => pose.carriage, setCarriage, step, ms * 0.4, {
+        delay: ms * 0.2,
+        ease: easeOut,
       })
-      ball.el.animate(
-        [
-          { transform: "translateY(0)" },
-          { transform: `translateY(${(-m.fs * 0.22).toFixed(2)}px)` },
-          { transform: "translateY(0)" },
-        ],
-        {
-          duration: Math.min(110, base * 0.9),
-          delay: spin * 0.55,
-          easing: "cubic-bezier(.3,.7,.4,1)",
-        }
+      audio?.key(true)
+    } else {
+      const { key, shift } = keyFor(stroke.ch)
+      const lead = shift ? ms * 0.25 : 0
+      const impact = lead + ms * 0.42
+      if (shift) {
+        let from = 0
+        play("shift", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {
+          begin: () => {
+            from = pose.shift
+          },
+        })
+      }
+      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)
+      const bar = key.bar
+      if (bar) {
+        let from = 0
+        play(
+          `bar-${M.bars.indexOf(bar)}`,
+          ms,
+          (t) => {
+            const v =
+              t < 0.42
+                ? from + (1 - from) * easeIn(t / 0.42)
+                : 1 - easeOut((t - 0.42) / 0.58)
+            setBar(bar, v)
+          },
+          {
+            delay: lead,
+            begin: () => {
+              from = bar.v
+            },
+          }
+        )
+      }
+      let lifted = 0
+      play("ribbon", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {
+        delay: lead + ms * 0.08,
+        begin: () => {
+          lifted = pose.ribbon
+        },
+      })
+      const { el, ink } = letter(stroke)
+      el.setAttribute("fill-opacity", "0")
+      play(
+        `ink-${stroke.src}`,
+        60,
+        (v) => {
+          el.setAttribute("fill-opacity", (v * ink).toFixed(3))
+        },
+        { delay: impact }
       )
+      tween("carriage", () => pose.carriage, setCarriage, step, ms * 0.36, {
+        delay: impact + 6,
+        ease: easeOut,
+      })
+      tween("spool", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {
+        delay: impact,
+      })
+      if (audio) window.setTimeout(() => audio.key(false), impact)
     }
-    cursor = { line: stroke.line, col: stroke.col + 1 }
-    placeHead(cursor.col, step, "cubic-bezier(.2,.8,.2,1)", spin)
-    const audio = soundOn()
-    audio?.key(stroke.ch === " ")
+
     if (
       !rang &&
-      cursor.col >= m.columns - BELL_CELLS &&
-      m.columns > BELL_CELLS * 2
+      cursor.col >= M.columns - BELL_CELLS &&
+      M.columns > BELL_CELLS * 2
     ) {
       rang = true
       audio?.bell()
     }
   }
 
-  /** Whirl home along the rail and drop a line. */
+  /** Kick the lever, turn up a line, slide the carriage home. */
   const carriageReturn = (
     stroke: Extract<TypewriterStroke, { kind: "return" }>
   ) => {
-    const glide = clamp(200 + stroke.from * 7, 240, 620)
-    const drop = 260
+    const glide = clamp(220 + stroke.from * 8, 260, 640)
     cursor = { line: stroke.line, col: 0 }
     rang = false
-    const next = Math.max(scroll, scrollFor(cursor.line))
-    if (next !== scroll) {
-      scroll = next
-      placePage(drop, "cubic-bezier(.3,.7,.2,1)")
-    }
-    placeCarriage(cursor.line, drop, "cubic-bezier(.3,.7,.2,1)")
-    placeHead(0, glide, "cubic-bezier(.65,0,.25,1)")
-    if (stroke.from > 0) {
-      ball.whirl(-(0.5 + stroke.from / Math.max(1, m.columns)), glide)
-    }
+    play("lever", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))
+    tween("paper", () => pose.paper, setPaper, -stroke.line * LH, 220, {
+      delay: 60,
+      ease: easeInOut,
+    })
+    tween("knob", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {
+      delay: 60,
+      ease: easeInOut,
+    })
+    tween("carriage", () => pose.carriage, setCarriage, carriageAt(0), glide, {
+      delay: 130,
+      ease: easeInOut,
+    })
     soundOn()?.carriage(glide)
-    return glide
+    return glide + 130
+  }
+
+  const setPhase = (next: typeof phase) => {
+    phase = next
   }
 
   const finish = () => {
@@ -1064,46 +1514,57 @@ export function createTypewriter(
       finish()
       return
     }
-    if (phase !== "typing") setPhase("typing")
+    setPhase("typing")
     const stroke = strokes[pos++]!
     if (stroke.kind === "char") {
       strike(stroke)
       schedule(step, pace(stroke.ch))
     } else {
-      const glide = carriageReturn(stroke)
-      schedule(step, glide + pace(" ") * 0.8)
+      const ms = carriageReturn(stroke)
+      schedule(step, ms + pace(" ") * 0.8)
     }
   }
 
+  /** Roll a fresh sheet up from behind the platen. */
+  const feedIn = (then: () => void) => {
+    setPaper(40 + TOP_MARGIN)
+    tween("paper", () => pose.paper, setPaper, 0, 900, { ease: easeOut })
+    tween("knob", () => pose.knob, setKnob, pose.knob + 5, 900, {
+      ease: easeOut,
+    })
+    schedule(then, 940)
+  }
+
   /** Pull the finished sheet up and out, bring the carriage home, go again. */
   const feedOut = () => {
     setPhase("feeding")
-    const ms = 820
-    const pull = "cubic-bezier(.55,0,.75,.2)"
-    const lift = lineTop(cursor.line + 1) + m.lh
-    page.style.transition = `transform ${ms}ms ${pull}, opacity ${ms}ms ease-in`
-    page.style.transform = `translate3d(0,${-scroll - lift}px,0)`
-    page.style.opacity = "0"
-    scroll = 0
-    // Same curve as the sheet, which travels further, so the carriage rises
-    // behind the last line instead of through it.
-    placeCarriage(0, ms, pull)
-    placeHead(0, ms, "cubic-bezier(.65,0,.35,1)")
-    if (cursor.col > 0) ball.whirl(-1, ms)
+    const ms = 950
+    tween("paper", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {
+      ease: easeIn,
+    })
+    tween("knob", () => pose.knob, setKnob, pose.knob + 7, ms, {
+      ease: easeIn,
+    })
+    tween("carriage", () => pose.carriage, setCarriage, carriageAt(0), 720, {
+      ease: easeInOut,
+    })
+    if (cursor.col > 0) {
+      play("lever", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))
+    }
     schedule(() => {
       pos = 0
-      page.style.opacity = ""
       paint()
       setPhase("waiting")
-      schedule(step, startOf() * 0.6)
-    }, ms + 60)
+      feedIn(() => schedule(step, startOf() * 0.5))
+    }, ms + 40)
   }
 
   const start = () => {
     cancel()
-    page.style.opacity = ""
-    strokes = layoutTypewriter(textOf(), m.columns)
+    stopMotion()
+    strokes = layoutTypewriter(textOf(), M.columns)
     spoken.textContent = textOf()
+    sizeSheet()
     if (reduce) {
       pos = strokes.length
       setPhase("done")
@@ -1113,12 +1574,59 @@ export function createTypewriter(
     pos = 0
     setPhase("waiting")
     paint()
-    schedule(step, startOf())
+    feedIn(() => schedule(step, startOf()))
   }
 
-  measure()
-  drawRail()
-  drawHead()
+  /** Redraw for a new line length, keeping the place in the text. */
+  const rebuild = () => {
+    const at = strokes[pos - 1]?.src ?? -1
+    stopMotion()
+    build()
+    strokes = layoutTypewriter(textOf(), M.columns)
+    if (phase === "done") pos = strokes.length
+    else {
+      pos = 0
+      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1
+    }
+    sizeSheet()
+    paint()
+    if (phase === "typing" || phase === "feeding") {
+      setPhase("typing")
+      schedule(step, 200)
+    } else if (phase === "waiting") schedule(step, startOf())
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Paper color                                                       */
+  /* ---------------------------------------------------------------- */
+
+  const isDark = () => {
+    const html = document.documentElement
+    if (html.classList.contains("dark")) return true
+    if (html.classList.contains("light")) return false
+    const attr = html.getAttribute("data-theme")
+    if (attr === "dark") return true
+    if (attr === "light") return false
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+  }
+  /** The sheet is the page: the first opaque background behind the machine. */
+  const paintPaper = () => {
+    let color = ""
+    for (let el: Element | null = root; el; el = el.parentElement) {
+      const bg = getComputedStyle(el).backgroundColor
+      if (bg && !/^transparent$|,\s*0\)$|\/\s*0\)$/.test(bg)) {
+        color = bg
+        break
+      }
+    }
+    root.style.setProperty(
+      "--typewriter-paper",
+      color || (isDark() ? "#0a0a0a" : "#ffffff")
+    )
+  }
+
+  build()
+  paintPaper()
 
   const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
   reduce = mqReduce.matches
@@ -1130,20 +1638,13 @@ export function createTypewriter(
 
   start()
 
-  const onResize = () => {
-    if (measure()) relayout()
-    else {
-      scroll = Math.max(scroll, scrollFor(cursor.line))
-      placePage()
-      placeCarriage(cursor.line)
-    }
-  }
-  const ro = new ResizeObserver(onResize)
-  ro.observe(root)
-  // Webfonts can land after mount and change the cell width.
-  void document.fonts?.ready.then(() => {
-    if (!destroyed) onResize()
+  const theme = new MutationObserver(paintPaper)
+  theme.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "style"],
   })
+  const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
+  mqDark.addEventListener("change", paintPaper)
 
   const io = new IntersectionObserver(([entry]) => {
     onScreen = entry?.isIntersecting ?? true
@@ -1161,13 +1662,12 @@ export function createTypewriter(
         start()
         return
       }
-      if (options.columns !== prev.columns) {
-        measure()
-        relayout()
-      } else if (options.jitter !== prev.jitter) {
+      if (columnsOf() !== M.columns) rebuild()
+      else if (options.jitter !== prev.jitter) {
+        for (const motion of running.values()) motion.run(1)
+        stopMotion()
         paint()
       }
-      if (options.ticks !== prev.ticks) drawRail()
       const loop = options.loop ?? true
       if (loop !== (prev.loop ?? true) && phase === "done") {
         if (loop) schedule(feedOut, holdOf())
@@ -1178,14 +1678,16 @@ export function createTypewriter(
     destroy() {
       destroyed = true
       cancel()
-      ball.destroy()
-      ro.disconnect()
+      stopMotion()
+      theme.disconnect()
+      mqDark.removeEventListener("change", paintPaper)
       io.disconnect()
       mqReduce.removeEventListener("change", onReduce)
       document.removeEventListener("visibilitychange", onVisibility)
       sound?.close()
+      root.style.removeProperty("--typewriter-paper")
       spoken.remove()
-      stage.remove()
+      svg.remove()
     },
   }
 }
diff --git a/registry/typewriter/typewriter.svelte b/registry/typewriter/typewriter.svelte
index 4d487d0..b5dec73 100644
--- a/registry/typewriter/typewriter.svelte
+++ b/registry/typewriter/typewriter.svelte
@@ -5,6 +5,7 @@
   import { onMount } from "svelte"
   import {
     createTypewriter,
+    DEFAULT_COLUMNS,
     DEFAULT_HOLD,
     DEFAULT_JITTER,
     DEFAULT_SPEED,
@@ -30,8 +31,7 @@
     loop = true,
     hold = DEFAULT_HOLD,
     startDelay = DEFAULT_START_DELAY,
-    columns = 0,
-    ticks = true,
+    columns = DEFAULT_COLUMNS,
     jitter = DEFAULT_JITTER,
     sound = false,
     onDone,
@@ -50,7 +50,6 @@
       hold,
       startDelay,
       columns,
-      ticks,
       jitter,
       sound,
       onDone,
@@ -70,7 +69,6 @@
       hold,
       startDelay,
       columns,
-      ticks,
       jitter,
       sound,
       onDone,
@@ -82,7 +80,7 @@
   bind:this={root}
   data-slot="typewriter"
   class={cn(
-    "relative size-full overflow-hidden bg-background p-6 font-mono text-foreground",
+    "relative size-full overflow-hidden bg-background font-mono text-foreground",
     className
   )}
 ></div>
diff --git a/registry/typewriter/typewriter.tsx b/registry/typewriter/typewriter.tsx
index cf24e7e..2d5f332 100644
--- a/registry/typewriter/typewriter.tsx
+++ b/registry/typewriter/typewriter.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 
 import {
   createTypewriter,
+  DEFAULT_COLUMNS,
   DEFAULT_HOLD,
   DEFAULT_JITTER,
   DEFAULT_SPEED,
@@ -16,6 +17,7 @@ import {
 } from "./typewriter-vanilla"
 
 export {
+  DEFAULT_COLUMNS,
   DEFAULT_HOLD,
   DEFAULT_JITTER,
   DEFAULT_SPEED,
@@ -34,9 +36,10 @@ export type TypewriterProps = TypewriterOptions & {
 }
 
 /**
- * A typewriter on the page — a typeball rides a rail across the frame,
- * spins each letter to the front, strikes, steps right, and at the margin
- * whirls home and drops a line. Ink follows `currentColor`. Honors
+ * A typewriter that types — each letter presses its key, swings that key's
+ * typebar up to strike the ribbon, and steps the carriage left. At the
+ * margin the lever kicks, the platen turns up a line, and the carriage
+ * slides home. Ink follows `currentColor`. Honors
  * `prefers-reduced-motion`.
  */
 export function Typewriter({
@@ -47,8 +50,7 @@ export function Typewriter({
   loop = true,
   hold = DEFAULT_HOLD,
   startDelay = DEFAULT_START_DELAY,
-  columns = 0,
-  ticks = true,
+  columns = DEFAULT_COLUMNS,
   jitter = DEFAULT_JITTER,
   sound = false,
   onDone,
@@ -72,7 +74,6 @@ export function Typewriter({
       hold,
       startDelay,
       columns,
-      ticks,
       jitter,
       sound,
       onDone: () => onDoneRef.current?.(),
@@ -94,29 +95,17 @@ export function Typewriter({
       hold,
       startDelay,
       columns,
-      ticks,
       jitter,
       sound,
     })
-  }, [
-    text,
-    speed,
-    humanize,
-    loop,
-    hold,
-    startDelay,
-    columns,
-    ticks,
-    jitter,
-    sound,
-  ])
+  }, [text, speed, humanize, loop, hold, startDelay, columns, jitter, sound])
 
   return (
     <div
       ref={rootRef}
       data-slot="typewriter"
       className={cn(
-        "relative size-full overflow-hidden bg-background p-6 font-mono text-foreground",
+        "relative size-full overflow-hidden bg-background font-mono text-foreground",
         className
       )}
     />
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index 94737ec..143888f 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -142,7 +142,7 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`Typewriter` fills its parent like a background but is content: it types `text` in the mono font, inherits the font size, and inks in `currentColor`. Give the parent a height; the paper feeds up when the page fills.
+`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). Ink is `currentColor`; the sheet takes the first opaque background behind it.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
@@ -186,7 +186,7 @@ Categories match `content/docs/components/meta.json`.
 | `dithered-404` | Pages | Bayer 404 burned by a fireball cursor, then reforms | React + Svelte |
 | `folio` | Sections | Page leans on scroll, then springs flat | React + Svelte |
 | `gooey-color-picker` | Components | Swatch opens into hue, alpha, and hex under an SVG goo filter | React + Svelte |
-| `typewriter` | Components | A typeball on a rail types text letter by letter, returns at the margin | React + Svelte |
+| `typewriter` | Components | A real typewriter in SVG: keys press, typebars strike, the carriage steps | React + Svelte |
 
 ## Minimal installs that must be right
 
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index 0ae5470..bbbf2ed 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -367,13 +367,12 @@ React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`.
 ```ts
 type TypewriterProps = {
   text?: string // DEFAULT_TEXT; "\n" breaks a line
-  speed?: number // 14 characters per second, clamped 1–120
+  speed?: number // 12 characters per second, clamped 1–60
   humanize?: boolean // true
   loop?: boolean // true
   hold?: number // 2600 ms on the finished page before looping
   startDelay?: number // 600 ms before the first keystroke
-  columns?: number // 0 = fit the frame; never wider than the frame
-  ticks?: boolean // true
+  columns?: number // 32 characters per line, clamped 16–60
   jitter?: number // 0.3, 0–1
   sound?: boolean // false
   onDone?: () => void // each time the last character lands
@@ -381,9 +380,9 @@ type TypewriterProps = {
 }
 ```
 
-Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_COLUMNS`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
 
-Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again.
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again. No `ticks`, `theme`, or color props: ink is `currentColor` and the sheet is the page background.
 
 ## Events that are not props
 
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index e579b00..d9ea9cc 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -388,13 +388,13 @@ Pitfalls: the panel overflows the trigger. Do not put it in `overflow-hidden`. R
 
 ## typewriter
 
-Component. Text typed onto the page by a typeball that rides a full-width rail. For each letter the ball spins that glyph to the front, strikes, and steps one cell right; at the margin it whirls home and drops a line. The paper feeds up when the page fills. With `loop`, the finished sheet is pulled out and typed again.
+Component. A real typewriter drawn in SVG. Every key is wired to its own typebar: a letter presses its key, swings that bar up out of the basket to strike the ribbon, lands on the sheet, and the carriage steps one character left. Capitals hold shift. At the margin the return lever kicks, the platen turns the paper up a line, and the carriage slides home. With `loop`, the sheet is pulled out and a fresh one rolls in.
 
 Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke at a time.
 
-Not this: a wordmark (`ascii-logo`), a blinking input caret, or a background behind other copy.
+Not this: a wordmark (`ascii-logo`), a blinking input caret, plain typed text in a paragraph (this draws the whole machine), or a background behind other copy.
 
-Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (14 chars/s), `humanize` (true), `jitter` (0.3), `columns` (0 = fit), `ticks` (true), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
 
 ```tsx
 "use client"
@@ -402,12 +402,12 @@ import { Typewriter } from "@/components/ui/typewriter"
 
 export function Letter() {
   return (
-    <div className="h-80 w-full overflow-hidden rounded-xl border">
+    <div className="h-96 w-full overflow-hidden rounded-xl border">
       <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
     </div>
   )
 }
 ```
 
-Pitfalls: `\n` is the only way to force a line break; everything else wraps at words. The font is the project's `font-mono` at the inherited size; set a size with `className="text-lg"`. Ink, rail, and carriage use `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. The sheet uses the first opaque background up the tree, so put it on a surface with a real background color. Ink uses `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
 
diff --git a/skills/23rd/recipes.md b/skills/23rd/recipes.md
index 5fe706e..7aa2ba7 100644
--- a/skills/23rd/recipes.md
+++ b/skills/23rd/recipes.md
@@ -229,7 +229,7 @@ import { Typewriter } from "@/components/ui/typewriter"
 
 export function Note() {
   return (
-    <div className="h-72 overflow-hidden rounded-xl border text-lg">
+    <div className="h-96 overflow-hidden rounded-xl border">
       <Typewriter text={"Dear reader,\nwe shipped it."} loop={false} />
     </div>
   )

From 5a6e84612086c1f5867811470102aba61f96ca56 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Thu, 1 Oct 2026 16:47:59 +0530
Subject: [PATCH 46/49] Redraw Typewriter as a lit, enamelled machine.

The flat two-tone drawing becomes a proper illustration seen from a
little above: glossy enamel with a sheen and lit rims, a front face
with chrome trim and rubber feet, a ground shadow, chrome rail, scale,
lever and spool flanges, bakelite knobs, a black rubber platen, a
two-tone red and black ribbon, and an ivory sheet that shades where it
curls round the platen against a paper rest. Keys are round chrome-rimmed
caps with glossy tops, cream legends, metal stems and shadows; the
typebars are chrome in a dark basket, and a struck bar carries a dark
edge so it reads over the paper.

A new `color` prop sets the enamel (default mint #8EC3B5); its lights
and shadows are mixed from that one color. The sheet dims slightly in
dark mode. The demo gains an enamel picker.
---
 .cursor/skills/23rd/SKILL.md              |    2 +-
 .cursor/skills/23rd/apis.md               |    5 +-
 .cursor/skills/23rd/components.md         |    4 +-
 content/docs/components/typewriter.mdx    |    9 +-
 public/r/typewriter-svelte.json           |    2 +-
 public/r/typewriter.json                  |    2 +-
 registry/typewriter/typewriter-demo.tsx   |   59 +
 registry/typewriter/typewriter-vanilla.ts | 1626 +++++++++++++--------
 registry/typewriter/typewriter.svelte     |    4 +
 registry/typewriter/typewriter.tsx        |   18 +-
 skills/23rd/SKILL.md                      |    2 +-
 skills/23rd/apis.md                       |    5 +-
 skills/23rd/components.md                 |    4 +-
 13 files changed, 1124 insertions(+), 618 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index 143888f..5185892 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -142,7 +142,7 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). Ink is `currentColor`; the sheet takes the first opaque background behind it.
+`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). `color` sets the body enamel (default mint `#8EC3B5`); everything else is fixed chrome, rubber, and an ivory sheet.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index bbbf2ed..6b818b3 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -366,6 +366,7 @@ React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`.
 
 ```ts
 type TypewriterProps = {
+  color?: string // "#8EC3B5" body enamel; shades are mixed from it
   text?: string // DEFAULT_TEXT; "\n" breaks a line
   speed?: number // 12 characters per second, clamped 1–60
   humanize?: boolean // true
@@ -380,9 +381,9 @@ type TypewriterProps = {
 }
 ```
 
-Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_COLUMNS`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+Also exported: `DEFAULT_COLOR`, `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_COLUMNS`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
 
-Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again. No `ticks`, `theme`, or color props: ink is `currentColor` and the sheet is the page background.
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again. No `ticks` or `theme` props; `color` is the only color prop and it paints the enamel.
 
 ## Events that are not props
 
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index d9ea9cc..06618cc 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -394,7 +394,7 @@ Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke
 
 Not this: a wordmark (`ascii-logo`), a blinking input caret, plain typed text in a paragraph (this draws the whole machine), or a background behind other copy.
 
-Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+Deps: none. Props: `color` (`#8EC3B5`, body enamel), `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
 
 ```tsx
 "use client"
@@ -409,5 +409,5 @@ export function Letter() {
 }
 ```
 
-Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. The sheet uses the first opaque background up the tree, so put it on a surface with a real background color. Ink uses `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. Only the enamel takes `color`; there is no ink, theme, or paper color prop. The sheet is ivory (dimmer in dark mode). `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
 
diff --git a/content/docs/components/typewriter.mdx b/content/docs/components/typewriter.mdx
index 995cb3a..7f864cf 100644
--- a/content/docs/components/typewriter.mdx
+++ b/content/docs/components/typewriter.mdx
@@ -5,7 +5,7 @@ description: A real typewriter in SVG — each key presses down, its typebar swi
 
 import { TypewriterDemo } from "@/registry/typewriter/typewriter-demo"
 
-A typewriter that actually types. Every key on the keyboard is wired to its own typebar in the basket. Press a letter and its key goes down, that bar swings up out of the fan, the ribbon lifts, and the letter lands on the sheet as the carriage steps one character left. Capitals hold shift, which drops the basket. At the end of a line the return lever kicks, the platen turns the paper up a line, and the carriage slides home. With `loop` on, the finished sheet is pulled out and a fresh one rolls in from behind the platen.
+A typewriter that actually types — glossy enamel, chrome, a black rubber platen, a red-and-black ribbon, and an ivory sheet. Every key on the keyboard is wired to its own typebar in the basket. Press a letter and its key goes down, that bar swings up out of the fan, the ribbon lifts, and the letter lands on the sheet as the carriage steps one character left. Capitals hold shift, which drops the basket. At the end of a line the return lever kicks, the platen turns the paper up a line, and the carriage slides home. With `loop` on, the finished sheet is pulled out and a fresh one rolls in from behind the platen.
 
 ## Preview
 
@@ -58,13 +58,13 @@ export function Letter() {
   <FrameworkReact>
     ```tsx
     <Typewriter loop={false} onDone={() => console.log("typed")} />
-    <Typewriter speed={8} columns={40} sound />
+    <Typewriter color="#D2463A" speed={8} columns={40} sound />
     ```
   </FrameworkReact>
   <FrameworkSvelte>
     ```svelte
     <Typewriter loop={false} onDone={() => console.log("typed")} />
-    <Typewriter speed={8} columns={40} sound />
+    <Typewriter color="#D2463A" speed={8} columns={40} sound />
     ```
   </FrameworkSvelte>
 </FrameworkCode>
@@ -75,6 +75,7 @@ export function Letter() {
 
 | Prop         | Type         | Default                                             |
 | ------------ | ------------ | --------------------------------------------------- |
+| `color`      | `string`     | `"#8EC3B5"` — body enamel, any CSS color            |
 | `text`       | `string`     | a short letter — `\n` breaks a line                 |
 | `speed`      | `number`     | `12` — characters per second                        |
 | `humanize`   | `boolean`    | `true` — uneven keys, rests after punctuation       |
@@ -88,4 +89,4 @@ export function Letter() {
 | `className`  | `string`     | React only                                          |
 | `class`      | `string`     | Svelte only                                         |
 
-The machine and the letters are inked in `currentColor`, so color it with a text class (`className="text-sky-800"`). The sheet takes the page color: the first opaque background behind the component, so it matches light and dark themes on its own.
+`color` paints the enamel of the body and paper rest; its highlights, shadows, and gloss are mixed from that one color. Chrome, rubber, keys, and ribbon stay as they are. The sheet is ivory, a touch dimmer in dark mode so it doesn't glare.
diff --git a/public/r/typewriter-svelte.json b/public/r/typewriter-svelte.json
index 6fe6d44..fa32e38 100644
--- a/public/r/typewriter-svelte.json
+++ b/public/r/typewriter-svelte.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/typewriter/typewriter.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space. The print point sits at\n// the origin: the line being typed has its baseline on y = 0, and the\n// carriage slides so the next column always lands at x = 0.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 302\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 50\nconst PIVOT_R = 58\nconst REST_R = 30\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 9\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [142, 172, 202, 232]\nconst KEY_PITCH = 35\nconst KEY_R = 12\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4.5\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst PAPER = \"var(--typewriter-paper)\"\n\n/** An SVG element. `fill` / `stroke` of `\"paper\"` paint in the page color. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if ((key === \"fill\" || key === \"stroke\") && value === \"paper\") {\n      node.style.setProperty(key, PAPER)\n    } else {\n      node.setAttribute(key, String(value))\n    }\n  }\n  parent?.append(node)\n  return node\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGLineElement\n  strike: SVGGElement\n  /** Page-colored outline under the bar, so it reads over the machine. */\n  arm: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: SVGPathElement[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. Ink is `currentColor`; the paper takes the page\n * color behind it. `prefers-reduced-motion` prints the whole page at once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    const columns = columnsOf()\n    const span = columns * CW\n    const platenL = -PAD - 22\n    const platenR = span + PAD + 22\n    const knobW = 14\n    const leverX = platenL - knobW - 3\n    // Room for the carriage at both ends of its travel, and the body.\n    const left = leverX - 52 - (span + CW / 2)\n    const right = platenR + knobW - CW / 2\n    const half = Math.ceil(Math.max(-left, right, 262) + 14)\n    svg.replaceChildren()\n    svg.setAttribute(\n      \"viewBox\",\n      `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n    )\n\n    // The sheet fades out at the top of the frame and tucks behind the\n    // platen at the bottom.\n    const defs = draw(\"defs\", {}, svg)\n    const fade = draw(\n      \"linearGradient\",\n      {\n        id: `${id}-fade-g`,\n        gradientUnits: \"userSpaceOnUse\",\n        x1: 0,\n        x2: 0,\n        y1: VIEW_TOP,\n        y2: 40,\n      },\n      defs\n    )\n    const soft = 84 / (40 - VIEW_TOP)\n    for (const [offset, alpha] of [\n      [0, 0],\n      [soft, 1],\n      [0.998, 1],\n      [1, 0],\n    ] as const) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": \"#fff\", \"stop-opacity\": alpha },\n        fade\n      )\n    }\n    const box = {\n      x: -4000,\n      y: VIEW_TOP - 4,\n      width: 8000,\n      height: 48 - VIEW_TOP,\n    }\n    const mask = draw(\n      \"mask\",\n      { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n      defs\n    )\n    draw(\"rect\", { ...box, fill: `url(#${id}-fade-g)` }, mask)\n\n    /* Carriage: rail, platen, knobs, return lever, the sheet, the scale. */\n    const carriage = draw(\"g\", {}, svg)\n    draw(\n      \"rect\",\n      {\n        x: platenL - knobW,\n        y: 42,\n        width: platenR - platenL + knobW * 2,\n        height: 6,\n        rx: 3,\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.7,\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL,\n        y: 6,\n        width: platenR - platenL,\n        height: 34,\n        rx: 10,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL + 8,\n        y: 11,\n        width: platenR - platenL - 16,\n        height: 2,\n        rx: 1,\n        fill: \"paper\",\n        \"fill-opacity\": 0.3,\n      },\n      carriage\n    )\n    const knobs = [platenL - knobW, platenR].map((x) => {\n      draw(\n        \"rect\",\n        { x, y: 2, width: knobW, height: 42, rx: 5, fill: \"currentColor\" },\n        carriage\n      )\n      const lines = Array.from({ length: RIDGES }, () =>\n        draw(\n          \"line\",\n          {\n            x1: x + 2.6,\n            x2: x + knobW - 2.6,\n            stroke: \"paper\",\n            \"stroke-width\": 1.1,\n            \"stroke-linecap\": \"round\",\n          },\n          carriage\n        )\n      )\n      return { x, lines }\n    })\n    const lever = draw(\"g\", {}, carriage)\n    const leverPivot: [number, number] = [leverX, 32]\n    draw(\n      \"rect\",\n      {\n        x: leverX - 5,\n        y: 22,\n        width: 9,\n        height: 22,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      lever\n    )\n    draw(\n      \"path\",\n      {\n        d: `M${leverX} 30L${leverX - 12} 6L${leverX - 34} -12`,\n        fill: \"none\",\n        stroke: \"currentColor\",\n        \"stroke-width\": 5,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n    draw(\n      \"rect\",\n      {\n        x: leverX - 52,\n        y: -23,\n        width: 26,\n        height: 10,\n        rx: 5,\n        fill: \"currentColor\",\n        transform: `rotate(-24 ${leverX - 39} -18)`,\n      },\n      lever\n    )\n\n    const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n    const paper = draw(\"g\", {}, wrap)\n    const sheet = draw(\n      \"rect\",\n      {\n        x: -PAD,\n        y: -TOP_MARGIN,\n        width: span + PAD * 2,\n        height: 600,\n        fill: \"paper\",\n        stroke: \"currentColor\",\n        \"stroke-opacity\": 0.24,\n        \"stroke-width\": 1,\n      },\n      paper\n    )\n    const ink = draw(\n      \"g\",\n      { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: \"currentColor\" },\n      paper\n    )\n\n    // The paper scale, just under the print line.\n    draw(\n      \"rect\",\n      {\n        x: -PAD + 4,\n        y: 9,\n        width: span + PAD * 2 - 8,\n        height: 5,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    let ticks = \"\"\n    for (let c = 0; c <= columns; c++) {\n      const x = c * CW\n      ticks += `M${x} 9.7V${c % 10 === 0 ? 13.3 : c % 5 === 0 ? 12.2 : 11}`\n    }\n    draw(\n      \"path\",\n      {\n        d: ticks,\n        stroke: \"paper\",\n        \"stroke-width\": 0.8,\n        \"stroke-opacity\": 0.75,\n        fill: \"none\",\n      },\n      carriage\n    )\n\n    /* Body: keyboard well, frame, basket, deck, spools, ribbon, keys. */\n    const body = draw(\"g\", {}, svg)\n    draw(\n      \"path\",\n      {\n        d: \"M-226 112H226L246 272H-246Z\",\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.07,\n      },\n      body\n    )\n    for (const side of [-1, 1]) {\n      draw(\n        \"path\",\n        {\n          d: `M${side * 212} 108L${side * 232} 108L${side * 260} 272L${side * 238} 272Z`,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    const basket = draw(\"g\", {}, body)\n    const [ax, ay] = polar(63, -SPREAD - 0.1)\n    const [bx, by] = polar(63, SPREAD + 0.1)\n    const [cx, cy] = polar(55, SPREAD + 0.1)\n    const [dx, dy] = polar(55, -SPREAD - 0.1)\n    draw(\n      \"path\",\n      {\n        d: `M${ax} ${ay}A63 63 0 0 0 ${bx} ${by}L${cx} ${cy}A55 55 0 0 1 ${dx} ${dy}Z`,\n        fill: \"currentColor\",\n      },\n      basket\n    )\n\n    // The deck, with the basket showing through its notch.\n    draw(\n      \"path\",\n      {\n        d: \"M-194 50H-67A67 67 0 0 0 67 50H194Q210 50 212 66L228 108Q230 116 220 116H-220Q-230 116 -228 108L-212 66Q-210 50 -194 50Z\",\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-216 109H216\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n\n    const spools = [-150, 150].map((x) => {\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: 84,\n          r: 23,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 1.1,\n        },\n        body\n      )\n      const turn = draw(\"g\", {}, body)\n      for (let i = 0; i < 5; i++) {\n        const a = (i / 5) * TAU\n        draw(\n          \"circle\",\n          {\n            cx: x + Math.cos(a) * 13,\n            cy: 84 + Math.sin(a) * 13,\n            r: 3.6,\n            fill: \"paper\",\n          },\n          turn\n        )\n      }\n      draw(\"circle\", { cx: x, cy: 84, r: 4.4, fill: \"paper\" }, turn)\n      draw(\"circle\", { cx: x, cy: 84, r: 1.8, fill: \"currentColor\" }, turn)\n      return turn\n    })\n\n    // The type guide either side of the print point.\n    for (const side of [-1, 1]) {\n      draw(\n        \"rect\",\n        {\n          x: side < 0 ? -22 : 17,\n          y: 1,\n          width: 5,\n          height: 15,\n          rx: 1.5,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-width\": 1.2,\n          \"paint-order\": \"stroke\",\n        },\n        body\n      )\n    }\n\n    const ribbon = [\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-width\": 6.4,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"currentColor\",\n          \"stroke-width\": 3.2,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n    ]\n    const vibrator = draw(\"g\", {}, body)\n    for (const [stroke, width] of [\n      [\"paper\", 4.4],\n      [\"currentColor\", 2],\n    ] as const) {\n      draw(\n        \"path\",\n        {\n          d: \"M-12 3V11.5H12V3\",\n          fill: \"none\",\n          stroke,\n          \"stroke-width\": width,\n          \"stroke-linejoin\": \"round\",\n          \"stroke-linecap\": \"round\",\n        },\n        vibrator\n      )\n    }\n\n    // Keys: round caps on stems, in four staggered rows.\n    const keyAt = (x: number, y: number, label: string) => {\n      draw(\n        \"line\",\n        {\n          x1: x,\n          y1: y,\n          x2: x,\n          y2: y + 24,\n          stroke: \"currentColor\",\n          \"stroke-opacity\": 0.42,\n          \"stroke-width\": 2.4,\n          \"stroke-linecap\": \"round\",\n        },\n        body\n      )\n      const cap = draw(\"g\", {}, body)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R + 1.6, fill: \"paper\" }, cap)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R, fill: \"currentColor\" }, cap)\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: y,\n          r: KEY_R - 2.6,\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 0.9,\n        },\n        cap\n      )\n      const text = draw(\n        \"text\",\n        {\n          x,\n          y: y + 0.5,\n          \"text-anchor\": \"middle\",\n          \"dominant-baseline\": \"central\",\n          \"font-size\": 10,\n          \"font-weight\": 600,\n          fill: \"paper\",\n        },\n        cap\n      )\n      text.textContent = label\n      return cap\n    }\n\n    const keys = new Map<string, Key>()\n    const placed: { ch: string; x: number; key: Key }[] = []\n    KEY_ROWS.forEach((row, r) => {\n      Array.from(row).forEach((ch, i) => {\n        const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n        const key: Key = {\n          cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n          bar: null,\n          v: 0,\n        }\n        keys.set(ch, key)\n        placed.push({ ch, x, key })\n      })\n    })\n\n    const pill = (x: number, y: number, w: number, h: number) => {\n      for (const sx of [x - w * 0.3, x + w * 0.3]) {\n        draw(\n          \"line\",\n          {\n            x1: sx,\n            y1: y,\n            x2: sx,\n            y2: y + 22,\n            stroke: \"currentColor\",\n            \"stroke-opacity\": 0.42,\n            \"stroke-width\": 2.4,\n            \"stroke-linecap\": \"round\",\n          },\n          body\n        )\n      }\n      const cap = draw(\"g\", {}, body)\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2 - 1.6,\n          y: y - h / 2 - 1.6,\n          width: w + 3.2,\n          height: h + 3.2,\n          rx: h / 2 + 1.6,\n          fill: \"paper\",\n        },\n        cap\n      )\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2,\n          y: y - h / 2,\n          width: w,\n          height: h,\n          rx: h / 2,\n          fill: \"currentColor\",\n        },\n        cap\n      )\n      return cap\n    }\n    const shifts = [-1, 1].map((side) => {\n      const x = side * 201\n      const cap = pill(x, KEY_Y[3]!, 30, 22)\n      draw(\n        \"path\",\n        {\n          d: `M${x} ${KEY_Y[3]! - 5}L${x + 5} ${KEY_Y[3]! + 1}H${x + 2}V${KEY_Y[3]! + 5}H${x - 2}V${KEY_Y[3]! + 1}H${x - 5}Z`,\n          fill: \"paper\",\n        },\n        cap\n      )\n      return { cap, bar: null, v: 0 } satisfies Key\n    })\n    const space: Key = { cap: pill(0, 258, 210, 11), bar: null, v: 0 }\n\n    // Base and feet.\n    draw(\n      \"rect\",\n      {\n        x: -260,\n        y: 272,\n        width: 520,\n        height: 20,\n        rx: 8,\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-250 277H250\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n    for (const x of [-238, 202]) {\n      draw(\n        \"rect\",\n        {\n          x,\n          y: 290,\n          width: 36,\n          height: 8,\n          rx: 3,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    // One typebar per key, fanned left to right in key order.\n    const overlay = draw(\"g\", {}, svg)\n    placed.sort((a, b) => a.x - b.x)\n    const bars = placed.map(({ key }, i) => {\n      const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n      const pivot = polar(PIVOT_R, angle)\n      const tip = polar(REST_R, angle)\n      const rest = draw(\n        \"line\",\n        {\n          x1: pivot[0],\n          y1: pivot[1],\n          x2: tip[0],\n          y2: tip[1],\n          stroke: \"currentColor\",\n          \"stroke-width\": 1.3,\n          \"stroke-linecap\": \"round\",\n        },\n        basket\n      )\n      const strike = draw(\"g\", { display: \"none\" }, overlay)\n      const arm = draw(\n        \"line\",\n        {\n          stroke: \"paper\",\n          \"stroke-width\": 4.4,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const core = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 2,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const slug = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 5.5,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const bar: Bar = { rest, strike, arm, core, slug, pivot, tip, v: 0 }\n      key.bar = bar\n      return bar\n    })\n\n    M = {\n      columns,\n      carriage,\n      paper,\n      sheet,\n      ink,\n      lever,\n      leverPivot,\n      knobs,\n      keys,\n      shifts,\n      space,\n      basket,\n      bars,\n      ribbon,\n      vibrator,\n      spools,\n    }\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -150 : 150\n      spool.setAttribute(\"transform\", `rotate(${deg.toFixed(1)} ${x} 84)`)\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const d = `M-150 61L-12 ${y.toFixed(2)}H12L150 61`\n    for (const path of M.ribbon) path.setAttribute(\"d\", d)\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.arm, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Paper color                                                       */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** The sheet is the page: the first opaque background behind the machine. */\n  const paintPaper = () => {\n    let color = \"\"\n    for (let el: Element | null = root; el; el = el.parentElement) {\n      const bg = getComputedStyle(el).backgroundColor\n      if (bg && !/^transparent$|,\\s*0\\)$|\\/\\s*0\\)$/.test(bg)) {\n        color = bg\n        break\n      }\n    }\n    root.style.setProperty(\n      \"--typewriter-paper\",\n      color || (isDark() ? \"#0a0a0a\" : \"#ffffff\")\n    )\n  }\n\n  build()\n  paintPaper()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(paintPaper)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", paintPaper)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", paintPaper)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-paper\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    columns = DEFAULT_COLUMNS,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n    className\n  )}\n></div>\n",
+      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Enamel of the body and paper rest — a vintage mint. */\nexport const DEFAULT_COLOR = \"#8EC3B5\"\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Body enamel, any CSS color. Default `#8EC3B5`. */\n  color?: string\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space, seen from the front and\n// a little above. The print point sits at the origin: the line being typed\n// has its baseline on y = 0, and the carriage slides so the next column\n// always lands at x = 0. Light comes from the upper left.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 314\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 42\nconst PIVOT_R = 56\nconst REST_R = 27\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 11\nconst SPOOL_Y = 80\nconst SPOOL_X = 150\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [136, 166, 196, 226]\nconst KEY_PITCH = 35\nconst KEY_R = 12.5\n/** Key tops are circles seen from above: this squashes them. */\nconst KEY_TILT = 0.64\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst INK = \"#24221F\"\nconst LEGEND = \"#EFE7D1\"\nconst RIBBON_BLACK = \"#16171A\"\nconst RIBBON_RED = \"#C4342B\"\nconst CHROME = \"#D3D8DC\"\nconst CHROME_EDGE = \"#5E656C\"\nconst SHEET = \"var(--typewriter-sheet, #FBF9F3)\"\n\n/** An SVG element. A `fill` of `\"sheet\"` paints in the paper tone. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key === \"fill\" && value === \"sheet\") node.style.fill = SHEET\n    else node.setAttribute(key, String(value))\n  }\n  parent?.append(node)\n  return node\n}\n\ntype Rgb = [number, number, number]\n\nlet swatch: CanvasRenderingContext2D | null = null\n\n/** Any CSS color as RGB, via a one-pixel canvas. */\nfunction rgbOf(color: string, fallback: Rgb): Rgb {\n  swatch ??= document\n    .createElement(\"canvas\")\n    .getContext(\"2d\", { willReadFrequently: true })\n  if (!swatch) return fallback\n  swatch.clearRect(0, 0, 1, 1)\n  swatch.fillStyle = `rgb(${fallback.join(\" \")})`\n  swatch.fillStyle = color\n  swatch.fillRect(0, 0, 1, 1)\n  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data\n  return [r, g, b]\n}\n\nfunction mix(a: Rgb, b: Rgb, t: number) {\n  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))\n  return `rgb(${c.join(\" \")})`\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGGElement\n  strike: SVGGElement\n  /** Dark edge under the bar, so it reads over the paper. */\n  edge: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  shadow: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: { path: SVGPathElement; dy: number }[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\n/**\n * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,\n * platen, knobs, return lever, sheet, scale) and the body (enamel shell,\n * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;\n * its lights and shadows are mixed from it.\n */\nfunction drawMachine(\n  svg: SVGSVGElement,\n  id: string,\n  columns: number,\n  color: string\n): Machine {\n  const span = columns * CW\n  const platenL = -PAD - 22\n  const platenR = span + PAD + 22\n  const knobW = 15\n  const leverX = platenL - knobW - 4\n  // Room for the carriage at both ends of its travel, and the body.\n  const left = leverX - 56 - (span + CW / 2)\n  const right = platenR + knobW - CW / 2\n  const half = Math.ceil(Math.max(-left, right, 262) + 14)\n  svg.replaceChildren()\n  svg.setAttribute(\n    \"viewBox\",\n    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n  )\n\n  const base = rgbOf(color, [142, 195, 181])\n  const white: Rgb = [255, 255, 255]\n  const black: Rgb = [0, 0, 0]\n  const enamel = {\n    shine: mix(base, white, 0.62),\n    hi: mix(base, white, 0.34),\n    light: mix(base, white, 0.14),\n    mid: mix(base, base, 0),\n    low: mix(base, black, 0.16),\n    deep: mix(base, black, 0.34),\n    edge: mix(base, black, 0.55),\n  }\n\n  /* Gradients. */\n  const defs = draw(\"defs\", {}, svg)\n  const gradient = (\n    name: string,\n    kind: \"linearGradient\" | \"radialGradient\",\n    attrs: Record<string, string | number>,\n    stops: [number, string, number?][]\n  ) => {\n    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)\n    for (const [offset, stopColor, alpha = 1] of stops) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": stopColor, \"stop-opacity\": alpha },\n        el\n      )\n    }\n    return `url(#${id}-${name})`\n  }\n  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }\n  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }\n  const fills = {\n    body: gradient(\"body\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.18, enamel.light],\n      [0.62, enamel.mid],\n      [1, enamel.low],\n    ]),\n    sides: gradient(\"sides\", \"linearGradient\", across, [\n      [0, \"#000\", 0.26],\n      [0.1, \"#000\", 0.04],\n      [0.5, \"#fff\", 0.05],\n      [0.9, \"#000\", 0.04],\n      [1, \"#000\", 0.3],\n    ]),\n    front: gradient(\"front\", \"linearGradient\", down, [\n      [0, enamel.low],\n      [1, enamel.deep],\n    ]),\n    rest: gradient(\"rest\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.5, enamel.light],\n      [1, enamel.low],\n    ]),\n    chrome: gradient(\"chrome\", \"linearGradient\", down, [\n      [0, \"#FDFEFE\"],\n      [0.38, \"#D2D7DB\"],\n      [0.52, \"#8B9298\"],\n      [0.7, \"#C3C8CC\"],\n      [1, \"#EEF0F2\"],\n    ]),\n    chromeV: gradient(\"chrome-v\", \"linearGradient\", across, [\n      [0, \"#8B9298\"],\n      [0.35, \"#F4F6F7\"],\n      [0.6, \"#BFC4C9\"],\n      [1, \"#737A80\"],\n    ]),\n    rubber: gradient(\"rubber\", \"linearGradient\", down, [\n      [0, \"#55595E\"],\n      [0.16, \"#2A2D31\"],\n      [0.55, \"#0D0E10\"],\n      [0.85, \"#050607\"],\n      [1, \"#1E2124\"],\n    ]),\n    bakelite: gradient(\"bakelite\", \"linearGradient\", down, [\n      [0, \"#62666C\"],\n      [0.2, \"#2C2F33\"],\n      [0.6, \"#111214\"],\n      [1, \"#2A2D31\"],\n    ]),\n    capTop: gradient(\n      \"cap-top\",\n      \"radialGradient\",\n      { cx: 0.38, cy: 0.3, r: 0.75 },\n      [\n        [0, \"#575C63\"],\n        [0.55, \"#202326\"],\n        [1, \"#0C0D0F\"],\n      ]\n    ),\n    capSide: gradient(\"cap-side\", \"linearGradient\", down, [\n      [0, \"#9AA1A7\"],\n      [0.5, \"#4B5157\"],\n      [1, \"#2A2E32\"],\n    ]),\n    well: gradient(\"well\", \"linearGradient\", down, [\n      [0, \"#08090A\"],\n      [0.18, \"#151719\"],\n      [1, \"#24272A\"],\n    ]),\n    recess: gradient(\"recess\", \"radialGradient\", { cx: 0.5, cy: 0, r: 1 }, [\n      [0, \"#030304\"],\n      [0.7, \"#141618\"],\n      [1, \"#24272A\"],\n    ]),\n    spoolRibbon: gradient(\n      \"spool-ribbon\",\n      \"radialGradient\",\n      { cx: 0.42, cy: 0.38, r: 0.7 },\n      [\n        [0, \"#3B3E43\"],\n        [0.7, \"#151618\"],\n        [1, \"#060607\"],\n      ]\n    ),\n    flange: gradient(\n      \"flange\",\n      \"radialGradient\",\n      { cx: 0.36, cy: 0.3, r: 0.85 },\n      [\n        [0, \"#FFFFFF\"],\n        [0.45, \"#CDD2D6\"],\n        [1, \"#7D848A\"],\n      ]\n    ),\n    ground: gradient(\"ground\", \"radialGradient\", { cx: 0.5, cy: 0.5, r: 0.5 }, [\n      [0, \"#000\", 0.34],\n      [0.6, \"#000\", 0.12],\n      [1, \"#000\", 0],\n    ]),\n    keyShadow: gradient(\n      \"key-shadow\",\n      \"radialGradient\",\n      { cx: 0.5, cy: 0.5, r: 0.5 },\n      [\n        [0, \"#000\", 0.7],\n        [1, \"#000\", 0],\n      ]\n    ),\n    curl: gradient(\n      \"curl\",\n      \"linearGradient\",\n      { gradientUnits: \"userSpaceOnUse\", x1: 0, y1: 12, x2: 0, y2: 41 },\n      [\n        [0, \"#3A2E1C\", 0],\n        [0.55, \"#3A2E1C\", 0.1],\n        [1, \"#3A2E1C\", 0.34],\n      ]\n    ),\n  }\n\n  // The sheet fades out at the top of the frame and tucks behind the\n  // platen at the bottom.\n  const fade = gradient(\n    \"fade-g\",\n    \"linearGradient\",\n    {\n      gradientUnits: \"userSpaceOnUse\",\n      x1: 0,\n      x2: 0,\n      y1: VIEW_TOP,\n      y2: 41,\n    },\n    [\n      [0, \"#fff\", 0],\n      [84 / (41 - VIEW_TOP), \"#fff\", 1],\n      [0.998, \"#fff\", 1],\n      [1, \"#fff\", 0],\n    ]\n  )\n  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }\n  const mask = draw(\n    \"mask\",\n    { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n    defs\n  )\n  draw(\"rect\", { ...box, fill: fade }, mask)\n\n  // Ground shadow.\n  draw(\"ellipse\", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)\n\n  /* ---------------- Carriage ---------------- */\n\n  const carriage = draw(\"g\", {}, svg)\n  // Rail it rides on.\n  draw(\n    \"rect\",\n    {\n      x: platenL - knobW - 8,\n      y: 40,\n      width: platenR - platenL + knobW * 2 + 16,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  // Paper rest behind the sheet.\n  const tL = -PAD - 16\n  const tR = span + PAD + 16\n  draw(\n    \"path\",\n    {\n      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,\n      fill: fills.rest,\n    },\n    carriage\n  )\n  draw(\n    \"path\",\n    {\n      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.4,\n      \"stroke-opacity\": 0.85,\n    },\n    carriage\n  )\n  // Platen, with chrome collars at its ends.\n  draw(\n    \"rect\",\n    {\n      x: platenL,\n      y: 6,\n      width: platenR - platenL,\n      height: 34,\n      rx: 4,\n      fill: fills.rubber,\n    },\n    carriage\n  )\n  draw(\n    \"rect\",\n    {\n      x: platenL + 4,\n      y: 10.5,\n      width: platenR - platenL - 8,\n      height: 1.6,\n      rx: 0.8,\n      fill: \"#fff\",\n      \"fill-opacity\": 0.22,\n    },\n    carriage\n  )\n  for (const x of [platenL - 4, platenR]) {\n    draw(\n      \"rect\",\n      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },\n      carriage\n    )\n  }\n  // Knobs: bakelite with knurling that turns with the platen.\n  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {\n    draw(\n      \"rect\",\n      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },\n      carriage\n    )\n    const lines = Array.from({ length: RIDGES }, () =>\n      draw(\n        \"line\",\n        {\n          x1: x + 2.5,\n          x2: x + knobW - 2.5,\n          stroke: \"#B8BEC4\",\n          \"stroke-width\": 1,\n          \"stroke-linecap\": \"round\",\n        },\n        carriage\n      )\n    )\n    draw(\n      \"rect\",\n      {\n        x: x + 2,\n        y: 3,\n        width: knobW - 4,\n        height: 6,\n        rx: 3,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.12,\n      },\n      carriage\n    )\n    return { x, lines }\n  })\n  // Carriage return lever: chrome arm, bakelite grip.\n  const lever = draw(\"g\", {}, carriage)\n  const leverPivot: [number, number] = [leverX, 30]\n  draw(\n    \"rect\",\n    {\n      x: leverX - 5,\n      y: 20,\n      width: 10,\n      height: 22,\n      rx: 3,\n      fill: fills.chromeV,\n    },\n    lever\n  )\n  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 6.4],\n    [CHROME, 4],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: arm,\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n  }\n  draw(\n    \"path\",\n    {\n      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,\n      fill: \"none\",\n      stroke: \"#fff\",\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.8,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    lever\n  )\n  draw(\n    \"rect\",\n    {\n      x: leverX - 56,\n      y: -25,\n      width: 28,\n      height: 11,\n      rx: 5.5,\n      fill: fills.bakelite,\n      transform: `rotate(-24 ${leverX - 42} -19.5)`,\n    },\n    lever\n  )\n\n  // The sheet, masked so it fades at the top and wraps under the platen.\n  const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n  const paper = draw(\"g\", {}, wrap)\n  const shadow = draw(\n    \"rect\",\n    {\n      x: -PAD + 3,\n      y: -TOP_MARGIN + 3,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"#000\",\n      \"fill-opacity\": 0.12,\n    },\n    paper\n  )\n  const sheet = draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: -TOP_MARGIN,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"sheet\",\n      stroke: \"#000\",\n      \"stroke-opacity\": 0.07,\n      \"stroke-width\": 0.8,\n    },\n    paper\n  )\n  const ink = draw(\n    \"g\",\n    { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: INK },\n    paper\n  )\n  // Where the sheet curls round the platen.\n  draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: 12,\n      width: span + PAD * 2,\n      height: 30,\n      fill: fills.curl,\n    },\n    wrap\n  )\n\n  // Paper scale under the print line.\n  draw(\n    \"rect\",\n    {\n      x: -PAD + 2,\n      y: 8.5,\n      width: span + PAD * 2 - 4,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  let ticks = \"\"\n  for (let c = 0; c <= columns; c++) {\n    const x = c * CW\n    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`\n  }\n  draw(\n    \"path\",\n    {\n      d: ticks,\n      stroke: \"#3E444A\",\n      \"stroke-width\": 0.7,\n      fill: \"none\",\n    },\n    carriage\n  )\n\n  /* ---------------- Body ---------------- */\n\n  const body = draw(\"g\", {}, svg)\n  const shell =\n    \"M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z\"\n  draw(\"path\", { d: shell, fill: fills.body }, body)\n  draw(\"path\", { d: shell, fill: fills.sides }, body)\n  // Front face, below the top surfaces, with a chrome trim.\n  draw(\n    \"path\",\n    {\n      d: \"M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z\",\n      fill: fills.front,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-240 264.5H240\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.7,\n    },\n    body\n  )\n  draw(\n    \"rect\",\n    {\n      x: -236,\n      y: 274,\n      width: 472,\n      height: 3,\n      rx: 1.5,\n      fill: fills.chrome,\n    },\n    body\n  )\n  for (const x of [-228, 188]) {\n    draw(\n      \"rect\",\n      { x, y: 293, width: 40, height: 10, rx: 4, fill: \"#151618\" },\n      body\n    )\n  }\n  const sheen = gradient(\"sheen\", \"linearGradient\", across, [\n    [0, \"#fff\", 0.34],\n    [0.55, \"#fff\", 0.1],\n    [1, \"#fff\", 0],\n  ])\n  draw(\n    \"path\",\n    { d: \"M-210 48H-96L-150 110H-224Q-222 82 -210 48Z\", fill: sheen },\n    body\n  )\n  // Glossy rim along the top of the shell.\n  draw(\n    \"path\",\n    {\n      d: \"M-194 43.4H194\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.6,\n      \"stroke-linecap\": \"round\",\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-208 56Q-212 70 -216 96\",\n      stroke: enamel.shine,\n      \"stroke-width\": 2.4,\n      \"stroke-linecap\": \"round\",\n      \"stroke-opacity\": 0.55,\n      fill: \"none\",\n    },\n    body\n  )\n\n  // Typebar basket, sunk in the deck.\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,\n      fill: fills.recess,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.75,\n    },\n    body\n  )\n  const basket = draw(\"g\", {}, body)\n  const [ax, ay] = polar(62, -SPREAD - 0.12)\n  const [bx, by] = polar(62, SPREAD + 0.12)\n  const [cx, cy] = polar(53, SPREAD + 0.12)\n  const [dx, dy] = polar(53, -SPREAD - 0.12)\n  draw(\n    \"path\",\n    {\n      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,\n      fill: fills.chrome,\n    },\n    basket\n  )\n\n  // Ribbon spools: black ribbon wound under a turning chrome flange.\n  const spools = [-SPOOL_X, SPOOL_X].map((x) => {\n    draw(\n      \"circle\",\n      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: \"#000\", \"fill-opacity\": 0.22 },\n      body\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)\n    const turn = draw(\"g\", {}, body)\n    let windows = \"\"\n    for (let i = 0; i < 3; i++) {\n      const a0 = (i / 3) * TAU + 0.25\n      const a1 = a0 + 1.35\n      const p = (r: number, a: number) =>\n        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`\n      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`\n    }\n    draw(\n      \"path\",\n      {\n        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,\n        fill: fills.flange,\n        \"fill-rule\": \"evenodd\",\n      },\n      turn\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 1.6, fill: \"#2A2D31\" }, turn)\n    return turn\n  })\n\n  // The type guide either side of the print point.\n  for (const x of [-23, 17]) {\n    draw(\n      \"rect\",\n      {\n        x,\n        y: 0,\n        width: 6,\n        height: 16,\n        rx: 1.6,\n        fill: fills.chromeV,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n  }\n\n  // Two-tone ribbon, black over red, through the vibrator.\n  const ribbon = [\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_BLACK,\n          \"stroke-width\": 5.8,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 0,\n    },\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_RED,\n          \"stroke-width\": 2.6,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 1.5,\n    },\n  ]\n  const vibrator = draw(\"g\", {}, body)\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 3.8],\n    [CHROME, 2],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: \"M-12 2.5V11.5H12V2.5\",\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linejoin\": \"round\",\n        \"stroke-linecap\": \"round\",\n      },\n      vibrator\n    )\n  }\n\n  // Keyboard well.\n  draw(\n    \"path\",\n    {\n      d: \"M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z\",\n      fill: fills.well,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126\",\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.8,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-226 254.6H226\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.6,\n    },\n    body\n  )\n\n  const ry = KEY_R * KEY_TILT\n  const height = 4.5\n  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */\n  const keyAt = (x: number, y: number, label: string) => {\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 21,\n        rx: 11,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - 1.5,\n        y: y + 4,\n        width: 3,\n        height: 19,\n        rx: 1,\n        fill: fills.chromeV,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\"ellipse\", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)\n    draw(\n      \"ellipse\",\n      {\n        cx: x,\n        cy: y + 0.3,\n        rx: KEY_R - 2.3,\n        ry: ry - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    draw(\n      \"ellipse\",\n      {\n        cx: x - 3.4,\n        cy: y - 2.6,\n        rx: 4.4,\n        ry: 1.6,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.2,\n      },\n      cap\n    )\n    const text = draw(\n      \"text\",\n      {\n        x,\n        y: y + 0.7,\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\",\n        \"font-size\": 9.6,\n        \"font-weight\": 600,\n        fill: LEGEND,\n        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,\n      },\n      cap\n    )\n    text.textContent = label\n    return cap\n  }\n\n  const keys = new Map<string, Key>()\n  const placed: { x: number; key: Key }[] = []\n  KEY_ROWS.forEach((row, r) => {\n    Array.from(row).forEach((ch, i) => {\n      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n      const key: Key = {\n        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n        bar: null,\n        v: 0,\n      }\n      keys.set(ch, key)\n      placed.push({ x, key })\n    })\n  })\n\n  /** A pill key (shift, space): same rim and cap, stretched. */\n  const pill = (x: number, y: number, w: number, legend?: string) => {\n    for (const sx of [x - w * 0.3, x + w * 0.3]) {\n      draw(\n        \"rect\",\n        {\n          x: sx - 1.5,\n          y: y + 4,\n          width: 3,\n          height: 17,\n          rx: 1,\n          fill: fills.chromeV,\n        },\n        body\n      )\n    }\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 19,\n        rx: w / 2 + 2,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    const r = ry\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r + height,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.chrome,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2 + 2.3,\n        y: y - r + 1.6,\n        width: w - 4.6,\n        height: r * 2 - 3.2,\n        rx: r - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    if (legend) {\n      draw(\"path\", { d: legend, fill: LEGEND }, cap)\n    }\n    return cap\n  }\n  const y3 = KEY_Y[3]!\n  const shifts = [-1, 1].map((side) => {\n    const x = side * 201\n    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`\n    return { cap: pill(x, y3, 30, arrow), bar: null, v: 0 } satisfies Key\n  })\n\n  // Space bar: a chrome bar on two arms.\n  for (const sx of [-80, 80]) {\n    draw(\n      \"rect\",\n      {\n        x: sx - 1.5,\n        y: 247,\n        width: 3,\n        height: 7,\n        fill: fills.chromeV,\n      },\n      body\n    )\n  }\n  const spaceCap = draw(\"g\", {}, body)\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 242,\n      width: 224,\n      height: 9,\n      rx: 4.5,\n      fill: \"#4E555B\",\n    },\n    spaceCap\n  )\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 239.5,\n      width: 224,\n      height: 8,\n      rx: 4,\n      fill: fills.chrome,\n    },\n    spaceCap\n  )\n  const space: Key = { cap: spaceCap, bar: null, v: 0 }\n\n  // One typebar per key, fanned left to right in key order.\n  const overlay = draw(\"g\", {}, svg)\n  placed.sort((a, b) => a.x - b.x)\n  const bars = placed.map(({ key }, i) => {\n    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n    const pivot = polar(PIVOT_R, angle)\n    const tip = polar(REST_R, angle)\n    const rest = draw(\"g\", {}, basket)\n    draw(\n      \"line\",\n      {\n        x1: pivot[0],\n        y1: pivot[1],\n        x2: tip[0],\n        y2: tip[1],\n        stroke: i % 2 ? \"#C4C9CE\" : \"#E6E9EC\",\n        \"stroke-width\": 1.25,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const [sx, sy] = polar(REST_R + 3.4, angle)\n    draw(\n      \"line\",\n      {\n        x1: sx,\n        y1: sy,\n        x2: tip[0],\n        y2: tip[1],\n        stroke: \"#7D848A\",\n        \"stroke-width\": 2.6,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const strike = draw(\"g\", { display: \"none\" }, overlay)\n    const line = (stroke: string, width: number) =>\n      draw(\n        \"line\",\n        { stroke, \"stroke-width\": width, \"stroke-linecap\": \"round\" },\n        strike\n      )\n    const edge = line(\"#1C1E21\", 3.9)\n    const core = line(\"#E2E5E8\", 1.8)\n    const slug = line(\"#2A2D31\", 5.6)\n    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }\n    key.bar = bar\n    return bar\n  })\n\n  return {\n    columns,\n    carriage,\n    paper,\n    sheet,\n    shadow,\n    ink,\n    lever,\n    leverPivot,\n    knobs,\n    keys,\n    shifts,\n    space,\n    basket,\n    bars,\n    ribbon,\n    vibrator,\n    spools,\n  }\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the\n * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at\n * once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    M = drawMachine(svg, id, columnsOf(), options.color ?? DEFAULT_COLOR)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -SPOOL_X : SPOOL_X\n      spool.setAttribute(\n        \"transform\",\n        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`\n      )\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const top = SPOOL_Y - 24\n    for (const { path, dy } of M.ribbon) {\n      path.setAttribute(\n        \"d\",\n        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`\n      )\n    }\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.edge, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n    M.shadow.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Theme                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */\n  const applyTheme = () => {\n    root.style.setProperty(\n      \"--typewriter-sheet\",\n      isDark() ? \"#ECE7DA\" : \"#FBF9F3\"\n    )\n  }\n\n  build()\n  applyTheme()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(applyTheme)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", applyTheme)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns || options.color !== prev.color) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", applyTheme)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-sheet\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    color = DEFAULT_COLOR,\n    columns = DEFAULT_COLUMNS,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n    className\n  )}\n></div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/typewriter.svelte"
     }
diff --git a/public/r/typewriter.json b/public/r/typewriter.json
index 206ba89..314da0a 100644
--- a/public/r/typewriter.json
+++ b/public/r/typewriter.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/typewriter/typewriter.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space. The print point sits at\n// the origin: the line being typed has its baseline on y = 0, and the\n// carriage slides so the next column always lands at x = 0.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 302\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 50\nconst PIVOT_R = 58\nconst REST_R = 30\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 9\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [142, 172, 202, 232]\nconst KEY_PITCH = 35\nconst KEY_R = 12\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4.5\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst PAPER = \"var(--typewriter-paper)\"\n\n/** An SVG element. `fill` / `stroke` of `\"paper\"` paint in the page color. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if ((key === \"fill\" || key === \"stroke\") && value === \"paper\") {\n      node.style.setProperty(key, PAPER)\n    } else {\n      node.setAttribute(key, String(value))\n    }\n  }\n  parent?.append(node)\n  return node\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGLineElement\n  strike: SVGGElement\n  /** Page-colored outline under the bar, so it reads over the machine. */\n  arm: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: SVGPathElement[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. Ink is `currentColor`; the paper takes the page\n * color behind it. `prefers-reduced-motion` prints the whole page at once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    const columns = columnsOf()\n    const span = columns * CW\n    const platenL = -PAD - 22\n    const platenR = span + PAD + 22\n    const knobW = 14\n    const leverX = platenL - knobW - 3\n    // Room for the carriage at both ends of its travel, and the body.\n    const left = leverX - 52 - (span + CW / 2)\n    const right = platenR + knobW - CW / 2\n    const half = Math.ceil(Math.max(-left, right, 262) + 14)\n    svg.replaceChildren()\n    svg.setAttribute(\n      \"viewBox\",\n      `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n    )\n\n    // The sheet fades out at the top of the frame and tucks behind the\n    // platen at the bottom.\n    const defs = draw(\"defs\", {}, svg)\n    const fade = draw(\n      \"linearGradient\",\n      {\n        id: `${id}-fade-g`,\n        gradientUnits: \"userSpaceOnUse\",\n        x1: 0,\n        x2: 0,\n        y1: VIEW_TOP,\n        y2: 40,\n      },\n      defs\n    )\n    const soft = 84 / (40 - VIEW_TOP)\n    for (const [offset, alpha] of [\n      [0, 0],\n      [soft, 1],\n      [0.998, 1],\n      [1, 0],\n    ] as const) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": \"#fff\", \"stop-opacity\": alpha },\n        fade\n      )\n    }\n    const box = {\n      x: -4000,\n      y: VIEW_TOP - 4,\n      width: 8000,\n      height: 48 - VIEW_TOP,\n    }\n    const mask = draw(\n      \"mask\",\n      { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n      defs\n    )\n    draw(\"rect\", { ...box, fill: `url(#${id}-fade-g)` }, mask)\n\n    /* Carriage: rail, platen, knobs, return lever, the sheet, the scale. */\n    const carriage = draw(\"g\", {}, svg)\n    draw(\n      \"rect\",\n      {\n        x: platenL - knobW,\n        y: 42,\n        width: platenR - platenL + knobW * 2,\n        height: 6,\n        rx: 3,\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.7,\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL,\n        y: 6,\n        width: platenR - platenL,\n        height: 34,\n        rx: 10,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    draw(\n      \"rect\",\n      {\n        x: platenL + 8,\n        y: 11,\n        width: platenR - platenL - 16,\n        height: 2,\n        rx: 1,\n        fill: \"paper\",\n        \"fill-opacity\": 0.3,\n      },\n      carriage\n    )\n    const knobs = [platenL - knobW, platenR].map((x) => {\n      draw(\n        \"rect\",\n        { x, y: 2, width: knobW, height: 42, rx: 5, fill: \"currentColor\" },\n        carriage\n      )\n      const lines = Array.from({ length: RIDGES }, () =>\n        draw(\n          \"line\",\n          {\n            x1: x + 2.6,\n            x2: x + knobW - 2.6,\n            stroke: \"paper\",\n            \"stroke-width\": 1.1,\n            \"stroke-linecap\": \"round\",\n          },\n          carriage\n        )\n      )\n      return { x, lines }\n    })\n    const lever = draw(\"g\", {}, carriage)\n    const leverPivot: [number, number] = [leverX, 32]\n    draw(\n      \"rect\",\n      {\n        x: leverX - 5,\n        y: 22,\n        width: 9,\n        height: 22,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      lever\n    )\n    draw(\n      \"path\",\n      {\n        d: `M${leverX} 30L${leverX - 12} 6L${leverX - 34} -12`,\n        fill: \"none\",\n        stroke: \"currentColor\",\n        \"stroke-width\": 5,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n    draw(\n      \"rect\",\n      {\n        x: leverX - 52,\n        y: -23,\n        width: 26,\n        height: 10,\n        rx: 5,\n        fill: \"currentColor\",\n        transform: `rotate(-24 ${leverX - 39} -18)`,\n      },\n      lever\n    )\n\n    const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n    const paper = draw(\"g\", {}, wrap)\n    const sheet = draw(\n      \"rect\",\n      {\n        x: -PAD,\n        y: -TOP_MARGIN,\n        width: span + PAD * 2,\n        height: 600,\n        fill: \"paper\",\n        stroke: \"currentColor\",\n        \"stroke-opacity\": 0.24,\n        \"stroke-width\": 1,\n      },\n      paper\n    )\n    const ink = draw(\n      \"g\",\n      { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: \"currentColor\" },\n      paper\n    )\n\n    // The paper scale, just under the print line.\n    draw(\n      \"rect\",\n      {\n        x: -PAD + 4,\n        y: 9,\n        width: span + PAD * 2 - 8,\n        height: 5,\n        rx: 2.5,\n        fill: \"currentColor\",\n      },\n      carriage\n    )\n    let ticks = \"\"\n    for (let c = 0; c <= columns; c++) {\n      const x = c * CW\n      ticks += `M${x} 9.7V${c % 10 === 0 ? 13.3 : c % 5 === 0 ? 12.2 : 11}`\n    }\n    draw(\n      \"path\",\n      {\n        d: ticks,\n        stroke: \"paper\",\n        \"stroke-width\": 0.8,\n        \"stroke-opacity\": 0.75,\n        fill: \"none\",\n      },\n      carriage\n    )\n\n    /* Body: keyboard well, frame, basket, deck, spools, ribbon, keys. */\n    const body = draw(\"g\", {}, svg)\n    draw(\n      \"path\",\n      {\n        d: \"M-226 112H226L246 272H-246Z\",\n        fill: \"currentColor\",\n        \"fill-opacity\": 0.07,\n      },\n      body\n    )\n    for (const side of [-1, 1]) {\n      draw(\n        \"path\",\n        {\n          d: `M${side * 212} 108L${side * 232} 108L${side * 260} 272L${side * 238} 272Z`,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    const basket = draw(\"g\", {}, body)\n    const [ax, ay] = polar(63, -SPREAD - 0.1)\n    const [bx, by] = polar(63, SPREAD + 0.1)\n    const [cx, cy] = polar(55, SPREAD + 0.1)\n    const [dx, dy] = polar(55, -SPREAD - 0.1)\n    draw(\n      \"path\",\n      {\n        d: `M${ax} ${ay}A63 63 0 0 0 ${bx} ${by}L${cx} ${cy}A55 55 0 0 1 ${dx} ${dy}Z`,\n        fill: \"currentColor\",\n      },\n      basket\n    )\n\n    // The deck, with the basket showing through its notch.\n    draw(\n      \"path\",\n      {\n        d: \"M-194 50H-67A67 67 0 0 0 67 50H194Q210 50 212 66L228 108Q230 116 220 116H-220Q-230 116 -228 108L-212 66Q-210 50 -194 50Z\",\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-216 109H216\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n\n    const spools = [-150, 150].map((x) => {\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: 84,\n          r: 23,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 1.1,\n        },\n        body\n      )\n      const turn = draw(\"g\", {}, body)\n      for (let i = 0; i < 5; i++) {\n        const a = (i / 5) * TAU\n        draw(\n          \"circle\",\n          {\n            cx: x + Math.cos(a) * 13,\n            cy: 84 + Math.sin(a) * 13,\n            r: 3.6,\n            fill: \"paper\",\n          },\n          turn\n        )\n      }\n      draw(\"circle\", { cx: x, cy: 84, r: 4.4, fill: \"paper\" }, turn)\n      draw(\"circle\", { cx: x, cy: 84, r: 1.8, fill: \"currentColor\" }, turn)\n      return turn\n    })\n\n    // The type guide either side of the print point.\n    for (const side of [-1, 1]) {\n      draw(\n        \"rect\",\n        {\n          x: side < 0 ? -22 : 17,\n          y: 1,\n          width: 5,\n          height: 15,\n          rx: 1.5,\n          fill: \"currentColor\",\n          stroke: \"paper\",\n          \"stroke-width\": 1.2,\n          \"paint-order\": \"stroke\",\n        },\n        body\n      )\n    }\n\n    const ribbon = [\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-width\": 6.4,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: \"currentColor\",\n          \"stroke-width\": 3.2,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n    ]\n    const vibrator = draw(\"g\", {}, body)\n    for (const [stroke, width] of [\n      [\"paper\", 4.4],\n      [\"currentColor\", 2],\n    ] as const) {\n      draw(\n        \"path\",\n        {\n          d: \"M-12 3V11.5H12V3\",\n          fill: \"none\",\n          stroke,\n          \"stroke-width\": width,\n          \"stroke-linejoin\": \"round\",\n          \"stroke-linecap\": \"round\",\n        },\n        vibrator\n      )\n    }\n\n    // Keys: round caps on stems, in four staggered rows.\n    const keyAt = (x: number, y: number, label: string) => {\n      draw(\n        \"line\",\n        {\n          x1: x,\n          y1: y,\n          x2: x,\n          y2: y + 24,\n          stroke: \"currentColor\",\n          \"stroke-opacity\": 0.42,\n          \"stroke-width\": 2.4,\n          \"stroke-linecap\": \"round\",\n        },\n        body\n      )\n      const cap = draw(\"g\", {}, body)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R + 1.6, fill: \"paper\" }, cap)\n      draw(\"circle\", { cx: x, cy: y, r: KEY_R, fill: \"currentColor\" }, cap)\n      draw(\n        \"circle\",\n        {\n          cx: x,\n          cy: y,\n          r: KEY_R - 2.6,\n          fill: \"none\",\n          stroke: \"paper\",\n          \"stroke-opacity\": 0.45,\n          \"stroke-width\": 0.9,\n        },\n        cap\n      )\n      const text = draw(\n        \"text\",\n        {\n          x,\n          y: y + 0.5,\n          \"text-anchor\": \"middle\",\n          \"dominant-baseline\": \"central\",\n          \"font-size\": 10,\n          \"font-weight\": 600,\n          fill: \"paper\",\n        },\n        cap\n      )\n      text.textContent = label\n      return cap\n    }\n\n    const keys = new Map<string, Key>()\n    const placed: { ch: string; x: number; key: Key }[] = []\n    KEY_ROWS.forEach((row, r) => {\n      Array.from(row).forEach((ch, i) => {\n        const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n        const key: Key = {\n          cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n          bar: null,\n          v: 0,\n        }\n        keys.set(ch, key)\n        placed.push({ ch, x, key })\n      })\n    })\n\n    const pill = (x: number, y: number, w: number, h: number) => {\n      for (const sx of [x - w * 0.3, x + w * 0.3]) {\n        draw(\n          \"line\",\n          {\n            x1: sx,\n            y1: y,\n            x2: sx,\n            y2: y + 22,\n            stroke: \"currentColor\",\n            \"stroke-opacity\": 0.42,\n            \"stroke-width\": 2.4,\n            \"stroke-linecap\": \"round\",\n          },\n          body\n        )\n      }\n      const cap = draw(\"g\", {}, body)\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2 - 1.6,\n          y: y - h / 2 - 1.6,\n          width: w + 3.2,\n          height: h + 3.2,\n          rx: h / 2 + 1.6,\n          fill: \"paper\",\n        },\n        cap\n      )\n      draw(\n        \"rect\",\n        {\n          x: x - w / 2,\n          y: y - h / 2,\n          width: w,\n          height: h,\n          rx: h / 2,\n          fill: \"currentColor\",\n        },\n        cap\n      )\n      return cap\n    }\n    const shifts = [-1, 1].map((side) => {\n      const x = side * 201\n      const cap = pill(x, KEY_Y[3]!, 30, 22)\n      draw(\n        \"path\",\n        {\n          d: `M${x} ${KEY_Y[3]! - 5}L${x + 5} ${KEY_Y[3]! + 1}H${x + 2}V${KEY_Y[3]! + 5}H${x - 2}V${KEY_Y[3]! + 1}H${x - 5}Z`,\n          fill: \"paper\",\n        },\n        cap\n      )\n      return { cap, bar: null, v: 0 } satisfies Key\n    })\n    const space: Key = { cap: pill(0, 258, 210, 11), bar: null, v: 0 }\n\n    // Base and feet.\n    draw(\n      \"rect\",\n      {\n        x: -260,\n        y: 272,\n        width: 520,\n        height: 20,\n        rx: 8,\n        fill: \"currentColor\",\n      },\n      body\n    )\n    draw(\n      \"path\",\n      {\n        d: \"M-250 277H250\",\n        stroke: \"paper\",\n        \"stroke-opacity\": 0.22,\n        \"stroke-width\": 1,\n      },\n      body\n    )\n    for (const x of [-238, 202]) {\n      draw(\n        \"rect\",\n        {\n          x,\n          y: 290,\n          width: 36,\n          height: 8,\n          rx: 3,\n          fill: \"currentColor\",\n        },\n        body\n      )\n    }\n\n    // One typebar per key, fanned left to right in key order.\n    const overlay = draw(\"g\", {}, svg)\n    placed.sort((a, b) => a.x - b.x)\n    const bars = placed.map(({ key }, i) => {\n      const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n      const pivot = polar(PIVOT_R, angle)\n      const tip = polar(REST_R, angle)\n      const rest = draw(\n        \"line\",\n        {\n          x1: pivot[0],\n          y1: pivot[1],\n          x2: tip[0],\n          y2: tip[1],\n          stroke: \"currentColor\",\n          \"stroke-width\": 1.3,\n          \"stroke-linecap\": \"round\",\n        },\n        basket\n      )\n      const strike = draw(\"g\", { display: \"none\" }, overlay)\n      const arm = draw(\n        \"line\",\n        {\n          stroke: \"paper\",\n          \"stroke-width\": 4.4,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const core = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 2,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const slug = draw(\n        \"line\",\n        {\n          stroke: \"currentColor\",\n          \"stroke-width\": 5.5,\n          \"stroke-linecap\": \"round\",\n        },\n        strike\n      )\n      const bar: Bar = { rest, strike, arm, core, slug, pivot, tip, v: 0 }\n      key.bar = bar\n      return bar\n    })\n\n    M = {\n      columns,\n      carriage,\n      paper,\n      sheet,\n      ink,\n      lever,\n      leverPivot,\n      knobs,\n      keys,\n      shifts,\n      space,\n      basket,\n      bars,\n      ribbon,\n      vibrator,\n      spools,\n    }\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -150 : 150\n      spool.setAttribute(\"transform\", `rotate(${deg.toFixed(1)} ${x} 84)`)\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const d = `M-150 61L-12 ${y.toFixed(2)}H12L150 61`\n    for (const path of M.ribbon) path.setAttribute(\"d\", d)\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.arm, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Paper color                                                       */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** The sheet is the page: the first opaque background behind the machine. */\n  const paintPaper = () => {\n    let color = \"\"\n    for (let el: Element | null = root; el; el = el.parentElement) {\n      const bg = getComputedStyle(el).backgroundColor\n      if (bg && !/^transparent$|,\\s*0\\)$|\\/\\s*0\\)$/.test(bg)) {\n        color = bg\n        break\n      }\n    }\n    root.style.setProperty(\n      \"--typewriter-paper\",\n      color || (isDark() ? \"#0a0a0a\" : \"#ffffff\")\n    )\n  }\n\n  build()\n  paintPaper()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(paintPaper)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", paintPaper)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", paintPaper)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-paper\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter that types — each letter presses its key, swings that key's\n * typebar up to strike the ribbon, and steps the carriage left. At the\n * margin the lever kicks, the platen turns up a line, and the carriage\n * slides home. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  columns = DEFAULT_COLUMNS,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      columns,\n      jitter,\n      sound,\n    })\n  }, [text, speed, humanize, loop, hold, startDelay, columns, jitter, sound])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n        className\n      )}\n    />\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Enamel of the body and paper rest — a vintage mint. */\nexport const DEFAULT_COLOR = \"#8EC3B5\"\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Body enamel, any CSS color. Default `#8EC3B5`. */\n  color?: string\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space, seen from the front and\n// a little above. The print point sits at the origin: the line being typed\n// has its baseline on y = 0, and the carriage slides so the next column\n// always lands at x = 0. Light comes from the upper left.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 314\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 42\nconst PIVOT_R = 56\nconst REST_R = 27\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 11\nconst SPOOL_Y = 80\nconst SPOOL_X = 150\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [136, 166, 196, 226]\nconst KEY_PITCH = 35\nconst KEY_R = 12.5\n/** Key tops are circles seen from above: this squashes them. */\nconst KEY_TILT = 0.64\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst INK = \"#24221F\"\nconst LEGEND = \"#EFE7D1\"\nconst RIBBON_BLACK = \"#16171A\"\nconst RIBBON_RED = \"#C4342B\"\nconst CHROME = \"#D3D8DC\"\nconst CHROME_EDGE = \"#5E656C\"\nconst SHEET = \"var(--typewriter-sheet, #FBF9F3)\"\n\n/** An SVG element. A `fill` of `\"sheet\"` paints in the paper tone. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key === \"fill\" && value === \"sheet\") node.style.fill = SHEET\n    else node.setAttribute(key, String(value))\n  }\n  parent?.append(node)\n  return node\n}\n\ntype Rgb = [number, number, number]\n\nlet swatch: CanvasRenderingContext2D | null = null\n\n/** Any CSS color as RGB, via a one-pixel canvas. */\nfunction rgbOf(color: string, fallback: Rgb): Rgb {\n  swatch ??= document\n    .createElement(\"canvas\")\n    .getContext(\"2d\", { willReadFrequently: true })\n  if (!swatch) return fallback\n  swatch.clearRect(0, 0, 1, 1)\n  swatch.fillStyle = `rgb(${fallback.join(\" \")})`\n  swatch.fillStyle = color\n  swatch.fillRect(0, 0, 1, 1)\n  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data\n  return [r, g, b]\n}\n\nfunction mix(a: Rgb, b: Rgb, t: number) {\n  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))\n  return `rgb(${c.join(\" \")})`\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGGElement\n  strike: SVGGElement\n  /** Dark edge under the bar, so it reads over the paper. */\n  edge: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  shadow: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: { path: SVGPathElement; dy: number }[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\n/**\n * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,\n * platen, knobs, return lever, sheet, scale) and the body (enamel shell,\n * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;\n * its lights and shadows are mixed from it.\n */\nfunction drawMachine(\n  svg: SVGSVGElement,\n  id: string,\n  columns: number,\n  color: string\n): Machine {\n  const span = columns * CW\n  const platenL = -PAD - 22\n  const platenR = span + PAD + 22\n  const knobW = 15\n  const leverX = platenL - knobW - 4\n  // Room for the carriage at both ends of its travel, and the body.\n  const left = leverX - 56 - (span + CW / 2)\n  const right = platenR + knobW - CW / 2\n  const half = Math.ceil(Math.max(-left, right, 262) + 14)\n  svg.replaceChildren()\n  svg.setAttribute(\n    \"viewBox\",\n    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n  )\n\n  const base = rgbOf(color, [142, 195, 181])\n  const white: Rgb = [255, 255, 255]\n  const black: Rgb = [0, 0, 0]\n  const enamel = {\n    shine: mix(base, white, 0.62),\n    hi: mix(base, white, 0.34),\n    light: mix(base, white, 0.14),\n    mid: mix(base, base, 0),\n    low: mix(base, black, 0.16),\n    deep: mix(base, black, 0.34),\n    edge: mix(base, black, 0.55),\n  }\n\n  /* Gradients. */\n  const defs = draw(\"defs\", {}, svg)\n  const gradient = (\n    name: string,\n    kind: \"linearGradient\" | \"radialGradient\",\n    attrs: Record<string, string | number>,\n    stops: [number, string, number?][]\n  ) => {\n    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)\n    for (const [offset, stopColor, alpha = 1] of stops) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": stopColor, \"stop-opacity\": alpha },\n        el\n      )\n    }\n    return `url(#${id}-${name})`\n  }\n  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }\n  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }\n  const fills = {\n    body: gradient(\"body\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.18, enamel.light],\n      [0.62, enamel.mid],\n      [1, enamel.low],\n    ]),\n    sides: gradient(\"sides\", \"linearGradient\", across, [\n      [0, \"#000\", 0.26],\n      [0.1, \"#000\", 0.04],\n      [0.5, \"#fff\", 0.05],\n      [0.9, \"#000\", 0.04],\n      [1, \"#000\", 0.3],\n    ]),\n    front: gradient(\"front\", \"linearGradient\", down, [\n      [0, enamel.low],\n      [1, enamel.deep],\n    ]),\n    rest: gradient(\"rest\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.5, enamel.light],\n      [1, enamel.low],\n    ]),\n    chrome: gradient(\"chrome\", \"linearGradient\", down, [\n      [0, \"#FDFEFE\"],\n      [0.38, \"#D2D7DB\"],\n      [0.52, \"#8B9298\"],\n      [0.7, \"#C3C8CC\"],\n      [1, \"#EEF0F2\"],\n    ]),\n    chromeV: gradient(\"chrome-v\", \"linearGradient\", across, [\n      [0, \"#8B9298\"],\n      [0.35, \"#F4F6F7\"],\n      [0.6, \"#BFC4C9\"],\n      [1, \"#737A80\"],\n    ]),\n    rubber: gradient(\"rubber\", \"linearGradient\", down, [\n      [0, \"#55595E\"],\n      [0.16, \"#2A2D31\"],\n      [0.55, \"#0D0E10\"],\n      [0.85, \"#050607\"],\n      [1, \"#1E2124\"],\n    ]),\n    bakelite: gradient(\"bakelite\", \"linearGradient\", down, [\n      [0, \"#62666C\"],\n      [0.2, \"#2C2F33\"],\n      [0.6, \"#111214\"],\n      [1, \"#2A2D31\"],\n    ]),\n    capTop: gradient(\n      \"cap-top\",\n      \"radialGradient\",\n      { cx: 0.38, cy: 0.3, r: 0.75 },\n      [\n        [0, \"#575C63\"],\n        [0.55, \"#202326\"],\n        [1, \"#0C0D0F\"],\n      ]\n    ),\n    capSide: gradient(\"cap-side\", \"linearGradient\", down, [\n      [0, \"#9AA1A7\"],\n      [0.5, \"#4B5157\"],\n      [1, \"#2A2E32\"],\n    ]),\n    well: gradient(\"well\", \"linearGradient\", down, [\n      [0, \"#08090A\"],\n      [0.18, \"#151719\"],\n      [1, \"#24272A\"],\n    ]),\n    recess: gradient(\"recess\", \"radialGradient\", { cx: 0.5, cy: 0, r: 1 }, [\n      [0, \"#030304\"],\n      [0.7, \"#141618\"],\n      [1, \"#24272A\"],\n    ]),\n    spoolRibbon: gradient(\n      \"spool-ribbon\",\n      \"radialGradient\",\n      { cx: 0.42, cy: 0.38, r: 0.7 },\n      [\n        [0, \"#3B3E43\"],\n        [0.7, \"#151618\"],\n        [1, \"#060607\"],\n      ]\n    ),\n    flange: gradient(\n      \"flange\",\n      \"radialGradient\",\n      { cx: 0.36, cy: 0.3, r: 0.85 },\n      [\n        [0, \"#FFFFFF\"],\n        [0.45, \"#CDD2D6\"],\n        [1, \"#7D848A\"],\n      ]\n    ),\n    ground: gradient(\"ground\", \"radialGradient\", { cx: 0.5, cy: 0.5, r: 0.5 }, [\n      [0, \"#000\", 0.34],\n      [0.6, \"#000\", 0.12],\n      [1, \"#000\", 0],\n    ]),\n    keyShadow: gradient(\n      \"key-shadow\",\n      \"radialGradient\",\n      { cx: 0.5, cy: 0.5, r: 0.5 },\n      [\n        [0, \"#000\", 0.7],\n        [1, \"#000\", 0],\n      ]\n    ),\n    curl: gradient(\n      \"curl\",\n      \"linearGradient\",\n      { gradientUnits: \"userSpaceOnUse\", x1: 0, y1: 12, x2: 0, y2: 41 },\n      [\n        [0, \"#3A2E1C\", 0],\n        [0.55, \"#3A2E1C\", 0.1],\n        [1, \"#3A2E1C\", 0.34],\n      ]\n    ),\n  }\n\n  // The sheet fades out at the top of the frame and tucks behind the\n  // platen at the bottom.\n  const fade = gradient(\n    \"fade-g\",\n    \"linearGradient\",\n    {\n      gradientUnits: \"userSpaceOnUse\",\n      x1: 0,\n      x2: 0,\n      y1: VIEW_TOP,\n      y2: 41,\n    },\n    [\n      [0, \"#fff\", 0],\n      [84 / (41 - VIEW_TOP), \"#fff\", 1],\n      [0.998, \"#fff\", 1],\n      [1, \"#fff\", 0],\n    ]\n  )\n  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }\n  const mask = draw(\n    \"mask\",\n    { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n    defs\n  )\n  draw(\"rect\", { ...box, fill: fade }, mask)\n\n  // Ground shadow.\n  draw(\"ellipse\", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)\n\n  /* ---------------- Carriage ---------------- */\n\n  const carriage = draw(\"g\", {}, svg)\n  // Rail it rides on.\n  draw(\n    \"rect\",\n    {\n      x: platenL - knobW - 8,\n      y: 40,\n      width: platenR - platenL + knobW * 2 + 16,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  // Paper rest behind the sheet.\n  const tL = -PAD - 16\n  const tR = span + PAD + 16\n  draw(\n    \"path\",\n    {\n      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,\n      fill: fills.rest,\n    },\n    carriage\n  )\n  draw(\n    \"path\",\n    {\n      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.4,\n      \"stroke-opacity\": 0.85,\n    },\n    carriage\n  )\n  // Platen, with chrome collars at its ends.\n  draw(\n    \"rect\",\n    {\n      x: platenL,\n      y: 6,\n      width: platenR - platenL,\n      height: 34,\n      rx: 4,\n      fill: fills.rubber,\n    },\n    carriage\n  )\n  draw(\n    \"rect\",\n    {\n      x: platenL + 4,\n      y: 10.5,\n      width: platenR - platenL - 8,\n      height: 1.6,\n      rx: 0.8,\n      fill: \"#fff\",\n      \"fill-opacity\": 0.22,\n    },\n    carriage\n  )\n  for (const x of [platenL - 4, platenR]) {\n    draw(\n      \"rect\",\n      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },\n      carriage\n    )\n  }\n  // Knobs: bakelite with knurling that turns with the platen.\n  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {\n    draw(\n      \"rect\",\n      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },\n      carriage\n    )\n    const lines = Array.from({ length: RIDGES }, () =>\n      draw(\n        \"line\",\n        {\n          x1: x + 2.5,\n          x2: x + knobW - 2.5,\n          stroke: \"#B8BEC4\",\n          \"stroke-width\": 1,\n          \"stroke-linecap\": \"round\",\n        },\n        carriage\n      )\n    )\n    draw(\n      \"rect\",\n      {\n        x: x + 2,\n        y: 3,\n        width: knobW - 4,\n        height: 6,\n        rx: 3,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.12,\n      },\n      carriage\n    )\n    return { x, lines }\n  })\n  // Carriage return lever: chrome arm, bakelite grip.\n  const lever = draw(\"g\", {}, carriage)\n  const leverPivot: [number, number] = [leverX, 30]\n  draw(\n    \"rect\",\n    {\n      x: leverX - 5,\n      y: 20,\n      width: 10,\n      height: 22,\n      rx: 3,\n      fill: fills.chromeV,\n    },\n    lever\n  )\n  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 6.4],\n    [CHROME, 4],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: arm,\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n  }\n  draw(\n    \"path\",\n    {\n      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,\n      fill: \"none\",\n      stroke: \"#fff\",\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.8,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    lever\n  )\n  draw(\n    \"rect\",\n    {\n      x: leverX - 56,\n      y: -25,\n      width: 28,\n      height: 11,\n      rx: 5.5,\n      fill: fills.bakelite,\n      transform: `rotate(-24 ${leverX - 42} -19.5)`,\n    },\n    lever\n  )\n\n  // The sheet, masked so it fades at the top and wraps under the platen.\n  const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n  const paper = draw(\"g\", {}, wrap)\n  const shadow = draw(\n    \"rect\",\n    {\n      x: -PAD + 3,\n      y: -TOP_MARGIN + 3,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"#000\",\n      \"fill-opacity\": 0.12,\n    },\n    paper\n  )\n  const sheet = draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: -TOP_MARGIN,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"sheet\",\n      stroke: \"#000\",\n      \"stroke-opacity\": 0.07,\n      \"stroke-width\": 0.8,\n    },\n    paper\n  )\n  const ink = draw(\n    \"g\",\n    { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: INK },\n    paper\n  )\n  // Where the sheet curls round the platen.\n  draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: 12,\n      width: span + PAD * 2,\n      height: 30,\n      fill: fills.curl,\n    },\n    wrap\n  )\n\n  // Paper scale under the print line.\n  draw(\n    \"rect\",\n    {\n      x: -PAD + 2,\n      y: 8.5,\n      width: span + PAD * 2 - 4,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  let ticks = \"\"\n  for (let c = 0; c <= columns; c++) {\n    const x = c * CW\n    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`\n  }\n  draw(\n    \"path\",\n    {\n      d: ticks,\n      stroke: \"#3E444A\",\n      \"stroke-width\": 0.7,\n      fill: \"none\",\n    },\n    carriage\n  )\n\n  /* ---------------- Body ---------------- */\n\n  const body = draw(\"g\", {}, svg)\n  const shell =\n    \"M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z\"\n  draw(\"path\", { d: shell, fill: fills.body }, body)\n  draw(\"path\", { d: shell, fill: fills.sides }, body)\n  // Front face, below the top surfaces, with a chrome trim.\n  draw(\n    \"path\",\n    {\n      d: \"M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z\",\n      fill: fills.front,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-240 264.5H240\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.7,\n    },\n    body\n  )\n  draw(\n    \"rect\",\n    {\n      x: -236,\n      y: 274,\n      width: 472,\n      height: 3,\n      rx: 1.5,\n      fill: fills.chrome,\n    },\n    body\n  )\n  for (const x of [-228, 188]) {\n    draw(\n      \"rect\",\n      { x, y: 293, width: 40, height: 10, rx: 4, fill: \"#151618\" },\n      body\n    )\n  }\n  const sheen = gradient(\"sheen\", \"linearGradient\", across, [\n    [0, \"#fff\", 0.34],\n    [0.55, \"#fff\", 0.1],\n    [1, \"#fff\", 0],\n  ])\n  draw(\n    \"path\",\n    { d: \"M-210 48H-96L-150 110H-224Q-222 82 -210 48Z\", fill: sheen },\n    body\n  )\n  // Glossy rim along the top of the shell.\n  draw(\n    \"path\",\n    {\n      d: \"M-194 43.4H194\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.6,\n      \"stroke-linecap\": \"round\",\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-208 56Q-212 70 -216 96\",\n      stroke: enamel.shine,\n      \"stroke-width\": 2.4,\n      \"stroke-linecap\": \"round\",\n      \"stroke-opacity\": 0.55,\n      fill: \"none\",\n    },\n    body\n  )\n\n  // Typebar basket, sunk in the deck.\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,\n      fill: fills.recess,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.75,\n    },\n    body\n  )\n  const basket = draw(\"g\", {}, body)\n  const [ax, ay] = polar(62, -SPREAD - 0.12)\n  const [bx, by] = polar(62, SPREAD + 0.12)\n  const [cx, cy] = polar(53, SPREAD + 0.12)\n  const [dx, dy] = polar(53, -SPREAD - 0.12)\n  draw(\n    \"path\",\n    {\n      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,\n      fill: fills.chrome,\n    },\n    basket\n  )\n\n  // Ribbon spools: black ribbon wound under a turning chrome flange.\n  const spools = [-SPOOL_X, SPOOL_X].map((x) => {\n    draw(\n      \"circle\",\n      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: \"#000\", \"fill-opacity\": 0.22 },\n      body\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)\n    const turn = draw(\"g\", {}, body)\n    let windows = \"\"\n    for (let i = 0; i < 3; i++) {\n      const a0 = (i / 3) * TAU + 0.25\n      const a1 = a0 + 1.35\n      const p = (r: number, a: number) =>\n        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`\n      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`\n    }\n    draw(\n      \"path\",\n      {\n        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,\n        fill: fills.flange,\n        \"fill-rule\": \"evenodd\",\n      },\n      turn\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 1.6, fill: \"#2A2D31\" }, turn)\n    return turn\n  })\n\n  // The type guide either side of the print point.\n  for (const x of [-23, 17]) {\n    draw(\n      \"rect\",\n      {\n        x,\n        y: 0,\n        width: 6,\n        height: 16,\n        rx: 1.6,\n        fill: fills.chromeV,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n  }\n\n  // Two-tone ribbon, black over red, through the vibrator.\n  const ribbon = [\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_BLACK,\n          \"stroke-width\": 5.8,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 0,\n    },\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_RED,\n          \"stroke-width\": 2.6,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 1.5,\n    },\n  ]\n  const vibrator = draw(\"g\", {}, body)\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 3.8],\n    [CHROME, 2],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: \"M-12 2.5V11.5H12V2.5\",\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linejoin\": \"round\",\n        \"stroke-linecap\": \"round\",\n      },\n      vibrator\n    )\n  }\n\n  // Keyboard well.\n  draw(\n    \"path\",\n    {\n      d: \"M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z\",\n      fill: fills.well,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126\",\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.8,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-226 254.6H226\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.6,\n    },\n    body\n  )\n\n  const ry = KEY_R * KEY_TILT\n  const height = 4.5\n  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */\n  const keyAt = (x: number, y: number, label: string) => {\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 21,\n        rx: 11,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - 1.5,\n        y: y + 4,\n        width: 3,\n        height: 19,\n        rx: 1,\n        fill: fills.chromeV,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\"ellipse\", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)\n    draw(\n      \"ellipse\",\n      {\n        cx: x,\n        cy: y + 0.3,\n        rx: KEY_R - 2.3,\n        ry: ry - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    draw(\n      \"ellipse\",\n      {\n        cx: x - 3.4,\n        cy: y - 2.6,\n        rx: 4.4,\n        ry: 1.6,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.2,\n      },\n      cap\n    )\n    const text = draw(\n      \"text\",\n      {\n        x,\n        y: y + 0.7,\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\",\n        \"font-size\": 9.6,\n        \"font-weight\": 600,\n        fill: LEGEND,\n        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,\n      },\n      cap\n    )\n    text.textContent = label\n    return cap\n  }\n\n  const keys = new Map<string, Key>()\n  const placed: { x: number; key: Key }[] = []\n  KEY_ROWS.forEach((row, r) => {\n    Array.from(row).forEach((ch, i) => {\n      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n      const key: Key = {\n        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n        bar: null,\n        v: 0,\n      }\n      keys.set(ch, key)\n      placed.push({ x, key })\n    })\n  })\n\n  /** A pill key (shift, space): same rim and cap, stretched. */\n  const pill = (x: number, y: number, w: number, legend?: string) => {\n    for (const sx of [x - w * 0.3, x + w * 0.3]) {\n      draw(\n        \"rect\",\n        {\n          x: sx - 1.5,\n          y: y + 4,\n          width: 3,\n          height: 17,\n          rx: 1,\n          fill: fills.chromeV,\n        },\n        body\n      )\n    }\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 19,\n        rx: w / 2 + 2,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    const r = ry\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r + height,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.chrome,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2 + 2.3,\n        y: y - r + 1.6,\n        width: w - 4.6,\n        height: r * 2 - 3.2,\n        rx: r - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    if (legend) {\n      draw(\"path\", { d: legend, fill: LEGEND }, cap)\n    }\n    return cap\n  }\n  const y3 = KEY_Y[3]!\n  const shifts = [-1, 1].map((side) => {\n    const x = side * 201\n    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`\n    return { cap: pill(x, y3, 30, arrow), bar: null, v: 0 } satisfies Key\n  })\n\n  // Space bar: a chrome bar on two arms.\n  for (const sx of [-80, 80]) {\n    draw(\n      \"rect\",\n      {\n        x: sx - 1.5,\n        y: 247,\n        width: 3,\n        height: 7,\n        fill: fills.chromeV,\n      },\n      body\n    )\n  }\n  const spaceCap = draw(\"g\", {}, body)\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 242,\n      width: 224,\n      height: 9,\n      rx: 4.5,\n      fill: \"#4E555B\",\n    },\n    spaceCap\n  )\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 239.5,\n      width: 224,\n      height: 8,\n      rx: 4,\n      fill: fills.chrome,\n    },\n    spaceCap\n  )\n  const space: Key = { cap: spaceCap, bar: null, v: 0 }\n\n  // One typebar per key, fanned left to right in key order.\n  const overlay = draw(\"g\", {}, svg)\n  placed.sort((a, b) => a.x - b.x)\n  const bars = placed.map(({ key }, i) => {\n    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n    const pivot = polar(PIVOT_R, angle)\n    const tip = polar(REST_R, angle)\n    const rest = draw(\"g\", {}, basket)\n    draw(\n      \"line\",\n      {\n        x1: pivot[0],\n        y1: pivot[1],\n        x2: tip[0],\n        y2: tip[1],\n        stroke: i % 2 ? \"#C4C9CE\" : \"#E6E9EC\",\n        \"stroke-width\": 1.25,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const [sx, sy] = polar(REST_R + 3.4, angle)\n    draw(\n      \"line\",\n      {\n        x1: sx,\n        y1: sy,\n        x2: tip[0],\n        y2: tip[1],\n        stroke: \"#7D848A\",\n        \"stroke-width\": 2.6,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const strike = draw(\"g\", { display: \"none\" }, overlay)\n    const line = (stroke: string, width: number) =>\n      draw(\n        \"line\",\n        { stroke, \"stroke-width\": width, \"stroke-linecap\": \"round\" },\n        strike\n      )\n    const edge = line(\"#1C1E21\", 3.9)\n    const core = line(\"#E2E5E8\", 1.8)\n    const slug = line(\"#2A2D31\", 5.6)\n    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }\n    key.bar = bar\n    return bar\n  })\n\n  return {\n    columns,\n    carriage,\n    paper,\n    sheet,\n    shadow,\n    ink,\n    lever,\n    leverPivot,\n    knobs,\n    keys,\n    shifts,\n    space,\n    basket,\n    bars,\n    ribbon,\n    vibrator,\n    spools,\n  }\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the\n * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at\n * once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    M = drawMachine(svg, id, columnsOf(), options.color ?? DEFAULT_COLOR)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -SPOOL_X : SPOOL_X\n      spool.setAttribute(\n        \"transform\",\n        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`\n      )\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const top = SPOOL_Y - 24\n    for (const { path, dy } of M.ribbon) {\n      path.setAttribute(\n        \"d\",\n        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`\n      )\n    }\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.edge, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n    M.shadow.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Theme                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */\n  const applyTheme = () => {\n    root.style.setProperty(\n      \"--typewriter-sheet\",\n      isDark() ? \"#ECE7DA\" : \"#FBF9F3\"\n    )\n  }\n\n  build()\n  applyTheme()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(applyTheme)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", applyTheme)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns || options.color !== prev.color) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", applyTheme)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-sheet\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter that types — each letter presses its key, swings that key's\n * typebar up to strike the ribbon, and steps the carriage left. At the\n * margin the lever kicks, the platen turns up a line, and the carriage\n * slides home. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  color = DEFAULT_COLOR,\n  columns = DEFAULT_COLUMNS,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n    })\n  }, [\n    text,\n    speed,\n    humanize,\n    loop,\n    hold,\n    startDelay,\n    color,\n    columns,\n    jitter,\n    sound,\n  ])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n        className\n      )}\n    />\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/typewriter.tsx"
     }
diff --git a/registry/typewriter/typewriter-demo.tsx b/registry/typewriter/typewriter-demo.tsx
index ba62359..355fa0c 100644
--- a/registry/typewriter/typewriter-demo.tsx
+++ b/registry/typewriter/typewriter-demo.tsx
@@ -11,7 +11,9 @@ import {
 } from "@/components/component-controls"
 import { ComponentPreview } from "@/components/component-preview"
 import { usePreviewProps } from "@/hooks/use-preview-props"
+import { cn } from "@/lib/utils"
 import {
+  DEFAULT_COLOR,
   DEFAULT_COLUMNS,
   DEFAULT_JITTER,
   DEFAULT_SPEED,
@@ -19,7 +21,16 @@ import {
   Typewriter,
 } from "@/registry/typewriter/typewriter"
 
+const ENAMELS = [
+  { name: "Mint", color: DEFAULT_COLOR },
+  { name: "Cherry", color: "#D2463A" },
+  { name: "Butter", color: "#E6D6A2" },
+  { name: "Sky", color: "#86AED8" },
+  { name: "Graphite", color: "#2E3135" },
+]
+
 const DEFAULTS = {
+  color: DEFAULT_COLOR,
   text: DEFAULT_TEXT,
   speed: DEFAULT_SPEED,
   jitter: DEFAULT_JITTER,
@@ -31,6 +42,7 @@ const DEFAULTS = {
 
 export function TypewriterDemo() {
   const textId = useId()
+  const colorId = useId()
   const [take, setTake] = useState(0)
   const { props, updateProp, resetProps, hasChanges } =
     usePreviewProps(DEFAULTS)
@@ -41,6 +53,7 @@ export function TypewriterDemo() {
         <div className="aspect-[16/9] max-h-[70svh] w-full px-4 pt-2 pb-4">
           <Typewriter
             key={take}
+            color={props.color}
             text={props.text}
             speed={props.speed}
             jitter={props.jitter}
@@ -57,6 +70,7 @@ export function TypewriterDemo() {
         onReset={resetProps}
         component="Typewriter"
         snippetProps={{
+          color: props.color === DEFAULTS.color ? undefined : props.color,
           text: props.text === DEFAULTS.text ? undefined : props.text,
           speed: props.speed,
           jitter: props.jitter,
@@ -92,6 +106,51 @@ export function TypewriterDemo() {
             className="field-sizing-content min-h-16 w-full resize-none bg-transparent font-mono text-[12.5px] leading-relaxed text-foreground outline-none"
           />
         </div>
+        <div className="flex min-h-6 flex-wrap items-center justify-between gap-x-4 gap-y-2">
+          <span className="text-sm text-foreground/85">Enamel</span>
+          <div className="flex items-center gap-1.5">
+            {ENAMELS.map((enamel) => {
+              const selected =
+                enamel.color.toLowerCase() === props.color.toLowerCase()
+              return (
+                <button
+                  key={enamel.name}
+                  type="button"
+                  aria-label={enamel.name}
+                  aria-pressed={selected}
+                  title={enamel.name}
+                  onClick={() => updateProp("color", enamel.color)}
+                  className={cn(
+                    "size-6 rounded-full ring-1 transition-[box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    selected
+                      ? "ring-2 ring-foreground ring-offset-2 ring-offset-background"
+                      : "ring-border hover:ring-foreground/30"
+                  )}
+                  style={{ backgroundColor: enamel.color }}
+                />
+              )
+            })}
+            <label
+              htmlFor={colorId}
+              className="relative ms-1 size-6 cursor-pointer overflow-hidden rounded-full ring-1 ring-border focus-within:ring-2 focus-within:ring-ring hover:ring-foreground/30"
+              style={{
+                background:
+                  "conic-gradient(#e44 0deg, #ec4 72deg, #4c8 144deg, #48e 216deg, #a4e 288deg, #e44 360deg)",
+              }}
+            >
+              <span className="sr-only">Custom enamel</span>
+              <input
+                id={colorId}
+                type="color"
+                value={props.color}
+                onChange={(event) =>
+                  updateProp("color", event.target.value.toUpperCase())
+                }
+                className="absolute inset-0 size-full cursor-pointer opacity-0"
+              />
+            </label>
+          </div>
+        </div>
         <ControlSlider
           label="Speed"
           value={props.speed}
diff --git a/registry/typewriter/typewriter-vanilla.ts b/registry/typewriter/typewriter-vanilla.ts
index 5cfd6af..1515cdb 100644
--- a/registry/typewriter/typewriter-vanilla.ts
+++ b/registry/typewriter/typewriter-vanilla.ts
@@ -1,6 +1,8 @@
 export const DEFAULT_TEXT =
   "Dear reader,\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\n\nYours, 23rd"
 
+/** Enamel of the body and paper rest — a vintage mint. */
+export const DEFAULT_COLOR = "#8EC3B5"
 /** Characters per second. */
 export const DEFAULT_SPEED = 12
 /** Line length on the sheet, in characters. */
@@ -28,6 +30,8 @@ export type TypewriterOptions = {
   hold?: number
   /** Wait before the first keystroke, in ms. Default `600`. */
   startDelay?: number
+  /** Body enamel, any CSS color. Default `#8EC3B5`. */
+  color?: string
   /** Line length on the sheet, in characters (16–60). Default `32`. */
   columns?: number
   /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */
@@ -272,9 +276,10 @@ function createSound(): Sound | null {
 
 const TAU = Math.PI * 2
 
-// The machine is drawn in one SVG coordinate space. The print point sits at
-// the origin: the line being typed has its baseline on y = 0, and the
-// carriage slides so the next column always lands at x = 0.
+// The machine is drawn in one SVG coordinate space, seen from the front and
+// a little above. The print point sits at the origin: the line being typed
+// has its baseline on y = 0, and the carriage slides so the next column
+// always lands at x = 0. Light comes from the upper left.
 
 /** Character pitch on the sheet. */
 const CW = 10
@@ -286,24 +291,28 @@ const PAD = 30
 /** Sheet above the first baseline once it's fed in. */
 const TOP_MARGIN = 38
 const VIEW_TOP = -178
-const VIEW_BOTTOM = 302
+const VIEW_BOTTOM = 314
 /** Where a typebar's slug lands: the middle of the glyph on the print line. */
 const STRIKE_Y = -5
 /** Centre of the typebar basket, under the print point. */
-const BASKET_Y = 50
-const PIVOT_R = 58
-const REST_R = 30
+const BASKET_Y = 42
+const PIVOT_R = 56
+const REST_R = 27
 /** Half the basket's fan, in radians from straight down. */
 const SPREAD = (74 * Math.PI) / 180
 /** Platen knob radius, for how far it turns per line. */
 const KNOB_R = 21
-const RIDGES = 9
+const RIDGES = 11
+const SPOOL_Y = 80
+const SPOOL_X = 150
 const KEY_ROWS = ["1234567890", "qwertyuiop", "asdfghjkl;", "zxcvbnm,./"]
-const KEY_Y = [142, 172, 202, 232]
+const KEY_Y = [136, 166, 196, 226]
 const KEY_PITCH = 35
-const KEY_R = 12
+const KEY_R = 12.5
+/** Key tops are circles seen from above: this squashes them. */
+const KEY_TILT = 0.64
 /** How far a key travels when pressed. */
-const KEY_TRAVEL = 4.5
+const KEY_TRAVEL = 4
 /** Shifted characters, and the key that types them. */
 const SHIFTED: Record<string, string> = {
   "!": "1",
@@ -322,9 +331,15 @@ const SHIFTED: Record<string, string> = {
   ">": ".",
 }
 
-const PAPER = "var(--typewriter-paper)"
+const INK = "#24221F"
+const LEGEND = "#EFE7D1"
+const RIBBON_BLACK = "#16171A"
+const RIBBON_RED = "#C4342B"
+const CHROME = "#D3D8DC"
+const CHROME_EDGE = "#5E656C"
+const SHEET = "var(--typewriter-sheet, #FBF9F3)"
 
-/** An SVG element. `fill` / `stroke` of `"paper"` paint in the page color. */
+/** An SVG element. A `fill` of `"sheet"` paints in the paper tone. */
 function draw<K extends keyof SVGElementTagNameMap>(
   tag: K,
   attrs: Record<string, string | number>,
@@ -332,16 +347,36 @@ function draw<K extends keyof SVGElementTagNameMap>(
 ) {
   const node = document.createElementNS(SVG_NS, tag)
   for (const [key, value] of Object.entries(attrs)) {
-    if ((key === "fill" || key === "stroke") && value === "paper") {
-      node.style.setProperty(key, PAPER)
-    } else {
-      node.setAttribute(key, String(value))
-    }
+    if (key === "fill" && value === "sheet") node.style.fill = SHEET
+    else node.setAttribute(key, String(value))
   }
   parent?.append(node)
   return node
 }
 
+type Rgb = [number, number, number]
+
+let swatch: CanvasRenderingContext2D | null = null
+
+/** Any CSS color as RGB, via a one-pixel canvas. */
+function rgbOf(color: string, fallback: Rgb): Rgb {
+  swatch ??= document
+    .createElement("canvas")
+    .getContext("2d", { willReadFrequently: true })
+  if (!swatch) return fallback
+  swatch.clearRect(0, 0, 1, 1)
+  swatch.fillStyle = `rgb(${fallback.join(" ")})`
+  swatch.fillStyle = color
+  swatch.fillRect(0, 0, 1, 1)
+  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data
+  return [r, g, b]
+}
+
+function mix(a: Rgb, b: Rgb, t: number) {
+  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))
+  return `rgb(${c.join(" ")})`
+}
+
 const linear = (t: number) => t
 const easeIn = (t: number) => t * t * t
 const easeOut = (t: number) => 1 - (1 - t) ** 3
@@ -361,10 +396,10 @@ function polar(r: number, angle: number): [number, number] {
 }
 
 type Bar = {
-  rest: SVGLineElement
+  rest: SVGGElement
   strike: SVGGElement
-  /** Page-colored outline under the bar, so it reads over the machine. */
-  arm: SVGLineElement
+  /** Dark edge under the bar, so it reads over the paper. */
+  edge: SVGLineElement
   core: SVGLineElement
   slug: SVGLineElement
   pivot: [number, number]
@@ -379,6 +414,7 @@ type Machine = {
   carriage: SVGGElement
   paper: SVGGElement
   sheet: SVGRectElement
+  shadow: SVGRectElement
   ink: SVGGElement
   lever: SVGGElement
   leverPivot: [number, number]
@@ -388,666 +424,1053 @@ type Machine = {
   space: Key
   basket: SVGGElement
   bars: Bar[]
-  ribbon: SVGPathElement[]
+  ribbon: { path: SVGPathElement; dy: number }[]
   vibrator: SVGGElement
   spools: SVGGElement[]
 }
 
-type Motion = {
-  key: string
-  start: number
-  ms: number
-  ease: (t: number) => number
-  run: (v: number) => void
-  begin?: () => void
-}
-
-let machineIds = 0
-
 /**
- * A typewriter that types. Each letter presses its key, swings that key's
- * typebar up out of the basket to strike the ribbon, and the carriage
- * steps one character left. Capitals hold shift, which drops the basket. At
- * the margin the return lever kicks, the platen turns up a line, and the
- * carriage slides home. With `loop`, the finished sheet is pulled out and
- * a fresh one rolls in. Ink is `currentColor`; the paper takes the page
- * color behind it. `prefers-reduced-motion` prints the whole page at once.
+ * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,
+ * platen, knobs, return lever, sheet, scale) and the body (enamel shell,
+ * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;
+ * its lights and shadows are mixed from it.
  */
-export function createTypewriter(
-  root: HTMLElement,
-  initial: TypewriterOptions = {}
-): TypewriterInstance {
-  let options: TypewriterOptions = { ...initial }
-  const textOf = () => options.text ?? DEFAULT_TEXT
-  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)
-  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)
-  const startOf = () =>
-    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)
-  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)
-  const columnsOf = () =>
-    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))
-  const id = `typewriter-${++machineIds}`
-
-  // Screen readers get the whole text once; the machine is decoration.
-  const spoken = document.createElement("span")
-  Object.assign(spoken.style, {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    margin: "-1px",
-    padding: "0",
-    overflow: "hidden",
-    clip: "rect(0 0 0 0)",
-    whiteSpace: "nowrap",
-    border: "0",
-  })
-  const svg = draw("svg", {
-    width: "100%",
-    height: "100%",
-    preserveAspectRatio: "xMidYMid meet",
-    "aria-hidden": "true",
-  })
-  svg.style.display = "block"
-  root.append(spoken, svg)
-
-  let M!: Machine
-
-  /* ---------------------------------------------------------------- */
-  /* Drawing                                                           */
-  /* ---------------------------------------------------------------- */
-
-  const build = () => {
-    const columns = columnsOf()
-    const span = columns * CW
-    const platenL = -PAD - 22
-    const platenR = span + PAD + 22
-    const knobW = 14
-    const leverX = platenL - knobW - 3
-    // Room for the carriage at both ends of its travel, and the body.
-    const left = leverX - 52 - (span + CW / 2)
-    const right = platenR + knobW - CW / 2
-    const half = Math.ceil(Math.max(-left, right, 262) + 14)
-    svg.replaceChildren()
-    svg.setAttribute(
-      "viewBox",
-      `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`
-    )
+function drawMachine(
+  svg: SVGSVGElement,
+  id: string,
+  columns: number,
+  color: string
+): Machine {
+  const span = columns * CW
+  const platenL = -PAD - 22
+  const platenR = span + PAD + 22
+  const knobW = 15
+  const leverX = platenL - knobW - 4
+  // Room for the carriage at both ends of its travel, and the body.
+  const left = leverX - 56 - (span + CW / 2)
+  const right = platenR + knobW - CW / 2
+  const half = Math.ceil(Math.max(-left, right, 262) + 14)
+  svg.replaceChildren()
+  svg.setAttribute(
+    "viewBox",
+    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`
+  )
+
+  const base = rgbOf(color, [142, 195, 181])
+  const white: Rgb = [255, 255, 255]
+  const black: Rgb = [0, 0, 0]
+  const enamel = {
+    shine: mix(base, white, 0.62),
+    hi: mix(base, white, 0.34),
+    light: mix(base, white, 0.14),
+    mid: mix(base, base, 0),
+    low: mix(base, black, 0.16),
+    deep: mix(base, black, 0.34),
+    edge: mix(base, black, 0.55),
+  }
 
-    // The sheet fades out at the top of the frame and tucks behind the
-    // platen at the bottom.
-    const defs = draw("defs", {}, svg)
-    const fade = draw(
-      "linearGradient",
-      {
-        id: `${id}-fade-g`,
-        gradientUnits: "userSpaceOnUse",
-        x1: 0,
-        x2: 0,
-        y1: VIEW_TOP,
-        y2: 40,
-      },
-      defs
-    )
-    const soft = 84 / (40 - VIEW_TOP)
-    for (const [offset, alpha] of [
-      [0, 0],
-      [soft, 1],
-      [0.998, 1],
-      [1, 0],
-    ] as const) {
+  /* Gradients. */
+  const defs = draw("defs", {}, svg)
+  const gradient = (
+    name: string,
+    kind: "linearGradient" | "radialGradient",
+    attrs: Record<string, string | number>,
+    stops: [number, string, number?][]
+  ) => {
+    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)
+    for (const [offset, stopColor, alpha = 1] of stops) {
       draw(
         "stop",
-        { offset, "stop-color": "#fff", "stop-opacity": alpha },
-        fade
+        { offset, "stop-color": stopColor, "stop-opacity": alpha },
+        el
       )
     }
-    const box = {
-      x: -4000,
-      y: VIEW_TOP - 4,
-      width: 8000,
-      height: 48 - VIEW_TOP,
-    }
-    const mask = draw(
-      "mask",
-      { id: `${id}-fade`, maskUnits: "userSpaceOnUse", ...box },
-      defs
-    )
-    draw("rect", { ...box, fill: `url(#${id}-fade-g)` }, mask)
+    return `url(#${id}-${name})`
+  }
+  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }
+  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }
+  const fills = {
+    body: gradient("body", "linearGradient", down, [
+      [0, enamel.hi],
+      [0.18, enamel.light],
+      [0.62, enamel.mid],
+      [1, enamel.low],
+    ]),
+    sides: gradient("sides", "linearGradient", across, [
+      [0, "#000", 0.26],
+      [0.1, "#000", 0.04],
+      [0.5, "#fff", 0.05],
+      [0.9, "#000", 0.04],
+      [1, "#000", 0.3],
+    ]),
+    front: gradient("front", "linearGradient", down, [
+      [0, enamel.low],
+      [1, enamel.deep],
+    ]),
+    rest: gradient("rest", "linearGradient", down, [
+      [0, enamel.hi],
+      [0.5, enamel.light],
+      [1, enamel.low],
+    ]),
+    chrome: gradient("chrome", "linearGradient", down, [
+      [0, "#FDFEFE"],
+      [0.38, "#D2D7DB"],
+      [0.52, "#8B9298"],
+      [0.7, "#C3C8CC"],
+      [1, "#EEF0F2"],
+    ]),
+    chromeV: gradient("chrome-v", "linearGradient", across, [
+      [0, "#8B9298"],
+      [0.35, "#F4F6F7"],
+      [0.6, "#BFC4C9"],
+      [1, "#737A80"],
+    ]),
+    rubber: gradient("rubber", "linearGradient", down, [
+      [0, "#55595E"],
+      [0.16, "#2A2D31"],
+      [0.55, "#0D0E10"],
+      [0.85, "#050607"],
+      [1, "#1E2124"],
+    ]),
+    bakelite: gradient("bakelite", "linearGradient", down, [
+      [0, "#62666C"],
+      [0.2, "#2C2F33"],
+      [0.6, "#111214"],
+      [1, "#2A2D31"],
+    ]),
+    capTop: gradient(
+      "cap-top",
+      "radialGradient",
+      { cx: 0.38, cy: 0.3, r: 0.75 },
+      [
+        [0, "#575C63"],
+        [0.55, "#202326"],
+        [1, "#0C0D0F"],
+      ]
+    ),
+    capSide: gradient("cap-side", "linearGradient", down, [
+      [0, "#9AA1A7"],
+      [0.5, "#4B5157"],
+      [1, "#2A2E32"],
+    ]),
+    well: gradient("well", "linearGradient", down, [
+      [0, "#08090A"],
+      [0.18, "#151719"],
+      [1, "#24272A"],
+    ]),
+    recess: gradient("recess", "radialGradient", { cx: 0.5, cy: 0, r: 1 }, [
+      [0, "#030304"],
+      [0.7, "#141618"],
+      [1, "#24272A"],
+    ]),
+    spoolRibbon: gradient(
+      "spool-ribbon",
+      "radialGradient",
+      { cx: 0.42, cy: 0.38, r: 0.7 },
+      [
+        [0, "#3B3E43"],
+        [0.7, "#151618"],
+        [1, "#060607"],
+      ]
+    ),
+    flange: gradient(
+      "flange",
+      "radialGradient",
+      { cx: 0.36, cy: 0.3, r: 0.85 },
+      [
+        [0, "#FFFFFF"],
+        [0.45, "#CDD2D6"],
+        [1, "#7D848A"],
+      ]
+    ),
+    ground: gradient("ground", "radialGradient", { cx: 0.5, cy: 0.5, r: 0.5 }, [
+      [0, "#000", 0.34],
+      [0.6, "#000", 0.12],
+      [1, "#000", 0],
+    ]),
+    keyShadow: gradient(
+      "key-shadow",
+      "radialGradient",
+      { cx: 0.5, cy: 0.5, r: 0.5 },
+      [
+        [0, "#000", 0.7],
+        [1, "#000", 0],
+      ]
+    ),
+    curl: gradient(
+      "curl",
+      "linearGradient",
+      { gradientUnits: "userSpaceOnUse", x1: 0, y1: 12, x2: 0, y2: 41 },
+      [
+        [0, "#3A2E1C", 0],
+        [0.55, "#3A2E1C", 0.1],
+        [1, "#3A2E1C", 0.34],
+      ]
+    ),
+  }
 
-    /* Carriage: rail, platen, knobs, return lever, the sheet, the scale. */
-    const carriage = draw("g", {}, svg)
-    draw(
-      "rect",
-      {
-        x: platenL - knobW,
-        y: 42,
-        width: platenR - platenL + knobW * 2,
-        height: 6,
-        rx: 3,
-        fill: "currentColor",
-        "fill-opacity": 0.7,
-      },
-      carriage
-    )
+  // The sheet fades out at the top of the frame and tucks behind the
+  // platen at the bottom.
+  const fade = gradient(
+    "fade-g",
+    "linearGradient",
+    {
+      gradientUnits: "userSpaceOnUse",
+      x1: 0,
+      x2: 0,
+      y1: VIEW_TOP,
+      y2: 41,
+    },
+    [
+      [0, "#fff", 0],
+      [84 / (41 - VIEW_TOP), "#fff", 1],
+      [0.998, "#fff", 1],
+      [1, "#fff", 0],
+    ]
+  )
+  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }
+  const mask = draw(
+    "mask",
+    { id: `${id}-fade`, maskUnits: "userSpaceOnUse", ...box },
+    defs
+  )
+  draw("rect", { ...box, fill: fade }, mask)
+
+  // Ground shadow.
+  draw("ellipse", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)
+
+  /* ---------------- Carriage ---------------- */
+
+  const carriage = draw("g", {}, svg)
+  // Rail it rides on.
+  draw(
+    "rect",
+    {
+      x: platenL - knobW - 8,
+      y: 40,
+      width: platenR - platenL + knobW * 2 + 16,
+      height: 6,
+      rx: 3,
+      fill: fills.chrome,
+    },
+    carriage
+  )
+  // Paper rest behind the sheet.
+  const tL = -PAD - 16
+  const tR = span + PAD + 16
+  draw(
+    "path",
+    {
+      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,
+      fill: fills.rest,
+    },
+    carriage
+  )
+  draw(
+    "path",
+    {
+      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,
+      fill: "none",
+      stroke: enamel.shine,
+      "stroke-width": 1.4,
+      "stroke-opacity": 0.85,
+    },
+    carriage
+  )
+  // Platen, with chrome collars at its ends.
+  draw(
+    "rect",
+    {
+      x: platenL,
+      y: 6,
+      width: platenR - platenL,
+      height: 34,
+      rx: 4,
+      fill: fills.rubber,
+    },
+    carriage
+  )
+  draw(
+    "rect",
+    {
+      x: platenL + 4,
+      y: 10.5,
+      width: platenR - platenL - 8,
+      height: 1.6,
+      rx: 0.8,
+      fill: "#fff",
+      "fill-opacity": 0.22,
+    },
+    carriage
+  )
+  for (const x of [platenL - 4, platenR]) {
     draw(
       "rect",
-      {
-        x: platenL,
-        y: 6,
-        width: platenR - platenL,
-        height: 34,
-        rx: 10,
-        fill: "currentColor",
-      },
+      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },
       carriage
     )
+  }
+  // Knobs: bakelite with knurling that turns with the platen.
+  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {
     draw(
       "rect",
-      {
-        x: platenL + 8,
-        y: 11,
-        width: platenR - platenL - 16,
-        height: 2,
-        rx: 1,
-        fill: "paper",
-        "fill-opacity": 0.3,
-      },
+      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },
       carriage
     )
-    const knobs = [platenL - knobW, platenR].map((x) => {
+    const lines = Array.from({ length: RIDGES }, () =>
       draw(
-        "rect",
-        { x, y: 2, width: knobW, height: 42, rx: 5, fill: "currentColor" },
+        "line",
+        {
+          x1: x + 2.5,
+          x2: x + knobW - 2.5,
+          stroke: "#B8BEC4",
+          "stroke-width": 1,
+          "stroke-linecap": "round",
+        },
         carriage
       )
-      const lines = Array.from({ length: RIDGES }, () =>
-        draw(
-          "line",
-          {
-            x1: x + 2.6,
-            x2: x + knobW - 2.6,
-            stroke: "paper",
-            "stroke-width": 1.1,
-            "stroke-linecap": "round",
-          },
-          carriage
-        )
-      )
-      return { x, lines }
-    })
-    const lever = draw("g", {}, carriage)
-    const leverPivot: [number, number] = [leverX, 32]
+    )
     draw(
       "rect",
       {
-        x: leverX - 5,
-        y: 22,
-        width: 9,
-        height: 22,
-        rx: 2.5,
-        fill: "currentColor",
+        x: x + 2,
+        y: 3,
+        width: knobW - 4,
+        height: 6,
+        rx: 3,
+        fill: "#fff",
+        "fill-opacity": 0.12,
       },
-      lever
+      carriage
     )
+    return { x, lines }
+  })
+  // Carriage return lever: chrome arm, bakelite grip.
+  const lever = draw("g", {}, carriage)
+  const leverPivot: [number, number] = [leverX, 30]
+  draw(
+    "rect",
+    {
+      x: leverX - 5,
+      y: 20,
+      width: 10,
+      height: 22,
+      rx: 3,
+      fill: fills.chromeV,
+    },
+    lever
+  )
+  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`
+  for (const [stroke, width] of [
+    [CHROME_EDGE, 6.4],
+    [CHROME, 4],
+  ] as const) {
     draw(
       "path",
       {
-        d: `M${leverX} 30L${leverX - 12} 6L${leverX - 34} -12`,
+        d: arm,
         fill: "none",
-        stroke: "currentColor",
-        "stroke-width": 5,
+        stroke,
+        "stroke-width": width,
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
       },
       lever
     )
+  }
+  draw(
+    "path",
+    {
+      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,
+      fill: "none",
+      stroke: "#fff",
+      "stroke-width": 1.2,
+      "stroke-opacity": 0.8,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+    },
+    lever
+  )
+  draw(
+    "rect",
+    {
+      x: leverX - 56,
+      y: -25,
+      width: 28,
+      height: 11,
+      rx: 5.5,
+      fill: fills.bakelite,
+      transform: `rotate(-24 ${leverX - 42} -19.5)`,
+    },
+    lever
+  )
+
+  // The sheet, masked so it fades at the top and wraps under the platen.
+  const wrap = draw("g", { mask: `url(#${id}-fade)` }, carriage)
+  const paper = draw("g", {}, wrap)
+  const shadow = draw(
+    "rect",
+    {
+      x: -PAD + 3,
+      y: -TOP_MARGIN + 3,
+      width: span + PAD * 2,
+      height: 600,
+      fill: "#000",
+      "fill-opacity": 0.12,
+    },
+    paper
+  )
+  const sheet = draw(
+    "rect",
+    {
+      x: -PAD,
+      y: -TOP_MARGIN,
+      width: span + PAD * 2,
+      height: 600,
+      fill: "sheet",
+      stroke: "#000",
+      "stroke-opacity": 0.07,
+      "stroke-width": 0.8,
+    },
+    paper
+  )
+  const ink = draw(
+    "g",
+    { "text-anchor": "middle", "font-size": FONT, fill: INK },
+    paper
+  )
+  // Where the sheet curls round the platen.
+  draw(
+    "rect",
+    {
+      x: -PAD,
+      y: 12,
+      width: span + PAD * 2,
+      height: 30,
+      fill: fills.curl,
+    },
+    wrap
+  )
+
+  // Paper scale under the print line.
+  draw(
+    "rect",
+    {
+      x: -PAD + 2,
+      y: 8.5,
+      width: span + PAD * 2 - 4,
+      height: 6,
+      rx: 3,
+      fill: fills.chrome,
+    },
+    carriage
+  )
+  let ticks = ""
+  for (let c = 0; c <= columns; c++) {
+    const x = c * CW
+    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`
+  }
+  draw(
+    "path",
+    {
+      d: ticks,
+      stroke: "#3E444A",
+      "stroke-width": 0.7,
+      fill: "none",
+    },
+    carriage
+  )
+
+  /* ---------------- Body ---------------- */
+
+  const body = draw("g", {}, svg)
+  const shell =
+    "M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z"
+  draw("path", { d: shell, fill: fills.body }, body)
+  draw("path", { d: shell, fill: fills.sides }, body)
+  // Front face, below the top surfaces, with a chrome trim.
+  draw(
+    "path",
+    {
+      d: "M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z",
+      fill: fills.front,
+    },
+    body
+  )
+  draw(
+    "path",
+    {
+      d: "M-240 264.5H240",
+      stroke: enamel.shine,
+      "stroke-width": 1.2,
+      "stroke-opacity": 0.7,
+    },
+    body
+  )
+  draw(
+    "rect",
+    {
+      x: -236,
+      y: 274,
+      width: 472,
+      height: 3,
+      rx: 1.5,
+      fill: fills.chrome,
+    },
+    body
+  )
+  for (const x of [-228, 188]) {
     draw(
       "rect",
-      {
-        x: leverX - 52,
-        y: -23,
-        width: 26,
-        height: 10,
-        rx: 5,
-        fill: "currentColor",
-        transform: `rotate(-24 ${leverX - 39} -18)`,
-      },
-      lever
+      { x, y: 293, width: 40, height: 10, rx: 4, fill: "#151618" },
+      body
     )
+  }
+  const sheen = gradient("sheen", "linearGradient", across, [
+    [0, "#fff", 0.34],
+    [0.55, "#fff", 0.1],
+    [1, "#fff", 0],
+  ])
+  draw(
+    "path",
+    { d: "M-210 48H-96L-150 110H-224Q-222 82 -210 48Z", fill: sheen },
+    body
+  )
+  // Glossy rim along the top of the shell.
+  draw(
+    "path",
+    {
+      d: "M-194 43.4H194",
+      stroke: enamel.shine,
+      "stroke-width": 1.6,
+      "stroke-linecap": "round",
+    },
+    body
+  )
+  draw(
+    "path",
+    {
+      d: "M-208 56Q-212 70 -216 96",
+      stroke: enamel.shine,
+      "stroke-width": 2.4,
+      "stroke-linecap": "round",
+      "stroke-opacity": 0.55,
+      fill: "none",
+    },
+    body
+  )
 
-    const wrap = draw("g", { mask: `url(#${id}-fade)` }, carriage)
-    const paper = draw("g", {}, wrap)
-    const sheet = draw(
-      "rect",
-      {
-        x: -PAD,
-        y: -TOP_MARGIN,
-        width: span + PAD * 2,
-        height: 600,
-        fill: "paper",
-        stroke: "currentColor",
-        "stroke-opacity": 0.24,
-        "stroke-width": 1,
-      },
-      paper
-    )
-    const ink = draw(
-      "g",
-      { "text-anchor": "middle", "font-size": FONT, fill: "currentColor" },
-      paper
-    )
+  // Typebar basket, sunk in the deck.
+  draw(
+    "path",
+    {
+      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,
+      fill: fills.recess,
+    },
+    body
+  )
+  draw(
+    "path",
+    {
+      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,
+      fill: "none",
+      stroke: enamel.shine,
+      "stroke-width": 1.3,
+      "stroke-opacity": 0.75,
+    },
+    body
+  )
+  const basket = draw("g", {}, body)
+  const [ax, ay] = polar(62, -SPREAD - 0.12)
+  const [bx, by] = polar(62, SPREAD + 0.12)
+  const [cx, cy] = polar(53, SPREAD + 0.12)
+  const [dx, dy] = polar(53, -SPREAD - 0.12)
+  draw(
+    "path",
+    {
+      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,
+      fill: fills.chrome,
+    },
+    basket
+  )
 
-    // The paper scale, just under the print line.
+  // Ribbon spools: black ribbon wound under a turning chrome flange.
+  const spools = [-SPOOL_X, SPOOL_X].map((x) => {
     draw(
-      "rect",
-      {
-        x: -PAD + 4,
-        y: 9,
-        width: span + PAD * 2 - 8,
-        height: 5,
-        rx: 2.5,
-        fill: "currentColor",
-      },
-      carriage
+      "circle",
+      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: "#000", "fill-opacity": 0.22 },
+      body
     )
-    let ticks = ""
-    for (let c = 0; c <= columns; c++) {
-      const x = c * CW
-      ticks += `M${x} 9.7V${c % 10 === 0 ? 13.3 : c % 5 === 0 ? 12.2 : 11}`
+    draw("circle", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)
+    draw("circle", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)
+    const turn = draw("g", {}, body)
+    let windows = ""
+    for (let i = 0; i < 3; i++) {
+      const a0 = (i / 3) * TAU + 0.25
+      const a1 = a0 + 1.35
+      const p = (r: number, a: number) =>
+        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`
+      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`
     }
     draw(
       "path",
       {
-        d: ticks,
-        stroke: "paper",
-        "stroke-width": 0.8,
-        "stroke-opacity": 0.75,
-        fill: "none",
+        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,
+        fill: fills.flange,
+        "fill-rule": "evenodd",
       },
-      carriage
+      turn
     )
+    draw("circle", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)
+    draw("circle", { cx: x, cy: SPOOL_Y, r: 1.6, fill: "#2A2D31" }, turn)
+    return turn
+  })
 
-    /* Body: keyboard well, frame, basket, deck, spools, ribbon, keys. */
-    const body = draw("g", {}, svg)
+  // The type guide either side of the print point.
+  for (const x of [-23, 17]) {
     draw(
-      "path",
+      "rect",
       {
-        d: "M-226 112H226L246 272H-246Z",
-        fill: "currentColor",
-        "fill-opacity": 0.07,
+        x,
+        y: 0,
+        width: 6,
+        height: 16,
+        rx: 1.6,
+        fill: fills.chromeV,
+        stroke: CHROME_EDGE,
+        "stroke-width": 0.8,
       },
       body
     )
-    for (const side of [-1, 1]) {
-      draw(
+  }
+
+  // Two-tone ribbon, black over red, through the vibrator.
+  const ribbon = [
+    {
+      path: draw(
         "path",
         {
-          d: `M${side * 212} 108L${side * 232} 108L${side * 260} 272L${side * 238} 272Z`,
-          fill: "currentColor",
+          fill: "none",
+          stroke: RIBBON_BLACK,
+          "stroke-width": 5.8,
+          "stroke-linejoin": "round",
         },
         body
-      )
-    }
-
-    const basket = draw("g", {}, body)
-    const [ax, ay] = polar(63, -SPREAD - 0.1)
-    const [bx, by] = polar(63, SPREAD + 0.1)
-    const [cx, cy] = polar(55, SPREAD + 0.1)
-    const [dx, dy] = polar(55, -SPREAD - 0.1)
+      ),
+      dy: 0,
+    },
+    {
+      path: draw(
+        "path",
+        {
+          fill: "none",
+          stroke: RIBBON_RED,
+          "stroke-width": 2.6,
+          "stroke-linejoin": "round",
+        },
+        body
+      ),
+      dy: 1.5,
+    },
+  ]
+  const vibrator = draw("g", {}, body)
+  for (const [stroke, width] of [
+    [CHROME_EDGE, 3.8],
+    [CHROME, 2],
+  ] as const) {
     draw(
       "path",
       {
-        d: `M${ax} ${ay}A63 63 0 0 0 ${bx} ${by}L${cx} ${cy}A55 55 0 0 1 ${dx} ${dy}Z`,
-        fill: "currentColor",
+        d: "M-12 2.5V11.5H12V2.5",
+        fill: "none",
+        stroke,
+        "stroke-width": width,
+        "stroke-linejoin": "round",
+        "stroke-linecap": "round",
       },
-      basket
+      vibrator
     )
+  }
+
+  // Keyboard well.
+  draw(
+    "path",
+    {
+      d: "M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z",
+      fill: fills.well,
+    },
+    body
+  )
+  draw(
+    "path",
+    {
+      d: "M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126",
+      fill: "none",
+      stroke: enamel.shine,
+      "stroke-width": 1.3,
+      "stroke-opacity": 0.8,
+    },
+    body
+  )
+  draw(
+    "path",
+    {
+      d: "M-226 254.6H226",
+      stroke: enamel.shine,
+      "stroke-width": 1.2,
+      "stroke-opacity": 0.6,
+    },
+    body
+  )
 
-    // The deck, with the basket showing through its notch.
+  const ry = KEY_R * KEY_TILT
+  const height = 4.5
+  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */
+  const keyAt = (x: number, y: number, label: string) => {
     draw(
-      "path",
+      "ellipse",
       {
-        d: "M-194 50H-67A67 67 0 0 0 67 50H194Q210 50 212 66L228 108Q230 116 220 116H-220Q-230 116 -228 108L-212 66Q-210 50 -194 50Z",
-        fill: "currentColor",
+        cx: x + 2,
+        cy: y + 21,
+        rx: 11,
+        ry: 4,
+        fill: fills.keyShadow,
       },
       body
     )
     draw(
-      "path",
+      "rect",
       {
-        d: "M-216 109H216",
-        stroke: "paper",
-        "stroke-opacity": 0.22,
-        "stroke-width": 1,
+        x: x - 1.5,
+        y: y + 4,
+        width: 3,
+        height: 19,
+        rx: 1,
+        fill: fills.chromeV,
       },
       body
     )
+    const cap = draw("g", {}, body)
+    draw(
+      "path",
+      {
+        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,
+        fill: fills.capSide,
+      },
+      cap
+    )
+    draw("ellipse", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)
+    draw(
+      "ellipse",
+      {
+        cx: x,
+        cy: y + 0.3,
+        rx: KEY_R - 2.3,
+        ry: ry - 1.6,
+        fill: fills.capTop,
+      },
+      cap
+    )
+    draw(
+      "ellipse",
+      {
+        cx: x - 3.4,
+        cy: y - 2.6,
+        rx: 4.4,
+        ry: 1.6,
+        fill: "#fff",
+        "fill-opacity": 0.2,
+      },
+      cap
+    )
+    const text = draw(
+      "text",
+      {
+        x,
+        y: y + 0.7,
+        "text-anchor": "middle",
+        "dominant-baseline": "central",
+        "font-size": 9.6,
+        "font-weight": 600,
+        fill: LEGEND,
+        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,
+      },
+      cap
+    )
+    text.textContent = label
+    return cap
+  }
 
-    const spools = [-150, 150].map((x) => {
-      draw(
-        "circle",
-        {
-          cx: x,
-          cy: 84,
-          r: 23,
-          fill: "currentColor",
-          stroke: "paper",
-          "stroke-opacity": 0.45,
-          "stroke-width": 1.1,
-        },
-        body
-      )
-      const turn = draw("g", {}, body)
-      for (let i = 0; i < 5; i++) {
-        const a = (i / 5) * TAU
-        draw(
-          "circle",
-          {
-            cx: x + Math.cos(a) * 13,
-            cy: 84 + Math.sin(a) * 13,
-            r: 3.6,
-            fill: "paper",
-          },
-          turn
-        )
+  const keys = new Map<string, Key>()
+  const placed: { x: number; key: Key }[] = []
+  KEY_ROWS.forEach((row, r) => {
+    Array.from(row).forEach((ch, i) => {
+      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH
+      const key: Key = {
+        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),
+        bar: null,
+        v: 0,
       }
-      draw("circle", { cx: x, cy: 84, r: 4.4, fill: "paper" }, turn)
-      draw("circle", { cx: x, cy: 84, r: 1.8, fill: "currentColor" }, turn)
-      return turn
+      keys.set(ch, key)
+      placed.push({ x, key })
     })
+  })
 
-    // The type guide either side of the print point.
-    for (const side of [-1, 1]) {
+  /** A pill key (shift, space): same rim and cap, stretched. */
+  const pill = (x: number, y: number, w: number, legend?: string) => {
+    for (const sx of [x - w * 0.3, x + w * 0.3]) {
       draw(
         "rect",
         {
-          x: side < 0 ? -22 : 17,
-          y: 1,
-          width: 5,
-          height: 15,
-          rx: 1.5,
-          fill: "currentColor",
-          stroke: "paper",
-          "stroke-width": 1.2,
-          "paint-order": "stroke",
-        },
-        body
-      )
-    }
-
-    const ribbon = [
-      draw(
-        "path",
-        {
-          fill: "none",
-          stroke: "paper",
-          "stroke-width": 6.4,
-          "stroke-linejoin": "round",
-        },
-        body
-      ),
-      draw(
-        "path",
-        {
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": 3.2,
-          "stroke-linejoin": "round",
+          x: sx - 1.5,
+          y: y + 4,
+          width: 3,
+          height: 17,
+          rx: 1,
+          fill: fills.chromeV,
         },
         body
-      ),
-    ]
-    const vibrator = draw("g", {}, body)
-    for (const [stroke, width] of [
-      ["paper", 4.4],
-      ["currentColor", 2],
-    ] as const) {
-      draw(
-        "path",
-        {
-          d: "M-12 3V11.5H12V3",
-          fill: "none",
-          stroke,
-          "stroke-width": width,
-          "stroke-linejoin": "round",
-          "stroke-linecap": "round",
-        },
-        vibrator
       )
     }
-
-    // Keys: round caps on stems, in four staggered rows.
-    const keyAt = (x: number, y: number, label: string) => {
-      draw(
-        "line",
-        {
-          x1: x,
-          y1: y,
-          x2: x,
-          y2: y + 24,
-          stroke: "currentColor",
-          "stroke-opacity": 0.42,
-          "stroke-width": 2.4,
-          "stroke-linecap": "round",
-        },
-        body
-      )
-      const cap = draw("g", {}, body)
-      draw("circle", { cx: x, cy: y, r: KEY_R + 1.6, fill: "paper" }, cap)
-      draw("circle", { cx: x, cy: y, r: KEY_R, fill: "currentColor" }, cap)
-      draw(
-        "circle",
-        {
-          cx: x,
-          cy: y,
-          r: KEY_R - 2.6,
-          fill: "none",
-          stroke: "paper",
-          "stroke-opacity": 0.45,
-          "stroke-width": 0.9,
-        },
-        cap
-      )
-      const text = draw(
-        "text",
-        {
-          x,
-          y: y + 0.5,
-          "text-anchor": "middle",
-          "dominant-baseline": "central",
-          "font-size": 10,
-          "font-weight": 600,
-          fill: "paper",
-        },
-        cap
-      )
-      text.textContent = label
-      return cap
-    }
-
-    const keys = new Map<string, Key>()
-    const placed: { ch: string; x: number; key: Key }[] = []
-    KEY_ROWS.forEach((row, r) => {
-      Array.from(row).forEach((ch, i) => {
-        const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH
-        const key: Key = {
-          cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),
-          bar: null,
-          v: 0,
-        }
-        keys.set(ch, key)
-        placed.push({ ch, x, key })
-      })
-    })
-
-    const pill = (x: number, y: number, w: number, h: number) => {
-      for (const sx of [x - w * 0.3, x + w * 0.3]) {
-        draw(
-          "line",
-          {
-            x1: sx,
-            y1: y,
-            x2: sx,
-            y2: y + 22,
-            stroke: "currentColor",
-            "stroke-opacity": 0.42,
-            "stroke-width": 2.4,
-            "stroke-linecap": "round",
-          },
-          body
-        )
-      }
-      const cap = draw("g", {}, body)
-      draw(
-        "rect",
-        {
-          x: x - w / 2 - 1.6,
-          y: y - h / 2 - 1.6,
-          width: w + 3.2,
-          height: h + 3.2,
-          rx: h / 2 + 1.6,
-          fill: "paper",
-        },
-        cap
-      )
-      draw(
-        "rect",
-        {
-          x: x - w / 2,
-          y: y - h / 2,
-          width: w,
-          height: h,
-          rx: h / 2,
-          fill: "currentColor",
-        },
-        cap
-      )
-      return cap
+    draw(
+      "ellipse",
+      {
+        cx: x + 2,
+        cy: y + 19,
+        rx: w / 2 + 2,
+        ry: 4,
+        fill: fills.keyShadow,
+      },
+      body
+    )
+    const cap = draw("g", {}, body)
+    const r = ry
+    draw(
+      "rect",
+      {
+        x: x - w / 2,
+        y: y - r + height,
+        width: w,
+        height: r * 2,
+        rx: r,
+        fill: fills.capSide,
+      },
+      cap
+    )
+    draw(
+      "rect",
+      {
+        x: x - w / 2,
+        y: y - r,
+        width: w,
+        height: r * 2,
+        rx: r,
+        fill: fills.chrome,
+      },
+      cap
+    )
+    draw(
+      "rect",
+      {
+        x: x - w / 2 + 2.3,
+        y: y - r + 1.6,
+        width: w - 4.6,
+        height: r * 2 - 3.2,
+        rx: r - 1.6,
+        fill: fills.capTop,
+      },
+      cap
+    )
+    if (legend) {
+      draw("path", { d: legend, fill: LEGEND }, cap)
     }
-    const shifts = [-1, 1].map((side) => {
-      const x = side * 201
-      const cap = pill(x, KEY_Y[3]!, 30, 22)
-      draw(
-        "path",
-        {
-          d: `M${x} ${KEY_Y[3]! - 5}L${x + 5} ${KEY_Y[3]! + 1}H${x + 2}V${KEY_Y[3]! + 5}H${x - 2}V${KEY_Y[3]! + 1}H${x - 5}Z`,
-          fill: "paper",
-        },
-        cap
-      )
-      return { cap, bar: null, v: 0 } satisfies Key
-    })
-    const space: Key = { cap: pill(0, 258, 210, 11), bar: null, v: 0 }
+    return cap
+  }
+  const y3 = KEY_Y[3]!
+  const shifts = [-1, 1].map((side) => {
+    const x = side * 201
+    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`
+    return { cap: pill(x, y3, 30, arrow), bar: null, v: 0 } satisfies Key
+  })
 
-    // Base and feet.
+  // Space bar: a chrome bar on two arms.
+  for (const sx of [-80, 80]) {
     draw(
       "rect",
       {
-        x: -260,
-        y: 272,
-        width: 520,
-        height: 20,
-        rx: 8,
-        fill: "currentColor",
+        x: sx - 1.5,
+        y: 247,
+        width: 3,
+        height: 7,
+        fill: fills.chromeV,
       },
       body
     )
+  }
+  const spaceCap = draw("g", {}, body)
+  draw(
+    "rect",
+    {
+      x: -112,
+      y: 242,
+      width: 224,
+      height: 9,
+      rx: 4.5,
+      fill: "#4E555B",
+    },
+    spaceCap
+  )
+  draw(
+    "rect",
+    {
+      x: -112,
+      y: 239.5,
+      width: 224,
+      height: 8,
+      rx: 4,
+      fill: fills.chrome,
+    },
+    spaceCap
+  )
+  const space: Key = { cap: spaceCap, bar: null, v: 0 }
+
+  // One typebar per key, fanned left to right in key order.
+  const overlay = draw("g", {}, svg)
+  placed.sort((a, b) => a.x - b.x)
+  const bars = placed.map(({ key }, i) => {
+    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)
+    const pivot = polar(PIVOT_R, angle)
+    const tip = polar(REST_R, angle)
+    const rest = draw("g", {}, basket)
+    draw(
+      "line",
+      {
+        x1: pivot[0],
+        y1: pivot[1],
+        x2: tip[0],
+        y2: tip[1],
+        stroke: i % 2 ? "#C4C9CE" : "#E6E9EC",
+        "stroke-width": 1.25,
+        "stroke-linecap": "round",
+      },
+      rest
+    )
+    const [sx, sy] = polar(REST_R + 3.4, angle)
     draw(
-      "path",
+      "line",
       {
-        d: "M-250 277H250",
-        stroke: "paper",
-        "stroke-opacity": 0.22,
-        "stroke-width": 1,
+        x1: sx,
+        y1: sy,
+        x2: tip[0],
+        y2: tip[1],
+        stroke: "#7D848A",
+        "stroke-width": 2.6,
+        "stroke-linecap": "round",
       },
-      body
+      rest
     )
-    for (const x of [-238, 202]) {
+    const strike = draw("g", { display: "none" }, overlay)
+    const line = (stroke: string, width: number) =>
       draw(
-        "rect",
-        {
-          x,
-          y: 290,
-          width: 36,
-          height: 8,
-          rx: 3,
-          fill: "currentColor",
-        },
-        body
-      )
-    }
-
-    // One typebar per key, fanned left to right in key order.
-    const overlay = draw("g", {}, svg)
-    placed.sort((a, b) => a.x - b.x)
-    const bars = placed.map(({ key }, i) => {
-      const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)
-      const pivot = polar(PIVOT_R, angle)
-      const tip = polar(REST_R, angle)
-      const rest = draw(
-        "line",
-        {
-          x1: pivot[0],
-          y1: pivot[1],
-          x2: tip[0],
-          y2: tip[1],
-          stroke: "currentColor",
-          "stroke-width": 1.3,
-          "stroke-linecap": "round",
-        },
-        basket
-      )
-      const strike = draw("g", { display: "none" }, overlay)
-      const arm = draw(
-        "line",
-        {
-          stroke: "paper",
-          "stroke-width": 4.4,
-          "stroke-linecap": "round",
-        },
-        strike
-      )
-      const core = draw(
-        "line",
-        {
-          stroke: "currentColor",
-          "stroke-width": 2,
-          "stroke-linecap": "round",
-        },
-        strike
-      )
-      const slug = draw(
         "line",
-        {
-          stroke: "currentColor",
-          "stroke-width": 5.5,
-          "stroke-linecap": "round",
-        },
+        { stroke, "stroke-width": width, "stroke-linecap": "round" },
         strike
       )
-      const bar: Bar = { rest, strike, arm, core, slug, pivot, tip, v: 0 }
-      key.bar = bar
-      return bar
-    })
+    const edge = line("#1C1E21", 3.9)
+    const core = line("#E2E5E8", 1.8)
+    const slug = line("#2A2D31", 5.6)
+    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }
+    key.bar = bar
+    return bar
+  })
 
-    M = {
-      columns,
-      carriage,
-      paper,
-      sheet,
-      ink,
-      lever,
-      leverPivot,
-      knobs,
-      keys,
-      shifts,
-      space,
-      basket,
-      bars,
-      ribbon,
-      vibrator,
-      spools,
-    }
+  return {
+    columns,
+    carriage,
+    paper,
+    sheet,
+    shadow,
+    ink,
+    lever,
+    leverPivot,
+    knobs,
+    keys,
+    shifts,
+    space,
+    basket,
+    bars,
+    ribbon,
+    vibrator,
+    spools,
+  }
+}
+
+type Motion = {
+  key: string
+  start: number
+  ms: number
+  ease: (t: number) => number
+  run: (v: number) => void
+  begin?: () => void
+}
+
+let machineIds = 0
+
+/**
+ * A typewriter that types. Each letter presses its key, swings that key's
+ * typebar up out of the basket to strike the ribbon, and the carriage
+ * steps one character left. Capitals hold shift, which drops the basket. At
+ * the margin the return lever kicks, the platen turns up a line, and the
+ * carriage slides home. With `loop`, the finished sheet is pulled out and
+ * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the
+ * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at
+ * once.
+ */
+export function createTypewriter(
+  root: HTMLElement,
+  initial: TypewriterOptions = {}
+): TypewriterInstance {
+  let options: TypewriterOptions = { ...initial }
+  const textOf = () => options.text ?? DEFAULT_TEXT
+  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)
+  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)
+  const startOf = () =>
+    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)
+  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)
+  const columnsOf = () =>
+    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))
+  const id = `typewriter-${++machineIds}`
+
+  // Screen readers get the whole text once; the machine is decoration.
+  const spoken = document.createElement("span")
+  Object.assign(spoken.style, {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    whiteSpace: "nowrap",
+    border: "0",
+  })
+  const svg = draw("svg", {
+    width: "100%",
+    height: "100%",
+    preserveAspectRatio: "xMidYMid meet",
+    "aria-hidden": "true",
+  })
+  svg.style.display = "block"
+  root.append(spoken, svg)
+
+  let M!: Machine
+
+  /* ---------------------------------------------------------------- */
+  /* Drawing                                                           */
+  /* ---------------------------------------------------------------- */
+
+  const build = () => {
+    M = drawMachine(svg, id, columnsOf(), options.color ?? DEFAULT_COLOR)
   }
 
   /* ---------------------------------------------------------------- */
@@ -1095,8 +1518,11 @@ export function createTypewriter(
   const setSpool = (deg: number) => {
     pose.spool = deg
     M.spools.forEach((spool, i) => {
-      const x = i === 0 ? -150 : 150
-      spool.setAttribute("transform", `rotate(${deg.toFixed(1)} ${x} 84)`)
+      const x = i === 0 ? -SPOOL_X : SPOOL_X
+      spool.setAttribute(
+        "transform",
+        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`
+      )
     })
   }
   const setLever = (deg: number) => {
@@ -1114,8 +1540,13 @@ export function createTypewriter(
     pose.ribbon = v
     const lift = v * 13
     const y = 7.5 - lift
-    const d = `M-150 61L-12 ${y.toFixed(2)}H12L150 61`
-    for (const path of M.ribbon) path.setAttribute("d", d)
+    const top = SPOOL_Y - 24
+    for (const { path, dy } of M.ribbon) {
+      path.setAttribute(
+        "d",
+        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`
+      )
+    }
     M.vibrator.setAttribute("transform", `translate(0 ${(-lift).toFixed(2)})`)
   }
   const setKey = (key: Key, v: number) => {
@@ -1143,7 +1574,7 @@ export function createTypewriter(
     const len = Math.hypot(tx - px, ty - py) || 1
     const ux = (tx - px) / len
     const uy = (ty - py) / len
-    for (const line of [bar.arm, bar.core]) {
+    for (const line of [bar.edge, bar.core]) {
       line.setAttribute("x1", px.toFixed(2))
       line.setAttribute("y1", py.toFixed(2))
       line.setAttribute("x2", tx.toFixed(2))
@@ -1350,6 +1781,7 @@ export function createTypewriter(
       (M.columns * CW + PAD * 2) * 1.3
     )
     M.sheet.setAttribute("height", sheetH.toFixed(0))
+    M.shadow.setAttribute("height", sheetH.toFixed(0))
   }
 
   /** Print the first `pos` strokes and park the machine, without motion. */
@@ -1597,7 +2029,7 @@ export function createTypewriter(
   }
 
   /* ---------------------------------------------------------------- */
-  /* Paper color                                                       */
+  /* Theme                                                             */
   /* ---------------------------------------------------------------- */
 
   const isDark = () => {
@@ -1609,24 +2041,16 @@ export function createTypewriter(
     if (attr === "light") return false
     return window.matchMedia("(prefers-color-scheme: dark)").matches
   }
-  /** The sheet is the page: the first opaque background behind the machine. */
-  const paintPaper = () => {
-    let color = ""
-    for (let el: Element | null = root; el; el = el.parentElement) {
-      const bg = getComputedStyle(el).backgroundColor
-      if (bg && !/^transparent$|,\s*0\)$|\/\s*0\)$/.test(bg)) {
-        color = bg
-        break
-      }
-    }
+  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */
+  const applyTheme = () => {
     root.style.setProperty(
-      "--typewriter-paper",
-      color || (isDark() ? "#0a0a0a" : "#ffffff")
+      "--typewriter-sheet",
+      isDark() ? "#ECE7DA" : "#FBF9F3"
     )
   }
 
   build()
-  paintPaper()
+  applyTheme()
 
   const mqReduce = window.matchMedia("(prefers-reduced-motion: reduce)")
   reduce = mqReduce.matches
@@ -1638,13 +2062,13 @@ export function createTypewriter(
 
   start()
 
-  const theme = new MutationObserver(paintPaper)
+  const theme = new MutationObserver(applyTheme)
   theme.observe(document.documentElement, {
     attributes: true,
     attributeFilter: ["class", "data-theme", "style"],
   })
   const mqDark = window.matchMedia("(prefers-color-scheme: dark)")
-  mqDark.addEventListener("change", paintPaper)
+  mqDark.addEventListener("change", applyTheme)
 
   const io = new IntersectionObserver(([entry]) => {
     onScreen = entry?.isIntersecting ?? true
@@ -1662,7 +2086,7 @@ export function createTypewriter(
         start()
         return
       }
-      if (columnsOf() !== M.columns) rebuild()
+      if (columnsOf() !== M.columns || options.color !== prev.color) rebuild()
       else if (options.jitter !== prev.jitter) {
         for (const motion of running.values()) motion.run(1)
         stopMotion()
@@ -1680,12 +2104,12 @@ export function createTypewriter(
       cancel()
       stopMotion()
       theme.disconnect()
-      mqDark.removeEventListener("change", paintPaper)
+      mqDark.removeEventListener("change", applyTheme)
       io.disconnect()
       mqReduce.removeEventListener("change", onReduce)
       document.removeEventListener("visibilitychange", onVisibility)
       sound?.close()
-      root.style.removeProperty("--typewriter-paper")
+      root.style.removeProperty("--typewriter-sheet")
       spoken.remove()
       svg.remove()
     },
diff --git a/registry/typewriter/typewriter.svelte b/registry/typewriter/typewriter.svelte
index b5dec73..8a97bdb 100644
--- a/registry/typewriter/typewriter.svelte
+++ b/registry/typewriter/typewriter.svelte
@@ -5,6 +5,7 @@
   import { onMount } from "svelte"
   import {
     createTypewriter,
+    DEFAULT_COLOR,
     DEFAULT_COLUMNS,
     DEFAULT_HOLD,
     DEFAULT_JITTER,
@@ -31,6 +32,7 @@
     loop = true,
     hold = DEFAULT_HOLD,
     startDelay = DEFAULT_START_DELAY,
+    color = DEFAULT_COLOR,
     columns = DEFAULT_COLUMNS,
     jitter = DEFAULT_JITTER,
     sound = false,
@@ -49,6 +51,7 @@
       loop,
       hold,
       startDelay,
+      color,
       columns,
       jitter,
       sound,
@@ -68,6 +71,7 @@
       loop,
       hold,
       startDelay,
+      color,
       columns,
       jitter,
       sound,
diff --git a/registry/typewriter/typewriter.tsx b/registry/typewriter/typewriter.tsx
index 2d5f332..adf1235 100644
--- a/registry/typewriter/typewriter.tsx
+++ b/registry/typewriter/typewriter.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 
 import {
   createTypewriter,
+  DEFAULT_COLOR,
   DEFAULT_COLUMNS,
   DEFAULT_HOLD,
   DEFAULT_JITTER,
@@ -17,6 +18,7 @@ import {
 } from "./typewriter-vanilla"
 
 export {
+  DEFAULT_COLOR,
   DEFAULT_COLUMNS,
   DEFAULT_HOLD,
   DEFAULT_JITTER,
@@ -50,6 +52,7 @@ export function Typewriter({
   loop = true,
   hold = DEFAULT_HOLD,
   startDelay = DEFAULT_START_DELAY,
+  color = DEFAULT_COLOR,
   columns = DEFAULT_COLUMNS,
   jitter = DEFAULT_JITTER,
   sound = false,
@@ -73,6 +76,7 @@ export function Typewriter({
       loop,
       hold,
       startDelay,
+      color,
       columns,
       jitter,
       sound,
@@ -94,11 +98,23 @@ export function Typewriter({
       loop,
       hold,
       startDelay,
+      color,
       columns,
       jitter,
       sound,
     })
-  }, [text, speed, humanize, loop, hold, startDelay, columns, jitter, sound])
+  }, [
+    text,
+    speed,
+    humanize,
+    loop,
+    hold,
+    startDelay,
+    color,
+    columns,
+    jitter,
+    sound,
+  ])
 
   return (
     <div
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index 143888f..5185892 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -142,7 +142,7 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). Ink is `currentColor`; the sheet takes the first opaque background behind it.
+`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). `color` sets the body enamel (default mint `#8EC3B5`); everything else is fixed chrome, rubber, and an ivory sheet.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index bbbf2ed..6b818b3 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -366,6 +366,7 @@ React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`.
 
 ```ts
 type TypewriterProps = {
+  color?: string // "#8EC3B5" body enamel; shades are mixed from it
   text?: string // DEFAULT_TEXT; "\n" breaks a line
   speed?: number // 12 characters per second, clamped 1–60
   humanize?: boolean // true
@@ -380,9 +381,9 @@ type TypewriterProps = {
 }
 ```
 
-Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_COLUMNS`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+Also exported: `DEFAULT_COLOR`, `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_COLUMNS`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
 
-Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again. No `ticks`, `theme`, or color props: ink is `currentColor` and the sheet is the page background.
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again. No `ticks` or `theme` props; `color` is the only color prop and it paints the enamel.
 
 ## Events that are not props
 
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index d9ea9cc..06618cc 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -394,7 +394,7 @@ Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke
 
 Not this: a wordmark (`ascii-logo`), a blinking input caret, plain typed text in a paragraph (this draws the whole machine), or a background behind other copy.
 
-Deps: none. Props: `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+Deps: none. Props: `color` (`#8EC3B5`, body enamel), `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
 
 ```tsx
 "use client"
@@ -409,5 +409,5 @@ export function Letter() {
 }
 ```
 
-Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. The sheet uses the first opaque background up the tree, so put it on a surface with a real background color. Ink uses `currentColor`, so color it with a text class. `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. Only the enamel takes `color`; there is no ink, theme, or paper color prop. The sheet is ivory (dimmer in dark mode). `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
 

From 003afaac0f31b167a54cacba2ea639d6257610ee Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Thu, 1 Oct 2026 16:59:20 +0530
Subject: [PATCH 47/49] Make Typewriter playable, with a sheet that flexes.

Click the machine and type: letters strike their own keys and bars,
Enter pulls the return lever, Backspace moves the carriage back a space
so the next letter overstrikes, and the margin returns the carriage on
its own. The drawn keys, space bar, shift keys (which lock) and return
lever are clickable too. The first manual key stops the script and the
page is yours; key repeat is ignored like a real machine. Off with
`interactive={false}`.

The sheet now leans against the carriage on a spring and wobbles back
upright, and the machine shudders on each strike. Letters can come out
under-inked or double-struck with jitter. The carriage casts a soft
shadow on the deck, key tops get a glossy rim, and an optional `label`
puts a chrome nameplate on the front.
---
 .cursor/skills/23rd/SKILL.md                  |   2 +-
 .cursor/skills/23rd/apis.md                   |   2 +
 .cursor/skills/23rd/components.md             |   4 +-
 README.md                                     |   2 +-
 content/docs/components/typewriter.mdx        |   8 +-
 .../og/docs/components/typewriter/image.png   | Bin 47312 -> 47632 bytes
 public/r/registry.json                        |   4 +-
 public/r/typewriter-svelte.json               |   4 +-
 public/r/typewriter.json                      |   4 +-
 registry/typewriter/registry.json             |   4 +-
 registry/typewriter/typewriter-demo.tsx       |  18 +-
 registry/typewriter/typewriter-vanilla.ts     | 431 ++++++++++++++++--
 registry/typewriter/typewriter.svelte         |   8 +-
 registry/typewriter/typewriter.tsx            |  10 +-
 skills/23rd/SKILL.md                          |   2 +-
 skills/23rd/apis.md                           |   2 +
 skills/23rd/components.md                     |   4 +-
 17 files changed, 452 insertions(+), 57 deletions(-)

diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md
index 5185892..fcc26ed 100644
--- a/.cursor/skills/23rd/SKILL.md
+++ b/.cursor/skills/23rd/SKILL.md
@@ -142,7 +142,7 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). `color` sets the body enamel (default mint `#8EC3B5`); everything else is fixed chrome, rubber, and an ivory sheet.
+`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). `color` sets the body enamel (default mint `#8EC3B5`); everything else is fixed chrome, rubber, and an ivory sheet. With `interactive` (default on) visitors can click it and type, which stops the script.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
diff --git a/.cursor/skills/23rd/apis.md b/.cursor/skills/23rd/apis.md
index 6b818b3..2be40bf 100644
--- a/.cursor/skills/23rd/apis.md
+++ b/.cursor/skills/23rd/apis.md
@@ -376,6 +376,8 @@ type TypewriterProps = {
   columns?: number // 32 characters per line, clamped 16–60
   jitter?: number // 0.3, 0–1
   sound?: boolean // false
+  interactive?: boolean // true: focusable; type on it or click its keys
+  label?: string // nameplate text on the front; omit for none
   onDone?: () => void // each time the last character lands
   className?: string
 }
diff --git a/.cursor/skills/23rd/components.md b/.cursor/skills/23rd/components.md
index 06618cc..8c8f177 100644
--- a/.cursor/skills/23rd/components.md
+++ b/.cursor/skills/23rd/components.md
@@ -394,7 +394,7 @@ Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke
 
 Not this: a wordmark (`ascii-logo`), a blinking input caret, plain typed text in a paragraph (this draws the whole machine), or a background behind other copy.
 
-Deps: none. Props: `color` (`#8EC3B5`, body enamel), `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+Deps: none. Props: `color` (`#8EC3B5`, body enamel), `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `interactive` (true), `label` (none; nameplate text), `onDone`.
 
 ```tsx
 "use client"
@@ -409,5 +409,5 @@ export function Letter() {
 }
 ```
 
-Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. Only the enamel takes `color`; there is no ink, theme, or paper color prop. The sheet is ivory (dimmer in dark mode). `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. Only the enamel takes `color`; there is no ink, theme, or paper color prop. `interactive` makes the root focusable: keyboard typing, Enter = return, Backspace = carriage back a space (overstrike), and clicking keys, space, shift (locks), and the lever. The first manual key stops the script; remount with a new `key` to bring it back. The sheet is ivory (dimmer in dark mode). `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
 
diff --git a/README.md b/README.md
index 110bc55..240b06d 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,7 @@ npx skills add radiumcoders/23rd.dev --skill 23rd -g
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections       |
 | [Shader Sky](https://23rd.dev/docs/components/shader-sky)                 | `@23rd/shader-sky`         | Clear blue or rain behind a hero — drifting clouds, optional window-glass film     |
 | [Stretchy Footer](https://23rd.dev/docs/components/stretchy-footer)       | `@23rd/stretchy-footer`    | Dia-style rubber overscroll; aurora stretches past the bottom, then snaps back     |
-| [Typewriter](https://23rd.dev/docs/components/typewriter)                 | `@23rd/typewriter`         | A real typewriter in SVG — keys press, typebars strike the ribbon, the carriage steps |
+| [Typewriter](https://23rd.dev/docs/components/typewriter)                 | `@23rd/typewriter`         | A playable typewriter in SVG — keys press, typebars strike, the carriage steps |
 
 ```tsx
 import { GooeyColorPicker } from "@/components/ui/gooey-color-picker"
diff --git a/content/docs/components/typewriter.mdx b/content/docs/components/typewriter.mdx
index 7f864cf..8671a03 100644
--- a/content/docs/components/typewriter.mdx
+++ b/content/docs/components/typewriter.mdx
@@ -1,12 +1,14 @@
 ---
 title: Typewriter
-description: A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.
+description: A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.
 ---
 
 import { TypewriterDemo } from "@/registry/typewriter/typewriter-demo"
 
 A typewriter that actually types — glossy enamel, chrome, a black rubber platen, a red-and-black ribbon, and an ivory sheet. Every key on the keyboard is wired to its own typebar in the basket. Press a letter and its key goes down, that bar swings up out of the fan, the ribbon lifts, and the letter lands on the sheet as the carriage steps one character left. Capitals hold shift, which drops the basket. At the end of a line the return lever kicks, the platen turns the paper up a line, and the carriage slides home. With `loop` on, the finished sheet is pulled out and a fresh one rolls in from behind the platen.
 
+And you can use it. Click the machine and type: letters strike, Enter pulls the return lever, Backspace moves the carriage back a space so the next letter overstrikes (backspace and underscore underlines, like the real thing), and the margin returns the carriage for you. Or click the keys themselves — the space bar, the shift keys (they lock), and the return lever all work. The first key you press stops the script and the page is yours. The sheet leans as the carriage slams across and wobbles back upright, and the whole machine takes each blow.
+
 ## Preview
 
 <TypewriterDemo />
@@ -69,7 +71,7 @@ export function Letter() {
   </FrameworkSvelte>
 </FrameworkCode>
 
-`sound` synthesizes the key clicks, the margin bell, and the carriage return with Web Audio; browsers only let it play after the visitor has clicked or pressed a key on the page. Screen readers get the whole text at once. `prefers-reduced-motion: reduce` prints the finished page with no animation, and typing pauses while the typewriter is off-screen or the tab is hidden.
+`sound` synthesizes the key clicks, the margin bell, and the carriage return with Web Audio; browsers only let it play after the visitor has clicked or pressed a key on the page. With `interactive` on, the machine is focusable and shows a focus ring; key repeat is ignored, the way a real typewriter would. Screen readers get the whole text at once. `prefers-reduced-motion: reduce` prints the finished page with no animation, and typing pauses while the typewriter is off-screen or the tab is hidden.
 
 ## Props
 
@@ -85,6 +87,8 @@ export function Letter() {
 | `hold`       | `number`     | `2600` — ms on the finished page before looping     |
 | `startDelay` | `number`     | `600` — ms before the first keystroke               |
 | `sound`      | `boolean`    | `false` — synthesized clicks, bell, and return      |
+| `interactive` | `boolean`   | `true` — click it and type, or click its keys       |
+| `label`      | `string`     | none — text on a chrome nameplate on the front      |
 | `onDone`     | `() => void` | called each time the last character lands          |
 | `className`  | `string`     | React only                                          |
 | `class`      | `string`     | Svelte only                                         |
diff --git a/public/og/docs/components/typewriter/image.png b/public/og/docs/components/typewriter/image.png
index 1da9076ea8a42896f3c05e16f2c0e66eed7e258d..332b20e74dba8dc7331c20b35b4b5d309ce001b8 100644
GIT binary patch
literal 47632
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

literal 47312
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

diff --git a/public/r/registry.json b/public/r/registry.json
index 34a7ca9..4706aff 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -378,7 +378,7 @@
     {
       "name": "typewriter",
       "title": "Typewriter",
-      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
+      "description": "A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.",
       "files": [
         {
           "path": "registry/typewriter/typewriter.tsx",
@@ -391,7 +391,7 @@
     {
       "name": "typewriter-svelte",
       "title": "Typewriter",
-      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
+      "description": "A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.",
       "files": [
         {
           "path": "registry/typewriter/typewriter.svelte",
diff --git a/public/r/typewriter-svelte.json b/public/r/typewriter-svelte.json
index fa32e38..e15aef5 100644
--- a/public/r/typewriter-svelte.json
+++ b/public/r/typewriter-svelte.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "typewriter-svelte",
   "title": "Typewriter",
-  "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
+  "description": "A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.",
   "files": [
     {
       "path": "registry/typewriter/typewriter.svelte",
-      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Enamel of the body and paper rest — a vintage mint. */\nexport const DEFAULT_COLOR = \"#8EC3B5\"\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Body enamel, any CSS color. Default `#8EC3B5`. */\n  color?: string\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space, seen from the front and\n// a little above. The print point sits at the origin: the line being typed\n// has its baseline on y = 0, and the carriage slides so the next column\n// always lands at x = 0. Light comes from the upper left.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 314\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 42\nconst PIVOT_R = 56\nconst REST_R = 27\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 11\nconst SPOOL_Y = 80\nconst SPOOL_X = 150\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [136, 166, 196, 226]\nconst KEY_PITCH = 35\nconst KEY_R = 12.5\n/** Key tops are circles seen from above: this squashes them. */\nconst KEY_TILT = 0.64\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst INK = \"#24221F\"\nconst LEGEND = \"#EFE7D1\"\nconst RIBBON_BLACK = \"#16171A\"\nconst RIBBON_RED = \"#C4342B\"\nconst CHROME = \"#D3D8DC\"\nconst CHROME_EDGE = \"#5E656C\"\nconst SHEET = \"var(--typewriter-sheet, #FBF9F3)\"\n\n/** An SVG element. A `fill` of `\"sheet\"` paints in the paper tone. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key === \"fill\" && value === \"sheet\") node.style.fill = SHEET\n    else node.setAttribute(key, String(value))\n  }\n  parent?.append(node)\n  return node\n}\n\ntype Rgb = [number, number, number]\n\nlet swatch: CanvasRenderingContext2D | null = null\n\n/** Any CSS color as RGB, via a one-pixel canvas. */\nfunction rgbOf(color: string, fallback: Rgb): Rgb {\n  swatch ??= document\n    .createElement(\"canvas\")\n    .getContext(\"2d\", { willReadFrequently: true })\n  if (!swatch) return fallback\n  swatch.clearRect(0, 0, 1, 1)\n  swatch.fillStyle = `rgb(${fallback.join(\" \")})`\n  swatch.fillStyle = color\n  swatch.fillRect(0, 0, 1, 1)\n  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data\n  return [r, g, b]\n}\n\nfunction mix(a: Rgb, b: Rgb, t: number) {\n  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))\n  return `rgb(${c.join(\" \")})`\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGGElement\n  strike: SVGGElement\n  /** Dark edge under the bar, so it reads over the paper. */\n  edge: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  shadow: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: { path: SVGPathElement; dy: number }[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\n/**\n * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,\n * platen, knobs, return lever, sheet, scale) and the body (enamel shell,\n * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;\n * its lights and shadows are mixed from it.\n */\nfunction drawMachine(\n  svg: SVGSVGElement,\n  id: string,\n  columns: number,\n  color: string\n): Machine {\n  const span = columns * CW\n  const platenL = -PAD - 22\n  const platenR = span + PAD + 22\n  const knobW = 15\n  const leverX = platenL - knobW - 4\n  // Room for the carriage at both ends of its travel, and the body.\n  const left = leverX - 56 - (span + CW / 2)\n  const right = platenR + knobW - CW / 2\n  const half = Math.ceil(Math.max(-left, right, 262) + 14)\n  svg.replaceChildren()\n  svg.setAttribute(\n    \"viewBox\",\n    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n  )\n\n  const base = rgbOf(color, [142, 195, 181])\n  const white: Rgb = [255, 255, 255]\n  const black: Rgb = [0, 0, 0]\n  const enamel = {\n    shine: mix(base, white, 0.62),\n    hi: mix(base, white, 0.34),\n    light: mix(base, white, 0.14),\n    mid: mix(base, base, 0),\n    low: mix(base, black, 0.16),\n    deep: mix(base, black, 0.34),\n    edge: mix(base, black, 0.55),\n  }\n\n  /* Gradients. */\n  const defs = draw(\"defs\", {}, svg)\n  const gradient = (\n    name: string,\n    kind: \"linearGradient\" | \"radialGradient\",\n    attrs: Record<string, string | number>,\n    stops: [number, string, number?][]\n  ) => {\n    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)\n    for (const [offset, stopColor, alpha = 1] of stops) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": stopColor, \"stop-opacity\": alpha },\n        el\n      )\n    }\n    return `url(#${id}-${name})`\n  }\n  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }\n  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }\n  const fills = {\n    body: gradient(\"body\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.18, enamel.light],\n      [0.62, enamel.mid],\n      [1, enamel.low],\n    ]),\n    sides: gradient(\"sides\", \"linearGradient\", across, [\n      [0, \"#000\", 0.26],\n      [0.1, \"#000\", 0.04],\n      [0.5, \"#fff\", 0.05],\n      [0.9, \"#000\", 0.04],\n      [1, \"#000\", 0.3],\n    ]),\n    front: gradient(\"front\", \"linearGradient\", down, [\n      [0, enamel.low],\n      [1, enamel.deep],\n    ]),\n    rest: gradient(\"rest\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.5, enamel.light],\n      [1, enamel.low],\n    ]),\n    chrome: gradient(\"chrome\", \"linearGradient\", down, [\n      [0, \"#FDFEFE\"],\n      [0.38, \"#D2D7DB\"],\n      [0.52, \"#8B9298\"],\n      [0.7, \"#C3C8CC\"],\n      [1, \"#EEF0F2\"],\n    ]),\n    chromeV: gradient(\"chrome-v\", \"linearGradient\", across, [\n      [0, \"#8B9298\"],\n      [0.35, \"#F4F6F7\"],\n      [0.6, \"#BFC4C9\"],\n      [1, \"#737A80\"],\n    ]),\n    rubber: gradient(\"rubber\", \"linearGradient\", down, [\n      [0, \"#55595E\"],\n      [0.16, \"#2A2D31\"],\n      [0.55, \"#0D0E10\"],\n      [0.85, \"#050607\"],\n      [1, \"#1E2124\"],\n    ]),\n    bakelite: gradient(\"bakelite\", \"linearGradient\", down, [\n      [0, \"#62666C\"],\n      [0.2, \"#2C2F33\"],\n      [0.6, \"#111214\"],\n      [1, \"#2A2D31\"],\n    ]),\n    capTop: gradient(\n      \"cap-top\",\n      \"radialGradient\",\n      { cx: 0.38, cy: 0.3, r: 0.75 },\n      [\n        [0, \"#575C63\"],\n        [0.55, \"#202326\"],\n        [1, \"#0C0D0F\"],\n      ]\n    ),\n    capSide: gradient(\"cap-side\", \"linearGradient\", down, [\n      [0, \"#9AA1A7\"],\n      [0.5, \"#4B5157\"],\n      [1, \"#2A2E32\"],\n    ]),\n    well: gradient(\"well\", \"linearGradient\", down, [\n      [0, \"#08090A\"],\n      [0.18, \"#151719\"],\n      [1, \"#24272A\"],\n    ]),\n    recess: gradient(\"recess\", \"radialGradient\", { cx: 0.5, cy: 0, r: 1 }, [\n      [0, \"#030304\"],\n      [0.7, \"#141618\"],\n      [1, \"#24272A\"],\n    ]),\n    spoolRibbon: gradient(\n      \"spool-ribbon\",\n      \"radialGradient\",\n      { cx: 0.42, cy: 0.38, r: 0.7 },\n      [\n        [0, \"#3B3E43\"],\n        [0.7, \"#151618\"],\n        [1, \"#060607\"],\n      ]\n    ),\n    flange: gradient(\n      \"flange\",\n      \"radialGradient\",\n      { cx: 0.36, cy: 0.3, r: 0.85 },\n      [\n        [0, \"#FFFFFF\"],\n        [0.45, \"#CDD2D6\"],\n        [1, \"#7D848A\"],\n      ]\n    ),\n    ground: gradient(\"ground\", \"radialGradient\", { cx: 0.5, cy: 0.5, r: 0.5 }, [\n      [0, \"#000\", 0.34],\n      [0.6, \"#000\", 0.12],\n      [1, \"#000\", 0],\n    ]),\n    keyShadow: gradient(\n      \"key-shadow\",\n      \"radialGradient\",\n      { cx: 0.5, cy: 0.5, r: 0.5 },\n      [\n        [0, \"#000\", 0.7],\n        [1, \"#000\", 0],\n      ]\n    ),\n    curl: gradient(\n      \"curl\",\n      \"linearGradient\",\n      { gradientUnits: \"userSpaceOnUse\", x1: 0, y1: 12, x2: 0, y2: 41 },\n      [\n        [0, \"#3A2E1C\", 0],\n        [0.55, \"#3A2E1C\", 0.1],\n        [1, \"#3A2E1C\", 0.34],\n      ]\n    ),\n  }\n\n  // The sheet fades out at the top of the frame and tucks behind the\n  // platen at the bottom.\n  const fade = gradient(\n    \"fade-g\",\n    \"linearGradient\",\n    {\n      gradientUnits: \"userSpaceOnUse\",\n      x1: 0,\n      x2: 0,\n      y1: VIEW_TOP,\n      y2: 41,\n    },\n    [\n      [0, \"#fff\", 0],\n      [84 / (41 - VIEW_TOP), \"#fff\", 1],\n      [0.998, \"#fff\", 1],\n      [1, \"#fff\", 0],\n    ]\n  )\n  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }\n  const mask = draw(\n    \"mask\",\n    { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n    defs\n  )\n  draw(\"rect\", { ...box, fill: fade }, mask)\n\n  // Ground shadow.\n  draw(\"ellipse\", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)\n\n  /* ---------------- Carriage ---------------- */\n\n  const carriage = draw(\"g\", {}, svg)\n  // Rail it rides on.\n  draw(\n    \"rect\",\n    {\n      x: platenL - knobW - 8,\n      y: 40,\n      width: platenR - platenL + knobW * 2 + 16,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  // Paper rest behind the sheet.\n  const tL = -PAD - 16\n  const tR = span + PAD + 16\n  draw(\n    \"path\",\n    {\n      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,\n      fill: fills.rest,\n    },\n    carriage\n  )\n  draw(\n    \"path\",\n    {\n      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.4,\n      \"stroke-opacity\": 0.85,\n    },\n    carriage\n  )\n  // Platen, with chrome collars at its ends.\n  draw(\n    \"rect\",\n    {\n      x: platenL,\n      y: 6,\n      width: platenR - platenL,\n      height: 34,\n      rx: 4,\n      fill: fills.rubber,\n    },\n    carriage\n  )\n  draw(\n    \"rect\",\n    {\n      x: platenL + 4,\n      y: 10.5,\n      width: platenR - platenL - 8,\n      height: 1.6,\n      rx: 0.8,\n      fill: \"#fff\",\n      \"fill-opacity\": 0.22,\n    },\n    carriage\n  )\n  for (const x of [platenL - 4, platenR]) {\n    draw(\n      \"rect\",\n      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },\n      carriage\n    )\n  }\n  // Knobs: bakelite with knurling that turns with the platen.\n  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {\n    draw(\n      \"rect\",\n      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },\n      carriage\n    )\n    const lines = Array.from({ length: RIDGES }, () =>\n      draw(\n        \"line\",\n        {\n          x1: x + 2.5,\n          x2: x + knobW - 2.5,\n          stroke: \"#B8BEC4\",\n          \"stroke-width\": 1,\n          \"stroke-linecap\": \"round\",\n        },\n        carriage\n      )\n    )\n    draw(\n      \"rect\",\n      {\n        x: x + 2,\n        y: 3,\n        width: knobW - 4,\n        height: 6,\n        rx: 3,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.12,\n      },\n      carriage\n    )\n    return { x, lines }\n  })\n  // Carriage return lever: chrome arm, bakelite grip.\n  const lever = draw(\"g\", {}, carriage)\n  const leverPivot: [number, number] = [leverX, 30]\n  draw(\n    \"rect\",\n    {\n      x: leverX - 5,\n      y: 20,\n      width: 10,\n      height: 22,\n      rx: 3,\n      fill: fills.chromeV,\n    },\n    lever\n  )\n  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 6.4],\n    [CHROME, 4],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: arm,\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n  }\n  draw(\n    \"path\",\n    {\n      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,\n      fill: \"none\",\n      stroke: \"#fff\",\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.8,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    lever\n  )\n  draw(\n    \"rect\",\n    {\n      x: leverX - 56,\n      y: -25,\n      width: 28,\n      height: 11,\n      rx: 5.5,\n      fill: fills.bakelite,\n      transform: `rotate(-24 ${leverX - 42} -19.5)`,\n    },\n    lever\n  )\n\n  // The sheet, masked so it fades at the top and wraps under the platen.\n  const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n  const paper = draw(\"g\", {}, wrap)\n  const shadow = draw(\n    \"rect\",\n    {\n      x: -PAD + 3,\n      y: -TOP_MARGIN + 3,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"#000\",\n      \"fill-opacity\": 0.12,\n    },\n    paper\n  )\n  const sheet = draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: -TOP_MARGIN,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"sheet\",\n      stroke: \"#000\",\n      \"stroke-opacity\": 0.07,\n      \"stroke-width\": 0.8,\n    },\n    paper\n  )\n  const ink = draw(\n    \"g\",\n    { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: INK },\n    paper\n  )\n  // Where the sheet curls round the platen.\n  draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: 12,\n      width: span + PAD * 2,\n      height: 30,\n      fill: fills.curl,\n    },\n    wrap\n  )\n\n  // Paper scale under the print line.\n  draw(\n    \"rect\",\n    {\n      x: -PAD + 2,\n      y: 8.5,\n      width: span + PAD * 2 - 4,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  let ticks = \"\"\n  for (let c = 0; c <= columns; c++) {\n    const x = c * CW\n    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`\n  }\n  draw(\n    \"path\",\n    {\n      d: ticks,\n      stroke: \"#3E444A\",\n      \"stroke-width\": 0.7,\n      fill: \"none\",\n    },\n    carriage\n  )\n\n  /* ---------------- Body ---------------- */\n\n  const body = draw(\"g\", {}, svg)\n  const shell =\n    \"M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z\"\n  draw(\"path\", { d: shell, fill: fills.body }, body)\n  draw(\"path\", { d: shell, fill: fills.sides }, body)\n  // Front face, below the top surfaces, with a chrome trim.\n  draw(\n    \"path\",\n    {\n      d: \"M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z\",\n      fill: fills.front,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-240 264.5H240\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.7,\n    },\n    body\n  )\n  draw(\n    \"rect\",\n    {\n      x: -236,\n      y: 274,\n      width: 472,\n      height: 3,\n      rx: 1.5,\n      fill: fills.chrome,\n    },\n    body\n  )\n  for (const x of [-228, 188]) {\n    draw(\n      \"rect\",\n      { x, y: 293, width: 40, height: 10, rx: 4, fill: \"#151618\" },\n      body\n    )\n  }\n  const sheen = gradient(\"sheen\", \"linearGradient\", across, [\n    [0, \"#fff\", 0.34],\n    [0.55, \"#fff\", 0.1],\n    [1, \"#fff\", 0],\n  ])\n  draw(\n    \"path\",\n    { d: \"M-210 48H-96L-150 110H-224Q-222 82 -210 48Z\", fill: sheen },\n    body\n  )\n  // Glossy rim along the top of the shell.\n  draw(\n    \"path\",\n    {\n      d: \"M-194 43.4H194\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.6,\n      \"stroke-linecap\": \"round\",\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-208 56Q-212 70 -216 96\",\n      stroke: enamel.shine,\n      \"stroke-width\": 2.4,\n      \"stroke-linecap\": \"round\",\n      \"stroke-opacity\": 0.55,\n      fill: \"none\",\n    },\n    body\n  )\n\n  // Typebar basket, sunk in the deck.\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,\n      fill: fills.recess,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.75,\n    },\n    body\n  )\n  const basket = draw(\"g\", {}, body)\n  const [ax, ay] = polar(62, -SPREAD - 0.12)\n  const [bx, by] = polar(62, SPREAD + 0.12)\n  const [cx, cy] = polar(53, SPREAD + 0.12)\n  const [dx, dy] = polar(53, -SPREAD - 0.12)\n  draw(\n    \"path\",\n    {\n      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,\n      fill: fills.chrome,\n    },\n    basket\n  )\n\n  // Ribbon spools: black ribbon wound under a turning chrome flange.\n  const spools = [-SPOOL_X, SPOOL_X].map((x) => {\n    draw(\n      \"circle\",\n      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: \"#000\", \"fill-opacity\": 0.22 },\n      body\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)\n    const turn = draw(\"g\", {}, body)\n    let windows = \"\"\n    for (let i = 0; i < 3; i++) {\n      const a0 = (i / 3) * TAU + 0.25\n      const a1 = a0 + 1.35\n      const p = (r: number, a: number) =>\n        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`\n      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`\n    }\n    draw(\n      \"path\",\n      {\n        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,\n        fill: fills.flange,\n        \"fill-rule\": \"evenodd\",\n      },\n      turn\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 1.6, fill: \"#2A2D31\" }, turn)\n    return turn\n  })\n\n  // The type guide either side of the print point.\n  for (const x of [-23, 17]) {\n    draw(\n      \"rect\",\n      {\n        x,\n        y: 0,\n        width: 6,\n        height: 16,\n        rx: 1.6,\n        fill: fills.chromeV,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n  }\n\n  // Two-tone ribbon, black over red, through the vibrator.\n  const ribbon = [\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_BLACK,\n          \"stroke-width\": 5.8,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 0,\n    },\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_RED,\n          \"stroke-width\": 2.6,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 1.5,\n    },\n  ]\n  const vibrator = draw(\"g\", {}, body)\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 3.8],\n    [CHROME, 2],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: \"M-12 2.5V11.5H12V2.5\",\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linejoin\": \"round\",\n        \"stroke-linecap\": \"round\",\n      },\n      vibrator\n    )\n  }\n\n  // Keyboard well.\n  draw(\n    \"path\",\n    {\n      d: \"M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z\",\n      fill: fills.well,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126\",\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.8,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-226 254.6H226\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.6,\n    },\n    body\n  )\n\n  const ry = KEY_R * KEY_TILT\n  const height = 4.5\n  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */\n  const keyAt = (x: number, y: number, label: string) => {\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 21,\n        rx: 11,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - 1.5,\n        y: y + 4,\n        width: 3,\n        height: 19,\n        rx: 1,\n        fill: fills.chromeV,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\"ellipse\", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)\n    draw(\n      \"ellipse\",\n      {\n        cx: x,\n        cy: y + 0.3,\n        rx: KEY_R - 2.3,\n        ry: ry - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    draw(\n      \"ellipse\",\n      {\n        cx: x - 3.4,\n        cy: y - 2.6,\n        rx: 4.4,\n        ry: 1.6,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.2,\n      },\n      cap\n    )\n    const text = draw(\n      \"text\",\n      {\n        x,\n        y: y + 0.7,\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\",\n        \"font-size\": 9.6,\n        \"font-weight\": 600,\n        fill: LEGEND,\n        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,\n      },\n      cap\n    )\n    text.textContent = label\n    return cap\n  }\n\n  const keys = new Map<string, Key>()\n  const placed: { x: number; key: Key }[] = []\n  KEY_ROWS.forEach((row, r) => {\n    Array.from(row).forEach((ch, i) => {\n      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n      const key: Key = {\n        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n        bar: null,\n        v: 0,\n      }\n      keys.set(ch, key)\n      placed.push({ x, key })\n    })\n  })\n\n  /** A pill key (shift, space): same rim and cap, stretched. */\n  const pill = (x: number, y: number, w: number, legend?: string) => {\n    for (const sx of [x - w * 0.3, x + w * 0.3]) {\n      draw(\n        \"rect\",\n        {\n          x: sx - 1.5,\n          y: y + 4,\n          width: 3,\n          height: 17,\n          rx: 1,\n          fill: fills.chromeV,\n        },\n        body\n      )\n    }\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 19,\n        rx: w / 2 + 2,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    const r = ry\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r + height,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.chrome,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2 + 2.3,\n        y: y - r + 1.6,\n        width: w - 4.6,\n        height: r * 2 - 3.2,\n        rx: r - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    if (legend) {\n      draw(\"path\", { d: legend, fill: LEGEND }, cap)\n    }\n    return cap\n  }\n  const y3 = KEY_Y[3]!\n  const shifts = [-1, 1].map((side) => {\n    const x = side * 201\n    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`\n    return { cap: pill(x, y3, 30, arrow), bar: null, v: 0 } satisfies Key\n  })\n\n  // Space bar: a chrome bar on two arms.\n  for (const sx of [-80, 80]) {\n    draw(\n      \"rect\",\n      {\n        x: sx - 1.5,\n        y: 247,\n        width: 3,\n        height: 7,\n        fill: fills.chromeV,\n      },\n      body\n    )\n  }\n  const spaceCap = draw(\"g\", {}, body)\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 242,\n      width: 224,\n      height: 9,\n      rx: 4.5,\n      fill: \"#4E555B\",\n    },\n    spaceCap\n  )\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 239.5,\n      width: 224,\n      height: 8,\n      rx: 4,\n      fill: fills.chrome,\n    },\n    spaceCap\n  )\n  const space: Key = { cap: spaceCap, bar: null, v: 0 }\n\n  // One typebar per key, fanned left to right in key order.\n  const overlay = draw(\"g\", {}, svg)\n  placed.sort((a, b) => a.x - b.x)\n  const bars = placed.map(({ key }, i) => {\n    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n    const pivot = polar(PIVOT_R, angle)\n    const tip = polar(REST_R, angle)\n    const rest = draw(\"g\", {}, basket)\n    draw(\n      \"line\",\n      {\n        x1: pivot[0],\n        y1: pivot[1],\n        x2: tip[0],\n        y2: tip[1],\n        stroke: i % 2 ? \"#C4C9CE\" : \"#E6E9EC\",\n        \"stroke-width\": 1.25,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const [sx, sy] = polar(REST_R + 3.4, angle)\n    draw(\n      \"line\",\n      {\n        x1: sx,\n        y1: sy,\n        x2: tip[0],\n        y2: tip[1],\n        stroke: \"#7D848A\",\n        \"stroke-width\": 2.6,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const strike = draw(\"g\", { display: \"none\" }, overlay)\n    const line = (stroke: string, width: number) =>\n      draw(\n        \"line\",\n        { stroke, \"stroke-width\": width, \"stroke-linecap\": \"round\" },\n        strike\n      )\n    const edge = line(\"#1C1E21\", 3.9)\n    const core = line(\"#E2E5E8\", 1.8)\n    const slug = line(\"#2A2D31\", 5.6)\n    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }\n    key.bar = bar\n    return bar\n  })\n\n  return {\n    columns,\n    carriage,\n    paper,\n    sheet,\n    shadow,\n    ink,\n    lever,\n    leverPivot,\n    knobs,\n    keys,\n    shifts,\n    space,\n    basket,\n    bars,\n    ribbon,\n    vibrator,\n    spools,\n  }\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the\n * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at\n * once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    M = drawMachine(svg, id, columnsOf(), options.color ?? DEFAULT_COLOR)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -SPOOL_X : SPOOL_X\n      spool.setAttribute(\n        \"transform\",\n        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`\n      )\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const top = SPOOL_Y - 24\n    for (const { path, dy } of M.ribbon) {\n      path.setAttribute(\n        \"d\",\n        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`\n      )\n    }\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.edge, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n    M.shadow.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Theme                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */\n  const applyTheme = () => {\n    root.style.setProperty(\n      \"--typewriter-sheet\",\n      isDark() ? \"#ECE7DA\" : \"#FBF9F3\"\n    )\n  }\n\n  build()\n  applyTheme()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(applyTheme)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", applyTheme)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns || options.color !== prev.color) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", applyTheme)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-sheet\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    color = DEFAULT_COLOR,\n    columns = DEFAULT_COLUMNS,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n    className\n  )}\n></div>\n",
+      "content": "<script module lang=\"ts\">\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Enamel of the body and paper rest — a vintage mint. */\nexport const DEFAULT_COLOR = \"#8EC3B5\"\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Body enamel, any CSS color. Default `#8EC3B5`. */\n  color?: string\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /**\n   * Click the machine and type on it: your keyboard, or its keys, space\n   * bar, shift lock, and return lever. Taking over stops the script.\n   * Default `true`.\n   */\n  interactive?: boolean\n  /** Text on a chrome nameplate on the front. Omit for none. */\n  label?: string\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space, seen from the front and\n// a little above. The print point sits at the origin: the line being typed\n// has its baseline on y = 0, and the carriage slides so the next column\n// always lands at x = 0. Light comes from the upper left.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 314\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 42\nconst PIVOT_R = 56\nconst REST_R = 27\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 11\nconst SPOOL_Y = 80\nconst SPOOL_X = 150\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [136, 166, 196, 226]\nconst KEY_PITCH = 35\nconst KEY_R = 12.5\n/** Key tops are circles seen from above: this squashes them. */\nconst KEY_TILT = 0.64\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4\n/** Paper lean per unit/s of carriage speed, in degrees, and its limit. */\nconst FLEX_GAIN = 0.0042\nconst FLEX_MAX = 5\n/** Spring the paper wobbles back on. */\nconst FLEX_K = 170\nconst FLEX_C = 9\n/** Platen line: where the sheet bends from. */\nconst FLEX_ANCHOR = 40\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst INK = \"#24221F\"\nconst LEGEND = \"#EFE7D1\"\nconst RIBBON_BLACK = \"#16171A\"\nconst RIBBON_RED = \"#C4342B\"\nconst CHROME = \"#D3D8DC\"\nconst CHROME_EDGE = \"#5E656C\"\nconst SHEET = \"var(--typewriter-sheet, #FBF9F3)\"\n\n/** An SVG element. A `fill` of `\"sheet\"` paints in the paper tone. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key === \"fill\" && value === \"sheet\") node.style.fill = SHEET\n    else node.setAttribute(key, String(value))\n  }\n  parent?.append(node)\n  return node\n}\n\ntype Rgb = [number, number, number]\n\nlet swatch: CanvasRenderingContext2D | null = null\n\n/** Any CSS color as RGB, via a one-pixel canvas. */\nfunction rgbOf(color: string, fallback: Rgb): Rgb {\n  swatch ??= document\n    .createElement(\"canvas\")\n    .getContext(\"2d\", { willReadFrequently: true })\n  if (!swatch) return fallback\n  swatch.clearRect(0, 0, 1, 1)\n  swatch.fillStyle = `rgb(${fallback.join(\" \")})`\n  swatch.fillStyle = color\n  swatch.fillRect(0, 0, 1, 1)\n  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data\n  return [r, g, b]\n}\n\nfunction mix(a: Rgb, b: Rgb, t: number) {\n  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))\n  return `rgb(${c.join(\" \")})`\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGGElement\n  strike: SVGGElement\n  /** Dark edge under the bar, so it reads over the paper. */\n  edge: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  /** Everything but the ground shadow — it shudders on each strike. */\n  rig: SVGGElement\n  /** Under-inked fills, for letters the ribbon didn't fully cover. */\n  inkFills: string[]\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  shadow: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: { path: SVGPathElement; dy: number }[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\n/**\n * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,\n * platen, knobs, return lever, sheet, scale) and the body (enamel shell,\n * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;\n * its lights and shadows are mixed from it.\n */\nfunction drawMachine(\n  svg: SVGSVGElement,\n  id: string,\n  columns: number,\n  color: string,\n  label?: string\n): Machine {\n  const span = columns * CW\n  const platenL = -PAD - 22\n  const platenR = span + PAD + 22\n  const knobW = 15\n  const leverX = platenL - knobW - 4\n  // Room for the carriage at both ends of its travel, and the body.\n  const left = leverX - 56 - (span + CW / 2)\n  const right = platenR + knobW - CW / 2\n  const half = Math.ceil(Math.max(-left, right, 262) + 14)\n  svg.replaceChildren()\n  svg.setAttribute(\n    \"viewBox\",\n    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n  )\n\n  const base = rgbOf(color, [142, 195, 181])\n  const white: Rgb = [255, 255, 255]\n  const black: Rgb = [0, 0, 0]\n  const enamel = {\n    shine: mix(base, white, 0.62),\n    hi: mix(base, white, 0.34),\n    light: mix(base, white, 0.14),\n    mid: mix(base, base, 0),\n    low: mix(base, black, 0.16),\n    deep: mix(base, black, 0.34),\n    edge: mix(base, black, 0.55),\n  }\n\n  /* Gradients. */\n  const defs = draw(\"defs\", {}, svg)\n  const gradient = (\n    name: string,\n    kind: \"linearGradient\" | \"radialGradient\",\n    attrs: Record<string, string | number>,\n    stops: [number, string, number?][]\n  ) => {\n    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)\n    for (const [offset, stopColor, alpha = 1] of stops) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": stopColor, \"stop-opacity\": alpha },\n        el\n      )\n    }\n    return `url(#${id}-${name})`\n  }\n  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }\n  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }\n  const fills = {\n    body: gradient(\"body\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.18, enamel.light],\n      [0.62, enamel.mid],\n      [1, enamel.low],\n    ]),\n    sides: gradient(\"sides\", \"linearGradient\", across, [\n      [0, \"#000\", 0.26],\n      [0.1, \"#000\", 0.04],\n      [0.5, \"#fff\", 0.05],\n      [0.9, \"#000\", 0.04],\n      [1, \"#000\", 0.3],\n    ]),\n    front: gradient(\"front\", \"linearGradient\", down, [\n      [0, enamel.low],\n      [1, enamel.deep],\n    ]),\n    rest: gradient(\"rest\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.5, enamel.light],\n      [1, enamel.low],\n    ]),\n    chrome: gradient(\"chrome\", \"linearGradient\", down, [\n      [0, \"#FDFEFE\"],\n      [0.38, \"#D2D7DB\"],\n      [0.52, \"#8B9298\"],\n      [0.7, \"#C3C8CC\"],\n      [1, \"#EEF0F2\"],\n    ]),\n    chromeV: gradient(\"chrome-v\", \"linearGradient\", across, [\n      [0, \"#8B9298\"],\n      [0.35, \"#F4F6F7\"],\n      [0.6, \"#BFC4C9\"],\n      [1, \"#737A80\"],\n    ]),\n    rubber: gradient(\"rubber\", \"linearGradient\", down, [\n      [0, \"#55595E\"],\n      [0.16, \"#2A2D31\"],\n      [0.55, \"#0D0E10\"],\n      [0.85, \"#050607\"],\n      [1, \"#1E2124\"],\n    ]),\n    bakelite: gradient(\"bakelite\", \"linearGradient\", down, [\n      [0, \"#62666C\"],\n      [0.2, \"#2C2F33\"],\n      [0.6, \"#111214\"],\n      [1, \"#2A2D31\"],\n    ]),\n    capTop: gradient(\n      \"cap-top\",\n      \"radialGradient\",\n      { cx: 0.38, cy: 0.3, r: 0.75 },\n      [\n        [0, \"#575C63\"],\n        [0.55, \"#202326\"],\n        [1, \"#0C0D0F\"],\n      ]\n    ),\n    capSide: gradient(\"cap-side\", \"linearGradient\", down, [\n      [0, \"#9AA1A7\"],\n      [0.5, \"#4B5157\"],\n      [1, \"#2A2E32\"],\n    ]),\n    well: gradient(\"well\", \"linearGradient\", down, [\n      [0, \"#08090A\"],\n      [0.18, \"#151719\"],\n      [1, \"#24272A\"],\n    ]),\n    recess: gradient(\"recess\", \"radialGradient\", { cx: 0.5, cy: 0, r: 1 }, [\n      [0, \"#030304\"],\n      [0.7, \"#141618\"],\n      [1, \"#24272A\"],\n    ]),\n    spoolRibbon: gradient(\n      \"spool-ribbon\",\n      \"radialGradient\",\n      { cx: 0.42, cy: 0.38, r: 0.7 },\n      [\n        [0, \"#3B3E43\"],\n        [0.7, \"#151618\"],\n        [1, \"#060607\"],\n      ]\n    ),\n    flange: gradient(\n      \"flange\",\n      \"radialGradient\",\n      { cx: 0.36, cy: 0.3, r: 0.85 },\n      [\n        [0, \"#FFFFFF\"],\n        [0.45, \"#CDD2D6\"],\n        [1, \"#7D848A\"],\n      ]\n    ),\n    ground: gradient(\"ground\", \"radialGradient\", { cx: 0.5, cy: 0.5, r: 0.5 }, [\n      [0, \"#000\", 0.34],\n      [0.6, \"#000\", 0.12],\n      [1, \"#000\", 0],\n    ]),\n    keyShadow: gradient(\n      \"key-shadow\",\n      \"radialGradient\",\n      { cx: 0.5, cy: 0.5, r: 0.5 },\n      [\n        [0, \"#000\", 0.7],\n        [1, \"#000\", 0],\n      ]\n    ),\n    curl: gradient(\n      \"curl\",\n      \"linearGradient\",\n      { gradientUnits: \"userSpaceOnUse\", x1: 0, y1: 12, x2: 0, y2: 41 },\n      [\n        [0, \"#3A2E1C\", 0],\n        [0.55, \"#3A2E1C\", 0.1],\n        [1, \"#3A2E1C\", 0.34],\n      ]\n    ),\n    contact: gradient(\"contact\", \"linearGradient\", down, [\n      [0, \"#000\", 0.3],\n      [1, \"#000\", 0],\n    ]),\n  }\n  const inkFills = (\n    [\n      [down, 0, 0.36],\n      [down, 1, 0.4],\n      [across, 0, 0.42],\n      [across, 1, 0.42],\n    ] as const\n  ).map(([dir, faintEnd, alpha], i) =>\n    gradient(\n      `ink-${i}`,\n      \"linearGradient\",\n      dir,\n      faintEnd === 0\n        ? [\n            [0, INK, alpha],\n            [0.55, INK, 1],\n            [1, INK, 1],\n          ]\n        : [\n            [0, INK, 1],\n            [0.45, INK, 1],\n            [1, INK, alpha],\n          ]\n    )\n  )\n\n  // The sheet fades out at the top of the frame and tucks behind the\n  // platen at the bottom.\n  const fade = gradient(\n    \"fade-g\",\n    \"linearGradient\",\n    {\n      gradientUnits: \"userSpaceOnUse\",\n      x1: 0,\n      x2: 0,\n      y1: VIEW_TOP,\n      y2: 41,\n    },\n    [\n      [0, \"#fff\", 0],\n      [84 / (41 - VIEW_TOP), \"#fff\", 1],\n      [0.998, \"#fff\", 1],\n      [1, \"#fff\", 0],\n    ]\n  )\n  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }\n  const mask = draw(\n    \"mask\",\n    { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n    defs\n  )\n  draw(\"rect\", { ...box, fill: fade }, mask)\n\n  // Ground shadow.\n  draw(\"ellipse\", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)\n\n  /* ---------------- Carriage ---------------- */\n\n  const rig = draw(\"g\", {}, svg)\n  const carriage = draw(\"g\", {}, rig)\n  // Rail it rides on.\n  draw(\n    \"rect\",\n    {\n      x: platenL - knobW - 8,\n      y: 40,\n      width: platenR - platenL + knobW * 2 + 16,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  // Paper rest behind the sheet.\n  const tL = -PAD - 16\n  const tR = span + PAD + 16\n  draw(\n    \"path\",\n    {\n      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,\n      fill: fills.rest,\n    },\n    carriage\n  )\n  draw(\n    \"path\",\n    {\n      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.4,\n      \"stroke-opacity\": 0.85,\n    },\n    carriage\n  )\n  // Platen, with chrome collars at its ends.\n  draw(\n    \"rect\",\n    {\n      x: platenL,\n      y: 6,\n      width: platenR - platenL,\n      height: 34,\n      rx: 4,\n      fill: fills.rubber,\n    },\n    carriage\n  )\n  draw(\n    \"rect\",\n    {\n      x: platenL + 4,\n      y: 10.5,\n      width: platenR - platenL - 8,\n      height: 1.6,\n      rx: 0.8,\n      fill: \"#fff\",\n      \"fill-opacity\": 0.22,\n    },\n    carriage\n  )\n  for (const x of [platenL - 4, platenR]) {\n    draw(\n      \"rect\",\n      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },\n      carriage\n    )\n  }\n  // Knobs: bakelite with knurling that turns with the platen.\n  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {\n    draw(\n      \"rect\",\n      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },\n      carriage\n    )\n    const lines = Array.from({ length: RIDGES }, () =>\n      draw(\n        \"line\",\n        {\n          x1: x + 2.5,\n          x2: x + knobW - 2.5,\n          stroke: \"#B8BEC4\",\n          \"stroke-width\": 1,\n          \"stroke-linecap\": \"round\",\n        },\n        carriage\n      )\n    )\n    draw(\n      \"rect\",\n      {\n        x: x + 2,\n        y: 3,\n        width: knobW - 4,\n        height: 6,\n        rx: 3,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.12,\n      },\n      carriage\n    )\n    return { x, lines }\n  })\n  // Carriage return lever: chrome arm, bakelite grip.\n  const lever = draw(\"g\", { \"data-key\": \"return\" }, carriage)\n  const leverPivot: [number, number] = [leverX, 30]\n  draw(\n    \"rect\",\n    {\n      x: leverX - 5,\n      y: 20,\n      width: 10,\n      height: 22,\n      rx: 3,\n      fill: fills.chromeV,\n    },\n    lever\n  )\n  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 6.4],\n    [CHROME, 4],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: arm,\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n  }\n  draw(\n    \"path\",\n    {\n      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,\n      fill: \"none\",\n      stroke: \"#fff\",\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.8,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    lever\n  )\n  draw(\n    \"rect\",\n    {\n      x: leverX - 56,\n      y: -25,\n      width: 28,\n      height: 11,\n      rx: 5.5,\n      fill: fills.bakelite,\n      transform: `rotate(-24 ${leverX - 42} -19.5)`,\n    },\n    lever\n  )\n\n  // The sheet, masked so it fades at the top and wraps under the platen.\n  const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n  const paper = draw(\"g\", {}, wrap)\n  const shadow = draw(\n    \"rect\",\n    {\n      x: -PAD + 3,\n      y: -TOP_MARGIN + 3,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"#000\",\n      \"fill-opacity\": 0.12,\n    },\n    paper\n  )\n  const sheet = draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: -TOP_MARGIN,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"sheet\",\n      stroke: \"#000\",\n      \"stroke-opacity\": 0.07,\n      \"stroke-width\": 0.8,\n    },\n    paper\n  )\n  const ink = draw(\n    \"g\",\n    { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: INK },\n    paper\n  )\n  // Where the sheet curls round the platen.\n  draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: 12,\n      width: span + PAD * 2,\n      height: 30,\n      fill: fills.curl,\n    },\n    wrap\n  )\n\n  // Paper scale under the print line.\n  draw(\n    \"rect\",\n    {\n      x: -PAD + 2,\n      y: 8.5,\n      width: span + PAD * 2 - 4,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  let ticks = \"\"\n  for (let c = 0; c <= columns; c++) {\n    const x = c * CW\n    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`\n  }\n  draw(\n    \"path\",\n    {\n      d: ticks,\n      stroke: \"#3E444A\",\n      \"stroke-width\": 0.7,\n      fill: \"none\",\n    },\n    carriage\n  )\n\n  /* ---------------- Body ---------------- */\n\n  const body = draw(\"g\", {}, rig)\n  const shell =\n    \"M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z\"\n  draw(\"path\", { d: shell, fill: fills.body }, body)\n  draw(\"path\", { d: shell, fill: fills.sides }, body)\n  draw(\n    \"rect\",\n    { x: -206, y: 42.5, width: 412, height: 15, fill: fills.contact },\n    body\n  )\n  // Front face, below the top surfaces, with a chrome trim.\n  draw(\n    \"path\",\n    {\n      d: \"M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z\",\n      fill: fills.front,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-240 264.5H240\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.7,\n    },\n    body\n  )\n  draw(\n    \"rect\",\n    {\n      x: -236,\n      y: 274,\n      width: 472,\n      height: 3,\n      rx: 1.5,\n      fill: fills.chrome,\n    },\n    body\n  )\n  if (label) {\n    const w = Math.max(36, label.length * 7.4 + 18)\n    draw(\n      \"rect\",\n      {\n        x: -w / 2,\n        y: 268.5,\n        width: w,\n        height: 14,\n        rx: 3,\n        fill: fills.chrome,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n    for (const [dy, fill] of [\n      [0.6, \"#fff\"],\n      [0, \"#30353A\"],\n    ] as const) {\n      const plate = draw(\n        \"text\",\n        {\n          x: 0,\n          y: 276 + dy,\n          \"text-anchor\": \"middle\",\n          \"dominant-baseline\": \"central\",\n          \"font-size\": 8.4,\n          \"font-weight\": 700,\n          \"letter-spacing\": 1.6,\n          fill,\n        },\n        body\n      )\n      plate.textContent = label\n    }\n  }\n  for (const x of [-228, 188]) {\n    draw(\n      \"rect\",\n      { x, y: 293, width: 40, height: 10, rx: 4, fill: \"#151618\" },\n      body\n    )\n  }\n  const sheen = gradient(\"sheen\", \"linearGradient\", across, [\n    [0, \"#fff\", 0.34],\n    [0.55, \"#fff\", 0.1],\n    [1, \"#fff\", 0],\n  ])\n  draw(\n    \"path\",\n    { d: \"M-210 48H-96L-150 110H-224Q-222 82 -210 48Z\", fill: sheen },\n    body\n  )\n  // Glossy rim along the top of the shell.\n  draw(\n    \"path\",\n    {\n      d: \"M-194 43.4H194\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.6,\n      \"stroke-linecap\": \"round\",\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-208 56Q-212 70 -216 96\",\n      stroke: enamel.shine,\n      \"stroke-width\": 2.4,\n      \"stroke-linecap\": \"round\",\n      \"stroke-opacity\": 0.55,\n      fill: \"none\",\n    },\n    body\n  )\n\n  // Typebar basket, sunk in the deck.\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,\n      fill: fills.recess,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.75,\n    },\n    body\n  )\n  const basket = draw(\"g\", {}, body)\n  const [ax, ay] = polar(62, -SPREAD - 0.12)\n  const [bx, by] = polar(62, SPREAD + 0.12)\n  const [cx, cy] = polar(53, SPREAD + 0.12)\n  const [dx, dy] = polar(53, -SPREAD - 0.12)\n  draw(\n    \"path\",\n    {\n      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,\n      fill: fills.chrome,\n    },\n    basket\n  )\n\n  // Ribbon spools: black ribbon wound under a turning chrome flange.\n  const spools = [-SPOOL_X, SPOOL_X].map((x) => {\n    draw(\n      \"circle\",\n      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: \"#000\", \"fill-opacity\": 0.22 },\n      body\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)\n    const turn = draw(\"g\", {}, body)\n    let windows = \"\"\n    for (let i = 0; i < 3; i++) {\n      const a0 = (i / 3) * TAU + 0.25\n      const a1 = a0 + 1.35\n      const p = (r: number, a: number) =>\n        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`\n      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`\n    }\n    draw(\n      \"path\",\n      {\n        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,\n        fill: fills.flange,\n        \"fill-rule\": \"evenodd\",\n      },\n      turn\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 1.6, fill: \"#2A2D31\" }, turn)\n    return turn\n  })\n\n  // The type guide either side of the print point.\n  for (const x of [-23, 17]) {\n    draw(\n      \"rect\",\n      {\n        x,\n        y: 0,\n        width: 6,\n        height: 16,\n        rx: 1.6,\n        fill: fills.chromeV,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n  }\n\n  // Two-tone ribbon, black over red, through the vibrator.\n  const ribbon = [\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_BLACK,\n          \"stroke-width\": 5.8,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 0,\n    },\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_RED,\n          \"stroke-width\": 2.6,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 1.5,\n    },\n  ]\n  const vibrator = draw(\"g\", {}, body)\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 3.8],\n    [CHROME, 2],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: \"M-12 2.5V11.5H12V2.5\",\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linejoin\": \"round\",\n        \"stroke-linecap\": \"round\",\n      },\n      vibrator\n    )\n  }\n\n  // Keyboard well.\n  draw(\n    \"path\",\n    {\n      d: \"M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z\",\n      fill: fills.well,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126\",\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.8,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-226 254.6H226\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.6,\n    },\n    body\n  )\n\n  const ry = KEY_R * KEY_TILT\n  const height = 4.5\n  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */\n  const keyAt = (x: number, y: number, label: string, ch: string) => {\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 21,\n        rx: 11,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - 1.5,\n        y: y + 4,\n        width: 3,\n        height: 19,\n        rx: 1,\n        fill: fills.chromeV,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\"ellipse\", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)\n    draw(\n      \"ellipse\",\n      {\n        cx: x,\n        cy: y + 0.3,\n        rx: KEY_R - 2.3,\n        ry: ry - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    draw(\n      \"ellipse\",\n      {\n        cx: x - 3.4,\n        cy: y - 2.6,\n        rx: 4.4,\n        ry: 1.6,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.2,\n      },\n      cap\n    )\n    const text = draw(\n      \"text\",\n      {\n        x,\n        y: y + 0.7,\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\",\n        \"font-size\": 9.6,\n        \"font-weight\": 600,\n        fill: LEGEND,\n        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,\n      },\n      cap\n    )\n    text.textContent = label\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R + 3.6} ${y - 0.4}A${KEY_R - 3.6} ${ry - 2.3} 0 0 1 ${x + KEY_R - 3.6} ${y - 0.4}`,\n        fill: \"none\",\n        stroke: \"#fff\",\n        \"stroke-width\": 0.9,\n        \"stroke-opacity\": 0.32,\n        \"stroke-linecap\": \"round\",\n      },\n      cap\n    )\n    cap.setAttribute(\"data-key\", ch)\n    return cap\n  }\n\n  const keys = new Map<string, Key>()\n  const placed: { x: number; key: Key }[] = []\n  KEY_ROWS.forEach((row, r) => {\n    Array.from(row).forEach((ch, i) => {\n      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n      const key: Key = {\n        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase(), ch),\n        bar: null,\n        v: 0,\n      }\n      keys.set(ch, key)\n      placed.push({ x, key })\n    })\n  })\n\n  /** A pill key (shift, space): same rim and cap, stretched. */\n  const pill = (x: number, y: number, w: number, legend?: string) => {\n    for (const sx of [x - w * 0.3, x + w * 0.3]) {\n      draw(\n        \"rect\",\n        {\n          x: sx - 1.5,\n          y: y + 4,\n          width: 3,\n          height: 17,\n          rx: 1,\n          fill: fills.chromeV,\n        },\n        body\n      )\n    }\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 19,\n        rx: w / 2 + 2,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    const r = ry\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r + height,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.chrome,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2 + 2.3,\n        y: y - r + 1.6,\n        width: w - 4.6,\n        height: r * 2 - 3.2,\n        rx: r - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    if (legend) {\n      draw(\"path\", { d: legend, fill: LEGEND }, cap)\n    }\n    return cap\n  }\n  const y3 = KEY_Y[3]!\n  const shifts = [-1, 1].map((side) => {\n    const x = side * 201\n    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`\n    const cap = pill(x, y3, 30, arrow)\n    cap.setAttribute(\"data-key\", \"shift\")\n    return { cap, bar: null, v: 0 } satisfies Key\n  })\n\n  // Space bar: a chrome bar on two arms.\n  for (const sx of [-80, 80]) {\n    draw(\n      \"rect\",\n      {\n        x: sx - 1.5,\n        y: 247,\n        width: 3,\n        height: 7,\n        fill: fills.chromeV,\n      },\n      body\n    )\n  }\n  const spaceCap = draw(\"g\", { \"data-key\": \" \" }, body)\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 242,\n      width: 224,\n      height: 9,\n      rx: 4.5,\n      fill: \"#4E555B\",\n    },\n    spaceCap\n  )\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 239.5,\n      width: 224,\n      height: 8,\n      rx: 4,\n      fill: fills.chrome,\n    },\n    spaceCap\n  )\n  const space: Key = { cap: spaceCap, bar: null, v: 0 }\n\n  // One typebar per key, fanned left to right in key order.\n  const overlay = draw(\"g\", {}, rig)\n  placed.sort((a, b) => a.x - b.x)\n  const bars = placed.map(({ key }, i) => {\n    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n    const pivot = polar(PIVOT_R, angle)\n    const tip = polar(REST_R, angle)\n    const rest = draw(\"g\", {}, basket)\n    draw(\n      \"line\",\n      {\n        x1: pivot[0],\n        y1: pivot[1],\n        x2: tip[0],\n        y2: tip[1],\n        stroke: i % 2 ? \"#C4C9CE\" : \"#E6E9EC\",\n        \"stroke-width\": 1.25,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const [sx, sy] = polar(REST_R + 3.4, angle)\n    draw(\n      \"line\",\n      {\n        x1: sx,\n        y1: sy,\n        x2: tip[0],\n        y2: tip[1],\n        stroke: \"#7D848A\",\n        \"stroke-width\": 2.6,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const strike = draw(\"g\", { display: \"none\" }, overlay)\n    const line = (stroke: string, width: number) =>\n      draw(\n        \"line\",\n        { stroke, \"stroke-width\": width, \"stroke-linecap\": \"round\" },\n        strike\n      )\n    const edge = line(\"#1C1E21\", 3.9)\n    const core = line(\"#E2E5E8\", 1.8)\n    const slug = line(\"#2A2D31\", 5.6)\n    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }\n    key.bar = bar\n    return bar\n  })\n\n  return {\n    columns,\n    rig,\n    inkFills,\n    carriage,\n    paper,\n    sheet,\n    shadow,\n    ink,\n    lever,\n    leverPivot,\n    knobs,\n    keys,\n    shifts,\n    space,\n    basket,\n    bars,\n    ribbon,\n    vibrator,\n    spools,\n  }\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the\n * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at\n * once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    M = drawMachine(\n      svg,\n      id,\n      columnsOf(),\n      options.color ?? DEFAULT_COLOR,\n      options.label\n    )\n    setInteractive()\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  /** Sheet lean, a spring driven by how fast the carriage moves. */\n  const flex = { angle: 0, vel: 0, x: 0, t: 0 }\n  const placePaper = () => {\n    const y = pose.paper\n    const a = flex.angle\n    M.paper.setAttribute(\n      \"transform\",\n      Math.abs(a) < 0.01\n        ? `translate(0 ${y.toFixed(2)})`\n        : `translate(0 ${FLEX_ANCHOR}) skewX(${a.toFixed(3)}) translate(0 ${(y - FLEX_ANCHOR).toFixed(2)})`\n    )\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    placePaper()\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -SPOOL_X : SPOOL_X\n      spool.setAttribute(\n        \"transform\",\n        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`\n      )\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const top = SPOOL_Y - 24\n    for (const { path, dy } of M.ribbon) {\n      path.setAttribute(\n        \"d\",\n        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`\n      )\n    }\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.edge, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(capsLock ? 1 : 0)\n    setRibbon(0)\n    flex.angle = 0\n    flex.vel = 0\n    placePaper()\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    // The sheet leans against the carriage's motion, then wobbles upright.\n    const dt = flex.t ? Math.min(0.05, (now - flex.t) / 1000) : 0\n    flex.t = now\n    if (dt > 0) {\n      const speed = (pose.carriage - flex.x) / dt\n      const target = clamp(speed * FLEX_GAIN, -FLEX_MAX, FLEX_MAX)\n      flex.vel += (-FLEX_K * (flex.angle - target) - FLEX_C * flex.vel) * dt\n      flex.angle += flex.vel * dt\n      placePaper()\n    }\n    flex.x = pose.carriage\n    const settling = Math.abs(flex.angle) > 0.02 || Math.abs(flex.vel) > 0.05\n    if (queued.length || running.size || settling) {\n      raf = requestAnimationFrame(frame)\n    } else {\n      flex.t = 0\n    }\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" | \"manual\" = \"waiting\"\n  /** Shift lock, from the machine's own shift keys. */\n  let capsLock = false\n  /** Next `src` for strokes typed by hand. */\n  let nextSrc = 0\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  /**\n   * A letter as it lands: a little off its cell, sometimes under-inked\n   * where the ribbon missed, now and then struck twice.\n   */\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 8\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const group = draw(\"g\", {}, M.ink)\n    const glyph = (attrs: Record<string, string | number>) => {\n      const el = draw(\"text\", { x, y, ...attrs }, group)\n      el.textContent = stroke.ch\n      return el\n    }\n    if (jitter <= 0) {\n      glyph({})\n      return group\n    }\n    const dx = (hash(n) - 0.5) * jitter * 1.1\n    const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n    const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n    group.setAttribute(\n      \"transform\",\n      `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n    )\n    const ink = 1 - hash(n + 3) * jitter * 0.38\n    const worn = hash(n + 4) < jitter * 0.6\n    glyph({\n      \"fill-opacity\": ink.toFixed(3),\n      ...(worn\n        ? {\n            fill: M.inkFills[Math.floor(hash(n + 5) * M.inkFills.length)]!,\n          }\n        : {}),\n    })\n    if (hash(n + 6) < jitter * 0.14) {\n      glyph({\n        \"fill-opacity\": (ink * 0.42).toFixed(3),\n        transform: `translate(${(0.45 + hash(n + 7) * 0.3).toFixed(2)} 0.3)`,\n      })\n    }\n    return group\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n    M.shadow.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    if (phase !== \"manual\") cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (\n    stroke: Extract<TypewriterStroke, { kind: \"char\" }>,\n    fixed?: number\n  ) => {\n    const base = 1000 / speedOf()\n    const ms = fixed ?? clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift && !capsLock) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const mark = letter(stroke)\n      mark.setAttribute(\"opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => mark.setAttribute(\"opacity\", v.toFixed(3)),\n        { delay: impact }\n      )\n      // The whole machine takes the blow.\n      play(\n        \"shudder\",\n        110,\n        (v) => {\n          const y = Math.sin(v * Math.PI) * (1 - v) * 1.6\n          M.rig.setAttribute(\n            \"transform\",\n            y > 0.01 ? `translate(0 ${y.toFixed(2)})` : \"\"\n          )\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    capsLock = false\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    if (phase === \"manual\") {\n      sizeSheet()\n      paint()\n      return\n    }\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing by hand                                                    */\n  /* ---------------------------------------------------------------- */\n\n  const interactiveOf = () => options.interactive ?? true\n\n  /** The first key from a person stops the script; the page stays. */\n  const takeOver = () => {\n    if (phase === \"manual\") return\n    cancel()\n    if (phase === \"feeding\" || phase === \"waiting\") {\n      stopMotion()\n      strokes = phase === \"feeding\" ? [] : strokes.slice(0, pos)\n    } else {\n      strokes = strokes.slice(0, pos)\n    }\n    pos = strokes.length\n    cursor = after(strokes[pos - 1])\n    nextSrc = Math.floor(strokes.at(-1)?.src ?? -1) + 1\n    setPhase(\"manual\")\n    sizeSheet()\n    if (!running.size) paint()\n  }\n\n  const typeReturn = () => {\n    takeOver()\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: cursor.line + 1,\n      from: cursor.col,\n      src: nextSrc++,\n    }\n    strokes.push(stroke)\n    pos = strokes.length\n    sizeSheet()\n    if (reduce) {\n      cursor = after(stroke)\n      setPaper(-cursor.line * LH)\n      setCarriage(carriageAt(0))\n      return\n    }\n    carriageReturn(stroke)\n  }\n\n  const typeKey = (ch: string) => {\n    takeOver()\n    // No margin release: at the margin the carriage returns on its own.\n    if (cursor.col >= M.columns) typeReturn()\n    const stroke: Extract<TypewriterStroke, { kind: \"char\" }> = {\n      kind: \"char\",\n      ch,\n      line: cursor.line,\n      col: cursor.col,\n      src: nextSrc++,\n    }\n    strokes.push(stroke)\n    pos = strokes.length\n    if (reduce) {\n      if (ch !== \" \") letter(stroke)\n      cursor = after(stroke)\n      setCarriage(carriageAt(cursor.col))\n      return\n    }\n    strike(stroke, 120)\n  }\n\n  /** Backspace moves the carriage back a space; the next letter overstrikes. */\n  const typeBack = () => {\n    takeOver()\n    if (cursor.col === 0) return\n    cursor = { line: cursor.line, col: cursor.col - 1 }\n    if (reduce) {\n      setCarriage(carriageAt(cursor.col))\n      return\n    }\n    tween(\n      \"carriage\",\n      () => pose.carriage,\n      setCarriage,\n      carriageAt(cursor.col),\n      90,\n      {\n        ease: easeOut,\n      }\n    )\n    soundOn()?.key(true)\n  }\n\n  const setShiftLock = (on: boolean) => {\n    capsLock = on\n    if (reduce) setShift(on ? 1 : 0)\n    else\n      tween(\"shift\", () => pose.shift, setShift, on ? 1 : 0, 130, {\n        ease: easeOut,\n      })\n  }\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (!interactiveOf() || event.ctrlKey || event.metaKey || event.altKey) {\n      return\n    }\n    const { key } = event\n    if (key === \"Enter\") {\n      if (!event.repeat) typeReturn()\n    } else if (key === \"Backspace\") {\n      typeBack()\n    } else if (key.length === 1) {\n      // A real machine doesn't auto-repeat.\n      if (!event.repeat) typeKey(key)\n    } else {\n      return\n    }\n    event.preventDefault()\n  }\n\n  const onPointerDown = (event: PointerEvent) => {\n    if (!interactiveOf() || event.button !== 0) return\n    root.focus({ preventScroll: true })\n    const hit = (event.target as Element | null)?.closest?.(\"[data-key]\")\n    const key = hit?.getAttribute(\"data-key\")\n    if (key == null) return\n    event.preventDefault()\n    if (key === \"shift\") setShiftLock(!capsLock)\n    else if (key === \"return\") typeReturn()\n    else typeKey(capsLock ? key.toUpperCase() : key)\n  }\n\n  /** Focus, keyboard, and clickable parts follow `interactive`. */\n  function setInteractive() {\n    const on = interactiveOf()\n    if (on) {\n      root.tabIndex = 0\n      root.setAttribute(\"role\", \"group\")\n      root.setAttribute(\n        \"aria-label\",\n        \"Typewriter. Focus it and type, or click its keys.\"\n      )\n    } else {\n      root.removeAttribute(\"tabindex\")\n      root.removeAttribute(\"role\")\n      root.removeAttribute(\"aria-label\")\n    }\n    for (const el of svg.querySelectorAll<SVGElement>(\"[data-key]\")) {\n      el.style.cursor = on ? \"pointer\" : \"\"\n    }\n  }\n\n  root.addEventListener(\"keydown\", onKeyDown)\n  svg.addEventListener(\"pointerdown\", onPointerDown)\n\n  /* ---------------------------------------------------------------- */\n  /* Theme                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */\n  const applyTheme = () => {\n    root.style.setProperty(\n      \"--typewriter-sheet\",\n      isDark() ? \"#ECE7DA\" : \"#FBF9F3\"\n    )\n  }\n\n  build()\n  applyTheme()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(applyTheme)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", applyTheme)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (\n        columnsOf() !== M.columns ||\n        options.color !== prev.color ||\n        options.label !== prev.label\n      ) {\n        rebuild()\n      }\n      if (options.interactive !== prev.interactive) setInteractive()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", applyTheme)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      root.removeEventListener(\"keydown\", onKeyDown)\n      svg.removeEventListener(\"pointerdown\", onPointerDown)\n      for (const name of [\"tabindex\", \"role\", \"aria-label\"]) {\n        root.removeAttribute(name)\n      }\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-sheet\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\n</script>\n\n<script lang=\"ts\">\n  import { onMount } from \"svelte\"\n\n  function cn(...parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(\" \")\n  }\n\n  interface Props extends TypewriterOptions {\n    class?: string\n  }\n\n  let {\n    class: className = \"\",\n    text = DEFAULT_TEXT,\n    speed = DEFAULT_SPEED,\n    humanize = true,\n    loop = true,\n    hold = DEFAULT_HOLD,\n    startDelay = DEFAULT_START_DELAY,\n    color = DEFAULT_COLOR,\n    columns = DEFAULT_COLUMNS,\n    jitter = DEFAULT_JITTER,\n    sound = false,\n    interactive = true,\n    label,\n    onDone,\n  }: Props = $props()\n\n  let root: HTMLDivElement | undefined = $state()\n  let instance: TypewriterInstance | null = null\n\n  onMount(() => {\n    if (!root) return\n    instance = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      interactive,\n      label,\n      onDone,\n    })\n    return () => {\n      instance?.destroy()\n      instance = null\n    }\n  })\n\n  $effect(() => {\n    instance?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      interactive,\n      label,\n      onDone,\n    })\n  })\n</script>\n\n<div\n  bind:this={root}\n  data-slot=\"typewriter\"\n  class={cn(\n    \"relative size-full overflow-hidden bg-background font-mono text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset\",\n    className\n  )}\n></div>\n",
       "type": "registry:file",
       "target": "src/lib/components/ui/typewriter.svelte"
     }
diff --git a/public/r/typewriter.json b/public/r/typewriter.json
index 314da0a..1e0f604 100644
--- a/public/r/typewriter.json
+++ b/public/r/typewriter.json
@@ -2,11 +2,11 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "typewriter",
   "title": "Typewriter",
-  "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
+  "description": "A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.",
   "files": [
     {
       "path": "registry/typewriter/typewriter.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Enamel of the body and paper rest — a vintage mint. */\nexport const DEFAULT_COLOR = \"#8EC3B5\"\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Body enamel, any CSS color. Default `#8EC3B5`. */\n  color?: string\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space, seen from the front and\n// a little above. The print point sits at the origin: the line being typed\n// has its baseline on y = 0, and the carriage slides so the next column\n// always lands at x = 0. Light comes from the upper left.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 314\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 42\nconst PIVOT_R = 56\nconst REST_R = 27\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 11\nconst SPOOL_Y = 80\nconst SPOOL_X = 150\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [136, 166, 196, 226]\nconst KEY_PITCH = 35\nconst KEY_R = 12.5\n/** Key tops are circles seen from above: this squashes them. */\nconst KEY_TILT = 0.64\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst INK = \"#24221F\"\nconst LEGEND = \"#EFE7D1\"\nconst RIBBON_BLACK = \"#16171A\"\nconst RIBBON_RED = \"#C4342B\"\nconst CHROME = \"#D3D8DC\"\nconst CHROME_EDGE = \"#5E656C\"\nconst SHEET = \"var(--typewriter-sheet, #FBF9F3)\"\n\n/** An SVG element. A `fill` of `\"sheet\"` paints in the paper tone. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key === \"fill\" && value === \"sheet\") node.style.fill = SHEET\n    else node.setAttribute(key, String(value))\n  }\n  parent?.append(node)\n  return node\n}\n\ntype Rgb = [number, number, number]\n\nlet swatch: CanvasRenderingContext2D | null = null\n\n/** Any CSS color as RGB, via a one-pixel canvas. */\nfunction rgbOf(color: string, fallback: Rgb): Rgb {\n  swatch ??= document\n    .createElement(\"canvas\")\n    .getContext(\"2d\", { willReadFrequently: true })\n  if (!swatch) return fallback\n  swatch.clearRect(0, 0, 1, 1)\n  swatch.fillStyle = `rgb(${fallback.join(\" \")})`\n  swatch.fillStyle = color\n  swatch.fillRect(0, 0, 1, 1)\n  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data\n  return [r, g, b]\n}\n\nfunction mix(a: Rgb, b: Rgb, t: number) {\n  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))\n  return `rgb(${c.join(\" \")})`\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGGElement\n  strike: SVGGElement\n  /** Dark edge under the bar, so it reads over the paper. */\n  edge: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  shadow: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: { path: SVGPathElement; dy: number }[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\n/**\n * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,\n * platen, knobs, return lever, sheet, scale) and the body (enamel shell,\n * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;\n * its lights and shadows are mixed from it.\n */\nfunction drawMachine(\n  svg: SVGSVGElement,\n  id: string,\n  columns: number,\n  color: string\n): Machine {\n  const span = columns * CW\n  const platenL = -PAD - 22\n  const platenR = span + PAD + 22\n  const knobW = 15\n  const leverX = platenL - knobW - 4\n  // Room for the carriage at both ends of its travel, and the body.\n  const left = leverX - 56 - (span + CW / 2)\n  const right = platenR + knobW - CW / 2\n  const half = Math.ceil(Math.max(-left, right, 262) + 14)\n  svg.replaceChildren()\n  svg.setAttribute(\n    \"viewBox\",\n    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n  )\n\n  const base = rgbOf(color, [142, 195, 181])\n  const white: Rgb = [255, 255, 255]\n  const black: Rgb = [0, 0, 0]\n  const enamel = {\n    shine: mix(base, white, 0.62),\n    hi: mix(base, white, 0.34),\n    light: mix(base, white, 0.14),\n    mid: mix(base, base, 0),\n    low: mix(base, black, 0.16),\n    deep: mix(base, black, 0.34),\n    edge: mix(base, black, 0.55),\n  }\n\n  /* Gradients. */\n  const defs = draw(\"defs\", {}, svg)\n  const gradient = (\n    name: string,\n    kind: \"linearGradient\" | \"radialGradient\",\n    attrs: Record<string, string | number>,\n    stops: [number, string, number?][]\n  ) => {\n    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)\n    for (const [offset, stopColor, alpha = 1] of stops) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": stopColor, \"stop-opacity\": alpha },\n        el\n      )\n    }\n    return `url(#${id}-${name})`\n  }\n  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }\n  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }\n  const fills = {\n    body: gradient(\"body\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.18, enamel.light],\n      [0.62, enamel.mid],\n      [1, enamel.low],\n    ]),\n    sides: gradient(\"sides\", \"linearGradient\", across, [\n      [0, \"#000\", 0.26],\n      [0.1, \"#000\", 0.04],\n      [0.5, \"#fff\", 0.05],\n      [0.9, \"#000\", 0.04],\n      [1, \"#000\", 0.3],\n    ]),\n    front: gradient(\"front\", \"linearGradient\", down, [\n      [0, enamel.low],\n      [1, enamel.deep],\n    ]),\n    rest: gradient(\"rest\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.5, enamel.light],\n      [1, enamel.low],\n    ]),\n    chrome: gradient(\"chrome\", \"linearGradient\", down, [\n      [0, \"#FDFEFE\"],\n      [0.38, \"#D2D7DB\"],\n      [0.52, \"#8B9298\"],\n      [0.7, \"#C3C8CC\"],\n      [1, \"#EEF0F2\"],\n    ]),\n    chromeV: gradient(\"chrome-v\", \"linearGradient\", across, [\n      [0, \"#8B9298\"],\n      [0.35, \"#F4F6F7\"],\n      [0.6, \"#BFC4C9\"],\n      [1, \"#737A80\"],\n    ]),\n    rubber: gradient(\"rubber\", \"linearGradient\", down, [\n      [0, \"#55595E\"],\n      [0.16, \"#2A2D31\"],\n      [0.55, \"#0D0E10\"],\n      [0.85, \"#050607\"],\n      [1, \"#1E2124\"],\n    ]),\n    bakelite: gradient(\"bakelite\", \"linearGradient\", down, [\n      [0, \"#62666C\"],\n      [0.2, \"#2C2F33\"],\n      [0.6, \"#111214\"],\n      [1, \"#2A2D31\"],\n    ]),\n    capTop: gradient(\n      \"cap-top\",\n      \"radialGradient\",\n      { cx: 0.38, cy: 0.3, r: 0.75 },\n      [\n        [0, \"#575C63\"],\n        [0.55, \"#202326\"],\n        [1, \"#0C0D0F\"],\n      ]\n    ),\n    capSide: gradient(\"cap-side\", \"linearGradient\", down, [\n      [0, \"#9AA1A7\"],\n      [0.5, \"#4B5157\"],\n      [1, \"#2A2E32\"],\n    ]),\n    well: gradient(\"well\", \"linearGradient\", down, [\n      [0, \"#08090A\"],\n      [0.18, \"#151719\"],\n      [1, \"#24272A\"],\n    ]),\n    recess: gradient(\"recess\", \"radialGradient\", { cx: 0.5, cy: 0, r: 1 }, [\n      [0, \"#030304\"],\n      [0.7, \"#141618\"],\n      [1, \"#24272A\"],\n    ]),\n    spoolRibbon: gradient(\n      \"spool-ribbon\",\n      \"radialGradient\",\n      { cx: 0.42, cy: 0.38, r: 0.7 },\n      [\n        [0, \"#3B3E43\"],\n        [0.7, \"#151618\"],\n        [1, \"#060607\"],\n      ]\n    ),\n    flange: gradient(\n      \"flange\",\n      \"radialGradient\",\n      { cx: 0.36, cy: 0.3, r: 0.85 },\n      [\n        [0, \"#FFFFFF\"],\n        [0.45, \"#CDD2D6\"],\n        [1, \"#7D848A\"],\n      ]\n    ),\n    ground: gradient(\"ground\", \"radialGradient\", { cx: 0.5, cy: 0.5, r: 0.5 }, [\n      [0, \"#000\", 0.34],\n      [0.6, \"#000\", 0.12],\n      [1, \"#000\", 0],\n    ]),\n    keyShadow: gradient(\n      \"key-shadow\",\n      \"radialGradient\",\n      { cx: 0.5, cy: 0.5, r: 0.5 },\n      [\n        [0, \"#000\", 0.7],\n        [1, \"#000\", 0],\n      ]\n    ),\n    curl: gradient(\n      \"curl\",\n      \"linearGradient\",\n      { gradientUnits: \"userSpaceOnUse\", x1: 0, y1: 12, x2: 0, y2: 41 },\n      [\n        [0, \"#3A2E1C\", 0],\n        [0.55, \"#3A2E1C\", 0.1],\n        [1, \"#3A2E1C\", 0.34],\n      ]\n    ),\n  }\n\n  // The sheet fades out at the top of the frame and tucks behind the\n  // platen at the bottom.\n  const fade = gradient(\n    \"fade-g\",\n    \"linearGradient\",\n    {\n      gradientUnits: \"userSpaceOnUse\",\n      x1: 0,\n      x2: 0,\n      y1: VIEW_TOP,\n      y2: 41,\n    },\n    [\n      [0, \"#fff\", 0],\n      [84 / (41 - VIEW_TOP), \"#fff\", 1],\n      [0.998, \"#fff\", 1],\n      [1, \"#fff\", 0],\n    ]\n  )\n  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }\n  const mask = draw(\n    \"mask\",\n    { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n    defs\n  )\n  draw(\"rect\", { ...box, fill: fade }, mask)\n\n  // Ground shadow.\n  draw(\"ellipse\", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)\n\n  /* ---------------- Carriage ---------------- */\n\n  const carriage = draw(\"g\", {}, svg)\n  // Rail it rides on.\n  draw(\n    \"rect\",\n    {\n      x: platenL - knobW - 8,\n      y: 40,\n      width: platenR - platenL + knobW * 2 + 16,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  // Paper rest behind the sheet.\n  const tL = -PAD - 16\n  const tR = span + PAD + 16\n  draw(\n    \"path\",\n    {\n      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,\n      fill: fills.rest,\n    },\n    carriage\n  )\n  draw(\n    \"path\",\n    {\n      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.4,\n      \"stroke-opacity\": 0.85,\n    },\n    carriage\n  )\n  // Platen, with chrome collars at its ends.\n  draw(\n    \"rect\",\n    {\n      x: platenL,\n      y: 6,\n      width: platenR - platenL,\n      height: 34,\n      rx: 4,\n      fill: fills.rubber,\n    },\n    carriage\n  )\n  draw(\n    \"rect\",\n    {\n      x: platenL + 4,\n      y: 10.5,\n      width: platenR - platenL - 8,\n      height: 1.6,\n      rx: 0.8,\n      fill: \"#fff\",\n      \"fill-opacity\": 0.22,\n    },\n    carriage\n  )\n  for (const x of [platenL - 4, platenR]) {\n    draw(\n      \"rect\",\n      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },\n      carriage\n    )\n  }\n  // Knobs: bakelite with knurling that turns with the platen.\n  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {\n    draw(\n      \"rect\",\n      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },\n      carriage\n    )\n    const lines = Array.from({ length: RIDGES }, () =>\n      draw(\n        \"line\",\n        {\n          x1: x + 2.5,\n          x2: x + knobW - 2.5,\n          stroke: \"#B8BEC4\",\n          \"stroke-width\": 1,\n          \"stroke-linecap\": \"round\",\n        },\n        carriage\n      )\n    )\n    draw(\n      \"rect\",\n      {\n        x: x + 2,\n        y: 3,\n        width: knobW - 4,\n        height: 6,\n        rx: 3,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.12,\n      },\n      carriage\n    )\n    return { x, lines }\n  })\n  // Carriage return lever: chrome arm, bakelite grip.\n  const lever = draw(\"g\", {}, carriage)\n  const leverPivot: [number, number] = [leverX, 30]\n  draw(\n    \"rect\",\n    {\n      x: leverX - 5,\n      y: 20,\n      width: 10,\n      height: 22,\n      rx: 3,\n      fill: fills.chromeV,\n    },\n    lever\n  )\n  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 6.4],\n    [CHROME, 4],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: arm,\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n  }\n  draw(\n    \"path\",\n    {\n      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,\n      fill: \"none\",\n      stroke: \"#fff\",\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.8,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    lever\n  )\n  draw(\n    \"rect\",\n    {\n      x: leverX - 56,\n      y: -25,\n      width: 28,\n      height: 11,\n      rx: 5.5,\n      fill: fills.bakelite,\n      transform: `rotate(-24 ${leverX - 42} -19.5)`,\n    },\n    lever\n  )\n\n  // The sheet, masked so it fades at the top and wraps under the platen.\n  const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n  const paper = draw(\"g\", {}, wrap)\n  const shadow = draw(\n    \"rect\",\n    {\n      x: -PAD + 3,\n      y: -TOP_MARGIN + 3,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"#000\",\n      \"fill-opacity\": 0.12,\n    },\n    paper\n  )\n  const sheet = draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: -TOP_MARGIN,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"sheet\",\n      stroke: \"#000\",\n      \"stroke-opacity\": 0.07,\n      \"stroke-width\": 0.8,\n    },\n    paper\n  )\n  const ink = draw(\n    \"g\",\n    { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: INK },\n    paper\n  )\n  // Where the sheet curls round the platen.\n  draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: 12,\n      width: span + PAD * 2,\n      height: 30,\n      fill: fills.curl,\n    },\n    wrap\n  )\n\n  // Paper scale under the print line.\n  draw(\n    \"rect\",\n    {\n      x: -PAD + 2,\n      y: 8.5,\n      width: span + PAD * 2 - 4,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  let ticks = \"\"\n  for (let c = 0; c <= columns; c++) {\n    const x = c * CW\n    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`\n  }\n  draw(\n    \"path\",\n    {\n      d: ticks,\n      stroke: \"#3E444A\",\n      \"stroke-width\": 0.7,\n      fill: \"none\",\n    },\n    carriage\n  )\n\n  /* ---------------- Body ---------------- */\n\n  const body = draw(\"g\", {}, svg)\n  const shell =\n    \"M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z\"\n  draw(\"path\", { d: shell, fill: fills.body }, body)\n  draw(\"path\", { d: shell, fill: fills.sides }, body)\n  // Front face, below the top surfaces, with a chrome trim.\n  draw(\n    \"path\",\n    {\n      d: \"M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z\",\n      fill: fills.front,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-240 264.5H240\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.7,\n    },\n    body\n  )\n  draw(\n    \"rect\",\n    {\n      x: -236,\n      y: 274,\n      width: 472,\n      height: 3,\n      rx: 1.5,\n      fill: fills.chrome,\n    },\n    body\n  )\n  for (const x of [-228, 188]) {\n    draw(\n      \"rect\",\n      { x, y: 293, width: 40, height: 10, rx: 4, fill: \"#151618\" },\n      body\n    )\n  }\n  const sheen = gradient(\"sheen\", \"linearGradient\", across, [\n    [0, \"#fff\", 0.34],\n    [0.55, \"#fff\", 0.1],\n    [1, \"#fff\", 0],\n  ])\n  draw(\n    \"path\",\n    { d: \"M-210 48H-96L-150 110H-224Q-222 82 -210 48Z\", fill: sheen },\n    body\n  )\n  // Glossy rim along the top of the shell.\n  draw(\n    \"path\",\n    {\n      d: \"M-194 43.4H194\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.6,\n      \"stroke-linecap\": \"round\",\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-208 56Q-212 70 -216 96\",\n      stroke: enamel.shine,\n      \"stroke-width\": 2.4,\n      \"stroke-linecap\": \"round\",\n      \"stroke-opacity\": 0.55,\n      fill: \"none\",\n    },\n    body\n  )\n\n  // Typebar basket, sunk in the deck.\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,\n      fill: fills.recess,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.75,\n    },\n    body\n  )\n  const basket = draw(\"g\", {}, body)\n  const [ax, ay] = polar(62, -SPREAD - 0.12)\n  const [bx, by] = polar(62, SPREAD + 0.12)\n  const [cx, cy] = polar(53, SPREAD + 0.12)\n  const [dx, dy] = polar(53, -SPREAD - 0.12)\n  draw(\n    \"path\",\n    {\n      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,\n      fill: fills.chrome,\n    },\n    basket\n  )\n\n  // Ribbon spools: black ribbon wound under a turning chrome flange.\n  const spools = [-SPOOL_X, SPOOL_X].map((x) => {\n    draw(\n      \"circle\",\n      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: \"#000\", \"fill-opacity\": 0.22 },\n      body\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)\n    const turn = draw(\"g\", {}, body)\n    let windows = \"\"\n    for (let i = 0; i < 3; i++) {\n      const a0 = (i / 3) * TAU + 0.25\n      const a1 = a0 + 1.35\n      const p = (r: number, a: number) =>\n        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`\n      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`\n    }\n    draw(\n      \"path\",\n      {\n        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,\n        fill: fills.flange,\n        \"fill-rule\": \"evenodd\",\n      },\n      turn\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 1.6, fill: \"#2A2D31\" }, turn)\n    return turn\n  })\n\n  // The type guide either side of the print point.\n  for (const x of [-23, 17]) {\n    draw(\n      \"rect\",\n      {\n        x,\n        y: 0,\n        width: 6,\n        height: 16,\n        rx: 1.6,\n        fill: fills.chromeV,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n  }\n\n  // Two-tone ribbon, black over red, through the vibrator.\n  const ribbon = [\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_BLACK,\n          \"stroke-width\": 5.8,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 0,\n    },\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_RED,\n          \"stroke-width\": 2.6,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 1.5,\n    },\n  ]\n  const vibrator = draw(\"g\", {}, body)\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 3.8],\n    [CHROME, 2],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: \"M-12 2.5V11.5H12V2.5\",\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linejoin\": \"round\",\n        \"stroke-linecap\": \"round\",\n      },\n      vibrator\n    )\n  }\n\n  // Keyboard well.\n  draw(\n    \"path\",\n    {\n      d: \"M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z\",\n      fill: fills.well,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126\",\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.8,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-226 254.6H226\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.6,\n    },\n    body\n  )\n\n  const ry = KEY_R * KEY_TILT\n  const height = 4.5\n  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */\n  const keyAt = (x: number, y: number, label: string) => {\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 21,\n        rx: 11,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - 1.5,\n        y: y + 4,\n        width: 3,\n        height: 19,\n        rx: 1,\n        fill: fills.chromeV,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\"ellipse\", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)\n    draw(\n      \"ellipse\",\n      {\n        cx: x,\n        cy: y + 0.3,\n        rx: KEY_R - 2.3,\n        ry: ry - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    draw(\n      \"ellipse\",\n      {\n        cx: x - 3.4,\n        cy: y - 2.6,\n        rx: 4.4,\n        ry: 1.6,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.2,\n      },\n      cap\n    )\n    const text = draw(\n      \"text\",\n      {\n        x,\n        y: y + 0.7,\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\",\n        \"font-size\": 9.6,\n        \"font-weight\": 600,\n        fill: LEGEND,\n        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,\n      },\n      cap\n    )\n    text.textContent = label\n    return cap\n  }\n\n  const keys = new Map<string, Key>()\n  const placed: { x: number; key: Key }[] = []\n  KEY_ROWS.forEach((row, r) => {\n    Array.from(row).forEach((ch, i) => {\n      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n      const key: Key = {\n        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),\n        bar: null,\n        v: 0,\n      }\n      keys.set(ch, key)\n      placed.push({ x, key })\n    })\n  })\n\n  /** A pill key (shift, space): same rim and cap, stretched. */\n  const pill = (x: number, y: number, w: number, legend?: string) => {\n    for (const sx of [x - w * 0.3, x + w * 0.3]) {\n      draw(\n        \"rect\",\n        {\n          x: sx - 1.5,\n          y: y + 4,\n          width: 3,\n          height: 17,\n          rx: 1,\n          fill: fills.chromeV,\n        },\n        body\n      )\n    }\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 19,\n        rx: w / 2 + 2,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    const r = ry\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r + height,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.chrome,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2 + 2.3,\n        y: y - r + 1.6,\n        width: w - 4.6,\n        height: r * 2 - 3.2,\n        rx: r - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    if (legend) {\n      draw(\"path\", { d: legend, fill: LEGEND }, cap)\n    }\n    return cap\n  }\n  const y3 = KEY_Y[3]!\n  const shifts = [-1, 1].map((side) => {\n    const x = side * 201\n    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`\n    return { cap: pill(x, y3, 30, arrow), bar: null, v: 0 } satisfies Key\n  })\n\n  // Space bar: a chrome bar on two arms.\n  for (const sx of [-80, 80]) {\n    draw(\n      \"rect\",\n      {\n        x: sx - 1.5,\n        y: 247,\n        width: 3,\n        height: 7,\n        fill: fills.chromeV,\n      },\n      body\n    )\n  }\n  const spaceCap = draw(\"g\", {}, body)\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 242,\n      width: 224,\n      height: 9,\n      rx: 4.5,\n      fill: \"#4E555B\",\n    },\n    spaceCap\n  )\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 239.5,\n      width: 224,\n      height: 8,\n      rx: 4,\n      fill: fills.chrome,\n    },\n    spaceCap\n  )\n  const space: Key = { cap: spaceCap, bar: null, v: 0 }\n\n  // One typebar per key, fanned left to right in key order.\n  const overlay = draw(\"g\", {}, svg)\n  placed.sort((a, b) => a.x - b.x)\n  const bars = placed.map(({ key }, i) => {\n    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n    const pivot = polar(PIVOT_R, angle)\n    const tip = polar(REST_R, angle)\n    const rest = draw(\"g\", {}, basket)\n    draw(\n      \"line\",\n      {\n        x1: pivot[0],\n        y1: pivot[1],\n        x2: tip[0],\n        y2: tip[1],\n        stroke: i % 2 ? \"#C4C9CE\" : \"#E6E9EC\",\n        \"stroke-width\": 1.25,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const [sx, sy] = polar(REST_R + 3.4, angle)\n    draw(\n      \"line\",\n      {\n        x1: sx,\n        y1: sy,\n        x2: tip[0],\n        y2: tip[1],\n        stroke: \"#7D848A\",\n        \"stroke-width\": 2.6,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const strike = draw(\"g\", { display: \"none\" }, overlay)\n    const line = (stroke: string, width: number) =>\n      draw(\n        \"line\",\n        { stroke, \"stroke-width\": width, \"stroke-linecap\": \"round\" },\n        strike\n      )\n    const edge = line(\"#1C1E21\", 3.9)\n    const core = line(\"#E2E5E8\", 1.8)\n    const slug = line(\"#2A2D31\", 5.6)\n    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }\n    key.bar = bar\n    return bar\n  })\n\n  return {\n    columns,\n    carriage,\n    paper,\n    sheet,\n    shadow,\n    ink,\n    lever,\n    leverPivot,\n    knobs,\n    keys,\n    shifts,\n    space,\n    basket,\n    bars,\n    ribbon,\n    vibrator,\n    spools,\n  }\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the\n * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at\n * once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    M = drawMachine(svg, id, columnsOf(), options.color ?? DEFAULT_COLOR)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    M.paper.setAttribute(\"transform\", `translate(0 ${y.toFixed(2)})`)\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -SPOOL_X : SPOOL_X\n      spool.setAttribute(\n        \"transform\",\n        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`\n      )\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const top = SPOOL_Y - 24\n    for (const { path, dy } of M.ribbon) {\n      path.setAttribute(\n        \"d\",\n        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`\n      )\n    }\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.edge, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(0)\n    setRibbon(0)\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    if (queued.length || running.size) raf = requestAnimationFrame(frame)\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" = \"waiting\"\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 4\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const el = draw(\"text\", { x, y }, M.ink)\n    el.textContent = stroke.ch\n    let ink = 1\n    if (jitter > 0) {\n      const dx = (hash(n) - 0.5) * jitter * 1.1\n      const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n      el.setAttribute(\n        \"transform\",\n        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n      )\n      ink = 1 - hash(n + 3) * jitter * 0.42\n    }\n    el.setAttribute(\"fill-opacity\", ink.toFixed(3))\n    return { el, ink }\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n    M.shadow.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const base = 1000 / speedOf()\n    const ms = clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const { el, ink } = letter(stroke)\n      el.setAttribute(\"fill-opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => {\n          el.setAttribute(\"fill-opacity\", (v * ink).toFixed(3))\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Theme                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */\n  const applyTheme = () => {\n    root.style.setProperty(\n      \"--typewriter-sheet\",\n      isDark() ? \"#ECE7DA\" : \"#FBF9F3\"\n    )\n  }\n\n  build()\n  applyTheme()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(applyTheme)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", applyTheme)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (columnsOf() !== M.columns || options.color !== prev.color) rebuild()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", applyTheme)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-sheet\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter that types — each letter presses its key, swings that key's\n * typebar up to strike the ribbon, and steps the carriage left. At the\n * margin the lever kicks, the platen turns up a line, and the carriage\n * slides home. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  color = DEFAULT_COLOR,\n  columns = DEFAULT_COLUMNS,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n    })\n  }, [\n    text,\n    speed,\n    humanize,\n    loop,\n    hold,\n    startDelay,\n    color,\n    columns,\n    jitter,\n    sound,\n  ])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background font-mono text-foreground\",\n        className\n      )}\n    />\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport const DEFAULT_TEXT =\n  \"Dear reader,\\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\\n\\nYours, 23rd\"\n\n/** Enamel of the body and paper rest — a vintage mint. */\nexport const DEFAULT_COLOR = \"#8EC3B5\"\n/** Characters per second. */\nexport const DEFAULT_SPEED = 12\n/** Line length on the sheet, in characters. */\nexport const DEFAULT_COLUMNS = 32\n/** Pause on the finished page before it feeds out and starts over, in ms. */\nexport const DEFAULT_HOLD = 2600\n/** Wait before the first keystroke, in ms. */\nexport const DEFAULT_START_DELAY = 600\n/** Per-letter baseline, tilt, and ink wobble (0–1). */\nexport const DEFAULT_JITTER = 0.3\n\n/** Bell rings this many characters before the right margin. */\nconst BELL_CELLS = 6\n\nexport type TypewriterOptions = {\n  /** What gets typed. `\\n` starts a new line; long lines wrap at words. */\n  text?: string\n  /** Characters per second. Default `12`. */\n  speed?: number\n  /** Uneven keystrokes, with longer rests after punctuation. Default `true`. */\n  humanize?: boolean\n  /** Pull the sheet out and type it again after `hold`. Default `true`. */\n  loop?: boolean\n  /** Pause on the finished page before looping, in ms. Default `2600`. */\n  hold?: number\n  /** Wait before the first keystroke, in ms. Default `600`. */\n  startDelay?: number\n  /** Body enamel, any CSS color. Default `#8EC3B5`. */\n  color?: string\n  /** Line length on the sheet, in characters (16–60). Default `32`. */\n  columns?: number\n  /** Per-letter baseline, tilt, and ink wobble, 0–1. Default `0.3`. */\n  jitter?: number\n  /** Synthesized key clicks, bell, and return. Default `false`. */\n  sound?: boolean\n  /**\n   * Click the machine and type on it: your keyboard, or its keys, space\n   * bar, shift lock, and return lever. Taking over stops the script.\n   * Default `true`.\n   */\n  interactive?: boolean\n  /** Text on a chrome nameplate on the front. Omit for none. */\n  label?: string\n  /** Called each time the last character lands. */\n  onDone?: () => void\n}\n\nexport type TypewriterInstance = {\n  setOptions: (options: Partial<TypewriterOptions>) => void\n  /** Feed a fresh sheet and type from the first character. */\n  restart: () => void\n  destroy: () => void\n}\n\nexport type TypewriterStroke =\n  | { kind: \"char\"; ch: string; line: number; col: number; src: number }\n  | { kind: \"return\"; line: number; from: number; src: number }\n\n/**\n * The keystrokes that type `text` into `columns`-wide lines: characters\n * with their cell, and carriage returns. Words wrap whole unless a word is\n * wider than the line. `src` orders strokes against the source text, so a\n * relayout can resume at the same point.\n */\nexport function layoutTypewriter(\n  text: string,\n  columns: number\n): TypewriterStroke[] {\n  const width = Math.max(1, Math.floor(columns))\n  const source = Array.from(text.replace(/\\r\\n?/g, \"\\n\").replace(/\\t/g, \"  \"))\n  const strokes: TypewriterStroke[] = []\n  let line = 0\n  let col = 0\n  /** Wrap returns wait for the character after them. */\n  let pendingWraps: TypewriterStroke[] = []\n\n  const feed = (src: number) => {\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: line + 1,\n      from: col,\n      src,\n    }\n    strokes.push(stroke)\n    line += 1\n    col = 0\n    return stroke\n  }\n  const wrap = () => pendingWraps.push(feed(Infinity))\n  const type = (ch: string, src: number) => {\n    for (const stroke of pendingWraps) stroke.src = src - 0.5\n    pendingWraps = []\n    strokes.push({ kind: \"char\", ch, line, col, src })\n    col += 1\n  }\n\n  let i = 0\n  while (i < source.length) {\n    const ch = source[i]!\n    if (ch === \"\\n\") {\n      for (const stroke of pendingWraps) stroke.src = i - 0.5\n      pendingWraps = []\n      feed(i)\n      i += 1\n      continue\n    }\n    if (/\\s/.test(ch)) {\n      // Spaces past the margin fall off the page.\n      if (col < width) type(\" \", i)\n      i += 1\n      continue\n    }\n    let end = i\n    while (end < source.length && !/\\s/.test(source[end]!)) end += 1\n    const length = end - i\n    if (col > 0 && col + length > width) wrap()\n    for (let k = i; k < end; k++) {\n      if (col >= width) wrap()\n      type(source[k]!, k)\n    }\n    i = end\n  }\n  return strokes\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction numberOr(value: unknown, fallback: number, min: number, max: number) {\n  if (typeof value !== \"number\" || !Number.isFinite(value)) return fallback\n  return clamp(value, min, max)\n}\n\n/** Stable 0–1 noise per integer, so a letter keeps its wobble on relayout. */\nfunction hash(n: number) {\n  let x = Math.imul(n + 1, 0x27d4eb2d) ^ 0x165667b1\n  x = Math.imul(x ^ (x >>> 15), 0x85ebca6b)\n  x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35)\n  return ((x ^ (x >>> 16)) >>> 0) / 4294967296\n}\n\nconst SVG_NS = \"http://www.w3.org/2000/svg\"\n\ntype Sound = {\n  key: (space: boolean) => void\n  bell: () => void\n  carriage: (ms: number) => void\n  close: () => void\n}\n\n/** Key clicks, the margin bell, and the return ratchet, all synthesized. */\nfunction createSound(): Sound | null {\n  const Ctx =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext })\n      .webkitAudioContext\n  if (!Ctx) return null\n  let audio: AudioContext | null = null\n  let out: GainNode | null = null\n  let noise: AudioBuffer | null = null\n\n  const ready = () => {\n    if (!audio) {\n      audio = new Ctx()\n      out = audio.createGain()\n      out.gain.value = 0.55\n      out.connect(audio.destination)\n      noise = audio.createBuffer(\n        1,\n        Math.floor(audio.sampleRate * 0.4),\n        audio.sampleRate\n      )\n      const data = noise.getChannelData(0)\n      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1\n    }\n    if (audio.state === \"suspended\") void audio.resume().catch(() => {})\n    return audio.state === \"running\" ? audio : null\n  }\n\n  const burst = (\n    a: AudioContext,\n    at: number,\n    freq: number,\n    q: number,\n    peak: number,\n    decay: number\n  ) => {\n    const src = a.createBufferSource()\n    src.buffer = noise\n    const band = a.createBiquadFilter()\n    band.type = \"bandpass\"\n    band.frequency.value = freq\n    band.Q.value = q\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.002)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + decay)\n    src.connect(band).connect(gain).connect(out!)\n    src.start(at, Math.random() * 0.2)\n    src.stop(at + decay + 0.02)\n  }\n\n  const thump = (a: AudioContext, at: number, freq: number, peak: number) => {\n    const osc = a.createOscillator()\n    osc.frequency.setValueAtTime(freq, at)\n    osc.frequency.exponentialRampToValueAtTime(freq * 0.5, at + 0.05)\n    const gain = a.createGain()\n    gain.gain.setValueAtTime(0.0001, at)\n    gain.gain.exponentialRampToValueAtTime(peak, at + 0.003)\n    gain.gain.exponentialRampToValueAtTime(0.0001, at + 0.06)\n    osc.connect(gain).connect(out!)\n    osc.start(at)\n    osc.stop(at + 0.08)\n  }\n\n  return {\n    key(space) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      if (space) {\n        burst(a, at, 900, 0.9, 0.22, 0.05)\n        thump(a, at, 110, 0.3)\n      } else {\n        burst(a, at, 2600 + Math.random() * 900, 1.3, 0.34, 0.035)\n        thump(a, at, 150 + Math.random() * 30, 0.2)\n      }\n    },\n    bell() {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      for (const [freq, peak] of [\n        [2093, 0.16],\n        [5776, 0.05],\n      ] as const) {\n        const osc = a.createOscillator()\n        osc.frequency.value = freq\n        const gain = a.createGain()\n        gain.gain.setValueAtTime(0.0001, at)\n        gain.gain.exponentialRampToValueAtTime(peak, at + 0.004)\n        gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.1)\n        osc.connect(gain).connect(out!)\n        osc.start(at)\n        osc.stop(at + 1.2)\n      }\n    },\n    carriage(ms) {\n      const a = ready()\n      if (!a) return\n      const at = a.currentTime\n      const seconds = ms / 1000\n      // Ratchet clicks as the line feeds, then the glide home.\n      for (let i = 0; i < 3; i++) burst(a, at + i * 0.028, 1800, 2, 0.16, 0.02)\n      const src = a.createBufferSource()\n      src.buffer = noise\n      src.loop = true\n      const low = a.createBiquadFilter()\n      low.type = \"bandpass\"\n      low.Q.value = 0.8\n      low.frequency.setValueAtTime(700, at)\n      low.frequency.linearRampToValueAtTime(1400, at + seconds)\n      const gain = a.createGain()\n      gain.gain.setValueAtTime(0.0001, at)\n      gain.gain.exponentialRampToValueAtTime(0.07, at + seconds * 0.3)\n      gain.gain.exponentialRampToValueAtTime(0.0001, at + seconds)\n      src.connect(low).connect(gain).connect(out!)\n      src.start(at)\n      src.stop(at + seconds + 0.02)\n      thump(a, at + seconds, 120, 0.28)\n    },\n    close() {\n      void audio?.close().catch(() => {})\n      audio = null\n    },\n  }\n}\n\nconst TAU = Math.PI * 2\n\n// The machine is drawn in one SVG coordinate space, seen from the front and\n// a little above. The print point sits at the origin: the line being typed\n// has its baseline on y = 0, and the carriage slides so the next column\n// always lands at x = 0. Light comes from the upper left.\n\n/** Character pitch on the sheet. */\nconst CW = 10\n/** Line pitch on the sheet. */\nconst LH = 22\nconst FONT = 16.5\n/** Sheet margin either side of the text. */\nconst PAD = 30\n/** Sheet above the first baseline once it's fed in. */\nconst TOP_MARGIN = 38\nconst VIEW_TOP = -178\nconst VIEW_BOTTOM = 314\n/** Where a typebar's slug lands: the middle of the glyph on the print line. */\nconst STRIKE_Y = -5\n/** Centre of the typebar basket, under the print point. */\nconst BASKET_Y = 42\nconst PIVOT_R = 56\nconst REST_R = 27\n/** Half the basket's fan, in radians from straight down. */\nconst SPREAD = (74 * Math.PI) / 180\n/** Platen knob radius, for how far it turns per line. */\nconst KNOB_R = 21\nconst RIDGES = 11\nconst SPOOL_Y = 80\nconst SPOOL_X = 150\nconst KEY_ROWS = [\"1234567890\", \"qwertyuiop\", \"asdfghjkl;\", \"zxcvbnm,./\"]\nconst KEY_Y = [136, 166, 196, 226]\nconst KEY_PITCH = 35\nconst KEY_R = 12.5\n/** Key tops are circles seen from above: this squashes them. */\nconst KEY_TILT = 0.64\n/** How far a key travels when pressed. */\nconst KEY_TRAVEL = 4\n/** Paper lean per unit/s of carriage speed, in degrees, and its limit. */\nconst FLEX_GAIN = 0.0042\nconst FLEX_MAX = 5\n/** Spring the paper wobbles back on. */\nconst FLEX_K = 170\nconst FLEX_C = 9\n/** Platen line: where the sheet bends from. */\nconst FLEX_ANCHOR = 40\n/** Shifted characters, and the key that types them. */\nconst SHIFTED: Record<string, string> = {\n  \"!\": \"1\",\n  '\"': \"2\",\n  \"#\": \"3\",\n  $: \"4\",\n  \"%\": \"5\",\n  _: \"6\",\n  \"&\": \"7\",\n  \"'\": \"8\",\n  \"(\": \"9\",\n  \")\": \"0\",\n  \":\": \";\",\n  \"?\": \"/\",\n  \"<\": \",\",\n  \">\": \".\",\n}\n\nconst INK = \"#24221F\"\nconst LEGEND = \"#EFE7D1\"\nconst RIBBON_BLACK = \"#16171A\"\nconst RIBBON_RED = \"#C4342B\"\nconst CHROME = \"#D3D8DC\"\nconst CHROME_EDGE = \"#5E656C\"\nconst SHEET = \"var(--typewriter-sheet, #FBF9F3)\"\n\n/** An SVG element. A `fill` of `\"sheet\"` paints in the paper tone. */\nfunction draw<K extends keyof SVGElementTagNameMap>(\n  tag: K,\n  attrs: Record<string, string | number>,\n  parent?: Element\n) {\n  const node = document.createElementNS(SVG_NS, tag)\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key === \"fill\" && value === \"sheet\") node.style.fill = SHEET\n    else node.setAttribute(key, String(value))\n  }\n  parent?.append(node)\n  return node\n}\n\ntype Rgb = [number, number, number]\n\nlet swatch: CanvasRenderingContext2D | null = null\n\n/** Any CSS color as RGB, via a one-pixel canvas. */\nfunction rgbOf(color: string, fallback: Rgb): Rgb {\n  swatch ??= document\n    .createElement(\"canvas\")\n    .getContext(\"2d\", { willReadFrequently: true })\n  if (!swatch) return fallback\n  swatch.clearRect(0, 0, 1, 1)\n  swatch.fillStyle = `rgb(${fallback.join(\" \")})`\n  swatch.fillStyle = color\n  swatch.fillRect(0, 0, 1, 1)\n  const [r = 0, g = 0, b = 0] = swatch.getImageData(0, 0, 1, 1).data\n  return [r, g, b]\n}\n\nfunction mix(a: Rgb, b: Rgb, t: number) {\n  const c = a.map((v, i) => Math.round(v + (b[i]! - v) * t))\n  return `rgb(${c.join(\" \")})`\n}\n\nconst linear = (t: number) => t\nconst easeIn = (t: number) => t * t * t\nconst easeOut = (t: number) => 1 - (1 - t) ** 3\nconst easeInOut = (t: number) =>\n  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n\n/** Down fast, hold, ease back up — a key, a typebar, the ribbon. */\nfunction pulse(t: number, from: number, rise: number, hold: number) {\n  if (t < rise) return from + (1 - from) * easeOut(t / rise)\n  if (t < rise + hold) return 1\n  return 1 - easeInOut((t - rise - hold) / Math.max(0.001, 1 - rise - hold))\n}\n\n/** A point on the basket, `angle` radians from straight down. */\nfunction polar(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), BASKET_Y + r * Math.cos(angle)]\n}\n\ntype Bar = {\n  rest: SVGGElement\n  strike: SVGGElement\n  /** Dark edge under the bar, so it reads over the paper. */\n  edge: SVGLineElement\n  core: SVGLineElement\n  slug: SVGLineElement\n  pivot: [number, number]\n  tip: [number, number]\n  v: number\n}\n\ntype Key = { cap: SVGGElement; bar: Bar | null; v: number }\n\ntype Machine = {\n  columns: number\n  /** Everything but the ground shadow — it shudders on each strike. */\n  rig: SVGGElement\n  /** Under-inked fills, for letters the ribbon didn't fully cover. */\n  inkFills: string[]\n  carriage: SVGGElement\n  paper: SVGGElement\n  sheet: SVGRectElement\n  shadow: SVGRectElement\n  ink: SVGGElement\n  lever: SVGGElement\n  leverPivot: [number, number]\n  knobs: { x: number; lines: SVGLineElement[] }[]\n  keys: Map<string, Key>\n  shifts: Key[]\n  space: Key\n  basket: SVGGElement\n  bars: Bar[]\n  ribbon: { path: SVGPathElement; dy: number }[]\n  vibrator: SVGGElement\n  spools: SVGGElement[]\n}\n\n/**\n * Draw the whole typewriter into `svg`: the carriage (rail, paper rest,\n * platen, knobs, return lever, sheet, scale) and the body (enamel shell,\n * typebar basket, ribbon spools, ribbon, keyboard). `color` is the enamel;\n * its lights and shadows are mixed from it.\n */\nfunction drawMachine(\n  svg: SVGSVGElement,\n  id: string,\n  columns: number,\n  color: string,\n  label?: string\n): Machine {\n  const span = columns * CW\n  const platenL = -PAD - 22\n  const platenR = span + PAD + 22\n  const knobW = 15\n  const leverX = platenL - knobW - 4\n  // Room for the carriage at both ends of its travel, and the body.\n  const left = leverX - 56 - (span + CW / 2)\n  const right = platenR + knobW - CW / 2\n  const half = Math.ceil(Math.max(-left, right, 262) + 14)\n  svg.replaceChildren()\n  svg.setAttribute(\n    \"viewBox\",\n    `${-half} ${VIEW_TOP} ${half * 2} ${VIEW_BOTTOM - VIEW_TOP}`\n  )\n\n  const base = rgbOf(color, [142, 195, 181])\n  const white: Rgb = [255, 255, 255]\n  const black: Rgb = [0, 0, 0]\n  const enamel = {\n    shine: mix(base, white, 0.62),\n    hi: mix(base, white, 0.34),\n    light: mix(base, white, 0.14),\n    mid: mix(base, base, 0),\n    low: mix(base, black, 0.16),\n    deep: mix(base, black, 0.34),\n    edge: mix(base, black, 0.55),\n  }\n\n  /* Gradients. */\n  const defs = draw(\"defs\", {}, svg)\n  const gradient = (\n    name: string,\n    kind: \"linearGradient\" | \"radialGradient\",\n    attrs: Record<string, string | number>,\n    stops: [number, string, number?][]\n  ) => {\n    const el = draw(kind, { id: `${id}-${name}`, ...attrs }, defs)\n    for (const [offset, stopColor, alpha = 1] of stops) {\n      draw(\n        \"stop\",\n        { offset, \"stop-color\": stopColor, \"stop-opacity\": alpha },\n        el\n      )\n    }\n    return `url(#${id}-${name})`\n  }\n  const down = { x1: 0, y1: 0, x2: 0, y2: 1 }\n  const across = { x1: 0, y1: 0, x2: 1, y2: 0 }\n  const fills = {\n    body: gradient(\"body\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.18, enamel.light],\n      [0.62, enamel.mid],\n      [1, enamel.low],\n    ]),\n    sides: gradient(\"sides\", \"linearGradient\", across, [\n      [0, \"#000\", 0.26],\n      [0.1, \"#000\", 0.04],\n      [0.5, \"#fff\", 0.05],\n      [0.9, \"#000\", 0.04],\n      [1, \"#000\", 0.3],\n    ]),\n    front: gradient(\"front\", \"linearGradient\", down, [\n      [0, enamel.low],\n      [1, enamel.deep],\n    ]),\n    rest: gradient(\"rest\", \"linearGradient\", down, [\n      [0, enamel.hi],\n      [0.5, enamel.light],\n      [1, enamel.low],\n    ]),\n    chrome: gradient(\"chrome\", \"linearGradient\", down, [\n      [0, \"#FDFEFE\"],\n      [0.38, \"#D2D7DB\"],\n      [0.52, \"#8B9298\"],\n      [0.7, \"#C3C8CC\"],\n      [1, \"#EEF0F2\"],\n    ]),\n    chromeV: gradient(\"chrome-v\", \"linearGradient\", across, [\n      [0, \"#8B9298\"],\n      [0.35, \"#F4F6F7\"],\n      [0.6, \"#BFC4C9\"],\n      [1, \"#737A80\"],\n    ]),\n    rubber: gradient(\"rubber\", \"linearGradient\", down, [\n      [0, \"#55595E\"],\n      [0.16, \"#2A2D31\"],\n      [0.55, \"#0D0E10\"],\n      [0.85, \"#050607\"],\n      [1, \"#1E2124\"],\n    ]),\n    bakelite: gradient(\"bakelite\", \"linearGradient\", down, [\n      [0, \"#62666C\"],\n      [0.2, \"#2C2F33\"],\n      [0.6, \"#111214\"],\n      [1, \"#2A2D31\"],\n    ]),\n    capTop: gradient(\n      \"cap-top\",\n      \"radialGradient\",\n      { cx: 0.38, cy: 0.3, r: 0.75 },\n      [\n        [0, \"#575C63\"],\n        [0.55, \"#202326\"],\n        [1, \"#0C0D0F\"],\n      ]\n    ),\n    capSide: gradient(\"cap-side\", \"linearGradient\", down, [\n      [0, \"#9AA1A7\"],\n      [0.5, \"#4B5157\"],\n      [1, \"#2A2E32\"],\n    ]),\n    well: gradient(\"well\", \"linearGradient\", down, [\n      [0, \"#08090A\"],\n      [0.18, \"#151719\"],\n      [1, \"#24272A\"],\n    ]),\n    recess: gradient(\"recess\", \"radialGradient\", { cx: 0.5, cy: 0, r: 1 }, [\n      [0, \"#030304\"],\n      [0.7, \"#141618\"],\n      [1, \"#24272A\"],\n    ]),\n    spoolRibbon: gradient(\n      \"spool-ribbon\",\n      \"radialGradient\",\n      { cx: 0.42, cy: 0.38, r: 0.7 },\n      [\n        [0, \"#3B3E43\"],\n        [0.7, \"#151618\"],\n        [1, \"#060607\"],\n      ]\n    ),\n    flange: gradient(\n      \"flange\",\n      \"radialGradient\",\n      { cx: 0.36, cy: 0.3, r: 0.85 },\n      [\n        [0, \"#FFFFFF\"],\n        [0.45, \"#CDD2D6\"],\n        [1, \"#7D848A\"],\n      ]\n    ),\n    ground: gradient(\"ground\", \"radialGradient\", { cx: 0.5, cy: 0.5, r: 0.5 }, [\n      [0, \"#000\", 0.34],\n      [0.6, \"#000\", 0.12],\n      [1, \"#000\", 0],\n    ]),\n    keyShadow: gradient(\n      \"key-shadow\",\n      \"radialGradient\",\n      { cx: 0.5, cy: 0.5, r: 0.5 },\n      [\n        [0, \"#000\", 0.7],\n        [1, \"#000\", 0],\n      ]\n    ),\n    curl: gradient(\n      \"curl\",\n      \"linearGradient\",\n      { gradientUnits: \"userSpaceOnUse\", x1: 0, y1: 12, x2: 0, y2: 41 },\n      [\n        [0, \"#3A2E1C\", 0],\n        [0.55, \"#3A2E1C\", 0.1],\n        [1, \"#3A2E1C\", 0.34],\n      ]\n    ),\n    contact: gradient(\"contact\", \"linearGradient\", down, [\n      [0, \"#000\", 0.3],\n      [1, \"#000\", 0],\n    ]),\n  }\n  const inkFills = (\n    [\n      [down, 0, 0.36],\n      [down, 1, 0.4],\n      [across, 0, 0.42],\n      [across, 1, 0.42],\n    ] as const\n  ).map(([dir, faintEnd, alpha], i) =>\n    gradient(\n      `ink-${i}`,\n      \"linearGradient\",\n      dir,\n      faintEnd === 0\n        ? [\n            [0, INK, alpha],\n            [0.55, INK, 1],\n            [1, INK, 1],\n          ]\n        : [\n            [0, INK, 1],\n            [0.45, INK, 1],\n            [1, INK, alpha],\n          ]\n    )\n  )\n\n  // The sheet fades out at the top of the frame and tucks behind the\n  // platen at the bottom.\n  const fade = gradient(\n    \"fade-g\",\n    \"linearGradient\",\n    {\n      gradientUnits: \"userSpaceOnUse\",\n      x1: 0,\n      x2: 0,\n      y1: VIEW_TOP,\n      y2: 41,\n    },\n    [\n      [0, \"#fff\", 0],\n      [84 / (41 - VIEW_TOP), \"#fff\", 1],\n      [0.998, \"#fff\", 1],\n      [1, \"#fff\", 0],\n    ]\n  )\n  const box = { x: -4000, y: VIEW_TOP - 4, width: 8000, height: 50 - VIEW_TOP }\n  const mask = draw(\n    \"mask\",\n    { id: `${id}-fade`, maskUnits: \"userSpaceOnUse\", ...box },\n    defs\n  )\n  draw(\"rect\", { ...box, fill: fade }, mask)\n\n  // Ground shadow.\n  draw(\"ellipse\", { cx: 0, cy: 302, rx: 300, ry: 15, fill: fills.ground }, svg)\n\n  /* ---------------- Carriage ---------------- */\n\n  const rig = draw(\"g\", {}, svg)\n  const carriage = draw(\"g\", {}, rig)\n  // Rail it rides on.\n  draw(\n    \"rect\",\n    {\n      x: platenL - knobW - 8,\n      y: 40,\n      width: platenR - platenL + knobW * 2 + 16,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  // Paper rest behind the sheet.\n  const tL = -PAD - 16\n  const tR = span + PAD + 16\n  draw(\n    \"path\",\n    {\n      d: `M${tL} 10V-80Q${tL} -98 ${tL + 18} -98H${tR - 18}Q${tR} -98 ${tR} -80V10Z`,\n      fill: fills.rest,\n    },\n    carriage\n  )\n  draw(\n    \"path\",\n    {\n      d: `M${tL + 1} -80Q${tL + 1} -97 ${tL + 18} -97H${tR - 18}Q${tR - 1} -97 ${tR - 1} -80`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.4,\n      \"stroke-opacity\": 0.85,\n    },\n    carriage\n  )\n  // Platen, with chrome collars at its ends.\n  draw(\n    \"rect\",\n    {\n      x: platenL,\n      y: 6,\n      width: platenR - platenL,\n      height: 34,\n      rx: 4,\n      fill: fills.rubber,\n    },\n    carriage\n  )\n  draw(\n    \"rect\",\n    {\n      x: platenL + 4,\n      y: 10.5,\n      width: platenR - platenL - 8,\n      height: 1.6,\n      rx: 0.8,\n      fill: \"#fff\",\n      \"fill-opacity\": 0.22,\n    },\n    carriage\n  )\n  for (const x of [platenL - 4, platenR]) {\n    draw(\n      \"rect\",\n      { x, y: 9, width: 4, height: 28, rx: 1, fill: fills.chrome },\n      carriage\n    )\n  }\n  // Knobs: bakelite with knurling that turns with the platen.\n  const knobs = [platenL - 4 - knobW, platenR + 4].map((x) => {\n    draw(\n      \"rect\",\n      { x, y: 1, width: knobW, height: 44, rx: 6, fill: fills.bakelite },\n      carriage\n    )\n    const lines = Array.from({ length: RIDGES }, () =>\n      draw(\n        \"line\",\n        {\n          x1: x + 2.5,\n          x2: x + knobW - 2.5,\n          stroke: \"#B8BEC4\",\n          \"stroke-width\": 1,\n          \"stroke-linecap\": \"round\",\n        },\n        carriage\n      )\n    )\n    draw(\n      \"rect\",\n      {\n        x: x + 2,\n        y: 3,\n        width: knobW - 4,\n        height: 6,\n        rx: 3,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.12,\n      },\n      carriage\n    )\n    return { x, lines }\n  })\n  // Carriage return lever: chrome arm, bakelite grip.\n  const lever = draw(\"g\", { \"data-key\": \"return\" }, carriage)\n  const leverPivot: [number, number] = [leverX, 30]\n  draw(\n    \"rect\",\n    {\n      x: leverX - 5,\n      y: 20,\n      width: 10,\n      height: 22,\n      rx: 3,\n      fill: fills.chromeV,\n    },\n    lever\n  )\n  const arm = `M${leverX} 28L${leverX - 13} 4L${leverX - 36} -14`\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 6.4],\n    [CHROME, 4],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: arm,\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linecap\": \"round\",\n        \"stroke-linejoin\": \"round\",\n      },\n      lever\n    )\n  }\n  draw(\n    \"path\",\n    {\n      d: `M${leverX - 1} 26L${leverX - 13} 4.5L${leverX - 34} -12`,\n      fill: \"none\",\n      stroke: \"#fff\",\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.8,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n    },\n    lever\n  )\n  draw(\n    \"rect\",\n    {\n      x: leverX - 56,\n      y: -25,\n      width: 28,\n      height: 11,\n      rx: 5.5,\n      fill: fills.bakelite,\n      transform: `rotate(-24 ${leverX - 42} -19.5)`,\n    },\n    lever\n  )\n\n  // The sheet, masked so it fades at the top and wraps under the platen.\n  const wrap = draw(\"g\", { mask: `url(#${id}-fade)` }, carriage)\n  const paper = draw(\"g\", {}, wrap)\n  const shadow = draw(\n    \"rect\",\n    {\n      x: -PAD + 3,\n      y: -TOP_MARGIN + 3,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"#000\",\n      \"fill-opacity\": 0.12,\n    },\n    paper\n  )\n  const sheet = draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: -TOP_MARGIN,\n      width: span + PAD * 2,\n      height: 600,\n      fill: \"sheet\",\n      stroke: \"#000\",\n      \"stroke-opacity\": 0.07,\n      \"stroke-width\": 0.8,\n    },\n    paper\n  )\n  const ink = draw(\n    \"g\",\n    { \"text-anchor\": \"middle\", \"font-size\": FONT, fill: INK },\n    paper\n  )\n  // Where the sheet curls round the platen.\n  draw(\n    \"rect\",\n    {\n      x: -PAD,\n      y: 12,\n      width: span + PAD * 2,\n      height: 30,\n      fill: fills.curl,\n    },\n    wrap\n  )\n\n  // Paper scale under the print line.\n  draw(\n    \"rect\",\n    {\n      x: -PAD + 2,\n      y: 8.5,\n      width: span + PAD * 2 - 4,\n      height: 6,\n      rx: 3,\n      fill: fills.chrome,\n    },\n    carriage\n  )\n  let ticks = \"\"\n  for (let c = 0; c <= columns; c++) {\n    const x = c * CW\n    ticks += `M${x} 9.4V${c % 10 === 0 ? 13.6 : c % 5 === 0 ? 12.4 : 11.2}`\n  }\n  draw(\n    \"path\",\n    {\n      d: ticks,\n      stroke: \"#3E444A\",\n      \"stroke-width\": 0.7,\n      fill: \"none\",\n    },\n    carriage\n  )\n\n  /* ---------------- Body ---------------- */\n\n  const body = draw(\"g\", {}, rig)\n  const shell =\n    \"M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z\"\n  draw(\"path\", { d: shell, fill: fills.body }, body)\n  draw(\"path\", { d: shell, fill: fills.sides }, body)\n  draw(\n    \"rect\",\n    { x: -206, y: 42.5, width: 412, height: 15, fill: fills.contact },\n    body\n  )\n  // Front face, below the top surfaces, with a chrome trim.\n  draw(\n    \"path\",\n    {\n      d: \"M-247 248Q-249 262 -232 264H232Q249 262 247 248L245 284Q243 296 227 296H-227Q-243 296 -245 284Z\",\n      fill: fills.front,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-240 264.5H240\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.7,\n    },\n    body\n  )\n  draw(\n    \"rect\",\n    {\n      x: -236,\n      y: 274,\n      width: 472,\n      height: 3,\n      rx: 1.5,\n      fill: fills.chrome,\n    },\n    body\n  )\n  if (label) {\n    const w = Math.max(36, label.length * 7.4 + 18)\n    draw(\n      \"rect\",\n      {\n        x: -w / 2,\n        y: 268.5,\n        width: w,\n        height: 14,\n        rx: 3,\n        fill: fills.chrome,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n    for (const [dy, fill] of [\n      [0.6, \"#fff\"],\n      [0, \"#30353A\"],\n    ] as const) {\n      const plate = draw(\n        \"text\",\n        {\n          x: 0,\n          y: 276 + dy,\n          \"text-anchor\": \"middle\",\n          \"dominant-baseline\": \"central\",\n          \"font-size\": 8.4,\n          \"font-weight\": 700,\n          \"letter-spacing\": 1.6,\n          fill,\n        },\n        body\n      )\n      plate.textContent = label\n    }\n  }\n  for (const x of [-228, 188]) {\n    draw(\n      \"rect\",\n      { x, y: 293, width: 40, height: 10, rx: 4, fill: \"#151618\" },\n      body\n    )\n  }\n  const sheen = gradient(\"sheen\", \"linearGradient\", across, [\n    [0, \"#fff\", 0.34],\n    [0.55, \"#fff\", 0.1],\n    [1, \"#fff\", 0],\n  ])\n  draw(\n    \"path\",\n    { d: \"M-210 48H-96L-150 110H-224Q-222 82 -210 48Z\", fill: sheen },\n    body\n  )\n  // Glossy rim along the top of the shell.\n  draw(\n    \"path\",\n    {\n      d: \"M-194 43.4H194\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.6,\n      \"stroke-linecap\": \"round\",\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-208 56Q-212 70 -216 96\",\n      stroke: enamel.shine,\n      \"stroke-width\": 2.4,\n      \"stroke-linecap\": \"round\",\n      \"stroke-opacity\": 0.55,\n      fill: \"none\",\n    },\n    body\n  )\n\n  // Typebar basket, sunk in the deck.\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}Z`,\n      fill: fills.recess,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: `M-68 ${BASKET_Y}A68 68 0 0 0 68 ${BASKET_Y}`,\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.75,\n    },\n    body\n  )\n  const basket = draw(\"g\", {}, body)\n  const [ax, ay] = polar(62, -SPREAD - 0.12)\n  const [bx, by] = polar(62, SPREAD + 0.12)\n  const [cx, cy] = polar(53, SPREAD + 0.12)\n  const [dx, dy] = polar(53, -SPREAD - 0.12)\n  draw(\n    \"path\",\n    {\n      d: `M${ax} ${ay}A62 62 0 0 0 ${bx} ${by}L${cx} ${cy}A53 53 0 0 1 ${dx} ${dy}Z`,\n      fill: fills.chrome,\n    },\n    basket\n  )\n\n  // Ribbon spools: black ribbon wound under a turning chrome flange.\n  const spools = [-SPOOL_X, SPOOL_X].map((x) => {\n    draw(\n      \"circle\",\n      { cx: x, cy: SPOOL_Y + 2, r: 27, fill: \"#000\", \"fill-opacity\": 0.22 },\n      body\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 26, fill: fills.flange }, body)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 22, fill: fills.spoolRibbon }, body)\n    const turn = draw(\"g\", {}, body)\n    let windows = \"\"\n    for (let i = 0; i < 3; i++) {\n      const a0 = (i / 3) * TAU + 0.25\n      const a1 = a0 + 1.35\n      const p = (r: number, a: number) =>\n        `${(x + Math.cos(a) * r).toFixed(2)} ${(SPOOL_Y + Math.sin(a) * r).toFixed(2)}`\n      windows += `M${p(19, a0)}A19 19 0 0 1 ${p(19, a1)}L${p(8.5, a1)}A8.5 8.5 0 0 0 ${p(8.5, a0)}Z`\n    }\n    draw(\n      \"path\",\n      {\n        d: `M${x - 21} ${SPOOL_Y}a21 21 0 1 0 42 0a21 21 0 1 0 -42 0Z${windows}`,\n        fill: fills.flange,\n        \"fill-rule\": \"evenodd\",\n      },\n      turn\n    )\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 5, fill: fills.chrome }, turn)\n    draw(\"circle\", { cx: x, cy: SPOOL_Y, r: 1.6, fill: \"#2A2D31\" }, turn)\n    return turn\n  })\n\n  // The type guide either side of the print point.\n  for (const x of [-23, 17]) {\n    draw(\n      \"rect\",\n      {\n        x,\n        y: 0,\n        width: 6,\n        height: 16,\n        rx: 1.6,\n        fill: fills.chromeV,\n        stroke: CHROME_EDGE,\n        \"stroke-width\": 0.8,\n      },\n      body\n    )\n  }\n\n  // Two-tone ribbon, black over red, through the vibrator.\n  const ribbon = [\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_BLACK,\n          \"stroke-width\": 5.8,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 0,\n    },\n    {\n      path: draw(\n        \"path\",\n        {\n          fill: \"none\",\n          stroke: RIBBON_RED,\n          \"stroke-width\": 2.6,\n          \"stroke-linejoin\": \"round\",\n        },\n        body\n      ),\n      dy: 1.5,\n    },\n  ]\n  const vibrator = draw(\"g\", {}, body)\n  for (const [stroke, width] of [\n    [CHROME_EDGE, 3.8],\n    [CHROME, 2],\n  ] as const) {\n    draw(\n      \"path\",\n      {\n        d: \"M-12 2.5V11.5H12V2.5\",\n        fill: \"none\",\n        stroke,\n        \"stroke-width\": width,\n        \"stroke-linejoin\": \"round\",\n        \"stroke-linecap\": \"round\",\n      },\n      vibrator\n    )\n  }\n\n  // Keyboard well.\n  draw(\n    \"path\",\n    {\n      d: \"M-204 112H204Q217 112 219 125L233 240Q235 254 220 254H-220Q-235 254 -233 240L-219 125Q-217 112 -204 112Z\",\n      fill: fills.well,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-219.5 126Q-217.5 111 -204 111H204Q217.5 111 219.5 126\",\n      fill: \"none\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.3,\n      \"stroke-opacity\": 0.8,\n    },\n    body\n  )\n  draw(\n    \"path\",\n    {\n      d: \"M-226 254.6H226\",\n      stroke: enamel.shine,\n      \"stroke-width\": 1.2,\n      \"stroke-opacity\": 0.6,\n    },\n    body\n  )\n\n  const ry = KEY_R * KEY_TILT\n  const height = 4.5\n  /** A round key on its stem, seen from above: rim, cap, legend, shadow. */\n  const keyAt = (x: number, y: number, label: string, ch: string) => {\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 21,\n        rx: 11,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - 1.5,\n        y: y + 4,\n        width: 3,\n        height: 19,\n        rx: 1,\n        fill: fills.chromeV,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R} ${y}V${y + height}A${KEY_R} ${ry} 0 0 0 ${x + KEY_R} ${y + height}V${y}A${KEY_R} ${ry} 0 0 1 ${x - KEY_R} ${y}Z`,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\"ellipse\", { cx: x, cy: y, rx: KEY_R, ry, fill: fills.chrome }, cap)\n    draw(\n      \"ellipse\",\n      {\n        cx: x,\n        cy: y + 0.3,\n        rx: KEY_R - 2.3,\n        ry: ry - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    draw(\n      \"ellipse\",\n      {\n        cx: x - 3.4,\n        cy: y - 2.6,\n        rx: 4.4,\n        ry: 1.6,\n        fill: \"#fff\",\n        \"fill-opacity\": 0.2,\n      },\n      cap\n    )\n    const text = draw(\n      \"text\",\n      {\n        x,\n        y: y + 0.7,\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\",\n        \"font-size\": 9.6,\n        \"font-weight\": 600,\n        fill: LEGEND,\n        transform: `matrix(1 0 0 0.74 0 ${(y * 0.26).toFixed(2)})`,\n      },\n      cap\n    )\n    text.textContent = label\n    draw(\n      \"path\",\n      {\n        d: `M${x - KEY_R + 3.6} ${y - 0.4}A${KEY_R - 3.6} ${ry - 2.3} 0 0 1 ${x + KEY_R - 3.6} ${y - 0.4}`,\n        fill: \"none\",\n        stroke: \"#fff\",\n        \"stroke-width\": 0.9,\n        \"stroke-opacity\": 0.32,\n        \"stroke-linecap\": \"round\",\n      },\n      cap\n    )\n    cap.setAttribute(\"data-key\", ch)\n    return cap\n  }\n\n  const keys = new Map<string, Key>()\n  const placed: { x: number; key: Key }[] = []\n  KEY_ROWS.forEach((row, r) => {\n    Array.from(row).forEach((ch, i) => {\n      const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH\n      const key: Key = {\n        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase(), ch),\n        bar: null,\n        v: 0,\n      }\n      keys.set(ch, key)\n      placed.push({ x, key })\n    })\n  })\n\n  /** A pill key (shift, space): same rim and cap, stretched. */\n  const pill = (x: number, y: number, w: number, legend?: string) => {\n    for (const sx of [x - w * 0.3, x + w * 0.3]) {\n      draw(\n        \"rect\",\n        {\n          x: sx - 1.5,\n          y: y + 4,\n          width: 3,\n          height: 17,\n          rx: 1,\n          fill: fills.chromeV,\n        },\n        body\n      )\n    }\n    draw(\n      \"ellipse\",\n      {\n        cx: x + 2,\n        cy: y + 19,\n        rx: w / 2 + 2,\n        ry: 4,\n        fill: fills.keyShadow,\n      },\n      body\n    )\n    const cap = draw(\"g\", {}, body)\n    const r = ry\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r + height,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.capSide,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2,\n        y: y - r,\n        width: w,\n        height: r * 2,\n        rx: r,\n        fill: fills.chrome,\n      },\n      cap\n    )\n    draw(\n      \"rect\",\n      {\n        x: x - w / 2 + 2.3,\n        y: y - r + 1.6,\n        width: w - 4.6,\n        height: r * 2 - 3.2,\n        rx: r - 1.6,\n        fill: fills.capTop,\n      },\n      cap\n    )\n    if (legend) {\n      draw(\"path\", { d: legend, fill: LEGEND }, cap)\n    }\n    return cap\n  }\n  const y3 = KEY_Y[3]!\n  const shifts = [-1, 1].map((side) => {\n    const x = side * 201\n    const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`\n    const cap = pill(x, y3, 30, arrow)\n    cap.setAttribute(\"data-key\", \"shift\")\n    return { cap, bar: null, v: 0 } satisfies Key\n  })\n\n  // Space bar: a chrome bar on two arms.\n  for (const sx of [-80, 80]) {\n    draw(\n      \"rect\",\n      {\n        x: sx - 1.5,\n        y: 247,\n        width: 3,\n        height: 7,\n        fill: fills.chromeV,\n      },\n      body\n    )\n  }\n  const spaceCap = draw(\"g\", { \"data-key\": \" \" }, body)\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 242,\n      width: 224,\n      height: 9,\n      rx: 4.5,\n      fill: \"#4E555B\",\n    },\n    spaceCap\n  )\n  draw(\n    \"rect\",\n    {\n      x: -112,\n      y: 239.5,\n      width: 224,\n      height: 8,\n      rx: 4,\n      fill: fills.chrome,\n    },\n    spaceCap\n  )\n  const space: Key = { cap: spaceCap, bar: null, v: 0 }\n\n  // One typebar per key, fanned left to right in key order.\n  const overlay = draw(\"g\", {}, rig)\n  placed.sort((a, b) => a.x - b.x)\n  const bars = placed.map(({ key }, i) => {\n    const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)\n    const pivot = polar(PIVOT_R, angle)\n    const tip = polar(REST_R, angle)\n    const rest = draw(\"g\", {}, basket)\n    draw(\n      \"line\",\n      {\n        x1: pivot[0],\n        y1: pivot[1],\n        x2: tip[0],\n        y2: tip[1],\n        stroke: i % 2 ? \"#C4C9CE\" : \"#E6E9EC\",\n        \"stroke-width\": 1.25,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const [sx, sy] = polar(REST_R + 3.4, angle)\n    draw(\n      \"line\",\n      {\n        x1: sx,\n        y1: sy,\n        x2: tip[0],\n        y2: tip[1],\n        stroke: \"#7D848A\",\n        \"stroke-width\": 2.6,\n        \"stroke-linecap\": \"round\",\n      },\n      rest\n    )\n    const strike = draw(\"g\", { display: \"none\" }, overlay)\n    const line = (stroke: string, width: number) =>\n      draw(\n        \"line\",\n        { stroke, \"stroke-width\": width, \"stroke-linecap\": \"round\" },\n        strike\n      )\n    const edge = line(\"#1C1E21\", 3.9)\n    const core = line(\"#E2E5E8\", 1.8)\n    const slug = line(\"#2A2D31\", 5.6)\n    const bar: Bar = { rest, strike, edge, core, slug, pivot, tip, v: 0 }\n    key.bar = bar\n    return bar\n  })\n\n  return {\n    columns,\n    rig,\n    inkFills,\n    carriage,\n    paper,\n    sheet,\n    shadow,\n    ink,\n    lever,\n    leverPivot,\n    knobs,\n    keys,\n    shifts,\n    space,\n    basket,\n    bars,\n    ribbon,\n    vibrator,\n    spools,\n  }\n}\n\ntype Motion = {\n  key: string\n  start: number\n  ms: number\n  ease: (t: number) => number\n  run: (v: number) => void\n  begin?: () => void\n}\n\nlet machineIds = 0\n\n/**\n * A typewriter that types. Each letter presses its key, swings that key's\n * typebar up out of the basket to strike the ribbon, and the carriage\n * steps one character left. Capitals hold shift, which drops the basket. At\n * the margin the return lever kicks, the platen turns up a line, and the\n * carriage slides home. With `loop`, the finished sheet is pulled out and\n * a fresh one rolls in. `color` is the enamel; chrome, rubber, and the\n * ivory sheet are fixed. `prefers-reduced-motion` prints the whole page at\n * once.\n */\nexport function createTypewriter(\n  root: HTMLElement,\n  initial: TypewriterOptions = {}\n): TypewriterInstance {\n  let options: TypewriterOptions = { ...initial }\n  const textOf = () => options.text ?? DEFAULT_TEXT\n  const speedOf = () => numberOr(options.speed, DEFAULT_SPEED, 1, 60)\n  const holdOf = () => numberOr(options.hold, DEFAULT_HOLD, 0, 60000)\n  const startOf = () =>\n    numberOr(options.startDelay, DEFAULT_START_DELAY, 0, 60000)\n  const jitterOf = () => numberOr(options.jitter, DEFAULT_JITTER, 0, 1)\n  const columnsOf = () =>\n    Math.round(numberOr(options.columns, DEFAULT_COLUMNS, 16, 60))\n  const id = `typewriter-${++machineIds}`\n\n  // Screen readers get the whole text once; the machine is decoration.\n  const spoken = document.createElement(\"span\")\n  Object.assign(spoken.style, {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    margin: \"-1px\",\n    padding: \"0\",\n    overflow: \"hidden\",\n    clip: \"rect(0 0 0 0)\",\n    whiteSpace: \"nowrap\",\n    border: \"0\",\n  })\n  const svg = draw(\"svg\", {\n    width: \"100%\",\n    height: \"100%\",\n    preserveAspectRatio: \"xMidYMid meet\",\n    \"aria-hidden\": \"true\",\n  })\n  svg.style.display = \"block\"\n  root.append(spoken, svg)\n\n  let M!: Machine\n\n  /* ---------------------------------------------------------------- */\n  /* Drawing                                                           */\n  /* ---------------------------------------------------------------- */\n\n  const build = () => {\n    M = drawMachine(\n      svg,\n      id,\n      columnsOf(),\n      options.color ?? DEFAULT_COLOR,\n      options.label\n    )\n    setInteractive()\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Poses                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const pose = {\n    carriage: 0,\n    paper: 0,\n    knob: 0,\n    spool: 0,\n    lever: 0,\n    shift: 0,\n    ribbon: 0,\n  }\n\n  const carriageAt = (col: number) => -(col * CW + CW / 2)\n\n  const setCarriage = (x: number) => {\n    pose.carriage = x\n    M.carriage.setAttribute(\"transform\", `translate(${x.toFixed(2)} 0)`)\n  }\n  /** Sheet lean, a spring driven by how fast the carriage moves. */\n  const flex = { angle: 0, vel: 0, x: 0, t: 0 }\n  const placePaper = () => {\n    const y = pose.paper\n    const a = flex.angle\n    M.paper.setAttribute(\n      \"transform\",\n      Math.abs(a) < 0.01\n        ? `translate(0 ${y.toFixed(2)})`\n        : `translate(0 ${FLEX_ANCHOR}) skewX(${a.toFixed(3)}) translate(0 ${(y - FLEX_ANCHOR).toFixed(2)})`\n    )\n  }\n  const setPaper = (y: number) => {\n    pose.paper = y\n    placePaper()\n  }\n  /** Knurling on the platen knobs, scrolling as the platen turns. */\n  const setKnob = (phase: number) => {\n    pose.knob = phase\n    for (const knob of M.knobs) {\n      knob.lines.forEach((line, i) => {\n        const a = phase + (i / RIDGES) * TAU\n        const facing = Math.cos(a)\n        if (facing <= 0.05) {\n          line.setAttribute(\"stroke-opacity\", \"0\")\n          return\n        }\n        const y = (23 + Math.sin(a) * 19).toFixed(2)\n        line.setAttribute(\"y1\", y)\n        line.setAttribute(\"y2\", y)\n        line.setAttribute(\"stroke-opacity\", (0.18 + facing * 0.42).toFixed(2))\n      })\n    }\n  }\n  const setSpool = (deg: number) => {\n    pose.spool = deg\n    M.spools.forEach((spool, i) => {\n      const x = i === 0 ? -SPOOL_X : SPOOL_X\n      spool.setAttribute(\n        \"transform\",\n        `rotate(${(i === 0 ? -deg : deg).toFixed(1)} ${x} ${SPOOL_Y})`\n      )\n    })\n  }\n  const setLever = (deg: number) => {\n    pose.lever = deg\n    const [x, y] = M.leverPivot\n    M.lever.setAttribute(\"transform\", `rotate(${deg.toFixed(2)} ${x} ${y})`)\n  }\n  const setShift = (v: number) => {\n    pose.shift = v\n    M.basket.setAttribute(\"transform\", `translate(0 ${(v * 4).toFixed(2)})`)\n    for (const key of M.shifts) setKey(key, v)\n  }\n  /** The ribbon vibrator lifts the ribbon over the print point. */\n  const setRibbon = (v: number) => {\n    pose.ribbon = v\n    const lift = v * 13\n    const y = 7.5 - lift\n    const top = SPOOL_Y - 24\n    for (const { path, dy } of M.ribbon) {\n      path.setAttribute(\n        \"d\",\n        `M${-SPOOL_X} ${top + dy}L-12 ${(y + dy).toFixed(2)}H12L${SPOOL_X} ${top + dy}`\n      )\n    }\n    M.vibrator.setAttribute(\"transform\", `translate(0 ${(-lift).toFixed(2)})`)\n  }\n  const setKey = (key: Key, v: number) => {\n    key.v = v\n    key.cap.setAttribute(\n      \"transform\",\n      v > 0.001 ? `translate(0 ${(v * KEY_TRAVEL).toFixed(2)})` : \"\"\n    )\n  }\n  /** 0 rests in the basket; 1 is the slug on the paper. */\n  const setBar = (bar: Bar, v: number) => {\n    bar.v = v\n    if (v <= 0.001) {\n      bar.rest.removeAttribute(\"display\")\n      bar.strike.setAttribute(\"display\", \"none\")\n      return\n    }\n    bar.rest.setAttribute(\"display\", \"none\")\n    bar.strike.removeAttribute(\"display\")\n    const drop = pose.shift * 4\n    const [px, py0] = bar.pivot\n    const py = py0 + drop\n    const tx = bar.tip[0] + (0 - bar.tip[0]) * v\n    const ty = bar.tip[1] + drop + (STRIKE_Y - bar.tip[1] - drop) * v\n    const len = Math.hypot(tx - px, ty - py) || 1\n    const ux = (tx - px) / len\n    const uy = (ty - py) / len\n    for (const line of [bar.edge, bar.core]) {\n      line.setAttribute(\"x1\", px.toFixed(2))\n      line.setAttribute(\"y1\", py.toFixed(2))\n      line.setAttribute(\"x2\", tx.toFixed(2))\n      line.setAttribute(\"y2\", ty.toFixed(2))\n    }\n    bar.slug.setAttribute(\"x1\", (tx - ux * 6).toFixed(2))\n    bar.slug.setAttribute(\"y1\", (ty - uy * 6).toFixed(2))\n    bar.slug.setAttribute(\"x2\", tx.toFixed(2))\n    bar.slug.setAttribute(\"y2\", ty.toFixed(2))\n  }\n\n  /** Everything at rest, the carriage and sheet where the text has got to. */\n  const restPose = () => {\n    setCarriage(carriageAt(cursor.col))\n    setPaper(-cursor.line * LH)\n    setKnob(pose.knob)\n    setSpool(pose.spool)\n    setLever(0)\n    setShift(capsLock ? 1 : 0)\n    setRibbon(0)\n    flex.angle = 0\n    flex.vel = 0\n    placePaper()\n    for (const key of M.keys.values()) setKey(key, 0)\n    setKey(M.space, 0)\n    for (const bar of M.bars) setBar(bar, 0)\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Motion                                                            */\n  /* ---------------------------------------------------------------- */\n\n  const queued: Motion[] = []\n  const running = new Map<string, Motion>()\n  let raf = 0\n\n  const frame = (now: number) => {\n    raf = 0\n    queued.sort((a, b) => a.start - b.start)\n    while (queued.length && queued[0]!.start <= now) {\n      const motion = queued.shift()!\n      motion.begin?.()\n      running.set(motion.key, motion)\n    }\n    for (const [key, motion] of running) {\n      const t = clamp((now - motion.start) / motion.ms, 0, 1)\n      motion.run(motion.ease(t))\n      if (t >= 1) running.delete(key)\n    }\n    // The sheet leans against the carriage's motion, then wobbles upright.\n    const dt = flex.t ? Math.min(0.05, (now - flex.t) / 1000) : 0\n    flex.t = now\n    if (dt > 0) {\n      const speed = (pose.carriage - flex.x) / dt\n      const target = clamp(speed * FLEX_GAIN, -FLEX_MAX, FLEX_MAX)\n      flex.vel += (-FLEX_K * (flex.angle - target) - FLEX_C * flex.vel) * dt\n      flex.angle += flex.vel * dt\n      placePaper()\n    }\n    flex.x = pose.carriage\n    const settling = Math.abs(flex.angle) > 0.02 || Math.abs(flex.vel) > 0.05\n    if (queued.length || running.size || settling) {\n      raf = requestAnimationFrame(frame)\n    } else {\n      flex.t = 0\n    }\n  }\n  const wake = () => {\n    if (!raf) raf = requestAnimationFrame(frame)\n  }\n  /** Run `run(0…1)` over `ms`. A motion with the same key replaces it. */\n  const play = (\n    key: string,\n    ms: number,\n    run: (v: number) => void,\n    {\n      delay = 0,\n      ease = linear,\n      begin,\n    }: {\n      delay?: number\n      ease?: (t: number) => number\n      begin?: () => void\n    } = {}\n  ) => {\n    queued.push({\n      key,\n      start: performance.now() + delay,\n      ms: Math.max(1, ms),\n      ease,\n      run,\n      begin,\n    })\n    wake()\n  }\n  /** Ease a pose from wherever it is when the motion starts. */\n  const tween = (\n    key: string,\n    get: () => number,\n    set: (v: number) => void,\n    to: number,\n    ms: number,\n    opts: { delay?: number; ease?: (t: number) => number } = {}\n  ) => {\n    let from = 0\n    play(key, ms, (v) => set(from + (to - from) * v), {\n      ...opts,\n      begin: () => {\n        from = get()\n      },\n    })\n  }\n  const stopMotion = () => {\n    queued.length = 0\n    running.clear()\n    cancelAnimationFrame(raf)\n    raf = 0\n  }\n\n  const press = (name: string, key: Key, ms: number, delay = 0) => {\n    let from = 0\n    play(name, ms, (t) => setKey(key, pulse(t, from, 0.22, 0.28)), {\n      delay,\n      begin: () => {\n        from = key.v\n      },\n    })\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing                                                            */\n  /* ---------------------------------------------------------------- */\n\n  let strokes: TypewriterStroke[] = []\n  /** Strokes on the page. */\n  let pos = 0\n  let cursor = { line: 0, col: 0 }\n  let sheetH = 600\n  let phase: \"waiting\" | \"typing\" | \"done\" | \"feeding\" | \"manual\" = \"waiting\"\n  /** Shift lock, from the machine's own shift keys. */\n  let capsLock = false\n  /** Next `src` for strokes typed by hand. */\n  let nextSrc = 0\n  let rang = false\n  let destroyed = false\n  let reduce = false\n  let onScreen = true\n  let sound: Sound | null = null\n\n  // One pending step, paused while the machine can't be seen.\n  let pending: (() => void) | null = null\n  let timer = 0\n  let remaining = 0\n  let dueAt = 0\n  const active = () =>\n    !destroyed && onScreen && !reduce && document.visibilityState !== \"hidden\"\n  const arm = () => {\n    dueAt = performance.now() + remaining\n    timer = window.setTimeout(() => {\n      timer = 0\n      const run = pending\n      pending = null\n      run?.()\n    }, remaining)\n  }\n  const schedule = (run: () => void, ms: number) => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = run\n    remaining = Math.max(0, ms)\n    if (active()) arm()\n  }\n  const cancel = () => {\n    window.clearTimeout(timer)\n    timer = 0\n    pending = null\n  }\n  const sync = () => {\n    if (active()) {\n      if (pending && !timer) arm()\n    } else if (timer) {\n      window.clearTimeout(timer)\n      timer = 0\n      remaining = Math.max(0, dueAt - performance.now())\n    }\n  }\n\n  const soundOn = () => {\n    if (!options.sound) return null\n    sound ??= createSound()\n    return sound\n  }\n\n  const after = (stroke: TypewriterStroke | undefined) => {\n    if (!stroke) return { line: 0, col: 0 }\n    return stroke.kind === \"char\"\n      ? { line: stroke.line, col: stroke.col + 1 }\n      : { line: stroke.line, col: 0 }\n  }\n\n  /**\n   * A letter as it lands: a little off its cell, sometimes under-inked\n   * where the ribbon missed, now and then struck twice.\n   */\n  const letter = (stroke: Extract<TypewriterStroke, { kind: \"char\" }>) => {\n    const jitter = jitterOf()\n    const n = Math.floor(stroke.src) * 8\n    const x = stroke.col * CW + CW / 2\n    const y = stroke.line * LH\n    const group = draw(\"g\", {}, M.ink)\n    const glyph = (attrs: Record<string, string | number>) => {\n      const el = draw(\"text\", { x, y, ...attrs }, group)\n      el.textContent = stroke.ch\n      return el\n    }\n    if (jitter <= 0) {\n      glyph({})\n      return group\n    }\n    const dx = (hash(n) - 0.5) * jitter * 1.1\n    const dy = (hash(n + 1) - 0.5) * jitter * 1.6\n    const tilt = (hash(n + 2) - 0.5) * jitter * 3.2\n    group.setAttribute(\n      \"transform\",\n      `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`\n    )\n    const ink = 1 - hash(n + 3) * jitter * 0.38\n    const worn = hash(n + 4) < jitter * 0.6\n    glyph({\n      \"fill-opacity\": ink.toFixed(3),\n      ...(worn\n        ? {\n            fill: M.inkFills[Math.floor(hash(n + 5) * M.inkFills.length)]!,\n          }\n        : {}),\n    })\n    if (hash(n + 6) < jitter * 0.14) {\n      glyph({\n        \"fill-opacity\": (ink * 0.42).toFixed(3),\n        transform: `translate(${(0.45 + hash(n + 7) * 0.3).toFixed(2)} 0.3)`,\n      })\n    }\n    return group\n  }\n\n  const sizeSheet = () => {\n    const lines = (strokes.at(-1)?.line ?? 0) + 1\n    sheetH = Math.max(\n      TOP_MARGIN + lines * LH + 60,\n      (M.columns * CW + PAD * 2) * 1.3\n    )\n    M.sheet.setAttribute(\"height\", sheetH.toFixed(0))\n    M.shadow.setAttribute(\"height\", sheetH.toFixed(0))\n  }\n\n  /** Print the first `pos` strokes and park the machine, without motion. */\n  const paint = () => {\n    M.ink.replaceChildren()\n    for (let i = 0; i < pos; i++) {\n      const stroke = strokes[i]!\n      if (stroke.kind === \"char\" && stroke.ch !== \" \") letter(stroke)\n    }\n    if (phase !== \"manual\") cursor = after(strokes[pos - 1])\n    rang = cursor.col >= M.columns - BELL_CELLS\n    restPose()\n  }\n\n  const keyFor = (ch: string) => {\n    const lower = ch.toLowerCase()\n    const own = M.keys.get(lower)\n    if (own) return { key: own, shift: ch !== lower }\n    const base = SHIFTED[ch]\n    if (base) return { key: M.keys.get(base)!, shift: true }\n    // Anything the keyboard doesn't have borrows a key.\n    const all = [...M.keys.values()]\n    return {\n      key: all[(ch.codePointAt(0) ?? 0) % all.length]!,\n      shift: false,\n    }\n  }\n\n  const pace = (ch: string) => {\n    const base = 1000 / speedOf()\n    if (!(options.humanize ?? true)) return base\n    let factor = 0.55 + Math.random() * 0.9\n    if (ch === \" \") factor *= 1.15\n    else if (/[,;:]/.test(ch)) factor *= 2.4\n    else if (/[.!?]/.test(ch)) factor *= 3.4\n    if (Math.random() < 0.04) factor *= 2.6\n    return base * factor\n  }\n\n  /** Press the key, swing its bar into the ribbon, step the carriage. */\n  const strike = (\n    stroke: Extract<TypewriterStroke, { kind: \"char\" }>,\n    fixed?: number\n  ) => {\n    const base = 1000 / speedOf()\n    const ms = fixed ?? clamp(base * 1.7, 90, 170)\n    const audio = soundOn()\n    const step = carriageAt(stroke.col + 1)\n    cursor = { line: stroke.line, col: stroke.col + 1 }\n\n    if (stroke.ch === \" \") {\n      press(\"space\", M.space, ms)\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.4, {\n        delay: ms * 0.2,\n        ease: easeOut,\n      })\n      audio?.key(true)\n    } else {\n      const { key, shift } = keyFor(stroke.ch)\n      const lead = shift ? ms * 0.25 : 0\n      const impact = lead + ms * 0.42\n      if (shift && !capsLock) {\n        let from = 0\n        play(\"shift\", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {\n          begin: () => {\n            from = pose.shift\n          },\n        })\n      }\n      press(`key-${stroke.ch.toLowerCase()}`, key, ms * 1.1, lead)\n      const bar = key.bar\n      if (bar) {\n        let from = 0\n        play(\n          `bar-${M.bars.indexOf(bar)}`,\n          ms,\n          (t) => {\n            const v =\n              t < 0.42\n                ? from + (1 - from) * easeIn(t / 0.42)\n                : 1 - easeOut((t - 0.42) / 0.58)\n            setBar(bar, v)\n          },\n          {\n            delay: lead,\n            begin: () => {\n              from = bar.v\n            },\n          }\n        )\n      }\n      let lifted = 0\n      play(\"ribbon\", ms * 0.9, (t) => setRibbon(pulse(t, lifted, 0.4, 0.08)), {\n        delay: lead + ms * 0.08,\n        begin: () => {\n          lifted = pose.ribbon\n        },\n      })\n      const mark = letter(stroke)\n      mark.setAttribute(\"opacity\", \"0\")\n      play(\n        `ink-${stroke.src}`,\n        60,\n        (v) => mark.setAttribute(\"opacity\", v.toFixed(3)),\n        { delay: impact }\n      )\n      // The whole machine takes the blow.\n      play(\n        \"shudder\",\n        110,\n        (v) => {\n          const y = Math.sin(v * Math.PI) * (1 - v) * 1.6\n          M.rig.setAttribute(\n            \"transform\",\n            y > 0.01 ? `translate(0 ${y.toFixed(2)})` : \"\"\n          )\n        },\n        { delay: impact }\n      )\n      tween(\"carriage\", () => pose.carriage, setCarriage, step, ms * 0.36, {\n        delay: impact + 6,\n        ease: easeOut,\n      })\n      tween(\"spool\", () => pose.spool, setSpool, pose.spool + 5, ms * 0.3, {\n        delay: impact,\n      })\n      if (audio) window.setTimeout(() => audio.key(false), impact)\n    }\n\n    if (\n      !rang &&\n      cursor.col >= M.columns - BELL_CELLS &&\n      M.columns > BELL_CELLS * 2\n    ) {\n      rang = true\n      audio?.bell()\n    }\n  }\n\n  /** Kick the lever, turn up a line, slide the carriage home. */\n  const carriageReturn = (\n    stroke: Extract<TypewriterStroke, { kind: \"return\" }>\n  ) => {\n    const glide = clamp(220 + stroke.from * 8, 260, 640)\n    cursor = { line: stroke.line, col: 0 }\n    rang = false\n    play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    tween(\"paper\", () => pose.paper, setPaper, -stroke.line * LH, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + LH / KNOB_R, 220, {\n      delay: 60,\n      ease: easeInOut,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), glide, {\n      delay: 130,\n      ease: easeInOut,\n    })\n    soundOn()?.carriage(glide)\n    return glide + 130\n  }\n\n  const setPhase = (next: typeof phase) => {\n    phase = next\n  }\n\n  const finish = () => {\n    setPhase(\"done\")\n    options.onDone?.()\n    if (options.loop ?? true) schedule(feedOut, holdOf())\n  }\n\n  const step = () => {\n    if (pos >= strokes.length) {\n      finish()\n      return\n    }\n    setPhase(\"typing\")\n    const stroke = strokes[pos++]!\n    if (stroke.kind === \"char\") {\n      strike(stroke)\n      schedule(step, pace(stroke.ch))\n    } else {\n      const ms = carriageReturn(stroke)\n      schedule(step, ms + pace(\" \") * 0.8)\n    }\n  }\n\n  /** Roll a fresh sheet up from behind the platen. */\n  const feedIn = (then: () => void) => {\n    setPaper(40 + TOP_MARGIN)\n    tween(\"paper\", () => pose.paper, setPaper, 0, 900, { ease: easeOut })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 5, 900, {\n      ease: easeOut,\n    })\n    schedule(then, 940)\n  }\n\n  /** Pull the finished sheet up and out, bring the carriage home, go again. */\n  const feedOut = () => {\n    setPhase(\"feeding\")\n    const ms = 950\n    tween(\"paper\", () => pose.paper, setPaper, VIEW_TOP - sheetH - 20, ms, {\n      ease: easeIn,\n    })\n    tween(\"knob\", () => pose.knob, setKnob, pose.knob + 7, ms, {\n      ease: easeIn,\n    })\n    tween(\"carriage\", () => pose.carriage, setCarriage, carriageAt(0), 720, {\n      ease: easeInOut,\n    })\n    if (cursor.col > 0) {\n      play(\"lever\", 420, (t) => setLever(-24 * pulse(t, 0, 0.3, 0.12)))\n    }\n    schedule(() => {\n      pos = 0\n      paint()\n      setPhase(\"waiting\")\n      feedIn(() => schedule(step, startOf() * 0.5))\n    }, ms + 40)\n  }\n\n  const start = () => {\n    cancel()\n    stopMotion()\n    capsLock = false\n    strokes = layoutTypewriter(textOf(), M.columns)\n    spoken.textContent = textOf()\n    sizeSheet()\n    if (reduce) {\n      pos = strokes.length\n      setPhase(\"done\")\n      paint()\n      return\n    }\n    pos = 0\n    setPhase(\"waiting\")\n    paint()\n    feedIn(() => schedule(step, startOf()))\n  }\n\n  /** Redraw for a new line length, keeping the place in the text. */\n  const rebuild = () => {\n    const at = strokes[pos - 1]?.src ?? -1\n    stopMotion()\n    build()\n    if (phase === \"manual\") {\n      sizeSheet()\n      paint()\n      return\n    }\n    strokes = layoutTypewriter(textOf(), M.columns)\n    if (phase === \"done\") pos = strokes.length\n    else {\n      pos = 0\n      while (pos < strokes.length && strokes[pos]!.src <= at) pos += 1\n    }\n    sizeSheet()\n    paint()\n    if (phase === \"typing\" || phase === \"feeding\") {\n      setPhase(\"typing\")\n      schedule(step, 200)\n    } else if (phase === \"waiting\") schedule(step, startOf())\n  }\n\n  /* ---------------------------------------------------------------- */\n  /* Typing by hand                                                    */\n  /* ---------------------------------------------------------------- */\n\n  const interactiveOf = () => options.interactive ?? true\n\n  /** The first key from a person stops the script; the page stays. */\n  const takeOver = () => {\n    if (phase === \"manual\") return\n    cancel()\n    if (phase === \"feeding\" || phase === \"waiting\") {\n      stopMotion()\n      strokes = phase === \"feeding\" ? [] : strokes.slice(0, pos)\n    } else {\n      strokes = strokes.slice(0, pos)\n    }\n    pos = strokes.length\n    cursor = after(strokes[pos - 1])\n    nextSrc = Math.floor(strokes.at(-1)?.src ?? -1) + 1\n    setPhase(\"manual\")\n    sizeSheet()\n    if (!running.size) paint()\n  }\n\n  const typeReturn = () => {\n    takeOver()\n    const stroke: TypewriterStroke = {\n      kind: \"return\",\n      line: cursor.line + 1,\n      from: cursor.col,\n      src: nextSrc++,\n    }\n    strokes.push(stroke)\n    pos = strokes.length\n    sizeSheet()\n    if (reduce) {\n      cursor = after(stroke)\n      setPaper(-cursor.line * LH)\n      setCarriage(carriageAt(0))\n      return\n    }\n    carriageReturn(stroke)\n  }\n\n  const typeKey = (ch: string) => {\n    takeOver()\n    // No margin release: at the margin the carriage returns on its own.\n    if (cursor.col >= M.columns) typeReturn()\n    const stroke: Extract<TypewriterStroke, { kind: \"char\" }> = {\n      kind: \"char\",\n      ch,\n      line: cursor.line,\n      col: cursor.col,\n      src: nextSrc++,\n    }\n    strokes.push(stroke)\n    pos = strokes.length\n    if (reduce) {\n      if (ch !== \" \") letter(stroke)\n      cursor = after(stroke)\n      setCarriage(carriageAt(cursor.col))\n      return\n    }\n    strike(stroke, 120)\n  }\n\n  /** Backspace moves the carriage back a space; the next letter overstrikes. */\n  const typeBack = () => {\n    takeOver()\n    if (cursor.col === 0) return\n    cursor = { line: cursor.line, col: cursor.col - 1 }\n    if (reduce) {\n      setCarriage(carriageAt(cursor.col))\n      return\n    }\n    tween(\n      \"carriage\",\n      () => pose.carriage,\n      setCarriage,\n      carriageAt(cursor.col),\n      90,\n      {\n        ease: easeOut,\n      }\n    )\n    soundOn()?.key(true)\n  }\n\n  const setShiftLock = (on: boolean) => {\n    capsLock = on\n    if (reduce) setShift(on ? 1 : 0)\n    else\n      tween(\"shift\", () => pose.shift, setShift, on ? 1 : 0, 130, {\n        ease: easeOut,\n      })\n  }\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (!interactiveOf() || event.ctrlKey || event.metaKey || event.altKey) {\n      return\n    }\n    const { key } = event\n    if (key === \"Enter\") {\n      if (!event.repeat) typeReturn()\n    } else if (key === \"Backspace\") {\n      typeBack()\n    } else if (key.length === 1) {\n      // A real machine doesn't auto-repeat.\n      if (!event.repeat) typeKey(key)\n    } else {\n      return\n    }\n    event.preventDefault()\n  }\n\n  const onPointerDown = (event: PointerEvent) => {\n    if (!interactiveOf() || event.button !== 0) return\n    root.focus({ preventScroll: true })\n    const hit = (event.target as Element | null)?.closest?.(\"[data-key]\")\n    const key = hit?.getAttribute(\"data-key\")\n    if (key == null) return\n    event.preventDefault()\n    if (key === \"shift\") setShiftLock(!capsLock)\n    else if (key === \"return\") typeReturn()\n    else typeKey(capsLock ? key.toUpperCase() : key)\n  }\n\n  /** Focus, keyboard, and clickable parts follow `interactive`. */\n  function setInteractive() {\n    const on = interactiveOf()\n    if (on) {\n      root.tabIndex = 0\n      root.setAttribute(\"role\", \"group\")\n      root.setAttribute(\n        \"aria-label\",\n        \"Typewriter. Focus it and type, or click its keys.\"\n      )\n    } else {\n      root.removeAttribute(\"tabindex\")\n      root.removeAttribute(\"role\")\n      root.removeAttribute(\"aria-label\")\n    }\n    for (const el of svg.querySelectorAll<SVGElement>(\"[data-key]\")) {\n      el.style.cursor = on ? \"pointer\" : \"\"\n    }\n  }\n\n  root.addEventListener(\"keydown\", onKeyDown)\n  svg.addEventListener(\"pointerdown\", onPointerDown)\n\n  /* ---------------------------------------------------------------- */\n  /* Theme                                                             */\n  /* ---------------------------------------------------------------- */\n\n  const isDark = () => {\n    const html = document.documentElement\n    if (html.classList.contains(\"dark\")) return true\n    if (html.classList.contains(\"light\")) return false\n    const attr = html.getAttribute(\"data-theme\")\n    if (attr === \"dark\") return true\n    if (attr === \"light\") return false\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  }\n  /** Ivory in light, a touch dimmer in dark so it doesn't glare. */\n  const applyTheme = () => {\n    root.style.setProperty(\n      \"--typewriter-sheet\",\n      isDark() ? \"#ECE7DA\" : \"#FBF9F3\"\n    )\n  }\n\n  build()\n  applyTheme()\n\n  const mqReduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  reduce = mqReduce.matches\n  const onReduce = () => {\n    reduce = mqReduce.matches\n    start()\n  }\n  mqReduce.addEventListener(\"change\", onReduce)\n\n  start()\n\n  const theme = new MutationObserver(applyTheme)\n  theme.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"data-theme\", \"style\"],\n  })\n  const mqDark = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  mqDark.addEventListener(\"change\", applyTheme)\n\n  const io = new IntersectionObserver(([entry]) => {\n    onScreen = entry?.isIntersecting ?? true\n    sync()\n  })\n  io.observe(root)\n  const onVisibility = () => sync()\n  document.addEventListener(\"visibilitychange\", onVisibility)\n\n  return {\n    setOptions(next) {\n      const prev = options\n      options = { ...options, ...next }\n      if (textOf() !== (prev.text ?? DEFAULT_TEXT)) {\n        start()\n        return\n      }\n      if (\n        columnsOf() !== M.columns ||\n        options.color !== prev.color ||\n        options.label !== prev.label\n      ) {\n        rebuild()\n      }\n      if (options.interactive !== prev.interactive) setInteractive()\n      else if (options.jitter !== prev.jitter) {\n        for (const motion of running.values()) motion.run(1)\n        stopMotion()\n        paint()\n      }\n      const loop = options.loop ?? true\n      if (loop !== (prev.loop ?? true) && phase === \"done\") {\n        if (loop) schedule(feedOut, holdOf())\n        else cancel()\n      }\n    },\n    restart: start,\n    destroy() {\n      destroyed = true\n      cancel()\n      stopMotion()\n      theme.disconnect()\n      mqDark.removeEventListener(\"change\", applyTheme)\n      io.disconnect()\n      mqReduce.removeEventListener(\"change\", onReduce)\n      document.removeEventListener(\"visibilitychange\", onVisibility)\n      root.removeEventListener(\"keydown\", onKeyDown)\n      svg.removeEventListener(\"pointerdown\", onPointerDown)\n      for (const name of [\"tabindex\", \"role\", \"aria-label\"]) {\n        root.removeAttribute(name)\n      }\n      sound?.close()\n      root.style.removeProperty(\"--typewriter-sheet\")\n      spoken.remove()\n      svg.remove()\n    },\n  }\n}\n\nexport type TypewriterProps = TypewriterOptions & {\n  className?: string\n}\n\n/**\n * A typewriter that types — each letter presses its key, swings that key's\n * typebar up to strike the ribbon, and steps the carriage left. At the\n * margin the lever kicks, the platen turns up a line, and the carriage\n * slides home. Ink follows `currentColor`. Honors\n * `prefers-reduced-motion`.\n */\nexport function Typewriter({\n  className,\n  text = DEFAULT_TEXT,\n  speed = DEFAULT_SPEED,\n  humanize = true,\n  loop = true,\n  hold = DEFAULT_HOLD,\n  startDelay = DEFAULT_START_DELAY,\n  color = DEFAULT_COLOR,\n  columns = DEFAULT_COLUMNS,\n  jitter = DEFAULT_JITTER,\n  sound = false,\n  interactive = true,\n  label,\n  onDone,\n}: TypewriterProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const instanceRef = useRef<TypewriterInstance | null>(null)\n  const onDoneRef = useRef(onDone)\n\n  useEffect(() => {\n    onDoneRef.current = onDone\n  }, [onDone])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    instanceRef.current = createTypewriter(root, {\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      interactive,\n      label,\n      onDone: () => onDoneRef.current?.(),\n    })\n    return () => {\n      instanceRef.current?.destroy()\n      instanceRef.current = null\n    }\n    // Engine reads live options via setOptions; mount once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    instanceRef.current?.setOptions({\n      text,\n      speed,\n      humanize,\n      loop,\n      hold,\n      startDelay,\n      color,\n      columns,\n      jitter,\n      sound,\n      interactive,\n      label,\n    })\n  }, [\n    text,\n    speed,\n    humanize,\n    loop,\n    hold,\n    startDelay,\n    color,\n    columns,\n    jitter,\n    sound,\n    interactive,\n    label,\n  ])\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"typewriter\"\n      className={cn(\n        \"relative size-full overflow-hidden bg-background font-mono text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset\",\n        className\n      )}\n    />\n  )\n}\n",
       "type": "registry:ui",
       "target": "components/ui/typewriter.tsx"
     }
diff --git a/registry/typewriter/registry.json b/registry/typewriter/registry.json
index 10a9095..e6f2a25 100644
--- a/registry/typewriter/registry.json
+++ b/registry/typewriter/registry.json
@@ -5,7 +5,7 @@
       "name": "typewriter",
       "type": "registry:ui",
       "title": "Typewriter",
-      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
+      "description": "A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.",
       "files": [
         {
           "path": "typewriter.tsx",
@@ -18,7 +18,7 @@
       "name": "typewriter-svelte",
       "type": "registry:ui",
       "title": "Typewriter",
-      "description": "A real typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along as the letter lands on the sheet.",
+      "description": "A real, playable typewriter in SVG — each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.",
       "files": [
         {
           "path": "typewriter.svelte",
diff --git a/registry/typewriter/typewriter-demo.tsx b/registry/typewriter/typewriter-demo.tsx
index 355fa0c..074f24b 100644
--- a/registry/typewriter/typewriter-demo.tsx
+++ b/registry/typewriter/typewriter-demo.tsx
@@ -38,6 +38,7 @@ const DEFAULTS = {
   humanize: true,
   loop: true,
   sound: false,
+  interactive: true,
 }
 
 export function TypewriterDemo() {
@@ -50,7 +51,7 @@ export function TypewriterDemo() {
   return (
     <>
       <ComponentPreview title="Typewriter" stageClassName="min-h-0 p-0">
-        <div className="aspect-[16/9] max-h-[70svh] w-full px-4 pt-2 pb-4">
+        <div className="relative aspect-[16/9] max-h-[70svh] w-full px-4 pt-2 pb-4">
           <Typewriter
             key={take}
             color={props.color}
@@ -61,7 +62,14 @@ export function TypewriterDemo() {
             humanize={props.humanize}
             loop={props.loop}
             sound={props.sound}
+            interactive={props.interactive}
+            label="23rd"
           />
+          {props.interactive ? (
+            <p className="pointer-events-none absolute bottom-3 left-4 text-xs text-muted-foreground">
+              Click it and type
+            </p>
+          ) : null}
         </div>
       </ComponentPreview>
 
@@ -79,6 +87,8 @@ export function TypewriterDemo() {
           humanize: props.humanize ? undefined : false,
           loop: props.loop ? undefined : false,
           sound: props.sound ? true : undefined,
+          interactive: props.interactive ? undefined : false,
+          label: "23rd",
         }}
       >
         <div className="flex flex-col gap-1.5">
@@ -188,6 +198,12 @@ export function TypewriterDemo() {
           checked={props.loop}
           onChange={(v) => updateProp("loop", v)}
         />
+        <ControlSwitch
+          label="Interactive"
+          description="Type on it, or click its keys"
+          checked={props.interactive}
+          onChange={(v) => updateProp("interactive", v)}
+        />
         <ControlSwitch
           label="Sound"
           description="Key clicks, bell, and return"
diff --git a/registry/typewriter/typewriter-vanilla.ts b/registry/typewriter/typewriter-vanilla.ts
index 1515cdb..2bfeac5 100644
--- a/registry/typewriter/typewriter-vanilla.ts
+++ b/registry/typewriter/typewriter-vanilla.ts
@@ -38,6 +38,14 @@ export type TypewriterOptions = {
   jitter?: number
   /** Synthesized key clicks, bell, and return. Default `false`. */
   sound?: boolean
+  /**
+   * Click the machine and type on it: your keyboard, or its keys, space
+   * bar, shift lock, and return lever. Taking over stops the script.
+   * Default `true`.
+   */
+  interactive?: boolean
+  /** Text on a chrome nameplate on the front. Omit for none. */
+  label?: string
   /** Called each time the last character lands. */
   onDone?: () => void
 }
@@ -313,6 +321,14 @@ const KEY_R = 12.5
 const KEY_TILT = 0.64
 /** How far a key travels when pressed. */
 const KEY_TRAVEL = 4
+/** Paper lean per unit/s of carriage speed, in degrees, and its limit. */
+const FLEX_GAIN = 0.0042
+const FLEX_MAX = 5
+/** Spring the paper wobbles back on. */
+const FLEX_K = 170
+const FLEX_C = 9
+/** Platen line: where the sheet bends from. */
+const FLEX_ANCHOR = 40
 /** Shifted characters, and the key that types them. */
 const SHIFTED: Record<string, string> = {
   "!": "1",
@@ -411,6 +427,10 @@ type Key = { cap: SVGGElement; bar: Bar | null; v: number }
 
 type Machine = {
   columns: number
+  /** Everything but the ground shadow — it shudders on each strike. */
+  rig: SVGGElement
+  /** Under-inked fills, for letters the ribbon didn't fully cover. */
+  inkFills: string[]
   carriage: SVGGElement
   paper: SVGGElement
   sheet: SVGRectElement
@@ -439,7 +459,8 @@ function drawMachine(
   svg: SVGSVGElement,
   id: string,
   columns: number,
-  color: string
+  color: string,
+  label?: string
 ): Machine {
   const span = columns * CW
   const platenL = -PAD - 22
@@ -607,7 +628,36 @@ function drawMachine(
         [1, "#3A2E1C", 0.34],
       ]
     ),
+    contact: gradient("contact", "linearGradient", down, [
+      [0, "#000", 0.3],
+      [1, "#000", 0],
+    ]),
   }
+  const inkFills = (
+    [
+      [down, 0, 0.36],
+      [down, 1, 0.4],
+      [across, 0, 0.42],
+      [across, 1, 0.42],
+    ] as const
+  ).map(([dir, faintEnd, alpha], i) =>
+    gradient(
+      `ink-${i}`,
+      "linearGradient",
+      dir,
+      faintEnd === 0
+        ? [
+            [0, INK, alpha],
+            [0.55, INK, 1],
+            [1, INK, 1],
+          ]
+        : [
+            [0, INK, 1],
+            [0.45, INK, 1],
+            [1, INK, alpha],
+          ]
+    )
+  )
 
   // The sheet fades out at the top of the frame and tucks behind the
   // platen at the bottom.
@@ -641,7 +691,8 @@ function drawMachine(
 
   /* ---------------- Carriage ---------------- */
 
-  const carriage = draw("g", {}, svg)
+  const rig = draw("g", {}, svg)
+  const carriage = draw("g", {}, rig)
   // Rail it rides on.
   draw(
     "rect",
@@ -746,7 +797,7 @@ function drawMachine(
     return { x, lines }
   })
   // Carriage return lever: chrome arm, bakelite grip.
-  const lever = draw("g", {}, carriage)
+  const lever = draw("g", { "data-key": "return" }, carriage)
   const leverPivot: [number, number] = [leverX, 30]
   draw(
     "rect",
@@ -883,11 +934,16 @@ function drawMachine(
 
   /* ---------------- Body ---------------- */
 
-  const body = draw("g", {}, svg)
+  const body = draw("g", {}, rig)
   const shell =
     "M-192 42Q-214 42 -219 62C-228 120 -240 190 -247 246Q-249 262 -232 264H232Q249 262 247 246C240 190 228 120 219 62Q214 42 192 42Z"
   draw("path", { d: shell, fill: fills.body }, body)
   draw("path", { d: shell, fill: fills.sides }, body)
+  draw(
+    "rect",
+    { x: -206, y: 42.5, width: 412, height: 15, fill: fills.contact },
+    body
+  )
   // Front face, below the top surfaces, with a chrome trim.
   draw(
     "path",
@@ -919,6 +975,43 @@ function drawMachine(
     },
     body
   )
+  if (label) {
+    const w = Math.max(36, label.length * 7.4 + 18)
+    draw(
+      "rect",
+      {
+        x: -w / 2,
+        y: 268.5,
+        width: w,
+        height: 14,
+        rx: 3,
+        fill: fills.chrome,
+        stroke: CHROME_EDGE,
+        "stroke-width": 0.8,
+      },
+      body
+    )
+    for (const [dy, fill] of [
+      [0.6, "#fff"],
+      [0, "#30353A"],
+    ] as const) {
+      const plate = draw(
+        "text",
+        {
+          x: 0,
+          y: 276 + dy,
+          "text-anchor": "middle",
+          "dominant-baseline": "central",
+          "font-size": 8.4,
+          "font-weight": 700,
+          "letter-spacing": 1.6,
+          fill,
+        },
+        body
+      )
+      plate.textContent = label
+    }
+  }
   for (const x of [-228, 188]) {
     draw(
       "rect",
@@ -1126,7 +1219,7 @@ function drawMachine(
   const ry = KEY_R * KEY_TILT
   const height = 4.5
   /** A round key on its stem, seen from above: rim, cap, legend, shadow. */
-  const keyAt = (x: number, y: number, label: string) => {
+  const keyAt = (x: number, y: number, label: string, ch: string) => {
     draw(
       "ellipse",
       {
@@ -1198,6 +1291,19 @@ function drawMachine(
       cap
     )
     text.textContent = label
+    draw(
+      "path",
+      {
+        d: `M${x - KEY_R + 3.6} ${y - 0.4}A${KEY_R - 3.6} ${ry - 2.3} 0 0 1 ${x + KEY_R - 3.6} ${y - 0.4}`,
+        fill: "none",
+        stroke: "#fff",
+        "stroke-width": 0.9,
+        "stroke-opacity": 0.32,
+        "stroke-linecap": "round",
+      },
+      cap
+    )
+    cap.setAttribute("data-key", ch)
     return cap
   }
 
@@ -1207,7 +1313,7 @@ function drawMachine(
     Array.from(row).forEach((ch, i) => {
       const x = -157.5 + (r - 1.5) * 9 + i * KEY_PITCH
       const key: Key = {
-        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase()),
+        cap: keyAt(x, KEY_Y[r]!, ch.toUpperCase(), ch),
         bar: null,
         v: 0,
       }
@@ -1290,7 +1396,9 @@ function drawMachine(
   const shifts = [-1, 1].map((side) => {
     const x = side * 201
     const arrow = `M${x} ${y3 - 3.6}L${x + 4} ${y3 + 0.6}H${x + 1.6}V${y3 + 3.4}H${x - 1.6}V${y3 + 0.6}H${x - 4}Z`
-    return { cap: pill(x, y3, 30, arrow), bar: null, v: 0 } satisfies Key
+    const cap = pill(x, y3, 30, arrow)
+    cap.setAttribute("data-key", "shift")
+    return { cap, bar: null, v: 0 } satisfies Key
   })
 
   // Space bar: a chrome bar on two arms.
@@ -1307,7 +1415,7 @@ function drawMachine(
       body
     )
   }
-  const spaceCap = draw("g", {}, body)
+  const spaceCap = draw("g", { "data-key": " " }, body)
   draw(
     "rect",
     {
@@ -1335,7 +1443,7 @@ function drawMachine(
   const space: Key = { cap: spaceCap, bar: null, v: 0 }
 
   // One typebar per key, fanned left to right in key order.
-  const overlay = draw("g", {}, svg)
+  const overlay = draw("g", {}, rig)
   placed.sort((a, b) => a.x - b.x)
   const bars = placed.map(({ key }, i) => {
     const angle = -SPREAD + (2 * SPREAD * i) / (placed.length - 1)
@@ -1386,6 +1494,8 @@ function drawMachine(
 
   return {
     columns,
+    rig,
+    inkFills,
     carriage,
     paper,
     sheet,
@@ -1470,7 +1580,14 @@ export function createTypewriter(
   /* ---------------------------------------------------------------- */
 
   const build = () => {
-    M = drawMachine(svg, id, columnsOf(), options.color ?? DEFAULT_COLOR)
+    M = drawMachine(
+      svg,
+      id,
+      columnsOf(),
+      options.color ?? DEFAULT_COLOR,
+      options.label
+    )
+    setInteractive()
   }
 
   /* ---------------------------------------------------------------- */
@@ -1493,9 +1610,21 @@ export function createTypewriter(
     pose.carriage = x
     M.carriage.setAttribute("transform", `translate(${x.toFixed(2)} 0)`)
   }
+  /** Sheet lean, a spring driven by how fast the carriage moves. */
+  const flex = { angle: 0, vel: 0, x: 0, t: 0 }
+  const placePaper = () => {
+    const y = pose.paper
+    const a = flex.angle
+    M.paper.setAttribute(
+      "transform",
+      Math.abs(a) < 0.01
+        ? `translate(0 ${y.toFixed(2)})`
+        : `translate(0 ${FLEX_ANCHOR}) skewX(${a.toFixed(3)}) translate(0 ${(y - FLEX_ANCHOR).toFixed(2)})`
+    )
+  }
   const setPaper = (y: number) => {
     pose.paper = y
-    M.paper.setAttribute("transform", `translate(0 ${y.toFixed(2)})`)
+    placePaper()
   }
   /** Knurling on the platen knobs, scrolling as the platen turns. */
   const setKnob = (phase: number) => {
@@ -1593,8 +1722,11 @@ export function createTypewriter(
     setKnob(pose.knob)
     setSpool(pose.spool)
     setLever(0)
-    setShift(0)
+    setShift(capsLock ? 1 : 0)
     setRibbon(0)
+    flex.angle = 0
+    flex.vel = 0
+    placePaper()
     for (const key of M.keys.values()) setKey(key, 0)
     setKey(M.space, 0)
     for (const bar of M.bars) setBar(bar, 0)
@@ -1621,7 +1753,23 @@ export function createTypewriter(
       motion.run(motion.ease(t))
       if (t >= 1) running.delete(key)
     }
-    if (queued.length || running.size) raf = requestAnimationFrame(frame)
+    // The sheet leans against the carriage's motion, then wobbles upright.
+    const dt = flex.t ? Math.min(0.05, (now - flex.t) / 1000) : 0
+    flex.t = now
+    if (dt > 0) {
+      const speed = (pose.carriage - flex.x) / dt
+      const target = clamp(speed * FLEX_GAIN, -FLEX_MAX, FLEX_MAX)
+      flex.vel += (-FLEX_K * (flex.angle - target) - FLEX_C * flex.vel) * dt
+      flex.angle += flex.vel * dt
+      placePaper()
+    }
+    flex.x = pose.carriage
+    const settling = Math.abs(flex.angle) > 0.02 || Math.abs(flex.vel) > 0.05
+    if (queued.length || running.size || settling) {
+      raf = requestAnimationFrame(frame)
+    } else {
+      flex.t = 0
+    }
   }
   const wake = () => {
     if (!raf) raf = requestAnimationFrame(frame)
@@ -1694,7 +1842,11 @@ export function createTypewriter(
   let pos = 0
   let cursor = { line: 0, col: 0 }
   let sheetH = 600
-  let phase: "waiting" | "typing" | "done" | "feeding" = "waiting"
+  let phase: "waiting" | "typing" | "done" | "feeding" | "manual" = "waiting"
+  /** Shift lock, from the machine's own shift keys. */
+  let capsLock = false
+  /** Next `src` for strokes typed by hand. */
+  let nextSrc = 0
   let rang = false
   let destroyed = false
   let reduce = false
@@ -1752,26 +1904,49 @@ export function createTypewriter(
       : { line: stroke.line, col: 0 }
   }
 
+  /**
+   * A letter as it lands: a little off its cell, sometimes under-inked
+   * where the ribbon missed, now and then struck twice.
+   */
   const letter = (stroke: Extract<TypewriterStroke, { kind: "char" }>) => {
     const jitter = jitterOf()
-    const n = Math.floor(stroke.src) * 4
+    const n = Math.floor(stroke.src) * 8
     const x = stroke.col * CW + CW / 2
     const y = stroke.line * LH
-    const el = draw("text", { x, y }, M.ink)
-    el.textContent = stroke.ch
-    let ink = 1
-    if (jitter > 0) {
-      const dx = (hash(n) - 0.5) * jitter * 1.1
-      const dy = (hash(n + 1) - 0.5) * jitter * 1.6
-      const tilt = (hash(n + 2) - 0.5) * jitter * 3.2
-      el.setAttribute(
-        "transform",
-        `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`
-      )
-      ink = 1 - hash(n + 3) * jitter * 0.42
+    const group = draw("g", {}, M.ink)
+    const glyph = (attrs: Record<string, string | number>) => {
+      const el = draw("text", { x, y, ...attrs }, group)
+      el.textContent = stroke.ch
+      return el
+    }
+    if (jitter <= 0) {
+      glyph({})
+      return group
     }
-    el.setAttribute("fill-opacity", ink.toFixed(3))
-    return { el, ink }
+    const dx = (hash(n) - 0.5) * jitter * 1.1
+    const dy = (hash(n + 1) - 0.5) * jitter * 1.6
+    const tilt = (hash(n + 2) - 0.5) * jitter * 3.2
+    group.setAttribute(
+      "transform",
+      `translate(${dx.toFixed(2)} ${dy.toFixed(2)}) rotate(${tilt.toFixed(2)} ${x} ${y})`
+    )
+    const ink = 1 - hash(n + 3) * jitter * 0.38
+    const worn = hash(n + 4) < jitter * 0.6
+    glyph({
+      "fill-opacity": ink.toFixed(3),
+      ...(worn
+        ? {
+            fill: M.inkFills[Math.floor(hash(n + 5) * M.inkFills.length)]!,
+          }
+        : {}),
+    })
+    if (hash(n + 6) < jitter * 0.14) {
+      glyph({
+        "fill-opacity": (ink * 0.42).toFixed(3),
+        transform: `translate(${(0.45 + hash(n + 7) * 0.3).toFixed(2)} 0.3)`,
+      })
+    }
+    return group
   }
 
   const sizeSheet = () => {
@@ -1791,7 +1966,7 @@ export function createTypewriter(
       const stroke = strokes[i]!
       if (stroke.kind === "char" && stroke.ch !== " ") letter(stroke)
     }
-    cursor = after(strokes[pos - 1])
+    if (phase !== "manual") cursor = after(strokes[pos - 1])
     rang = cursor.col >= M.columns - BELL_CELLS
     restPose()
   }
@@ -1822,9 +1997,12 @@ export function createTypewriter(
   }
 
   /** Press the key, swing its bar into the ribbon, step the carriage. */
-  const strike = (stroke: Extract<TypewriterStroke, { kind: "char" }>) => {
+  const strike = (
+    stroke: Extract<TypewriterStroke, { kind: "char" }>,
+    fixed?: number
+  ) => {
     const base = 1000 / speedOf()
-    const ms = clamp(base * 1.7, 90, 170)
+    const ms = fixed ?? clamp(base * 1.7, 90, 170)
     const audio = soundOn()
     const step = carriageAt(stroke.col + 1)
     cursor = { line: stroke.line, col: stroke.col + 1 }
@@ -1840,7 +2018,7 @@ export function createTypewriter(
       const { key, shift } = keyFor(stroke.ch)
       const lead = shift ? ms * 0.25 : 0
       const impact = lead + ms * 0.42
-      if (shift) {
+      if (shift && !capsLock) {
         let from = 0
         play("shift", ms * 1.6, (t) => setShift(pulse(t, from, 0.16, 0.5)), {
           begin: () => {
@@ -1877,13 +2055,24 @@ export function createTypewriter(
           lifted = pose.ribbon
         },
       })
-      const { el, ink } = letter(stroke)
-      el.setAttribute("fill-opacity", "0")
+      const mark = letter(stroke)
+      mark.setAttribute("opacity", "0")
       play(
         `ink-${stroke.src}`,
         60,
+        (v) => mark.setAttribute("opacity", v.toFixed(3)),
+        { delay: impact }
+      )
+      // The whole machine takes the blow.
+      play(
+        "shudder",
+        110,
         (v) => {
-          el.setAttribute("fill-opacity", (v * ink).toFixed(3))
+          const y = Math.sin(v * Math.PI) * (1 - v) * 1.6
+          M.rig.setAttribute(
+            "transform",
+            y > 0.01 ? `translate(0 ${y.toFixed(2)})` : ""
+          )
         },
         { delay: impact }
       )
@@ -1994,6 +2183,7 @@ export function createTypewriter(
   const start = () => {
     cancel()
     stopMotion()
+    capsLock = false
     strokes = layoutTypewriter(textOf(), M.columns)
     spoken.textContent = textOf()
     sizeSheet()
@@ -2014,6 +2204,11 @@ export function createTypewriter(
     const at = strokes[pos - 1]?.src ?? -1
     stopMotion()
     build()
+    if (phase === "manual") {
+      sizeSheet()
+      paint()
+      return
+    }
     strokes = layoutTypewriter(textOf(), M.columns)
     if (phase === "done") pos = strokes.length
     else {
@@ -2028,6 +2223,156 @@ export function createTypewriter(
     } else if (phase === "waiting") schedule(step, startOf())
   }
 
+  /* ---------------------------------------------------------------- */
+  /* Typing by hand                                                    */
+  /* ---------------------------------------------------------------- */
+
+  const interactiveOf = () => options.interactive ?? true
+
+  /** The first key from a person stops the script; the page stays. */
+  const takeOver = () => {
+    if (phase === "manual") return
+    cancel()
+    if (phase === "feeding" || phase === "waiting") {
+      stopMotion()
+      strokes = phase === "feeding" ? [] : strokes.slice(0, pos)
+    } else {
+      strokes = strokes.slice(0, pos)
+    }
+    pos = strokes.length
+    cursor = after(strokes[pos - 1])
+    nextSrc = Math.floor(strokes.at(-1)?.src ?? -1) + 1
+    setPhase("manual")
+    sizeSheet()
+    if (!running.size) paint()
+  }
+
+  const typeReturn = () => {
+    takeOver()
+    const stroke: TypewriterStroke = {
+      kind: "return",
+      line: cursor.line + 1,
+      from: cursor.col,
+      src: nextSrc++,
+    }
+    strokes.push(stroke)
+    pos = strokes.length
+    sizeSheet()
+    if (reduce) {
+      cursor = after(stroke)
+      setPaper(-cursor.line * LH)
+      setCarriage(carriageAt(0))
+      return
+    }
+    carriageReturn(stroke)
+  }
+
+  const typeKey = (ch: string) => {
+    takeOver()
+    // No margin release: at the margin the carriage returns on its own.
+    if (cursor.col >= M.columns) typeReturn()
+    const stroke: Extract<TypewriterStroke, { kind: "char" }> = {
+      kind: "char",
+      ch,
+      line: cursor.line,
+      col: cursor.col,
+      src: nextSrc++,
+    }
+    strokes.push(stroke)
+    pos = strokes.length
+    if (reduce) {
+      if (ch !== " ") letter(stroke)
+      cursor = after(stroke)
+      setCarriage(carriageAt(cursor.col))
+      return
+    }
+    strike(stroke, 120)
+  }
+
+  /** Backspace moves the carriage back a space; the next letter overstrikes. */
+  const typeBack = () => {
+    takeOver()
+    if (cursor.col === 0) return
+    cursor = { line: cursor.line, col: cursor.col - 1 }
+    if (reduce) {
+      setCarriage(carriageAt(cursor.col))
+      return
+    }
+    tween(
+      "carriage",
+      () => pose.carriage,
+      setCarriage,
+      carriageAt(cursor.col),
+      90,
+      {
+        ease: easeOut,
+      }
+    )
+    soundOn()?.key(true)
+  }
+
+  const setShiftLock = (on: boolean) => {
+    capsLock = on
+    if (reduce) setShift(on ? 1 : 0)
+    else
+      tween("shift", () => pose.shift, setShift, on ? 1 : 0, 130, {
+        ease: easeOut,
+      })
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (!interactiveOf() || event.ctrlKey || event.metaKey || event.altKey) {
+      return
+    }
+    const { key } = event
+    if (key === "Enter") {
+      if (!event.repeat) typeReturn()
+    } else if (key === "Backspace") {
+      typeBack()
+    } else if (key.length === 1) {
+      // A real machine doesn't auto-repeat.
+      if (!event.repeat) typeKey(key)
+    } else {
+      return
+    }
+    event.preventDefault()
+  }
+
+  const onPointerDown = (event: PointerEvent) => {
+    if (!interactiveOf() || event.button !== 0) return
+    root.focus({ preventScroll: true })
+    const hit = (event.target as Element | null)?.closest?.("[data-key]")
+    const key = hit?.getAttribute("data-key")
+    if (key == null) return
+    event.preventDefault()
+    if (key === "shift") setShiftLock(!capsLock)
+    else if (key === "return") typeReturn()
+    else typeKey(capsLock ? key.toUpperCase() : key)
+  }
+
+  /** Focus, keyboard, and clickable parts follow `interactive`. */
+  function setInteractive() {
+    const on = interactiveOf()
+    if (on) {
+      root.tabIndex = 0
+      root.setAttribute("role", "group")
+      root.setAttribute(
+        "aria-label",
+        "Typewriter. Focus it and type, or click its keys."
+      )
+    } else {
+      root.removeAttribute("tabindex")
+      root.removeAttribute("role")
+      root.removeAttribute("aria-label")
+    }
+    for (const el of svg.querySelectorAll<SVGElement>("[data-key]")) {
+      el.style.cursor = on ? "pointer" : ""
+    }
+  }
+
+  root.addEventListener("keydown", onKeyDown)
+  svg.addEventListener("pointerdown", onPointerDown)
+
   /* ---------------------------------------------------------------- */
   /* Theme                                                             */
   /* ---------------------------------------------------------------- */
@@ -2086,7 +2431,14 @@ export function createTypewriter(
         start()
         return
       }
-      if (columnsOf() !== M.columns || options.color !== prev.color) rebuild()
+      if (
+        columnsOf() !== M.columns ||
+        options.color !== prev.color ||
+        options.label !== prev.label
+      ) {
+        rebuild()
+      }
+      if (options.interactive !== prev.interactive) setInteractive()
       else if (options.jitter !== prev.jitter) {
         for (const motion of running.values()) motion.run(1)
         stopMotion()
@@ -2108,6 +2460,11 @@ export function createTypewriter(
       io.disconnect()
       mqReduce.removeEventListener("change", onReduce)
       document.removeEventListener("visibilitychange", onVisibility)
+      root.removeEventListener("keydown", onKeyDown)
+      svg.removeEventListener("pointerdown", onPointerDown)
+      for (const name of ["tabindex", "role", "aria-label"]) {
+        root.removeAttribute(name)
+      }
       sound?.close()
       root.style.removeProperty("--typewriter-sheet")
       spoken.remove()
diff --git a/registry/typewriter/typewriter.svelte b/registry/typewriter/typewriter.svelte
index 8a97bdb..70a0d4d 100644
--- a/registry/typewriter/typewriter.svelte
+++ b/registry/typewriter/typewriter.svelte
@@ -36,6 +36,8 @@
     columns = DEFAULT_COLUMNS,
     jitter = DEFAULT_JITTER,
     sound = false,
+    interactive = true,
+    label,
     onDone,
   }: Props = $props()
 
@@ -55,6 +57,8 @@
       columns,
       jitter,
       sound,
+      interactive,
+      label,
       onDone,
     })
     return () => {
@@ -75,6 +79,8 @@
       columns,
       jitter,
       sound,
+      interactive,
+      label,
       onDone,
     })
   })
@@ -84,7 +90,7 @@
   bind:this={root}
   data-slot="typewriter"
   class={cn(
-    "relative size-full overflow-hidden bg-background font-mono text-foreground",
+    "relative size-full overflow-hidden bg-background font-mono text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset",
     className
   )}
 ></div>
diff --git a/registry/typewriter/typewriter.tsx b/registry/typewriter/typewriter.tsx
index adf1235..cf78259 100644
--- a/registry/typewriter/typewriter.tsx
+++ b/registry/typewriter/typewriter.tsx
@@ -56,6 +56,8 @@ export function Typewriter({
   columns = DEFAULT_COLUMNS,
   jitter = DEFAULT_JITTER,
   sound = false,
+  interactive = true,
+  label,
   onDone,
 }: TypewriterProps) {
   const rootRef = useRef<HTMLDivElement>(null)
@@ -80,6 +82,8 @@ export function Typewriter({
       columns,
       jitter,
       sound,
+      interactive,
+      label,
       onDone: () => onDoneRef.current?.(),
     })
     return () => {
@@ -102,6 +106,8 @@ export function Typewriter({
       columns,
       jitter,
       sound,
+      interactive,
+      label,
     })
   }, [
     text,
@@ -114,6 +120,8 @@ export function Typewriter({
     columns,
     jitter,
     sound,
+    interactive,
+    label,
   ])
 
   return (
@@ -121,7 +129,7 @@ export function Typewriter({
       ref={rootRef}
       data-slot="typewriter"
       className={cn(
-        "relative size-full overflow-hidden bg-background font-mono text-foreground",
+        "relative size-full overflow-hidden bg-background font-mono text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset",
         className
       )}
     />
diff --git a/skills/23rd/SKILL.md b/skills/23rd/SKILL.md
index 5185892..fcc26ed 100644
--- a/skills/23rd/SKILL.md
+++ b/skills/23rd/SKILL.md
@@ -142,7 +142,7 @@ Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `Logo
 
 `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`).
 
-`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). `color` sets the body enamel (default mint `#8EC3B5`); everything else is fixed chrome, rubber, and an ivory sheet.
+`Typewriter` is a whole machine drawn in SVG that scales to fit its parent, centered, with the sheet growing above it as lines feed. Give the parent a height (roughly 2:1 wide). `color` sets the body enamel (default mint `#8EC3B5`); everything else is fixed chrome, rubber, and an ivory sheet. With `interactive` (default on) visitors can click it and type, which stops the script.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
diff --git a/skills/23rd/apis.md b/skills/23rd/apis.md
index 6b818b3..2be40bf 100644
--- a/skills/23rd/apis.md
+++ b/skills/23rd/apis.md
@@ -376,6 +376,8 @@ type TypewriterProps = {
   columns?: number // 32 characters per line, clamped 16–60
   jitter?: number // 0.3, 0–1
   sound?: boolean // false
+  interactive?: boolean // true: focusable; type on it or click its keys
+  label?: string // nameplate text on the front; omit for none
   onDone?: () => void // each time the last character lands
   className?: string
 }
diff --git a/skills/23rd/components.md b/skills/23rd/components.md
index 06618cc..8c8f177 100644
--- a/skills/23rd/components.md
+++ b/skills/23rd/components.md
@@ -394,7 +394,7 @@ Best fit: a letter, a manifesto, or a hero line that should arrive one keystroke
 
 Not this: a wordmark (`ascii-logo`), a blinking input caret, plain typed text in a paragraph (this draws the whole machine), or a background behind other copy.
 
-Deps: none. Props: `color` (`#8EC3B5`, body enamel), `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `onDone`.
+Deps: none. Props: `color` (`#8EC3B5`, body enamel), `text` (`DEFAULT_TEXT`), `speed` (12 chars/s), `humanize` (true), `jitter` (0.3), `columns` (32, range 16–60), `loop` (true), `hold` (2600 ms), `startDelay` (600 ms), `sound` (false), `interactive` (true), `label` (none; nameplate text), `onDone`.
 
 ```tsx
 "use client"
@@ -409,5 +409,5 @@ export function Letter() {
 }
 ```
 
-Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. Only the enamel takes `color`; there is no ink, theme, or paper color prop. The sheet is ivory (dimmer in dark mode). `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
+Pitfalls: `\n` is the only way to force a line break; everything else wraps at words to `columns`. The machine scales with its parent, so text size follows the parent's size, not a `text-*` class; fewer `columns` make a narrower machine with larger type. Only the enamel takes `color`; there is no ink, theme, or paper color prop. `interactive` makes the root focusable: keyboard typing, Enter = return, Backspace = carriage back a space (overstrike), and clicking keys, space, shift (locks), and the lever. The first manual key stops the script; remount with a new `key` to bring it back. The sheet is ivory (dimmer in dark mode). `sound` is Web Audio and stays silent until the visitor has interacted with the page. Reduced motion prints the whole page at once. Changing `text` starts over; other props apply live.
 

From 0f07259df81c518a91177f134294cde1ad18fde1 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Thu, 1 Oct 2026 17:11:54 +0530
Subject: [PATCH 48/49] Fix the lint errors.

`pnpm lint` passes again. Gooey Color Picker keeps its latest color in
a layout effect instead of writing the ref during render, detects the
EyeDropper with useSyncExternalStore, starts drags from inside the
pointer handler, and gives the hue slider aria-valuenow/min/max. The
hydrated theme hook uses the same server/client snapshot instead of a
layout-effect setState, the sidebar trigger hides during render when it
opens and reveals after the close slide, and a test drops an unused
variable.
---
 components/docs-sidebar-trigger.tsx           | 10 +--
 hooks/use-hydrated-theme.ts                   | 16 ++---
 public/r/gooey-color-picker.json              |  2 +-
 .../gooey-color-picker/gooey-color-picker.tsx | 67 +++++++++++--------
 tests/registry.test.mjs                       |  2 +-
 5 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/components/docs-sidebar-trigger.tsx b/components/docs-sidebar-trigger.tsx
index 720f8ec..585d643 100644
--- a/components/docs-sidebar-trigger.tsx
+++ b/components/docs-sidebar-trigger.tsx
@@ -20,15 +20,11 @@ export function DocsSidebarTrigger({
   const { open, openMobile, isMobile, toggleSidebar } = useSidebar()
   const expanded = isMobile ? openMobile : open
   const [revealed, setRevealed] = React.useState(!expanded)
+  // Opening hides it straight away; closing reveals it after the slide.
+  if (expanded && revealed) setRevealed(false)
 
   React.useEffect(() => {
-    if (!showWhenCollapsed) return
-
-    if (expanded) {
-      setRevealed(false)
-      return
-    }
-
+    if (!showWhenCollapsed || expanded) return
     const id = window.setTimeout(() => setRevealed(true), CLOSE_MS)
     return () => window.clearTimeout(id)
   }, [expanded, showWhenCollapsed])
diff --git a/hooks/use-hydrated-theme.ts b/hooks/use-hydrated-theme.ts
index 59d9dec..a1e52df 100644
--- a/hooks/use-hydrated-theme.ts
+++ b/hooks/use-hydrated-theme.ts
@@ -1,22 +1,22 @@
 "use client"
 
-import { useLayoutEffect, useState } from "react"
+import { useSyncExternalStore } from "react"
 import { useTheme } from "next-themes"
 
 /**
  * next-themes reads localStorage / matchMedia in `useState`, so
  * `resolvedTheme` differs between SSR (always unset) and the first
  * client render. Return `"light"` until after hydration, then the
- * real theme — `useLayoutEffect` swaps before paint so dark mode
- * doesn't flash the light palette.
+ * real theme. The hydration-only snapshot switches before paint, so
+ * dark mode doesn't flash the light palette.
  */
+const noopSubscribe = () => () => {}
+const onClient = () => true
+const onServer = () => false
+
 export function useHydratedTheme(): "light" | "dark" {
   const { resolvedTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useLayoutEffect(() => {
-    setMounted(true)
-  }, [])
+  const mounted = useSyncExternalStore(noopSubscribe, onClient, onServer)
 
   if (!mounted) return "light"
   return resolvedTheme === "dark" ? "dark" : "light"
diff --git a/public/r/gooey-color-picker.json b/public/r/gooey-color-picker.json
index 7574f3b..499c75a 100644
--- a/public/r/gooey-color-picker.json
+++ b/public/r/gooey-color-picker.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/gooey-color-picker/gooey-color-picker.tsx",
-      "content": "\"use client\"\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\"\nimport { AnimatePresence, motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type GooeyColor = {\n  h: number\n  s: number\n  l: number\n  a: number\n}\n\nexport const DEFAULT_COLOR: GooeyColor = { h: 320, s: 90, l: 58, a: 1 }\n\n/** Stroked palette (closed) */\nexport const PALETTE_PATHS = [\n  \"M12 3.5c3.7 0 6.75 2.85 6.75 6.5 0 1.2-.95 2.2-2.15 2.2h-.35c-.7 0-1.25.55-1.25 1.25V14c0 2.35-1.9 4.25-4.25 4.25S6.5 16.35 6.5 14 8.4 9.75 10.75 9.75h.5\",\n  \"M8.2 8.1a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n  \"M11.2 6.4a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n  \"M14.6 6.9a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n  \"M16.9 9.2a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n]\n\n/** Close X (open) */\nexport const CLOSE_PATHS = [\"M7 7L17 17\", \"M17 7L7 17\"]\n\nexport function clamp(n: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, n))\n}\n\nexport function isHexColor(value: string) {\n  const hex = value.trim().replace(/^#/, \"\")\n  return /^(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)\n}\n\nexport function toCss(color: GooeyColor) {\n  return `hsla(${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}% / ${Number(color.a.toFixed(3))})`\n}\n\nexport function hslToRgb(h: number, s: number, l: number) {\n  const sn = s / 100\n  const ln = l / 100\n  const c = (1 - Math.abs(2 * ln - 1)) * sn\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = ln - c / 2\n  let r = 0\n  let g = 0\n  let b = 0\n  if (h < 60) [r, g, b] = [c, x, 0]\n  else if (h < 120) [r, g, b] = [x, c, 0]\n  else if (h < 180) [r, g, b] = [0, c, x]\n  else if (h < 240) [r, g, b] = [0, x, c]\n  else if (h < 300) [r, g, b] = [x, 0, c]\n  else [r, g, b] = [c, 0, x]\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  }\n}\n\nexport function toHex(color: GooeyColor) {\n  const { r, g, b } = hslToRgb(color.h, color.s, color.l)\n  const rgb = [r, g, b]\n    .map((n) => n.toString(16).padStart(2, \"0\"))\n    .join(\"\")\n  if (color.a >= 0.999) return `#${rgb}`\n  const a = Math.round(color.a * 255)\n    .toString(16)\n    .padStart(2, \"0\")\n  return `#${rgb}${a}`\n}\n\nexport function rgbToHsl(r: number, g: number, b: number): Omit<GooeyColor, \"a\"> {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: l * 100 }\n\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)\n  let h = 0\n  switch (max) {\n    case rn:\n      h = (gn - bn) / d + (gn < bn ? 6 : 0)\n      break\n    case gn:\n      h = (bn - rn) / d + 2\n      break\n    default:\n      h = (rn - gn) / d + 4\n  }\n  return { h: (h / 6) * 360, s: s * 100, l: l * 100 }\n}\n\nexport function parseColor(input?: GooeyColor | string): GooeyColor {\n  if (!input) return { ...DEFAULT_COLOR }\n  if (typeof input !== \"string\") {\n    return {\n      h: clamp(input.h, 0, 360),\n      s: clamp(input.s, 0, 100),\n      l: clamp(input.l, 0, 100),\n      a: clamp(input.a, 0, 1),\n    }\n  }\n\n  const hsla =\n    input.match(\n      /hsla?\\(\\s*([\\d.]+)(?:deg)?[\\s,]+([\\d.]+)%[\\s,]+([\\d.]+)%(?:[\\s,/]+([\\d.]+)%?)?\\s*\\)/i\n    ) ?? null\n  if (hsla) {\n    const aRaw = hsla[4] == null ? 1 : Number(hsla[4])\n    return {\n      h: clamp(Number(hsla[1]), 0, 360),\n      s: clamp(Number(hsla[2]), 0, 100),\n      l: clamp(Number(hsla[3]), 0, 100),\n      a: clamp(aRaw > 1 ? aRaw / 100 : aRaw, 0, 1),\n    }\n  }\n\n  const hex = input.trim().replace(\"#\", \"\")\n  if (isHexColor(hex)) {\n    const full =\n      hex.length === 3 || hex.length === 4\n        ? hex\n            .split(\"\")\n            .map((c) => c + c)\n            .join(\"\")\n        : hex\n    const r = Number.parseInt(full.slice(0, 2), 16)\n    const g = Number.parseInt(full.slice(2, 4), 16)\n    const b = Number.parseInt(full.slice(4, 6), 16)\n    const a =\n      full.length >= 8 ? Number.parseInt(full.slice(6, 8), 16) / 255 : 1\n    return { ...rgbToHsl(r, g, b), a: clamp(a, 0, 1) }\n  }\n\n  return { ...DEFAULT_COLOR }\n}\n\nexport type GooeyColorPickerProps = {\n  value?: GooeyColor | string\n  defaultValue?: GooeyColor | string\n  onChange?: (color: GooeyColor, css: string) => void\n  className?: string\n  /** Accessible name for the trigger */\n  label?: string\n}\n\n/** Minimal typing for the (still non-standard) EyeDropper API. */\ntype EyeDropperResult = { sRGBHex: string }\ntype EyeDropperConstructor = new () => {\n  open: (options?: { signal?: AbortSignal }) => Promise<EyeDropperResult>\n}\n\nconst spring = {\n  type: \"spring\" as const,\n  stiffness: 420,\n  damping: 32,\n  mass: 0.85,\n}\n\nconst pathTransition = {\n  duration: 0.32,\n  ease: [0.22, 1, 0.36, 1] as const,\n}\n\nfunction useControllableColor(\n  value: GooeyColorPickerProps[\"value\"],\n  defaultValue: GooeyColorPickerProps[\"defaultValue\"],\n  onChange: GooeyColorPickerProps[\"onChange\"]\n) {\n  const [uncontrolled, setUncontrolled] = useState(() =>\n    parseColor(defaultValue ?? value)\n  )\n  const isControlled = value !== undefined\n  const color = isControlled ? parseColor(value) : uncontrolled\n\n  const setColor = useCallback(\n    (next: GooeyColor) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next, toCss(next))\n    },\n    [isControlled, onChange]\n  )\n\n  return [color, setColor] as const\n}\n\nfunction bindDrag(onMove: (clientX: number, clientY: number) => void) {\n  return (event: ReactPointerEvent<HTMLElement>) => {\n    event.preventDefault()\n    const target = event.currentTarget\n    target.setPointerCapture(event.pointerId)\n    onMove(event.clientX, event.clientY)\n\n    function move(e: PointerEvent) {\n      onMove(e.clientX, e.clientY)\n    }\n    function up(e: PointerEvent) {\n      window.removeEventListener(\"pointermove\", move)\n      window.removeEventListener(\"pointerup\", up)\n      try {\n        target.releasePointerCapture(e.pointerId)\n      } catch {\n        // ignore\n      }\n    }\n    window.addEventListener(\"pointermove\", move)\n    window.addEventListener(\"pointerup\", up)\n  }\n}\n\nfunction TriggerIcon({ open }: { open: boolean }) {\n  const paths = open ? CLOSE_PATHS : PALETTE_PATHS\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"size-5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <AnimatePresence mode=\"wait\" initial={false}>\n        <motion.g\n          key={open ? \"close\" : \"palette\"}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.12 }}\n        >\n          {paths.map((d, i) => (\n            <motion.path\n              key={`${open ? \"c\" : \"p\"}-${i}`}\n              d={d}\n              initial={{ pathLength: 0, opacity: 0 }}\n              animate={{ pathLength: 1, opacity: 1 }}\n              exit={{ pathLength: 0, opacity: 0 }}\n              transition={{\n                ...pathTransition,\n                delay: i * 0.04,\n              }}\n            />\n          ))}\n        </motion.g>\n      </AnimatePresence>\n    </svg>\n  )\n}\n\n/** Minimal pipette / eyedropper glyph. */\nfunction EyeDropperIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"size-4\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"m3 21 1-1h2.5l8-8\" />\n      <path d=\"m13.5 5.5 5 5\" />\n      <path d=\"M15 4.5 17.2 2.3a2 2 0 0 1 2.8 0l1.7 1.7a2 2 0 0 1 0 2.8L19.5 9\" />\n    </svg>\n  )\n}\n\nexport function GooeyColorPicker({\n  value,\n  defaultValue,\n  onChange,\n  className,\n  label = \"Color picker\",\n}: GooeyColorPickerProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const wheelRef = useRef<HTMLDivElement>(null)\n  const alphaRef = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState(false)\n  const [color, setColor] = useControllableColor(value, defaultValue, onChange)\n  const colorRef = useRef(color)\n  colorRef.current = color\n  const css = toCss(color)\n  const opaque = toCss({ ...color, a: 1 })\n  const hex = toHex(color)\n  const [hexDraft, setHexDraft] = useState(hex)\n  const hexFocused = useRef(false)\n  const [supportsEyeDropper, setSupportsEyeDropper] = useState(false)\n\n  useEffect(() => {\n    if (!hexFocused.current) setHexDraft(hex)\n  }, [hex])\n\n  useEffect(() => {\n    setSupportsEyeDropper(typeof window !== \"undefined\" && \"EyeDropper\" in window)\n  }, [])\n\n  // Commit a color from any picker surface (wheel, alpha, eyedropper) and keep\n  // the code field in sync — even while the input is focused.\n  const applyColor = useCallback(\n    (next: GooeyColor) => {\n      setColor(next)\n      setHexDraft(toHex(next))\n    },\n    [setColor]\n  )\n\n  const pickWithEyeDropper = useCallback(async () => {\n    const Ctor = (window as unknown as { EyeDropper?: EyeDropperConstructor })\n      .EyeDropper\n    if (!Ctor) return\n    try {\n      const { sRGBHex } = await new Ctor().open()\n      applyColor({ ...parseColor(sRGBHex), a: colorRef.current.a })\n    } catch {\n      // user dismissed the eyedropper — no-op\n    }\n  }, [applyColor])\n\n  function commitHex(raw: string) {\n    const next = parseColor(raw.startsWith(\"#\") ? raw : `#${raw}`)\n    const normalized = toHex(next)\n    if (isHexColor(raw.trim())) {\n      setColor({ ...next })\n      setHexDraft(normalized)\n      return\n    }\n    setHexDraft(hex)\n  }\n\n  function togglePicker() {\n    setOpen((v) => !v)\n  }\n\n  function closePicker() {\n    setOpen(false)\n  }\n\n  useEffect(() => {\n    if (!open) return\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") closePicker()\n    }\n    window.addEventListener(\"keydown\", onKeyDown)\n    return () => window.removeEventListener(\"keydown\", onKeyDown)\n  }, [open])\n\n  useEffect(() => {\n    if (!open) return\n    function onPointerDown(event: PointerEvent) {\n      if (!rootRef.current?.contains(event.target as Node)) {\n        closePicker()\n      }\n    }\n    window.addEventListener(\"pointerdown\", onPointerDown)\n    return () => window.removeEventListener(\"pointerdown\", onPointerDown)\n  }, [open])\n\n  const updateWheelFromPointer = useCallback(\n    (clientX: number, clientY: number) => {\n      const el = wheelRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      const cx = rect.left + rect.width / 2\n      const cy = rect.top + rect.height / 2\n      const dx = clientX - cx\n      const dy = clientY - cy\n      const radius = rect.width / 2\n      const dist = Math.min(Math.hypot(dx, dy) / radius, 1)\n      const angle = (Math.atan2(dy, dx) * 180) / Math.PI\n      const h = (angle + 90 + 360) % 360\n      const s = clamp(dist * 100, 0, 100)\n      applyColor({ ...colorRef.current, h, s, l: 55 })\n    },\n    [applyColor]\n  )\n\n  const updateAlphaFromPointer = useCallback(\n    (clientX: number) => {\n      const el = alphaRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      const t = clamp((clientX - rect.left) / rect.width, 0, 1)\n      applyColor({ ...colorRef.current, a: t })\n    },\n    [applyColor]\n  )\n\n  const wheelThumb = {\n    x: 50 + Math.sin((color.h * Math.PI) / 180) * color.s * 0.42,\n    y: 50 - Math.cos((color.h * Math.PI) / 180) * color.s * 0.42,\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"gooey-color-picker\"\n      data-open={open ? \"true\" : \"false\"}\n      className={cn(\n        \"relative inline-flex h-12 w-48 items-end justify-center select-none\",\n        className\n      )}\n    >\n      <motion.div\n        data-gcp-panel\n        aria-hidden={!open}\n        className=\"absolute bottom-15 left-1/2 z-10 flex w-48 flex-col items-center overflow-hidden border border-white/15 bg-black p-3 shadow-[0_18px_50px_-20px_rgba(0,0,0,0.65)]\"\n        style={{\n          borderRadius: \"6rem 6rem 1.35rem 1.35rem\",\n          transformOrigin: \"bottom center\",\n          x: \"-50%\",\n        }}\n        initial={false}\n        animate={\n          open\n            ? {\n                opacity: 1,\n                scaleX: 1,\n                scaleY: 1,\n                y: 0,\n                filter: \"blur(0px)\",\n                pointerEvents: \"auto\" as const,\n              }\n            : {\n                opacity: 0,\n                scaleX: 0.22,\n                scaleY: 0.14,\n                y: 12,\n                filter: \"blur(12px)\",\n                pointerEvents: \"none\" as const,\n              }\n        }\n        transition={{\n          ...spring,\n          filter: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n          opacity: { duration: 0.24, ease: [0.22, 1, 0.36, 1] },\n        }}\n      >\n        <div\n          ref={wheelRef}\n          role=\"slider\"\n          tabIndex={open ? 0 : -1}\n          aria-label=\"Color\"\n          aria-valuetext={`hue ${Math.round(color.h)}, saturation ${Math.round(color.s)}`}\n          className={cn(\n            \"relative size-40 shrink-0 touch-none rounded-full outline-none\",\n            \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-black\"\n          )}\n          style={{\n            background: `\n              radial-gradient(circle at center, #fff 0%, transparent 62%),\n              conic-gradient(\n                from 0deg,\n                hsl(0 100% 50%),\n                hsl(60 100% 50%),\n                hsl(120 100% 50%),\n                hsl(180 100% 50%),\n                hsl(240 100% 50%),\n                hsl(300 100% 50%),\n                hsl(360 100% 50%)\n              )\n            `,\n          }}\n          onPointerDown={bindDrag((x, y) => updateWheelFromPointer(x, y))}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowLeft\") {\n              event.preventDefault()\n              applyColor({ ...color, h: (color.h + 350) % 360 })\n            }\n            if (event.key === \"ArrowRight\") {\n              event.preventDefault()\n              applyColor({ ...color, h: (color.h + 10) % 360 })\n            }\n            if (event.key === \"ArrowUp\") {\n              event.preventDefault()\n              applyColor({ ...color, s: clamp(color.s + 5, 0, 100) })\n            }\n            if (event.key === \"ArrowDown\") {\n              event.preventDefault()\n              applyColor({ ...color, s: clamp(color.s - 5, 0, 100) })\n            }\n          }}\n        >\n          <span\n            className=\"pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.25)]\"\n            style={{\n              left: `${wheelThumb.x}%`,\n              top: `${wheelThumb.y}%`,\n              background: opaque,\n            }}\n          />\n        </div>\n\n        <div\n          ref={alphaRef}\n          role=\"slider\"\n          tabIndex={open ? 0 : -1}\n          aria-label=\"Opacity\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(color.a * 100)}\n          className={cn(\n            \"relative mt-3 h-9 w-full shrink-0 touch-none overflow-hidden rounded-xl outline-none ring-1 ring-white/10\",\n            \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-black\"\n          )}\n          style={{\n            background: `linear-gradient(to right, transparent, ${opaque})`,\n          }}\n          onPointerDown={bindDrag((x) => updateAlphaFromPointer(x))}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n              event.preventDefault()\n              applyColor({ ...color, a: clamp(color.a + 0.05, 0, 1) })\n            }\n            if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n              event.preventDefault()\n              applyColor({ ...color, a: clamp(color.a - 0.05, 0, 1) })\n            }\n          }}\n        >\n          <span\n            className=\"pointer-events-none absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.2)]\"\n            style={{\n              left: `${color.a * 100}%`,\n              background: css,\n            }}\n          />\n        </div>\n\n        <div className=\"mt-3 flex w-full items-center gap-2 rounded-xl bg-white/5 px-3 py-2 ring-1 ring-white/10\">\n          <span\n            className=\"size-3.5 shrink-0 rounded-full ring-1 ring-white/25\"\n            style={{ background: css }}\n            aria-hidden\n          />\n          <input\n            type=\"text\"\n            spellCheck={false}\n            aria-label=\"Hex color\"\n            tabIndex={open ? 0 : -1}\n            value={hexDraft}\n            onFocus={() => {\n              hexFocused.current = true\n            }}\n            onChange={(event) => setHexDraft(event.target.value)}\n            onBlur={() => {\n              hexFocused.current = false\n              commitHex(hexDraft)\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"Enter\") {\n                event.currentTarget.blur()\n              }\n              if (event.key === \"Escape\") {\n                setHexDraft(hex)\n                event.currentTarget.blur()\n              }\n            }}\n            className=\"min-w-0 flex-1 bg-transparent font-mono text-sm text-white outline-none placeholder:text-white/40\"\n          />\n          {supportsEyeDropper ? (\n            <button\n              type=\"button\"\n              aria-label=\"Pick color from screen\"\n              tabIndex={open ? 0 : -1}\n              onClick={pickWithEyeDropper}\n              className={cn(\n                \"-mr-1 flex size-6 shrink-0 items-center justify-center rounded-md text-white/60 outline-none\",\n                \"transition-colors hover:bg-white/10 hover:text-white\",\n                \"focus-visible:ring-2 focus-visible:ring-ring\"\n              )}\n            >\n              <EyeDropperIcon />\n            </button>\n          ) : null}\n        </div>\n      </motion.div>\n\n      <motion.button\n        type=\"button\"\n        aria-label={open ? \"Close color picker\" : label}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        className={cn(\n          \"relative z-20 flex size-12 items-center justify-center rounded-full border border-white/20 bg-black text-white outline-none\",\n          \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        )}\n        whileTap={{ scale: 0.94 }}\n        transition={spring}\n        onClick={togglePicker}\n      >\n        <TriggerIcon open={open} />\n      </motion.button>\n    </div>\n  )\n}\n\nexport default GooeyColorPicker\n",
+      "content": "\"use client\"\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\"\nimport { AnimatePresence, motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type GooeyColor = {\n  h: number\n  s: number\n  l: number\n  a: number\n}\n\nexport const DEFAULT_COLOR: GooeyColor = { h: 320, s: 90, l: 58, a: 1 }\n\n/** Stroked palette (closed) */\nexport const PALETTE_PATHS = [\n  \"M12 3.5c3.7 0 6.75 2.85 6.75 6.5 0 1.2-.95 2.2-2.15 2.2h-.35c-.7 0-1.25.55-1.25 1.25V14c0 2.35-1.9 4.25-4.25 4.25S6.5 16.35 6.5 14 8.4 9.75 10.75 9.75h.5\",\n  \"M8.2 8.1a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n  \"M11.2 6.4a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n  \"M14.6 6.9a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n  \"M16.9 9.2a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z\",\n]\n\n/** Close X (open) */\nexport const CLOSE_PATHS = [\"M7 7L17 17\", \"M17 7L7 17\"]\n\nexport function clamp(n: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, n))\n}\n\nexport function isHexColor(value: string) {\n  const hex = value.trim().replace(/^#/, \"\")\n  return /^(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)\n}\n\nexport function toCss(color: GooeyColor) {\n  return `hsla(${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}% / ${Number(color.a.toFixed(3))})`\n}\n\nexport function hslToRgb(h: number, s: number, l: number) {\n  const sn = s / 100\n  const ln = l / 100\n  const c = (1 - Math.abs(2 * ln - 1)) * sn\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = ln - c / 2\n  let r = 0\n  let g = 0\n  let b = 0\n  if (h < 60) [r, g, b] = [c, x, 0]\n  else if (h < 120) [r, g, b] = [x, c, 0]\n  else if (h < 180) [r, g, b] = [0, c, x]\n  else if (h < 240) [r, g, b] = [0, x, c]\n  else if (h < 300) [r, g, b] = [x, 0, c]\n  else [r, g, b] = [c, 0, x]\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  }\n}\n\nexport function toHex(color: GooeyColor) {\n  const { r, g, b } = hslToRgb(color.h, color.s, color.l)\n  const rgb = [r, g, b]\n    .map((n) => n.toString(16).padStart(2, \"0\"))\n    .join(\"\")\n  if (color.a >= 0.999) return `#${rgb}`\n  const a = Math.round(color.a * 255)\n    .toString(16)\n    .padStart(2, \"0\")\n  return `#${rgb}${a}`\n}\n\nexport function rgbToHsl(r: number, g: number, b: number): Omit<GooeyColor, \"a\"> {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: l * 100 }\n\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)\n  let h = 0\n  switch (max) {\n    case rn:\n      h = (gn - bn) / d + (gn < bn ? 6 : 0)\n      break\n    case gn:\n      h = (bn - rn) / d + 2\n      break\n    default:\n      h = (rn - gn) / d + 4\n  }\n  return { h: (h / 6) * 360, s: s * 100, l: l * 100 }\n}\n\nexport function parseColor(input?: GooeyColor | string): GooeyColor {\n  if (!input) return { ...DEFAULT_COLOR }\n  if (typeof input !== \"string\") {\n    return {\n      h: clamp(input.h, 0, 360),\n      s: clamp(input.s, 0, 100),\n      l: clamp(input.l, 0, 100),\n      a: clamp(input.a, 0, 1),\n    }\n  }\n\n  const hsla =\n    input.match(\n      /hsla?\\(\\s*([\\d.]+)(?:deg)?[\\s,]+([\\d.]+)%[\\s,]+([\\d.]+)%(?:[\\s,/]+([\\d.]+)%?)?\\s*\\)/i\n    ) ?? null\n  if (hsla) {\n    const aRaw = hsla[4] == null ? 1 : Number(hsla[4])\n    return {\n      h: clamp(Number(hsla[1]), 0, 360),\n      s: clamp(Number(hsla[2]), 0, 100),\n      l: clamp(Number(hsla[3]), 0, 100),\n      a: clamp(aRaw > 1 ? aRaw / 100 : aRaw, 0, 1),\n    }\n  }\n\n  const hex = input.trim().replace(\"#\", \"\")\n  if (isHexColor(hex)) {\n    const full =\n      hex.length === 3 || hex.length === 4\n        ? hex\n            .split(\"\")\n            .map((c) => c + c)\n            .join(\"\")\n        : hex\n    const r = Number.parseInt(full.slice(0, 2), 16)\n    const g = Number.parseInt(full.slice(2, 4), 16)\n    const b = Number.parseInt(full.slice(4, 6), 16)\n    const a =\n      full.length >= 8 ? Number.parseInt(full.slice(6, 8), 16) / 255 : 1\n    return { ...rgbToHsl(r, g, b), a: clamp(a, 0, 1) }\n  }\n\n  return { ...DEFAULT_COLOR }\n}\n\nexport type GooeyColorPickerProps = {\n  value?: GooeyColor | string\n  defaultValue?: GooeyColor | string\n  onChange?: (color: GooeyColor, css: string) => void\n  className?: string\n  /** Accessible name for the trigger */\n  label?: string\n}\n\n/** Minimal typing for the (still non-standard) EyeDropper API. */\ntype EyeDropperResult = { sRGBHex: string }\ntype EyeDropperConstructor = new () => {\n  open: (options?: { signal?: AbortSignal }) => Promise<EyeDropperResult>\n}\n\nconst spring = {\n  type: \"spring\" as const,\n  stiffness: 420,\n  damping: 32,\n  mass: 0.85,\n}\n\nconst pathTransition = {\n  duration: 0.32,\n  ease: [0.22, 1, 0.36, 1] as const,\n}\n\nfunction useControllableColor(\n  value: GooeyColorPickerProps[\"value\"],\n  defaultValue: GooeyColorPickerProps[\"defaultValue\"],\n  onChange: GooeyColorPickerProps[\"onChange\"]\n) {\n  const [uncontrolled, setUncontrolled] = useState(() =>\n    parseColor(defaultValue ?? value)\n  )\n  const isControlled = value !== undefined\n  const color = isControlled ? parseColor(value) : uncontrolled\n\n  const setColor = useCallback(\n    (next: GooeyColor) => {\n      if (!isControlled) setUncontrolled(next)\n      onChange?.(next, toCss(next))\n    },\n    [isControlled, onChange]\n  )\n\n  return [color, setColor] as const\n}\n\nfunction startDrag(\n  event: ReactPointerEvent<HTMLElement>,\n  onMove: (clientX: number, clientY: number) => void\n) {\n  event.preventDefault()\n  const target = event.currentTarget\n  target.setPointerCapture(event.pointerId)\n  onMove(event.clientX, event.clientY)\n\n  function move(e: PointerEvent) {\n    onMove(e.clientX, e.clientY)\n  }\n  function up(e: PointerEvent) {\n    window.removeEventListener(\"pointermove\", move)\n    window.removeEventListener(\"pointerup\", up)\n    try {\n      target.releasePointerCapture(e.pointerId)\n    } catch {\n      // ignore\n    }\n  }\n  window.addEventListener(\"pointermove\", move)\n  window.addEventListener(\"pointerup\", up)\n}\n\nconst noopSubscribe = () => () => {}\nconst hasEyeDropper = () => \"EyeDropper\" in window\nconst noEyeDropper = () => false\n\nfunction TriggerIcon({ open }: { open: boolean }) {\n  const paths = open ? CLOSE_PATHS : PALETTE_PATHS\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"size-5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <AnimatePresence mode=\"wait\" initial={false}>\n        <motion.g\n          key={open ? \"close\" : \"palette\"}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.12 }}\n        >\n          {paths.map((d, i) => (\n            <motion.path\n              key={`${open ? \"c\" : \"p\"}-${i}`}\n              d={d}\n              initial={{ pathLength: 0, opacity: 0 }}\n              animate={{ pathLength: 1, opacity: 1 }}\n              exit={{ pathLength: 0, opacity: 0 }}\n              transition={{\n                ...pathTransition,\n                delay: i * 0.04,\n              }}\n            />\n          ))}\n        </motion.g>\n      </AnimatePresence>\n    </svg>\n  )\n}\n\n/** Minimal pipette / eyedropper glyph. */\nfunction EyeDropperIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className=\"size-4\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"m3 21 1-1h2.5l8-8\" />\n      <path d=\"m13.5 5.5 5 5\" />\n      <path d=\"M15 4.5 17.2 2.3a2 2 0 0 1 2.8 0l1.7 1.7a2 2 0 0 1 0 2.8L19.5 9\" />\n    </svg>\n  )\n}\n\nexport function GooeyColorPicker({\n  value,\n  defaultValue,\n  onChange,\n  className,\n  label = \"Color picker\",\n}: GooeyColorPickerProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const wheelRef = useRef<HTMLDivElement>(null)\n  const alphaRef = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState(false)\n  const [color, setColor] = useControllableColor(value, defaultValue, onChange)\n  // Drag and eyedropper handlers read the latest color without re-binding.\n  const colorRef = useRef(color)\n  useLayoutEffect(() => {\n    colorRef.current = color\n  })\n  const css = toCss(color)\n  const opaque = toCss({ ...color, a: 1 })\n  const hex = toHex(color)\n  const [hexDraft, setHexDraft] = useState(hex)\n  const hexFocused = useRef(false)\n  const supportsEyeDropper = useSyncExternalStore(\n    noopSubscribe,\n    hasEyeDropper,\n    noEyeDropper\n  )\n\n  useEffect(() => {\n    if (!hexFocused.current) setHexDraft(hex)\n  }, [hex])\n\n  // Commit a color from any picker surface (wheel, alpha, eyedropper) and keep\n  // the code field in sync — even while the input is focused.\n  const applyColor = useCallback(\n    (next: GooeyColor) => {\n      setColor(next)\n      setHexDraft(toHex(next))\n    },\n    [setColor]\n  )\n\n  const pickWithEyeDropper = useCallback(async () => {\n    const Ctor = (window as unknown as { EyeDropper?: EyeDropperConstructor })\n      .EyeDropper\n    if (!Ctor) return\n    try {\n      const { sRGBHex } = await new Ctor().open()\n      applyColor({ ...parseColor(sRGBHex), a: colorRef.current.a })\n    } catch {\n      // user dismissed the eyedropper — no-op\n    }\n  }, [applyColor])\n\n  function commitHex(raw: string) {\n    const next = parseColor(raw.startsWith(\"#\") ? raw : `#${raw}`)\n    const normalized = toHex(next)\n    if (isHexColor(raw.trim())) {\n      setColor({ ...next })\n      setHexDraft(normalized)\n      return\n    }\n    setHexDraft(hex)\n  }\n\n  function togglePicker() {\n    setOpen((v) => !v)\n  }\n\n  function closePicker() {\n    setOpen(false)\n  }\n\n  useEffect(() => {\n    if (!open) return\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") closePicker()\n    }\n    window.addEventListener(\"keydown\", onKeyDown)\n    return () => window.removeEventListener(\"keydown\", onKeyDown)\n  }, [open])\n\n  useEffect(() => {\n    if (!open) return\n    function onPointerDown(event: PointerEvent) {\n      if (!rootRef.current?.contains(event.target as Node)) {\n        closePicker()\n      }\n    }\n    window.addEventListener(\"pointerdown\", onPointerDown)\n    return () => window.removeEventListener(\"pointerdown\", onPointerDown)\n  }, [open])\n\n  const updateWheelFromPointer = useCallback(\n    (clientX: number, clientY: number) => {\n      const el = wheelRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      const cx = rect.left + rect.width / 2\n      const cy = rect.top + rect.height / 2\n      const dx = clientX - cx\n      const dy = clientY - cy\n      const radius = rect.width / 2\n      const dist = Math.min(Math.hypot(dx, dy) / radius, 1)\n      const angle = (Math.atan2(dy, dx) * 180) / Math.PI\n      const h = (angle + 90 + 360) % 360\n      const s = clamp(dist * 100, 0, 100)\n      applyColor({ ...colorRef.current, h, s, l: 55 })\n    },\n    [applyColor]\n  )\n\n  const updateAlphaFromPointer = useCallback(\n    (clientX: number) => {\n      const el = alphaRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      const t = clamp((clientX - rect.left) / rect.width, 0, 1)\n      applyColor({ ...colorRef.current, a: t })\n    },\n    [applyColor]\n  )\n\n  const wheelThumb = {\n    x: 50 + Math.sin((color.h * Math.PI) / 180) * color.s * 0.42,\n    y: 50 - Math.cos((color.h * Math.PI) / 180) * color.s * 0.42,\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"gooey-color-picker\"\n      data-open={open ? \"true\" : \"false\"}\n      className={cn(\n        \"relative inline-flex h-12 w-48 items-end justify-center select-none\",\n        className\n      )}\n    >\n      <motion.div\n        data-gcp-panel\n        aria-hidden={!open}\n        className=\"absolute bottom-15 left-1/2 z-10 flex w-48 flex-col items-center overflow-hidden border border-white/15 bg-black p-3 shadow-[0_18px_50px_-20px_rgba(0,0,0,0.65)]\"\n        style={{\n          borderRadius: \"6rem 6rem 1.35rem 1.35rem\",\n          transformOrigin: \"bottom center\",\n          x: \"-50%\",\n        }}\n        initial={false}\n        animate={\n          open\n            ? {\n                opacity: 1,\n                scaleX: 1,\n                scaleY: 1,\n                y: 0,\n                filter: \"blur(0px)\",\n                pointerEvents: \"auto\" as const,\n              }\n            : {\n                opacity: 0,\n                scaleX: 0.22,\n                scaleY: 0.14,\n                y: 12,\n                filter: \"blur(12px)\",\n                pointerEvents: \"none\" as const,\n              }\n        }\n        transition={{\n          ...spring,\n          filter: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n          opacity: { duration: 0.24, ease: [0.22, 1, 0.36, 1] },\n        }}\n      >\n        <div\n          ref={wheelRef}\n          role=\"slider\"\n          tabIndex={open ? 0 : -1}\n          aria-label=\"Color\"\n          aria-valuemin={0}\n          aria-valuemax={360}\n          aria-valuenow={Math.round(color.h)}\n          aria-valuetext={`hue ${Math.round(color.h)}, saturation ${Math.round(color.s)}`}\n          className={cn(\n            \"relative size-40 shrink-0 touch-none rounded-full outline-none\",\n            \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-black\"\n          )}\n          style={{\n            background: `\n              radial-gradient(circle at center, #fff 0%, transparent 62%),\n              conic-gradient(\n                from 0deg,\n                hsl(0 100% 50%),\n                hsl(60 100% 50%),\n                hsl(120 100% 50%),\n                hsl(180 100% 50%),\n                hsl(240 100% 50%),\n                hsl(300 100% 50%),\n                hsl(360 100% 50%)\n              )\n            `,\n          }}\n          onPointerDown={(event) => startDrag(event, updateWheelFromPointer)}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowLeft\") {\n              event.preventDefault()\n              applyColor({ ...color, h: (color.h + 350) % 360 })\n            }\n            if (event.key === \"ArrowRight\") {\n              event.preventDefault()\n              applyColor({ ...color, h: (color.h + 10) % 360 })\n            }\n            if (event.key === \"ArrowUp\") {\n              event.preventDefault()\n              applyColor({ ...color, s: clamp(color.s + 5, 0, 100) })\n            }\n            if (event.key === \"ArrowDown\") {\n              event.preventDefault()\n              applyColor({ ...color, s: clamp(color.s - 5, 0, 100) })\n            }\n          }}\n        >\n          <span\n            className=\"pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.25)]\"\n            style={{\n              left: `${wheelThumb.x}%`,\n              top: `${wheelThumb.y}%`,\n              background: opaque,\n            }}\n          />\n        </div>\n\n        <div\n          ref={alphaRef}\n          role=\"slider\"\n          tabIndex={open ? 0 : -1}\n          aria-label=\"Opacity\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(color.a * 100)}\n          className={cn(\n            \"relative mt-3 h-9 w-full shrink-0 touch-none overflow-hidden rounded-xl outline-none ring-1 ring-white/10\",\n            \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-black\"\n          )}\n          style={{\n            background: `linear-gradient(to right, transparent, ${opaque})`,\n          }}\n          onPointerDown={(event) => startDrag(event, updateAlphaFromPointer)}\n          onKeyDown={(event) => {\n            if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n              event.preventDefault()\n              applyColor({ ...color, a: clamp(color.a + 0.05, 0, 1) })\n            }\n            if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n              event.preventDefault()\n              applyColor({ ...color, a: clamp(color.a - 0.05, 0, 1) })\n            }\n          }}\n        >\n          <span\n            className=\"pointer-events-none absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.2)]\"\n            style={{\n              left: `${color.a * 100}%`,\n              background: css,\n            }}\n          />\n        </div>\n\n        <div className=\"mt-3 flex w-full items-center gap-2 rounded-xl bg-white/5 px-3 py-2 ring-1 ring-white/10\">\n          <span\n            className=\"size-3.5 shrink-0 rounded-full ring-1 ring-white/25\"\n            style={{ background: css }}\n            aria-hidden\n          />\n          <input\n            type=\"text\"\n            spellCheck={false}\n            aria-label=\"Hex color\"\n            tabIndex={open ? 0 : -1}\n            value={hexDraft}\n            onFocus={() => {\n              hexFocused.current = true\n            }}\n            onChange={(event) => setHexDraft(event.target.value)}\n            onBlur={() => {\n              hexFocused.current = false\n              commitHex(hexDraft)\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"Enter\") {\n                event.currentTarget.blur()\n              }\n              if (event.key === \"Escape\") {\n                setHexDraft(hex)\n                event.currentTarget.blur()\n              }\n            }}\n            className=\"min-w-0 flex-1 bg-transparent font-mono text-sm text-white outline-none placeholder:text-white/40\"\n          />\n          {supportsEyeDropper ? (\n            <button\n              type=\"button\"\n              aria-label=\"Pick color from screen\"\n              tabIndex={open ? 0 : -1}\n              onClick={pickWithEyeDropper}\n              className={cn(\n                \"-mr-1 flex size-6 shrink-0 items-center justify-center rounded-md text-white/60 outline-none\",\n                \"transition-colors hover:bg-white/10 hover:text-white\",\n                \"focus-visible:ring-2 focus-visible:ring-ring\"\n              )}\n            >\n              <EyeDropperIcon />\n            </button>\n          ) : null}\n        </div>\n      </motion.div>\n\n      <motion.button\n        type=\"button\"\n        aria-label={open ? \"Close color picker\" : label}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        className={cn(\n          \"relative z-20 flex size-12 items-center justify-center rounded-full border border-white/20 bg-black text-white outline-none\",\n          \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        )}\n        whileTap={{ scale: 0.94 }}\n        transition={spring}\n        onClick={togglePicker}\n      >\n        <TriggerIcon open={open} />\n      </motion.button>\n    </div>\n  )\n}\n\nexport default GooeyColorPicker\n",
       "type": "registry:ui",
       "target": "components/ui/gooey-color-picker.tsx"
     }
diff --git a/registry/gooey-color-picker/gooey-color-picker.tsx b/registry/gooey-color-picker/gooey-color-picker.tsx
index 027536a..c086b0e 100644
--- a/registry/gooey-color-picker/gooey-color-picker.tsx
+++ b/registry/gooey-color-picker/gooey-color-picker.tsx
@@ -3,8 +3,10 @@
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
+  useSyncExternalStore,
   type PointerEvent as ReactPointerEvent,
 } from "react"
 import { AnimatePresence, motion } from "motion/react"
@@ -74,30 +76,35 @@ function useControllableColor(
   return [color, setColor] as const
 }
 
-function bindDrag(onMove: (clientX: number, clientY: number) => void) {
-  return (event: ReactPointerEvent<HTMLElement>) => {
-    event.preventDefault()
-    const target = event.currentTarget
-    target.setPointerCapture(event.pointerId)
-    onMove(event.clientX, event.clientY)
+function startDrag(
+  event: ReactPointerEvent<HTMLElement>,
+  onMove: (clientX: number, clientY: number) => void
+) {
+  event.preventDefault()
+  const target = event.currentTarget
+  target.setPointerCapture(event.pointerId)
+  onMove(event.clientX, event.clientY)
 
-    function move(e: PointerEvent) {
-      onMove(e.clientX, e.clientY)
-    }
-    function up(e: PointerEvent) {
-      window.removeEventListener("pointermove", move)
-      window.removeEventListener("pointerup", up)
-      try {
-        target.releasePointerCapture(e.pointerId)
-      } catch {
-        // ignore
-      }
+  function move(e: PointerEvent) {
+    onMove(e.clientX, e.clientY)
+  }
+  function up(e: PointerEvent) {
+    window.removeEventListener("pointermove", move)
+    window.removeEventListener("pointerup", up)
+    try {
+      target.releasePointerCapture(e.pointerId)
+    } catch {
+      // ignore
     }
-    window.addEventListener("pointermove", move)
-    window.addEventListener("pointerup", up)
   }
+  window.addEventListener("pointermove", move)
+  window.addEventListener("pointerup", up)
 }
 
+const noopSubscribe = () => () => {}
+const hasEyeDropper = () => "EyeDropper" in window
+const noEyeDropper = () => false
+
 function TriggerIcon({ open }: { open: boolean }) {
   const paths = open ? CLOSE_PATHS : PALETTE_PATHS
 
@@ -171,23 +178,26 @@ export function GooeyColorPicker({
   const alphaRef = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(false)
   const [color, setColor] = useControllableColor(value, defaultValue, onChange)
+  // Drag and eyedropper handlers read the latest color without re-binding.
   const colorRef = useRef(color)
-  colorRef.current = color
+  useLayoutEffect(() => {
+    colorRef.current = color
+  })
   const css = toCss(color)
   const opaque = toCss({ ...color, a: 1 })
   const hex = toHex(color)
   const [hexDraft, setHexDraft] = useState(hex)
   const hexFocused = useRef(false)
-  const [supportsEyeDropper, setSupportsEyeDropper] = useState(false)
+  const supportsEyeDropper = useSyncExternalStore(
+    noopSubscribe,
+    hasEyeDropper,
+    noEyeDropper
+  )
 
   useEffect(() => {
     if (!hexFocused.current) setHexDraft(hex)
   }, [hex])
 
-  useEffect(() => {
-    setSupportsEyeDropper(typeof window !== "undefined" && "EyeDropper" in window)
-  }, [])
-
   // Commit a color from any picker surface (wheel, alpha, eyedropper) and keep
   // the code field in sync — even while the input is focused.
   const applyColor = useCallback(
@@ -334,6 +344,9 @@ export function GooeyColorPicker({
           role="slider"
           tabIndex={open ? 0 : -1}
           aria-label="Color"
+          aria-valuemin={0}
+          aria-valuemax={360}
+          aria-valuenow={Math.round(color.h)}
           aria-valuetext={`hue ${Math.round(color.h)}, saturation ${Math.round(color.s)}`}
           className={cn(
             "relative size-40 shrink-0 touch-none rounded-full outline-none",
@@ -354,7 +367,7 @@ export function GooeyColorPicker({
               )
             `,
           }}
-          onPointerDown={bindDrag((x, y) => updateWheelFromPointer(x, y))}
+          onPointerDown={(event) => startDrag(event, updateWheelFromPointer)}
           onKeyDown={(event) => {
             if (event.key === "ArrowLeft") {
               event.preventDefault()
@@ -399,7 +412,7 @@ export function GooeyColorPicker({
           style={{
             background: `linear-gradient(to right, transparent, ${opaque})`,
           }}
-          onPointerDown={bindDrag((x) => updateAlphaFromPointer(x))}
+          onPointerDown={(event) => startDrag(event, updateAlphaFromPointer)}
           onKeyDown={(event) => {
             if (event.key === "ArrowRight" || event.key === "ArrowUp") {
               event.preventDefault()
diff --git a/tests/registry.test.mjs b/tests/registry.test.mjs
index 799b738..48404ce 100644
--- a/tests/registry.test.mjs
+++ b/tests/registry.test.mjs
@@ -246,7 +246,7 @@ test("built registry.json lists exactly the source items", () => {
   )
 })
 
-for (const { dir, item } of items) {
+for (const { item } of items) {
   test(`built ${item.name}.json matches its source`, () => {
     const builtPath = join(BUILD_DIR, `${item.name}.json`)
     assert.ok(existsSync(builtPath), `public/r/${item.name}.json missing`)

From c726b1587b77a39925762b1e02341b54abaa9786 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Thu, 1 Oct 2026 17:12:03 +0530
Subject: [PATCH 49/49] Refresh the Phosphor Score and Shader Gradient OG
 cards.

Both still showed their old descriptions.
---
 .../docs/components/phosphor-score/image.png  | Bin 44682 -> 47995 bytes
 .../docs/components/shader-gradient/image.png | Bin 48916 -> 52448 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/public/og/docs/components/phosphor-score/image.png b/public/og/docs/components/phosphor-score/image.png
index 8112780a2001f4fc7bb4cfe60e83d7ec3e0e16dc..ef0b6047fc4a9d3efac213ee14c2215a271e10a8 100644
GIT binary patch
literal 47995
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

literal 44682
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
NMpw*!C^vA8{y#OPu-gCt

diff --git a/public/og/docs/components/shader-gradient/image.png b/public/og/docs/components/shader-gradient/image.png
index 787b0bc58380d7de5b589cb01de91161a3fe54c9..ed4877ffb4ba71cea972c3a6f3809a4fed2c8d1c 100644
GIT binary patch
literal 52448
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
ZDwd^tcEt~`kS>59vdiA;rlrs6e*)=l=3M{)

literal 48916
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
W(-M{eZ+-&)fNw%?lwWgt_<sP&z%wcU