A real black hole behind your hero: light bends around it, the accretion disk spins and the camera leans toward the cursor. Headline, subtitle and two buttons included. Plain WebGL, no dependencies.
Black Hole Hero V2 is the enhanced version of Black Hole Hero. Instead of a 2D starfield, it ray-traces a real black hole live in the browser. Every pixel follows a bent light path, so the stars behind it are lensed, the far side of the accretion disk wraps over the shadow and a photon ring glows at the critical radius. The disk winds faster near the centre, and the side turning toward you is brighter and bluer, just like the real thing. Use the full hero with your headline, subtitle and two buttons, or use the BlackHole background on its own with any content you like. Tune brightness, speed, size and position with props, and pick a quality level for slower devices. It pauses when off screen, shows a still frame for visitors who prefer reduced motion, and falls back to a CSS version where WebGL isn't available.
After you buy, the CLI signs you in and writes the files into your project through the shadcn CLI, ready to edit like your own code. My Library has the same source to copy by hand.
# sign in once (opens your browser) $ npx indevdigital login # add it to this project $ npx indevdigital add black-hole-hero-v2
import { BlackHoleHeroV2 } from "@/components/black-hole-hero-v2/black-hole-hero-v2";
export default function Page() {
return (
<BlackHoleHeroV2
title="Nothing escapes a good first impression"
subtitle="A real-time, ray-traced black hole for your hero."
primaryCtaLabel="Start building"
primaryCtaHref="/signup"
secondaryCtaLabel="Read the docs"
secondaryCtaHref="/docs"
/>
);
}V2 ray-traces a real black hole in WebGL: lensed stars, a spinning accretion disk with beaming and a photon ring, and a camera that follows the cursor. V1 is a lighter 2D starfield with a CSS ring. Same prop names, so moving up is a one-line import change.
No. It uses plain WebGL that every modern browser has, so the install adds nothing to your dependencies.
Yes. It is a React client component, so it works in Vite, Remix or any React app with Tailwind and the shadcn @/lib/utils helper.
Yes. Import BlackHole from the same folder and pass your content as children. It sits on top, and shadcn colour tokens inside use the dark theme so text stays readable.
Yes. offsetY moves it up or down (the hero lifts it by 0.2), offsetX moves it sideways and scale changes its size.
quality="auto" uses fewer ray-march steps and a lower pixel ratio on small screens, and it stops rendering when scrolled off screen. Set quality="low" for older devices.
With reduced motion it shows one still frame. Without WebGL it shows a CSS version of the black hole instead.
Reviews are checked before they go live. Ratings in search results come from approved reviews only.
Loading reviews…
npx indevdigital add black-hole-hero-v2
Move the hole with offsetX and your own layout takes the other half.