Grid

Moire Grid

Two overlapping line lattices that turn against each other, creating large, slowly shifting moire interference patterns.

Settings and defaults

Shape
Square
Layer Angle
0.05
Layer Scale
1.06
Spin
1
Cell Size
2.8
Line Width
1.4
Section Size
12
Section Width
0
Line Mode
0
Cell Mode
2
Anim Speed
1
Anim Scale
1
Anim Intensity
1
Fade Strength
0.7
Displace
0
Size
50
Line Color
#226bd9
Section Color
#f2599e
Cell Color
#0d1a40
Glow Color
#99d9ff
Bg Color
#02040d
Bg Opacity
0
Reveal
1
Reveal Duration
0

The Moire Grid lays two almost identical lattices on top of each other and turns them slightly against one another. Where their lines nearly line up, large soft bands and rosettes appear that are far bigger than either lattice, the same effect you see through two layers of net curtain or on a striped shirt on camera.

How it works

Neither lattice draws the big pattern. It emerges on its own wherever the two sets of lines fall into and out of step, which is why it looks physical rather than painted. The angle between the layers swings back and forth instead of growing forever, so the floor keeps cycling through the long, slow beats that are the interesting part. An optional third lattice can trace the beat pattern itself.

Settings

  • Shape sets both layers to Square, Hex or Rings (concentric circles, which offset rather than turn).
  • Layer Angle is the angle between the layers; small values beat slowly in wide bands.
  • Layer Scale sets the spacing of the second layer; close to 1 gives long beats.
  • Spin is the speed of the counter-rotation; 0 freezes the pattern.
  • Section Width above 0 draws the beat lattice on top (square shape).

Use it for

Op-art and retro graphics, fashion and editorial backdrops, music visuals and minimal abstract hero sections. For other line-pattern floors, see the Quasicrystal Grid or browse all grids.

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 grids

Works well with

Used in