✨ 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

Gradual Spacing Text

Animated text component that reveals characters one by one with gradual spacing effect.

G

r

a

d

u

a

l

S

p

a

c

i

n

g

import { GradualSpacingText } from "@/registry/eldoraui/gradual-spacing-text"

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

Installation


pnpm dlx shadcn@latest add @eldoraui/gradual-spacing-text

Usage

import { GradualSpacingText } from "@/components/eldoraui/gradual-spacing-text"

<GradualSpacingText text="Welcome to EldoraUI" className="text-blue-600" />

Props

Prop	Type	Default	Description
`text`	`string`	`""`	The text content to display
`className`	`string`	`""`	Additional CSS classes to apply to the element

GitHub Inline Comments Grid

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