FocusField

Inspiration

Studying feels invisible: you don't see why the phone wins. I built FocusField to make attention tangible — a magnetic field where task strength, distance, and cognitive energy budget determine who captures your focus. Grounded in my MFA research (Magnetic Field Model of Attention) but readable in 60 seconds.

What it does

FocusField is a single-page browser demo for students:

Full-bleed field visualization — heatmap + flow lines from task and distractors toward YOU
Live readouts — winning focus, field at you, energy used, transfer risk
Four presets — Deep work, Phone on desk, Exam hall, Overloaded
Drag distractors (phone, noise, chat, hunger) to change psychological distance
Sliders for task strength S_task, energy budget E_total, and Lenz-style inertia

Core mechanism uses F_att(r) = S / (r^2 + eps) and capture when peripheral field exceeds the main-task threshold.

How I built it

Pure vanilla web — no build step, no LLM API. app.js implements simplified MFA math, softmax-style allocation with inertia damping, and Canvas 2D rendering.

Challenges I ran into

Balancing pedagogical honesty with instant clarity: full MFA has five individual-difference parameters; the demo keeps the knobs students can feel immediately.

Accomplishments that I'm proud of

Mechanism visible in under 60 seconds with presets
Zero LLM — deterministic, classroom-safe
Distinct from coding-agent memory tools
Connects interactive demo to a research direction (MFA)

What I learned

Interactive models beat static diagrams for attention literacy. Distance and salience interact nonlinearly (1/r^2) — students intuit "move the phone farther" once they see capture lines.