Gradual Spacing Text

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

Open in

G

r

a

d

u

a

l

S

p

a

c

i

n

g

import { GradualSpacingText } from "@/registry/datthuui/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 "https://ui.datthu.site/r/gradual-spacing-text.json"

Usage

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

<GradualSpacingText text="Welcome to DatthuUI" 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