CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/floating-dust

Floating Dust in Spotlight

A dim cinematic room with a hard-edged spotlight cone. Thousands of dust motes drift through the beam and twinkle as they cross the light.

ReactWebGLInteractiveFont#dust#spotlight#volumetric#particles#cinematic#premium

Usage

import FloatingDust from '@crazygl/hero-floating-dust';

export default function Page() {
  return (
    <FloatingDust
      heading="In the spotlight."
      beamColor="#fff1d2"
      dustCount={1800}
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom) plus heading, subheading, column1/column2, or content.
  • Spotlight — beamColor, roomColor, fogColor, beamX, beamWidth, beamIntensity, beamSoftness, fogDensity.
  • Dust — dustCount, dustSize, driftSpeed, fall (gravity settle).
  • Typography — headingFontFamily.

Best for

  • Luxury product launches
  • Film, photography, and creative studio sites
  • Museum and gallery landing pages
  • Moody late-night SaaS or AI announcement pages
01 · Install the package

One command, zero config.

npm install @crazygl/hero-floating-dust
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 FloatingDustInSpotlight from '@crazygl/hero-floating-dust';

export default function Landing() {
  return (
    <FloatingDustInSpotlight />
  );
}
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 FloatingDustInSpotlight from '@crazygl/hero-floating-dust';

export default function Page() {
  return (
    <section>
      <FloatingDustInSpotlight
        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

Soft Volumetric Particle Fog

Thousands of tiny semi-transparent dust motes drift in depth inside a soft beam of light. Curl-noise keeps them floating naturally; depth fog reads volumetric; the pointer stirs a slow vortex that swirls particles away and leaves a fading wake, like moving a hand through mist.

Floating Movie Scene

Your product demo presented like a launch trailer: a floating screen drifts on a dark 3D stage while volumetric spotlights sweep across it, dust hangs in the beams, and a soft reflection pools on the floor. Slow cinematic camera drift; scroll pushes the camera in.

Galaxy Tunnel

A cinematic flythrough — thousands of glowing particles streaming past a virtual camera with velocity trails, bloom, and chromatic vignette.

Volumetric Beam Logo

Your logo floats inside a vertical museum-grade beam of light. Ray-marched volumetric cone reveals drifting dust around the brand, an emissive ring lights the logo, and a soft floor shadow grounds the scene. Premium SaaS / personal-branding / product-launch aesthetic.

Particle Typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.

Cloud Flythrough

Raymarched volumetric clouds. The camera flies forward through layered FBM density; sunlight scatters through every step and god-rays peek through breaks.Live customizer

Floating Dust in Spotlight

Beam colourRoom colourFog tintBeam X position0Where the spotlight enters the frame from above.Beam width0.32Cone half-angle at the floor.Beam intensity1Beam softness0.6How quickly the cone fades from bright centre to dark edge.Fog density1Mote count1800Mote size1Drift speed0.6Settle (gravity)0.3Bias the drift downward like real dust.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.