Stats Count-Up Band

// Stats Count-Up Band — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-13.tsx, export StatsCountupBand.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.
// 1 helper the demo imports is inlined above it, verbatim.
// Catalog-dependent: the array below is a three-record sample of the site's own data.

import { useEffect, useState } from "react";

// The demo reads the site's own catalog: 65 procedural canvases. Three real
// records are inlined below — long fields trimmed — so this file runs as
// written. Replace the array with your own data, or read the full list from
// the site, where /api/search?q= returns the matching records as JSON.
const BACKGROUNDS = [
  {"slug":"aurora-veil","title":"Aurora Veil","category":"animated","tech":["CSS"],"perf":"low","themeable":true,"bundleKb":2.6,"copies":8940,"demo":"aurora-veil","description":"Drifting mesh gradients + grain. 60 fps, zero JS."},
  {"slug":"star-motes","title":"Star Motes","category":"particles","tech":["WebGL"],"perf":"mid","themeable":true,"bundleKb":11.1,"copies":7150,"demo":"star-motes","description":"Stars on three depth planes in one WebGL point cloud: the pointer offset is scaled per plane in…"},
  {"slug":"liquid-glass","title":"Liquid Glass","category":"texture","tech":["CSS","SVG"],"perf":"low","themeable":true,"bundleKb":4.1,"copies":5230,"demo":"glass","description":"Frosted refraction panels with edge highlights."},
];

// The demo reads the site's own catalog: 362 catalogued assets. Three real
// records are inlined below — long fields trimmed — so this file runs as
// written. Replace the array with your own data, or read the full list from
// the site, where /api/search?q= returns the matching records as JSON.
const COMPONENTS = [
  {"slug":"prism-switch","kind":"element","title":"Prism Switch","description":"A theme-aware toggle that sweeps a six-stop prism gradient across the track on every flip. Pure…","tags":["switch","toggle"],"behaviors":["click","hover"],"stack":["React","HTML/CSS"],"deps":[],"bundleKb":1.2,"themeable":true,"a11yScore":98,"qualityScore":96,"status":"live","license":"MIT","version":"1.2.0","author":"Motif Studio","published":"2026-06-02","demo":"prism-switch","props":[{"name":"size","label":"Size","type":"range","min":20,"max":64,"step":2,"unit":"px","defaultValue":42},{"name":"hueSpeed","label":"Gradient speed","type":"range","min":0,"max":4,"step":0.1,"unit":"s","defaultValue":1.4}],"copies":4820,"views":21400,"aliases":[],"trend":[]},
  {"slug":"halo-button","kind":"element","title":"Halo Button","description":"Primary button with a mouse-tracking halo, press ripple and a springy scale. Ships as React + T…","tags":["button","magnetic"],"behaviors":["hover","click"],"stack":["React","HTML/CSS"],"deps":[],"bundleKb":2.1,"themeable":true,"a11yScore":96,"qualityScore":94,"status":"live","license":"MIT","version":"1.1.0","author":"Motif Studio","published":"2026-06-18","demo":"halo-button","props":[{"name":"magnet","label":"Magnet strength","type":"range","min":0,"max":60,"step":1,"defaultValue":24,"unit":""},{"name":"glow","label":"Halo glow","type":"range","min":0,"max":100,"step":1,"defaultValue":70,"unit":"%"}],"copies":3910,"views":17300,"aliases":["cta","call to action"],"trend":[]},
  {"slug":"pulse-loader","kind":"element","title":"Pulse Loader","description":"Three-note loader with staggered radial pulse and optional progress text. Reduced-motion safe a…","tags":["loader","loading"],"behaviors":[],"stack":["HTML/CSS","React"],"deps":[],"bundleKb":0.8,"themeable":true,"a11yScore":99,"qualityScore":93,"status":"live","license":"MIT","version":"1.0.3","author":"Motif Studio","published":"2026-05-28","demo":"pulse-loader","props":[{"name":"speed","label":"Pulse speed","type":"range","min":0.2,"max":2.4,"step":0.05,"unit":"s","defaultValue":1},{"name":"dots","label":"Dots","type":"range","min":1,"max":8,"step":1,"unit":"","defaultValue":3}],"copies":5220,"views":19800,"aliases":["spinner","loading"],"trend":[]},
];

// The demo reads the site's own catalog: 118 guides. Three real
// records are inlined below — long fields trimmed — so this file runs as
// written. Replace the array with your own data, or read the full list from
// the site, where /api/search?q= returns the matching records as JSON.
const LEARN_ARTICLES = [
  {"slug":"hero-that-breathes-in-20-min","kicker":"Build along","series":{"name":"The fundamentals","part":1,"of":4},"title":"Build a hero that breathes — in 20 minutes","deck":"Most hero sections die on the fold because nothing in them moves with intent. This walkthrough …","minutes":20,"level":"Beginner","tags":["hero","animation"],"updated":"2026-09-09","blocks":[{"h":"Why heroes feel dead","body":["A hero is one glance. If every pixel is still, the eye treats it like a magazine cover — read once, scroll on. You don't need autoplay video or a 3D library; you need three cheap layers of life that reinforce one message.","The recipe we use at Motif: a living backdrop (motion you can ignore), one typographic moment (motion you can't miss), and one honest action (motion under your finger)."],"links":[{"label":"Aurora Veil — living backdrop","href":"/components/aurora-veil"},{"label":"Wipe Reveal — typographic moment","href":"/components/wipe-reveal"}],"code":{},"callout":{}},{"h":"Step 1 — stack the veil","body":["Start with the backdrop so everything after it has something to sit on. Aurora Veil is three radial gradients drifting on a slow clock plus a grain pass — GPU-composited, zero JavaScript.","Resist cranking the speed. A drift that takes 16–20s per cycle reads as 'alive but expensive'. Faster reads as 'screensaver'."],"links":[],"code":{"title":"veil layer","lang":"tsx","text":"<section className=\"relative min-h-[90vh] overflow-hidden bg-[#07080d]\">\n  {/* layer 1: living backdrop */}\n  <AuroraVeil hueA={262} hueB={192} speed={18} grain\n              className=\"absolute inset-0\" />\n  {/* layer 2+3 arrive below */}\n</section>"},"callout":{}}],"takeaways":[],"revised":"","revisedNote":"","author":"","prereqs":[],"footnotes":[]},
  {"slug":"easing-is-a-language","kicker":"Field guide","series":{"name":"The fundamentals","part":2,"of":4},"title":"Easing is a language — a field guide to curves","deck":"The single highest-leverage skill in web animation is choosing the right curve. This guide maps…","minutes":12,"level":"Intermediate","tags":["easing","motion"],"updated":"2026-09-08","blocks":[{"h":"Start with the feeling, not the curve","body":["Every easing curve is a personality. Linear says 'machine'. ease-out says 'expensive'. back-out says 'confident'. elastic says 'celebration'. If you pick curves by copying presets, your page has the personality of a default theme."],"bullets":[],"code":{},"callout":{},"links":[]},{"h":"The six curves that cover 90% of UI","body":[],"bullets":["linear — progress bars, marquees, anything mechanical. Never for entrance motion.","ease-out-expo (0.16 1 0.3 1) — the workhorse entrance. Fast start, long settle = 'premium'. Use for cards, sections, images entering."],"code":{"title":"the workhorse","lang":"css","text":"/* the 'expensive' entrance: fast to 80%, then glide */\n.card-enter {\n  animation: rise .7s cubic-bezier(.16, 1, .3, 1) both;\n}\n@keyframes rise {\n  from { opacity: 0; transform: translateY(16px); }\n  to   { opacity: 1; transform: none; }\n}\n\n/* overshoot for ONE hero element */\n.spotlight {\n  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);\n}"},"callout":{},"links":[]}],"takeaways":[],"revised":"","revisedNote":"","author":"","prereqs":[],"footnotes":[]},
  {"slug":"prompt-that-reproduces","kicker":"AI workflows","series":{"name":"The fundamentals","part":3,"of":4},"title":"Write AI prompts that reproduce — not ones that 'inspire'","deck":"Most AI website prompts get you 60% fidelity because they describe vibes ('make it sleek') inst…","minutes":15,"level":"Intermediate","tags":["ai","prompts"],"updated":"2026-09-09","blocks":[{"h":"Constraints beat adjectives","body":["In every run log on this site you'll see the same pattern: prompts with concrete constraints score 10–15 points higher than adjective prompts. 'Sleek' is unmeasurable; '16px radius, near-black #07080B canvas, one violet→cyan accent used only for CTAs' is a spec."],"bullets":["Give the palette as hex/HSL, and say where each colour is *allowed* — restraint instructions land harder than colour names.","Give a component inventory (nav, bento features, pricing toggle) so the model doesn't invent sections."],"code":{},"callout":{},"links":[]},{"h":"The skeleton that scores 90+","body":[],"bullets":[],"code":{"title":"prompt skeleton","lang":"text","text":"Build a [page type] in [stack].\n\nPalette\n• canvas / ink / accent (hex) — and where each is allowed\n• accent reserved for [moments]\n\nAbove the fold\n• [section]: [2-3 concrete requirements, incl. typography scale]\n• [headline copy — write it for me, in this voice: ___]\n\nSections (in order)\n1. [name] — [what it must contain + interaction]\n2. [name] — ...\n3. [name] — ...\n\nMotion budget\n• entrances: [easing/duration hint]\n• interactive: [hover/click rules]\n• prohibited: [list]\n\nTone & traps\n• write copy like [persona]\n• avoid [stock clichés]\n• accessibility: [WCAG notes]"},"callout":{},"links":[]}],"takeaways":[],"revised":"","revisedNote":"","author":"","prereqs":[],"footnotes":[]},
];

// The demo reads the site's own catalog: 184 briefs and 661 recorded model runs. Three real
// records are inlined below — long fields trimmed — so this file runs as
// written. Replace the array with your own data, or read the full list from
// the site, where /api/search?q= returns the matching records as JSON.
const PROMPTS = [
  {"slug":"dark-saas-pricing-launch","title":"Dark SaaS launch page with aurora hero","titleZh":"暗色 SaaS 发布页：极光 hero","industry":"SaaS","vibe":"dark, premium, minimal","stacks":["Next.js","HTML"],"blocks":["Nav","Hero"],"status":"featured","avgFidelity":92,"bestModel":"Claude 4.6 Sonnet","runs":[{"model":"Claude 4.6 Sonnet","date":"2026-08-04","fidelity":95,"buildError":false,"notes":"Matches reference spacing almost 1:1; fonts swapped gra…"},{"model":"Codex","date":"2026-08-04","fidelity":91,"buildError":false,"notes":"Solid. Needed one nudge to enable the toggle pricing."}],"promptBody":"Build a one-page dark SaaS landing in Next.js + Tailwind.\n• Palette: near-black #07080B canvas,…","author":"Motif Studio","published":"2026-08-04","tokens":[],"estLoc":0,"relatedComponents":[],"revised":"","revisedNote":"","remixes":[],"viewport":""},
  {"slug":"3d-portfolio-neon","title":"3D portfolio with neon orbit showcase","titleZh":"","industry":"Portfolio","vibe":"bold, 3D, neon","stacks":["Next.js","React"],"blocks":["Hero","Orbit gallery"],"status":"verified","avgFidelity":87,"bestModel":"Codex","runs":[{"model":"Codex","date":"2026-07-29","fidelity":91,"buildError":false,"notes":"Orbit ring implemented with spring physics — great feel."},{"model":"Claude 4.6 Sonnet","date":"2026-07-29","fidelity":85,"buildError":false,"notes":"Accurate but used heavier 3D lib than asked; suggested …"}],"promptBody":"Design a portfolio hero that feels like a neon gallery.\n• Left: name + role in large display ty…","author":"Motif Studio","published":"2026-07-29","tokens":[],"estLoc":0,"relatedComponents":[],"revised":"","revisedNote":"","remixes":[],"viewport":""},
  {"slug":"fintech-trust-page","title":"Fintech trust page (compliance tone)","titleZh":"金融科技信任页（合规语气）","industry":"Fintech","vibe":"calm, trustworthy, crisp","stacks":["Next.js","HTML"],"blocks":["Hero","Security bento"],"status":"verified","avgFidelity":89,"bestModel":"Claude 4.6 Sonnet","runs":[{"model":"Claude 4.6 Sonnet","date":"2026-08-01","fidelity":92,"buildError":false,"notes":"Excellent typographic hierarchy for legal-adjacent copy."},{"model":"GLM-4.6 (CN)","date":"2026-08-01","fidelity":88,"buildError":false,"notes":"Very close; metric band needed re-spacing."}],"promptBody":"A fintech page that earns trust, not hype.\n• Off-white paper background, ink navy text, single …","author":"Motif Studio","published":"2026-08-01","tokens":[],"estLoc":0,"relatedComponents":[],"revised":"","revisedNote":"","remixes":[],"viewport":""},
];

export function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState<boolean>(() =>
    typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const on = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

export function StatsCountupBand() {
  const reduced = useReducedMotion();
  // the audit batch fixed this band: the numbers were hand-typed and had
  // already drifted one batch after shipping. Computed now, from the data.
  const stats: [string, number, string][] = [
    ["components", COMPONENTS.length, "across thirteen scene sets"],
    ["prompts", PROMPTS.length, "each with run logs"],
    ["essays", LEARN_ARTICLES.length, "series and standalone"],
    ["backgrounds", BACKGROUNDS.length, "all CSS-owned"],
  ];
  return (
    <div className="grid w-80 grid-cols-2 gap-3">
      {stats.map(([label, value, note]) => (
        <div key={label} className="rounded-2xl border border-white/10 bg-panel p-4 text-center">
          <p className="text-2xl font-black tabular-nums text-cyan-200">{reduced ? value : value}</p>
          <p className="text-[11px] font-bold capitalize">{label}</p>
          <p className="text-[9px] text-ink-faint">{note}</p>
        </div>
      ))}
    </div>
  );
}