Prompt:
Build a standalone HTML page for "029 magnetic-field-buttons: magnetic buttons and a canvas dot field attracted to the cursor." Frame it as Fieldnote, a fictional instrument lab, in a bright editorial style that contrasts with dark showcase pages: warm paper (#f3f0e8), ink (#16181d), electric cobalt (#1f3cff) and vermilion (#ff4a1c). Typography: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui for display and UI, very heavy 800 weight with tight negative tracking; ui-monospace for kickers and the readout bar. A full-viewport fixed canvas sits behind everything and holds a grid of about two thousand short "iron filing" strokes (26px gap, 22px on phones), each with a home position, velocity and a slight random resting angle, drawn in translucent ink. Each frame, filings within 190px of the pointer feel a force with quadratic falloff: Attract pulls them in, Repel pushes them out harder, Vortex pushes them tangentially with a slight inward bias. A spring (k 0.07, damping 0.84) returns them home. Each filing rotates to point at the cursor (or along the tangent in vortex mode), lengthens with influence, and shifts from ink to cobalt, then vermilion near the core of the field. A faint cobalt ring and a dot mark the cursor. The loop skips drawing when the field is at rest. Foreground layout: a nav with a two-dot logo mark (vermilion plus cobalt) and "Instrument series 029"; a two-column hero with a cobalt monospace kicker, a giant headline "Everything leans toward you." with the second phrase in cobalt, a short lede, and three outlined pill mode buttons (Attract, Repel, Vortex) with aria-pressed. On the right is a large vermilion circular "Discharge" button with concentric halo rings. Every button is magnetic: within a radius based on its size, it translates toward the pointer by up to 38 percent of the offset and its inner label moves half as much again for parallax; on exit it snaps back with an overshooting cubic-bezier. Clicking Discharge emits an expanding shockwave ring through the filing field (a 40px band that pushes filings outward and fades with distance) and pops the button's halo. A bottom monospace readout shows the mode, a smoothed field strength in "T", and the pulse count. Touch releases the field on pointerup. Reduced motion: much smaller button travel, heavily damped and stiff filings, faster weaker shockwave, no halo pop, no cursor ring.

Title: Fieldnote Magnetic Instruments

Description: A crisp, paper-toned lab page where the whole background is a sheet of iron filings that turn, stretch and gather around the cursor like a real magnet is passing underneath. The interface feels the pull too: pill buttons and a large vermilion core button drift toward the pointer and spring back when released. Switching between attract, repel and vortex modes changes the field's character, and a discharge pulse sends a visible shockwave rippling across every filing.

Visual techniques:
- DPR-aware full-viewport canvas with about two thousand spring-mass filing particles
- Radial force field with quadratic falloff and three modes (attract, repel, tangential vortex)
- Filings oriented along the field direction, length and color driven by influence
- Expanding shockwave band with distance-based falloff
- Idle detection that skips rendering when the field has settled
- Magnetic buttons via pointer-proximity translation with nested label parallax
- Overshooting cubic-bezier snap-back transitions and keyframed halo pulse
- Editorial paper palette with cobalt and vermilion accents and a monospace readout

Interaction model: Moving the pointer, or dragging a finger, over the page bends the filing field around it, and buttons nearby lean toward the pointer. The Attract, Repel and Vortex buttons switch the field mode, shown in the readout. The Discharge button sends a shockwave pulse outward from its center and increments the pulse counter. All controls are real buttons with visible dashed focus outlines for keyboard use.