"use client"; import { useEffect, useRef } from "react"; import * as THREE from "three"; export function ShaderAnimation() { const containerRef = useRef(null); const sceneRef = useRef<{ camera: THREE.Camera; scene: THREE.Scene; renderer: THREE.WebGLRenderer; uniforms: { time: { value: number }; resolution: { value: THREE.Vector2 }; }; animationId: number; resizeObserver?: ResizeObserver; } | null>(null); useEffect(() => { if (!containerRef.current) return; const container = containerRef.current; const vertexShader = ` void main() { gl_Position = vec4(position, 1.0); } `; const fragmentShader = ` #define TWO_PI 6.2831853072 #define PI 3.14159265359 precision highp float; uniform vec2 resolution; uniform float time; void main(void) { vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); float t = time * 0.05; float lineWidth = 0.002; vec3 color = vec3(0.0); for(int j = 0; j < 3; j++) { for(int i = 0; i < 5; i++) { color[j] += lineWidth * float(i * i) / abs( fract(t - 0.01 * float(j) + float(i) * 0.01) * 5.0 - length(uv) + mod(uv.x + uv.y, 0.2) ); } } gl_FragColor = vec4(color[0], color[1], color[2], 1.0); } `; const camera = new THREE.Camera(); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.PlaneGeometry(2, 2); const uniforms = { time: { value: 1.0 }, resolution: { value: new THREE.Vector2() }, }; const material = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader, }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.domElement.style.width = "100%"; renderer.domElement.style.height = "100%"; renderer.domElement.style.display = "block"; container.appendChild(renderer.domElement); const resize = () => { const width = container.clientWidth || window.innerWidth; const height = container.clientHeight || window.innerHeight; renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setSize(width, height, false); const pixelRatio = renderer.getPixelRatio(); uniforms.resolution.value.set(width * pixelRatio, height * pixelRatio); }; resize(); const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(container); window.addEventListener("resize", resize); const animate = () => { const animationId = requestAnimationFrame(animate); uniforms.time.value += 0.05; renderer.render(scene, camera); if (sceneRef.current) { sceneRef.current.animationId = animationId; } }; sceneRef.current = { camera, scene, renderer, uniforms, animationId: 0, resizeObserver, }; animate(); return () => { window.removeEventListener("resize", resize); if (sceneRef.current) { cancelAnimationFrame(sceneRef.current.animationId); sceneRef.current.resizeObserver?.disconnect(); if (renderer.domElement.parentNode === container) { container.removeChild(renderer.domElement); } renderer.dispose(); geometry.dispose(); material.dispose(); } sceneRef.current = null; }; }, []); return (

); } export default function Radialwavegridshader() { return (

Templates Center

); }

Radial Wave Grid Shader