Glow Grid

Surface

A neon cyan wireframe grid with a vertical wave rolling across its surface.

Usage

Install: three @react-three/fiber @react-three/drei

Drop <GlowGrid /> inside your own <Canvas>.

Mood: Retro-futuristic, electric, precise.
Colors: Neon cyan grid lines glowing over deep black with violet undertones.
Motion: A sinusoidal wave travels vertically across the grid in real time.

View component source

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import type { Mesh, BufferAttribute } from 'three';

export default function GlowGrid({ color = '#22e0ff', scale = 1 }: { color?: string; scale?: number }) {
  const ref = useRef<Mesh>(null);
  useFrame((state) => {
    const mesh = ref.current;
    if (!mesh) return;
    const t = state.clock.elapsedTime;
    const pos = mesh.geometry.attributes.position as BufferAttribute;
    for (let i = 0; i < pos.count; i++) {
      const x = pos.getX(i);
      pos.setZ(i, Math.sin(x * 1.8 + t * 1.2) * 0.3 + Math.sin(t * 0.6 + i * 0.05) * 0.1);
    }
    pos.needsUpdate = true;
  });
  return (
    <mesh ref={ref} rotation={[-0.5, 0, 0]} scale={scale}>
      <planeGeometry args={[5, 5, 40, 40]} />
      <meshStandardMaterial color={color} emissive={color} emissiveIntensity={2.0} wireframe />
    </mesh>
  );
}