Hero made by @ybouane.

@crazygl/hero-floating-monolith

A glossy obsidian monolith floats on screen, rotating slowly, sampling a procedural HDRI for genuine mirror reflections. Emissive light strips travel down its faces in a hypnotic loop.

Demo

Floating Monolith

Install

npm install @crazygl/hero-floating-monolith

Usage

import FloatingMonolith from '@crazygl/hero-floating-monolith';

export default function Page() {
  return (
    <FloatingMonolith
      heading="Obsidian."
      layout="content-left"
      stripColor="#5cf2ff"
    />
  );
}

Customise

• Layout — layout (centered, content-left, content-right).
• Material — tint (F0 reflection colour), metallic (1 = mirror), roughness, fresnelStrength, rimColor.
• Light strips — stripColor, stripIntensity, stripCount, stripSpeed.
• Shape — boxHeight / boxWidth / boxDepth, cornerRound, rotateSpeed, pointerTilt.
• Background — transparent, bgTopColor / bgBottomColor, envSunColor / envFillColor (studio key/fill).

Best for

• Luxury product launches and premium SaaS / AI sites
• Web3 and crypto products
• Architecture and industrial-design studios
• Any page that wants one confident, expensive-feeling 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.