16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T43c4,'use client'; import { useEffect, useRef, useState, type CSSProperties } from 'react'; import SleeveCover from './sleeve-cover'; import { sleeveAlbums, sleeveClamp, sleeveLayout, sleeveSpring, sleeveStep, type Album, type SleeveSpringConfig, } from './sleeve-math'; export type { Album, SleeveSpringConfig } from './sleeve-math'; export type SleeveProps = { albums?: readonly Album[]; tiltAngle?: number; springConfig?: SleeveSpringConfig; initialIndex?: number; onPlay?: (album: Album) => void; compact?: boolean; paused?: boolean; className?: string; }; export default function Sleeve({ albums = sleeveAlbums, tiltAngle = -28, springConfig = {}, initialIndex = 0, onPlay, compact = false, paused = false, className = '', }: SleeveProps) { const host = useRef(null), device = useRef(null), viewport = useRef(null), cards = useRef<(HTMLDivElement | null)[]>([]), sync = useRef<() => void>(() => {}), suppress = useRef(0), [selected, setSelected] = useState(null), options = useRef({ tiltAngle, springConfig, initialIndex, selected, paused }); options.current = { tiltAngle, springConfig, initialIndex, selected, paused }; useEffect(() => { setSelected(null); }, [albums]); useEffect( () => sync.current(), [tiltAngle, springConfig, initialIndex, selected, paused], ); useEffect(() => { const root = host.current!, screen = viewport.current!, media = matchMedia('(prefers-reduced-motion: reduce)'), count = albums.length; let wanted = sleeveClamp(initialIndex, 0, Math.max(0, count - 1)), seenInitial = initialIndex, raf = 0, last = 0, gone = false, visible = true, size = 330, down: { y: number; cursor: number; lastY: number; lastTime: number; velocity: number; dragging: boolean; } | null = null, samples = 0, sampleStart = 0, seenSelected: number | null = null, returning = -1, returnTime = 2; const states = albums.map((_, i) => { const p = sleeveLayout(i, wanted, null, size, tiltAngle); return { y: sleeveSpring(p.y), scale: sleeveSpring(p.scale), angle: sleeveSpring(p.angle), z: sleeveSpring(p.z), opacity: sleeveSpring(p.opacity), yaw: sleeveSpring(0), roll: sleeveSpring(0), }; }); function draw(dt = 0) { const o = options.current, still = media.matches; if (seenSelected !== o.selected) { if (seenSelected !== null && o.selected === null) { returning = seenSelected; returnTime = 0; } seenSelected = o.selected; } returnTime += dt; if (seenInitial !== o.initialIndex) { seenInitial = o.initialIndex; wanted = sleeveClamp(seenInitial, 0, Math.max(0, count - 1)); } states.forEach((state, i) => { const target = sleeveLayout( i, wanted, o.selected, size, sleeveClamp(o.tiltAngle, -45, 0), ), config = { ...o.springConfig, stiffness: (o.springConfig.stiffness ?? 140) / (1 + (i % 6) * 0.045), }, y = sleeveStep(state.y, target.y, dt, config, still), scale = sleeveStep(state.scale, target.scale, dt, config, still), angle = sleeveStep(state.angle, target.angle, dt, config, still), z = sleeveStep(state.z, target.z, dt, config, still), opacity = sleeveClamp( sleeveStep(state.opacity, target.opacity, dt, config, still), 0, 1, ), fan = o.selected === null ? sleeveClamp(state.y.velocity / size, -1, 1) * 9 : 0, turn = i === returning && !still && returnTime < 0.85 ? Math.sin(Math.min(1, returnTime / 0.85) * Math.PI) : 0, yaw = sleeveStep(state.yaw, -18 * turn, dt, config, still), roll = sleeveStep(state.roll, 4 * turn, dt, config, still), node = cards.current[i]; if (node) { node.style.transform = `translate3d(0,${y.toFixed(3)}px,${z.toFixed(3)}px) rotateX(${(angle + fan).toFixed(3)}deg) rotateY(${yaw.toFixed(3)}deg) rotateZ(${roll.toFixed(3)}deg) scale(${scale.toFixed(4)})`; node.style.opacity = opacity.toFixed(3); node.style.zIndex = String(o.selected === i ? 300 : 200 - i); node.style.pointerEvents = opacity < 0.05 ? 'none' : 'auto'; const art = node.querySelector('.sleeve-art'); if (art) art.tabIndex = compact || opacity < 0.1 || (o.selected !== null && o.selected !== i) ? -1 : 0; } }); root.dataset.cursor = wanted.toFixed(3); root.dataset.selected = o.selected === null ? 'none' : String(o.selected); root.dataset.ready = 'true'; } function stop() { cancelAnimationFrame(raf); raf = 0; } function tick(now: number) { raf = 0; if (gone || !root.isConnected || !visible || document.hidden) return; if (options.current.paused || media.matches) { draw(); return; } const elapsed = now - last; if (elapsed < 1000 / 60 - 0.5) { raf = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, elapsed / 1000); last = now; draw(dt); samples++; if (now - sampleStart >= 750) { root.dataset.fps = ((samples * 1000) / (now - sampleStart)).toFixed(1); sampleStart = now; samples = 0; } raf = requestAnimationFrame(tick); } function wake() { if (!gone && !raf && visible && !document.hidden && count) { last = sampleStart = performance.now(); samples = 0; raf = requestAnimationFrame(tick); } } function changed() { stop(); draw(); wake(); } sync.current = changed; function resize() { const r = root.getBoundingClientRect(); size = Math.max(1, Math.min(r.width * 0.86, r.height * 0.7, 350)); root.style.setProperty('--sleeve-width', `${size}px`); draw(); wake(); } function wheel(event: WheelEvent) { if (options.current.paused || options.current.selected !== null) return; const delta = (event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? size : 1)) / 250, next = sleeveClamp(wanted + delta, 0, Math.max(0, count - 1)); if (next !== wanted) { event.preventDefault(); wanted = next; media.matches ? draw() : wake(); } } function press(event: PointerEvent) { if (options.current.paused || options.current.selected !== null || compact) return; down = { y: event.clientY, cursor: wanted, lastY: event.clientY, lastTime: performance.now(), velocity: 0, dragging: false, }; } function move(event: PointerEvent) { if (!down) return; const delta = event.clientY - down.y; if (Math.abs(delta) > 5) down.dragging = true; if (down.dragging) { try { screen.setPointerCapture(event.pointerId); } catch {} const now = performance.now(); down.velocity = (event.clientY - down.lastY) / Math.max(8, now - down.lastTime); down.lastY = event.clientY; down.lastTime = now; wanted = sleeveClamp( down.cursor + delta / (size * 0.17), 0, Math.max(0, count - 1), ); suppress.current = now + 250; media.matches ? draw() : wake(); } } function release() { if (down?.dragging) { wanted = sleeveClamp(wanted + down.velocity * 0.65, 0, Math.max(0, count - 1)); suppress.current = performance.now() + 250; } down = null; wake(); } function cancel() { down = null; } function key(event: KeyboardEvent) { if ( options.current.paused || compact || !['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape'].includes(event.key) ) return; event.preventDefault(); if (event.key === 'Escape') setSelected(null); else if (options.current.selected === null) { wanted = event.key === 'Home' ? 0 : event.key === 'End' ? Math.max(0, count - 1) : sleeveClamp( wanted + (event.key === 'ArrowDown' ? 1 : -1), 0, Math.max(0, count - 1), ); media.matches ? draw() : wake(); } } function visibility() { stop(); wake(); } const resizeObserver = new ResizeObserver(resize), observer = new IntersectionObserver(([e]) => { visible = e.isIntersecting; visibility(); }); resizeObserver.observe(root); observer.observe(root); screen.addEventListener('wheel', wheel, { passive: false }); screen.addEventListener('pointerdown', press); screen.addEventListener('pointermove', move); screen.addEventListener('pointerup', release); screen.addEventListener('pointercancel', cancel); screen.addEventListener('lostpointercapture', cancel); root.addEventListener('keydown', key); media.addEventListener('change', changed); document.addEventListener('visibilitychange', visibility); resize(); return () => { gone = true; stop(); sync.current = () => {}; resizeObserver.disconnect(); observer.disconnect(); screen.removeEventListener('wheel', wheel); screen.removeEventListener('pointerdown', press); screen.removeEventListener('pointermove', move); screen.removeEventListener('pointerup', release); screen.removeEventListener('pointercancel', cancel); screen.removeEventListener('lostpointercapture', cancel); root.removeEventListener('keydown', key); media.removeEventListener('change', changed); document.removeEventListener('visibilitychange', visibility); }; }, [albums, compact]); const active = selected !== null ? albums[selected] : undefined; function select(index: number) { if (paused || compact || performance.now() < suppress.current) return; setSelected(selected === null ? index : null); } return (

Collection {albums.length} albums

{active?.artist ?? ''} {active?.title ?? ''}

{ if (!paused && selected !== null && event.target === event.currentTarget) setSelected(null); }} > {!albums.length &&
No albums yet
} {albums.map((album, i) => (
{ cards.current[i] = node; }} className="sleeve-card" data-album={i} data-active={i === selected || undefined} style={ { transformOrigin: 'bottom center', '--sleeve-order': i - initialIndex, } as CSSProperties } >

))}

); } const styles = `.sleeve{--sleeve-width:min(70cqh,86cqw,350px);position:relative;width:100%;height:100%;min-height:0;overflow:clip;background:#08080a;container-type:size;outline:none;user-select:none}.sleeve-device{position:absolute;top:7%;left:50%;width:var(--sleeve-width);height:calc(var(--sleeve-width)*1.95);transform:translateX(-50%);overflow:clip;border:1px solid #ffffff25;border-radius:30px;background:linear-gradient(#151619,#0b0b0e 70%);box-shadow:0 24px 80px #0006}.sleeve-device header{position:absolute;inset:0 0 auto;height:68px;z-index:600;background:linear-gradient(#151619 80%,#15161900)}.sleeve-heading{position:absolute;inset:25px 16% auto;display:grid;gap:3px;text-align:center;transition:opacity 400ms linear,transform 550ms cubic-bezier(.22,1,.36,1);color:#eee}.sleeve-heading strong{font-size:12px;font-weight:600;letter-spacing:.05em}.sleeve-heading span{font-size:9px;color:#87898e;letter-spacing:.03em}.sleeve-heading.artist{opacity:0;transform:translateY(7px)}.sleeve-device[data-open=true] .collection{opacity:0;transform:translateY(-7px)}.sleeve-device[data-open=true] .artist{opacity:1;transform:translateY(0)}.sleeve-device header>i{position:absolute;top:29px;left:22px;display:grid;gap:3px;width:10px}.sleeve-device header b{height:1px;background:#87898e}.sleeve-viewport{position:absolute;inset:68px 0 0;perspective:1000px;perspective-origin:50% 20%;transform-style:preserve-3d;touch-action:none}.sleeve-card{position:absolute;top:0;left:14%;width:72%;aspect-ratio:1;transform-style:preserve-3d;will-change:transform;transform:translate3d(0,calc(var(--sleeve-width)*(.8 - var(--sleeve-order)*.17)),0) rotateX(-28deg)}.sleeve-art{display:block;width:100%;height:100%;padding:0;border:1px solid #ffffff65;border-radius:2px;background:#1a1a1e;box-shadow:0 -1px 1px #fff4,0 18px 32px #0007;overflow:hidden;cursor:pointer;backface-visibility:hidden}.sleeve-art>svg,.sleeve-art>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.sleeve-actions{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 300ms linear}.sleeve-card[data-active=true] .sleeve-actions{opacity:1;transition-delay:250ms}.sleeve-actions button{pointer-events:none;cursor:pointer;border:0;font-family:inherit}.sleeve-card[data-active=true] .sleeve-actions button{pointer-events:auto}.sleeve-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border-radius:999px;background:#1113189c;backdrop-filter:blur(12px);color:#fff;box-shadow:0 4px 20px #0003}.sleeve-play svg{width:22px;height:22px}.sleeve-pill{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);height:29px;padding:0 16px;border-radius:999px;background:#fff;color:#202124;font-size:8px;font-weight:750;letter-spacing:.05em;white-space:nowrap}.sleeve:focus-visible,.sleeve button:focus-visible{outline:1px solid #fff;outline-offset:3px}.sleeve-empty{color:#87898e;text-align:center;font-size:12px;margin-top:90px}.sleeve[data-compact=true] .sleeve-heading{top:16px}.sleeve[data-compact=true] .sleeve-heading strong{font-size:9px}.sleeve[data-compact=true] .sleeve-heading span{font-size:7px}.sleeve[data-compact=true] .sleeve-device header>i{top:19px;left:16px}html[data-theme=light] .sleeve{background:#f4f2ef}html[data-theme=light] .sleeve-device{background:#fdfdfc;border-color:#0002;box-shadow:0 20px 60px #28242015}html[data-theme=light] .sleeve-device header{background:linear-gradient(#fdfdfc 80%,#fdfdfc00)}html[data-theme=light] .sleeve-heading{color:#202127}@media(prefers-reduced-motion:reduce){.sleeve-heading,.sleeve-actions{transition:none!important}}`; 18:Tdc8,import { useId } from 'react'; import type { Album } from './sleeve-math'; export default function SleeveCover({ album, index }: { album: Album; index: number }) { const id = useId().replace(/:/g, ''), colors = album.colors ?? ['#31494e', '#c7d7c2']; if (album.artwork) return ( ); return ( ); } 19:T14f4,import { spring } from 'motion'; export type Album = { id: string; artist: string; title: string; artwork?: string; colors?: readonly [string, string]; year?: string; }; export type SleeveSpringConfig = { stiffness?: number; damping?: number; mass?: number; }; export const sleeveClamp = (n: number, a: number, b: number) => Math.max(a, Math.min(b, Number.isFinite(n) ? n : a)); export const sleeveAlbums: Album[] = [ { id: 'tidal', artist: 'Arden', title: 'Tidal Memory', colors: ['#203f46', '#b6d8b1'], year: '2026', }, { id: 'soft', artist: 'Mira Sol', title: 'Soft Geometry', colors: ['#d67c8d', '#f8dbc1'], year: '2025', }, { id: 'after', artist: 'Nocturne', title: 'After Hours', colors: ['#171b41', '#6479ce'], year: '2026', }, { id: 'sun', artist: 'Elo', title: 'Sun Room', colors: ['#efa631', '#804422'], year: '2024', }, { id: 'still', artist: 'June Atlas', title: 'Still Moving', colors: ['#566c61', '#d8d9b7'], year: '2026', }, { id: 'satin', artist: 'Forma', title: 'Satin Signals', colors: ['#983e45', '#efafa0'], year: '2025', }, { id: 'echo', artist: 'Isla', title: 'Echo Gardens', colors: ['#436476', '#a9c4c2'], year: '2026', }, { id: 'orbit', artist: 'Oriel', title: 'Inner Orbit', colors: ['#564981', '#dfb4d2'], year: '2025', }, { id: 'paper', artist: 'Cedar', title: 'Paper Cities', colors: ['#b59d79', '#ece3cd'], year: '2024', }, { id: 'blue', artist: 'Low Season', title: 'Blue Interval', colors: ['#245a78', '#83bad0'], year: '2026', }, { id: 'velvet', artist: 'Sora', title: 'Velvet Horizon', colors: ['#452c5d', '#d9a8bf'], year: '2025', }, { id: 'drift', artist: 'Northline', title: 'Slow Drift', colors: ['#35565e', '#c6d7cf'], year: '2026', }, { id: 'copper', artist: 'Milo Vale', title: 'Copper Light', colors: ['#9a5137', '#eed0a5'], year: '2024', }, { id: 'bloom', artist: 'Aster', title: 'Night Bloom', colors: ['#28352d', '#b3c5a0'], year: '2026', }, { id: 'prism', artist: 'Vela', title: 'Prism Studies', colors: ['#3b426d', '#c9b4e8'], year: '2025', }, { id: 'dune', artist: 'Toma', title: 'Dune Radio', colors: ['#987958', '#e6cf99'], year: '2026', }, { id: 'hush', artist: 'Elian', title: 'Hush Patterns', colors: ['#75485b', '#e3b9ab'], year: '2025', }, { id: 'current', artist: 'Fjord', title: 'Quiet Current', colors: ['#244d68', '#94bec5'], year: '2024', }, { id: 'chrome', artist: 'Solis', title: 'Chrome Days', colors: ['#535a68', '#d5d4c7'], year: '2026', }, { id: 'ember', artist: 'Maren', title: 'Last Ember', colors: ['#7c3736', '#f0ba87'], year: '2026', }, ]; export type SleeveSpring = { value: number; velocity: number; target: number; elapsed: number; signature: string; generator: ReturnType | null; }; export const sleeveSpring = (value: number): SleeveSpring => ({ value, velocity: 0, target: value, elapsed: 0, signature: '', generator: null, }); export function sleeveStep( s: SleeveSpring, target: number, dt: number, config: SleeveSpringConfig = {}, instant = false, ) { const stiffness = sleeveClamp(config.stiffness ?? 140, 40, 400), damping = sleeveClamp(config.damping ?? 22, 8, 50), mass = sleeveClamp(config.mass ?? 1, 0.5, 3), signature = `${stiffness},${damping},${mass}`; if (instant) { s.value = s.target = target; s.velocity = 0; s.generator = null; return target; } if (target !== s.target || signature !== s.signature) { s.generator = spring({ keyframes: [s.value, target], velocity: s.velocity, stiffness, damping, mass, restDelta: 0.001, restSpeed: 0.01, }); s.target = target; s.signature = signature; s.elapsed = 0; } if (s.generator && dt > 0) { const previous = s.value; s.elapsed += dt * 1000; const next = s.generator.next(s.elapsed); s.value = next.value; s.velocity = (s.value - previous) / dt; if (next.done) { s.value = target; s.velocity = 0; s.generator = null; } } return s.value; } export function sleeveLayout( index: number, cursor: number, selected: number | null, size: number, tilt = -28, ) { const relative = index - cursor, hero = index === selected, rank = selected !== null && index > selected ? index - 1 : index; const depth = rank / (rank + 5); if (selected !== null) return { y: hero ? size * 0.16 : size * (0.91 - depth * 0.24), scale: hero ? 1 : 0.88 - depth * 0.1, angle: hero ? 0 : tilt * 0.65, z: hero ? 48 : 24 - depth * 20, opacity: 1, }; return { y: size * 0.8 - relative * size * 0.17, scale: sleeveClamp(1 - relative * 0.045, 0.66, 1.1), angle: tilt, z: 45 - relative * 10, opacity: relative > 5.8 ? sleeveClamp(1 - (relative - 5.8) / 1.2, 0, 1) : relative < -0.7 ? sleeveClamp(1 + (relative + 0.7) / 1.4, 0, 1) : 1, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"sleeve":[{"name":"sleeve.tsx","code":"$17"},{"name":"sleeve-cover.tsx","code":"$18"},{"name":"sleeve-math.ts","code":"$19"}]},"initialElement":"sleeve","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]