Scroll Blur Footer
Six progressive backdrop-blur layers activate while scrolling and clear at rest. A fixed viewport-edge overlay with the original spring response, support for nested scrollers and reduced motion. Standalone React and Motion, no Framer runtime.
npx shadcn@latest add @compronents/scroll-blur-footerInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "bottom" | "top" | "bottom" | Viewport edge where the blur is strongest. Top reverses the masks and overlay placement. |
| height | CSSProperties["height"] | 150 | Overlay height. Numbers use pixels; CSS lengths are also accepted. |
| position | "fixed" | "absolute" | "fixed" | Fixed for a viewport edge, absolute inside a positioned container such as a bounded preview. |
| className | string | — | Overlay class. |
| style | CSSProperties | — | Additional overlay styles. Pointer events remain disabled. |
motion