import { useState, useEffect, useRef } from "react"; import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query"; import { Power } from "lucide-react"; const N = (v) => (v != null ? Number(v) : 0); const DB = '"taste_time_machine"."main"'; const MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"; const SANS = "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; export const REQUIRED_DATABASES = [ { type: "share", path: "md:_share/taste_time_machine/7f7fae7a-a85f-448a-bdb1-f0a41e8a8e25", alias: "taste_time_machine" }, ]; const DECADES = [ { start: 1950, label: "1950s", device: "Diner jukebox", accent: "#e8473d", bg: "#16918c", built: true }, { start: 1960, label: "1960s", device: "Transistor radio", accent: "#e0552f", bg: "#b5532a", built: true }, { start: 1970, label: "1970s", device: "Cassette deck", accent: "#e9a13a", bg: "#9c5a2a", built: true }, { start: 1980, label: "1980s", device: "Boombox", accent: "#ff2d9b", bg: "#241a55", built: true }, { start: 1990, label: "1990s", device: "Portable CD player", accent: "#27c2c2", bg: "#33285f", built: true }, { start: 2000, label: "2000s", device: "iPod", accent: "#d6d6d6", bg: "#1c1c1c", built: true }, { start: 2010, label: "2010s", device: "Smartphone", accent: "#1db954", bg: "#121212", built: true }, { start: 2020, label: "2020s", device: "Smart speaker", accent: "#7c5cff", bg: "#10101a", built: true }, ]; const GENRE_COLOR = { Rock: "#e8473d", Pop: "#16a39c", Folk: "#f4ce5a", Latin: "#e8843d", Country: "#c89a52", "R&B": "#b06fb3", Soul: "#d36fae", Disco: "#e0a93a" }; const RIFF50 = [261.63, 329.63, 392.0, 220.0, 261.63, 329.63, 174.61, 220.0, 261.63, 196.0, 246.94, 293.66]; const BASS50 = [130.81, 110.0, 87.31, 98.0]; const RIFF70 = [220.0, 277.18, 329.63, 440.0, 329.63, 277.18, 246.94, 220.0]; const BASS70 = [110.0, 110.0, 146.83, 98.0]; const RIFF60 = [329.63, 415.3, 493.88, 659.25, 493.88, 415.3, 391.99, 329.63]; const BASS60 = [164.81, 220.0, 196.0, 146.83]; const RIFF80 = [440.0, 587.33, 523.25, 659.25, 587.33, 440.0, 392.0, 523.25]; const BASS80 = [110.0, 110.0, 130.81, 98.0]; const RIFF90 = [293.66, 369.99, 440.0, 587.33, 440.0, 369.99, 329.63, 293.66]; const BASS90 = [73.42, 98.0, 110.0, 87.31]; const RIFF00 = [329.63, 392.0, 493.88, 392.0, 440.0, 392.0, 329.63, 293.66]; const BASS00 = [82.41, 98.0, 110.0, 73.42]; const RIFF10 = [261.63, 392.0, 523.25, 392.0, 440.0, 349.23, 293.66, 392.0]; const BASS10 = [65.41, 98.0, 87.31, 73.42]; const RIFF20 = [293.66, 440.0, 587.33, 493.88, 392.0, 587.33, 440.0, 349.23]; const BASS20 = [73.42, 92.5, 110.0, 98.0]; function Skel({ dark }) { return

; } function useEraAudio(power, volume, opts) { const ref = useRef({ ctx: null, master: null, step: 0, timer: null }); const cfg = useRef(opts); cfg.current = opts; function ensure() { const A = ref.current; if (A.ctx) return A; try { const Ctx = window.AudioContext || window.webkitAudioContext; if (!Ctx) return A; A.ctx = new Ctx(); A.master = A.ctx.createGain(); A.master.gain.value = 0; A.master.connect(A.ctx.destination); } catch (e) {} return A; } function step() { const A = ref.current; if (!A.ctx || !A.master) return; const { riff, bass, bassEvery } = cfg.current; const be = bassEvery || 2; try { const t = A.ctx.currentTime; const o = A.ctx.createOscillator(); const g = A.ctx.createGain(); o.type = cfg.current.wave || "triangle"; o.frequency.value = riff[A.step % riff.length]; g.gain.setValueAtTime(0.0001, t); g.gain.linearRampToValueAtTime(0.45, t + 0.02); g.gain.exponentialRampToValueAtTime(0.001, t + 0.26); o.connect(g); g.connect(A.master); o.start(t); o.stop(t + 0.28); if (A.step % be === 0 && bass && bass.length) { const bo = A.ctx.createOscillator(); const bg = A.ctx.createGain(); bo.type = "sine"; bo.frequency.value = bass[Math.floor(A.step / be) % bass.length]; bg.gain.setValueAtTime(0.0001, t); bg.gain.linearRampToValueAtTime(0.58, t + 0.02); bg.gain.exponentialRampToValueAtTime(0.001, t + 0.45); bo.connect(bg); bg.connect(A.master); bo.start(t); bo.stop(t + 0.47); } } catch (e) {} A.step++; } useEffect(() => { const A = ensure(); if (power) { try { if (A.ctx && A.ctx.state === "suspended") A.ctx.resume(); } catch (e) {} try { if (A.master && A.ctx) A.master.gain.setTargetAtTime((volume / 100) * 0.15, A.ctx.currentTime, 0.05); } catch (e) {} if (!A.timer) A.timer = setInterval(step, cfg.current.stepMs || 220); } else { try { if (A.master && A.ctx) A.master.gain.setTargetAtTime(0, A.ctx.currentTime, 0.05); } catch (e) {} if (A.timer) { clearInterval(A.timer); A.timer = null; } } }, [power]); useEffect(() => { const A = ref.current; try { if (power && A.ctx && A.master) A.master.gain.setTargetAtTime((volume / 100) * 0.15, A.ctx.currentTime, 0.05); } catch (e) {} }, [volume, power]); useEffect(() => () => { const A = ref.current; if (A.timer) clearInterval(A.timer); try { if (A.ctx) A.ctx.close(); } catch (e) {} }, []); } function useClip(sel) { const q = useSQLQuery(`SELECT mime, audio_b64 FROM ${DB}."song_preview" WHERE year = ${N(sel)} AND status = 'ok'`); const last = useRef(null); const row = Array.isArray(q.data) && q.data[0] ? q.data[0] : null; const fresh = row && row.audio_b64 ? `data:${row.mime || "audio/mp4"};base64,${row.audio_b64}` : null; if (fresh) last.current = fresh; return { uri: fresh || (q.isLoading ? last.current : null) }; } function useArt(sel) { const q = useSQLQuery(`SELECT mime, art_b64 FROM ${DB}."song_art" WHERE year = ${N(sel)}`); const row = Array.isArray(q.data) && q.data[0] ? q.data[0] : null; return row && row.art_b64 ? `data:${row.mime || "image/jpeg"};base64,${row.art_b64}` : null; } function useDecadeArt(start) { const q = useSQLQuery(`SELECT year, mime, art_b64 FROM ${DB}."song_art" WHERE year >= ${start} AND year < ${start + 10}`); const rows = Array.isArray(q.data) ? q.data : []; const map = {}; for (const r of rows) { if (r && r.art_b64) map[N(r.year)] = `data:${r.mime || "image/jpeg"};base64,${r.art_b64}`; } return map; } function useClipPlayer(uri, volume) { const ref = useRef({ ctx: null, gain: null, buffer: null, src: null, token: 0 }); const [status, setStatus] = useState("stopped"); const statusRef = useRef("stopped"); const setSt = (s) => { statusRef.current = s; setStatus(s); }; function ensure() { const A = ref.current; if (!A.ctx) { try { const Ctx = window.AudioContext || window.webkitAudioContext; if (!Ctx) return A; A.ctx = new Ctx(); A.gain = A.ctx.createGain(); A.gain.gain.value = Math.max(0, Math.min(1, volume / 100)); A.gain.connect(A.ctx.destination); } catch (e) {} } return A; } function stopSrc() { const A = ref.current; if (A.src) { try { A.src.stop(); } catch (e) {} try { A.src.disconnect(); } catch (e) {} A.src = null; } } function startSrc() { const A = ref.current; if (!A.ctx || !A.buffer || !A.gain) return; stopSrc(); try { const s = A.ctx.createBufferSource(); s.buffer = A.buffer; s.loop = true; s.connect(A.gain); s.start(0); A.src = s; } catch (e) {} } useEffect(() => { const A = ensure(); A.token++; const myToken = A.token; A.buffer = null; if (statusRef.current === "paused") { stopSrc(); setSt("stopped"); } if (!uri) { stopSrc(); return; } const comma = uri.indexOf(","); const b64 = comma >= 0 ? uri.slice(comma + 1) : uri; let buf; try { const bin = atob(b64); const len = bin.length; const arr = new Uint8Array(len); for (let i = 0; i < len; i++) arr[i] = bin.charCodeAt(i); buf = arr.buffer; } catch (e) { return; } try { const dp = A.ctx.decodeAudioData(buf); if (dp && dp.then) { dp.then((decoded) => { if (ref.current.token !== myToken) return; ref.current.buffer = decoded; if (statusRef.current === "playing") startSrc(); }).catch(() => {}); } } catch (e) {} }, [uri]); useEffect(() => { const A = ref.current; if (A.gain && A.ctx) { try { A.gain.gain.setTargetAtTime(Math.max(0, Math.min(1, volume / 100)), A.ctx.currentTime, 0.03); } catch (e) {} } }, [volume]); useEffect(() => () => { stopSrc(); const A = ref.current; try { if (A.ctx) A.ctx.close(); } catch (e) {} }, []); const play = () => { const A = ensure(); try { if (A.ctx && A.ctx.state === "suspended") A.ctx.resume(); } catch (e) {} if (statusRef.current === "playing") return; if (statusRef.current === "paused" && A.src) { setSt("playing"); return; } if (A.buffer) startSrc(); setSt("playing"); }; const pause = () => { const A = ensure(); if (statusRef.current === "playing") { try { if (A.ctx) A.ctx.suspend(); } catch (e) {} setSt("paused"); } else if (statusRef.current === "paused") { try { if (A.ctx && A.ctx.state === "suspended") A.ctx.resume(); } catch (e) {} if (!A.src && A.buffer) startSrc(); setSt("playing"); } }; const stop = () => { stopSrc(); setSt("stopped"); }; const toggle = () => { if (statusRef.current === "playing") stop(); else play(); }; return { power: status === "playing", paused: status === "paused", play, pause, stop, toggle }; } function useKnob(setVolume) { const [drag, setDrag] = useState(false); useEffect(() => { if (!drag) return; function move(e) { setVolume((v) => Math.max(0, Math.min(100, v - (e.movementY || 0)))); } function up() { setDrag(false); } window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); }; }, [drag]); return (e) => { e.preventDefault(); setDrag(true); }; } function useDecadeYears(start) { const ones = useSQLQuery(`SELECT year, title, artist, genre_broad FROM ${DB}."clean_yearend" WHERE decade_start = ${start} AND year_rank = 1 ORDER BY year`); const acts = useSQLQuery(`SELECT artist, count(*) AS appearances FROM ${DB}."clean_yearend" WHERE decade_start = ${start} GROUP BY 1 ORDER BY appearances DESC, artist LIMIT 5`); const genres = useSQLQuery(`SELECT genre_broad, count(*) AS n FROM ${DB}."clean_yearend" WHERE decade_start = ${start} AND genre_broad IS NOT NULL GROUP BY 1 ORDER BY n DESC`); return { onesRows: Array.isArray(ones.data) ? ones.data : [], actRows: Array.isArray(acts.data) ? acts.data : [], genreRows: Array.isArray(genres.data) ? genres.data : [], loading: ones.isLoading, }; } function Knob({ volume, onDown, color }) { const a = -135 + (volume / 100) * 270; return (

); } function Timeline({ decade, setDecade }) { const idx = DECADES.findIndex((x) => x.start === decade); const go = (delta) => { const ni = idx + delta; if (ni >= 0 && ni < DECADES.length) setDecade(DECADES[ni].start); }; const nav = (disabled) => ({ cursor: disabled ? "default" : "pointer", width: 30, height: 30, borderRadius: "50%", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", background: disabled ? "#1a1820" : "#26232e", border: "1px solid " + (disabled ? "#272430" : "#46424f"), color: disabled ? "#46424f" : "#d2cee0", fontSize: 13, lineHeight: 1, opacity: disabled ? 0.55 : 1 }); return (

THE TIME MACHINE OF MUSIC

{DECADES.map((d) => { const active = d.start === decade; return ( ); })}

); } function ComingSoon({ d }) { const ones = useSQLQuery(`SELECT year, title, artist FROM ${DB}."clean_yearend" WHERE decade_start = ${d.start} AND year_rank = 1 ORDER BY year`); const rows = Array.isArray(ones.data) ? ones.data : []; return (

THE {d.label}

{d.device.toUpperCase()} · BUILDING THIS MACHINE

WHILE YOU WAIT · #1 OF EVERY YEAR

{ones.isLoading ? : rows.map((r, i) => (

'{String(N(r.year)).slice(2)} {r.title} · {r.artist}

))}

); } function Panels({ onesRows, actRows, genreRows, loading, sel, setSel, accent, actBg, panelBg, border, cream, sub, prompt }) { return (

{prompt}

{loading ? : onesRows.map((r, i) => { const on = N(r.year) === sel; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "baseline", gap: 9, padding: "4px 6px", marginLeft: -6, marginRight: -6, borderRadius: 5, background: on ? "rgba(255,255,255,.12)" : "transparent" }}> '{String(N(r.year)).slice(2)} {r.title} · {r.artist}

); })}

); } function Scene1950s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1956); const clip = useClip(sel); const { power, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF50, bass: BASS50, stepMs: 230, bassEvery: 3 }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(1950); const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const SCRIPT = "'Snell Roundhand','Brush Script MT','Segoe Script',cursive"; const DISP = "'Futura','Trebuchet MS','Century Gothic',sans-serif"; const CARD = "'American Typewriter','Courier New',Courier,serif"; const chromeV = "linear-gradient(90deg,#566066 0%,#aeb6bb 20%,#f6f9fa 40%,#c4ccd0 58%,#878f95 80%,#525a60 100%)"; const cream = "#f7ecd2", red = "#cc2e28"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : red; const tube = (hue) => ({ width: 15, height: 168, borderRadius: 9, flexShrink: 0, position: "relative", overflow: "hidden", border: "1px solid rgba(0,0,0,.22)", transition: "box-shadow .3s", background: `linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.15) 26%, rgba(0,0,0,.12) 64%, rgba(0,0,0,.3) 100%), linear-gradient(180deg, ${hue}, ${hue})`, boxShadow: power ? `0 0 16px ${hue}, inset 0 0 8px rgba(255,255,255,.45)` : "inset 0 0 7px rgba(0,0,0,.35)" }); const bubbles = { position: "absolute", inset: 0, backgroundSize: "100% 56px", background: "radial-gradient(circle at 50% 92%, rgba(255,255,255,.95) 0 2px, transparent 3px), radial-gradient(circle at 42% 64%, rgba(255,255,255,.85) 0 1.5px, transparent 2.5px), radial-gradient(circle at 58% 34%, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 48% 12%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px)", opacity: power ? 0.95 : 0.25 }; return (

THE FIFTIES

nickel in the slot, rock is born

JUKEBOX

pick a year, push play

Starlite

PHONOGRAPH

{now ? now.title : "\u2014"}

{now ? now.artist : ""}

{power ? "▶ NOW PLAYING" : "● SELECT A YEAR"} · {sel}

{Array.from({ length: 9 }).map((_, i) =>

)}

MAKE YOUR SELECTION

{loading ? : (

{onesRows.map((r) => { const on = N(r.year) === sel; return ; })}

)}

VOL

{Math.round(volume)}

5¢ PLAY

SELECTIONS · 1950-59

{loading ? : onesRows.map((r, i) => { const on = N(r.year) === sel; const c = GENRE_COLOR[r.genre_broad] || "#9a6a26"; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 11, background: on ? "linear-gradient(180deg,#fff7e4,#f0e1bd)" : "linear-gradient(180deg,#f5e8c8,#e7d4ad)", borderRadius: 5, padding: "8px 12px", marginBottom: 7, borderLeft: `4px solid ${c}`, boxShadow: on ? `0 3px 10px rgba(0,0,0,.3), 0 0 0 1px ${red}` : "0 2px 5px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6)" }}> '{String(N(r.year)).slice(2)} {r.title} {r.artist} {on && power && ▶}

); })}

); } function Scene1970s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1977); const clip = useClip(sel); const { power, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF70, bass: BASS70, stepMs: 205, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, actRows, genreRows, loading } = useDecadeYears(1970); const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const T = { cream: "#f4e8cf", gold: "#e8b34a", orange: "#d2731f", rust: "#9c3f1c", wood1: "#6a4527", wood2: "#3c2412", woodHi: "#835a31", ink: "#160d06", label: "#be3a2a", labelGold: "#e8b34a", red: "#e0492f", muted: "#b59a73", panel: "#27190d" }; return (

THE 1970s

soul, singer-songwriters, and disco

HI-FI TURNTABLE

drop the needle on any year

YEAR-END #1

{now ? now.artist : ""}

{sel}

{power ? "▶ NOW PLAYING" : "■ CUED"} · {sel}

{now ? now.title : "—"}

{now ? now.artist : ""}{now && now.genre_broad ? " · " + now.genre_broad : ""}

VOL

{Math.round(volume)}

33⅓ RPM

); } function Scene1960s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1965); const clip = useClip(sel); const { power, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF60, bass: BASS60, stepMs: 195, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, actRows, genreRows, loading } = useDecadeYears(1960); const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const M = { tangerine: "#e0552f", orange: "#f07a3d", cream: "#f5ead2", creamDk: "#e7d6b0", red: "#d8392f", ink: "#2a1408", gold: "#f0b84a", muted: "#b59a73", panel: "#2a1a0e" }; const nowColor = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : M.tangerine; return (

THE 1960s

the british invasion meets motown

PORTABLE RECORD PLAYER

spin a 45 from any year

PORTA-PHONO

{Array.from({ length: 24 }).map((_, i) =>

)}

{now ? now.artist : ""}

{sel}

{power ? "▶ NOW PLAYING" : "■ CUED"} · {sel}

{now ? now.title : "—"}

{now ? now.artist : ""}{now && now.genre_broad ? " · " + now.genre_broad : ""}

VOL

{Math.round(volume)}

45 RPM

); } function SpeakerCone({ power, size }) { const s = size || 148; return (

); } function Scene1980s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1984); const clip = useClip(sel); const { power, play, stop, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF80, bass: BASS80, stepMs: 180, bassEvery: 2, wave: "sawtooth" }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(1980); const years = onesRows.map((r) => N(r.year)); const goRel = (delta) => { const i = years.indexOf(sel); if (i < 0) return; const ni = Math.max(0, Math.min(years.length - 1, i + delta)); if (ni !== i) setSel(years[ni]); }; const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const E = { magenta: "#ff2d9b", cyan: "#16e0d8", yellow: "#f5e14b" }; const D = "Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif"; const HV = "'Helvetica Neue', Arial, sans-serif"; return (

THE 1980s

SYNTHS · DRUM MACHINES · MTV

BOOMBOX

crank it to eleven

SONIC BLASTER STEREO HI-FI

{power ? "▶ PLAY" : "■ STOP"} {sel}

{now ? now.title : "—"}

{now ? now.artist : ""}

{["L", "R"].map((ch, idx) => (

{ch}

))}

{[0, 1, 2, 3, 4, 5].map((i) => (

))}

{[["◀◀", "REW"], ["▶", "PLAY"], ["■", "STOP"], ["▶▶", "FF"]].map((b, i) => { const fn = b[1] === "REW" ? () => goRel(-1) : b[1] === "FF" ? () => goRel(1) : b[1] === "PLAY" ? play : stop; const active = b[1] === "PLAY" && power; return ( ); })}

{Math.round(volume)}

MIXTAPE #1 OF EVERY YEAR · TAP TO PLAY

{loading ?

: onesRows.map((r, i) => { const on = N(r.year) === sel; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 9, padding: "6px 10px", borderRadius: 4, background: on ? "rgba(255,45,155,.12)" : "transparent", borderLeft: on ? "3px solid #ff2d9b" : "3px solid transparent" }}> {i + 1}. '{String(N(r.year)).slice(2)} {r.title} · {r.artist}

); })}

); } function Scene1970sV2() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1977); const clip = useClip(sel); const { power, paused, play, pause, stop, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF70, bass: BASS70, stepMs: 205, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(1970); const years = onesRows.map((r) => N(r.year)); const goRel = (delta) => { const i = years.indexOf(sel); if (i < 0) return; const ni = Math.max(0, Math.min(years.length - 1, i + delta)); if (ni !== i) setSel(years[ni]); }; const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const T = { wal1: "#7a4f29", wal2: "#3f2613", walHi: "#9a6a38", ink: "#170f05", cream: "#f3e7cf", gold: "#e7a93a", amber: "#ffbe5c", muted: "#a08a66", red: "#d2451f" }; const COOP = "'Cooper Black','Georgia',serif"; const HELV = "'Helvetica Neue',Arial,sans-serif"; const brush = "repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.05) 1px 2px), linear-gradient(180deg,#e3e8ec,#aab2b9 55%,#828a92)"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : T.red; return (

The Seventies

soul, songwriters, and the hustle of disco

STEREO CASSETTE DECK

load a tape from any year

AURA SD-707 D DOLBY NR

SIDE A {sel} · C-30

{now ? now.title : "—"}

{now ? now.artist : ""}

{[0, 1].map((k) => (

{[0, 60, 120].map((deg) => (

))}

{power ? "▶ PLAY" : paused ? "‖ PAUSE" : "■ STOP"} COUNTER {String(sel).slice(2)}0

{["L", "R"].map((ch, idx) => (

{ch} · VU -20 0 +3

))}

{[["REW", "◀◀"], ["PLAY", "▶"], ["FF", "▶▶"], ["STOP", "■"], ["PAUSE", "‖"]].map((b) => { const fn = b[0] === "REW" ? () => goRel(-1) : b[0] === "FF" ? () => goRel(1) : b[0] === "PLAY" ? play : b[0] === "STOP" ? stop : pause; const active = (b[0] === "PLAY" && power) || (b[0] === "PAUSE" && paused); return ( ); })}

VOLUME

{Math.round(volume)}

TYPE II

Side A · No.1 every year

{loading ? : onesRows.map((r, i) => { const on = N(r.year) === sel; const c = GENRE_COLOR[r.genre_broad] || "#9a6a26"; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 11, padding: "7px 9px", borderRadius: 5, marginBottom: 3, background: on ? "linear-gradient(90deg, rgba(255,190,92,.2), rgba(255,190,92,.06))" : "transparent", borderLeft: on ? "3px solid #ffbe5c" : "3px solid transparent" }}> '{String(N(r.year)).slice(2)} {r.title} {r.artist}

); })}

); } function Scene1960sV2() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1965); const clip = useClip(sel); const { power, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF60, bass: BASS60, stepMs: 195, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(1960); const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const M = { case1: "#f6efe0", case2: "#e7dcc4", edge: "#cbbd9f", lid1: "#ef7a3c", lid2: "#d8531f", teal: "#1f9e8f", ink: "#2a1608", cream: "#f6efe0", gold: "#f0b84a", red: "#d23a2a", muted: "#9a8a6a" }; const GEO = "'Century Gothic','Futura','Trebuchet MS',sans-serif"; const TB = "'Trebuchet MS',Verdana,sans-serif"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : M.red; return (

THE 1960s

the british invasion, motown, and sunshine pop

PORTABLE PLAYER

spin a 45 from any year

tangerine

AM TUNING '{String(sel).slice(2)}

{onesRows.map((r) => { const p = Math.max(2, Math.min(98, ((N(r.year) - 1960) / 9) * 100)); const on = N(r.year) === sel; return

; })}

{onesRows.map((r) => { const on = N(r.year) === sel; return ; })}

{power ? "ON AIR" : "TUNED"} · {sel}

{now ? now.title : "—"}

{now ? now.artist : ""}

SIG

VOL

{Math.round(volume)}

ON THE DIAL · No.1 EACH YEAR

{loading ? : onesRows.map((r, i) => { const on = N(r.year) === sel; const c = GENRE_COLOR[r.genre_broad] || "#9a6a26"; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 11, background: on ? "#fff" : M.case1, borderRadius: 6, padding: "7px 11px", marginBottom: 7, boxShadow: on ? `0 4px 12px rgba(0,0,0,.28), 0 0 0 2px ${M.teal}` : "0 2px 5px rgba(0,0,0,.25)", transform: on ? "translateX(3px)" : "none", transition: "transform .15s" }}> '{String(N(r.year)).slice(2)} {r.title} {r.artist}

); })}

); } function Scene1990s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(1995); const clip = useClip(sel); const { power, play, stop, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF90, bass: BASS90, stepMs: 175, bassEvery: 2, wave: "square" }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(1990); const years = onesRows.map((r) => N(r.year)); const goRel = (delta) => { const i = years.indexOf(sel); if (i < 0) return; const ni = Math.max(0, Math.min(years.length - 1, i + delta)); if (ni !== i) setSel(years[ni]); }; const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const P = { teal: "#2bd4d0", tealDk: "#1796a0", grape: "#8a63d6", body1: "#cdeef0", body2: "#86c2c8", bodyDk: "#3f7a84", ink: "#10262b", lcdOn: "#46e6ff", muted: "#5d7b82", white: "#f4fbfc" }; const TEC = "'Bahnschrift','DIN Alternate','Tahoma',sans-serif"; const TAH = "Tahoma, Verdana, sans-serif"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : P.teal; const cdFace = "conic-gradient(from 0deg, rgba(255,90,90,.45), rgba(255,225,90,.45), rgba(95,255,140,.45), rgba(90,205,255,.45), rgba(180,110,255,.45), rgba(255,90,180,.45), rgba(255,90,90,.45)), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 50%, #e2e7eb 0%, #b4bcc2 58%, #8d969c 100%)"; return (

THE 1990s

grunge, hip-hop's golden age, and pure pop

PORTABLE CD PLAYER

skip to any year, no rewind

{power ? "▶ PLAY" : "■ STOP"} TRACK {(onesRows.findIndex((r) => N(r.year) === sel) + 1) || 1} · {sel}

{now ? now.title : "—"}

{now ? now.artist : ""}

40s ESP · ANTI-SKIP

{Math.round(volume)}

MEGA BASS

HOLD

CD-R / RW

THE DISC · No.1 EACH YEAR

{loading ?

: onesRows.map((r, i) => { const on = N(r.year) === sel; const c = GENRE_COLOR[r.genre_broad] || "#3aa0a8"; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 10, padding: "7px 9px", borderRadius: 6, marginBottom: 2, background: on ? "linear-gradient(90deg, rgba(43,212,208,.22), rgba(43,212,208,.05))" : "transparent", borderLeft: on ? "3px solid #1796a0" : "3px solid transparent" }}> '{String(N(r.year)).slice(2)} {r.title} {r.artist}

); })}

); } function Scene2000s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(2005); const clip = useClip(sel); const { power, play, pause, toggle } = useClipPlayer(clip.uri, volume); useEraAudio(power && !clip.uri, volume, { riff: RIFF00, bass: BASS00, stepMs: 190, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(2000); const years = onesRows.map((r) => N(r.year)); const goRel = (delta) => { const i = years.indexOf(sel); if (i < 0) return; const ni = Math.max(0, Math.min(years.length - 1, i + delta)); if (ni !== i) setSel(years[ni]); }; const playPause = () => { if (power) pause(); else play(); }; const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const HV = "'Helvetica Neue', Helvetica, Arial, sans-serif"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : "#2e7bf6"; const idx = onesRows.findIndex((r) => N(r.year) === sel); return (

The 2000s

1,000 songs in your pocket: iTunes, TRL, and crunk

MP3 PLAYER

click the wheel, pick a year

{power ? "▶" : "‖"} {power ? "Now Playing" : "Paused"}

♪

{now ? now.title : "—"}

{now ? now.artist : ""}

{sel}

{idx + 1} of {onesRows.length || 10} {now && now.genre_broad ? now.genre_broad : ""}

VOL

{Math.round(volume)}

Music · #1 each year

{loading ?

: onesRows.map((r, i) => { const on = N(r.year) === sel; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", background: on ? "linear-gradient(180deg,#5fa0ff,#2e7bf6)" : (i % 2 ? "#f6f8f9" : "#fff"), borderBottom: "1px solid " + (on ? "transparent" : "#eef1f3") }}> '{String(N(r.year)).slice(2)} {r.title} {r.artist} ›

); })}

); } function Scene2010s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(2015); const clip = useClip(sel); const { power, toggle } = useClipPlayer(clip.uri, volume); const art = useArt(sel); const artMap = useDecadeArt(2010); useEraAudio(power && !clip.uri, volume, { riff: RIFF10, bass: BASS10, stepMs: 172, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(2010); const years = onesRows.map((r) => N(r.year)); const goRel = (delta) => { const i = years.indexOf(sel); if (i < 0) return; const ni = Math.max(0, Math.min(years.length - 1, i + delta)); if (ni !== i) setSel(years[ni]); }; const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const UI = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : "#1db954"; return (

The 2010s

streaming takes over: festivals, trap, and poptimism

SMARTPHONE

stream any year on tap

9:41

5G ▪ 84%

NOW PLAYING

{art ?

: null}

{sel}

{now ? now.title : "—"}

{now ? now.artist : ""}

VOL

{Math.round(volume)}

Top of every year

{loading ? : onesRows.map((r, i) => { const on = N(r.year) === sel; const c = GENRE_COLOR[r.genre_broad] || "#1db954"; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 12, padding: "8px 12px", borderRadius: 8, background: on ? "rgba(29,185,84,.14)" : "transparent" }}>

{artMap[N(r.year)] ?

: null} {on && power ? ‖ : '{String(N(r.year)).slice(2)}}

{r.title} {r.artist}

); })}

); } function Scene2020s() { const [volume, setVolume] = useState(72); const [sel, setSel] = useState(2023); const clip = useClip(sel); const { power, toggle } = useClipPlayer(clip.uri, volume); const artMap = useDecadeArt(2020); useEraAudio(power && !clip.uri, volume, { riff: RIFF20, bass: BASS20, stepMs: 168, bassEvery: 2 }); const onKnob = useKnob(setVolume); const { onesRows, loading } = useDecadeYears(2020); const now = onesRows.find((r) => N(r.year) === sel) || onesRows[0]; const S = { purple: "#7c5cff", teal: "#37e0c8", fabric1: "#3a3a44", fabric2: "#23232b" }; const UI = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"; const gc = now && now.genre_broad && GENRE_COLOR[now.genre_broad] ? GENRE_COLOR[now.genre_broad] : S.purple; return (

The 2020s

TikTok virality, hyperpop, and on-demand everything

SMART SPEAKER

just say a year

{[0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => (

))}

{artMap[sel] ?

: null}

{power ? "PLAYING · " + sel : "PAUSED · " + sel}

{now ? now.title : "—"}

{now ? now.artist : ""}

VOL

{Math.round(volume)}

"Play the #1 from..."

{loading ? : onesRows.map((r, i) => { const on = N(r.year) === sel; const c = GENRE_COLOR[r.genre_broad] || "#7c5cff"; return (

setSel(N(r.year))} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 12, padding: "8px 12px", borderRadius: 10, background: on ? "rgba(124,92,255,.16)" : "transparent", border: on ? "1px solid rgba(124,92,255,.4)" : "1px solid transparent" }}>

{artMap[N(r.year)] ?

: null}

{r.title} {r.artist} · '{String(N(r.year)).slice(2)} {on && power ? (

{[0, 1, 2].map((k) =>

)}

) : null}

); })}

); } export default function App() { const [decade, setDecade] = useDiveState("decade", 2010); const d = DECADES.find((x) => x.start === decade) || DECADES[0]; return (

{decade === 1950 ? : decade === 1960 ? : decade === 1970 ? : decade === 1980 ? : decade === 1990 ? : decade === 2000 ? : decade === 2010 ? : decade === 2020 ? : }

); }

The Time Machine of Music

Comments