49:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4a:T21d2,'use client'; import { useEffect, useRef, type ReactNode } from 'react'; // --------------------------------------------------------------------------- // Props // --------------------------------------------------------------------------- // // children Content layered above the aurora (headline, CTA, etc.) // className Styles for the content wrapper // containerClassName Styles for the outer shell (size, layout) // theme "dark" (default) | "light" // colors Aurora tones, sampled left → right across the sky. // Keep these close in hue — one color's shades reads as // a real aurora; a rainbow does not. Defaults per theme. // intensity Overall brightness of the light // speed "slow" (default) | "medium" | "fast" // type AuroraBackgroundProps = { children?: ReactNode; className?: string; containerClassName?: string; theme?: 'dark' | 'light'; colors?: string[]; intensity?: number; speed?: 'slow' | 'medium' | 'fast'; }; const THEMES = { dark: { sky: '#04030f', colors: ['#0f766e', '#15916b', '#34d399', '#6ee7b7', '#22c55e'], blend: 'screen' as const, }, light: { sky: '#f2f6f4', colors: ['#0d9488', '#059669', '#10b981', '#34d399', '#16a34a'], blend: 'multiply' as const, }, }; const SPEED_STEP = { slow: 0.006, medium: 0.01, fast: 0.018 } as const; const randFrom = (n: number) => { let seed = n; return () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }; }; type Band = { kind: 'haze' | 'curtain'; y0: number; y1: number; colorT: number; f1: number; f2: number; f3: number; s1: number; s2: number; s3: number; p1: number; p2: number; p3: number; a1: number; a2: number; a3: number; alpha: number; folds: { u: number; w: number; p: number; s: number }[]; }; const BANDS: Band[] = (() => { const rand = randFrom(31); const bands: Band[] = []; for (let i = 0; i < 2; i++) { bands.push({ kind: 'haze', y0: 0.2 + rand() * 0.08, y1: 0.6 + rand() * 0.1, colorT: 0.3 + i * 0.35, f1: 2.2 + rand(), f2: 4 + rand() * 1.6, f3: 0.9 + rand() * 0.5, s1: 0.3 + rand() * 0.2, s2: 0.2 + rand() * 0.15, s3: 0.12 + rand() * 0.1, p1: rand() * Math.PI * 2, p2: rand() * Math.PI * 2, p3: rand() * Math.PI * 2, a1: 22 + rand() * 12, a2: 14 + rand() * 10, a3: 18 + rand() * 10, alpha: 0.32 + rand() * 0.1, folds: [], }); } for (let i = 0; i < 3; i++) { bands.push({ kind: 'curtain', y0: 0.16 + rand() * 0.12, y1: 0.54 + rand() * 0.16, colorT: Math.min(1, Math.max(0, i / 2 + (rand() - 0.5) * 0.15)), f1: 3.2 + rand() * 2.4, f2: 6.5 + rand() * 3, f3: 1.2 + rand(), s1: 0.5 + rand() * 0.35, s2: 0.32 + rand() * 0.28, s3: 0.18 + rand() * 0.16, p1: rand() * Math.PI * 2, p2: rand() * Math.PI * 2, p3: rand() * Math.PI * 2, a1: 36 + rand() * 22, a2: 22 + rand() * 16, a3: 28 + rand() * 18, alpha: 0.5 + rand() * 0.22, folds: Array.from({ length: 5 + Math.floor(rand() * 3) }, () => ({ u: rand(), w: 0.06 + rand() * 0.1, p: rand() * Math.PI * 2, s: 0.25 + rand() * 0.45, })), }); } return bands; })(); const hexA = (hex: string, a: number) => { const n = hex.replace('#', ''); const r = parseInt(n.slice(0, 2), 16); const g = parseInt(n.slice(2, 4), 16); const b = parseInt(n.slice(4, 6), 16); return `rgba(${r},${g},${b},${Math.max(0, Math.min(1, a))})`; }; const pick = (palette: string[], t: number) => palette[Math.round(Math.min(1, Math.max(0, t)) * (palette.length - 1))]; const ribbonY = ( u: number, t: number, band: Band, edge: 'top' | 'bot', h: number ) => { const wave = Math.sin(u * band.f1 + t * band.s1 + band.p1) * band.a1 + Math.sin(u * band.f2 - t * band.s2 + band.p2) * band.a2 + Math.sin(u * band.f3 + t * band.s3 + band.p3) * band.a3; const base = (edge === 'top' ? band.y0 : band.y1) * h; return base + wave * (edge === 'top' ? 1 : 1.3); }; export default function AuroraBackground({ children, className = '', containerClassName = '', theme = 'dark', colors, intensity = 1, speed = 'medium', }: AuroraBackgroundProps) { const containerRef = useRef(null); const canvasRef = useRef(null); const rafRef = useRef(0); const timeRef = useRef(0); const themeTokens = THEMES[theme] ?? THEMES.dark; const palette = colors ?? themeTokens.colors; useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; const ctx = canvas.getContext('2d', { alpha: false }); if (!ctx) return; const step = SPEED_STEP[speed] ?? SPEED_STEP.medium; const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches; // Half-res + CSS blur is the bloom. Never use ctx.filter (it stalls the tab). const SCALE = 0.5; let width = 0; let height = 0; const resize = () => { const rect = container.getBoundingClientRect(); width = Math.max(1, Math.floor(rect.width * SCALE)); height = Math.max(1, Math.floor(rect.height * SCALE)); canvas.width = width; canvas.height = height; }; const traceRibbon = (band: Band, t: number) => { ctx.beginPath(); const stepX = 10; for (let x = -20; x <= width + 20; x += stepX) { const y = ribbonY(x / width, t, band, 'top', height); if (x === -20) ctx.moveTo(x, y); else ctx.lineTo(x, y); } for (let x = width + 20; x >= -20; x -= stepX) { ctx.lineTo(x, ribbonY(x / width, t, band, 'bot', height)); } ctx.closePath(); }; const drawRibbon = (band: Band, t: number) => { const color = pick(palette, band.colorT); const a = band.alpha * intensity; const g = ctx.createLinearGradient( 0, band.y0 * height - 20, 0, band.y1 * height + 24 ); const body = band.kind === 'haze' ? a : a * 0.4; g.addColorStop(0, hexA(color, 0)); g.addColorStop(0.22, hexA(color, body * 0.3)); g.addColorStop(0.48, hexA(color, body)); g.addColorStop(0.8, hexA(color, body * 0.35)); g.addColorStop(1, hexA(color, 0)); traceRibbon(band, t); ctx.fillStyle = g; ctx.fill(); if (band.kind !== 'curtain') return; ctx.save(); traceRibbon(band, t); ctx.clip(); for (const fold of band.folds) { const x = (fold.u + Math.sin(t * fold.s + fold.p) * 0.04) * width; const pulse = 0.55 + 0.45 * Math.sin(t * fold.s * 1.4 + fold.p); const fw = fold.w * width; const fg = ctx.createLinearGradient(x - fw, 0, x + fw, 0); fg.addColorStop(0, hexA(color, 0)); fg.addColorStop(0.5, hexA(color, a * 0.55 * pulse)); fg.addColorStop(1, hexA(color, 0)); ctx.fillStyle = fg; ctx.fillRect(x - fw, 0, fw * 2, height); } ctx.restore(); }; const draw = () => { timeRef.current += prefersReducedMotion ? 0 : step; const t = timeRef.current; ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = themeTokens.sky; ctx.fillRect(0, 0, width, height); ctx.globalCompositeOperation = themeTokens.blend; for (const band of BANDS) drawRibbon(band, t); ctx.globalCompositeOperation = 'source-over'; if (!prefersReducedMotion) { rafRef.current = requestAnimationFrame(draw); } }; resize(); draw(); const observer = new ResizeObserver(resize); observer.observe(container); return () => { cancelAnimationFrame(rafRef.current); observer.disconnect(); }; }, [intensity, palette, speed, themeTokens.blend, themeTokens.sky]); return (

); } 48:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L49",null,{"files":[{"path":"components/backgrounds/AuroraBackground.tsx","content":"$4a","type":"registry:component","target":"@components/backgrounds/AuroraBackground.tsx"}],"className":"h-[70svh] min-h-80"}]]}]