Arcade Breaker

Written for the variant you picked above: Terracotta

Build a section that opens under a row of arches with a sky behind them. Props: eyebrow, title, lead, primary and secondary links {label, href}, palette {wall, shade, ink, muted, line, accent, onAccent}, onNavigate and className. Sky and arches (pure functions): five sky stops over 0–1 (dawn #3b3f7a → #f4a77f, morning, a blue noon #3d8fe0 → #cfe8fb, afternoon, dusk #24245c → #ee7a52), each a top and bottom colour and a sun colour, blended between the nearest pair; the sun's place — across from 8% to 92% and rising on a sine to its noon height; the arcade's travel up the viewport (0 as its top enters at the bottom, 1 once it's half its height above the top), so dawn breaks as the section arrives and dusk falls as the arches leave; and the arches for a width — 7 (5 below 960px, 3 below 560px) with gaps of 1.8% of the width, the middle one 1.5× wider and taller — each drawn as two straight jambs up to a semicircular head. The arcade is as tall as 21% of the width (180–300px). Behind, a sky layer: a vertical gradient from CSS variables, a glowing sun disc and three blurred clouds drifting across over 70–120s. In front, an SVG wall: one even-odd path of the full rectangle with every arch cut out, a darker reveal stroke round each opening, a small keystone over each, and a sill along the bottom. On scroll — of the window or any scrolling ancestor, so a capture-phase listener on the document — (one rAF per frame, listening only while the section is on screen) set the sky colours and sun position as CSS variables on the section — no React re-render per scroll. The body continues the wall colour: centred eyebrow in spaced capitals, a large serif title, a muted lead and two pill links — the primary filled in the accent, the secondary outlined. Reduced motion stops the clouds; the sky still follows the scroll position. Selected variant — Terracotta (terracotta): A terracotta wall #9c4528 with shade #7d341c, cream ink #fff4ea and muted #f6dccd, and a cream primary button with dark brown text. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Scroll past it and the day goes by behind the arches; the links work as normal. Motion: Scroll-linked sky and sun; clouds drift continuously. Reduced motion keeps the clouds still. Accessibility: A labelled section with real links; the arcade is decorative and hidden. Text keeps 4.5:1 contrast on the wall colour in every palette. Responsive behavior: Seven arches on desktop, five on tablets, three on phones, always with a larger centre arch. Touch: Touch scrolling drives the sky the same way. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Scroll past it and the day goes by behind the arches; the links work as normal.

Motion

Scroll-linked sky and sun; clouds drift continuously. Reduced motion keeps the clouds still.

Accessibility

A labelled section with real links; the arcade is decorative and hidden. Text keeps 4.5:1 contrast on the wall colour in every palette.

Responsive

Seven arches on desktop, five on tablets, three on phones, always with a larger centre arch.

On touch

Touch scrolling drives the sky the same way.