Preferences

Curtain Text

CURTAIN

Customize

Text

Props

Property	Type	Default	Description
`text`	string	`"CURTAIN"`	The text to display.
`direction`	"up" \| "down" \| "left" \| "right"	`"up"`	Direction chars slide OUT on hover. Reveal enters from opposite.
`resetOnLeave`	boolean	`true`	If false, the animation stays in its hovered state once triggered.
`staggerMs`	number	`60`	Delay (ms) added per character for the stagger effect.
`durationMs`	number	`400`	Duration (ms) of each character's slide transition.
`easing`	string	`"cubic-bezier(.77,0,.18,1)"`	CSS easing / timing function string for the transition.
`baseColor`	string	`"#ffffff"`	CSS color value for the resting base layer.
`activeColor`	string	`"#a889c7"`	CSS color value for the incoming reveal layer.
`fontClass`	string	`"font-black"`	Tailwind font-weight class applied to both layers. (TW variants only)
`fontWeight`	string	`"900"`	CSS font-weight applied to both layers. (CSS variants only)
`fontSize`	string	`"clamp(1.5rem, 6vw, 5rem)"`	CSS font-size value applied to both layers.
`letterSpacing`	string	`"0.1em"`	CSS letter-spacing value. (CSS variants only)
`tracking`	string	`"tracking-widest"`	Tailwind letter-spacing class. (TW variants only)
`textClassName`	string	`""`	Extra classes for the base layer. Supports Tailwind gradients/animations. (TW variants only)
`activeClassName`	string	`""`	Extra classes for the reveal layer. Falls back to textClassName if empty. (TW variants only)
`className`	string	`""`	Extra classes forwarded to the wrapper element.

text

Typestring

Default"CURTAIN"

The text to display.

direction

Type"up" | "down" | "left" | "right"

Default"up"

Direction chars slide OUT on hover. Reveal enters from opposite.

resetOnLeave

Typeboolean

Defaulttrue

If false, the animation stays in its hovered state once triggered.

staggerMs

Typenumber

Default60

Delay (ms) added per character for the stagger effect.

durationMs

Typenumber

Default400

Duration (ms) of each character's slide transition.

easing

Typestring

Default"cubic-bezier(.77,0,.18,1)"

CSS easing / timing function string for the transition.

baseColor

Typestring

Default"#ffffff"

CSS color value for the resting base layer.

activeColor

Typestring

Default"#a889c7"

CSS color value for the incoming reveal layer.

fontClass

Typestring

Default"font-black"

Tailwind font-weight class applied to both layers. (TW variants only)

fontWeight

Typestring

Default"900"

CSS font-weight applied to both layers. (CSS variants only)

fontSize

Typestring

Default"clamp(1.5rem, 6vw, 5rem)"

CSS font-size value applied to both layers.

letterSpacing

Typestring

Default"0.1em"

CSS letter-spacing value. (CSS variants only)

tracking

Typestring

Default"tracking-widest"

Tailwind letter-spacing class. (TW variants only)

textClassName

Typestring

Default""

Extra classes for the base layer. Supports Tailwind gradients/animations. (TW variants only)

activeClassName

Typestring

Default""

Extra classes for the reveal layer. Falls back to textClassName if empty. (TW variants only)

className

Typestring

Default""

Extra classes forwarded to the wrapper element.

Crafted withbyMohammad Tasin