Hero made by @ybouane.

@crazygl/hero-floating-dust

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.

Demo

Floating Dust in Spotlight

Install

npm install @crazygl/hero-floating-dust

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

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.