Building a Ferro Magnetic Clock with AI
What I Built
This is a ferro magnetic clock—a digital timepiece that simulates iron particles forming numbers through magnetic field interactions. Built with React and Three.js, it displays time using digits that are formed using an 8-segment display where each segment is electromagnetic. When a digit a changes the pattern of magnetically activated segments also changes. Each activated segment attracts a set of iron filings or particles that are brightly colored to form the next digit.
This project bridges two interesting domains: advanced physics simulation and practical web development. The particle system implements realistic magnetic field interactions, gravity effects, and fluid dynamics.
Methodology
I used a mix of models to get this done in as swift a way as possible specially given I am no expert in typescript nor react.
Here's how it worked:
Phase 1: Foundation (VS Code + Claude Sonnet + GPT-4.1)
Basic React/Three.js setup
Component structure and UI
Standard web development patterns
Rapid prototyping and iteration
Phase 2: Deep Physics (O3 Reasoning Model) When I hit the complexity wall with particle dynamics and magnetic field calculations, general coding models struggled. This is where O3 became the project architect:
Analyzed physics requirements
Designed particle system architecture
Created detailed algorithms for magnetic interactions
Identified performance optimization strategies
Generated implementation roadmaps
Phase 3: Implementation (Back to GPT-4.1) O3's architectural plans were then translated into working code by GPT-4.1, creating a fascinating architect-engineer dynamic. The key instruction to o3 was to generate step by step work for 4.1 to go implement.
The Technical Result
The final implementation delivers a working ferro magnetic clock with:
Real-time particle simulation forming digit displays
Interactive 3D environment with smooth controls
Customizable visual effects and colors
Seamless integration of React and Three.js
Performance optimized for browser-based physics simulation
I hope to make a hardware version of this at some point and possibly one with ferro fluids cause magnets are cool!
Try it here!
Explore the source code at github.com/fbaluch/ferro-clock