Hero made by @ybouane.

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

Demo

Liquid Metal Typography

Install

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

Usage

import LiquidMetalTypography from '@crazygl/hero-liquid-metal-typography';

export default function Page() {
  return (
    <LiquidMetalTypography
      heading="LIQUID"
      chromeTint="#eef2f6"
      wobbleAmount={0.3}
      envHdri="https://crazygl.com/samples/hdri1.jpg"
    />
  );
}

Customise

• Content — heading (only line 1 becomes 3D geometry), subheading, and an optional ctaLabel / onCTAClick.
• Geometry — extrudeDepth (letter thickness; bevel auto-scales) and letterSpacing.
• Material — chromeTint (base F0 reflectance; warm it for gold/copper), wobbleAmount and wobbleSpeed for the molten boil.
• Pointer & splash — rippleStrength / rippleRadius for the cursor ripple, splashStrength for the click wavefront.
• Lighting & environment — rimIntensity, envIntensity (HDRI reflection strength), and envHdri (the equirectangular panorama the chrome mirrors).
• Background — backgroundImage (image or video, cover-fit), backgroundOverlay and backgroundOverlayOpacity.
• Typography — headingFontFamily / headingFontWeight (the actual .ttf is fetched and extruded).

Best for

• Luxury product launches and premium SaaS / fintech landing pages.
• Fashion, beauty, and music-release sites where the headline is the centerpiece.
• Bold creative-agency and portfolio splash pages.

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.