Hero made by @ybouane.

@crazygl/hero-bubble-universe

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

Demo

Bubble Universe

Install

npm install @crazygl/hero-bubble-universe

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.

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.