Hero made by @ybouane.

@crazygl/hero-glass-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.

Demo

Glass Cube Maze

Install

npm install @crazygl/hero-glass-cube-maze

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), or skyTop / skyBottom for 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 — embedContent3D rasterises 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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.