proNew315 lines · framer-motion

Hero Liquid Metal

A lit metal surface, rendered live in one shader. A full-width hero backed by a hand-written WebGL fragment shader: a domain-warped noise field is lit with a finite-difference normal to read as a flowing liquid-metal surface behind the headline.

Use it for: Engine, infra or 'under the hood' pitches that want a tactile, physical-feeling backdrop built from pure math, no video asset.
Themes: Light + dark
License: Commercial use

Live

Alloy · Fluid engine

Metal that flows like water

A lit, domain-warped surface rendered live in a single fragment shader — no video, no texture, just math.

Try the engine →Read the docs

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-bleed hero backed by a raw WebGL fragment shader: a domain-warped noise
 * field is lit with a finite-difference normal to fake a liquid-metal surface
 * flowing behind the headline. Falls back to a static metallic gradient when
 * no WebGL context is available.
 */

export interface HeroLiquidMetalProps {
  eyebrow?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→The fragment shader runs a 4-octave value-noise fbm twice (domain warp) to build a flowing height field, then estimates its surface normal with a 4-tap finite-difference and lights it with a fixed directional light for a specular highlight.
→viscosity scales how strongly the second fbm pass warps by the first, from a gentle ripple to a turbulent churn; speed scales the time fed into both passes.
→tint swaps the dark/light pair the surface colour mixes between: chrome (--foreground/--muted-foreground), gold (--signal/--warn) or cool (--info/--lime).
→Colours are read from computed CSS custom properties on mount and re-read on every .dark class toggle via MutationObserver.
→Falls back to a static linear-gradient sweep if canvas.getContext("webgl") returns null.
→Render loop pauses off-screen and when the tab is hidden; prefers-reduced-motion renders a single frame instead of looping.
→On unmount: cancels the frame, disconnects observers, deletes the buffer/program/shaders and calls WEBGL_lose_context, so the context is actually released when the library page remounts many previews.

Accessibility

✓Canvas and its static fallback are aria-hidden; only the eyebrow, heading, copy and two real <a> CTAs are exposed to assistive tech.
✓A background gradient scrim keeps headline contrast high over the metal surface in both themes.
✓Headline is a single <h1>; CTAs keep visible focus rings.
✓Honours prefers-reduced-motion.