{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"now-playing","type":"registry:component","title":"Now playing","description":"A listening-to pill whose record slides out from behind the cover and spins while it plays.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/now-playing.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { usePreviewPlay } from \"@/lib/preview-play\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Track = {\n title: string;\n artist: string;\n // Two colours for the generated cover and the record's label: album art\n // is data here, so raw colours are the point.\n art: [string, string];\n};\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst SLIDE = { type: \"spring\", duration: 0.5, bounce: 0.15 } as const;\nconst SWAP = { duration: 0.28, ease: EASE_OUT } as const;\n\n// A record turns at 33 1/3 rpm, 1.8s a turn; the equalizer bars bounce at\n// three unrelated rates so they never fall into step.\nconst CSS = `\n@keyframes np-spin { to { transform: rotate(360deg) } }\n@keyframes np-eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }\n@keyframes np-marquee { 0%, 18% { transform: translateX(0) } 62%, 80% { transform: translateX(var(--np-shift)) } 100% { transform: translateX(0) } }\n`;\n\nexport function NowPlaying({\n track,\n playing,\n onPlayingChange,\n onSkip,\n paused = false,\n className,\n}: {\n track: Track;\n playing: boolean;\n onPlayingChange: (playing: boolean) => void;\n onSkip?: () => void;\n // Freezes every loop, for idle previews.\n paused?: boolean;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const still = paused || reduceMotion;\n const moving = playing && !still;\n\n return (\n \n \n onPlayingChange(!playing)}\n aria-label={playing ? `Pause ${track.title}` : `Play ${track.title}`}\n aria-pressed={playing}\n className=\"absolute inset-0 rounded-full outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground\"\n />\n\n {/* Cover in front, the record behind it. Room is kept for the record\n whether it's out or tucked in, so the text never shifts. */}\n
\n \n \n \n
\n \n \n \n \n \n {/* Play and pause show on hover, over the art. */}\n \n \n {playing ? (\n \n ) : (\n \n )}\n \n \n
\n
\n\n
\n

\n {playing ? \"Listening to\" : \"Paused\"}\n

\n \n \n \n \n {track.title}\n \n ยท {track.artist}\n \n \n \n
\n\n {/* The equalizer and skip share one slot: bars at rest, skip on\n hover, so a hidden button never eats the title's room. */}\n
\n \n \n \n {onSkip && (\n // Above the pill's own button, so skipping never also pauses.\n \n \n \n \n \n )}\n
\n \n {playing ? `Playing ${track.title} by ${track.artist}` : \"Paused\"}\n \n \n );\n}\n\n// A black record in either theme: fine grooves, a coloured label with a\n// spindle hole, and a sheen that doesn't turn with it, so the spin reads as\n// light sliding across the grooves.\nfunction Vinyl({ label, spinning }: { label: string; spinning: boolean }) {\n return (\n
\n \n \n {/* Off-centre print on the label, so the turn is visible. */}\n \n \n
\n \n
\n
\n );\n}\n\n// Generated art: a sun over a horizon, in the track's two colours.\nfunction Cover({ art: [a, b] }: { art: [string, string] }) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Equalizer({ moving, playing }: { moving: boolean; playing: boolean }) {\n return (\n \n {[0.9, 0.7, 1.1].map((d, i) => (\n \n ))}\n \n );\n}\n\n// Scrolls a title that doesn't fit once to show its end, holds, and glides\n// back, then rests. Short titles never move.\nfunction Marquee({\n running,\n children,\n}: {\n running: boolean;\n children: React.ReactNode;\n}) {\n const outer = useRef(null);\n const inner = useRef(null);\n const [shift, setShift] = useState(0);\n\n useLayoutEffect(() => {\n const o = outer.current;\n const i = inner.current;\n if (!o || !i) return;\n const measure = () => setShift(Math.max(0, i.scrollWidth - o.clientWidth));\n measure();\n const ro = new ResizeObserver(measure);\n ro.observe(o);\n return () => ro.disconnect();\n }, []);\n\n return (\n 0 &&\n \"[mask-image:linear-gradient(to_right,black_calc(100%-16px),transparent)]\",\n )}\n >\n 0\n ? `np-marquee ${4 + shift / 30}s cubic-bezier(0.65,0,0.35,1) 1.2s 1 both`\n : \"none\",\n } as React.CSSProperties\n }\n >\n {children}\n \n \n );\n}\n\nconst TRACKS: Track[] = [\n { title: \"Night Drive\", artist: \"Neon Coast\", art: [\"#ff7a59\", \"#2b2d6e\"] },\n { title: \"Glass Rooms\", artist: \"Mira Sol\", art: [\"#f4d35e\", \"#0d3b3e\"] },\n {\n title: \"Everything We Built Under the Summer Light\",\n artist: \"The Hollow Hours\",\n art: [\"#9ad1d4\", \"#3a2e4f\"],\n },\n];\n\nexport default function NowPlayingDemo() {\n const play = usePreviewPlay();\n const [playing, setPlaying] = useState(true);\n const [index, setIndex] = useState(0);\n\n return (\n {\n setIndex((i) => (i + 1) % TRACKS.length);\n setPlaying(true);\n }}\n paused={play === false}\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"},{"path":"lib/preview-play.ts","type":"registry:lib","target":"lib/preview-play.ts","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\n// Lets a demo know whether it's showing in an index card, and whether that\n// card is hovered or focused. Demos use it to act themselves out on hover:\n// a star button stars itself, a checkbox scribbles, and so on.\n//\n// null: not in a preview (the component's own page, or real use).\n// false: in a preview, at rest.\n// true: in a preview, being hovered or focused: play the show.\nexport const PreviewPlayContext = createContext(null);\n\nexport function usePreviewPlay() {\n return useContext(PreviewPlayContext);\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/now-playing"}