51: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"] 52: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"] 53:T35b2,/* React Three Fiber elements use Three.js properties, not DOM attributes. */ /* eslint react/no-unknown-property: ["error", { "ignore": ["args", "vertexShader", "fragmentShader", "transparent", "uniforms"] }] */ "use client"; import { OrthographicCamera, useFBO, useTexture } from "@react-three/drei"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { cn } from "@/lib/utils"; import * as React from "react"; import * as THREE from "three"; import { WebGLErrorBoundary, WebGLFallback } from "@/components/ui/webgl-error-boundary"; const fragmentShader = ` uniform sampler2D uTexture; uniform sampler2D uDisplacement; uniform vec2 winResolution; uniform float uStrength; const float PI = 3.141592653589793238; void main() { vec2 vUvScreen = gl_FragCoord.xy / winResolution.xy; vec4 displacement = texture2D(uDisplacement, vUvScreen); float theta = displacement.r * 2.0 * PI; vec2 dir = vec2(sin(theta), cos(theta)); vec2 uv = vUvScreen + dir * displacement.r * uStrength; vec4 color = texture2D(uTexture, uv); gl_FragColor = color; } `; const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const BRUSH_DATA_URI = `data:image/svg+xml;utf8,${encodeURIComponent(` `)}`; function createDemoImage(title: string, colorA: string, colorB: string) { const svg = ` `; return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`; } const DEFAULT_IMAGE_URLS = [createDemoImage("Aurora", "#0f172a", "#155e75")]; export interface RippleImageItem { src: string; x?: number; y?: number; widthScale?: number; heightScale?: number; } export interface ImageRippleEffectProps extends Omit, "children"> { className?: string; images?: RippleImageItem[]; brushTextureUrl?: string; distortionStrength?: number; waveCount?: number; waveSize?: number; waveRotationSpeed?: number; waveFadeMultiplier?: number; waveGrowth?: number; waveSpawnThreshold?: number; children?: React.ReactNode; } type ViewportDimensions = { width: number; height: number; pixelRatio: number; }; function useContainerDimensions( ref: React.RefObject, ): ViewportDimensions { const [dimensions, setDimensions] = React.useState({ width: 0, height: 0, pixelRatio: 1, }); React.useEffect(() => { const element = ref.current; if (!element) { return; } const updateSize = () => { const rect = element.getBoundingClientRect(); setDimensions({ width: Math.round(rect.width), height: Math.round(rect.height), pixelRatio: typeof window !== "undefined" ? Math.min(window.devicePixelRatio, 2) : 1, }); }; updateSize(); const observer = new ResizeObserver(updateSize); observer.observe(element); window.addEventListener("resize", updateSize); return () => { observer.disconnect(); window.removeEventListener("resize", updateSize); }; }, [ref]); return dimensions; } interface RippleSceneProps { width: number; height: number; pixelRatio: number; pointerRef: React.MutableRefObject<{ x: number; y: number }>; images: RippleImageItem[]; brushTextureUrl: string; distortionStrength: number; waveCount: number; waveSize: number; waveRotationSpeed: number; waveFadeMultiplier: number; waveGrowth: number; waveSpawnThreshold: number; } function RippleScene({ width, height, pixelRatio, pointerRef, images, brushTextureUrl, distortionStrength, waveCount, waveSize, waveRotationSpeed, waveFadeMultiplier, waveGrowth, waveSpawnThreshold, }: RippleSceneProps) { const { viewport } = useThree(); const { gl, camera } = useThree(); const brushTexture = useTexture(brushTextureUrl); const imageTextures = useTexture(images.map((item) => item.src)); const rippleScene = React.useMemo(() => new THREE.Scene(), []); const imageScene = React.useMemo(() => new THREE.Scene(), []); const waveMeshesRef = React.useRef([]); const prevMouseRef = React.useRef({ x: 0, y: 0 }); const currentWaveRef = React.useRef(0); const uniformsRef = React.useRef({ uDisplacement: { value: null as THREE.Texture | null }, uTexture: { value: null as THREE.Texture | null }, winResolution: { value: new THREE.Vector2(1, 1) }, uStrength: { value: distortionStrength }, }); const fboBase = useFBO(Math.max(width, 1), Math.max(height, 1), { depthBuffer: false, stencilBuffer: false, }); const fboTexture = useFBO(Math.max(width, 1), Math.max(height, 1), { depthBuffer: false, stencilBuffer: false, }); const imageCamera = React.useMemo( () => new THREE.OrthographicCamera( viewport.width / -2, viewport.width / 2, viewport.height / 2, viewport.height / -2, -1000, 1000, ), [viewport.height, viewport.width], ); React.useEffect(() => { imageCamera.position.z = 2; }, [imageCamera]); React.useEffect(() => { uniformsRef.current.uStrength.value = distortionStrength; }, [distortionStrength]); React.useEffect(() => { brushTexture.minFilter = THREE.LinearFilter; brushTexture.magFilter = THREE.LinearFilter; brushTexture.needsUpdate = true; }, [brushTexture]); React.useEffect(() => { waveMeshesRef.current.forEach((mesh) => { rippleScene.remove(mesh); mesh.geometry.dispose(); if (Array.isArray(mesh.material)) { mesh.material.forEach((material) => material.dispose()); } else { mesh.material.dispose(); } }); const meshes: THREE.Mesh[] = []; for (let i = 0; i < waveCount; i += 1) { const geometry = new THREE.PlaneGeometry(waveSize, waveSize, 1, 1); const material = new THREE.MeshBasicMaterial({ transparent: true, map: brushTexture, depthWrite: false, }); const mesh = new THREE.Mesh(geometry, material); mesh.visible = false; mesh.rotation.z = Math.random(); rippleScene.add(mesh); meshes.push(mesh); } waveMeshesRef.current = meshes; currentWaveRef.current = 0; return () => { meshes.forEach((mesh) => { rippleScene.remove(mesh); mesh.geometry.dispose(); if (Array.isArray(mesh.material)) { mesh.material.forEach((material) => material.dispose()); } else { mesh.material.dispose(); } }); }; }, [brushTexture, rippleScene, waveCount, waveSize]); React.useEffect(() => { while (imageScene.children.length > 0) { imageScene.remove(imageScene.children[0] as THREE.Object3D); } imageScene.add(imageCamera); const geometry = new THREE.PlaneGeometry(1, 1); const group = new THREE.Group(); images.forEach((item, index) => { const texture = imageTextures[index]; if (!texture) { return; } texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; texture.needsUpdate = true; const mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ map: texture }), ); mesh.position.x = (item.x ?? (index - (images.length - 1) / 2) * 0.25) * viewport.width; mesh.position.y = (item.y ?? 0) * viewport.height; mesh.position.z = 1; mesh.scale.x = viewport.width * (item.widthScale ?? 0.22); mesh.scale.y = viewport.width * (item.heightScale ?? 0.28); group.add(mesh); }); imageScene.add(group); return () => { geometry.dispose(); group.children.forEach((child) => { const mesh = child as THREE.Mesh; mesh.geometry?.dispose?.(); if (Array.isArray(mesh.material)) { mesh.material.forEach((material) => material.dispose()); } else { mesh.material?.dispose?.(); } }); imageScene.remove(group); }; }, [imageCamera, imageScene, imageTextures, images, viewport.height, viewport.width]); useFrame(() => { const x = pointerRef.current.x - width / 2; const y = -pointerRef.current.y + height / 2; const prev = prevMouseRef.current; const moved = Math.abs(x - prev.x) > waveSpawnThreshold || Math.abs(y - prev.y) > waveSpawnThreshold; if (moved && waveMeshesRef.current.length > 0) { const waveIndex = currentWaveRef.current % waveMeshesRef.current.length; const mesh = waveMeshesRef.current[waveIndex]; if (mesh) { mesh.position.x = x; mesh.position.y = y; mesh.visible = true; mesh.scale.set(1.75, 1.75, 1); mesh.rotation.z = Math.random() * Math.PI; const material = mesh.material as THREE.MeshBasicMaterial; material.opacity = 1; } currentWaveRef.current = (waveIndex + 1) % waveMeshesRef.current.length; } prevMouseRef.current = { x, y }; waveMeshesRef.current.forEach((mesh) => { if (!mesh.visible) { return; } mesh.rotation.z += waveRotationSpeed; mesh.scale.x = 0.98 * mesh.scale.x + waveGrowth; mesh.scale.y = 0.98 * mesh.scale.y + waveGrowth; const material = mesh.material as THREE.MeshBasicMaterial; material.opacity *= waveFadeMultiplier; if (material.opacity <= 0.01) { mesh.visible = false; } }); uniformsRef.current.uTexture.value = fboTexture.texture; uniformsRef.current.uDisplacement.value = fboBase.texture; uniformsRef.current.winResolution.value .set(width, height) .multiplyScalar(pixelRatio); gl.setRenderTarget(fboBase); gl.clear(); gl.render(rippleScene, camera); gl.setRenderTarget(fboTexture); gl.clear(); gl.render(imageScene, imageCamera); gl.setRenderTarget(null); }); return ( ); } export function ImageRippleEffect({ className, images = DEFAULT_IMAGE_URLS.map((src) => ({ src })), brushTextureUrl = BRUSH_DATA_URI, distortionStrength = 0.075, waveCount = 100, waveSize = 60, waveRotationSpeed = 0.025, waveFadeMultiplier = 0.95, waveGrowth = 0.155, waveSpawnThreshold = 0.1, children, ...props }: ImageRippleEffectProps) { const containerRef = React.useRef(null); const { width, height, pixelRatio } = useContainerDimensions(containerRef); const pointerRef = React.useRef({ x: 0, y: 0 }); const handlePointerMove = React.useCallback( (event: React.PointerEvent) => { const rect = containerRef.current?.getBoundingClientRect(); if (!rect) { return; } pointerRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top, }; }, [], ); const frustumSize = height; const aspect = width > 0 && height > 0 ? width / height : 1; return (

{width > 0 && height > 0 && ( }>

)} {children ? (

{children}

) : null}

); } 54:T564,"use client"; import { cn } from "@/lib/utils"; import * as React from "react"; interface WebGLErrorBoundaryProps { children: React.ReactNode; fallback?: React.ReactNode; onError?: (error: Error, errorInfo: React.ErrorInfo) => void; } interface WebGLErrorBoundaryState { hasError: boolean; } export class WebGLErrorBoundary extends React.Component< WebGLErrorBoundaryProps, WebGLErrorBoundaryState > { public state: WebGLErrorBoundaryState = { hasError: false }; static getDerivedStateFromError(): WebGLErrorBoundaryState { return { hasError: true }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { this.props.onError?.(error, errorInfo); } render() { if (this.state.hasError) { return this.props.fallback ?? ; } return this.props.children; } } interface WebGLFallbackProps { className?: string; message?: string; } export function WebGLFallback({ className, message = "Interactive WebGL content is unavailable on this device/browser.", }: WebGLFallbackProps) { return (

{message}

); } 50:["$","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","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","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":"three"}]]}]}],["$","li","@types/three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Fthree","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":"@types/three"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","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":"@react-three/fiber"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","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":"@react-three/drei"}]]}]}]]}],["$","$L51",null,{"namespace":"@componentry","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/image-ripple-effect.tsx","content":"$53","type":"registry:ui"},{"path":"components/ui/webgl-error-boundary.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]