CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/bubble-universe

Bubble Universe

Iridescent soap bubbles drift upward, each refracting the bg and showing a thin-film rainbow rim. The cursor wobbles nearby bubbles.

ReactWebGLImageInteractiveFont#bubbles#thin-film#iridescence#refraction#interactive#premium

Usage

import BubbleUniverse from '@crazygl/hero-bubble-universe';

export default function Page() {
  return (
    <BubbleUniverse
      heading="Bubbles."
      subheading="Iridescent soap films drift upward, each one refracting the world behind it."
      backgroundImage="https://crazygl.com/samples/nature2.avif"
      bubbleCount={14}
      filmStrength={1}
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom), heading, subheading, or custom column1/column2/content nodes.
  • Background — backgroundImage (refracted through every bubble; cover-fit), or skyTop/skyBottom for the procedural gradient fallback.
  • Bubbles — bubbleCount, filmStrength (iridescence), rimGlow, refraction, speed (drift), cursorPush.
  • Typography — headingFontFamily.

Best for

  • Premium beauty, skincare, and cosmetics launch pages.
  • Creative studio and agency landing pages.
  • Playful, family-friendly B2C product sites.
  • Music, events, and lifestyle brand pages.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-bubble-universe
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 BubbleUniverse from '@crazygl/hero-bubble-universe';

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

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

Crystal Refraction Field

Six raymarched octahedral crystals drift across the screen, refracting the background through each face with per-channel chromatic dispersion at the rim.

Iridescent Membrane

The whole background is a thin soap-bubble film — a translucent holographic membrane rendered with physically-based thin-film interference. Slow domain-warped flow drives the film thickness, so restrained pastel rainbows drift across the surface. The pointer presses on the membrane: the film stretches under the cursor and sends out concentric tension waves — single-wavefront ripples that perturb the thickness and shift the colour as they expand. Elegant, futuristic, premium.

Rain on Glass

Looking through a glass pane in the rain — droplets refract the background, slide down with gravity, and leave thin trails.

Iridescent Gradient Typography

Your headline cast in oil-slick iridescence. Real thin-film interference shifts the surface through cyan → green → gold → pink → violet → blue as you move the pointer, just like a soap bubble or a petrol puddle catching streetlight. Three.js TextGeometry + a MeshPhysicalMaterial iridescence layer, lit by a procedural HDR studio with concentrated softboxes.

Glass Cube Maze

Raymarched lattice of transparent glass cubes drifting in 3D space. The cursor orbits the camera, and chromatic dispersion paints rainbow rims along the hits.

Product in Liquid

A product floats suspended inside a thick, slowly churning liquid blob that genuinely refracts it. Tinted glass, chromatic dispersion, drifting bubbles and crawling caustics give a sensual, premium feel.Live customizer

Bubble Universe

Background imageRefracted through every bubble. Procedural gradient used if empty.Sky topSky bottomBubble count14Iridescence strength1Rim glow1Refraction1Drift speed0.5Cursor push1Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.