CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/volumetric-particle-fog

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.

ReactWebGL3DInteractiveFont#particles#fog#dust#volumetric#curl-noise#atmospheric#premium#pointer#three#depth

Usage

import VolumetricParticleFog from '@crazygl/hero-volumetric-particle-fog';

export default function Hero() {
  return (
    <VolumetricParticleFog
      heading="Through the mist."
      particleCount={6000}
      depthFog={1.6}
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom) with heading, subheading, column1, column2 or content.
  • Fog — particleCount, particleColor, backgroundColor, depthFog (Beer-Lambert recession), edgeDensity (push dust to the edges, keep the centre calm).
  • Drift — driftSpeed (curl-noise flow), noiseScale (eddy size), particleSize, opacity.
  • Pointer — currentStrength and currentRadius (how hard / how wide the vortex wake reaches).
  • Readability — centerCalm (radial fade behind the heading). Backdrop — transparent.

Best for

  • Premium SaaS and AI product launches that want a calm, atmospheric backdrop.
  • Luxury, fragrance and beauty brands.
  • Film and photography portfolios where the heading should sit cleanly inside the scene.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-volumetric-particle-fog
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 SoftVolumetricParticleFog from '@crazygl/hero-volumetric-particle-fog';

export default function Landing() {
  return (
    <SoftVolumetricParticleFog />
  );
}
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 SoftVolumetricParticleFog from '@crazygl/hero-volumetric-particle-fog';

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

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.

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.

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.

Data Rain 3D

Characters, digits and small symbols fall through a real 3D perspective volume. Near glyphs are large and bright, far ones shrink and dissolve into depth fog. Move the cursor and the falling stream curves around it, like rain hitting an invisible umbrella.

Aurora Borealis

Northern lights — three volumetric ribbon curtains driven by FBM noise, with parallax on pointer/scroll, additive blending, and a starfield behind.

Particle Slider

A cinematic auto-playing slider built on one shared particle engine. Each slide picks a visualization — magnetic sphere, spiral galaxy, liquid wave field, vortex portal, image-to-particle, particle text, neural cloud, cube lattice, orbital rings, terrain — and the thousands of particles MORPH from one formation into the next instead of resetting. The field reacts to the pointer (repel / attract / magnetic). Per-slide heading, subheading, CTA, text transition and layout. Dark, premium, developer-grade.Live customizer

Soft Volumetric Particle Fog

Particle count3250How many dust motes hang in the beam. 6k–11k reads richest; below 3k feels sparse, above 14k starts to fill the frame.Dust colourWarm off-white reads as backlit dust. Pale blues read as cold air; pale amber as a sunbeam.Background colourThe dark behind the dust. Near-black makes the motes glow; lift it for a hazier daylit room.Depth fog1.6How fast far motes dim and shrink into the haze (Beer-Lambert). 0 = flat field, 1 = clear volume, 2 = thick atmosphere.Edge density0.28Pushes more dust toward the edges and keeps the centre calmer. 0 = even field, 1 = gentle edge weighting, 2 = busy frame, empty middle.Drift speed0.16How fast the curl-noise carries the dust. 0 = frozen, 0.5 = gentle float, 2 = busy swirl.Turbulence scale0.46Size of the eddies in the air. Low = broad lazy currents, high = fine restless turbulence.Mote size0.8pxBase size of a near mote before depth attenuation. 1.4–2 reads as fine dust; above 3 looks like floating snow.Dust opacity0.54Per-mote alpha. Low keeps the field soft and volumetric; high makes individual motes pop.Air-current strength1.02How hard the cursor stirs the vortex. 0 = no interaction, 1 = gentle hand-through-mist swirl, 2 = strong eddy.Air-current radius1How wide the cursor's influence reaches, as a fraction of the frame. Small = a tight swirl; large = a sweeping draft.Centre calm0.94Radial fade behind the heading so the dust never fights the type. 0 = no clearing, 1 = a wide quiet pocket in the middle.Transparent backgroundDrop the dark backdrop and composite the dust over your own page background.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.