{/* Bokeh background blobs — slow floating soft circles */} {bokehBlobs.map((b, i) => ( ))} {/* Aurora halo — module color radial gradient */}

{/* Light rays — 8 thin radiating rays, rotating */}

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

))}

{/* Secondary diffuse glow — adds depth */}

{/* Cool ambient color at edges (deep violet/blue) */}

{/* Initial burst particles — explode outward from center at title-in */} {burstParticles.map((p, i) => ( ))} {/* Subtitle burst — smaller, second wave when subtitle appears */} {burstParticles.slice(0, 12).map((p, i) => ( ))} {/* Diagonal scan line — thin white streak crosses screen once */} {scanP > 0 && scanP < 1 && (

)} {/* Sparkles */} {sparkles.map((sp, i) => ( ))} {/* Content (title + subtitle) */}

{/* Title with shimmer wave */}

{name}

{/* Animated underline accent — draws under the title */}

{sub && (

{sub}

)}

); } // ── Sparkle particle (4-pointed star with glow) ───────────────────── function SparkleParticle({ x, y, size, color, delay, life, drift, localTime }) { const t = localTime - delay; if (t < 0 || t > life) return null; const p = t / life; // Scale curve: small → big → small (sine) const scale = Math.sin(p * Math.PI); const opacity = scale * 0.95; // Upward drift const yOffset = -drift * p; // Slow rotation const rotation = p * 90; return (

); } // ── Generate deterministic sparkle layout per actNum ──────────────── function makeSparkles(seed, accentColor) { const colors = ['#ffffff', '#a78bfa', '#60a5fa', accentColor, '#fde68a', '#fbcfe8']; const sparkles = []; const rand = (i, salt) => { const v = Math.sin((seed + 0.7) * 1000 + i * 137 + salt * 41) * 10000; return v - Math.floor(v); }; const COUNT = 18; for (let i = 0; i < COUNT; i++) { // Place sparkles in a donut around center (avoids text) const angle = rand(i, 1) * Math.PI * 2; const r = 0.22 + rand(i, 2) * 0.34; // 22-56% normalized distance let x = 50 + Math.cos(angle) * r * 80; let y = 50 + Math.sin(angle) * r * 55; x = Math.max(4, Math.min(96, x)); y = Math.max(8, Math.min(92, y)); sparkles.push({ x, y, size: 5 + rand(i, 3) * 8, color: colors[Math.floor(rand(i, 4) * colors.length)], delay: 0.15 + (i / COUNT) * 1.55, // staggered across the 2s life: 0.65 + rand(i, 6) * 0.45, drift: 10 + rand(i, 7) * 18, }); } return sparkles; } function hexToRgba(hex, alpha) { const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); return `rgba(${r}, ${g}, ${b}, ${alpha})`; } // ── Burst particle: explodes outward from center during initial title-in ── function BurstParticle({ angle, distance, size, color, burstP }) { if (burstP <= 0 || burstP >= 1) return null; const e = Easing.easeOutCubic(burstP); const r = distance * e; const x = Math.cos(angle) * r; const y = Math.sin(angle) * r; // Fade out toward the end of burst const opacity = burstP < 0.6 ? 1 : (1 - (burstP - 0.6) / 0.4); const scale = 0.4 + 0.6 * Math.sin(burstP * Math.PI); return (

); } function makeBurstParticles(seed, accentColor) { const colors = ['#ffffff', accentColor, '#a78bfa', '#60a5fa', '#fde68a']; const N = 20; const rand = (i, salt) => { const v = Math.sin((seed + 1.3) * 1000 + i * 91 + salt * 53) * 10000; return v - Math.floor(v); }; const particles = []; for (let i = 0; i < N; i++) { const angle = (i / N) * Math.PI * 2 + rand(i, 1) * 0.4; // mostly uniform with jitter particles.push({ angle, distance: 90 + rand(i, 2) * 180, // 90-270px outward size: 3 + rand(i, 3) * 5, color: colors[Math.floor(rand(i, 4) * colors.length)], }); } return particles; } // ── Bokeh blob: large soft floating background circle ── function BokehBlob({ x0, y0, x1, y1, size, color, alpha, localTime, duration }) { const p = clamp(localTime / duration, 0, 1); const x = x0 + (x1 - x0) * p; const y = y0 + (y1 - y0) * p; // Subtle opacity envelope: fade in 0-0.4, hold, fade out 0.7-1 let envOpacity = 1; if (p < 0.25) envOpacity = p / 0.25; else if (p > 0.75) envOpacity = (1 - p) / 0.25; return (

); } function makeBokehBlobs(seed, accentColor) { const palette = [accentColor, '#a78bfa', '#60a5fa', '#ec4899', '#fbbf24']; const N = 5; const rand = (i, salt) => { const v = Math.sin((seed + 2.7) * 1000 + i * 173 + salt * 67) * 10000; return v - Math.floor(v); }; const blobs = []; for (let i = 0; i < N; i++) { blobs.push({ x0: 5 + rand(i, 1) * 90, y0: 5 + rand(i, 2) * 90, x1: 5 + rand(i, 3) * 90, y1: 5 + rand(i, 4) * 90, size: 180 + rand(i, 5) * 220, // 180-400px color: palette[Math.floor(rand(i, 6) * palette.length)], alpha: 0.18 + rand(i, 7) * 0.10, }); } return blobs; } Object.assign(window, { TitleCard });