Shadcn.io is not affiliated with official shadcn/ui
Liquid Text
Letters that merge and stretch into each other through an SVG goo filter with continuous per-character horizontal oscillation for React applications.
Liquid Text preview
Type that behaves like a liquid. An SVG feGaussianBlur + feColorMatrix filter is applied to the wrapper so neighbouring glyphs blob into each other when they touch — meanwhile every character oscillates horizontally at a slightly different phase, so letters constantly stretch toward and away from their neighbours like droplets on glass. The result is a perpetual fluid distortion that never repeats exactly. Built with Motion's useTime + useTransform for analytic motion, and a uniquely-keyed SVG filter so multiple instances on the same page never collide. Drop it into a hero, a section title, or anywhere you want type that looks alive in a way nothing else does.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the liquid-text text effect into my projectRelated Components
Wave Text
Continuous traveling sine wave across characters
Blur Text
Text animation from blur to focus
Fuzzy Text
Soft blur transitions with particle-like effects
Text Pressure
Variable font weight responding to cursor proximity
Variable Proximity
Variable font weight responding to cursor position
Shimmering Text
Wave-like color shimmer across text
FAQ
Was this page helpful?
Sign in to leave feedback.