Search documentation

Search components and pages

Blur In Text

Text fades in from blur.

Blur to sharp

Installation

Requires MotionProvider and gsap. Add the blur in text component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/blur-in-text.json

Usage

import { BlurInText } from "@/void/text/blur-in-text"

<BlurInText duration={1.2} className="text-2xl font-bold">
  Sharp and clear.
</BlurInText>

Examples

Default

Blur to sharp

Code

import { BlurInText } from "@/void/text/blur-in-text"

<BlurInText duration={1.2} className="text-2xl font-bold">
  Sharp and clear.
</BlurInText>