Section library
Section transitions
Ten seam treatments for the hand-off between sections. Every arch is a real circular arc, so the curvature never changes: no flat crown, no hard shoulder, and the same shape on a laptop and on a 4K display. 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 arc cut from a circle, so the curve is as steady at the crown as it is at the shoulders.
Below the seam
A tinted band arches in.
A hairline traces the whole arc, the dots stay visible in the shoulders, and the copy starts well below the crown.
Above the seam
The same curve, lit from behind.
The light rides the circle, so it reaches both shoulders instead of fading out before them.
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.
The circle pulled in until half of it is in view. The most oval reading in the set.
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.
A very large circle, so the arc is gentle. When two sections belong together the seam should whisper.
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 second circle of the same radius rides above the filled one, a hairline echo of the same curve.
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 meets the arc, 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 circle read downward: the band above bulges into the section 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.