Smoky Text
0
Used by 0Smoky Text
Animate text with realistic smoke diffusion, customizable reveal directions, trigger modes, and smooth character-based transitions.
KEY FEATURES
- — Realistic smoke diffusion animation
- — Character-by-character text reveal
- — Single line, multi-line, and in-place modes
- — Top-left and bottom-left reveal directions
- — Default, hover, and scroll triggers
- — Adjustable smoke intensity
- — Custom transition easing and timing
- — Responsive typography support
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
text
string
Smoke\nand\nMirrors
Text prop.
font
font
{"fontFamily":"Inter","variant":"Regular","fontWeight":400,"fontSize":50,"lineHeight":"1.5em","letterSpacing":"0em","textAlign":"center"}
Font prop.
appearTrigger
enum
default
Appear prop.
scrollConfig
object
{"position":"bottom","distance":20}
Scroll prop.
appearTransition
transition
{"type":"tween","stiffness":800,"damping":60,"mass":1,"ease":"easeOut","duration":2,"delay":0}
Appear Transition prop.
intensity
number
10
Intensity prop.
position
enum
bottomLeft
Position prop.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
animationMode
enum
singleLine
Mode prop.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
whitesmoke
Color prop.
