Draw-on-scroll Path

// Draw-on-scroll Path — the demo's own source, extracted verbatim.
// From src/components/demos/scenes-17.tsx, export DrawOnScroll.
// 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.

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

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 DRAW_PATH =
  "M14 96 C 40 20, 74 20, 86 62 S 118 128, 138 74 C 152 36, 174 30, 196 52 C 214 70, 214 96, 186 104 C 158 112, 132 96, 132 72 C 132 44, 160 20, 196 20";

const DRAW_NOTES = [
  "One stroked path, 9 curve segments, drawn at 1.6px on a 210×128 grid",
  "It traces when the frame scrolls into view, and again whenever you press Draw",
  "dashoffset does the work, so nothing re-lays out while it draws",
];

export function DrawOnScroll() {
  const uid = useId();
  const pathRef = useRef<SVGPathElement>(null);
  const boxRef = useRef<HTMLDivElement>(null);
  const [length, setLength] = useState(0);
  const [drawn, setDrawn] = useState(false);
  const [seen, setSeen] = useState(0);
  const reduced = useReducedMotion();

  useLayoutEffect(() => {
    const path = pathRef.current;
    if (!path) return;
    try {
      setLength(path.getTotalLength());
    } catch {
      setLength(0); // no SVG geometry API: the path stays drawn without the trace
    }
  }, []);

  useEffect(() => {
    const box = boxRef.current;
    if (!box || typeof IntersectionObserver === "undefined") {
      setDrawn(true); // no observer: show the finished path rather than nothing
      return;
    }
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            setSeen((n) => n + 1);
            setDrawn(true);
          }
        }
      },
      { threshold: 0.4 }
    );
    observer.observe(box);
    return () => observer.disconnect();
  }, []);

  return (
    <div className="flex h-full w-full flex-col items-center justify-center bg-[radial-gradient(70%_90%_at_50%_100%,rgba(56,189,248,0.12),transparent_60%),#08090f] px-6 py-6">
      <div className="w-full max-w-md">
        <div className="mb-3 flex items-baseline justify-between gap-3">
          <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-sky-300/80">Signature curve</p>
          <p className="text-[10px] tabular-nums text-ink-faint">
            {drawn ? "drawn" : "cleared"} · entered view {seen}×
          </p>
        </div>

        <div ref={boxRef} className="rounded-2xl border border-white/10 bg-white/[.02] p-3">
          <svg viewBox="0 0 210 128" className="h-40 w-full" role="img" aria-labelledby={`${uid}-draw-title ${uid}-draw-desc`}>
            <title id={`${uid}-draw-title`}>A single curve that draws itself</title>
            <desc id={`${uid}-draw-desc`}>
              A stroked path that rises from the lower left, loops once and settles near the top right. It draws when it enters
              view and can be redrawn with the button below.
            </desc>
            <path d="M6 116 H204" stroke="rgba(255,255,255,.08)" strokeWidth="1" />
            <path d="M6 64 H204" stroke="rgba(255,255,255,.05)" strokeWidth="1" strokeDasharray="4 8" />
            <path d={DRAW_PATH} fill="none" stroke="rgba(255,255,255,.06)" strokeWidth="1.6" strokeLinecap="round" />
            <path
              ref={pathRef}
              d={DRAW_PATH}
              fill="none"
              stroke="#7dd3fc"
              strokeWidth="1.6"
              strokeLinecap="round"
              style={{
                strokeDasharray: length || undefined,
                strokeDashoffset: length ? length * (drawn ? 0 : 1) : undefined,
                transition: reduced ? "none" : "stroke-dashoffset 1200ms cubic-bezier(0.4, 0, 0.2, 1)",
              }}
            />
            <circle cx="14" cy="96" r="2.6" fill="#7dd3fc" opacity={drawn ? 1 : 0} />
            <circle cx="196" cy="20" r="2.6" fill="#7dd3fc" opacity={drawn ? 1 : 0} />
          </svg>

          <div className="mt-2 flex flex-wrap items-center gap-2">
            <button
              type="button"
              onClick={() => {
                setDrawn(false);
                // One frame lets the browser apply the reset before the
                // transition runs again; without it the path never redraws.
                requestAnimationFrame(() => setDrawn(true));
              }}
              className="btn btn-ghost !px-3.5 !py-2 text-[11px]"
            >
              Draw
            </button>
            <button type="button" onClick={() => setDrawn(false)} className="btn btn-ghost !px-3.5 !py-2 text-[11px]">
              Clear
            </button>
            <span className="text-[10px] text-ink-faint">
              {length ? `${Math.round(length)}px of path` : "measuring the path…"}
            </span>
          </div>
        </div>

        <ul className="mt-3 space-y-1">
          {DRAW_NOTES.map((n) => (
            <li key={n} className="text-[10px] leading-relaxed text-ink-dim">
              · {n}
            </li>
          ))}
        </ul>
        <p className="mt-2 text-[10px] leading-relaxed text-ink-faint">
          A decoration nobody can perceive is still a decoration: the description inside the SVG carries the same content, the
          buttons work whether or not the path ever draws itself, and reduced motion skips the 1200ms entirely.
        </p>
      </div>
    </div>
  );
}