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:T326c,'use client'; import { useEffect, useRef, useState } from 'react'; import { effectRuntime } from './effect-runtime'; import { createScoreEngine, type ScorePreset } from './score-engine'; import { spectrumBand, spectrumRms } from './spectrum-analysis'; export const spectrumTracks = { momentum: { title: 'MOMENTUM', url: '/media/music/Momentum.mp3' }, temporal: { title: 'TEMPORAL', url: '/media/music/Temporal.mp3' }, } as const; export type RadialSpectrumProps = { track?: keyof typeof spectrumTracks; trackTitle?: string; subtitleTop?: string; subtitleBottom?: string; audioUrl?: string; barCount?: number; radius?: number; sensitivity?: number; preset?: ScorePreset; paused?: boolean; compact?: boolean; autoDemo?: boolean; className?: string; }; export default function RadialSpectrum({ track = 'momentum', trackTitle, subtitleTop = '', subtitleBottom = 'MOTIQO', audioUrl, barCount = 260, radius = 175, sensitivity = 1.2, preset = 'interstellar', paused = false, compact = false, autoDemo = false, className = '', }: RadialSpectrumProps) { const recording = spectrumTracks[track] ?? spectrumTracks.momentum, source = audioUrl || recording.url, title = trackTitle || recording.title; const host = useRef(null), canvas = useRef(null), ring = useRef({ width: 0, height: 0, base: 0, count: 0, amplitudes: new Float32Array(720), }), engine = useRef | null>(null), request = useRef(0), wantsPlayback = useRef(false), playingRef = useRef(false), draw = useRef<() => void>(() => {}), [playing, setPlaying] = useState(false), [position, setPosition] = useState(0), [duration, setDuration] = useState(0), [error, setError] = useState(''); const options = useRef({ barCount, radius, sensitivity, paused, autoDemo }); options.current = { barCount, radius, sensitivity, paused, autoDemo }; const stop = () => { request.current++; wantsPlayback.current = false; playingRef.current = false; setPlaying(false); void engine.current?.pause().catch(() => {}); draw.current(); }; useEffect(() => { const element = host.current!, surface = canvas.current!, g = surface.getContext('2d'); if (!g) { element.dataset.failed = 'true'; return; } const bins = new Uint8Array(512), waveform = new Uint8Array(1024); let energy = 0; const amplitudes = ring.current.amplitudes; const clock = effectRuntime( element, surface, (time, dt) => { const o = options.current, w = element.clientWidth, h = element.clientHeight, dpr = surface.width / w; g.setTransform(dpr, 0, 0, dpr, 0, 0); g.fillStyle = '#000'; g.fillRect(0, 0, w, h); if (engine.current && playingRef.current) { engine.current.analyser.getByteFrequencyData(bins); engine.current.analyser.getByteTimeDomainData(waveform); } else { bins.fill(0); waveform.fill(128); // Silent illustrative signal for cards; audio still requires explicit playback. if (o.autoDemo && compact) { for (let i = 0; i < bins.length; i++) bins[i] = Math.round( 180 * Math.exp(-i / 190) * (0.5 + 0.5 * Math.sin(i * 0.075 - time * 3)) * (0.65 + 0.35 * Math.sin(time * 1.8) ** 2), ); for (let i = 0; i < waveform.length; i++) waveform[i] = 128 + Math.round( 26 * Math.sin(i * 0.12 + time * 5) * (0.6 + 0.4 * Math.sin(time * 2)), ); } } const rms = spectrumRms(waveform); let bass = 0; for (let j = 1; j < 18; j++) bass += bins[j] / 255; bass /= 17; const loudness = Math.min(1, bass * 0.65 + rms * 1.8); energy += (loudness - energy) * (dt ? 1 - Math.exp(-dt * (loudness > energy ? 14 : 4)) : 1); const count = Math.round(Math.max(40, Math.min(720, o.barCount))), base = Math.min(w, h) * 0.37 * Math.max(0.5, Math.min(1.25, o.radius / 175)) * (1 + energy * 0.025), cx = w / 2, cy = h / 2 + Math.min(w, h) * 0.012; Object.assign(ring.current, { width: w, height: h, base, count }); const media = engine.current?.media; const progress = media && Number.isFinite(media.duration) && media.duration > 0 ? media.currentTime / media.duration : 0; for (let i = 0; i < count; i++) { const u = i / (count - 1), angle = ((-55 + 290 * u) * Math.PI) / 180; const fft = spectrumBand(bins, u, engine.current?.context.sampleRate); const target = (0.012 + 0.065 * Math.tanh((fft * 0.85 + rms * 0.12) * Math.max(0, o.sensitivity))) * Math.min(w, h); amplitudes[i] += (target - amplitudes[i]) * (dt ? 1 - Math.exp(-dt * (target > amplitudes[i] ? 24 : 8)) : 1); const amplitude = amplitudes[i]; const sx = Math.cos(angle), sy = Math.sin(angle); const played = progress > 0 && u <= progress; g.strokeStyle = `rgba(245,247,250,${played ? 0.95 : 0.48 + fft * 0.27})`; g.lineWidth = compact ? 0.9 : 1.25; g.lineCap = 'round'; g.beginPath(); g.moveTo( cx + sx * (base - amplitude * 0.45), cy + sy * (base - amplitude * 0.45), ); g.lineTo( cx + sx * (base + amplitude * 0.55), cy + sy * (base + amplitude * 0.55), ); g.stroke(); } element.style.setProperty('--score-energy', String(energy)); element.dataset.audioEnergy = energy.toFixed(3); }, () => options.current.paused, undefined, compact, ); draw.current = clock.invalidate; return () => { clock.dispose(); draw.current = () => {}; }; }, [compact]); useEffect(() => { if (paused) stop(); draw.current(); }, [paused, barCount, radius, sensitivity]); useEffect(() => { stop(); setPosition(0); setDuration(0); return () => { request.current++; wantsPlayback.current = false; const current = engine.current; engine.current = null; playingRef.current = false; void current?.dispose(); }; }, [source, preset]); useEffect(() => { if (!compact && !paused) void start(true); return stop; }, [source, preset, compact, paused]); async function start(automatic = false) { const ticket = ++request.current; wantsPlayback.current = true; setError(''); let current = engine.current; try { if (!current) { current = createScoreEngine(source, preset); engine.current = current; const media = current.media; const sync = () => { if (engine.current !== current) return; setPosition(media?.currentTime || 0); setDuration(media && Number.isFinite(media.duration) ? media.duration : 0); draw.current(); }; media?.addEventListener('timeupdate', sync); media?.addEventListener('loadedmetadata', sync); media?.addEventListener('durationchange', sync); } await current.play(); if (engine.current !== current || ticket !== request.current) { if (!wantsPlayback.current) await current.pause(); return; } playingRef.current = true; setPlaying(true); draw.current(); } catch (cause) { if (engine.current !== current || ticket !== request.current) return; stop(); if (automatic && (cause as { name?: string })?.name === 'NotAllowedError') return; setError('The track could not be played. Press Play to try again.'); } } function toggle() { if (playingRef.current) { stop(); return; } void start(); } function seek(seconds: number) { const media = engine.current?.media; if (!media || !Number.isFinite(media.duration) || media.duration <= 0) return; media.currentTime = Math.max(0, Math.min(media.duration, seconds)); setPosition(media.currentTime); draw.current(); } return (

); } const styles = ` .mq-score{position:relative;width:100%;height:100%;min-height:220px;overflow:hidden;background:#000;color:#f5f5f5;container-type:size} .mq-score>canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer} .mq-score>canvas:focus-visible{outline:1px solid #ffffff80;outline-offset:-4px} .mq-score .mq-score-center{position:absolute;inset:0;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:62%;height:fit-content;max-height:64%;padding:12px 0;gap:clamp(14px,5cqmin,30px);color:inherit;font-family:inherit;pointer-events:none;text-align:center} .mq-score-center strong{max-width:100%;font-weight:400;font-size:clamp(12px,3.2cqmin,22px);letter-spacing:.29em;line-height:1.8;overflow-wrap:anywhere;transition:color .5s;text-shadow:0 0 calc(var(--score-energy,0)*18px) #ffffff65} .mq-score-top,.mq-score-bottom{font-size:clamp(7px,1.6cqmin,10px);letter-spacing:.3em;line-height:2.1;color:#77777c} .mq-score .mq-score-play{position:absolute;top:100%;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;transform:none;font-family:inherit;font-size:18px;color:#ccc;cursor:pointer;pointer-events:auto} .mq-score .mq-score-play:hover{background:#ffffff10;color:#fff}.mq-score .mq-score-play:focus-visible{outline:1px solid #ffffff80;outline-offset:3px} .mq-score-error{position:absolute;bottom:15px;left:10%;width:80%;font-size:10px;text-align:center;color:#b19898}@media(prefers-reduced-motion:reduce){.mq-score *{transition:none!important}} `; 18:T18a9,export type ScorePreset = 'inception' | 'interstellar'; /** An original generative score, not a recording or transcription of a film soundtrack. */ export function createScoreEngine(audioUrl: string | undefined, preset: ScorePreset) { const context = new AudioContext(), analyser = context.createAnalyser(); analyser.fftSize = 1024; analyser.smoothingTimeConstant = 0.85; const master = context.createGain(), limiter = context.createDynamicsCompressor(); master.gain.value = 0.62; limiter.threshold.value = -18; limiter.knee.value = 18; limiter.ratio.value = 5; limiter.attack.value = 0.008; limiter.release.value = 0.3; master.connect(limiter); limiter.connect(analyser); analyser.connect(context.destination); const nodes = new Set(), voices = new Set(); let timer: ReturnType | undefined, disposed = false, beat = 0, nextBeat = 0.08; let media: HTMLAudioElement | undefined, mediaSource: MediaElementAudioSourceNode | undefined; const bus = context.createGain(), filter = context.createBiquadFilter(), delay = context.createDelay(2), feedback = context.createGain(), wet = context.createGain(), reverb = context.createConvolver(); filter.type = 'lowpass'; filter.frequency.value = 900; filter.Q.value = 0.45; bus.connect(filter); filter.connect(master); filter.connect(reverb); reverb.connect(wet); wet.gain.value = 0.3; wet.connect(master); filter.connect(delay); delay.delayTime.value = 0.42; delay.connect(feedback); feedback.gain.value = 0.27; feedback.connect(delay); delay.connect(wet); const length = Math.floor(context.sampleRate * 2.8), impulse = context.createBuffer(2, length, context.sampleRate); let seed = 92; for (let channel = 0; channel < 2; channel++) { const samples = impulse.getChannelData(channel); for (let i = 0; i < length; i++) { seed = (Math.imul(seed, 1664525) + 1013904223) | 0; samples[i] = ((seed >>> 0) / 2147483648 - 1) * Math.pow(1 - i / length, 3) * 0.55; } } reverb.buffer = impulse; if (audioUrl) { media = new Audio(); media.crossOrigin = 'anonymous'; media.preload = 'none'; media.loop = true; media.src = audioUrl; mediaSource = context.createMediaElementSource(media); mediaSource.connect(master); } const frequency = (midi: number) => 440 * Math.pow(2, (midi - 69) / 12); function voice( midi: number, at: number, duration: number, volume: number, type: OscillatorType, detune = 0, attack = 0.1, ) { const oscillator = context.createOscillator(), gain = context.createGain(); voices.add(oscillator); nodes.add(gain); oscillator.type = type; oscillator.frequency.value = frequency(midi); oscillator.detune.value = detune; gain.gain.setValueAtTime(0.00001, at); gain.gain.exponentialRampToValueAtTime(Math.max(0.00002, volume), at + attack); gain.gain.exponentialRampToValueAtTime(0.00001, at + duration); oscillator.connect(gain); gain.connect(bus); oscillator.start(at); oscillator.stop(at + duration + 0.02); oscillator.onended = () => { oscillator.disconnect(); gain.disconnect(); voices.delete(oscillator); nodes.delete(gain); }; } const progression = preset === 'interstellar' ? [ [45, 52, 57, 60, 64], [41, 48, 53, 57, 60], [48, 55, 60, 64, 67], [43, 50, 55, 59, 62], ] : [ [45, 52, 57, 60, 64], [48, 55, 59, 64, 67], [41, 48, 53, 57, 60], [43, 50, 55, 62, 67], ]; const seconds = 60 / (preset === 'interstellar' ? 78 : 68); function schedule() { if (disposed || context.state !== 'running') return; // A bounded look-ahead queue stays in audio-clock time, independent of render FPS. if (nextBeat < context.currentTime - 0.5) nextBeat = context.currentTime + 0.03; while (nextBeat < context.currentTime + 0.18) { const chord = progression[Math.floor(beat / 16) % progression.length], at = nextBeat; if (beat % 16 === 0) { const swell = 0.8 + 0.2 * Math.sin(beat * 0.021); chord.forEach((note, i) => { voice(note, at, seconds * 17, 0.018 * swell, 'triangle', -5 + i * 0.7, 0.8); voice(note, at, seconds * 17, 0.006 * swell, 'sawtooth', 5 - i * 0.5, 1.3); }); filter.frequency.cancelScheduledValues(at); filter.frequency.setValueAtTime(650, at); filter.frequency.exponentialRampToValueAtTime(1900, at + seconds * 12); } const arp = chord[(beat * 3 + Math.floor(beat / 8)) % chord.length] + (preset === 'interstellar' ? 24 : 12); voice(arp, at, seconds * 2.5, 0.027, 'sine', 0, 0.012); voice(arp + 12, at, seconds * 0.85, 0.0035, 'triangle', 1, 0.008); if (beat % 4 === 0) voice(chord[0] - 12, at, seconds * 2, 0.07, 'sine', 0, 0.025); nextBeat += seconds * 0.5; beat++; } } return { context, analyser, media, async play() { if (disposed) return; const resuming = context.resume(); // Request both inside the user gesture; a blocked resume can remain pending. if (media) await Promise.all([resuming, media.play()]); else { await resuming; schedule(); timer ??= setInterval(schedule, 25); } }, async pause() { if (disposed) return; media?.pause(); if (timer) { clearInterval(timer); timer = undefined; } await context.suspend(); }, async dispose() { if (disposed) return; disposed = true; if (timer) clearInterval(timer); media?.pause(); if (media) { media.removeAttribute('src'); media.load(); } mediaSource?.disconnect(); voices.forEach((oscillator) => { oscillator.onended = null; try { oscillator.stop(); } catch {} oscillator.disconnect(); }); nodes.forEach((node) => node.disconnect()); [bus, filter, delay, feedback, wet, reverb, master, limiter, analyser].forEach( (node) => node.disconnect(), ); await context.close(); }, }; } 19:T8b2,/** A demand-driven clock shared by the standalone optical effects. */ export function effectRuntime( host: HTMLElement, canvas: HTMLCanvasElement, render: (time: number, dt: number) => void | boolean, paused: () => boolean, resize?: (width: number, height: number, dpr: number) => void, compact = false, ) { let frame = 0, disposed = false, visible = true, last = 0, time = 2.5, dirty = true; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); function tick(now: number) { frame = 0; if (disposed || !visible || document.hidden) return; const still = paused() || reduced.matches; const dt = Math.min((now - (last || now)) / 1000, 0.04); last = now; if (!still) time += dt; if (dirty || !still) { dirty = false; if (render(time, still ? 0 : dt) !== false) host.dataset.ready = 'true'; } if (!still) frame = requestAnimationFrame(tick); } function invalidate() { dirty = true; if (!disposed && !frame && visible && !document.hidden) frame = requestAnimationFrame(tick); } const ro = new ResizeObserver(() => { const w = Math.max(1, host.clientWidth), h = Math.max(1, host.clientHeight), dpr = Math.min(devicePixelRatio || 1, compact ? 1.5 : 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); resize?.(w, h, dpr); invalidate(); }); ro.observe(host); const io = new IntersectionObserver((entries) => { visible = entries[0].isIntersecting; last = 0; if (visible) invalidate(); else { cancelAnimationFrame(frame); frame = 0; } }); io.observe(host); function visibility() { last = 0; if (document.hidden) { cancelAnimationFrame(frame); frame = 0; } else invalidate(); } document.addEventListener('visibilitychange', visibility); reduced.addEventListener('change', invalidate); invalidate(); return { invalidate, dispose() { disposed = true; cancelAnimationFrame(frame); ro.disconnect(); io.disconnect(); document.removeEventListener('visibilitychange', visibility); reduced.removeEventListener('change', invalidate); }, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"radial-spectrum":[{"name":"radial-spectrum.tsx","code":"$17"},{"name":"score-engine.ts","code":"$18"},{"name":"effect-runtime.ts","code":"$19"},{"name":"spectrum-analysis.ts","code":"/** Logarithmic FFT sampling keeps bass, voices and upper harmonics visible. */\nexport function spectrumBand(bins: Uint8Array, position: number, sampleRate = 48000) {\n const frequency = 40 * Math.pow(300, Math.max(0, Math.min(1, position)));\n const center = (frequency / (sampleRate / 2)) * bins.length;\n const spread = Math.max(1, center * 0.08);\n let total = 0,\n weight = 0;\n for (\n let i = Math.max(1, Math.floor(center - spread));\n i <= Math.min(bins.length - 1, Math.ceil(center + spread));\n i++\n ) {\n const w = Math.max(0.05, 1 - Math.abs(i - center) / (spread + 1));\n total += (bins[i] / 255) * w;\n weight += w;\n }\n return weight ? Math.pow(total / weight, 1.35) : 0;\n}\n\nexport function spectrumRms(samples: Uint8Array) {\n let sum = 0;\n for (const sample of samples) sum += Math.pow((sample - 128) / 128, 2);\n return Math.sqrt(sum / Math.max(1, samples.length));\n}\n"}]},"initialElement":"radial-spectrum","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]