We have all faced a new concept or a textbook chapter that raised more questions than anything. Gemini 4 Argon just became available: let’s quickly explore what we can do with the Gemini 4 Argon + Antigravity combination.
💡 Why Static Diagrams Fall Short
When studying radiations, every physics student memorizes the classic textbook diagram: Alpha stops at a sheet of paper, Beta stops at a sheet of aluminum, and Gamma requires thick lead. Static diagrams, however, don’t let us experiment to build intuitions and cannot answer the questions curious students actually ask:
- Why does shielding high-energy Beta particles with lead accidentally create a dangerous X-ray hazard (Bremsstrahlung)?
- Why do uncharged fast neutrons slip right through dense lead, yet come to a halt in ordinary water?
- What happens at the exact end of an Alpha particle’s track (the Bragg Peak), or when an antimatter positron meets an electron?
To let students discover these answers firsthand, Gemini 4 Argon built Radiation Explorer autonomously, using Antigravity’s agentic environment.
The entire process took 28 words and under 15 minutes.
⚙️ The Tech Stack & Agentic Workflow
What Was Used
💬 Interaction 1: The Initial Creation
User Prompt #1:
Create an interactive educational physics beautiful web app (self-contained, desktop/mobile) for students to explore how Alpha/Beta/… radiations interact with matter
Here’s what the agent did autonomously…
Workspace & Skill Discovery :
- Checked the workspace directory via
run_commandand readSKILL.md(generative_ui) viaview_fileto align on standalone and side-pane artifact design standards.
Curriculum & Physics Synthesis :
Rather than building a toy animation with hardcoded stopping points, the model formulated a continuous physics engine covering 6 radiation modes and 7 absorber materials :
- Alpha Particles (Helium Nuclei): Bethe-Bloch stopping power producing a realistic Bragg Peak (a sharp surge in energy deposition right before the particle comes to rest), plus occasional Rutherford scattering in heavy materials.
- Beta Minus (Electrons): Empirical range modeling, tortuous multiple scattering paths, and radiative Bremsstrahlung X-ray emission when decelerating in dense shields like lead.
- Beta Plus (Positrons): Antimatter tracks ending in positron-electron annihilation , emitting two 511 keV gamma photons in opposite directions (180 degrees apart).
- Gamma Rays (High-Energy Photons): Exponential attenuation decomposed into photoelectric absorption , Compton scattering , and electron-positron pair production above 1.022 MeV.
- Fast Neutrons : Elastic nuclear knock-on collisions, visually proving why hydrogen-rich water rapidly slows neutrons down while heavy lead nuclei let them bounce right through.
- Mixed Cocktail Beam & Magnetic Spectrometer : Real-time Lorentz force deflection in a perpendicular magnetic field, separating positively charged, negatively charged, and neutral rays into distinct trajectories.
Pedagogical Scaffolding (Built Without Being Asked):
- 🔭 Dual Viewports : Switch between the macroscopic shielding bench view and a microscopic atomic lattice zoom showing scaled atomic nuclei and electron shells.
- 📈 Synchronized Depth Curves : Toggle between beam survival (with 50% Half-Value Layer markers) and dose / energy deposition (Bragg curve).
- 🔊 Web Audio Geiger Counter : Synthesizes realistic Geiger-Muller clicks directly in the browser using the Web Audio API, proportional to detector arrivals.
- 🎯 5 Guided Lab Missions & 🕵️ Mystery Source Detective : Interactive challenges that verify student setups automatically, plus a randomized blind-diagnosis game.
Self-Correction on Typography :
- Immediately after generating the initial build, the agent inspected the HTML markup and replaced raw LaTeX strings with native HTML formatting so the app required zero external math-rendering libraries.
💬 Interaction 2: Adaptive UI & Cross-Device Polish
User Prompt #2:
Review the entire app to ensure a fully adaptative UI
Here’s what the agent audited & upgraded…
Visual-First Breakpoint Reordering
- On wide desktop monitors (1320px and above), the app uses a 3-column cockpit (Controls | Simulation & Depth Plot | Quantum Inspector).
- On mobile phones and portrait tablets (920px and below), a naive page order would force students to scroll past 600px of sliders before seeing the particle beam. The agent reordered the CSS grid layout so the live simulation canvas and key metrics appear first at the top , with the controls immediately underneath.
HiDPI / Retina Canvas Coordinate Fix
- During the code audit of
renderDepthGraph, the agent caught a subtle HiDPI bug: the graph renderer was readinggraphCanvas.width(physical backing pixels scaled bydevicePixelRatio) instead of logical CSS pixels (geom.graphWidth), which would clip the right side of the plot on 1.25x to 2x Retina displays.
ResizeObserver Integration
- Added a
ResizeObserverwatching both#simCanvasWrapand#graphCanvasWrapinresizeCanvasesso layout changes (like opening the Guided Challenges drawer, rotating a tablet, or dragging a split-screen divider) resize both canvases instantaneously.
Adaptive Canvas Labels & Touch Pointer Capture
- Upgraded slab rendering to switch to compact labels (
Paper,Al,Pb,Water,PMMA) when slabs narrow on mobile screens, and dynamically scaled the number of rows and columns in the Atomic Lattice view. - Replaced desktop-only
e.movementXwith cross-devicepointerdown/pointermovedelta tracking (setPointerCapture+touch-action: pan-y) so students can drag absorber thicknesses directly on touchscreens.
🚀 The Result: Try It Yourself
In under 15 minutes and about 30 words of prompting, we went from a static textbook concept to a full-featured interactive physics laboratory where students can fire mixed radiation beams, bend charged particles in a magnetic field, inspect individual quantum vertices, and test their intuition against guided missions and mystery sources.
👉 Try It Yourself :
✨ More!
This workflow is not limited to nuclear physics or 2D canvases. While we got a zero-dependency 2D HTML5 Canvas setup here, you can just as easily ask Gemini 4 Argon and Google Antigravity for a full 3D interactive lab using any existing tech stack (such as Three.js, WebGL, WebGPU) and turn any abstract topic into a hands-on playground in minutes:
- Mathematics & Signal Processing : Interactive Fourier Series synthesizers, 3D vector calculus fields, or linear algebra eigenvalue visualizers.
- Chemistry & Biology : 3D molecular orbital builders, acid-base titration curves, or enzyme kinetics and cell membrane transport simulators.
- Computer Science : Live distributed consensus visualizers (Raft/Paxos), neural network backpropagation sandboxes, or 3D graph pathfinding arenas.
- Earth & Space Sciences : 3D orbital mechanics and Lagrange point explorers, plate tectonics, or atmospheric greenhouse radiative transfer labs.
It’s not limited to English either. You can localize your entire lab in minutes for global classrooms with a single follow-up prompt like:
Localization Prompt Example:
Localize 100% of the UI:
- Add a 🌐 icon in the top-right
- Allow switching among (using native language names): English, Mandarin, Hindi, Spanish, Arabic, and French
- Auto-select language based on browser locale, defaulting to English
