/* global React, sinW */ // backgrounds.jsx — full-scene background renderers per song scene. // Each takes { t } (seconds elapsed in current song) and fills its parent. const SCENE_W = 1920; const SCENE_H = 1080; const TWO_PI = Math.PI * 2; function seeded(seed) { let s = seed; return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; } const sinB = (t, hz = 1, p = 0) => Math.sin(t * TWO_PI * hz + p); // ── Reusable: SVG canvas helper ──────────────────────────────────────────── function SVGLayer({ children, style }) { return ( {children} ); } // ── Stars (used by night, also as overlay) ───────────────────────────────── const NIGHT_STARS = (() => { const rng = seeded(42); return Array.from({ length: 90 }).map(() => ({ x: rng() * SCENE_W, y: rng() * (SCENE_H * 0.55), r: 1 + rng() * 2.4, twHz: 0.3 + rng() * 0.6, twPh: rng() * TWO_PI, sparkle: rng() > 0.85, })); })(); function StarsLayer({ t, opacity = 1 }) { return ( {NIGHT_STARS.map((s, i) => { const tw = 0.55 + 0.45 * (0.5 + 0.5 * sinB(t, s.twHz, s.twPh)); const r = s.r * (0.85 + 0.3 * tw); return ( {s.sparkle && ( )} ); })} ); } // ── Clouds (day version + night version) ─────────────────────────────────── const CLOUDS = [ { y: 140, scale: 1.0, speed: 14, offset: 0, opacity: 0.85 }, { y: 260, scale: 0.7, speed: 22, offset: 800, opacity: 0.7 }, { y: 360, scale: 1.3, speed: 10, offset: 1500, opacity: 0.55 }, { y: 200, scale: 0.85, speed: 18, offset: 400, opacity: 0.78 }, { y: 320, scale: 1.1, speed: 12, offset: 1100, opacity: 0.65 }, ]; function CloudShape({ fill = '#FFF7E6', stroke = null }) { return ( {stroke && ( )} {!stroke && ( )} ); } function Clouds({ t, fill = '#FFF7E6', stroke = null, list = CLOUDS }) { return ( {list.map((c, i) => { const x = ((c.offset + t * c.speed) % (SCENE_W + 400)) - 200; const bob = sinB(t, 0.25, i) * 6; return ( ); })} ); } // ── Moon ─────────────────────────────────────────────────────────────────── function Moon({ t }) { const x = 1620 + sinB(t, 0.04) * 18; const y = 200 + sinB(t, 0.08, 1.2) * 10; const blink = ((t % 5) > 4.7) ? 0.08 : 1; return ( ); } // ── Sun (day) ─────────────────────────────────────────────────────────────── function Sun({ t, x = 240, y = 220 }) { const dx = sinB(t, 0.06) * 10; return ( {/* rays */} {Array.from({ length: 12 }).map((_, i) => { const a = (i / 12) * 360; return ( ); })} {/* face */} ); } // ── Hills helper (3-layer parallax) ───────────────────────────────────────── function Hills({ t, colors, flowers = false, grass = true }) { const beatHz = 2; const b1 = sinB(t, beatHz, 0) * 3; const b2 = sinB(t, beatHz, 1.3) * 4; const b3 = sinB(t, beatHz, 2.0) * 5; return ( {flowers && [160, 380, 720, 1040, 1360, 1540, 1720].map((x, i) => ( ))} {grass && Array.from({ length: 26 }).map((_, i) => { const x = 40 + i * 75 + sinB(t + i, 0.4, i) * 3; const sway = sinB(t, 1, i * 0.3) * 4; return ( ); })} ); } // ── Background: NIGHT ────────────────────────────────────────────────────── function NightBackground({ t }) { return (
); } // ── Background: MEADOW (day, sunny field) ────────────────────────────────── function MeadowBackground({ t }) { return (
{/* butterflies */} {[0, 1, 2].map(i => { const x = 200 + i * 500 + sinB(t, 0.2, i) * 200; const y = 400 + sinB(t, 0.4, i * 0.8) * 60; const flap = sinB(t, 5, i) * 0.5 + 0.5; const colors = ['#FF6FB0', '#FFD43D', '#4FB8FF']; return ( ); })}
); } // ── Background: FARM (meadow + red barn) ────────────────────────────────── function FarmBackground({ t }) { return (
{/* Far hill */} {/* Red barn */} {/* Windmill on top */} {/* Picket fence */} {Array.from({ length: 14 }).map((_, i) => ( ))}
); } // ── Background: POND (water + reeds + boat) ─────────────────────────────── function PondBackground({ t }) { return (
{/* Far hills */} {/* Water ripples */} {Array.from({ length: 12 }).map((_, i) => { const y = 800 + i * 25; const offset = sinB(t, 0.5, i * 0.7) * 30; return ( ); })} {/* Lily pads */} {[180, 480, 900, 1280, 1640].map((x, i) => { const bob = sinB(t, 0.4, i) * 8; return ( {i % 2 === 0 && ( )} ); })} {/* Reeds */} {[40, 90, 1820, 1860, 1900].map((x, i) => { const sway = sinB(t, 0.8, i) * 5; return ( ); })}
); } // ── Background: RAIN (gray sky + rain particles + rainbow) ──────────────── const RAIN_DROPS = (() => { const rng = seeded(99); return Array.from({ length: 80 }).map(() => ({ x: rng() * SCENE_W, delay: rng() * 1, speed: 0.7 + rng() * 0.6, })); })(); function RainBackground({ t }) { // Stops at ~28s — rainbow comes out const rainOpacity = t < 28 ? 1 : Math.max(0, 1 - (t - 28) / 3); const rainbowOpacity = t > 28 ? Math.min(1, (t - 28) / 3) : 0; return (
{rainbowOpacity > 0 && } {/* rainbow */} {rainbowOpacity > 0 && ( {['#FF5252', '#FF8A00', '#FFD43D', '#5DCB6E', '#4FB8FF', '#9B5FD9'].map((c, i) => ( ))} )} {/* rain drops */} {rainOpacity > 0 && ( {RAIN_DROPS.map((d, i) => { const cycle = ((t * d.speed + d.delay) % 1.4) / 1.4; const y = cycle * (SCENE_H + 100) - 50; const x = d.x + cycle * -40; // slight wind drift return ( ); })} )}
); } // ── Background: ROAD (Wheels on the Bus) ────────────────────────────────── function RoadBackground({ t }) { // City rolls past const offset = -(t * 80) % 400; return (
{/* City silhouette */} {Array.from({ length: 16 }).map((_, i) => { const x = i * 280; const h = 180 + ((i * 53) % 7) * 32; const colors = ['#FF6FB0', '#4FB8FF', '#FFD43D', '#5DCB6E', '#FF5252']; const c = colors[i % colors.length]; return ( {/* Roof */} {/* Windows grid */} {Array.from({ length: Math.floor(h / 56) }).map((_, r) => Array.from({ length: 3 }).map((_, q) => ( )) )} ); })} {/* Trees along the road */} {Array.from({ length: 20 }).map((_, i) => ( ))} {/* Road */} {/* Lane stripes scrolling */} {Array.from({ length: 12 }).map((_, i) => { const x = (i * 220 + offset * 4) % (SCENE_W + 220) - 110; return ; })} {/* Curb */}
); } // ── Master dispatcher ─────────────────────────────────────────────────────── function BackgroundFor({ kind, t }) { switch (kind) { case 'night': return ; case 'meadow': return ; case 'farm': return ; case 'pond': return ; case 'rain': return ; case 'road': return ; default: return ; } } Object.assign(window, { BackgroundFor, NightBackground, MeadowBackground, FarmBackground, PondBackground, RainBackground, RoadBackground, SCENE_W, SCENE_H, sinB, SVGLayer, });