Success-state Celebration

// Success-state Celebration — the demo's own source, extracted verbatim.
// From src/components/demos/scenes-17.tsx, export SuccessBurst.
// 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.
// 3 helpers the demo imports are inlined above it, verbatim.
// Imports next/link — that dependency is part of the source.
// Catalog-dependent: the array below is a three-record sample of the site's own data.

import { type FormEvent, useEffect, useId, useRef, useState } from "react";

import Link from "next/link";

// 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":[]},
];

function useReducedMotion() {
  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;
}

const BURST_PARTICLES = 12;

const NEXT_STEPS = [
  { href: "/components", label: "Open the catalog", meta: `${COMPONENTS.length} components` },
  { href: "/learn", label: "Read a guide", meta: `${LEARN_ARTICLES.length} essays` },
  { href: "/lab", label: "Try the Lab", meta: "free tools, no sign-in" },
];

export function SuccessBurst() {
  const uid = useId();
  const [email, setEmail] = useState("");
  const [created, setCreated] = useState(false);
  const [error, setError] = useState("");
  const [burst, setBurst] = useState(0);
  const reduced = useReducedMotion();
  const hostRef = useRef<HTMLDivElement>(null);

  // One shot per submit, twelve particles, and nothing at all under reduced
  // motion — the check mark itself is the whole celebration there.
  useEffect(() => {
    if (!burst || reduced) return;
    const host = hostRef.current;
    if (!host) return;
    const particles = host.querySelectorAll<HTMLElement>("[data-particle]");
    const anims: Animation[] = [];
    particles.forEach((el, i) => {
      const angle = (i / Math.max(1, particles.length)) * Math.PI * 2;
      const distance = 46 + (i % 3) * 10;
      anims.push(
        el.animate(
          [
            { transform: "translate(0px, 0px) scale(1)", opacity: 1 },
            {
              transform: `translate(${Math.round(Math.cos(angle) * distance)}px, ${Math.round(Math.sin(angle) * distance)}px) scale(.35)`,
              opacity: 0,
            },
          ],
          { duration: 620, easing: "cubic-bezier(.22,.61,.36,1)" },
        ),
      );
    });
    return () => anims.forEach((a) => a.cancel());
  }, [burst, reduced]);

  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!email.trim()) {
      setError("Type an address first — nothing is sent either way.");
      return;
    }
    setError("");
    setCreated(true);
    setBurst((b) => b + 1);
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center bg-[radial-gradient(70%_90%_at_50%_100%,rgba(52,211,153,0.10),transparent_60%),#08090f] px-6 py-6">
      <div className="w-full max-w-md">
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-emerald-300/80">Success-state celebration</p>
          <p className="text-[10px] text-ink-faint">
            {reduced ? "reduced motion: no burst, check only" : `${BURST_PARTICLES} particles, one shot, 620 ms`}
          </p>
        </div>

        <div ref={hostRef} className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[.02] p-4">
          {created ? (
            <div className="relative">
              <div className="relative mx-auto grid h-10 w-10 place-items-center" aria-hidden>
                <span className="absolute inset-0 rounded-full bg-emerald-400/15" />
                <svg viewBox="0 0 24 24" className="h-5 w-5">
                  <path d="M5 12.5 10 17.5 19 7" fill="none" stroke="rgba(110,231,183,.95)" strokeWidth="2" strokeLinecap="round" />
                </svg>
                {!reduced &&
                  Array.from({ length: BURST_PARTICLES }).map((_, i) => (
                    <span
                      key={i}
                      data-particle
                      className="absolute h-1 w-1 rounded-full bg-emerald-300/80"
                      style={{ top: "50%", left: "50%" }}
                    />
                  ))}
              </div>
              <p className="mt-2 text-center text-[12px] font-bold text-ink">Account created — in this panel only</p>
              <p className="mt-1 text-center text-[11px] leading-relaxed text-ink-dim">
                No request left the page and nothing was written to storage: reload and the form is empty again. The celebration is a picture of
                the moment, not a receipt for one.
              </p>
              <ul className="mt-3 space-y-1.5">
                {NEXT_STEPS.map((step) => (
                  <li key={step.href} className="flex items-center justify-between rounded-xl border border-white/10 bg-white/[.03] px-3 py-1.5">
                    <Link href={step.href} className="text-[11px] font-medium text-emerald-100 hover:underline">
                      {step.label}
                    </Link>
                    <span className="font-mono text-[10px] text-ink-faint">{step.meta}</span>
                  </li>
                ))}
              </ul>
            </div>
          ) : (
            <form onSubmit={submit} className="space-y-2">
              <p className="text-[12px] font-bold text-ink">Create a demo account</p>
              <p className="text-[11px] leading-relaxed text-ink-dim">
                A success state is worth designing properly: it is the screen people screenshot. This one runs in the panel with no backend
                behind it.
              </p>
              <label className="block text-[10px] uppercase tracking-widest text-ink-faint" htmlFor={`${uid}-success-email`}>
                Email
              </label>
              <input
                id={`${uid}-success-email`}
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@studio.example"
                className="w-full rounded-xl border border-white/10 bg-white/[.04] px-3 py-2 text-[11px] text-ink placeholder:text-ink-faint focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-300"
              />
              {error ? (
                <p className="text-[10px] text-rose-300/90">{error}</p>
              ) : (
                <p className="text-[10px] text-ink-faint">Press Enter or the button — both paths do the same thing.</p>
              )}
              <button type="submit" className="btn btn-primary !px-4 !py-2 text-[11px]">
                Create account (demo)
              </button>
            </form>
          )}
        </div>

        <div className="mt-2 flex flex-wrap items-center gap-2">
          <button
            type="button"
            onClick={() => {
              setCreated(false);
              setEmail("");
              setError("");
            }}
            disabled={!created}
            className="btn btn-ghost !px-3 !py-1.5 text-[10px] disabled:opacity-40"
          >
            Start over
          </button>
          <button
            type="button"
            onClick={() => {
              setCreated(true);
              setBurst((b) => b + 1);
            }}
            className="btn btn-ghost !px-3 !py-1.5 text-[10px]"
          >
            Fire the burst again
          </button>
        </div>

        <p aria-live="polite" className="mt-2 min-h-[1rem] text-[10px] leading-relaxed text-emerald-200/80">
          {created
            ? reduced
              ? "Success state, no burst: with reduced motion the check mark is the entire celebration."
              : `Success state, burst fired ${burst} time${burst === 1 ? "" : "s"} — capped at ${BURST_PARTICLES} particles and never on load.`
            : "Waiting for a submit. The burst cannot fire on page load or on a loop."}
        </p>
        <p className="mt-1 text-[10px] leading-relaxed text-ink-faint">
          Restraint is the design brief: one burst per deliberate action, no confetti behind the content, and the reduced-motion version
          drops the particles rather than shrinking them. The three next steps link to pages that exist.
        </p>
      </div>
    </div>
  );
}