Nexus-UI

UI systems lab

Sign in Get premium

Interactive Dot Grid Hero

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

Build interfaces
that ship.

A motion-native component library for React. Animated, accessible, and production-ready out of the box.

Get started Browse components

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

Design systems
made simple.

Everything you need to build fast, beautiful products at scale.

Start for free View docs

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

Ship 10× faster
with AI.

AI-powered tooling that writes, tests, and deploys automatically.

Try it free Watch demo

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

Beautiful UX
starts here.

Craft interfaces your users will love. Premium components, zero compromise.

Explore now See pricing

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.