Menu
Spotlight Text
SPOTLIGHT
Customize
Text
Char Delay (s)0.09
Duration (s)0.25
Dim Opacity0.01
Min Font Size (px)0
Max Font Size (px)0
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | "SPOTLIGHT" | Display text to animate. |
charDelay | number | 0.09 | Stagger (seconds) between each character reveal. |
duration | number | 0.25 | Full reveal duration (seconds) for each character. |
repeat | boolean | false | Loop the animation continuously. |
dimOpacity | number | 0.08 | Base opacity of characters before the spotlight reveals them. |
ease | string | "power2.out" | GSAP ease used for the reveal flash. See EASE_OPTIONS. |
baseColor | string | "#8a8a86" | Character color at rest / dim state. |
spotColor | string | "#e24b4a" | Character color at peak spotlight brightness. |
minFontSize | number | 16 | Smallest font size (px) the text will shrink to on narrow containers. |
maxFontSize | number | 96 | Largest font size (px), used as the natural/base size. |
className | string | "" | Extra classes applied to the root wrapper div. |
textTypestring
Default
"SPOTLIGHT"Display text to animate.
charDelayTypenumber
Default
0.09Stagger (seconds) between each character reveal.
durationTypenumber
Default
0.25Full reveal duration (seconds) for each character.
repeatTypeboolean
Default
falseLoop the animation continuously.
dimOpacityTypenumber
Default
0.08Base opacity of characters before the spotlight reveals them.
easeTypestring
Default
"power2.out"GSAP ease used for the reveal flash. See EASE_OPTIONS.
baseColorTypestring
Default
"#8a8a86"Character color at rest / dim state.
spotColorTypestring
Default
"#e24b4a"Character color at peak spotlight brightness.
minFontSizeTypenumber
Default
16Smallest font size (px) the text will shrink to on narrow containers.
maxFontSizeTypenumber
Default
96Largest font size (px), used as the natural/base size.
classNameTypestring
Default
""Extra classes applied to the root wrapper div.
Dependencies
gsap 3.15.0
Crafted withbyMohammad Tasin