Liquid Word

One word melts into a glowing gradient pool, then a new word rises out of it and sets.

Installation

$ pnpm dlx shadcn@latest add @remocn/liquid-word

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LiquidWord } from "@/components/remocn/liquid-word";
 
const LiquidWordScene = () => <LiquidWord from="idea" to="product" />;
 
export const RemotionRoot = () => (
  <Composition
    id="LiquidWord"
    component={LiquidWordScene}
    durationInFrames={145}
    fps={30}
    width={1280}
    height={720}
  />
);

The from word holds, then melts under a swirl gradient, sags, drips and slumps into one pool. The to word rises out of the pool letter by letter from the center, and the liquid sets into solid ink. Pass from and to for your own words. It takes a theme prop and ships light and dark.

Props5

Prop	Type	Default
from	string"draft" The word that melts.
to	string"shipped" The word that re-forms out of the pool, crisp and kerned.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.
speed	number1 Playback speed multiplier for the whole timeline.
accent	string— Kept for API parity; the liquid uses its own gradient palette.

fromstring
The word that melts.
Default"draft"
tostring
The word that re-forms out of the pool, crisp and kerned.
Default"shipped"
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1
accentstring
Kept for API parity; the liquid uses its own gradient palette.