Liquid Fill Headline

component

An outlined wordmark that fills bottom-up with a sloshing two-polygon clip-path wave rebuilt per frame, settles as the amplitude decays, then takes a coral shimmer sweep. Pure CSS-clipped text (never an SVG luminance mask), controllable level, reduced-motion safe.

pnpm dlx shadcn@latest add "https://motiq.dev/r/liquid-fill-headline.json"

Sign In

Liquid Fill Headline

component

An outlined wordmark that fills bottom-up with a sloshing two-polygon clip-path wave rebuilt per frame, settles as the amplitude decays, then takes a coral shimmer sweep. Pure CSS-clipped text (never an SVG luminance mask), controllable level, reduced-motion safe.

pnpm dlx shadcn@latest add "https://motiq.dev/r/liquid-fill-headline.json"

components/motiq/liquid-fill-headline.tsx