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

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.

ReactWebGL3DImageInteractiveFont#three#3d#typography#metal#chrome#mercury#hdri#interactive#premium#shader

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

One command, zero config.

npm install @crazygl/hero-liquid-metal-typography
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 LiquidMetalTypography from '@crazygl/hero-liquid-metal-typography';

export default function Landing() {
  return (
    <LiquidMetalTypography />
  );
}
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 LiquidMetalTypography from '@crazygl/hero-liquid-metal-typography';

export default function Page() {
  return (
    <section>
      <LiquidMetalTypography
        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 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.

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.

Chrome Y2K Wordmark

A huge mirror-chrome headline floating over a retro-future neon perspective grid. Star glints travel across the letters, gradient reflections shift with the pointer, and the whole thing reads as a Y2K poster you'd screenshot for your moodboard.

Screenshot Reflected in Chrome Waves

A product screenshot floats above a slow liquid-chrome ocean. Stacked Gerstner waves stretch its reflection across the surface while specular highlights migrate with the crests; pointer movement emits single-wavefront wake rings that distort the mirror in real time.

Screenshot in a Floating Metal Frame

Your product screenshot held inside a brushed-metal frame, lit like a physical product photograph. The frame sits at an adjustable static angle, tilts with the pointer for parallax, and optionally rotates to catch studio highlights.

Particle Typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.Live customizer

Liquid Metal Typography

Extrude Depth0.22Z-extrusion of the letters. Bevel auto-scales with this so the chrome rim highlight always reads. Sweet spot 0.18-0.32.Letter Spacing0.04Extra horizontal spread per glyph. Above ~0.2 starts to read as airy / display-headline.Chrome TintBase reflectance color (F0 for metallic). A slight cool tint reads as chrome; warm tints read as gold / copper.Wobble Amount0.3Surface displacement magnitude (capped internally so even at 1 the surface never tears). Below 0.15 reads as still chrome; sweet spot 0.25-0.5.Wobble Speed1Ripple Strength0.6Ripple Radius0.3Splash Strength1Rim Light Intensity1.4Studio Reflection1.2Controls envMapIntensity on the chrome material. Drives how strongly the HDRI shows in the reflections.HDRI environmentEquirectangular image used as the chrome's IBL reflection map. Pick a panorama from the gallery (or upload your own). Empty falls back to a procedural studio HDRI.Background (image or video)Photo, JPG/PNG/WebP/AVIF, OR a video (mp4/webm/mov) — rendered cover-fit behind the chrome.Background overlaySoft wash mixed over the background image so the chrome contrasts cleanly.Overlay opacity0.3Headline FontDrives the 3D chrome wordmark. The actual .ttf is fetched and extruded — pick a heavy display face. "Inherit" uses a bundled bold sans (no network).Headline Weight700Honored for static-weight fonts; variable-only fonts parse to their default instance.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.