component system
What I Use
An open-source component system that turns interaction principles into accessible React primitives, state contracts, and source-owned implementation.
- role
- design engineer, system & build
- time
- ongoing, 2026
- team
- Independent
- public
- Website
motion system
working interface states
Immediate response stays attached to the control that caused it.
Hover or focus exposes only the context needed for the next decision.
Open the detail while the document frame stays stable.
The standard mode uses small spatial changes only when they explain context.
case study
One interaction could not prove a component system
Problem
The first version centered on a single hold button. It did not prove that the same judgment survived across feedback, hover, route, and accessibility states, so I reframed the study around repeatable decisions instead of an isolated animation demo.
Intent chooses the rule before taste chooses the curve
Decision model
Each pattern starts with the job of the motion: acknowledge input, reveal nearby context, change reading context, or stay ambient. That decision sets duration, easing, distance, and the implementation token.
Is the interface changing reading context?
- distance
- 6px
- token
- motion.route
Three constraints keep the interface quiet
System
Motion must explain a state change
If the movement does not clarify feedback, hierarchy, or spatial context, it is removed.
Distance follows information hierarchy
Small controls use almost no travel. Route changes get only enough distance to register a new reading context.
Reduced motion preserves the same information
The fallback removes travel and delay without removing state, focus order, or hierarchy.
The fallback changes motion, not meaning
Accessibility
The standard version uses a six-pixel arrival to clarify hierarchy. The reduced version removes travel and resolves immediately, while keeping the same content and focus order.
Small travel clarifies that a new reading context arrived.
The same state resolves immediately without spatial travel.
state changed
Content, focus order, and hierarchy stay identical in both modes.
The portfolio now demonstrates a motion system, not a motion opinion
Outcome
Feedback, reveal, route, and reduced-motion states share one vocabulary and one implementation contract.
The evidence is the interface itself: the examples above are working React components, not presentation-only mockups.