Selected work
CryptoNow motion system
Motion design and UI animation for CryptoNow, produced with Trampolin from supplied product interface designs.
Interface motion
How the interface responds.
Wheels developed animation examples showing how CryptoNow widgets, navigation and dialogs change state. The recordings show motion design and animation in context, rather than a live software implementation.
Motion for different state changes.
-
01Keep the surrounding interface visible.
The dropdown opens while the dashboard stays in place, connecting the control with the content it reveals.
-
02Connect the dialog steps.
The investment sequence moves between input, confirmation and feedback states within the same dialog.
Motion system
From animation tests to implementation rules
After exploring several modal behaviours against an Uber reference, we developed the selected direction across navigation, dropdowns, price changes and desktop/mobile modal states. The final handoff translated the motion into exact timings, delays and cubic-bezier curves for implementation.
Different-level mobile navigation
Level change
A firm S-curve carries the window between levels. The direction reverses on exit, so the navigation keeps a spatial relationship between states.
- Duration
- 500 ms
- Curve
- cubic-bezier(0.79, 0.00, 0.21, 1.00)
Desktop modal and dropdown entrance
Modal settle
Visibility arrives quickly, while scale continues into a longer settle from 85% to 100%. The interface responds immediately without making the panel stop abruptly.
- Duration
- 1000 ms
- Curve
- cubic-bezier(0.02, 0.93, 0.01, 1.00)
Mobile modal entrance
Mobile rise
The modal keeps the same hierarchy on mobile but changes trajectory. Instead of scaling into place, the panel rises from below and settles into its final position.
- Duration
- 1000 ms
- Curve
- cubic-bezier(0.01, 0.88, 0.00, 0.98)
Masked vertical transition
Price change
The value transition uses masked vertical movement, with direction tied to the price change rather than a generic crossfade.
- Duration
- 500 ms
- Curve
- cubic-bezier(0.80, 0.00, 0.20, 1.00)
Repeated motion rules make state changes recognisable: familiar transitions help people keep track of hierarchy, context and value changes without learning a new behaviour each time.
Navigation on mobile.
The mobile recording shows transitions between sections within the available screen space. It complements the desktop examples without separating the motion from its interface context.
Project credits
- Client
- CryptoNow
- Agency / product partner
- Trampolin d.o.o.
- Starting point
- Product interface and UI material supplied to Wheels by Trampolin d.o.o.
- Wheels Studio
- Motion design, UI animation and motion references