Blur Text

Text animation with a blur reveal effect.

Hello World

import BlurText from "@/components/vritti/blur-text";

export function BlurTextExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <BlurText text="Hello World" />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/blur-text"

Dependencies


pnpm add motion

Examples

Direction

direction: top

Blur from top

direction: bottom

Blur from bottom

import BlurText from "@/components/vritti/blur-text";

export function BlurTextDirectionExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">direction: top</p>
        <BlurText text="Blur from top" direction="top" className="text-2xl font-bold" />
      </div>
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">direction: bottom</p>
        <BlurText text="Blur from bottom" direction="bottom" className="text-2xl font-bold" />
      </div>
    </div>
  );
}

import BlurText from "@/components/vritti/blur-text";

export function BlurTextDirectionExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">direction: top</p>
        <BlurText text="Blur from top" direction="top" className="text-2xl font-bold" />
      </div>
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">direction: bottom</p>
        <BlurText text="Blur from bottom" direction="bottom" className="text-2xl font-bold" />
      </div>
    </div>
  );
}

Letters

animateBy: words (default)

Animate by words

animateBy: letters

Animate by letters

import BlurText from "@/components/vritti/blur-text";

export function BlurTextLettersExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">animateBy: words (default)</p>
        <BlurText text="Animate by words" animateBy="words" className="text-2xl font-bold" />
      </div>
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">animateBy: letters</p>
        <BlurText text="Animate by letters" animateBy="letters" delay={30} className="text-2xl font-bold" />
      </div>
    </div>
  );
}

import BlurText from "@/components/vritti/blur-text";

export function BlurTextLettersExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">animateBy: words (default)</p>
        <BlurText text="Animate by words" animateBy="words" className="text-2xl font-bold" />
      </div>
      <div className="text-center">
        <p className="text-xs text-muted-foreground mb-2">animateBy: letters</p>
        <BlurText text="Animate by letters" animateBy="letters" delay={30} className="text-2xl font-bold" />
      </div>
    </div>
  );
}

Props

Blur Text

Prop	Type	Default	Description
`text`	`string`	`Hello World`	Text to animate
`delay`	`number`	`200`	Delay between each word/letter in ms
`animateBy`	`select`	`words`	Animate by words or letters
`direction`	`select`	`top`	Direction of the blur animation