{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"waveform-player","type":"registry:component","title":"Waveform player","description":"Inks in a podcast's waveform, with chapter markers and a ghost playhead.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/waveform-player.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport {\n animate,\n AnimatePresence,\n motion,\n useMotionValue,\n useMotionValueEvent,\n type AnimationPlaybackControls,\n} from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\n/* The teachable part: the waveform is drawn twice, a quiet copy and an inked\n copy clipped to the playhead, so progress is one clip-path write per frame\n instead of recolouring a hundred bars. Position lives in a motion value:\n playback sets it, and seeks and scrubs spring it, so every jump glides\n and a scrub that changes direction keeps its momentum. */\n\nexport type Chapter = { start: number; title: string };\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// Critically damped: the ink should land on the spot you clicked, never\n// overshoot past it and come back.\nconst SEEK = { type: \"spring\", visualDuration: 0.3, bounce: 0 } as const;\n// Tighter while dragging, so the ink stays under the finger.\nconst SCRUB = { type: \"spring\", visualDuration: 0.12, bounce: 0 } as const;\nconst RATES = [1, 1.5, 2] as const;\nconst ICON_SWAP = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\n\nconst fmt = (s: number) => {\n const t = Math.max(0, Math.floor(s));\n const h = Math.floor(t / 3600);\n const m = Math.floor((t % 3600) / 60);\n const sec = String(t % 60).padStart(2, \"0\");\n return h ? `${h}:${String(m).padStart(2, \"0\")}:${sec}` : `${m}:${sec}`;\n};\n\nfunction mulberry32(seed: number) {\n return () => {\n seed |= 0;\n seed = (seed + 0x6d2b79f5) | 0;\n let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\n// Stand-in peaks with the texture of a conversation: turns of speech at\n// different loudness, short breaths between them, a steady music bed at the\n// top, and a real pause wherever a chapter begins. Seeded, so the server and\n// client draw the same wave.\nexport function speechPeaks(\n count: number,\n duration: number,\n chapters: Chapter[] = [],\n seed = 7,\n) {\n const rand = mulberry32(seed);\n const out: number[] = [];\n let level = 0.6;\n let run = 0;\n const breaks = new Set(\n chapters.slice(1).map((c) => Math.round((c.start / duration) * count)),\n );\n for (let i = 0; i < count; i++) {\n if (i < 4) {\n // The intro music: loud and even, unlike speech.\n out.push(0.72 + rand() * 0.08);\n continue;\n }\n if (breaks.has(i) || breaks.has(i + 1)) {\n out.push(0.08 + rand() * 0.06);\n run = 0;\n continue;\n }\n if (run <= 0) {\n if (rand() < 0.2) {\n level = 0.1 + rand() * 0.1;\n run = 1;\n } else {\n level = 0.4 + rand() * 0.55;\n run = 3 + Math.floor(rand() * 7);\n }\n }\n out.push(Math.min(1, level * (0.55 + rand() * 0.45)));\n run--;\n }\n return out;\n}\n\nexport function WaveformPlayer({\n title,\n show,\n duration: durationProp,\n chapters,\n peaks: peaksProp,\n src,\n cover,\n className,\n}: {\n title: string;\n show: string;\n // Seconds. Used until the audio reports its own, or throughout when there\n // is no audio and the player runs on a simulated clock.\n duration: number;\n chapters: Chapter[];\n // 0 to 1 per bar; generated when omitted.\n peaks?: number[];\n src?: string;\n cover?: React.ReactNode;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion() ?? false;\n const id = useId();\n const audio = useRef(null);\n const [duration, setDuration] = useState(durationProp);\n const peaks = useMemo(\n () => peaksProp ?? speechPeaks(112, durationProp, chapters),\n [peaksProp, durationProp, chapters],\n );\n const barChapter = useMemo(\n () =>\n peaks.map((_, i) => {\n const t = ((i + 0.5) / peaks.length) * duration;\n let c = 0;\n chapters.forEach((ch, j) => {\n if (t >= ch.start) c = j;\n });\n return c;\n }),\n [peaks, chapters, duration],\n );\n\n const [playing, setPlaying] = useState(false);\n const [rate, setRate] = useState<(typeof RATES)[number]>(1);\n const [chapter, setChapter] = useState(0);\n\n const root = useRef(null);\n const wave = useRef(null);\n const ink = useRef(null);\n const chapterInk = useRef(null);\n const quietSegs = useRef<(HTMLSpanElement | null)[]>([]);\n const inkSegs = useRef<(HTMLSpanElement | null)[]>([]);\n const head = useRef(null);\n const ghost = useRef(null);\n const tip = useRef(null);\n const tipTime = useRef(null);\n const tipLabel = useRef(null);\n const now = useRef(null);\n const baseBars = useRef<(HTMLSpanElement | null)[]>([]);\n\n // The clock. Simulated playback anchors to wall time, so a paused rAF\n // (offscreen, background tab) catches up instead of drifting.\n const pos = useRef(0);\n const anchor = useRef({ t: 0, wall: 0 });\n const rateRef = useRef(1);\n const playingRef = useRef(false);\n const dragging = useRef(false);\n const seekAnim = useRef(null);\n const shown = useMotionValue(0);\n const lastSecond = useRef(-1);\n const hoverChapter = useRef(-1);\n\n const chapterAt = useCallback(\n (t: number) => {\n let c = 0;\n chapters.forEach((ch, j) => {\n if (t >= ch.start) c = j;\n });\n return c;\n },\n [chapters],\n );\n\n // Every visual that follows the position, written straight to the DOM.\n const draw = useCallback(\n (t: number) => {\n const p = duration ? Math.min(Math.max(t / duration, 0), 1) : 0;\n const clip = `inset(0 ${(1 - p) * 100}% 0 0)`;\n if (ink.current) ink.current.style.clipPath = clip;\n if (chapterInk.current) chapterInk.current.style.clipPath = clip;\n if (head.current) head.current.style.left = `${p * 100}%`;\n const sec = Math.floor(t);\n if (sec !== lastSecond.current) {\n lastSecond.current = sec;\n if (now.current) now.current.textContent = fmt(t);\n const c = chapterAt(t);\n wave.current?.setAttribute(\"aria-valuenow\", String(sec));\n wave.current?.setAttribute(\n \"aria-valuetext\",\n `${fmt(t)} of ${fmt(duration)}, ${chapters[c].title}`,\n );\n setChapter(c);\n }\n },\n [duration, chapters, chapterAt],\n );\n\n useMotionValueEvent(shown, \"change\", draw);\n\n const clock = () =>\n src && audio.current\n ? audio.current.currentTime\n : playingRef.current\n ? anchor.current.t + ((performance.now() - anchor.current.wall) / 1000) * rateRef.current\n : pos.current;\n\n const seek = (t: number, spring: typeof SEEK | typeof SCRUB | null = SEEK) => {\n const next = Math.min(Math.max(t, 0), duration);\n pos.current = next;\n anchor.current = { t: next, wall: performance.now() };\n if (src && audio.current) audio.current.currentTime = next;\n if (!spring || reduceMotion) {\n seekAnim.current?.stop();\n seekAnim.current = null;\n shown.set(next);\n return;\n }\n // Retargeting the running spring keeps its velocity.\n const anim = animate(shown, next, spring);\n seekAnim.current = anim;\n anim.then(() => {\n if (seekAnim.current === anim) seekAnim.current = null;\n });\n };\n\n // The playback loop. Runs only while playing and on screen.\n const visible = useRef(true);\n const wake = useRef(() => {});\n useEffect(() => {\n if (!playing) return;\n let raf = 0;\n const loop = () => {\n raf = 0;\n if (!visible.current) return;\n let t = clock();\n if (!src && t >= duration) {\n t = duration;\n pos.current = t;\n playingRef.current = false;\n setPlaying(false);\n }\n // A seek or scrub owns the playhead until its spring settles.\n if (!seekAnim.current && !dragging.current) shown.set(t);\n raf = requestAnimationFrame(loop);\n };\n wake.current = () => {\n if (!raf) raf = requestAnimationFrame(loop);\n };\n wake.current();\n return () => {\n cancelAnimationFrame(raf);\n wake.current = () => {};\n };\n // clock only reads refs, so it never needs to restart the loop.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [playing, src, duration, shown]);\n\n useEffect(() => {\n const el = root.current;\n if (!el) return;\n const io = new IntersectionObserver(([entry]) => {\n visible.current = entry.isIntersecting;\n wake.current();\n });\n io.observe(el);\n return () => {\n io.disconnect();\n seekAnim.current?.stop();\n };\n }, []);\n\n const toggle = () => {\n const next = !playingRef.current;\n if (next && pos.current >= duration) pos.current = 0;\n const t = next ? pos.current : clock();\n pos.current = t;\n anchor.current = { t, wall: performance.now() };\n playingRef.current = next;\n setPlaying(next);\n if (src && audio.current) {\n if (next) audio.current.play().catch(() => {\n playingRef.current = false;\n setPlaying(false);\n });\n else audio.current.pause();\n }\n };\n\n const cycleRate = () => {\n const next = RATES[(RATES.indexOf(rate) + 1) % RATES.length];\n // Re-anchor so the new speed applies from here, not from play.\n const t = clock();\n pos.current = t;\n anchor.current = { t, wall: performance.now() };\n rateRef.current = next;\n if (audio.current) audio.current.playbackRate = next;\n setRate(next);\n };\n\n // Hover and scrub feedback: a ghost playhead and a time preview.\n const showTip = (x: number, t: number, label: string) => {\n const w = wave.current;\n const el = tip.current;\n if (!w || !el) return;\n const width = w.offsetWidth;\n const half = el.offsetWidth / 2;\n const cx = Math.min(Math.max(x, half), width - half);\n el.style.transform = `translate(${cx}px, 0) translateX(-50%)`;\n el.style.opacity = \"1\";\n if (tipTime.current) tipTime.current.textContent = fmt(t);\n if (tipLabel.current) tipLabel.current.textContent = label;\n };\n const hideTip = () => {\n if (tip.current) tip.current.style.opacity = \"0\";\n if (ghost.current) ghost.current.style.opacity = \"0\";\n tintChapter(-1);\n };\n\n // The chapter under the cursor lifts out of the quiet copy of the wave.\n const tintChapter = (c: number) => {\n if (c === hoverChapter.current) return;\n hoverChapter.current = c;\n baseBars.current.forEach((bar, i) => {\n // Twice the resting 0.2, still well short of the played ink.\n if (bar) bar.style.opacity = c >= 0 && barChapter[i] === c ? \"0.4\" : \"\";\n });\n // Its segment of the chapter track thickens too, quiet and inked alike.\n [quietSegs, inkSegs].forEach((segs) =>\n segs.current.forEach((seg, i) => {\n if (seg) seg.style.scale = i === c ? \"1 2\" : \"\";\n }),\n );\n };\n\n const timeAt = (clientX: number) => {\n const box = wave.current!.getBoundingClientRect();\n const x = Math.min(Math.max(clientX - box.left, 0), box.width);\n return { x, t: (x / box.width) * duration };\n };\n\n const hover = (clientX: number) => {\n const { x, t } = timeAt(clientX);\n if (ghost.current) {\n ghost.current.style.transform = `translateX(${x}px)`;\n ghost.current.style.opacity = \"1\";\n }\n const c = chapterAt(t);\n tintChapter(c);\n showTip(x, t, chapters[c].title);\n };\n\n const onPointerDown = (e: React.PointerEvent) => {\n if (e.button !== 0) return;\n e.currentTarget.setPointerCapture(e.pointerId);\n dragging.current = true;\n const { t } = timeAt(e.clientX);\n seek(t);\n hover(e.clientX);\n };\n const onPointerMove = (e: React.PointerEvent) => {\n if (dragging.current) {\n seek(timeAt(e.clientX).t, SCRUB);\n hover(e.clientX);\n } else if (e.pointerType !== \"touch\") hover(e.clientX);\n };\n const onPointerUp = (e: React.PointerEvent) => {\n if (!dragging.current) return;\n dragging.current = false;\n seek(timeAt(e.clientX).t, SCRUB);\n if (e.pointerType === \"touch\") hideTip();\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const t = clock();\n pos.current = t;\n const step = {\n ArrowRight: 5,\n ArrowUp: 5,\n ArrowLeft: -5,\n ArrowDown: -5,\n PageUp: 30,\n PageDown: -30,\n }[e.key];\n if (step !== undefined) {\n e.preventDefault();\n seek(t + step);\n } else if (e.key === \"Home\") {\n e.preventDefault();\n seek(0);\n } else if (e.key === \"End\") {\n e.preventDefault();\n seek(duration);\n } else if (e.key === \" \" || e.key === \"k\") {\n e.preventDefault();\n toggle();\n }\n };\n\n const current = chapters[chapter];\n\n return (\n \n {src && (\n {\n const d = e.currentTarget.duration;\n if (Number.isFinite(d)) setDuration(d);\n }}\n onEnded={() => {\n playingRef.current = false;\n setPlaying(false);\n }}\n />\n )}\n\n
\n
{cover}
\n
\n

{title}

\n

{show}

\n
\n
\n\n
\n \n {chapter + 1}/{chapters.length}\n \n
\n \n \n {current.title}\n \n \n
\n
\n\n {/* Room above the wave for the time preview. */}\n
\n \n \n \n
\n\n {\n if (!dragging.current && e.pointerType !== \"touch\") hideTip();\n }}\n onKeyDown={onKeyDown}\n className=\"relative h-14 cursor-pointer touch-none rounded-md outline-hidden select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-4 focus-visible:outline-foreground\"\n >\n \n
\n \n
\n \n \n \n\n {/* Chapters as a segmented track under the wave, inked by the same\n clip as the bars. Each segment jumps to its chapter's start. */}\n
\n {chapters.map((c, i) => {\n const left = (c.start / duration) * 100;\n const end = chapters[i + 1]?.start ?? duration;\n const width = ((end - c.start) / duration) * 100;\n return (\n seek(c.start)}\n onPointerEnter={(e) => {\n if (e.pointerType === \"touch\" || !wave.current) return;\n showTip((left / 100) * wave.current.offsetWidth, c.start, c.title);\n tintChapter(i);\n }}\n onPointerLeave={hideTip}\n onFocus={(e) => {\n if (!wave.current || !e.currentTarget.matches(\":focus-visible\")) return;\n showTip((left / 100) * wave.current.offsetWidth, c.start, c.title);\n tintChapter(i);\n }}\n onBlur={hideTip}\n className=\"absolute top-0 h-6 rounded-sm outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground\"\n style={{ left: `${left}%`, width: `${width}%` }}\n />\n );\n })}\n \n
\n \n
\n
\n \n\n
\n

\n 0:00\n {/* Dropped on phones, where the controls need the width. */}\n / {fmt(duration)}\n

\n
\n seek(clock() - 15)} dir={-1} />\n \n \n \n {playing ? (\n \n ) : (\n // Nudged right: a centred triangle looks off-centre.\n \n )}\n \n \n \n seek(clock() + 30)} dir={1} />\n
\n
\n \n \n \n {rate}x\n \n \n \n
\n
\n \n {playing ? `Playing at ${rate}x` : \"Paused\"}\n \n \n );\n}\n\nfunction Bars({\n peaks,\n className,\n barClassName,\n refs,\n}: {\n peaks: number[];\n className?: string;\n barClassName?: string;\n refs?: React.RefObject<(HTMLSpanElement | null)[]>;\n}) {\n return (\n // The gap is a share of the width, not a fixed 2px: 112 bars with 2px\n // gaps need 334px and would spill out of a phone-width card.\n
\n {peaks.map((p, i) => (\n {\n refs.current[i] = el;\n }\n : undefined\n }\n className={cn(\n \"min-w-px flex-1 rounded-full bg-current transition-opacity duration-150 ease-out\",\n barClassName,\n )}\n // Never below 3px, so silence still reads as part of the track.\n style={{ height: `max(3px, ${p * 100}%)` }}\n />\n ))}\n
\n );\n}\n\nfunction Segments({\n chapters,\n duration,\n className,\n refs,\n}: {\n chapters: Chapter[];\n duration: number;\n className: string;\n refs: React.RefObject<(HTMLSpanElement | null)[]>;\n}) {\n return (\n
\n {chapters.map((c, i) => {\n const end = chapters[i + 1]?.start ?? duration;\n return (\n {\n refs.current[i] = el;\n }}\n style={{\n left: `${(c.start / duration) * 100}%`,\n // A 3px gap before the next chapter, none after the last.\n width: `calc(${((end - c.start) / duration) * 100}% - ${chapters[i + 1] ? 3 : 0}px)`,\n }}\n className={cn(\n \"absolute top-[10px] h-1 rounded-full transition-[scale] duration-150 ease-out\",\n className,\n )}\n />\n );\n })}\n
\n );\n}\n\nfunction SkipButton({\n label,\n dir,\n onClick,\n}: {\n label: string;\n dir: 1 | -1;\n onClick: () => void;\n}) {\n return (\n \n \n \n \n \n {dir === 1 ? \"30\" : \"15\"}\n \n \n );\n}\n\nconst CHAPTERS: Chapter[] = [\n { start: 0, title: \"Cold open\" },\n { start: 312, title: \"Why we priced in public\" },\n { start: 1044, title: \"The churn spreadsheet\" },\n { start: 1788, title: \"Hiring a first designer\" },\n { start: 2310, title: \"Listener questions\" },\n];\n\n// The show's artwork. Cover art is content, not interface, so it keeps its\n// own printed colours in both themes: burnt orange stock, cream ink, and a\n// stack of three jars for the \"small batch\".\nfunction CoverArt() {\n const ORANGE = \"oklch(0.64 0.16 42)\";\n const CREAM = \"oklch(0.96 0.03 85)\";\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n SMALL\n \n \n BATCH\n \n \n 42\n \n \n );\n}\n\n// Generated once at module scope: the same wave on every render.\nconst PEAKS = speechPeaks(112, 2538, CHAPTERS);\n\nexport default function WaveformPlayerDemo() {\n return (\n }\n />\n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["cards"],"docs":"From ui lab: https://lab.xevrion.dev/lab/waveform-player"}