Hero made by @ybouane.

@crazygl/hero-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.

Demo

Firework Logo Reveal

Install

npm install @crazygl/hero-firework-logo-reveal

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.

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.