Viora LogoViora UI
Login

Blur Text

Text animation with blur effects that gradually come into focus.

demo-blur-text.tsx
Loading source code...

Installation

pnpm dlx viora-ui add blur-text
npx viora-ui add blur-text
yarn viora-ui add blur-text
bunx --bun viora-ui add blur-text

Usage

import { BlurText } from "viora-ui";
import { BlurText } from "viora-ui";

export default function BlurTextDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <BlurText />
    </div>
  );
}

API Reference

BlurText

PropTypeDefaultDescription
text?string-Configuration for text.
delay?number-Configuration for delay.
className?string""Additional CSS classes for custom styling.
animateBy?'words' | 'letters'-Configuration for animateBy.
direction?'top' | 'bottom'-Configuration for direction.
threshold?number-Configuration for threshold.
rootMargin?string-Configuration for rootMargin.
animationFrom?Record<string, string | number>-Configuration for animationFrom.
animationTo?Array<Record<string, string | number>>-Configuration for animationTo.
easing?(t: number) => number-Configuration for easing.
onAnimationComplete?() => void-Callback fired on animationcomplete event.
stepDuration?number-Configuration for stepDuration.

Built by Otis

Last updated: 9/13/2026