GradientText
Text filled with a slow, moving brand gradient.
Palettes
Each palette blends three brand colors.
sunsetproduct context
citrusevery feature flag
freshworking together
oceanevery user journey
duskyour next idea
Slow gradient flow
The gradient pauses outside the viewport and when the tab is hidden.
Turn product data into your next idea.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Check the contrast against the real background. Pass
animate={false}where motion distracts.
API
GradientText is a site component. It accepts span element props.
GradientText
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | 'sunset' | 'citrus' | 'fresh' | 'ocean' | 'dusk' | 'sunset' | Sets the gradient colors. sunset is coral, tangerine, and yellow. citrus is tangerine, yellow, and lemon. fresh is lime, green, and teal. ocean is corn blue, blue, and cobalt. dusk is violet, purple, and coral. |
| animate | boolean | true | Enables motion while the text is visible. |
| duration | number | 12 | Sets one complete animation cycle in seconds. |