Multi-Color Trail Reveal
A highly advanced scrollytelling component. Sweeps a cascading wave of colors across characters, words, or lines, utilizing strict clip-path physics and DOM pinning.
Last Modified:Aug 17, 2026
Install
CLI
multi-color-trail-reveal
Or install a specific demo variant:
multi-color-trail-char-demo
Or install a specific demo variant:
multi-color-trail-word-demo
Or install a specific demo variant:
multi-color-trail-line-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The full string of text to reveal. Use \n for line breaks if splitBy="line". |
as | React.ElementType | "p" | The HTML tag to render as. |
splitBy | "char" | "word" | "line" | "char" | Granularity of the animation. |
edge | "hard" | "liquid" | "soft" | "soft" | The type of sweeping color effect. |
trailColors | string[] | ["text-primary/40", "text-primary/80"] | Array of tailwind text colors to create the wave. |
finalClassName | string | "text-foreground" | The final solid text color after the wave passes. |
trailLength | number | Dynamic | How many elements long the color wave is. |
momentum | number | boolean | 1.2 | Amount of scroll inertia. |
pin | boolean | true | Whether to pin the container in place during the scroll reveal. |
triggerStart | string | "center center" | ScrollTrigger start point. |