CrazyGLPackage Galaxy
An infinite 3D galaxy of npm package stars clustered by ecosystem, with glowing comets streaking through the field. Seamless on every axis, fog-baked depth, soft nebula clouds in the deep background.
Usage
import PackageGalaxy from '@crazygl/hero-package-galaxy';
export default function Page() {
return (
<PackageGalaxy
heading="Every package, mapped."
starCount={1600}
labelNames={'react\nthree\nvite\nnext'}
/>
);
}Customise
- Galaxy —
starCount,clusterCount,starColor,accentColor,clusterTintStrength,starScale. - Atmosphere —
fogIntensity(depth fade),nebulaIntensity. - Motion —
flightSpeed,cameraDriftSpeed(weave),pointerParallax,twinkleStrength. - Comets —
cometCount,cometSpeed,cometColor,cometTrailLength. - Labels —
showLabels,labelSample,labelNames,labelStyle, plus font/colour controls. - Background —
transparentBackground,bgTop/bgBottom.
Best for
- Developer tools, package registries, and SBOM / supply-chain platforms
- Open-source ecosystem and dependency-mapping products
- Dev-platform and infrastructure launch pages that want a vast, exploratory feel
- AI / data products needing an "endless universe of nodes" backdrop
One command, zero config.
npm install @crazygl/hero-package-galaxyImport 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 PackageGalaxy from '@crazygl/hero-package-galaxy';
export default function Landing() {
return (
<PackageGalaxy />
);
}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 PackageGalaxy from '@crazygl/hero-package-galaxy';
export default function Page() {
return (
<section>
<PackageGalaxy
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
