CrazyGLGalaxy Tunnel
A cinematic flythrough — thousands of glowing particles streaming past a virtual camera with velocity trails, bloom, and chromatic vignette.
Usage
import GalaxyTunnel from '@crazygl/hero-galaxy-tunnel';
export default function Page() {
return (
<GalaxyTunnel
heading="Lightspeed."
speed={0.65}
trailLength={1.25}
/>
);
}Customise
- Content —
contentType(heading / two-columns / custom),heading,subheading, optionalmedia. - Style colors —
backgroundColor,particleColor,accentColor(hot core),fogColor. - Field —
particleCount,speed,spread(tunnel width),particleSize,swirl. - Look —
trailLength,bloom,fogDensity,hueCycle,hotProbability.
Best for
- AI and developer-tooling launch pages that want a "lightspeed" moment
- Premium SaaS and product heroes with a sci-fi edge
- Game studios, streaming, and entertainment brands
- Event or product-drop landing pages built around motion and energy
One command, zero config.
npm install @crazygl/hero-galaxy-tunnelImport 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 GalaxyTunnel from '@crazygl/hero-galaxy-tunnel';
export default function Landing() {
return (
<GalaxyTunnel />
);
}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 GalaxyTunnel from '@crazygl/hero-galaxy-tunnel';
export default function Page() {
return (
<section>
<GalaxyTunnel
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
