Text filled with soft color blobs that drift through each other, over a blurred glow of the same colors.
npx shadcn@latest add https://hyperblur.dev/r/text-liquid-gradient.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-liquid-gradient.tsx.
import { TextLiquidGradient } from "@/components/hyperblur/text-liquid-gradient"
<TextLiquidGradient text="Liquid light" className="font-serif text-6xl italic" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| colors | string[] | ["#2f7bff", "#8b5cf6", "#ff4fd8", "#22d3ee"] | Blob colors. Every color gets its own drifting blob. |
| speed | number | 1 | Animation speed multiplier. |
| glow | number | 0.55 | Opacity of the glow behind the text. 0 removes it. |
| glowBlur | number | 0.2 | Blur radius of the glow in em. |