Open-source Animation Library
Reusable motion utilities tested as a small system: consistent timing, composable classes, and a live browser demo.
Reduced-motion preferences disable the staged movement.Playground / Interaction and code
Working prototypes.
Inspectable decisions.
Small, browser-native studies showing how I use code to test motion, component states, token behavior, and implementation quality.
One component compared across four essential states.
Component state lab
A compact React prototype for comparing default, focus, validation, and loading treatments before a pattern scales.
Project healthOn track
Reusable decisions,not isolated pixels.
Token propagation
Change one semantic accent and watch the status indicator and primary action update together.
01Frame
02Prototype
03Agent-assisted build
04Review and QA
Portfolio Design OS
This portfolio is a live React and TypeScript implementation built through an AI-assisted loop: frame the problem, prototype the interaction, generate the implementation, then review responsive behavior, motion, accessibility, and system consistency.
CodePen archive
Cards AnimationsSCSS · interaction motionUI KitInterface componentsComplete showcaseSelected public pensEarlier browser studies, kept visible as part of the progression from interaction experiments to product systems.
Public implementation evidence