Experimental Concept — Motion System
Orbs
Design System
A dark-mode interaction system where glass, light, and atmospheric motion become structural UX primitives — not decoration, but a vocabulary of state.
5Core components
1Material language
∞State expressions
The Thesis Why motion belongs in the system
State is felt,
not just seen.
Every design system has a state story.
Components that communicate through material transformation — not color changes, not opacity shifts. Light moving through glass.
Primary Button State as material transformation
Step Tracker Progress as energy transfer
Notification & Validation Convergence and dispersal
Notifications materialize through convergence — two orbs flowing toward each other, meeting, then dissipating. The message appears as the light converges.
Transfer Complete
Funds settled successfully.
Live
Validation is a subtle illuminated process — an orb scanning the input, completing its pass, confirming the field. Not a harsh red border. A quiet confirmation of correctness.
File Transfer Throughput as spatial density
Uploading Archive.zip
Throughput visualized through orb density
Motion Token Schema How orbs are defined in the system
Orb Motion Tokens12 tokens
| Token | Property | Component | Value |
|---|
| orb.gradient | Color gradient | all | sunrise → purple → transparent |
| orb.blur.idle | Filter blur | button | 18px |
| orb.blur.flow | Filter blur | transfer | 16px |
| orb.opacity.idle | Opacity | button | 0.7 → 1.0 (pulse) |
| orb.opacity.flow | Opacity | transfer | 0 → 0.95 → 0 |
| orb.duration.flow | Duration | transfer | 2.8s |
| orb.duration.pulse | Duration | button | 5s |
| orb.easing.flow | Timing | transfer | linear |
| orb.easing.pulse | Timing | button | ease-in-out |
| orb.size.btn | Diameter | button | 120px |
| orb.size.connector | Diameter | stepper | 40px |
| orb.size.validation | Diameter | input | 36px |
What value this brings
A way for AI products to stand out
The AI app space looks increasingly the same. Treating motion and light as structural material — not decoration — gives an emerging product a distinct, ownable feel.
Delight as differentiation
When core capabilities converge, the interaction layer becomes the moat. Felt state — energy flowing, dispersing, converging — makes a product memorable.
A coherent system, not effects
Because every motion is a token, delight stays consistent across the whole product instead of becoming one-off flourishes that drift over time.