Interactive Dot Grid Hero — React Component

Cinematic hero section with a Canvas-rendered dot grid that reacts to cursor proximity — dots scale, brighten, and return to rest with a smooth radial glow spotlight.

Hero Sectionshovergradientherocanvasinteractiveparticlescursorspotlightanimationbackground

Interactive Dot Grid Hero — Variant 1

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Hero heading. Use \n for line breaks.

subtitle

Supporting paragraph below the title.

dotSize

Base dot radius in px.

dotGap

Gap between dot centres in px.

glowColor

Cursor spotlight colour (hex).

interactionRadius

Radius in px where dots react to the cursor.

dotColor

Resting dot colour (hex).

activeDotColor

Fully-activated dot colour (hex).

Generated JSX

Copy this into your page.

<DotGridHero
  title="Build interfaces\\nthat ship."
  subtitle=""
  dotSize={1.2}
  dotGap={22}
  glowColor="#6366f1"
  interactionRadius={130}
  dotColor="#334155"
  activeDotColor="#e2e8f0"
/>

Interactive Dot Grid Hero — Variant 2

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Hero heading. Use \n for line breaks.

subtitle

Supporting paragraph below the title.

dotSize

Base dot radius in px.

dotGap

Gap between dot centres in px.

glowColor

Cursor spotlight colour (hex).

interactionRadius

Radius in px where dots react to the cursor.

dotColor

Resting dot colour (hex).

activeDotColor

Fully-activated dot colour (hex).

Generated JSX

Copy this into your page.

<DotGridHero
  title="Build interfaces\\nthat ship."
  subtitle=""
  dotSize={1.2}
  dotGap={22}
  glowColor="#6366f1"
  interactionRadius={130}
  dotColor="#334155"
  activeDotColor="#e2e8f0"
/>

Interactive Dot Grid Hero — Variant 3

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Hero heading. Use \n for line breaks.

subtitle

Supporting paragraph below the title.

dotSize

Base dot radius in px.

dotGap

Gap between dot centres in px.

glowColor

Cursor spotlight colour (hex).

interactionRadius

Radius in px where dots react to the cursor.

dotColor

Resting dot colour (hex).

activeDotColor

Fully-activated dot colour (hex).

Generated JSX

Copy this into your page.

<DotGridHero
  title="Build interfaces\\nthat ship."
  subtitle=""
  dotSize={1.2}
  dotGap={22}
  glowColor="#6366f1"
  interactionRadius={130}
  dotColor="#334155"
  activeDotColor="#e2e8f0"
/>

Interactive Dot Grid Hero — Variant 4

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Hero heading. Use \n for line breaks.

subtitle

Supporting paragraph below the title.

dotSize

Base dot radius in px.

dotGap

Gap between dot centres in px.

glowColor

Cursor spotlight colour (hex).

interactionRadius

Radius in px where dots react to the cursor.

dotColor

Resting dot colour (hex).

activeDotColor

Fully-activated dot colour (hex).

Generated JSX

Copy this into your page.

<DotGridHero
  title="Build interfaces\\nthat ship."
  subtitle=""
  dotSize={1.2}
  dotGap={22}
  glowColor="#6366f1"
  interactionRadius={130}
  dotColor="#334155"
  activeDotColor="#e2e8f0"
/>

Animation effects

hovergradient

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Interactive Dot Grid Hero

The Interactive Dot Grid Hero renders a full-viewport hero with a dot matrix background that responds to cursor proximity. Dots near the cursor glow and scale outward with Framer Motion spring physics, creating a ripple-like interaction field that radiates from the mouse. Text content layers above the grid. The effect reads as technical and precise — ideal for developer tools, API products, and infrastructure services where the visual language should communicate engineering.

Common use cases

Developer tool and API landing page heroes
Infrastructure and platform product heroes
Technical SaaS product heroes
Component library showcase heroes

Installation

Interactive Dot Grid Hero — Variant 1

Shape the component before you copy it.

Interactive Dot Grid Hero — Variant 2

Shape the component before you copy it.

Interactive Dot Grid Hero — Variant 3

Shape the component before you copy it.

Interactive Dot Grid Hero — Variant 4

Shape the component before you copy it.

Animation effects

About Interactive Dot Grid Hero

Common use cases