Liquid metal shader for React

A drop of liquid chrome drawn live by a WebGL shader. No three.js.

Get the code · $3React · Tailwind · TypeScript
Liquid Metal Blob, preview

Use it in Next.js

"use client";
import { LiquidMetal } from "@/components/LiquidMetal";

export default function Hero() {
  return (
    <div className="relative h-[480px]">
      <LiquidMetal showChips={false} label={null} maxDpr={1.5} />
    </div>
  );
}

Install

  1. Copy from the zipPut react/src/components into src/, then no extra packages.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

tints
metal colours
showChips
material picker
maxDpr
quality vs GPU cost
onTintChange
picked tint

Questions

Does the shader work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Is it heavy?

It's one WebGL canvas. Lower maxDpr on weaker phones.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.