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.

textstring

The text to display.

Default"CURTAIN"

direction"up" | "down" | "left" | "right"

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

Default"up"

resetOnLeaveboolean

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

Defaulttrue

staggerMsnumber

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

Default60

durationMsnumber

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

Default400

easingstring

CSS easing / timing function string for the transition.

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

baseColorstring

CSS color value for the resting base layer.

Default"#ffffff"

activeColorstring

CSS color value for the incoming reveal layer.

Default"#a889c7"

fontClassstring

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

Default"font-black"

fontWeightstring

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

Default"900"

fontSizestring

CSS font-size value applied to both layers.

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

letterSpacingstring

CSS letter-spacing value. (CSS variants only)

Default"0.1em"

trackingstring

Tailwind letter-spacing class. (TW variants only)

Default"tracking-widest"

textClassNamestring

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

Default""

activeClassNamestring

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

Default""

classNamestring

Extra classes forwarded to the wrapper element.

Default""

Crafted withbyMohammad Tasin