Fade Up Word

A text component that reveals its content with a smooth fade-up animation, activated by default when the text enters the viewport.

Open in

WelcometoDatthuUI

import { FadeUpWord } from "@/registry/datthuui/fade-up-word"

export function FadeUpWordDemo() {
  return (
    <div className="flex items-center justify-center">
      <FadeUpWord as="h1">Welcome to DatthuUI</FadeUpWord>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://ui.datthu.site/r/fade-up-word.json"

Usage

import { FadeUpWord } from "@/components/datthuui/fade-up-word"

<FadeUpWord>Welcome to DatthuUI</FadeUpWord>

Props

Prop	Type	Default	Description
`text?`	`string`	`""`	The text content to display
`className?`	`string`	`""`	Additional CSS classes to apply to the element
`as?`	`"h1" \| "h2" \| "h3" \| "h4"`	`"h2"`	add you h tag