Nexus-UI

UI systems lab

Sign in Get premium

Interactive Starfield Hero

Dark hero section with a cursor-reactive starfield. Hundreds of glowing particles stretch, brighten, and rotate toward the cursor — built on Canvas + requestAnimationFrame at 60 fps.

Hero Sectionshoverspringherocanvasinteractiveparticlescursorstarfieldanimationdarkbackground

Interactive Starfield Hero — Variant 1

Interactive component

Ship faster.
Build better.

A motion-native component library for React — animated, accessible, and production-ready.

Get started View 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.

particleCount

Total number of particles.

interactionRadius

Cursor influence radius in px.

particleColor

Base particle colour (hex).

activeColor

Particle colour at full activation (hex).

speed

Return speed: 0.1 (dreamlike) → 1.0 (snappy).

Generated JSX

Copy this into your page.

<InteractiveStarfieldHero
  title="Ship faster.\\nBuild better."
  subtitle=""
  particleCount={300}
  interactionRadius={140}
  particleColor="#60a5fa"
  activeColor="#ffffff"
  speed={0.5}
/>

Interactive Starfield Hero — Variant 2

Interactive component

Design systems
made simple.

Everything you need to build 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.

particleCount

Total number of particles.

interactionRadius

Cursor influence radius in px.

particleColor

Base particle colour (hex).

activeColor

Particle colour at full activation (hex).

speed

Return speed: 0.1 (dreamlike) → 1.0 (snappy).

Generated JSX

Copy this into your page.

<InteractiveStarfieldHero
  title="Ship faster.\\nBuild better."
  subtitle=""
  particleCount={300}
  interactionRadius={140}
  particleColor="#60a5fa"
  activeColor="#ffffff"
  speed={0.5}
/>

Interactive Starfield Hero — Variant 3

Interactive component

Ship 10× faster
with AI.

AI-powered tooling that writes, tests, and deploys your code 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.

particleCount

Total number of particles.

interactionRadius

Cursor influence radius in px.

particleColor

Base particle colour (hex).

activeColor

Particle colour at full activation (hex).

speed

Return speed: 0.1 (dreamlike) → 1.0 (snappy).

Generated JSX

Copy this into your page.

<InteractiveStarfieldHero
  title="Ship faster.\\nBuild better."
  subtitle=""
  particleCount={300}
  interactionRadius={140}
  particleColor="#60a5fa"
  activeColor="#ffffff"
  speed={0.5}
/>

Interactive Starfield Hero — Variant 4

Interactive component

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.

particleCount

Total number of particles.

interactionRadius

Cursor influence radius in px.

particleColor

Base particle colour (hex).

activeColor

Particle colour at full activation (hex).

speed

Return speed: 0.1 (dreamlike) → 1.0 (snappy).

Generated JSX

Copy this into your page.

<InteractiveStarfieldHero
  title="Ship faster.\\nBuild better."
  subtitle=""
  particleCount={300}
  interactionRadius={140}
  particleColor="#60a5fa"
  activeColor="#ffffff"
  speed={0.5}
/>

Animation effects

hoverspring

Copy-paste ready

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