Elemental Flow
A physics-inspired periodic table where elements morph between a structured grid and a floating particle field — built from an AI Studio export in a single 16-minute conversation.
Elemental Flow started as an AI Studio export — a periodic table visualization with a broken particle mode and 5 dead dependencies. One prompt turned it into a shipped React app with dual-layout physics: a structured grid where 75 elements sit in their period/group positions, and a fluid mode where they scatter into independent sinusoidal orbits.
The build itself was a single conversation. The model identified the dead deps, diagnosed a broken animation system (Date.now() render-tick calculations instead of Framer Motion keyframe arrays), rewrote the particle physics, added click-to-pin detail overlays, category filtering, live search, and staggered entrance animations. Three user turns — "go," "approved," and "clean up."
The tech stack is minimal: React 19, Vite 6, Tailwind v4 with custom CSS properties for 10 category colors, and Framer Motion for layout transitions and continuous drift. The entire codebase is 389 lines of TypeScript across 3 source files. Each element card uses a shared layoutId so the grid→particle morph animates through layout space instead of crossfading.
Timeline
Gave Gemini a raw AI Studio export and one sentence: "Get this off the ground and push it to GitHub like we've done on the other projects." No architecture spec, no feature list, no design brief. The model read the export, identified 5 dead dependencies (@google/genai, express, dotenv, cors, scaffold CSS), stripped them all, restructured a 293-line single-component React app around a periodic table grid, and fixed the particle animation that was broken because the original export used Date.now() instead of proper Framer Motion keyframe arrays. 75 elements across 8 categories, each with its own CSS custom property color. The whole thing — audit, fix, document, screenshot, push — happened in one 16-minute conversation with 3 user turns. Two of those turns were "approved" and "clean up." I mostly watched.
The original AI Studio export had a particle animation that looked dead. Elements were supposed to drift like a physics simulation — sinusoidal orbits, randomized phase offsets, the whole deal. Instead they just sat there. The bug: the animation was calculating positions with Date.now() on every render tick, which Framer Motion can't interpolate. You need keyframe arrays — five control points per axis that the spring solver can tween between. Once that switch happened, 75 elements started orbiting in independent elliptical paths with randomized amplitude (±400px horizontal, ±250px vertical), randomized phase rotation (±45°), and per-element durations between 6–12 seconds so nothing looks synchronized. The transition between grid mode (structured periodic table) and fluid mode (particles) uses a shared layoutId on every card, so Framer Motion morphs them through layout space instead of fading. That's the moment it went from "functional demo" to "thing you actually want to click around in."