🎉 Sora UI is now part of the shadcn/ui registry ecosystem.
Sora UI

Text Reveal (Blur)

A scroll-triggered text reveal animation with blur and opacity.

Made by Axyl
Loading...

Installation

Usage

import { BlurTextReveal } from '@/components/sora-ui/texts/text-reveal-blur';

export default function Page() {
  return <BlurTextReveal text="Hello world" />;
}

Props

PropTypeDefault
text?
string
""
as?
keyof JSX.IntrinsicElements
"p"
splitBy?
"words" | "characters"
"words"
delay?
number
0.5
duration?
number
0.5
staggerDelay?
number
0.05
blur?
number
4
yOffset?
number
0
once?
boolean
true
viewportMargin?
string
"0px 0px -10% 0px"
className?
string
-
unitClassName?
string
-

Built by Axyl. The source code will be available on GitHub soon.

Last updated: 6/7/2026