3D Portfolio & Creative Agency Site

Write a React Three Fiber component that transitions between two project images using a custom GLSL distortion shader. Requirements: (1) PlaneGeometry sized to fill the viewport (use useThree to get viewport.width and viewport.height). (2) ShaderMaterial with uniforms: u_textureA (current image), u_textureB (next image), u_progress (0→1 Float), u_distortion (Float, default 0.8), u_time (Float). (3) WGSL — wait, GLSL fragment shader: sample both textures, compute a displacement offset using a 2D simplex noise function (provide inline) driven by u_time and scaled by u_distortion * sin(PI * u_progress). Apply the displacement to the UV coordinates of textureA, then mix(textureA_sample, textureB_sample, smoothstep(0.0, 1.0, u_progress + displacement.x)). This creates a wave-warp transition where the image distorts at the midpoint. (4) Transition trigger: expose a transitionTo(textureB: THREE.Texture, duration: number) method. Internally use GSAP to tween u_progress from 0 to 1 over duration ms with ease: "power2.inOut". On complete, swap textureA = textureB and reset u_progress to 0. (5) Export as ImageTransition React component with props: initialTexture, onTransitionComplete. Full TypeScript. Provide the complete vertex shader (pass-through UVs) and fragment shader.

Write a custom WebGL cursor system for a creative portfolio site using React Three Fiber. Requirements: (1) Replace the default CSS cursor (cursor: none on body). (2) R3F Canvas: fixed position, full viewport, pointer-events: none, z-index: 9999, frameloop="demand". (3) Cursor mesh: SphereGeometry(0.06, 32, 32) with MeshBasicMaterial({ color: "#00E5FF", transparent: true, opacity: 0.9 }). (4) Mouse tracking: listen to mousemove on window, convert to normalized device coordinates, then to world space using camera.unproject. In useFrame, lerp the sphere position toward the target with factor 0.12 for smooth lag. (5) Trail effect: maintain a ring buffer of the last 8 cursor positions. Render each as a smaller sphere (scale decreasing from 0.8 to 0.1) with opacity decreasing from 0.4 to 0. Update trail positions in useFrame. (6) Magnetic attraction: for each DOM element with data-magnetic attribute, compute the distance from cursor to element center. If within 80px, lerp the cursor toward the element center with strength proportional to (1 - distance/80). Apply the same offset to the DOM element via CSS transform. (7) Hover states: on mouseenter of [data-cursor="expand"] elements, spring-animate sphere scale to 3.0 and opacity to 0.15. On mouseleave, spring back. Use react-spring/three. Full TypeScript.