Liquid card

Four status cards with an icon as a glass container: liquid pours in, waves roll and bubbles rise. Pick a card in Customize to copy just that one.

Cards, drag, Motion + GSAP

Install

npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/liquid-card.tsx https://motion-brew.com/r/liquid-card.tsx

One self contained file for React and Tailwind CSS: liquid-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { LiquidCard, LiquidCarousel } from "@/components/liquid-card";

export default function Status() {
  return (
    <div className="flex gap-4">
      <LiquidCard icon="bolt" value={85} />
      <LiquidCard
        icon="cloud"
        value={62}
        message={["Room to grow,", "38 GB free"]}
      />
      <LiquidCard icon="shield" theme="dark" />
    </div>
  );
}

Props

Prop	Type	Default	Description
icon	"bolt" \	"cloud" \	"shield" \	"drop"	"bolt"	Which icon holds the liquid
value	number	per icon	Fill level, 0 to 100
label	string	per icon	Small label at the top
caption	string	per icon	Word under the number
message	[string, string]	per icon	Two line message at the bottom
color	string	per icon	Liquid colour
theme	"light" \	"dark"	"light"	White card or dark
interactive	boolean	true	Let people drag the level
onChange	(value) => void		Called when the level is set
className	string		Placement

More cards

Team member card: A team member card with pixels burning up the photo like fire.
Roadmap card: A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.
Contour feature card: A browser window in front of a live topographic map.
Live gradient card: A metric on a drifting mesh gradient, with a dot matrix number that morphs dot by dot.

All animated react card components