CrazyGLTypographic Black Hole
A headline warped by a glowing gravitational center. The cursor moves the singularity — letters bend, chromatic-aberrate, and pour toward the event horizon while a starfield lenses behind it.
Usage
import TypographicBlackHole from '@crazygl/hero-typographic-black-hole';
export default function Hero() {
return (
<TypographicBlackHole
heading="EVENT HORIZON"
gravityStrength={1}
swirl={0.95}
coreColor="#ffd680"
/>
);
}Customise
- Content —
heading(warped on the canvas),subheading,ctaLabel,onCTAClick. - Black hole —
gravityStrength,gravityRadius,eventHorizon,swirl,chromaticAberration. - Core glow —
coreColor,haloColor,coreBrightness. - Text —
textColor,textGlow. - Starfield —
starDensity,starBrightness. - Pointer —
pointerInfluence,driftSpeed. Typography —headingFontFamily,headingFontWeight,letterSpacing. Background —bgColor.
Notable controls
- Gravity strength (
gravityStrength, 0–2) — how hard the lens pulls. Around 0.8–1.3 reads as a physical bend; past 1.5 it turns deliberately exaggerated. - Accretion swirl (
swirl, 0–2.5) — how much the headline winds tangentially as it falls in. The default 0.95 shows a clear orbiting arc; near 0.65 keeps the word most readable; above 1.5 winds it into a vortex. - Chromatic aberration (
chromaticAberration, 0–1) — the per-channel color split near the core. Sweet spot is 0.3–0.7; above 0.8 it reads as overtly fake. - Event horizon (
eventHorizon, 0–0.3) — radius of the black sphere that swallows text entirely. Push above 0.12 for a heavier, blacker singularity. - Pointer influence (
pointerInfluence, 0–1) — drop to 0 for a static centered subject that drifts on its own; raise toward 1 for full cursor follow.
One command, zero config.
npm install @crazygl/hero-typographic-black-holeImport 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 TypographicBlackHole from '@crazygl/hero-typographic-black-hole';
export default function Landing() {
return (
<TypographicBlackHole />
);
}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 TypographicBlackHole from '@crazygl/hero-typographic-black-hole';
export default function Page() {
return (
<section>
<TypographicBlackHole
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
