Wave Horizon

Surface

A neon wireframe floor grid with ridges rolling toward a distant horizon.

Usage

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

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

Mood: Retro-futuristic, synthwave, cinematic. An endless neon plain.
Colors: A single bright neon grid (magenta by default) glowing on near-black. Bloom gives it the arcade halo.
Motion: Waves travel across the tilted grid toward the viewer like an endless scrolling floor.

View component source

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

export default function WaveHorizon({ color = '#ff2fd0', 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);
      const y = pos.getY(i);
      // ridges travelling toward the viewer along the depth axis
      pos.setZ(i, Math.sin(x * 1.1 + t) * 0.14 + Math.sin(y * 2.0 - t * 1.6) * 0.26);
    }
    pos.needsUpdate = true;
  });
  return (
    <mesh ref={ref} rotation={[-1.15, 0, 0]} position={[0, -0.7, 0]} scale={scale}>
      <planeGeometry args={[7, 7, 48, 48]} />
      <meshBasicMaterial color={color} wireframe toneMapped={false} />
    </mesh>
  );
}