Neural Drift

The exact prompt

DESIGN BRIEF — "Neural Drift"

Build a landing page for a fictional ML infrastructure company called "Cortex" whose hero
is a living constellation field rendered on canvas. The field is the product metaphor:
thousands of small signals, a few strong connections.

A. THE FIELD (canvas, full hero)
   - 3 depth layers of particles: 90 far (radius 0.6px, alpha .18), 55 mid (1.1px, .34),
     26 near (1.9px, .6). Total 171 nodes — enough to look dense, cheap enough to stay
     at 60fps.
   - Each particle has a position, a velocity (0.06–0.22 px/frame, scaled by layer depth)
     and wraps around the edges. Nearer layers move faster and are brighter — that is the
     parallax.
   - Connections: for every pair within 118px, draw a 1px line whose alpha is
     `(1 - d/118)^1.6 * 0.30 * layerAlpha`. Use a spatial hash grid of 118px cells so
     this stays O(n) — do NOT write a naive O(n²) loop.
   - Pointer repulsion: nodes within 150px of the pointer are pushed away with force
     `(1 - d/150)^2 * 1.9`, integrated with a 0.06 lerp back to their base velocity so
     they settle rather than explode.
   - Add 3 "signal pulses": every 4-7 seconds a pulse travels from a random near-node
     outward along its connections, brightening each edge to alpha .85 for 400ms and
     briefly enlarging the nodes it passes. Implement with a queue, not recursion.
   - Bloom: after drawing, composite a scaled-down copy of the canvas onto itself with
     `globalAlpha = 0.28` and `filter: blur(6px)` via an offscreen canvas — a cheap
     two-pass bloom. Cap devicePixelRatio at 2.

B. THE PAGE
   - <header>: sticky, blurred, rgba(6,7,9,.6) + backdrop-filter blur(14px). Wordmark
     "CORTEX" with a small canvas-free SVG glyph (three connected dots). Nav: "Platform",
     "Docs", "Pricing", "Careers". Right: "Sign in" + a solid #34d399 pill "Deploy".
   - Hero, over the field, centred, with a subtle dark scrim so text always wins:
       * Eyebrow pill: "SOC 2 TYPE II · 99.99% UPTIME"
       * <h1> clamp(2.6rem, 7.5vw, 5.6rem), weight 600, line-height 1.0,
         letter-spacing -0.03em: "Every signal, / finally connected."
       * Paragraph (max-width 540px): "Cortex ingests 40 billion events a day and turns
         them into the two or three that actually matter."
       * Two buttons: solid "Start free" and bordered "Read the docs →".
       * A live-looking telemetry strip: three monospace figures in a glass card that
         update every 1.4s with plausible jitter — "INGEST  41.2k/s",
         "P99  18ms", "NODES  1,284" — each value ticking with a 200ms count-up.
         Mark this card aria-live="off" so it does not spam screen readers.
   - A features section (3 cards, grid → 1 col under 720px), each with an inline SVG
     icon drawn with strokes only: "Streaming ingest", "Sub-20ms queries",
     "Zero-copy pipelines". Cards lift 2px and gain a 1px #34d399/40 border on hover.
   - A closing CTA band with an <h2> "Ship the pipeline, not the plumbing." and one
     button.
   - <footer>: four columns (Product / Developers / Company / Legal) plus a bottom row
     with "© 2026 Cortex Systems, Inc." and a status pill with a pulsing green dot
     reading "All systems normal".

C. SYSTEM
   - Palette: base #060709, surface #0d1013, ink #eef2f4, muted rgba(238,242,244,.6),
     accent #34d399, line rgba(255,255,255,.09).
   - Fonts: system sans for UI; "JetBrains Mono" via Google Fonts for the telemetry
     strip ONLY, with ui-monospace fallback.

D. REDUCED MOTION
   - Render the field once, statically (no rAF loop, no pulses, no repulsion), and
     disable the telemetry ticking. The page must not look empty.

---

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. canvas renders non-blank pixels
2. a telemetry strip with monospace font exists
3. at least 3 feature cards exist
4. canvas pixel content changes between two samples 800ms apart
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