CrazyGLGlass Cube Maze
Raymarched lattice of transparent glass cubes drifting in 3D space. The cursor orbits the camera, and chromatic dispersion paints rainbow rims along the hits.
Usage
import GlassCubeMaze from '@crazygl/hero-glass-cube-maze';
export default function Page() {
return (
<GlassCubeMaze
backgroundImage="/your-scene.jpg"
chromatic={0.25}
spacing={2.2}
/>
);
}Customise
- Background —
backgroundImage(refracted through every cube), orskyTop/skyBottomfor a procedural sky when empty. - Cubes —
tint,rimColor,cubeSize,spacing,cornerRound,refraction,chromatic(dispersion),fresnel,rotateSpeed,randomness(0 = strict grid → 1 = scattered cloud). - Camera —
centerX,centerY,orbitStrength(pointer swing),fov. - 3D content —
embedContent3Drasterises the heading onto a billboard plane refracted by the cubes.
Best for
- Premium SaaS launch pages and product reveals.
- Design / creative studio sites and high-end agency portfolios.
- Optics, jewellery, and luxury product landing pages that want a tactile, optical centerpiece.
One command, zero config.
npm install @crazygl/hero-glass-cube-mazeImport 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 GlassCubeMaze from '@crazygl/hero-glass-cube-maze';
export default function Landing() {
return (
<GlassCubeMaze />
);
}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 GlassCubeMaze from '@crazygl/hero-glass-cube-maze';
export default function Page() {
return (
<section>
<GlassCubeMaze
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
