Liquid Metal

Renders an animated liquid metal background effect. It uses shaders to create dynamic surface distortions and reflections. Use it to add a visually engaging background to UI elements.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/liquid-metal

npx layro-cli add @educlopez/liquid-metal

npx layro-cli add @educlopez/liquid-metal

bunx layro-cli add @educlopez/liquid-metal

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import {
  type CSSProperties,
  type ReactNode,
  useEffect,
  useRef,
  useState,
} from "react";

export type LiquidMetalVariant = "chrome" | "gold" | "mercury" | "oil";