Text Reveal (Blur)

className

text

splitBy

staggerDelay

delay

duration

blur

yOffset

viewportMargin

Installation

Usage

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

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

Props

Prop	Type	Default
`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`	-

Text Reveal (Blur)

Blur Text Animation

Installation

Usage

Props

On this page

Blur Text Animation