Photon Grid React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install three @react-three/fiber @react-three/drei

CSS Modules

Usage

Matches your current playground settings.

import PhotonGrid from "./PhotonGrid";

export default function Example() {
  return (
    <PhotonGrid
      text={"Light up your launch"}
      accentText={"Photon grid for dark product pages"}
      colors={[
        "#020617",
        "#22d3ee",
        "#f97316"
      ]}
      intensity={0.9}
      tilt={1.1}
      parallax={1.2}
      speed={0.6}
      density={1.4}
      minHeight={360}
    />
  );
}

Using Photon Grid

Supply heading and supporting text through text and accentText. minHeight reserves the horizon's area.

Use density and speed to tune the moving grid. Keep intensity low enough that the foreground text remains readable.

Props

Name	Type	Required	Default	Description
text	string	No	""	Main headline shown in the center of the layout, rendered with a bright, layered glow on top of the photon grid.
accentText	string	No	""	Optional supporting line beneath the main headline, ideal for a short product tagline or description.
className	string	No	undefined	Additional CSS class names, merged with base component styles.
colors	string[]	No	["#020617", "#22d3ee", "#e879f9"]	Array of up to three hex colors used for the canvas, grid lines and accent horizon glow.
intensity	number	No	0.9	Overall brightness and strength of the grid glow and horizon light. Lower values feel softer and more subtle.
tilt	number	No	1.1	How dramatically the headline block tilts in 3D as you move the pointer across the grid.
parallax	number	No	1.2	How much the glow and grid respond to pointer movement for a parallax feel.
speed	number	No	0.6	Speed multiplier for the flowing grid animation and horizon sweep.
density	number	No	1.4	Controls how dense and tight the grid lines appear across the canvas.
minHeight	number \| string	No	320	Minimum height for the grid section. Accepts a number (pixels) or any valid CSS height string.