4b: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"] 4c:T1c10,'use client'; import React, { useEffect, useRef, type ReactNode } from 'react'; // --------------------------------------------------------------------------- // Props // --------------------------------------------------------------------------- // // children Content layered above the canvas (headline, CTA, etc.) // className Styles for the content wrapper // containerClassName Styles for the outer shell (size, layout) // backgroundFill Solid sky color behind the meteors (hex) // meteorColor Streak color (hex) // meteorCount How many meteors run at once // speed "slow" (default, subtle) or "fast" // type MeteorShowerBackgroundProps = { children?: ReactNode; className?: string; containerClassName?: string; backgroundFill?: string; meteorColor?: string; meteorCount?: number; speed?: 'slow' | 'fast'; }; // --------------------------------------------------------------------------- // Meteor state // --------------------------------------------------------------------------- type Meteor = { x: number; y: number; len: number; speed: number; thickness: number; life: number; maxLife: number; angle: number; delay: number; }; // --------------------------------------------------------------------------- // Spawn a single meteor just off-screen // --------------------------------------------------------------------------- function spawnMeteor(width: number, height: number, fast: boolean): Meteor { const fromTop = Math.random() > 0.35; return { x: fromTop ? Math.random() * width * 1.2 : -40, y: fromTop ? -40 : Math.random() * height * 0.55, len: 100 + Math.random() * 120, speed: (fast ? 2.4 : 1.1) + Math.random() * (fast ? 2.2 : 0.9), thickness: 0.9 + Math.random() * 1.2, life: 0, maxLife: 1.2 + Math.random() * 1.4, angle: Math.PI / 4 + (Math.random() - 0.5) * 0.18, delay: Math.random() * 4, }; } export default function MeteorShowerBackground({ children, className = '', containerClassName = '', backgroundFill = '#070b16', meteorColor = '#e2e8f0', meteorCount = 9, speed = 'slow', }: MeteorShowerBackgroundProps) { // --------------------------------------------------------------------------- // Refs // --------------------------------------------------------------------------- const containerRef = useRef(null); const canvasRef = useRef(null); const rafRef = useRef(0); const meteorsRef = useRef([]); useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const fast = speed === 'fast'; let width = 0; let height = 0; let dpr = 1; const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches; // ------------------------------------------------------------------------- // Setup helpers // ------------------------------------------------------------------------- const seedMeteors = () => { meteorsRef.current = Array.from({ length: meteorCount }, () => spawnMeteor(width, height, fast) ); }; const resize = () => { const rect = container.getBoundingClientRect(); dpr = Math.min(window.devicePixelRatio || 1, 2); width = Math.max(1, Math.floor(rect.width)); height = Math.max(1, Math.floor(rect.height)); canvas.width = Math.floor(width * dpr); canvas.height = Math.floor(height * dpr); canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); if (!meteorsRef.current.length) seedMeteors(); }; // ------------------------------------------------------------------------- // Draw loop — fill sky, move + fade each meteor, respawn when done // ------------------------------------------------------------------------- const draw = () => { ctx.globalAlpha = 1; ctx.fillStyle = backgroundFill; ctx.fillRect(0, 0, width, height); for (let i = 0; i < meteorsRef.current.length; i++) { const m = meteorsRef.current[i]; // Wait before first appearance so meteors don't all start together if (!prefersReducedMotion) { if (m.delay > 0) { m.delay -= fast ? 0.016 : 0.01; continue; } m.x += Math.cos(m.angle) * m.speed; m.y += Math.sin(m.angle) * m.speed; m.life += fast ? 0.008 : 0.004; } // Soft fade in / fade out over the meteor's life const progress = m.life / m.maxLife; const fade = progress < 0.2 ? progress / 0.2 : progress > 0.65 ? Math.max(0, 1 - (progress - 0.65) / 0.35) : 1; const tailX = m.x - Math.cos(m.angle) * m.len; const tailY = m.y - Math.sin(m.angle) * m.len; const gradient = ctx.createLinearGradient(tailX, tailY, m.x, m.y); gradient.addColorStop(0, 'transparent'); gradient.addColorStop(0.6, `${meteorColor}33`); gradient.addColorStop(1, `${meteorColor}aa`); ctx.beginPath(); ctx.strokeStyle = gradient; ctx.lineWidth = m.thickness; ctx.lineCap = 'round'; ctx.globalAlpha = fade * 0.55; ctx.moveTo(tailX, tailY); ctx.lineTo(m.x, m.y); ctx.stroke(); // Respawn once it leaves the view or finishes fading const offscreen = m.x > width + 80 || m.y > height + 80 || progress >= 1; if (offscreen && !prefersReducedMotion) { meteorsRef.current[i] = spawnMeteor(width, height, fast); } } ctx.globalAlpha = 1; if (!prefersReducedMotion) { rafRef.current = requestAnimationFrame(draw); } }; // ------------------------------------------------------------------------- // Start + cleanup // ------------------------------------------------------------------------- resize(); seedMeteors(); draw(); const observer = new ResizeObserver(resize); observer.observe(container); return () => { cancelAnimationFrame(rafRef.current); observer.disconnect(); }; }, [backgroundFill, meteorColor, meteorCount, speed]); // --------------------------------------------------------------------------- // Render — canvas behind, content on top // --------------------------------------------------------------------------- return (

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