Section library
Section transitions
Ten seam treatments for the hand-off between sections. Every arch is measured in viewport width, so the curve holds its shape from a laptop to a 4K display, and every seam is symmetrical and full bleed.
Above the seam
The dotted hero ground ends here.
Scroll on and the next section rises into it as one full-width arch. The curve is measured in viewport width, so it holds its shape on a laptop and on a 4K monitor.
Below the seam
A tinted band arches in.
A hairline follows the crown, the dots stay visible in the shoulders, and the content column never moves.
Above the seam
The same curve, lit from behind.
The glow is carried by the arch itself, so it reaches both shoulders instead of fading out in the middle.
Below the seam
Dawn over the seam.
Use it once on a page, at the moment the argument changes. Any more and it stops meaning anything.
Above the seam
The dots simply evaporate.
No line, no edge. The grid thins on the way down while the next ground fades up underneath it.
Below the seam
You are already in the next section.
A dissolve reads as one continuous page. Best between the hero and the first proof section.
Above the seam
Two solids, zero hard lines.
The grounds cross-fade over a tall band. You cannot point at where one section ends.
Below the seam
The calmest hand-off in the set.
It suits the quiet stretches: after the testimonials, before the questions.
Above the seam
A hairline arch, and the sun behind it.
The bloom is centred on the crown and spreads the full width of the display, so the light and the curve are one shape.
Below the seam
The seam the page remembers.
Save it for the last hand-off before the call to action.
Above the seam
The arch, taken as far as it goes.
Same law, deeper rise. On a wide monitor the dome grows with the screen instead of flattening out.
Below the seam
A dome carries a whole section.
Give it room. A dome under a dense grid looks like a mistake.
Above the seam
Barely a curve.
When two sections belong together, the seam should whisper rather than announce.
Below the seam
Almost a straight line, but not quite.
The safest arch on the page, and the one that can repeat without tiring.
Above the seam
One curve, echoed.
A hairline ghost rides above the solid arch, inset on both sides, symmetrical either way you read it.
Below the seam
The echo does the decorating.
No fills, no shapes, no boxes: two lines and the ground change.
Above the seam
The dots fade into the curve.
The grid above thins as it approaches the arch, so the seam is a shape and a fade at the same time.
Below the seam
Shape and dissolve together.
It reads softer than the plain arch and holds up when the two grounds are close in tone.
Above the seam
The band bulges downward.
The same arch read in the other direction: the section above reaches down into the one below.
Below the seam
The page opens underneath it.
Useful when the section above is the loud one and the next should feel like relief.