Grid

Hex Grid

A glowing honeycomb floor of hexagon tiles that ripple, twinkle and can lift into raised plates. For sci-fi, tech and game scenes.

  • grid
  • hex

Settings and defaults

Plateau
On
Cell Size
1.4
Line Width
1.2
Section Size
4
Section Width
2
Line Mode
1
Cell Mode
2
Anim Speed
1
Anim Scale
0.6
Anim Intensity
1
Fade Strength
0.7
Displace
0
Size
50
Line Color
#2a9ec7
Section Color
#73eaff
Cell Color
#0f4869
Glow Color
#4df3ff
Bg Color
#030809
Bg Opacity
0
Reveal
1
Reveal Duration
0

The Hex Grid is a honeycomb floor: glowing hexagon edges, larger super-hexes outlined in an accent colour, and cells that light up in patterns. By default it is cyan on a transparent background, with rings of light rippling outward and random cells twinkling.

How it works

The hexagons are drawn as one continuous pattern, so the edges stay sharp at any distance. Animations keep the shape of the lattice: a ripple travels outward in hexagonal rings rather than circles. The cells use a proper three-colouring, so no two neighbours light the same way in Alternate mode, and lit cells glow brightest at their rim, which reads as depth.

Settings

  • Cell Size is the width of one hexagon; Section Size is how many hexes make one super-hex.
  • Line Mode: Static, Ripple, Flow, Scan or Pulse.
  • Cell Mode: Off, Wave, Twinkle, Ripple or Alternate.
  • Displace raises the floor into a wave; with Plateau on, each hexagon lifts as its own flat plate with bevelled edges instead of a smooth surface.
  • Fade Distance and Fade Strength set how the floor dissolves at its edge.

Use it for

Sci-fi interfaces, gaming and esports visuals, tech product floors and shield or hive motifs. It pairs naturally with the Forcefield effect, and the Voronoi Grid gives a looser, cellular version.

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