# Magnetic buttons > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A launch-control hero for a fictional mission-ops product ("Orbital") whose interactive controls are *magnetic*: when the pointer comes within 80px of a button or nav link, its outline (background/border layer) slides toward the cursor by up to 10px and its label slides 1.5× further, so the label appears to lead. When the pointer leaves the radius both layers spring back over 500ms with a small overshoot. The effect is pointer-only and cosmetic: keyboard focus shows a two-ring lime focus ring on the outline layer with no translation, and `pointer: coarse` or `prefers-reduced-motion` disables it entirely. Dark near-black surfaces, a faint 64px grid, one lime accent. The detail worth copying is the two-layer structure (`.outline` + `.label`) driven by two custom properties, which keeps the JS to a distance check. ## Reference behaviour 1. Initial state: 64px top bar with brand mark + "Orbital", five pill nav links ("Overview" is current, with a visible 1px border), and a right-aligned mono status ("Pad 3 · nominal", "T−00:14:32"). The main area is vertically centred: a lime mono kicker, a 64px two-tone headline, a mono sub-paragraph and three buttons; a four-column telemetry strip sits above the bottom edge. 2. Move the pointer toward any `.mag` element. When the distance from the pointer to the nearest edge of the element's box is < 80px, the element gets class `near`: its `.outline` layer translates toward the pointer (max 10px on each axis, proportional to the pointer's offset from the element centre) and its `.label` translates 1.5× that. While `near`, transforms track the pointer with a 120ms standard-ease transition (throttled to one `requestAnimationFrame` per `pointermove`). 3. Hovering also changes surfaces: nav pills gain a `--panel` fill and `--line` border and their text brightens to `--ink`; the primary button lightens to `#d6f866`; the secondary border brightens to `--ink-2`; the ghost button shows a dashed `--line-2` border and its text brightens. 4. Move the pointer outside the 80px radius: `near` is removed, both custom properties are reset to `0px`, and the layers return over 500ms with `cubic-bezier(.34,1.56,.64,1)` (visible overshoot of ~2px). 5. When the pointer leaves the document, every `near` element is released the same way. 6. Tab through the page: each `.mag` shows a focus ring (`0 0 0 2px var(--bg), 0 0 0 4px var(--accent)`) on its `.outline`; nothing translates. 7. Clicking a nav link moves `aria-current="page"` to it (the border follows). Buttons are inert beyond hover/press styling. 8. With a coarse pointer or `prefers-reduced-motion: reduce`, the script exits early; CSS forces `transform: none` on both layers, so the page is fully usable with hover colours only. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ top 64 ◎ Orbital (Overview)(Missions)(Telemetry)(Crew)(Settings) │ │ · Pad 3 · nominal T−00:14:32 │ ├──────────────────────────────────────────────────────────────────────┤ │ hint: Move the cursor near a control│ │ MISSION KESTREL-7 · WINDOW 2 OF 3 │ │ Launch window opens in │ │ fourteen minutes. (h1 64px, max 820px) │ │ sub-paragraph mono, max 560px │ │ ┌ Start countdown → ┐ ┌ Hold sequence ┐ View telemetry ↗ │ │ └───────────────────┘ └───────────────┘ (56px tall, 16px gap) │ │ │ │ ── telemetry strip: 4 cols, mono, 1px top rule ── bottom 32px ─── │ └──────────────────────────────────────────────────────────────────────┘ each .mag: ┌─ .outline (absolute, inset 0, moves --ox/--oy) ─┐ │ .label (relative, moves 1.5 × --ox/--oy) │ └─────────────────────────────────────────────────┘ ``` - `

` — `.brand` (22px SVG orbit glyph + name), `