24 objects

Grids for Three.js & React Three Fiber

Animated 3D grids for floors, walls and backdrops: classic cell grids, ornamental patterns and live physics simulations.

Preview all 24Open the studio

Grids are flat, animated patterns that make a floor, a wall or a backdrop. Each one is drawn on a single plane, so it can cover a large area cheaply, and almost every one of them moves: lines ripple and scan, cells light up, and the more scientific grids run a live simulation or a piece of geometry that keeps changing.

Three kinds of grid

  • Classic grids: the Basic Grid with cells and heavier section lines, the honeycomb Hex Grid, the Advanced Grid, and the Radar, Circuit, Voronoi, Contour, Fractal and Moire grids for interface and tech looks.
  • Pattern grids: Islamic star-and-rosette strapwork in the Girih Grid, the 17 symmetry groups of the Wallpaper Grid, endless loops in the Truchet Grid, a Hilbert curve carrying glowing data signals, sunflower spirals in the Phyllotaxis and Parastichy grids, and nested circles in the Apollonian Grid. They suit ornament, luxury and generative-art scenes.
  • Physics grids: sand gathering on the lines of a vibrating plate that don't move in the Chladni Grid, a lattice bent around a black hole in the Lensing Grid, ripples from two merging black holes in the Grav Wave Grid, flow bending around an obstacle in the Flow Net and Conformal grids, and coral and labyrinths that grow and never settle in the Reaction Diffusion Grid.

Settings every grid shares

Apart from the Basic Grid, the grids share one set of surface controls, so once you know one you know them all:

  • Cell Size and Line Width set the scale and weight of the pattern. Section Size and Section Width add a heavier accent line every few cells.
  • Line Mode animates the lines (Static, Ripple, Flow, Scan, Pulse) and Cell Mode lights the cells (Off, Wave, Twinkle, Ripple, Alternate). Anim Speed, Anim Scale and Anim Intensity tune the motion.
  • Fade Distance and Fade Strength dissolve the outer edge, so the grid melts into the scene instead of ending in a hard square.
  • Displace lifts the surface into relief.
  • Reveal and Reveal Duration build the grid in or dissolve it away, which makes a grid a good opening shot.
  • Line Color, Section Color, Cell Color, Glow Color and Bg Color, with Bg Opacity at 0 leaving only the lines floating over the scene.

On top of these, each grid has its own controls, such as Mode N, Mode M and Grain on the Chladni Grid, or Feed and Kill on the reaction-diffusion field.

Choosing a grid

For a clean product floor or a studio set, start with the Basic or Hex grid and keep the animation low. For tech, data and interface looks, try the Circuit, Radar or Hilbert grids. For science, music and education, the physics grids explain themselves as they move. For brand and luxury backdrops, the pattern grids give rich ornament with no texture files. A grid lies flat by default; rotate the object to stand it up as a wall, and keyframe its settings or drive them with the cursor to make it respond to the visitor.

All grids

Click a card to play it live
01

Advanced Grid

A Grid with shader material , animation and noise effects.

  • grid
▶ PreviewHow it works
02

Basic Grid

Basic grid with cells and sections

  • grid
▶ PreviewHow it works
03

Chladni Grid

Vibrating Chladni plates: sand settles on the nodal lines of a standing wave that drifts between resonances. Use for sound, music, science and meditative floors.

  • chladni
  • cymatics
  • standing-wave
  • sound
▶ PreviewHow it works
04

Circuit Grid

Beautifull circuit grid

▶ PreviewHow it works
06

Flow Net Grid

A potential-flow net around a cylinder: streamlines and equipotentials cross at right angles and bend around the obstacle. Use for aerodynamic, fluid and engineering floors.

  • flow-net
  • potential-flow
  • streamlines
  • fluid
▶ PreviewHow it works
08

Girih Grid

Islamic star-and-rosette strapwork built by Hankin polygons-in-contact: rays leave every edge midpoint at the contact angle and close into interlaced stars. Use for ornament, palace, mosaic and ritual floors.

  • girih
  • islamic
  • star-pattern
  • strapwork
▶ PreviewHow it works
09

Grav Wave Grid

A spacetime lattice around an inspiralling black-hole binary: the wells pinch the grid and chirping quadrupole waves spiral outward until the merger rings down. Use for space, physics and sci-fi floors.

  • gravitational-waves
  • black-holes
  • binary
  • spacetime
▶ PreviewHow it works
10

Hex Grid

honeycomb grid

  • grid
  • hex
▶ PreviewHow it works
11

Hyperbolic Grid

An Escher-style {p,q} tiling of the Poincaré disk that glides through itself; tiles shrink endlessly toward the rim. Use for mystical, mathematical and portal floors.

  • hyperbolic
  • poincare-disk
  • escher
  • tiling
▶ PreviewHow it works
14

Radar Grid

cool radar grid

▶ PreviewHow it works
15

Reaction Diffusion Grid

A living Gray-Scott reaction-diffusion field: coral, labyrinths and dividing spots grow across the plane and never settle. Use for organic, biological and alien floors.

  • reaction-diffusion
  • gray-scott
  • turing-pattern
  • coral
▶ PreviewHow it works
17

Wallpaper Grid

Kaleidoscope patterns with the exact symmetry of the 17 wallpaper groups, drifting and cycling from one group to the next. Use for tiled, ornamental, crystal and mosaic floors.

  • wallpaper-group
  • symmetry
  • kaleidoscope
  • crystallography
▶ PreviewHow it works
18

Lensing Grid

A square lattice seen through a point-mass gravitational lens: Einstein ring, inverted inner image and a dark shadow. Use for space, sci-fi and cosmic floors.

  • gravitational-lensing
  • einstein-ring
  • space
  • physics
▶ PreviewHow it works
19

Conformal Grid

A square lattice pulled through ideal-flow potentials (spinning cylinder, vortex, source-sink); colour is flow speed and dye rides the streamlines. Use for science and tech scenes.

  • conformal-map
  • potential-flow
  • streamlines
  • magnus-effect
▶ PreviewHow it works
20

Truchet Grid

Smith quarter-circle Truchet tiles forming endless two-coloured loops; tiles turn to re-route the paths and comets travel them. Use for playful, retro and generative floors.

  • truchet
  • tiling
  • loops
  • generative
▶ PreviewHow it works
21

Phyllotaxis Grid

Vogel sunflower florets at the golden angle, lit domes coloured by age, each carrying one of 21 marks opened by bloom rings. Use for organic, botanical and premium floors.

  • phyllotaxis
  • golden-angle
  • sunflower
  • fibonacci
▶ PreviewHow it works
22

Parastichy Grid

The sunflower's crossed Fibonacci spirals (21 × 13, cut into triangles by the 8-family) as a grid, with light running inward. Use for organic and sacred-geometry scenes.

  • parastichy
  • fibonacci
  • spirals
  • golden-angle
▶ PreviewHow it works
23

Apollonian Grid

An Apollonian gasket of tangent circles built by circle inversion, re-balanced by a slow Möbius flow. Use for jewel-like, mathematical and luxury scenes.

  • apollonian-gasket
  • circle-inversion
  • fractal
  • mobius
▶ PreviewHow it works
24

Hilbert Grid

A closed Moore curve (four Hilbert curves) threading every cell, with glowing data signals circulating along it. Use for tech, data and circuit floors.

  • hilbert-curve
  • space-filling-curve
  • moore-curve
  • data
▶ PreviewHow it works

Code and API

Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.

See plans

More object types

Shapes

A primitive 3D shape (box, sphere, cylinder, etc.). The most common object type for general geometry.

36 objects

Lights

A light source illuminating the scene. Choose the kind based on directionality and falloff.

10 objects

Environment effects

Environmental elements from the world

6 objects

Gallery layouts

A set of pictures: frames arranged on a layout (tiles, circular, spiral, tunnel…), or a variant with its own motion and navigation.

23 objects