Blur Text

Text that reveals itself with a blur effect animation.

Preview

RevealAnimation

bash

npx auralix-ui add blur-text

tsx

import { BlurText } from "@/components/ui/BlurText";

<BlurText text="Hello World" />

tsx

<BlurText text="Content appears later" delay={500} wordDelay={100} />

Name	Type	Default	Description
`text`	`string`	`-`	The text to display.
`delay`	`number`	`0`	Delay before starting animation (ms).
`wordDelay`	`number`	`50`	Delay between each word (ms).

On this page