Motion
Calm, purposeful motion
North moves like the night sky: slowly, smoothly and always for a reason. Motion explains what changed. It never shows off.
- Purposeful. Motion answers an action or shows a change of state. If it does neither, remove it.
- Calm. Long, soft settles; no bounces, no elastic overshoot, no spins.
- Quick to respond. Feedback starts within 100ms, even if the whole move takes longer.
- Respectful. When people ask for reduced motion, we fade instead of moving.
Easing
Four curves cover everything. Click a card to see it run.
Duration
| Token | Value | Use |
|---|---|---|
--n-motion-duration-instant | 80ms | Colour changes, toggles. |
--n-motion-duration-fast | 140ms | Hovers, small reveals. |
--n-motion-duration-base | 220ms | Menus, accordions, tabs. |
--n-motion-duration-slow | 360ms | Panels, drawers, page transitions. |
--n-motion-duration-deliberate | 600ms | Hero moments, the star rise. Once per screen. |
Bigger movements take longer. Small UI changes are 80–220ms; panels and page transitions 360ms; hero moments 600ms or more. Exits are faster than entrances.
Patterns
The star rise
Our brand moment. The star rises 40–70px and scales up from 60% while fading in, with the Oasis glow arriving just after. Used on the hub home page, product splash screens, video openers and closers. Once per experience.
.star {
animation: star-rise 1600ms var(--n-motion-easing-rise) both;
}
@keyframes star-rise {
from { transform: translateY(70px) scale(.6); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.star { animation: fade 1ms both; }
}Agent at work
When an agent is running, a soft Oasis glow pulses slowly (2.4s) behind its icon or status chip. No spinners on long AI tasks: show progress through named steps instead, as Shaheen does.
Running economic lens
Step 3 of 5 · about 2 minutes
Approval moments
When an action needs human approval, the card slides up 8px and settles (base, standard). On approval it confirms with a 140ms colour change and a tick; nothing flies away. The person should feel in command, not hurried.
Nothing has been sent yet.
Motion in video
| Element | Guidance |
|---|---|
| Openers and closers | Night sky, star rise, logo fades in below the star. 3–4 seconds. |
| Titles | Fade and rise 24px with the rise easing. Hold long enough to read twice. |
| Lower thirds | Slide in from the reading edge (left in English, right in Arabic), 360ms. |
| Transitions | Cuts or 400ms cross-dissolves. No wipes, spins or zooms. |
| Bento builds | Boxes appear one by one, 120ms apart, hero first. |
| Subtitles | White Helvetica Now Text with a soft Midnight shadow, always on. |
Dos and don'ts
Do
- Use motion to explain a change.
- Use the tokens for duration and easing.
- Keep one hero moment per screen.
- Honour reduced-motion settings.
Don't
- Bounce, spin, shake or overshoot.
- Animate everything on scroll.
- Use spinners for long AI tasks.
- Loop decorative animations behind text.
Last updated on 14 October 2026