01 · Evidence
Where this showed up in real products
IBWTProduction Front-End
Components Built in Code, Transitions Included
The kit is written in code first and published to Storybook with its states — empty, loading, disabled, filtered, lost connection — so the transitions between them are written once, in CSS and React, and ship with the component instead of being described to whoever implements it. The kit itself is behind the password.
Read the case →02 · Method
How I actually do it
STEP 01
Motion as Communication
Animation is not decoration. Every transition tells the user where they came from, what the system is doing now, and where their attention should land next. If it does none of those, it goes.
STEP 02
Transforms and Opacity First
Animate what the compositor handles — transforms and opacity — before anything that triggers layout, and profile on the slowest device in the audience rather than on the machine the design was made on.
STEP 03
The Transition Is the Deliverable
Instead of a video or a static spec for developers to reverse-engineer, the deliverable is the React component, the CSS keyframes, or a Rive state machine — whichever one the product can actually ship.
STEP 04
Reduced Motion Is Not Optional
Respect prefers-reduced-motion: non-essential animation degrades to an instant state change. This site does it in one rule; switch the setting on and reload.
03 · Stack
Tools, in service of the above
Code & Frameworks
ReactVueHTML / CSSTailwindshadcn-style kitsStorybook
Graphics
Three.jsWebGLHTML5 Canvas
Motion
CSS Transitions & KeyframesRiveLottie
Design Side
FigmaFigma Variables & ModesTokens StudioWebflow
The full version
What the complete version of this page adds
- The IBWT design file: the lost-connection screen, the disabled order ticket, and one composition inverted across four colour modes
- The four Figma frames of the 2026 assignment, and the token module they were scripted on
- The Storybook behind the IBWT kit, where every state is a named entry
It lives at alex.zhovnir.com/craft/motion-and-code, behind a password — client agreements, not theatre. Send me a note and I’ll open it: alex@zhovnir.com.