CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/liquid-metal-orb

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.

ReactWebGLImageInteractiveFont#raymarching#metal#mercury#fresnel#reflections#hdri#image-input#webgl#premium

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-liquid-metal-orb
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <LiquidMetalOrb />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <LiquidMetalOrb
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Liquid Metal Typography

Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.

Liquid Data Core

A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor.

Liquid Chrome Waves

An undulating ocean of liquid chrome. Six dispersive waves displace a mirror surface; a procedural studio HDRI stretches and warps across every crest.

Liquid Glass Badge Logo

Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior reads as frosted glass, and a 4-light Blinn-Phong studio rig sells the volume. Falls back to a rotating gradient backdrop when no image is supplied.

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.

Glass Panels

Liquid-glass panels in WebGL — half-sphere bevel, biconvex refraction (entry + exit + thickness), edge-weighted blur mix, multi-light Blinn-Phong specular, Fresnel rim, drop shadow. Drop in any background image and it gets bent through the glass.Live customizer

Liquid Metal Orb

Environment HDRIEquirectangular (2:1) image used as the reflection map. Leave empty for a procedural studio environment.Env Rotation0°Env Top (procedural)Env Bottom (procedural)Transparent backgroundDrop the backdrop so the orb composites over whatever sits behind the hero. The orb's reflections come from the env map and stay full-strength.Background ImageDrawn behind the orb. Leave empty for a procedural mesh gradient.BG Color ABG Color BBG Color CMetallic11 = pure mirror, 0 = matte tinted.Metal TintFresnel1Rim ColorSun ColorOrb Size0.95Surface Deform0.18Boil Speed1Pointer Stretch0.35Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.