fix(ts-tailwind): Beams, Dither, GridDistortion & GridScan

Author: Utkarsh-Singhal-26

public/r/Beams-TS-TW.json

@@ -6226,8 +6226,8 @@
 			"type": "registry:component",
 			"dependencies": [
 				"three@^0.167.1",
-				"@react-three/fiber@^9.3.0",
-				"@react-three/drei@^10.7.4"
+				"@react-three/drei@^10.7.4",
+				"@react-three/fiber@^9.3.0"
 			],
 			"registryDependencies": [],
 			"files": [
@@ -6893,9 +6893,9 @@
 			"description": "Animated grid room 3D scan effect and cool interactions.",
 			"type": "registry:component",
 			"dependencies": [
+				"face-api.js@^0.22.2",
 				"postprocessing@^6.36.0",
-				"three@^0.167.1",
-				"face-api.js@^0.22.2"
+				"three@^0.167.1"
 			],
 			"registryDependencies": [],
 			"files": [

public/r/Dither-TS-TW.json

@@ -1,9 +1,8 @@
-import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';
-
+import { FC, forwardRef, ReactNode, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 
-import { Canvas, useFrame } from '@react-three/fiber';
 import { PerspectiveCamera } from '@react-three/drei';
+import { Canvas, useFrame } from '@react-three/fiber';
 import { degToRad } from 'three/src/math/MathUtils.js';
 
 type UniformValue = THREE.IUniform<unknown> | unknown;
@@ -46,6 +45,8 @@ function extendMaterial<T extends THREE.Material = THREE.Material>(
   if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap;
   if ('envMapIntensity' in defaults) uniforms.envMapIntensity.value = defaults.envMapIntensity;
 
+  defaults.dispose();
+
   Object.entries(cfg.uniforms ?? {}).forEach(([key, u]) => {
     uniforms[key] =
       u !== null && typeof u === 'object' && 'value' in u
@@ -76,7 +77,7 @@ function extendMaterial<T extends THREE.Material = THREE.Material>(
 }
 
 const CanvasWrapper: FC<{ children: ReactNode }> = ({ children }) => (
-  <Canvas dpr={[1, 2]} frameloop="always" className="w-full h-full relative">
+  <Canvas dpr={[1, 2]} frameloop="always" className="relative w-full h-full">
     {children}
   </Canvas>
 );
@@ -243,9 +244,27 @@ const Beams: FC<BeamsProps> = ({
           uScale: scale
         }
       }),
-    [speed, noiseIntensity, scale]
+    []
   );
 
+  useEffect(() => {
+    return () => {
+      beamMaterial.dispose();
+    };
+  }, [beamMaterial]);
+
+  useEffect(() => {
+    if (beamMaterial.uniforms.uSpeed) beamMaterial.uniforms.uSpeed.value = speed;
+  }, [beamMaterial, speed]);
+
+  useEffect(() => {
+    if (beamMaterial.uniforms.uNoiseIntensity) beamMaterial.uniforms.uNoiseIntensity.value = noiseIntensity;
+  }, [beamMaterial, noiseIntensity]);
+
+  useEffect(() => {
+    if (beamMaterial.uniforms.uScale) beamMaterial.uniforms.uScale.value = scale;
+  }, [beamMaterial, scale]);
+
   return (
     <CanvasWrapper>
       <group rotation={[0, 0, degToRad(rotation)]}>
@@ -324,13 +343,22 @@ const MergedPlanes = forwardRef<
 >(({ material, width, count, height }, ref) => {
   const mesh = useRef<THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial>>(null!);
   useImperativeHandle(ref, () => mesh.current);
+
   const geometry = useMemo(
     () => createStackedPlanesBufferGeometry(count, width, height, 0, 100),
     [count, width, height]
   );
+
+  useEffect(() => {
+    return () => {
+      geometry.dispose();
+    };
+  }, [geometry]);
+
   useFrame((_, delta) => {
     mesh.current.material.uniforms.time.value += 0.1 * delta;
   });
+
   return <mesh ref={mesh} geometry={geometry} material={material} />;
 });
 MergedPlanes.displayName = 'MergedPlanes';

public/r/GridDistortion-TS-TW.json

@@ -1,8 +1,7 @@
-/* eslint-disable react/no-unknown-property */
-import { useRef, useState, useEffect, forwardRef } from 'react';
-import { Canvas, useFrame, useThree, ThreeEvent } from '@react-three/fiber';
+import { Canvas, ThreeEvent, useFrame, useThree } from '@react-three/fiber';
 import { EffectComposer, wrapEffect } from '@react-three/postprocessing';
 import { Effect } from 'postprocessing';
+import { forwardRef, useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 const waveVertexShader = `
@@ -156,9 +155,10 @@ class RetroEffectImpl extends Effect {
   }
 }
 
+const WrappedRetroEffect = wrapEffect(RetroEffectImpl);
+
 const RetroEffect = forwardRef<RetroEffectImpl, { colorNum: number; pixelSize: number }>((props, ref) => {
   const { colorNum, pixelSize } = props;
-  const WrappedRetroEffect = wrapEffect(RetroEffectImpl);
   return <WrappedRetroEffect ref={ref} colorNum={colorNum} pixelSize={pixelSize} />;
 });
 
@@ -311,7 +311,7 @@ export default function Dither({
 }: DitherProps) {
   return (
     <Canvas
-      className="w-full h-full relative"
+      className="relative w-full h-full"
       camera={{ position: [0, 0, 6] }}
       dpr={1}
       gl={{ antialias: true, preserveDrawingBuffer: true }}

public/r/GridScan-TS-TW.json

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 interface GridDistortionProps {
@@ -69,7 +69,9 @@ const GridDistortion: React.FC<GridDistortionProps> = ({
     renderer.setClearColor(0x000000, 0);
     rendererRef.current = renderer;
 
-    container.innerHTML = '';
+    if (container.contains(renderer.domElement)) {
+      container.removeChild(renderer.domElement);
+    }
     container.appendChild(renderer.domElement);
 
     const camera = new THREE.OrthographicCamera(0, 0, 0, 0, -1000, 1000);
@@ -119,8 +121,6 @@ const GridDistortion: React.FC<GridDistortionProps> = ({
     scene.add(plane);
 
     const handleResize = () => {
-      if (!container || !renderer || !camera) return;
-
       const rect = container.getBoundingClientRect();
       const width = rect.width;
       const height = rect.height;
@@ -204,10 +204,10 @@ const GridDistortion: React.FC<GridDistortionProps> = ({
         console.error('dataTexture.image.data is not a Float32Array');
         return;
       }
-      const data: Float32Array = dataTexture.image.data;
+      const texData: Float32Array = dataTexture.image.data;
       for (let i = 0; i < size * size; i++) {
-        data[i * 4] *= relaxation;
-        data[i * 4 + 1] *= relaxation;
+        texData[i * 4] *= relaxation;
+        texData[i * 4 + 1] *= relaxation;
       }
 
       const gridMouseX = size * mouseState.x;
@@ -220,8 +220,8 @@ const GridDistortion: React.FC<GridDistortionProps> = ({
           if (distSq < maxDist * maxDist) {
             const index = 4 * (i + size * j);
             const power = Math.min(maxDist / Math.sqrt(distSq), 10);
-            data[index] += strength * 100 * mouseState.vX * power;
-            data[index + 1] -= strength * 100 * mouseState.vY * power;
+            texData[index] += strength * 100 * mouseState.vX * power;
+            texData[index + 1] -= strength * 100 * mouseState.vY * power;
           }
         }
       }
@@ -246,18 +246,20 @@ const GridDistortion: React.FC<GridDistortionProps> = ({
       container.removeEventListener('mousemove', handleMouseMove);
       container.removeEventListener('mouseleave', handleMouseLeave);
 
+      scene.clear();
+
+      if (geometry) geometry.dispose();
+      if (material) material.dispose();
+      if (dataTexture) dataTexture.dispose();
+      if (uniforms.uTexture.value) uniforms.uTexture.value.dispose();
+
       if (renderer) {
         renderer.dispose();
         if (container.contains(renderer.domElement)) {
           container.removeChild(renderer.domElement);
         }
       }
 
-      if (geometry) geometry.dispose();
-      if (material) material.dispose();
-      if (dataTexture) dataTexture.dispose();
-      if (uniforms.uTexture.value) uniforms.uTexture.value.dispose();
-
       sceneRef.current = null;
       rendererRef.current = null;
       cameraRef.current = null;

public/r/registry.json

@@ -1,7 +1,7 @@
+import * as faceapi from 'face-api.js';
+import { BloomEffect, ChromaticAberrationEffect, EffectComposer, EffectPass, RenderPass } from 'postprocessing';
 import React, { useEffect, useRef, useState } from 'react';
-import { EffectComposer, RenderPass, EffectPass, BloomEffect, ChromaticAberrationEffect } from 'postprocessing';
 import * as THREE from 'three';
-import * as faceapi from 'face-api.js';
 
 type GridScanProps = {
   enableWebcam?: boolean;
@@ -360,6 +360,23 @@ export const GridScan: React.FC<GridScanProps> = ({
   const MAX_SCANS = 8;
   const scanStartsRef = useRef<number[]>([]);
 
+  const skewScaleRef = useRef(0);
+  const tiltScaleRef = useRef(0);
+  const yawScaleRef = useRef(0);
+  const depthResponseRef = useRef(0);
+  const smoothTimeRef = useRef(0);
+  const yBoostRef = useRef(0);
+
+  useEffect(() => {
+    const s = THREE.MathUtils.clamp(sensitivity, 0, 1);
+    skewScaleRef.current = THREE.MathUtils.lerp(0.06, 0.2, s);
+    tiltScaleRef.current = THREE.MathUtils.lerp(0.12, 0.3, s);
+    yawScaleRef.current = THREE.MathUtils.lerp(0.1, 0.28, s);
+    depthResponseRef.current = THREE.MathUtils.lerp(0.25, 0.45, s);
+    smoothTimeRef.current = THREE.MathUtils.lerp(0.45, 0.12, s);
+    yBoostRef.current = THREE.MathUtils.lerp(1.2, 1.6, s);
+  }, [sensitivity]);
+
   const pushScan = (t: number) => {
     const arr = scanStartsRef.current.slice();
     if (arr.length >= MAX_SCANS) arr.shift();
@@ -379,16 +396,8 @@ export const GridScan: React.FC<GridScanProps> = ({
   const bufT = useRef<number[]>([]);
   const bufYaw = useRef<number[]>([]);
 
-  const s = THREE.MathUtils.clamp(sensitivity, 0, 1);
-  const skewScale = THREE.MathUtils.lerp(0.06, 0.2, s);
-  const tiltScale = THREE.MathUtils.lerp(0.12, 0.3, s);
-  const yawScale = THREE.MathUtils.lerp(0.1, 0.28, s);
-  const depthResponse = THREE.MathUtils.lerp(0.25, 0.45, s);
-  const smoothTime = THREE.MathUtils.lerp(0.45, 0.12, s);
   const maxSpeed = Infinity;
 
-  const yBoost = THREE.MathUtils.lerp(1.2, 1.6, s);
-
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -545,6 +554,8 @@ export const GridScan: React.FC<GridScanProps> = ({
       const dt = Math.max(0, Math.min(0.1, (now - last) / 1000));
       last = now;
 
+      const smoothTime = smoothTimeRef.current;
+
       lookCurrent.current.copy(
         smoothDampVec2(lookCurrent.current, lookTarget.current, lookVel.current, smoothTime, maxSpeed, dt)
       );
@@ -571,10 +582,12 @@ export const GridScan: React.FC<GridScanProps> = ({
       yawCurrent.current = yawSm.value;
       yawVel.current = yawSm.v;
 
-      const skew = new THREE.Vector2(lookCurrent.current.x * skewScale, -lookCurrent.current.y * yBoost * skewScale);
-      material.uniforms.uSkew.value.set(skew.x, skew.y);
-      material.uniforms.uTilt.value = tiltCurrent.current * tiltScale;
-      material.uniforms.uYaw.value = THREE.MathUtils.clamp(yawCurrent.current * yawScale, -0.6, 0.6);
+      material.uniforms.uSkew.value.set(
+        lookCurrent.current.x * skewScaleRef.current,
+        -lookCurrent.current.y * yBoostRef.current * skewScaleRef.current
+      );
+      material.uniforms.uTilt.value = tiltCurrent.current * tiltScaleRef.current;
+      material.uniforms.uYaw.value = THREE.MathUtils.clamp(yawCurrent.current * yawScaleRef.current, -0.6, 0.6);
 
       material.uniforms.iTime.value = now / 1000;
       renderer.clear(true, true, true);
@@ -590,6 +603,7 @@ export const GridScan: React.FC<GridScanProps> = ({
     return () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       window.removeEventListener('resize', onResize);
+      scene.clear();
       material.dispose();
       (quad.geometry as THREE.BufferGeometry).dispose();
       if (composerRef.current) {
@@ -599,18 +613,7 @@ export const GridScan: React.FC<GridScanProps> = ({
       renderer.dispose();
       container.removeChild(renderer.domElement);
     };
-  }, [
-    sensitivity,
-    lineThickness,
-    linesColor,
-    scanColor,
-    scanOpacity,
-    gridScale,
-    lineStyle,
-    lineJitter,
-    scanDirection,
-    enablePost
-  ]);
+  }, [lineThickness, linesColor, scanColor, scanOpacity, gridScale, lineStyle, lineJitter, scanDirection, enablePost]);
 
   useEffect(() => {
     const m = materialRef.current;
@@ -744,7 +747,7 @@ export const GridScan: React.FC<GridScanProps> = ({
               const look = new THREE.Vector2(Math.tanh(nxm), Math.tanh(nym));
 
               const faceSize = Math.min(1, Math.hypot(box.width / vw, box.height / vh));
-              const depthScale = 1 + depthResponse * (faceSize - 0.25);
+              const depthScale = 1 + depthResponseRef.current * (faceSize - 0.25);
               lookTarget.current.copy(look.multiplyScalar(depthScale));
 
               const leftEye = res.landmarks.getLeftEye();
@@ -799,14 +802,14 @@ export const GridScan: React.FC<GridScanProps> = ({
         video.srcObject = null;
       }
     };
-  }, [enableWebcam, modelsReady, depthResponse]);
+  }, [enableWebcam, modelsReady]);
 
   return (
     <div ref={containerRef} className={`relative w-full h-full overflow-hidden ${className ?? ''}`} style={style}>
       {showPreview && (
-        <div className="absolute right-3 bottom-3 w-[220px] h-[132px] rounded-lg overflow-hidden border border-white/25 shadow-[0_4px_16px_rgba(0,0,0,0.4)] bg-black text-white text-[12px] leading-[1.2] font-sans pointer-events-none">
+        <div className="right-3 bottom-3 absolute bg-black shadow-[0_4px_16px_rgba(0,0,0,0.4)] border border-white/25 rounded-lg w-[220px] h-[132px] overflow-hidden font-sans text-[12px] text-white leading-[1.2] pointer-events-none">
           <video ref={videoRef} muted playsInline autoPlay className="w-full h-full object-cover -scale-x-100" />
-          <div className="absolute left-2 top-2 px-[6px] py-[2px] bg-black/50 rounded-[6px] backdrop-blur-[4px]">
+          <div className="top-2 left-2 absolute bg-black/50 backdrop-blur-[4px] px-[6px] py-[2px] rounded-[6px]">
             {enableWebcam
               ? modelsReady
                 ? uiFaceActive