Hero made by @ybouane.

@crazygl/hero-liquid-metal-orb

A floating mercury sphere ray-marched in real time, sampling a real environment image (or a procedural studio HDRI) for genuine mirror-like reflections. Drop in a photo to see it bend across the surface. Three layouts: orb centered or content beside it.

Demo

Liquid Metal Orb

Install

npm install @crazygl/hero-liquid-metal-orb

Usage

import LiquidMetalOrb from '@crazygl/hero-liquid-metal-orb';

export default function Page() {
  return (
    <LiquidMetalOrb
      layout="content-left"
      environmentImage="https://crazygl.com/samples/hdri1.avif"
      metallic={1}
      orbSize={0.95}
    />
  );
}

Customise

• Environment — environmentImage (equirectangular 2:1 reflection map; empty = procedural studio HDRI), envRotation, plus envTopColor / envBottomColor for the procedural fallback.
• Material — metallic (1 = pure mirror, 0 = matte), metalTint, fresnelStrength, rimColor, sunColor.
• Shape — orbSize, deformAmount (noise boil amplitude), boilSpeed, stretch (pointer pull).
• Background — backgroundImage or a bgColor1/2/3 procedural mesh gradient; transparent to composite the orb over the page.
• Layout — orb centered, content-left, or content-right.

Best for

• Premium product and luxury beauty brand launch pages.
• AI and developer tools wanting a living, tactile centerpiece.
• Fintech, crypto, and automotive concept reveals.
• Design-studio portfolios needing a striking hero focal point.

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.