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:T2bb5,'use client'; import { useEffect, useRef } from 'react'; const THEMES = { dark: { surface: '#111111', border: 'rgba(255, 255, 255, 0.08)', shadow: '0 24px 48px -24px rgba(0, 0, 0, 0.6)', light: '#ffffff', fill: 1, edge: 1 }, light: { surface: '#ffffff', border: 'rgba(24, 24, 27, 0.1)', shadow: '0 1px 2px rgba(24, 24, 27, 0.04), 0 18px 40px -20px rgba(24, 24, 27, 0.16)', light: '#18181b', fill: 0.28, edge: 0.7 } }; const SHAPES = ['circle', 'beam']; const NOISE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const falloff = (color, softness) => { const soft = clamp(softness, 0, 1); const core = (1 - soft) ** 1.5 * 0.85; const stop = (alpha, at) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(2)}%, transparent) ${(at * 100).toFixed(2)}%`; const list = [stop(1, 0)]; for (let i = 0; i <= 14; i++) { const t = core + ((1 - core) * i) / 14; const g = (t - core) / (1 - core); const smooth = 1 - g * g * (3 - 2 * g); const glow = Math.exp(-4.6 * g * g) * (1 - g ** 6); list.push(stop(smooth + (glow - smooth) * soft, t)); } return list.join(', '); }; const CARD = 'relative isolate overflow-hidden rounded-3xl p-8 [background-color:var(--spotlight-card-surface)] [box-shadow:var(--spotlight-card-shadow)]'; const SpotlightCard = ({ children, className = '', style, spotlightColor, intensity = 0.15, spotlightSize = 240, softness = 0.7, shape = 'circle', borderGlow = 0.6, proximity = 80, smoothing = 0.3, ambient = false, flare = true, grain = 0, theme = 'dark', ...rest }) => { const rootRef = useRef(null); const lightRef = useRef(null); const grainRef = useRef(null); const edgeRef = useRef(null); const wakeRef = useRef(null); const palette = THEMES[theme] ?? THEMES.dark; const color = spotlightColor ?? palette.light; const form = SHAPES.includes(shape) ? shape : 'circle'; const settings = { shape: form, fill: falloff(color, softness), edge: falloff(color, 1), size: Math.max(20, spotlightSize), intensity: clamp(intensity, 0, 1) * palette.fill, borderGlow: clamp(borderGlow, 0, 1) * palette.edge, proximity: Math.max(0, proximity), smoothing: clamp(smoothing, 0, 1), ambient, flare, grain: clamp(grain, 0, 1) }; const settingsRef = useRef(settings); settingsRef.current = settings; useEffect(() => { wakeRef.current?.(); }); useEffect(() => { const root = rootRef.current; const light = lightRef.current; const noise = grainRef.current; const edge = edgeRef.current; if (!root || !light || !noise || !edge) return undefined; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const state = { x: 0, y: 0, presence: 0, flare: 0, time: Math.random() * 60, pressed: false, visible: true }; const pointer = { x: 0, y: 0, active: false }; const drawn = { light: '', edge: '', noise: '' }; let focus = null; let raf = 0; let last = 0; let alive = true; const gradient = (s, size, x, y, stops) => { if (s.shape === 'beam') { const reach = Math.max(size * 0.6, y + size * 0.55); return `radial-gradient(${(size * 0.55).toFixed(1)}px ${reach.toFixed(1)}px at ${x.toFixed(1)}px 0px, ${stops})`; } return `radial-gradient(circle ${size.toFixed(1)}px at ${x.toFixed(1)}px ${y.toFixed(1)}px, ${stops})`; }; const paint = s => { const size = s.size * (1 + 0.2 * state.flare); const boost = 1 + 0.7 * state.flare; const fill = gradient(s, size, state.x, state.y, s.fill); const rim = gradient(s, size * 0.6, state.x, s.shape === 'beam' ? 0 : state.y, s.edge); if (fill !== drawn.light) { drawn.light = fill; light.style.background = fill; } if (rim !== drawn.edge) { drawn.edge = rim; edge.style.background = rim; } light.style.opacity = String(Math.min(1, state.presence * s.intensity * boost)); edge.style.opacity = String(Math.min(1, state.presence * s.borderGlow * boost)); const grainy = s.grain > 0 ? gradient(s, size, state.x, state.y, '#000 0%, transparent 100%') : 'none'; if (grainy !== drawn.noise) { drawn.noise = grainy; noise.style.webkitMaskImage = grainy; noise.style.maskImage = grainy; } noise.style.opacity = String(state.presence * s.grain); }; const tick = now => { raf = 0; if (!alive) return; const s = settingsRef.current; const dt = Math.min(0.05, Math.max(0.001, (now - last) / 1000)); last = now; const rect = root.getBoundingClientRect(); let tx = state.x; let ty = state.y; let target = 0; if (focus && root.contains(focus)) { const box = focus.getBoundingClientRect(); tx = box.left + box.width / 2 - rect.left; ty = box.top + box.height / 2 - rect.top; target = 1; } else if (pointer.active) { tx = pointer.x - rect.left; ty = pointer.y - rect.top; const gap = Math.hypot(Math.max(0, -tx, tx - rect.width), Math.max(0, -ty, ty - rect.height)); if (gap === 0) target = 1; else if (s.proximity > 0) target = Math.max(0, 1 - gap / s.proximity) ** 2; } if (target < 0.6 && s.ambient && state.visible) { if (!reduce) state.time += dt; const drift = 0.6 - target; tx += (rect.width * (0.5 + 0.34 * Math.sin(state.time * 0.43)) - tx) * (drift / 0.6); ty += (rect.height * (0.5 + 0.3 * Math.sin(state.time * 0.61 + 1.3)) - ty) * (drift / 0.6); target = 0.6; } if (state.presence < 0.02 && target > 0 && !s.ambient) { state.x = tx; state.y = ty; } const follow = reduce || s.smoothing === 0 ? 1 : 1 - Math.exp(-dt / (0.015 + s.smoothing * 0.22)); state.x += (tx - state.x) * follow; state.y += (ty - state.y) * follow; const fade = reduce ? 1 : 1 - Math.exp(-dt / (target > state.presence ? 0.1 : 0.32)); state.presence += (target - state.presence) * fade; if (Math.abs(target - state.presence) < 0.002) state.presence = target; const press = state.pressed && s.flare && !reduce ? 1 : 0; state.flare += (press - state.flare) * (1 - Math.exp(-dt / (press ? 0.05 : 0.28))); if (Math.abs(press - state.flare) < 0.002) state.flare = press; paint(s); const moving = Math.abs(tx - state.x) > 0.1 || Math.abs(ty - state.y) > 0.1; const settled = !moving && state.presence === target && state.flare === press; if (!settled || (s.ambient && state.visible && !reduce)) raf = requestAnimationFrame(tick); }; const wake = () => { if (raf || !alive) return; last = performance.now(); raf = requestAnimationFrame(tick); }; wakeRef.current = wake; const onMove = event => { pointer.x = event.clientX; pointer.y = event.clientY; pointer.active = true; if (state.presence > 0 || settingsRef.current.proximity > 0 || root.contains(event.target)) wake(); }; const onOut = event => { if (event.relatedTarget) return; pointer.active = false; wake(); }; const onDown = event => { pointer.x = event.clientX; pointer.y = event.clientY; pointer.active = true; state.pressed = true; wake(); }; const onUp = event => { if (event.pointerType !== 'mouse') pointer.active = false; if (!state.pressed && event.pointerType === 'mouse') return; state.pressed = false; wake(); }; const onFocusIn = event => { if (!(event.target instanceof Element) || !event.target.matches(':focus-visible')) return; focus = event.target; wake(); }; const onFocusOut = event => { if (root.contains(event.relatedTarget)) return; focus = null; wake(); }; const onScroll = () => { if (pointer.active || state.presence > 0) wake(); }; const observer = new IntersectionObserver(entries => { state.visible = entries.some(entry => entry.isIntersecting); if (state.visible) wake(); }); observer.observe(root); window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); window.addEventListener('pointercancel', onUp); window.addEventListener('scroll', onScroll, { capture: true, passive: true }); document.addEventListener('pointerout', onOut); root.addEventListener('pointerdown', onDown); root.addEventListener('focusin', onFocusIn); root.addEventListener('focusout', onFocusOut); wake(); return () => { alive = false; cancelAnimationFrame(raf); observer.disconnect(); window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); window.removeEventListener('pointercancel', onUp); window.removeEventListener('scroll', onScroll, { capture: true }); document.removeEventListener('pointerout', onOut); root.removeEventListener('pointerdown', onDown); root.removeEventListener('focusin', onFocusIn); root.removeEventListener('focusout', onFocusOut); wakeRef.current = null; }; }, []); return (

); }; export default SpotlightCard; 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":"SpotlightCard/SpotlightCard.jsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]