CrazyGLBlack 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.
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 —
centerXslides the black hole across the frame. - Background —
bgColorandstarDensity. - 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
One command, zero config.
npm install @crazygl/hero-black-hole-lensImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import BlackHoleLens from '@crazygl/hero-black-hole-lens';
export default function Landing() {
return (
<BlackHoleLens />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import BlackHoleLens from '@crazygl/hero-black-hole-lens';
export default function Page() {
return (
<section>
<BlackHoleLens
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
