Scroll effect

Kiln Seven — Gradual Blur Edges

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 1/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger, lenis

Almost all of the effect is static CSS: three .edge containers are filled at load with N stacked <i> layers, each carrying its own backdrop-filter radius and its own overlapping linear-gradient mask window (5 layers top, 6 right, 6 bottom). Top and bottom bands are position: fixed at page level; the right band is absolute inside the rail wrapper. The only scroll-driven motion is the height of the fixed bottom band: two scrubbed (0.4) ScrollTriggers on .book animate the :root custom property --edge-height 8rem -> 11rem across the index's entry (top 80% -> top 20%) and 11rem -> 3rem across its exit (bottom 90% -> bottom 40%). Both are skipped entirely under prefers-reduced-motion, leaving the band at its CSS default of 8rem. Three dial buttons rebuild the bottom stack; that is a rebuild, not a transition.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev29,818 chars

# Gradual Blur Edges (Stacked Masked `backdrop-filter` Bands)

## Goal
Build a page whose edges **dissolve instead of being cut**. A progressive blur band is pi…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.