52:I[707087,["/_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"],"RegistryDependencies"] 53: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"] 54:T2b08,'use client'; import { useEffect, useRef, useState, useCallback } from 'react'; import { Renderer, Transform, Vec3, Color, Polyline, Program } from 'ogl'; const vertexShader = ` precision highp float; attribute vec3 position; attribute vec3 next; attribute vec3 prev; attribute vec2 uv; attribute float side; uniform vec2 uResolution; uniform float uDPR; uniform float uThickness; uniform float uTime; vec4 getPosition() { vec4 current = vec4(position, 1); vec2 aspect = vec2(uResolution.x / uResolution.y, 1); vec2 nextScreen = next.xy * aspect; vec2 prevScreen = prev.xy * aspect; vec2 tangent = normalize(nextScreen - prevScreen); vec2 normal = vec2(-tangent.y, tangent.x); normal /= aspect; float noise = sin(position.x * 100.0 + uTime * 2.0) * 0.1; normal *= 1.0 + noise; float taper = smoothstep(0.0, 0.3, uv.y) * (1.0 - smoothstep(0.7, 1.0, uv.y)); normal *= taper; float dist = length(nextScreen - prevScreen); normal *= smoothstep(0.0, 0.02, dist); float pixelWidthRatio = 1.0 / (uResolution.y / uDPR); float pixelWidth = current.w * pixelWidthRatio; normal *= pixelWidth * uThickness; current.xy -= normal * side; return current; } void main() { gl_Position = getPosition(); } `; const fragmentShader = ` precision highp float; uniform vec3 uColor; uniform float uTime; uniform float uIntensity; void main() { vec3 color = uColor * (0.9 + 0.1 * sin(uTime * 0.5)); float glow = uIntensity * 0.5; color += glow * vec3(1.0, 1.0, 1.0); gl_FragColor = vec4(color, 1.0); } `; interface PolylineConfig { color: string; thickness: number; count: number; spring: number; friction: number; offset: Vec3; } interface PolylineItem extends PolylineConfig { points: Vec3[]; polyline: Polyline; program: Program; velocity: Vec3; targetIntensity: number; } interface FollowCursorProps { className?: string; style?: React.CSSProperties; colors?: string[]; thickness?: { min: number; max: number }; count?: { min: number; max: number }; bgColor?: string; } export default function FollowCursor({ className = '', style = {}, colors = [ '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#FB5607', '#8338EC', '#3A86FF', '#FF006E', '#A5FFD6', '#FF9E00', ], thickness = { min: 30, max: 100 }, count = { min: 15, max: 25 }, bgColor = 'rgba(26, 26, 38, 1)', }: FollowCursorProps) { const containerRef = useRef(null); const canvasRef = useRef(null); const rendererRef = useRef(null); const sceneRef = useRef(null); const linesRef = useRef([]); const mouseRef = useRef(new Vec3()); const animationRef = useRef(0); const timeRef = useRef(0); const resizeObserverRef = useRef(null); const isSetupCompleteRef = useRef(false); const [isMounted, setIsMounted] = useState(false); const lerp = (a: number, b: number, t: number) => a * (1 - t) + b * t; const generateConfigs = useCallback((): PolylineConfig[] => { return colors.map((color) => ({ color, thickness: thickness.min + Math.random() * (thickness.max - thickness.min), count: count.min + Math.floor(Math.random() * (count.max - count.min)), spring: 0.1 + Math.random() * 0.15, friction: 0.85 + Math.random() * 0.1, offset: new Vec3( (Math.random() - 0.5) * 0.05, (Math.random() - 0.5) * 0.05, 0, ), })); }, [colors, thickness, count]); useEffect(() => { // eslint-disable-next-line react-hooks/set-state-in-effect setIsMounted(true); return () => setIsMounted(false); }, []); const getCanvasPosition = () => { if (!canvasRef.current) return { left: 0, top: 0 }; const rect = canvasRef.current.getBoundingClientRect(); return { left: rect.left, top: rect.top }; }; useEffect(() => { if (!isMounted || !canvasRef.current || !containerRef.current) return; if (isSetupCompleteRef.current && rendererRef.current) return; let isComponentMounted = true; const container = containerRef.current; const canvas = canvasRef.current; canvas.width = container.clientWidth; canvas.height = container.clientHeight; const renderer = new Renderer({ canvas: canvas, dpr: Math.min(window.devicePixelRatio, 2), antialias: true, }); const gl = renderer.gl; rendererRef.current = renderer; const bgColorObj = new Color(bgColor); gl.clearColor(bgColorObj.r, bgColorObj.g, bgColorObj.b, 1); const scene = new Transform(); sceneRef.current = scene; const configs = generateConfigs(); const lines: PolylineItem[] = []; try { for (const config of configs) { const points = Array.from({ length: config.count }, (_, i) => { const offset = i * 0.01; return new Vec3(offset, offset, 0); }); const polyline = new Polyline(gl, { points, vertex: vertexShader, fragment: fragmentShader, uniforms: { uColor: { value: new Color(config.color) }, uThickness: { value: config.thickness }, uTime: { value: 0 }, uIntensity: { value: 0 }, }, }); polyline.mesh.setParent(scene); lines.push({ ...config, points, polyline, program: polyline.mesh.program, velocity: new Vec3(), targetIntensity: 0, }); } linesRef.current = lines; } catch (error) { console.error('Failed to create polylines:', error); return; } isSetupCompleteRef.current = true; const handleResize = () => { if (!isComponentMounted || !renderer || !container) return; try { renderer.setSize(container.clientWidth, container.clientHeight); if (lines && Array.isArray(lines)) { lines.forEach((line) => { if ( line && line.polyline && typeof line.polyline.resize === 'function' ) { line.polyline.resize(); } }); } } catch (error) { console.error('Failed to resize:', error); } }; const handlePointerMove = (e: MouseEvent | TouchEvent) => { if (!isComponentMounted || !renderer || !canvas) return; const event = 'touches' in e ? e.touches[0] : e; const canvasPos = getCanvasPosition(); const x = event.clientX - canvasPos.left; const y = event.clientY - canvasPos.top; mouseRef.current.set( (x / canvas.width) * 2 - 1, (y / canvas.height) * -2 + 1, 0, ); if (lines && Array.isArray(lines)) { lines.forEach((line) => { line.targetIntensity = 0.7 + Math.random() * 0.3; if (line.points && line.points.length > 0) { const firstPoint = line.points[0]; if (firstPoint) { firstPoint.lerp(mouseRef.current.clone().add(line.offset), 0.6); } } }); } }; resizeObserverRef.current = new ResizeObserver(() => { handleResize(); }); if (container) { resizeObserverRef.current.observe(container); } window.addEventListener('mousemove', handlePointerMove); window.addEventListener('touchmove', handlePointerMove); mouseRef.current.set(0, 0, 0); handleResize(); const animate = (time: number) => { if (!isComponentMounted || !isSetupCompleteRef.current) { return; } timeRef.current = time * 0.001; const tmp = new Vec3(); try { const currentLines = linesRef.current; if ( currentLines && Array.isArray(currentLines) && currentLines.length > 0 ) { for (const line of currentLines) { for (let i = line.points.length - 1; i >= 0; i--) { if (i === 0) { tmp .copy(mouseRef.current) .add(line.offset) .sub(line.points[i]) .multiply(line.spring * 6.0); line.velocity.add(tmp).multiply(0.92); line.points[i].add(line.velocity); line.points[i].lerp( mouseRef.current.clone().add(line.offset), 0.4, ); } else { line.points[i].lerp( line.points[i - 1], 0.88 + Math.sin(timeRef.current + i) * 0.05, ); } } if (line.program && line.program.uniforms) { if (line.program.uniforms.uTime) { line.program.uniforms.uTime.value = timeRef.current; } if (line.program.uniforms.uIntensity) { line.program.uniforms.uIntensity.value = lerp( line.program.uniforms.uIntensity.value || 0, line.targetIntensity, 0.1, ); } } line.targetIntensity *= 0.9; line.polyline.updateGeometry(); } } if (rendererRef.current && sceneRef.current) { rendererRef.current.render({ scene: sceneRef.current }); } } catch (error) { console.error('Animation error:', error); } if (isComponentMounted) { animationRef.current = requestAnimationFrame(animate); } }; animationRef.current = requestAnimationFrame(animate); return () => { isComponentMounted = false; isSetupCompleteRef.current = false; if (resizeObserverRef.current) { resizeObserverRef.current.disconnect(); } window.removeEventListener('mousemove', handlePointerMove); window.removeEventListener('touchmove', handlePointerMove); if (animationRef.current) { cancelAnimationFrame(animationRef.current); } if (gl && typeof gl.getExtension === 'function') { try { const extension = gl.getExtension('WEBGL_lose_context'); if (extension) { extension.loseContext(); } } catch (error) { console.error('Error losing WebGL context:', error); } } }; }, [isMounted, bgColor]); // eslint-disable-line react-hooks/exhaustive-deps return (

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","ogl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ogl","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"ogl"}]]}]}]]}],["$","$L52",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/followcursor.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]