2.6 Scroll-Driven Image Bottom Warp (Partnership Card)

Ragged Edge · vanilla scroll + clip-path (no CDN) · concave text notch

The curved bottom edge of the image scrubs from a pinched arc to flat as each block rises into view — like raggededge.com partnership cards. It only reads while content is entering from the bottom of the viewport.

Scroll down — the cards start below this fold. Watch the image panel’s bottom boundary relax as each card’s top crosses from the viewport bottom toward the upper area.

Papier

Papier committed to the possibility of a blank page — a rebrand that set the platform for expansion.

2,500 Target stores Listing footprint after the identity refresh (demo stat).

Forest brief

Second card repeats the pattern — the warp runs again as this row enters from below.

Scroll-scrubbed clip Pure JS: scroll position → progress → clip-path (works offline, no GSAP).

No external scripts: if GSAP failed to load before, the old file exited immediately and did nothing. This version uses getBoundingClientRect + scroll only. Serve via python3 -m http.server from the repo root (or any static server). See raggededge-scroll-distortion-effect.md for context.