ComponentsDistort
Heat haze
A mirage warps the air around the type.
Installation
$ npx shadcn@latest add @textlab/heat-hazeNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { HeatHaze } from "@/components/textlab/heat-haze/heat-haze";
<HeatHaze as="h2" text="Midday on the salt flats" />Variants
hazeboilProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "haze" | "boil" | "haze" | A gentle shimmer, or fast rising air. |
| strength | number | 6 | Distortion in px. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Travel, summer and desert themes.
- A single atmospheric headline.
Skip it
- Text people must read closely.
- Multiple instances on one page; each runs a live filter.
Accessibility and motion
Accessibility
- The distorted layer is decorative; the text is read from a hidden copy.
- Distortion is a few pixels, so the word stays legible.
Motion
- Noise rises continuously while its seed steps, so the shimmer never repeats exactly.
Reduced motion. Plain, still text.
Performance
- SVG SMIL animation on one filter; no JavaScript loop.
- Filters repaint every frame; use one per screen.