Lab / 01
Product Systems in Motion
“A coded motion experiment about how I design and build.”
Motion · 33s reel · 1920 × 1080 · 60 fps · 2026About the experiment
Designed in code with React + Remotion.
Built through an AI-assisted workflow with human art direction, iteration and final QA.
- Format
- 33s · 1920 × 1080 · 60 fps, stereo sound
- Built with
- React, Remotion, TypeScript
- Sound
- Original music at 109 BPM and interface sound design, synthesized in code and cued from the same timeline as the picture, so every cut lands on a beat.
- Material
- Real captures from Pomy, Nadif Malti, Sahaja, VantageBet and Play Check-in, excerpts of Pomy's shipped tokens and timer logic, and this site's own type, grid, lattice and mark.
In the reel
- 00:00
Idea to System
The site's green full stop runs the baseline. IDEA tightens under tension, then snaps into a 48px grid as SYSTEM.
- 00:04
Problem · Flow · Decision · Experience
Four beats, each word moving the way the idea works: a tangle framed, a wave settled, a fork chosen, a box that becomes a phone.
- 00:11
Assemble
Wireframes scan into real screens from four products, then pull back into a wall of flows that advance as the camera orbits.
- 00:15
Intent to Agents to Loop
Product intent runs down a single line into AI agents, drawn as the homepage lattice, and on into build, review, iterate.
- 00:19
Design and Build
An exploded Pomy panel: grid, tokens and wireframe on one side; its timer logic and live UI states on the other, compressed into one.
- 00:24
Ship
The panel docks in a browser at getpomy.com, live on Chrome and Edge, and the day's wrap-up is saved and recorded.
- 00:28
Sign-off
Product Designer & Builder. The full stop returns to where it started, so the reel loops.