Liquid Fill

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

Usage

LiquidFill draws an outlined mark and fills it. A single drop falls in from above and lands on the floor of the shape. Liquid rises from the bottom with a surface that sloshes on two sine waves, dips where the drop splashed, and calms as it climbs. A few bubbles rise through it. When the liquid reaches the top, the outline turns the liquid color and the bubbles and surface line fade, so the mark reads as solid. Then the mark slides left and your wordmark wipes in on its right.

import { LiquidFill } from "@/components/remocn/liquid-fill";
 
export const LogoSting = () => (
  <LiquidFill liquidColor="#E5322D" outlineColor="#FFFFFF">
    <span
      style={{
        fontSize: 104,
        fontWeight: 800,
        letterSpacing: "-0.04em",
        color: "#FFFFFF",
      }}
    >
      remocn
    </span>
  </LiquidFill>
);

Pass only the wordmark as children. Without children the mark stays centered and no slide happens. The mark is 24% of the shorter side of the composition (173px at 720p).

Custom shape

shape is SVG path data drawn in a 100×100 box. The liquid is clipped to it and the outline is stroked along it, 3 units wide. Keep the shape inside about 2–98 on both axes so the stroke is not cut off, and make it one closed path, since the drop lands at the center bottom.

<LiquidFill shape="M 50 4 A 46 46 0 1 1 49.9 4 Z" liquidColor="#2F6BFF">
  <Wordmark />
</LiquidFill>

Timing

At 30 fps and speed={1}:

The docs preview runs 78 frames. speed scales the timeline.