CubeWave

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16function Cubes({
17  grid,
18  gap,
19  speed,
20  theme,
21}: {
22  grid: number
23  gap: number
24  speed: number
25  theme: ThemeMode
26}) {
27  const { primaryColor, accentColor } = useShadcnTheme(theme)
28  const meshRef = React.useRef<THREE.InstancedMesh>(null)
29  const dummy = React.useMemo(() => new THREE.Object3D(), [])
30  const tmpColor = React.useMemo(() => new THREE.Color(), [])
31  const count = grid * grid
32 
33  useFrame(({ clock }) => {
34    const mesh = meshRef.current
35    if (!mesh) return
36    const t = clock.getElapsedTime() * speed
37    const half = (grid - 1) / 2
38    let i = 0
39    for (let x = 0; x < grid; x++) {
40      for (let z = 0; z < grid; z++) {
41        const dx = x - half
42        const dz = z - half
43        const d = Math.sqrt(dx * dx + dz * dz)
44        const y = Math.sin(d * 0.9 - t * 2.1) * 0.45
45        dummy.position.set(dx * gap, y, dz * gap)
46        dummy.updateMatrix()
47        mesh.setMatrixAt(i, dummy.matrix)
48        // Crest → --primary, trough → --accent.
49        const k = (y + 0.45) / 0.9
50        tmpColor.copy(accentColor).lerp(primaryColor, k)
51        mesh.setColorAt(i, tmpColor)
52        i++
53      }
54    }
55    mesh.instanceMatrix.needsUpdate = true
56    if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true
57  })
58 
59  return (
60    <instancedMesh key={count} ref={meshRef} args={[undefined, undefined, count]}>
61      <boxGeometry args={[0.62, 0.62, 0.62]} />
62      <meshStandardMaterial roughness={0.3} metalness={0.35} />
63    </instancedMesh>
64  )
65}
66 
67export type CubeWaveProps = {
68  /** Cubes per side (total = grid²). */
69  grid?: number
70  /** Spacing between cube centers. */
71  gap?: number
72  /** Wave speed multiplier. */
73  speed?: number
74  className?: string
75  theme?: ThemeMode
76  environment?: SceneContainerProps["environment"]
77}
78 
79/**
80 * A grid of instanced cubes riding a radial wave from the center outward.
81 * Each cube blends from `--accent` in the troughs to `--primary` on the
82 * crests. One draw call, hundreds of cubes.
83 */
84export function CubeWave({
85  grid = 16,
86  gap = 0.75,
87  speed = 1,
88  className,
89  theme = "auto",
90  environment = "studio",
91}: CubeWaveProps) {
92  return (
93    <SceneContainer
94      className={className}
95// … truncated