Dynamic liquid text effects with GSAP animations.
Installation
Usage
import { LiquidText } from "viora-ui";import { LiquidText } from "viora-ui";
export default function LiquidTextDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<LiquidText />
</div>
);
}API Reference
LiquidText
| Prop | Type | Default | Description |
|---|---|---|---|
| className? | string | "" | Additional CSS classes for custom styling. |
| text? | string | - | Configuration for text. |
| fontSize? | number | - | Configuration for fontSize. |
| color? | string | - | Configuration for color. |
| viscosity? | number | - | Configuration for viscosity. |
| waveIntensity? | number | - | Configuration for waveIntensity. |
| autoAnimate? | boolean | false | Configuration for autoAnimate. |
Built by Otis
Last updated: 9/13/2026