# v03-split

**The idea.** The window is cut in two and the halves behave differently. The
left half is pinned to the viewport and holds one phrase at a time, at five
rem, over a dithered orange field with a two-tone plate in its bottom corner.
The right half scrolls past it. The reader therefore always has one large
piece of context on the screen and one small piece of content, and they are
never the same piece.

**The phrase swaps as you read.** Every section in the scrolling half declares
the phrase the pinned half should show while that section is on screen; the
swap fires when the section crosses the middle of the window. The pinned half
is `aria-hidden`, because it
only repeats what the scrolling half already says: on the phone, where it is
not rendered at all, the same phrases are the section titles in the flow.

**The tool list is wide rows.** One tool per row across the right half: the
name in Grotesk, its languages in mono under it, the description at full
measure, then Docs and Repository. Pointing at a row lifts it three pixels
toward the reader and lights its outline orange; the other rows answer with a
grey outline. The surface under the text does not change, so the row is as
readable under the pointer as beside it.

**Dither.** The pinned half's field (a canvas ramp from black into orange at
7px cells), the plate in its corner (a two-tone ramp at 4px), a 25% checker
washing out of the top-left of the hero on parallax, and the full-bleed band
before the sign-up.

**Parallax.** The hero wash at 0.3 of the scroll rate, the band's checker
layer at 0.18, the dot grid at 0.18. The pinned half deliberately has no
parallax layer: it does not scroll, so nothing in it can move against the
scroll without drifting out of its box.

**Palette.** Burnt orange `#ff6b2c` for the pinned half, the outlines and the
buttons; cold teal `#25d0c0` for the row links and the arrows. The offset
shadows are black. Text is warm white on graphite.

**Type.** Grotesk for the claim, the pinned phrase and the tool names; Plex
for descriptions; mono for languages, links and buttons.

**Notches.** Bottom-right on the rows, the buttons and the sign-up boxes.

**Arrows.** Two in teal: the hero buttons into the list, and the last row into
the sign-up.

**Density.** Medium-low: the pinned half is one phrase and one plate, the
scrolling half is one row at a time with 2.25rem between rows.

**Mobile (390px).** One column, no pinned half. The section titles that the
pinned half was showing come back into the flow as real headings, the motto
drops to 8vw so each of its two clauses takes a line of its own, the buttons
go full width, and the links become 44px targets.