CursorTrail
Animated trail effect that tracks cursor movement
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #00aaff | Color of fresh trails |
| colorB | color | #ff00aa | Color trails transition to as they fade |
| stops | gradient-stops | - | Multi-stop gradient colors (overrides Color A / Color B when set) |
| radius | range | 0.5 | Base radius of the trail stroke |
| length | range | 0.5 | How long the trail persists (in seconds) |
| shrink | range | 1 | How much the stroke tapers as it fades out (0 = no taper, 1 = full taper) |
| softness | range | 0 | Edge softness of the trail (0 = crisp paint edge, 1 = very soft) |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<CursorTrail
:radius="0.5"
/>
</Shader>