Hero made by @ybouane.

@crazygl/hero-black-hole-lens

Gravitational lensing of a star field, dust motes, and the deep nebula behind a singularity. A Doppler-shifted accretion disk burns in the equatorial plane — bluer where it rushes toward you, redder where it falls away.

Demo

Black Hole Lens

Install

npm install @crazygl/hero-black-hole-lens

Usage

import BlackHoleLens from '@crazygl/hero-black-hole-lens';

export default function Hero() {
	return (
		<BlackHoleLens
			heading="Event horizon."
			diskTilt={0.35}
			doppler={1}
			photonRing={1.4}
		/>
	);
}

Customise

• Black hole — horizonRadius, lensStrength, diskColor / diskHotColor, blue/red Doppler tints, doppler, diskWidth, diskBrightness, diskTilt, photonRing, rotationSpeed.
• Layout — centerX slides the black hole across the frame.
• Background — bgColor and starDensity.
• Content & typography — heading / subheading / two-column / custom content, plus heading font.

Best for

• Space, astronomy, and astrophysics products
• AI / research lab landing pages
• Cinematic product launches and conference keynote sites
• Any dark, premium hero that needs a single mesmerising focal point

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.