CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/starfield-warp

Starfield Warp

Deep parallax star field. The cursor bends space around it — stars near the pointer pull into curved trails toward the lens centre.

ReactWebGLInteractiveFont#stars#lensing#parallax#trails#premium

Usage

import StarfieldWarp from '@crazygl/hero-starfield-warp';

export default function Hero() {
  return (
    <StarfieldWarp
      heading="Bent space."
      lensStrength={1.2}
      trailLength={0.7}
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom) with heading, subheading, column1, column2 or a custom content node.
  • Background — transparent, bgTop, bgBottom, nebulaColor (faint cosmic dust behind the stars).
  • Stars — starColor, starDensity, starSize, driftSpeed (slow ambient flow).
  • Lens — lensStrength (how hard the cursor warps space), lensRadius (falloff zone), trailLength (how far stars streak inward).

Best for

  • Space / sci-fi product launches and gaming sites.
  • AI and developer-tool landing pages that want quiet awe over busy motion.
  • Any hero where a subtle, interactive backdrop should sit behind clean type.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-starfield-warp
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import StarfieldWarp from '@crazygl/hero-starfield-warp';

export default function Landing() {
  return (
    <StarfieldWarp />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import StarfieldWarp from '@crazygl/hero-starfield-warp';

export default function Page() {
  return (
    <section>
      <StarfieldWarp
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Black Hole Lens

Gravitational lensing of a star field, dust motes, and the deep nebula behind a singularity. A Doppler-shifted accretion disk burns in the equatorial plane — bluer where it rushes toward you, redder where it falls away.

Typography Shadows

Abstract letterforms floating at different depths behind the hero, with dramatic shadows and pointer-driven parallax.

Package Galaxy

An infinite 3D galaxy of npm package stars clustered by ecosystem, with glowing comets streaking through the field. Seamless on every axis, fog-baked depth, soft nebula clouds in the deep background.

Screenshot Torn Into Layers

A background screenshot plus up to five overlay images, each placed on its own depth plane with X / Y / Z / scale controls. On load each layer slides in from depth with a staggered easeOutBack overshoot; hover spreads them further apart along Z.

Gravity Grid

Perspective-tilted wireframe plane warped by metallic spheres. The grid bends around each ball like a rubber sheet, and the cursor adds a fourth distortion well.

Ocean Above

Top-down stylised ocean. Wave height-field via FBM, foam crests on the sharpest gradients, sun glints across the highest peaks. Pointer pushes the water.Live customizer

Starfield Warp

Transparent backgroundBG topBG bottomNebula tintFaint cosmic dust visible behind the stars.Star colourDensity1Star size1Drift speed0.5Slow ambient flow of all stars.Lens strength1How hard the cursor warps space around it.Lens radius0.32Trail length0.7How far each star streaks toward the lens centre.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.