KQ-1396 · HAZE/FADE
Haze Fade
A fade-in wrapper whose content clears like haze lifting: three stacked backdrop-blur sheets, each masked a little ahead of the last, make a soft blur ramp that travels across on the move ease, while the content's own mask carries the fade and a brightness lift with it, so a headline sharpens letter by letter from one side to the other. As the front sets off the content rises a few pixels into place on springs.drift, and once clear the sheets and the mask are gone. The content is rendered once and stays selectable and interactive throughout; keyboard focus moving into hazed content clears it at once.
Coldbrook · Field notes · No. 12
The valley clears by nine.
Mist sits in the low fields until the sun is over the ridge. Walk early and the path is yours.
06:40 · 4°09:00 · 11°Wind NW 6
hazed · clearing to the right · haze 0.6 · 1400 ms
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/haze-fade
Props
- children
- ReactNode
- default —
- The content that clears. Rendered once, live and interactive throughout.
- as
- "div" | "section" | "article" | "header" | "footer" | "aside" | "figure" | "blockquote" | "p" | "h1" | "h2" | "h3"
- default "div"
- The element that wraps the content.
- direction
- "right" | "left" | "up" | "down"
- default "right"
- Which way the clearing front travels.
- haze
- number
- default 0.6
- How thick the haze is, 0 to 1: blur, brightness lift and fade all scale with it.
- duration
- number
- default 1400
- How long the front takes to cross, ms.
- softness
- number
- default 0.4
- Width of the soft front as a share of the travel, 0 to 1.
- blur
- number
- default 14
- Blur at full haze, px.
- brightness
- number
- default 1.25
- Brightness at full haze: hazed ink glows a little, the way mist holds light.
- fade
- number
- default 0.7
- How far the hazed content fades toward the page at full haze, 0 to 1.
- drift
- number
- default 4
- How far the content rises into place as it clears, px; 0 keeps it still.
- trigger
- "inView" | "mount" | "manual"
- default "inView"
- What starts the clearing.
- play
- boolean
- default false
- With trigger "manual": true clears, false lets the haze roll back in.
- once
- boolean
- default true
- True: clears once. False: leaving view brings the haze back for the next visit.
- amount
- number
- default 0.3
- Share of the content visible before an inView clearing starts, 0 to 1.
- delay
- number
- default 0
- Wait before the front sets off, ms.
- replayKey
- string | number
- default —
- Change it to haze the content and clear it again.
- onComplete
- () => void
- default —
- The content is clear.
- className
- string
- default —
- Classes for the wrapper; lay out the content here. Other HTML attributes (aria-*, id, handlers) pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The content that clears. Rendered once, live and interactive throughout. |
| as | "div" | "section" | "article" | "header" | "footer" | "aside" | "figure" | "blockquote" | "p" | "h1" | "h2" | "h3" | "div" | The element that wraps the content. |
| direction | "right" | "left" | "up" | "down" | "right" | Which way the clearing front travels. |
| haze | number | 0.6 | How thick the haze is, 0 to 1: blur, brightness lift and fade all scale with it. |
| duration | number | 1400 | How long the front takes to cross, ms. |
| softness | number | 0.4 | Width of the soft front as a share of the travel, 0 to 1. |
| blur | number | 14 | Blur at full haze, px. |
| brightness | number | 1.25 | Brightness at full haze: hazed ink glows a little, the way mist holds light. |
| fade | number | 0.7 | How far the hazed content fades toward the page at full haze, 0 to 1. |
| drift | number | 4 | How far the content rises into place as it clears, px; 0 keeps it still. |
| trigger | "inView" | "mount" | "manual" | "inView" | What starts the clearing. |
| play | boolean | false | With trigger "manual": true clears, false lets the haze roll back in. |
| once | boolean | true | True: clears once. False: leaving view brings the haze back for the next visit. |
| amount | number | 0.3 | Share of the content visible before an inView clearing starts, 0 to 1. |
| delay | number | 0 | Wait before the front sets off, ms. |
| replayKey | string | number | — | Change it to haze the content and clear it again. |
| onComplete | () => void | — | The content is clear. |
| className | string | — | Classes for the wrapper; lay out the content here. Other HTML attributes (aria-*, id, handlers) pass through. |