Grid

import { Grid } from '../lib/fabric/components/Grid'

<Grid speed={3} amplitude={1} color="#000" pointsize={8} autoIdle />

<Grid> owns the particle system. Particle appearance is here, not on <Scene>. Every prop accepts a plain value or a signal.

Simulation

Prop	Default	Notes
speed	3	Simulation rate. 0 stops the compute pass entirely
curl	0.1	Curl-noise frequency
amplitude	1	Displacement magnitude; a scroll-driven spring adds to it
distance	0.275	Range over which a particle eases toward its target
autoIdle	false	Rest the simulation when nothing is driving the frame

autoIdle sets the effective speed to the configured value while the engine’s dirty counter is live — scroll, pointer, camera, a spring — and to 0 once it runs out, so the GPU idles between inputs. The amplitude spring keeps the counter live while it is still moving, so a scroll settles before the simulation rests.

Appearance

Prop	Default	Notes
color	'#000'
focusColor	'#00ff0d'	Colour at the focus distance when highlightFocus is on
highlightFocus	true
pointsize		Dot size in pixels; stays constant through resizes
focus	10	Focus distance
aperture	5.6	Blur growth away from focus
usePlyColor	false	Use per-point colour from a loaded PLY

Slots

Dots can render as elongated slots aligned to the camera rig’s angle.

Prop	Default
useSlots	false
slotRadius	0.05
slotLength	1
slotSize	10

Shape — rebuilds the particle buffers on change

Prop	Default	Notes
resolution	1024	Particles per side; the count is resolution²
gridSpacing	0.155	World units between particles
geometryUrl		A binary PLY to load as the point cloud instead of a lattice

These three are structural. A change destroys and recreates the particle buffers; the others update in place.

Grid spacing is viewport-adaptive in the vertex shader — visual spacing stays constant through a resize with no rebuild.