Appearance
Spotlight
The Spotlight text effect applies a dynamic radial gradient background mask to a text container and translates its center focus horizontally to reveal the string content.
Basic Cyan Spotlight Sweep
The color parameter sets the center bright highlight color. darkColor determines the opacity or color of the text outside the highlight area.
Searching coordinates...
Narrow High-Contrast Spotlight
Reducing the size and fadeSize properties creates a sharp, narrow spotlight cone, rendering surrounding text in high contrast.
ULTRA CONTRAST
Slow Linear Highlight Sweep
Configuring a longer duration and a linear ease generates a constant, slow highlight reveal velocity.
Slow golden sunset sweep.
Vertical Offset Positioning
The vertical coordinate of the spotlight path is adjustable via the y parameter (e.g. '80%' to focus the light towards the lower bounds of the text).
OFFSET FOCUS
Endless Sweeping Loop
Setting repeat: -1 and yoyo: true configures the spotlight center to animate back and forth endlessly.
CONTINUOUS LOOP
API Reference
javascript
import { spotlight } from 'animx/plugins/Text'
const tl = spotlight(target, config)Configuration Options
| Option | Default | Description |
|---|---|---|
color | '#ffffff' | Color of the active center highlight. |
darkColor | 'rgba(255,255,255,0.15)' | Color of the masked text. |
size | '15%' | Inner radius percentage of the highlight circle. |
fadeSize | '30%' | Outer radius percentage of the gradient decay bounds. |
y | '50%' | Vertical position coordinate in the container. |
duration | 1.5 | Highlight sweep time in seconds. |
ease | 'quad.inOut' | Easing profile applied to sweep translation. |
paused | false | Standard playback initialization lock flag. |