← Living Brand index

The Living Styleguide

Scroll Blur · content dissolves into the header, it doesn't clip
Scroll
01

Dissolve, don't clip

A flat blurred header draws one hard seam where sharp content suddenly becomes blurred content. Stack four layers of decreasing blur and increasing mask reach, and the seam spreads into a gradient the eye never catches.
Agent Design Notes

Name the operation, not the intent. "Handle the files" gives the agent room to invent scope. "Move src to dst, dry run first" gives it a verb, a target, and a done-condition.

A silent failure is worse than a loud one. A model that refuses the task tells you something is wrong. A model that fills a gap with a plausible guess passes review unnoticed.

Context has a cost curve, not just a ceiling. Loading more isn't free below the limit — retrieval quality degrades well before the token budget runs out.

The closed door is still a door. A collapsed accordion isn't hidden content, it's a visible invitation. Collapse only what the reader can safely skip.

Wrong-way, right-way pairs teach faster alone. The two must be the same task — the only variable is the approach — or the comparison teaches nothing.

A stepper answers "where am I," not "what's next." Use it for a fixed sequence with a known length. A journey worth feeling gets the trail instead.

Scroll to the bottom of this frame and back up — the blur builds and clears across four layers, not one flat cut.

↑ scroll inside the frame ↑
Scroll blur · 4 layers

Dissolve under a sticky header

Four absolutely-positioned divs, each position:sticky at the header's own offset. Each pairs a backdrop-filter blur with a mask-image gradient cutoff.

Mechanism: layer 1 is the strongest blur (8px) but fades fastest — transparent by 25% down. Layer 4 is the weakest blur (1px) but reaches furthest — fading out at 100%. Strong-and-short stacked on weak-and-long is what reads as a dissolve.
Layer 18px blur
solid → gone
by 25%
Layer 24px blur
solid → gone
by 50%
Layer 32px blur
solid → gone
by 75%
Layer 41px blur
solid → gone
by 100%
Layer anatomy

Inverse pairing, by design

Blur strength and mask reach move in opposite directions across the four layers. That inversion — not the layer count — is what makes the effect read as smooth.

On mobile (≤760px in the source), the header shrinks and the stack's top/height offsets shrink with it — the four blur values and mask percentages stay fixed.
Created for you, with ❤️ by Robert Evans · The AI Design Architect