Shaped Section Boundary

How it works

Stacked, full-height sections of flat colour, where the line between one section and the next is not a straight cut but a shape: a wave, a chevron, a diagonal, a torn edge or an arch. The shape is drawn by the scroll. As a new section rises from the bottom of the screen its top edge is flat, and it opens into its full form as the section climbs, finishing before the section reaches the middle of the viewport.

The point is practical. Flat colour blocks joined by straight lines are one of the most recognisable signs of a templated page, and a shaped join, animated with restraint, changes how the whole page reads at the cost of one element and one trigger per section. It uses GSAP ScrollTrigger and Lenis, and the shapes are pure CSS: no SVG and no canvas.

One number per edge

Every shape is a CSS clip-path whose top points depend on a single custom property that runs from zero, flat, to one, the full shape. The bottom edge of each shape never moves, so it stays welded to the section. Because every form is written against the same number, one tween can animate any of them, and new forms are just new polygons. The arch is the exception: it is drawn with a rounded border instead of a polygon, so it stays a true curve at any size.

For that number to animate smoothly, the browser has to know it is a number. The custom property is registered as a typed property, which makes it interpolable and also gives it a default that leaves every shape fully open if JavaScript never runs. The design fails open, not flat.

Who owns the edge

The shaped edge belongs to the incoming section, as an empty element lifted over the section above it. It takes its colour from its own section by inheriting the background, so the edge and the section can never drift apart when the palette changes. A one-pixel overlap hides the hairline of the previous colour that sub-pixel rounding would otherwise let through.

The timing

Each edge has its own scrubbed ScrollTrigger with a small lag, so the shape chases the scroll softly instead of stepping with every notch of a mouse wheel. The window is chosen so the movement is over before the reader reaches the headline: an edge still moving while you read competes with the text and makes the effect look cheap.

Mobile and accessibility

Clip-paths and one number per section are light work for any device. Sections clip their horizontal overflow without creating a scroll container, so nothing nested inside loses sticky positioning. On narrow screens the steepest shape is softened so it does not eat half the screen. With reduced motion, the shapes are simply shown open and no triggers are created: the art direction stays, only the movement goes. On a real page, choose one form, two at most, and repeat it.