Shaped Section Boundary
What it does
Stacked full-height sections whose top edge is a shape instead of a straight line: each incoming section carries its own boundary element, painted with `background: inherit` so the edge can never drift from the section colour, and clipped by a `clip-path: polygon()` whose vertices are driven by a single `@property`-registered custom property `--forma`. One scrubbed ScrollTrigger per boundary tweens `--forma` from 0 (flat) to 1 (full shape) over a window that closes at `top 55%`, so the edge has finished moving before the section is read. Five forms ship: wave, chevron, oblique, torn (twelve fixed pseudo-random points) and arch (a real curve via `border-radius`, not a polygon). Smoothed by Lenis; honours prefers-reduced-motion by locking the shape open.
How it's built
| Category | transition |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
To reproduce this animation in your own project, copy the prompt below into Claude Code, Cursor or any AI coding agent. The prompt is validated — it describes the exact structure, timing and easing, so the agent rebuilds the effect faithfully and you can then adapt colors, copy and layout to your design.
Prompt coming soon.