CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/firework-logo-reveal

Firework Logo Reveal

The hero starts dark. A burst of particles explodes outward, then curves back inward and assembles into your logo. Three-phase lifecycle, additive bloom, short trails, subtle camera shake during the burst. Once the logo is assembled, move the cursor across the hero to spawn micro-firework bursts that fan out and fade. The default still capture lands mid-re-assembly — the most photogenic frame.

ReactCanvasImageInteractiveFont#particle#firework#logo#burst#bloom#additive#image-input#canvas#energetic

Usage

import FireworkLogoReveal from '@crazygl/hero-firework-logo-reveal';

export default function Hero() {
  return (
    <FireworkLogoReveal
      logo="/brand/logo.png"
      heading="Lights up."
      subheading="Sparks burst, curve back, and snap into your mark."
      haloHex="#ff7a3a"
      accentHex="#5dd2ff"
    />
  );
}

Customise

  • Logo — logo (transparent PNG/SVG alpha mask becomes the target shape), logoZoom, logoCenterX/Y, sampleDensity.
  • Particles — particleCount, particleSize, haloSize, tailLength, coreHex, haloHex, accentHex.
  • Lifecycle — burstDuration, settleDuration, burstStrength, burstDrag, attractStrength, phaseShift, loopCycle, loopInterval.
  • Interaction — pointerBurstRadius, pointerBurstCount, pointerBurstColor.
  • Stage — transparent, bgTopHex, bgBotHex, cameraShake.

Best for

  • Product launch days and big reveal moments.
  • Conference, event, and entertainment sites.
  • Celebratory campaign and brand hero sections.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-firework-logo-reveal
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 FireworkLogoReveal from '@crazygl/hero-firework-logo-reveal';

export default function Landing() {
  return (
    <FireworkLogoReveal />
  );
}
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 FireworkLogoReveal from '@crazygl/hero-firework-logo-reveal';

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

Magnetic Logo Field

An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.

Logo Sand Formation

Thousands of glowing sand grains drift on a warm desert current and re-form the supplied logo. Pointer movement scatters them in a Gaussian shockwave; springs and damping pull each grain back into the silhouette.

Floating Neon Logo Sign

The logo becomes a 3D neon tube sign floating in a dark cinematic scene. Segments flicker on during boot, then settle into a gentle pulse. Smoke drifts behind; hovering brightens the tubes.

Glass Tile Logo

The logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load. Hover separates the tiles slightly. Built with Three.js InstancedMesh + HDRI reflections + soft contact shadows.

Pixel to 3D Reveal

An image is sampled into a cloud of chunky pixel cubes scattered through 3D space. They fly to their home positions and refine from low-res chunks to crisp pixels — a pixel mosaic that assembles itself in front of a glowing grid floor. Three.js InstancedMesh, image-as-particle-source.

Logo Inside a Crystal

A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into rainbow seams; caustic highlights pool on the virtual floor; soft bloom on the inner emission.Live customizer

Firework Logo Reveal

Logo (PNG/SVG)Transparent PNG or SVG. The alpha mask becomes the target shape — particles assemble into the silhouette.Logo size0.55Fraction of the smaller viewport axis the longer logo edge spans.Horizontal position0.22Shift logo left or right so the heading sits opposite. 0 = centred.Vertical position0Sample density1.6How densely the logo alpha mask is sampled into target positions. Higher = more particles required to fill the shape.Particle count1800Total particles. 1500-2200 reads as a rich burst without choking software-WebGL.Particle size1Base radius multiplier for the hot core.Halo size1.4Multiplier for the soft additive halo around each core.Tail length0.55Length of the velocity-aligned short trail behind each particle, scaled to current speed.Core colorHot-core colour — the bright centre of every particle and the densest part of the bloom.Halo colorOuter halo / glow colour. Default warm orange = traditional firework sparkle.Accent colorCool accent applied to a fraction of particles, giving the burst chromatic variation.Burst duration1.4sHow long the outward-explode phase lasts before the attractor turns on.Settle duration1.6sHow long particles take to curve back and anchor at their targets.Burst strength1Magnitude of the initial outward velocity. 0.8-1.2 reads as fireworks; >1.5 looks like a supernova.Burst drag1.5Exponential drag during the burst phase. Higher drag = particles slow faster, settle closer in.Attractor strength1Spring constant of the attractor pulling each particle to its target during settle/anchor.Capture phase shift1.7sSeconds to offset the cycle's start by. Positive values land the all-defaults capture mid-re-assembly — the most photogenic frame.Loop foreverWhen ON, the burst/settle cycle repeats. When OFF, the particles burst once on mount and stay assembled.Loop interval7sTime between cycle restarts when looping. Includes a hold phase at the assembled logo before the next burst.Burst spawn radius60pxEach pointer micro-burst spawns at a random offset within this radius of the cursor. Wider = looser sparkle cloud, tighter = a concentrated cursor sparkle.Burst particle count12Sparkles per micro-burst. 0 disables the pointer effect entirely. 8-15 reads as a believable cursor-sparkle; 25+ is a sparkle storm.Burst colorHot-core colour of the cursor sparkles. The brightest centre is always white; this tints the halo and the bulk of each spark.Transparent backgroundDrop the dark backdrop so the hero can sit on top of any page background.Background topBackground bottomCamera shake0.6Sin-driven offset of the canvas during the burst phase. Decays to zero by settle. 0 = perfectly still.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.