Fancy Text

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

Authentic.Authentic.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/fancy-text.json 

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

PropertyTypeDefaultDescription
childrenstringrequired
Text content to be animated.
classNamestringpreset
CSS classes applied to the base and animated text.
fillClassNamestringpreset
CSS classes applied to the reveal layer.
staggernumber0.08
Delay gap between each character animation.
durationnumber1.4
Duration of the reveal animation.
delaynumber0
Initial delay before animation starts.

Built withby Ahdeetai.