Diagonal Sweep

Live preview: https://diagonalbs.framer.website/diagonal-border-sweep

A scroll-pinned section transition. Two layered corner brackets fly in from opposite corners, cross, and compress into the edges one stroke at a time. The trailing edge of each half bounds a window, and as the halves settle that window opens onto the section behind. A moving boundary uncovers your content. Nothing fades. The compressed frame then thins away as one piece, square against all four edges, until it is gone.

Both sides are slots. Drop in a text layer, an image, a video, a stack, or another component - the transition does not care what it is wiping between. Leave a slot empty and it falls back to a styled headline you can type into, so it is never blank on drop.

Every band is its own colour. The band list gives you one swatch per stroke, outermost to innermost, and the two brackets are mirror halves of one frame so a swatch sets the matching stroke in each. Use fewer colours than bands and they blend through them instead - two colours is a plain gradient.

Tuning happens where you work. On the Framer canvas the component paints a real frozen frame of the transition, at a moment you pick, so colour, weight, layer count and fan all move under your hands instead of only in Preview.

No GSAP, no WebGL, no dependencies. CSS transforms and one clip-path, driven by a passive scroll listener on an animation frame, which does no work at all until the page moves.

Sizing: set the frame to Width Fill and Height FIXED at the same value as Stage length - 360vh by default. The stage inside pins at one screen tall, and the frame height is the scroll distance it pins for. A shorter frame is the only way to make this look broken: at 100vh there is no scroll distance left, so the effect holds its opening pose and never advances.