Aurora Flares
Backgrounds
Photon Grid
A cinematic 3D grid with a glowing horizon and pointer‑reactive parallax.
Customize
ADVERT
Overview
Photon Grid gives you a futuristic dashboard-style canvas built from a glowing 3D grid, a soft horizon glow and a centered headline. The backdrop leans subtly towards your cursor, while the text block tilts and breathes with light to feel like a premium layout for dark product pages.
Props
Use the props below to customise the photon grid in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| text | string | Yes | Light up your launch | Main headline shown in the center of the layout, rendered with a bright, layered glow on top of the photon grid. |
| accentText | string | No | Photon grid for dark product pages | Optional supporting line beneath the main headline, ideal for a short product tagline or description. |
| className | string | No | undefined | Optional custom class name for the root container so you can control outer layout and spacing. |
| colors | string[] | No | ["#020617", "#22d3ee", "#f97316"] | 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 | 360 | Minimum height for the grid section. Accepts a number (pixels) or any valid CSS height string. |
Related React components
More components from the same category or sharing similar tags.
