Hero made by @ybouane.

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

Demo

Iridescent Membrane

Install

npm install @crazygl/hero-iridescent-membrane

Usage

import IridescentMembrane from '@crazygl/hero-iridescent-membrane';

export default function Hero() {
	return (
		<IridescentMembrane
			heading="A surface of light."
			iridescence={2}
			filmThickness={1.2}
		/>
	);
}

Customise

• Membrane — filmThickness (interference orders), iridescence (colour saturation), baseTint, flowSpeed, scale of the flow field.
• Ripple — rippleStrength, rippleSpeed, rippleWidth (crispness of each tension ring).
• Readability — textShade, a soft dark vignette behind the copy.
• Backdrop — transparent to composite the film over an existing page background.

Best for

• Premium SaaS and AI product launches.
• Beauty, fragrance, and luxury / fashion brand sites.
• Design studios wanting a calm, futuristic surface rather than a busy scene.

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.