## Integrate the component You are helping integrate a polished Meshh visual component into an existing React application. ### Component: Void Hole ### Category: Backgrounds ### Description A turbulent full-bleed WebGL vortex shader. ### Variant TypeScript + React + Tailwind CSS ### Dependencies - react - three - tailwindcss --- ### Usage Example ```tsx import VoidHole from "./VoidHole"; export default function Example() { return (

); } ``` ### Recreation Notes - Recreate the component as a self-contained React component using the source below as the implementation reference. - Preserve the visual behavior, shader/canvas setup, animation timing, interaction model, responsive sizing, and cleanup behavior. - The component must fill its parent container and should not rely on global body styles, fixed page positioning, or an external layout wrapper. - Keep designer-facing props stable and easy to connect to controls. - For WebGL, canvas, Three.js, OGL, GSAP, or pointer-driven effects, initialize browser-only APIs inside React effects and clean up animation frames, event listeners, renderers, textures, buffers, geometries, observers, and WebGL contexts on unmount. - Use the local image paths or replace them with project-hosted assets when adapting image-based effects. ### Full Component Source ```tsx import React, { useEffect, useRef } from "react"; import * as THREE from "three"; export default function VoidHoleShader({ speed = 1, size = 1.5, centerX = 0, centerY = 0, intensity = 1, }: { speed?: number; size?: number; centerX?: number; centerY?: number; intensity?: number; }) { const containerRef = useRef(null); const propsRef = useRef({ speed, size, centerX, centerY, intensity, }); useEffect(() => { propsRef.current = { speed, size, centerX, centerY, intensity, }; }, [centerX, centerY, intensity, size, speed]); useEffect(() => { const container = containerRef.current; if (!container) return; const mount = container; const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` precision mediump float; uniform vec2 iResolution; uniform float iTime; uniform float iSize; uniform vec2 position; uniform float uIntensity; #define PI 3.14159265359 #define TWO_PI 6.28318530718 #define HALF_PI 1.57079632679 vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } float snoise(vec3 v) { const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0); const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); vec3 i = floor(v + dot(v, C.yyy)); vec3 x0 = v - i + dot(i, C.xxx); vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min(g.xyz, l.zxy); vec3 i2 = max(g.xyz, l.zxy); vec3 x1 = x0 - i1 + C.xxx; vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy; i = mod289(i); vec4 p = permute( permute( permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0) ) + i.x + vec4(0.0, i1.x, i2.x, 1.0) ); float n_ = 0.142857142857; vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_); vec4 x = x_ * ns.x + ns.yyyy; vec4 y = y_ * ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4(x.xy, y.xy); vec4 b1 = vec4(x.zw, y.zw); vec4 s0 = floor(b0) * 2.0 + 1.0; vec4 s1 = floor(b1) * 2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy; vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww; vec3 p0 = vec3(a0.xy, h.x); vec3 p1 = vec3(a0.zw, h.y); vec3 p2 = vec3(a1.xy, h.z); vec3 p3 = vec3(a1.zw, h.w); vec4 norm = taylorInvSqrt( vec4( dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3) ) ); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; vec4 m = max( 0.6 - vec4( dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3) ), 0.0 ); m = m * m; return 42.0 * dot( m * m, vec4( dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3) ) ); } float fbm3d(vec3 x, const in int it) { float v = 0.0; float a = 0.5; vec3 shift = vec3(100.0); for (int i = 0; i < 32; ++i) { if (i < it) { v += a * snoise(x); x = x * 2.0 + shift; a *= 0.5; } } return v; } void mainImage(out vec4 fragColor, in vec2 fragCoord) { float t = iTime * 0.2; float offsetX = position.x * iResolution.x; float offsetY = position.y * iResolution.y; vec2 uv = ( fragCoord - 0.5 * iResolution.xy + vec2(offsetX, offsetY) ) / iResolution.y; vec2 st = vec2( length(uv) / iSize, atan(uv.y, uv.x) ); st.y += st.x * 1.1; float x = fbm3d( vec3( sin(st.y), cos(st.y), pow(st.x, 0.3) + t * 0.1 ), 3 ); float y = fbm3d( vec3( cos(1.0 - st.y), sin(1.0 - st.y), pow(st.x, 0.5) + t * 0.1 ), 4 ); float r = fbm3d( vec3( x, y, st.x + t * 0.3 ), 5 ); r = fbm3d( vec3( r - x, r - y, r + t * 0.3 ), 6 ); float c = (r + st.x * 5.0) / 6.0; vec3 color = vec3( smoothstep(0.3, 0.4, c), smoothstep(0.4, 0.55, c), smoothstep(0.2, 0.55, c) ); color *= uIntensity; fragColor = vec4(color, 1.0); } void main() { mainImage(gl_FragColor, gl_FragCoord.xy); } `; const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10); camera.position.z = 1; const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); mount.appendChild(renderer.domElement); const uniforms = { iResolution: { value: new THREE.Vector2(), }, iTime: { value: 0, }, iSize: { value: propsRef.current.size, }, position: { value: new THREE.Vector2( propsRef.current.centerX, propsRef.current.centerY, ), }, uIntensity: { value: propsRef.current.intensity, }, }; const material = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader, transparent: true, }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material); scene.add(mesh); const clock = new THREE.Clock(); let animationId = 0; function resize() { const width = mount.clientWidth; const height = mount.clientHeight; renderer.setSize(width, height, false); uniforms.iResolution.value.set(width, height); } function animate() { const current = propsRef.current; uniforms.iSize.value = current.size; uniforms.position.value.set(current.centerX, current.centerY); uniforms.uIntensity.value = current.intensity; uniforms.iTime.value += clock.getDelta() * current.speed; renderer.render(scene, camera); animationId = requestAnimationFrame(animate); } window.addEventListener("resize", resize); resize(); animate(); return () => { window.removeEventListener("resize", resize); cancelAnimationFrame(animationId); scene.remove(mesh); mesh.geometry.dispose(); material.dispose(); renderer.dispose(); if (renderer.domElement.parentNode) { renderer.domElement.parentNode.removeChild(renderer.domElement); } }; }, []); return (

Void hole shader

); } ``` ### Integration Instructions 1. Install the listed dependencies. 2. Copy the component source into your project. 3. Import and render the component inside a parent with an explicit width and height. 4. Adjust props to match your design system, but preserve the cleanup and responsive canvas behavior. 5. If the component is decorative, keep it hidden from assistive technology or pair it with meaningful surrounding content.

Chromatic Aberration

Chromatic Aberration