Wind Shear Reveal
A high-velocity text reveal component. Elements slide in while leaning heavily against simulated wind resistance, utilizing elastic friction to snap forward into their resting positions.
Last Modified:Aug 17, 2026
Install
CLI
wind-shear-reveal
Or install a specific demo variant:
wind-shear-char-demo
Or install a specific demo variant:
wind-shear-word-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. |
as | React.ElementType | "h1" | The HTML tag to render as. |
splitBy | "word" | "char" | "word" | Whether to split and animate by word or individual character. |
startX | string | number | "1.5em" | The starting horizontal offset. |
startingSkew | number | -30 | The angle of aerodynamic drag. Negative values lean left. |
duration | number | 1.2 | The duration of the reveal for each element. |
delay | number | 0 | Delay before the animation begins (in seconds). |
stagger | number | 0.05 | Quick staggers emphasize speed. |
ease | string | "back.out(1.2)" | GSAP easing string to control the friction mechanics. |
viewportOnce | boolean | true | If true, plays once. If false, seamlessly reverses on scroll away. |
triggerStart | string | "top 85%" | Viewport threshold for when the animation should start. |