CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/bouncing-light

Bouncing Light

A lantern of stacked discs floating in the dark. Every few seconds a warm light bounces into it — the whole stack squashes on impact, glows cream-to-ember from within, wobbles, then fades back to charcoal. Click to bounce it yourself.

ReactCanvasInteractiveFont#light#lantern#bounce#squash-stretch#warm#canvas#minimal#dark#playful

Usage

import BouncingLight from '@crazygl/hero-bouncing-light';

export default function Page() {
  return (
    <BouncingLight
      heading="Warm by design"
      lightColor="#ffb757"
      bounceInterval={4.5}
      squashAmount={0.6}
    />
  );
}

Customise

  • Lantern — lanternSize, discCount (how many stacked slices build the beehive), centerX / centerY to place it beside your copy.
  • Bounce — autoBounce + bounceInterval for the timer, litDuration for how long it stays glowing, squashAmount for how soft the impact deformation feels. Clicking the hero always triggers a bounce.
  • Colors — lightColor (the cream core and ember edges are derived from it), baseColor for the unlit charcoal discs, glowStrength for the ambient halo, bgColor or transparent.

Best for

  • Smart-home, lighting, and energy products — the lantern reads as a device coming alive.
  • Wellness, sleep, and meditation brands wanting a warm, breathing focal object.
  • Playful SaaS landing pages that want personality without noise.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-bouncing-light
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 BouncingLight from '@crazygl/hero-bouncing-light';

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

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

Touch Dot Matrix

A flat blueprint grid of dim plus-markers on near-black. Move or tap and the markers around your touch bloom into glowing cyan dots — spreading with a soft ripple, trailing behind your path, and fading back to quiet crosses.

Ember Mesh

A warm particle-network hero. Particles drift and connect with glowing ember edges that follow the pointer.

Jumpy Text FX

Each letter bounces in independently with spring-damped physics, then idles with a subtle hover-bounce — text that feels alive.

Dither Gradient

A dark editorial hero lit by a single grainy warm gradient that ramps along one animated sine contour (no mirrored band). The contour breathes with a pseudo-random amplitude, and the giant wordmark is rendered into the same shader so it is revealed by the light — bright where the gradient washes over it, sinking into near-black shadow elsewhere. Quantised, dithered and grained for a retro/print texture.

Living Brand Seed

Your logo grows from delicate organic contour lines — like roots reaching across paper — then settles into its solid form beside the heading. Warm cream backdrop, drifting amber pollen, and a cursor-driven breeze keep the scene quietly alive.

Sculpted Light Bust

A polished marble sculpture under studio lighting. The pointer orbits a single bright key light around the bust in real 3D, raking it across the stone face for hot specular highlights, cool subsurface shadows in the recesses, and a warm rim that tracks the cursor like a real museum spotlight.Live customizer

Bouncing Light

Lantern Size0.6Diameter relative to the hero's short side.Disc Count11How many stacked slices build the lantern. 11 matches the reference beehive look.Horizontal Position0Push the lantern aside to lay heading copy opposite it.Vertical Position0Auto BounceBounce the light in on a timer. Clicking always triggers a bounce.Bounce Interval4.5sLit Duration1.8sHow long the lantern stays lit before the light fades back out.Squash & Stretch0.6How much the lantern deforms on impact. 0 = rigid, 1 = very soft.Light ColorThe warm glow. The cream core and ember edges are derived from it.Disc Color (unlit)Ambient Glow0.7The halo that blooms around the lantern while lit.BackgroundTransparent backgroundDrop the backdrop so the lantern floats over whatever sits behind the hero.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.