Progressive Blur
Content passing an edge softens into a blur that strengthens towards the edge, from stacked backdrop-filter layers that each cover a slice of the band. Fixed to the screen for a page, or inside any scrolling container.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| edge | "top" | "bottom" | "both" | "both" | Which edge, or both, the content blurs towards. |
| height | number | 96 | How deep the band is, in pixels. |
| strength | number | 1 | Scales every layer's blur. |
| fixed | boolean | false | Fixed to the screen, for a page's scroll; otherwise it fills the edges of its positioned container. |
| className | string | — | Classes for the root element. |