Field Lines

Hold magnets in your hands and watch their invisible fields come alive in 3D. Hear the field hum, find the silent null point, and see why a compass points north.

Comment

Inspiration

Magnetic fields are invisible and three-dimensional, yet most of us learned them from flat drawings in a textbook: a bar magnet with a few curved arrows. Students memorise "field lines leave North and enter South" without ever seeing a field wrap around a magnet, cancel out between two of them, or explain why a compass points north. AR glasses can put that field in the room with you, at real scale, in your hands. Field Lines is built for anyone meeting magnetism for the first time.

What it does

  • A live 3D field. A bar magnet floats in front of you, with glowing field lines and comets flowing from North to South. Grab it and the field is re-traced every frame.
  • A guided 3-step lesson. Add a second magnet and the lines jump across (attraction). Flip one so North faces North, and a glowing null-point ring (B = 0) appears where the fields cancel.
  • Compass and field hum. Pull a compass from the tray and the needle follows the field. You can also hear it: a hum rises in pitch and volume as the field gets stronger, and falls silent at the null point, where the needle just drifts.
  • Iron filings. 1,600 filings settle into the classic pattern, now in 3D and alive.
  • Prediction challenge. Predict where a compass will point, then the real field line lights up in gold and scores your guess (3 rounds, star ratings).
  • Earth mode. A globe with its tilted magnetic field, aurora, atmosphere and city lights. Turn it, tilt it by a pole, and X-ray it to see the magnet inside, with its S pole under the Arctic. A compass dips steeply near the poles.
  • Electric charges. The same engine draws electric fields: + to −, like charges repel with an E = 0 point between them, and a test charge's gold arrow shows the force.

How we built it

  • Planned with the hackathon's plan-lens skill, which turned the idea into a design brief with 7 concrete "done" criteria.
  • Built with Claude Code + CLAD, driving Lens Studio 5.2. Claude wrote the TypeScript, recompiled it, inspected thepreview, captured screenshots and ran tests, all through MCP tools rather than by hand.
  • Everything is created at runtime by one TypeScript component (FieldLinesApp): magnets, field-line ribbons (camera-facing neon meshes built with MeshBuilder), particles, filings, the globe and the UI. The physics is a small field-math module: a magnet is modelled as a pair of magnetic charges, and lines are traced with Runge–Kutta integration, with null-point detection.
  • Spectacles Interaction Kit + UI Kit for pinch, grab, the toolbar and the lesson card.
  • Generated assets: 6 sound effects and the field hum weree Earth's land and biome data come from public-domain NaturalEarth data, baked into vertex colours.
  • 15 automated LEAF tests, run in the Lens Studio preview after every change: unit tests for the field math, one scenario for each of the 7 done criteria, and scenarios for the compass, filings, challenge, Eull depth.

Challenges we ran into

  • Lens Studio kept signing us out in Spectacles projects on 5.24.1, and the newest package stack needed 5.25. We built signed-out on the older SIK 0.18 stack, and we had no Spectacles hardware, so all tested in the preview.
  • A tooling package broke the build. A helper package auto-imported by a runtime-inspection tool referenced newer UI Kit paths and broke the whole TypeScript compile. We tracked it down and removed it, then used LEAF logs and panel screenshots for inspection.
  • Synthetic input quirks. LEAF's synthetic interactor reports a ray distance of 0, which made grab-and-stretch yank objects to the camera, and its fixed-step drag depends on frame rate. We disabled Z-stretch and wrote exact drag helpers so the tests are deterministic.
  • Performance. Lens JavaScript took about 200 ms to colour a 20k-vertex globe, so the globe now bakes in 3 ms slices across frames.
  • Math edge cases. quat.rotationFromTo returns identity for exactly opposite vectors, which made arrows point backwards. A null point is a single spot that a hand (or mouse) can't hit precisely, so we added a gentle "capture zone" that settles a compass onto it.

What we learned

  • Sound is a surprisingly strong teaching tool: hearing the field go silent at the null point lands harder than any label.
  • Automated tests are worth it even for an AR Lens. Fifteen LEns after every polish pass, including timing flakes that onlyshowed up under load.
  • Driving Lens Studio through the MCP turns an AI coding agent into a real collaborator: it can build, run, look at and verify a Lens, not just write code for one.

What's next

Testing on real Spectacles hardware, more lessons (electromagnssroom mode where a teacher's magnets are shared with everystudent's glasses.

Built With

Share this project:

Updates