Hero made by @ybouane.

@crazygl/hero-sphere-field

Many soft translucent gradient spheres drift in 3-D depth, blending into one another like abstract glass bubbles. Depth-of-field softens the back layers.

Demo

Sphere Field

Install

npm install @crazygl/hero-sphere-field

Usage

import SphereField from '@crazygl/hero-sphere-field';

export default function Hero() {
	return (
		<SphereField
			heading="Soft glass."
			count={14}
			dofStrength={0.7}
		/>
	);
}

Customise

• Background — bgTop / bgBottom: the vertical gradient behind the field.
• Spheres — count (4–24), tintA / tintB / tintC: the three colour stops every sphere samples between.
• Softness — how diffuse every sphere edge is, regardless of depth.
• Depth-of-field (dofStrength) — how aggressively the back layers blur out.
• Drift speed (speed) — slow ambient bob of the field.
• Typography — headingFontFamily for the overlaid copy.

Best for

• AI / machine-learning product sites that want a soft, abstract backdrop.
• Music streaming, audio and wellness / meditation brands.
• Design-tool and creative landing pages where copy floats over ambient colour.

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.