Magnetic Orbit

The exact prompt

DESIGN BRIEF — "Magnetic Orbit"

Build a cursor-reactive hero for a fictional creative-technology studio called "FIELD".
The page should feel like it is physically aware of the pointer: light, weight and
magnetism. Everything reacts; nothing jitters.

A. CUSTOM CURSOR (desktop pointer only)
   - Hide the native cursor inside the hero (`cursor: none`) and draw a two-part
     cursor: a 7px solid dot that tracks the pointer at 1.0 lerp (essentially instant),
     and a 40px ring that follows with a 0.14 lerp so it trails with visible weight.
   - The ring scales to 1.9x and its border thins from 1.5px to 1px when hovering any
     interactive element; it scales to 3.2x and fills with rgba(249,115,22,.12) when
     hovering a `[data-magnetic]` element.
   - Do NOT hide the native cursor on coarse pointers — guard with
     `window.matchMedia('(pointer: fine)')` and only then enable.
   - The cursor must be aria-hidden and pointer-events: none.

B. THE SPOTLIGHT
   - A fixed radial spotlight (radial-gradient, 520px radius, rgba(249,115,22,.14) →
     transparent) follows the pointer across the hero with a 0.10 lerp, blended with
     mix-blend-mode: screen. Behind it, a second, larger, colder spotlight
     (rgba(56,189,248,.10), 900px) follows with a 0.04 lerp, creating depth.
   - Both spotlights are driven from the single rAF loop using cached pointer
     coordinates; never attach a mousemove handler that writes layout.

C. MAGNETISM
   - Any element with `data-magnetic` translates toward the pointer when it is within
     140px of the element centre, with strength falling off as
     `(1 - d/140)^2 * 14px`, capped at 14px. On pointer leave it springs back using a
     critically-damped spring (stiffness 0.12, damping 0.78), not a CSS transition.
   - Apply this to: the primary CTA button, the three orbit nodes, and the logo mark.

D. COMPOSITION
   - <header>: a thin top bar with the wordmark "FIELD" (tracking 0.3em, 12px, 700) on
     the left, and on the right "Index" / "Contact" plus a bordered pill "Book a call".
   - <main> hero, min-height 100vh, centred:
       * <h1> at clamp(3rem, 9vw, 7rem), line-height 0.94, letter-spacing -0.035em,
         system sans, weight 500: "Design that / pulls back." with "pulls back."
         in rgba(242,242,245,.45).
       * Under it, max-width 480px, 16.5px/1.7, rgba(242,242,245,.62): "FIELD is a
         three-person studio building interfaces that answer to the hand that moves them."
       * A row: primary CTA "Start a project" (solid #f97316, black text, rounded-full)
         and a ghost "See the index" (1px border rgba(255,255,255,.18)).
       * ORBIT NODES: three absolutely positioned circular glass nodes (86px, 108px,
         72px) scattered around the headline at pre-set coordinates, each containing a
         2-3 word label ("Motion", "Systems", "Brand"). They drift on slow independent
         sine paths (±8px, 11-17s periods), are `data-magnetic`, and tilt up to 10deg
         toward the pointer with perspective 900px. On hover each node scales to 1.08
         and its label brightens.
   - A thin marquee strip below the hero (a single row, 1px top and bottom hairlines,
     12px uppercase, 0.24em tracking, opacity .5) reading
     "MOTION · SYSTEMS · BRAND · INTERFACES · SOUND ·" repeated — translated
     continuously by the rAF loop at 26px/s, wrapping seamlessly using two duplicated
     spans and a modulo offset.
   - <footer>: one row, "© 2026 FIELD Studio" and an email link.

E. SYSTEM
   - Palette: base #0a0a0b, ink #f2f2f5, muted rgba(242,242,245,.62), accent #f97316,
     cold #38bdf8.
   - Fonts: system sans for everything (no webfont) — this page must be 100% offline.
   - A faint 48px grid overlay at 3% opacity behind the hero, masked with a radial
     gradient so it fades out at the edges.

F. TOUCH DEVICES
   - On coarse pointers: no custom cursor, no spotlight (render a static centred glow),
     nodes become a normal 3-up grid, magnetism is disabled. The page must look
     deliberate, not broken.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".

Acceptance criteria (14)

1. a custom cursor element exists and is pointer-events:none
2. at least 3 elements carry data-magnetic
3. a marquee strip exists and its transform changes over time
4. a spotlight element with a radial-gradient exists
5. window.__DEMO__.ready becomes true within 5s
6. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
7. window.__DEMO__.errors is empty
8. zero console errors and zero page errors
9. zero failed network requests
10. exactly one <h1> with non-empty text
11. header, main, footer landmarks present
12. no horizontal overflow at 390 / 768 / 1440 widths
13. no horizontal overflow after 2s of animation
14. prefers-reduced-motion: reduce leaves the page usable and errors empty