Blur Reveal

Renders text with a blur effect that reveals gradually. Each character and space animates with a smooth transition. Text appears on scroll or interaction. Use for engaging text reveals on websites.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/blur-reveal

npx layro-cli add @xxtomm/blur-reveal

npx layro-cli add @xxtomm/blur-reveal

bunx layro-cli add @xxtomm/blur-reveal

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"
import { AnimatePresence, motion } from "motion/react"
import type React from "react"

export interface BlurRevealProps {
  children: string
  className?: string
  delay?: number
  speedReveal?: number
  speedSegment?: number
  trigger?: boolean
  onAnimationComplete?: () => void
  onAnimationStart?: () => void
  as?: keyof React.JSX.IntrinsicElements