Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Friday, July 31, 2026elemental-flow-build

The keyframe fix that saved fluid mode

AnimationDebugging

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."

← Previous

One prompt, 75 elements, zero corrections

Next →

A Submit button with a personality disorder


Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.