Heat Mirage Reveal
A cinematic atmospheric reveal component. Uses an SVG displacement map to simulate atmospheric thermal distortion (heat waves). The text drifts upward and materializes as the heat dissipates into sharp focus.
Last Modified:Aug 17, 2026
Install
CLI
heat-mirage-reveal
Or install a specific demo variant:
heat-mirage-headline-demo
Or install a specific demo variant:
heat-mirage-paragraph-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" | "char" | Whether to split and animate by word or individual character. |
duration | number | 2.5 | Base duration for the text reveal. |
delay | number | 0 | Delay before the animation begins (in seconds). |
stagger | number | 0.08 | The stagger delay between each element revealing. |
startingDisplacement | number | 35 | How intense the thermal waving is at the start. |
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. |