Kiln Seven, Gradual Blur Edges
What it does
A progressive blur band that softens the edge of a scrolling page instead of cutting it. Rather than one blurred layer behind a gradient mask — which still shows the line where blurring starts — the band is a stack of N backdrop-filter layers, each with its own blur radius and its own linear-gradient mask window, and the windows deliberately overlap so each layer fades out where the next has already faded in. A falloff curve distributes the radii (linear, smoothstep or exponential), the same builder serves top, bottom, left and right edges, and one scrubbed ScrollTrigger breathes the fixed bottom band from 3rem to 11rem as the index runs.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Gradual Blur Edges (Stacked Masked `backdrop-filter` Bands)
## Goal
Build a page whose edges **dissolve instead of being cut**. A progressive blur band is pinned to the bottom of the window and a long index scrolls under it, so the list never "ends" — it fades out of focus. A second band sits under a fixed header that rests on a full-bleed photograph, keeping the navigation legible without drawing a bar. A third sits on the right end of a horizontal rail, so the crop reads as *there is more* rather than as a bug. Each band is a **stack of N `backdrop-filter` layers whose linear-gradient mask windows deliberately overlap**, with a falloff curve distributing the radii. The only scroll-driven motion is the bottom band's height, animated through a single CSS custom property by two scrubbed ScrollTriggers.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`gsap` (npm)** with the **`ScrollTrigger`** plugin, plus **`lenis`** for smooth scroll:
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
```
Everything runs inside a `DOMContentLoaded` listener. Register the plugin, then wire Lenis the standard way:
```js
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.