✨ Give us a star on GitHub Help us grow by starring the project and sharing your feedback.

Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Blur In Text

Animated text component that reveals text with a blur-in effect using Framer Motion.

Blur In

import { BlurInText } from "@/registry/eldoraui/blur-in-text"

export function BlurInTextDemo() {
  return (
    <BlurInText
      className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
      text="Blur In"
    />
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/blur-in-text

Usage

import { BlurIn } from "@/components/eldoraui/blur-in-text"

<BlurIn text="Welcome to EldoraUI" className="text-white" />

Props

Prop	Type	Default	Description
`text`	`string`	`""`	The text content to display with blur-in effect
`className`	`string`	`""`	Additional CSS classes to apply to the component

Animated Shiny Button Browser

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Trusted by 1,000+ developers