51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1a87,"use client"; import { cn } from "@/lib/utils"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useSpring, useTransform, MotionValue, } from "motion/react"; import { useEffect, useRef } from "react"; // Helper component for gradient layers function GradientLayer({ springX, springY, gradientColor, opacity, multiplier, }: { springX: MotionValue; springY: MotionValue; gradientColor: string; opacity: number; multiplier: number; }) { const x = useTransform(springX, (val) => val * multiplier); const y = useTransform(springY, (val) => val * multiplier); const background = useMotionTemplate`radial-gradient(circle at ${x}px ${y}px, ${gradientColor} 0%, transparent 50%)`; return ( ); } interface NoiseBackgroundProps { children?: React.ReactNode; className?: string; containerClassName?: string; gradientColors?: string[]; noiseIntensity?: number; speed?: number; backdropBlur?: boolean; animating?: boolean; } export const NoiseBackground = ({ children, className, containerClassName, gradientColors = [ "rgb(255, 100, 150)", "rgb(100, 150, 255)", "rgb(255, 200, 100)", ], noiseIntensity = 0.2, speed = 0.1, backdropBlur = false, animating = true, }: NoiseBackgroundProps) => { const containerRef = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); // Use spring animation for smooth movement const springX = useSpring(x, { stiffness: 100, damping: 30 }); const springY = useSpring(y, { stiffness: 100, damping: 30 }); // Transform for top gradient strip const topGradientX = useTransform(springX, (val) => val * 0.1 - 50); const velocityRef = useRef({ x: 0, y: 0 }); const lastDirectionChangeRef = useRef(0); // Initialize position to center useEffect(() => { if (!containerRef.current) return; const container = containerRef.current; const rect = container.getBoundingClientRect(); const centerX = rect.width / 2; const centerY = rect.height / 2; x.set(centerX); y.set(centerY); }, [x, y]); // Generate random velocity const generateRandomVelocityRef = useRef(() => { const angle = Math.random() * Math.PI * 2; const magnitude = speed * (0.5 + Math.random() * 0.5); // Random speed between 0.5x and 1x return { x: Math.cos(angle) * magnitude, y: Math.sin(angle) * magnitude, }; }); // Update generateRandomVelocity when speed changes useEffect(() => { generateRandomVelocityRef.current = () => { const angle = Math.random() * Math.PI * 2; const magnitude = speed * (0.5 + Math.random() * 0.5); return { x: Math.cos(angle) * magnitude, y: Math.sin(angle) * magnitude, }; }; velocityRef.current = generateRandomVelocityRef.current(); }, [speed]); // Animate using motion/react's useAnimationFrame useAnimationFrame((time) => { if (!animating || !containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const maxX = rect.width; const maxY = rect.height; // Change direction randomly every 1.5-3 seconds if (time - lastDirectionChangeRef.current > 1500 + Math.random() * 1500) { velocityRef.current = generateRandomVelocityRef.current(); lastDirectionChangeRef.current = time; } // Update position based on velocity (deltaTime is ~16ms per frame at 60fps) const deltaTime = 16; // Approximate frame time const currentX = x.get(); const currentY = y.get(); let newX = currentX + velocityRef.current.x * deltaTime; let newY = currentY + velocityRef.current.y * deltaTime; // When hitting edges, generate a completely new random direction // This ensures truly random movement in all 360 degrees, not just horizontal/vertical const padding = 20; // Keep some distance from edges if ( newX < padding || newX > maxX - padding || newY < padding || newY > maxY - padding ) { // Generate completely random direction (full 360 degrees) const angle = Math.random() * Math.PI * 2; const magnitude = speed * (0.5 + Math.random() * 0.5); velocityRef.current = { x: Math.cos(angle) * magnitude, y: Math.sin(angle) * magnitude, }; // Reset timer to allow immediate new direction lastDirectionChangeRef.current = time; // Clamp position to stay within bounds newX = Math.max(padding, Math.min(maxX - padding, newX)); newY = Math.max(padding, Math.min(maxY - padding, newY)); } x.set(newX); y.set(newY); }); return (

{/* Moving gradient layers */} {/* Top gradient strip */} {/* Static Noise Pattern */}

{/* Content */}

{children}

); }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"components/ui/noise-background.tsx","content":"$52","type":"registry:ui","target":"components/ui/noise-background.tsx"}],"className":"h-[70svh] min-h-80"}]]}]