"use client" // npm install @phosphor-icons/react framer-motion import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence, useMotionValue, useTransform, } from "framer-motion" // import { Play, Pause, SkipBack, SkipForward, Heart, Shuffle, Queue, ArrowLeft } from '@phosphor-icons/react' import { Play, Pause, SkipBack, SkipForward, Heart, Shuffle, ListMusic as Queue, ArrowLeft, } from "lucide-react" const TRACKS = [ { title: "Midnight Drive", artist: "Neon Collective", color: "#FF6BF5", duration: 234, }, { title: "Glass Horizons", artist: "Aurora Synth", color: "#06D6A0", duration: 198, }, { title: "Warm Signal", artist: "Dusk Protocol", color: "#FF7B54", duration: 267, }, ] function formatTime(s: number) { const m = Math.floor(s / 60) const sec = Math.floor(s % 60) return `${m}:${sec.toString().padStart(2, "0")}` } export default function GlassMusicPlayer() { const [trackIdx, setTrackIdx] = useState(0) const [playing, setPlaying] = useState(false) const [liked, setLiked] = useState(false) const [shuffled, setShuffled] = useState(false) const [elapsed, setElapsed] = useState(0) // seconds — updated at ~4fps for timestamps only const rafRef = useRef(0) const startRef = useRef(0) const progressRef = useRef(0) // MotionValue drives the bar width directly — zero React re-renders per frame const progressMV = useMotionValue(0) const barWidth = useTransform(progressMV, (v) => `${v * 100}%`) const track = TRACKS[trackIdx] useEffect(() => { if (!playing) { cancelAnimationFrame(rafRef.current) return } const SPEED = 15 startRef.current = performance.now() - progressRef.current * track.duration * (1000 / SPEED) let lastLabelUpdate = 0 const tick = (now: number) => { const ms = now - startRef.current const pct = Math.min(ms / (track.duration * (1000 / SPEED)), 1) progressRef.current = pct // Update bar without triggering React render progressMV.set(pct) // Update timestamp text at ~4 fps — imperceptible lag, zero jank if (now - lastLabelUpdate > 250) { setElapsed(pct * track.duration) lastLabelUpdate = now } if (pct < 1) { rafRef.current = requestAnimationFrame(tick) } else { setPlaying(false) progressRef.current = 0 progressMV.set(0) setElapsed(0) } } rafRef.current = requestAnimationFrame(tick) return () => cancelAnimationFrame(rafRef.current) }, [playing, track.duration, progressMV]) const skipTo = (dir: -1 | 1) => { setPlaying(false) progressRef.current = 0 progressMV.set(0) setElapsed(0) setTrackIdx((i) => (i + dir + TRACKS.length) % TRACKS.length) } return (

{/* Background */}

{/* Card */} {/* Blur layer — non-animating, isolated from entrance spring */}

{/* Top edge highlight */}

{/* ── Top bar ───────────────────────────────────────────────────────── */}

Now Playing setLiked((l) => !l)} className="cursor-pointer" animate={{ color: liked ? track.color : "rgba(255,255,255,0.35)", }} transition={{ duration: 0.2 }} >

{/* ── Album art — large circle ──────────────────────────────────────── */} {/* Ambient glow behind the disc */}

{/* Disc */}

{[1, 0.78, 0.58, 0.38].map((s, i) => (

))} {/* Center hole */}

{/* ── Track info ────────────────────────────────────────────────────── */}

{track.title}

{track.artist}

{/* ── Pagination dots ───────────────────────────────────────────────── */}

{TRACKS.map((_, i) => ( { setPlaying(false) progressRef.current = 0 progressMV.set(0) setElapsed(0) setTrackIdx(i) }} animate={{ width: i === trackIdx ? 20 : 5, opacity: i === trackIdx ? 0.5 : 0.22, backgroundColor: i === trackIdx ? track.color : "#ffffff", }} transition={{ type: "spring", stiffness: 400, damping: 28, }} className="h-[5px] cursor-pointer rounded-full" style={{ minWidth: 5 }} /> ))}

{/* ── Progress bar ──────────────────────────────────────────────────── */}

{/* Track */}

{formatTime(elapsed)} {formatTime(track.duration)}

{/* ── Controls ──────────────────────────────────────────────────────── */}

setShuffled((s) => !s)} className="cursor-pointer" animate={{ color: shuffled ? track.color : "rgba(255,255,255,0.35)", }} transition={{ duration: 0.2 }} > skipTo(-1)} className="cursor-pointer" style={{ color: "rgba(255,255,255,0.65)" }} > {/* Play / Pause — main CTA */} setPlaying((p) => !p)} className="flex h-[52px] w-[52px] cursor-pointer items-center justify-center rounded-full" animate={{ background: `radial-gradient(circle at 38% 35%, ${track.color}ee, ${track.color}99)`, boxShadow: `0 4px 20px ${track.color}55, 0 0 0 1px ${track.color}33`, }} transition={{ duration: 0.3 }} > {playing ? ( ) : ( )} skipTo(1)} className="cursor-pointer" style={{ color: "rgba(255,255,255,0.65)" }} >

) }