Fancy Text

A refined text reveal animation with smooth character motion and a clean, modern visual flow.

Installation

npx shadcn@latest add @scrollxui/fancy-text

Usage

import { FancyText } from '@/components/ui/fancy-text';

<FancyText
  key={key}
  className='text-5xl font-black leading-none text-black/10 dark:text-white/10'
  fillClassName='text-black dark:text-white'
  stagger={0.06}
  duration={1.2}
  delay={0.2}
>
  Authentic.
</FancyText>

API Reference

Fancy Text

A refined text reveal animation with smooth character motion and a clean, modern visual flow.

Props

Property	Type	Default	Description
`children`	string	`required`	Text content to be animated.
`className`	string	`preset`	CSS classes applied to the base and animated text.
`fillClassName`	string	`preset`	CSS classes applied to the reveal layer.
`stagger`	number	`0.08`	Delay gap between each character animation.
`duration`	number	`1.4`	Duration of the reveal animation.
`delay`	number	`0`	Initial delay before animation starts.