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

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.

ReactWebGL3DInteractiveFont#particles#typography#dust#three#depth#premium#pointer#instanced#atmosphere#interactive

Usage

import ParticleTypography from '@crazygl/hero-particle-typography';

export default function Hero() {
  return (
    <ParticleTypography
      heading="Words in the dust."
      revealWords="CREATE,DESIGN,BUILD,IMAGINE"
      count={2200}
    />
  );
}

Customise

  • Content — heading/subheading, two-columns, or custom node.
  • Particles — count, charset, glyphColor, backgroundColor, glyphSize.
  • Drift — driftSpeed (curl-noise float), depthFog (atmospheric fade).
  • Reveal — revealWords (comma-separated), revealRadius, revealStrength (0 = rings only), ringMode.
  • Backdrop — transparent.

Best for

  • Premium SaaS, AI, and creative-software landing pages.
  • Editorial and typography-led studio brands.
  • "Intelligent, crafted" products that want motion with a hint of language.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-particle-typography
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 ParticleTypography from '@crazygl/hero-particle-typography';

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

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

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.

Typography Shadows

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

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.

Magnetic Dot Cloud

Thousands of floating 3D points settle into a soft sphere of light. Wherever you point, a gravity well opens — nearby dots erupt radially outward from the sphere's centre, bulging the cloud like a living particle sculpture. A critically-damped spring eases every swell in and out; idle, the whole field drifts and turns.

Liquid Metal Typography

Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.Live customizer

Particle Typography

Character count2200How many individual characters drift in the volume. Higher reads as a denser, finer haze; the word-reveal also gets cleaner with more particles.Character setThe pool of glyphs the idle dust is drawn from. Letters + digits read as code/typography; add punctuation or swap to katakana for a different texture.Glyph colourColour of the characters. Pale on a dark backdrop is the premium default; invert both for a light-mode editorial feel.Background colourDeep backdrop the dust floats over. Near-black makes the depth fog read; raise toward navy for a softer tone.Glyph size1.1Base on-screen size of each character. Small (≈0.7) reads as fine dust; large (≈2) reads as bold drifting letters.Drift speed0.4How fast the curl-noise drift moves the dust. 0 freezes the field; 0.4 is a calm ambient float; 2 is an active swirl.Depth fog1Strength of the atmospheric fade with depth. Higher sinks far characters deeper into the backdrop for a richer sense of volume.Reveal wordsComma-separated words the dust briefly forms where the pointer dwells (and on an idle timer). Keep them short — long words spread thin across the field.Reveal radius0.8How large an area around the pointer gets pulled into a word / ring. Small = a tight cluster; large = a sweeping gather.Reveal strength0.12How strongly characters snap toward the word target. 0 disables the reveal (rings only); 2 forms crisp words almost instantly.Ring modeWhen on, the pointer also rotates nearby characters into a swirling ring (a vortex stream). Off keeps the pull purely radial.Transparent backgroundDrop the dark backdrop so the dust composes over whatever sits behind the hero on your page.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.