Toggle Sidebar B
AppearanceLight & dark mode D

Shape Waves

A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow around.

Default

Move the pointer over the field to splash ripples into it. Needs a browser with WebGPU; elsewhere the background color still shows and an error event fires. Every prop is wired to the controls underneath.

Light previewReplay previewOpen in new tab

Customize

Color
Splash Color
Background
Shapes
Cell Size10
Dot Size0.75
Text Size0.6
Speed1
Wave Scale1
Contrast1
Brightness0.4
Flow0
Direction0
Edge Fade0.25
Splash Radius40
Splash Strength0.4
Glow0.35
Intro Duration1.6

API Reference

ShapeWaves

PropTypeDefaultDescription
textstring""Optional text carved out of the field. Cells under the glyphs stay empty and the waves flow around them.
fontFamilystring'Geist, "Geist Sans", system-ui, sans-serif'CSS font family used to draw the text cutout.
fontWeightnumber500Font weight of the text cutout.
textSizenumber0.6Text height as a fraction of the container height. Long text shrinks to fit the width.
shapesstring"mixed"'mixed' draws dark bands as triangles, mid bands as circles and bright bands as squares. 'squares', 'circles' or 'triangles' use one glyph and vary its size per band instead.
cellSizenumber10Size of one grid cell in CSS pixels.
dotSizenumber0.75Glyph size as a fraction of the cell.
colorstring"#929292"Glyph color. One flat color for the whole field.
hoverColorstring"#ffffff"Color the glyphs step towards inside a splash.
backgroundColorstring"#000000"Background color behind the glyphs.
speednumber1How fast the wave bands morph over time. 0 freezes them.
scalenumber1Size of the wave bands. Larger values give broader, calmer swells.
contrastnumber1How sharply the field is cut into its three bands.
brightnessnumber0.4Shifts the balance between dark, mid and bright bands.
flownumber0Drift speed of the field in cells per second. 0 evolves in place.
directionnumber0Drift direction in degrees, used when flow is above 0.
fadenumber0.25Strength of the radial fade into the background towards the edges. 0 disables it.
interactivebooleantrueLets the cursor splash into the field, sending ripples that cycle the glyphs and light them up.
splashRadiusnumber40Size of a cursor splash in CSS pixels.
splashStrengthnumber0.4How much energy a splash drops in. Higher values throw wider, brighter ripples.
glownumber0.35Bloom on lit glyphs. 0 disables the glow pass entirely.
introbooleantruePlays a spawn animation on mount: the shapes pop in along a wave that travels from the centre to the corners.
introDurationnumber1.6Length of the intro wave in seconds.
introKeynumber0Change this value to replay the intro wave without remounting.
pausedbooleanfalseFreezes the wave motion. Splashes keep working.
@error(error: Error) => void-Emitted when WebGPU is unavailable or rendering fails. The background color still shows.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The root is aria-hidden and ignores pointer events; it is a decorative background, so put real content above it.
  • With prefers-reduced-motion set, the wave motion, the intro and the ripples are disabled.
  • The animation pauses while the element is off screen or the tab is hidden.
Shape GridSide Rays