Field CTA

Written for the variant you picked above: Horizon

Build a closing call-to-action banner on a live WebGL background that reacts to its own button. Props: field (which background), eyebrow, title, lede, primary and secondary {label, href}, layout (centred, or text left with the buttons right), onNavigate, motion and className. The banner is a section (28px corners, at least 520px tall) with a canvas filling it, run by a small harness: DPR capped at 2, paused offscreen and in hidden tabs, a still frame under reduced motion, a smoothed pointer (uMouse 0–1, uPress), context-lost handling, and a CSS gradient fallback per field. The harness takes a focus callback, read every frame: when it returns a point, the shader's pointer eases to that point with full press, overriding the real pointer; when it returns null, the field relaxes. The primary button sets the focus to its own centre (as a 0–1 point within the section) on pointerenter and focus, and clears it on leave and blur — so pointing at the button, or tabbing to it, makes the background answer the button rather than wherever the pointer is. Each field is one of the library's full-screen backgrounds, whose own pointer response is what the button now triggers. Over the field: a soft dark radial pool behind the words (centred, or towards the left for the split layout), an uppercase eyebrow, a large balanced title (up to 4.6rem, weight 600, −0.045em) with a faint shadow, a lede at 86% white, and two pill links: a solid white primary with dark text, a soft white glow and an arrow that nudges right on hover (lifting 2px), and a frosted secondary with a hairline. Below 720px the split layout stacks and the buttons fill the width. Selected variant — Horizon (horizon): Blue horizon, centred: ink sky #02040f, band #0b2399, glow #2f5bff, floor #eef2ff; the shafts gather under the button. 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: Point at or focus the main button and the background turns to it; leave and it relaxes. The pointer elsewhere over the banner still stirs the field. Motion: The field runs continuously while on screen; its response to the button eases in and out over about a second. Buttons lift over 200ms. Reduced motion draws one still frame. Accessibility: A section labelled by its title; the buttons are real links with visible focus rings, and focusing the main one triggers the same response as pointing at it. The canvas is decorative and hidden; a dark pool and text shadows keep the white text readable on every frame. Responsive behavior: Fluid width; the split layout stacks below 720px and its buttons fill the row. Touch: The field drifts on its own; links work as usual. 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

Point at or focus the main button and the background turns to it; leave and it relaxes. The pointer elsewhere over the banner still stirs the field.

Motion

The field runs continuously while on screen; its response to the button eases in and out over about a second. Buttons lift over 200ms. Reduced motion draws one still frame.

Accessibility

A section labelled by its title; the buttons are real links with visible focus rings, and focusing the main one triggers the same response as pointing at it. The canvas is decorative and hidden; a dark pool and text shadows keep the white text readable on every frame.

Responsive

Fluid width; the split layout stacks below 720px and its buttons fill the row.

On touch

The field drifts on its own; links work as usual.