---
title: Motion
description: How things move on Nibiru sites — slowly, quietly, and not very often.
---

## Principles

- **Less is more.** A single 18-second breath is better than three pulses, four spins and a fade-up.
- **Transforms only.** Animate `transform` and `opacity`. Avoid `top`, `width`, `height` — they cause layout work.
- **Honour `prefers-reduced-motion`.** Every keyframe in the system is gated by a media query.
- **Hover earns motion.** Idle states are still. Motion happens when you *do* something — hover a card, click the Oracle.

## Token reference

| Token | Value | Use |
|---|---|---|
| `--nibiru-duration-fast`    | 150ms | Inline transitions (links, hairline shifts) |
| `--nibiru-duration-normal`  | 220ms | Hover lifts, button transforms, card glow |
| `--nibiru-duration-slow`    | 400ms | Modal panels, oracle reveal |
| `--nibiru-duration-breathe` | 18s   | Hero lotus breathing |
| `--nibiru-ease-out`         | `cubic-bezier(0.2, 0.7, 0.2, 1)` | Default ease-out |
| `--nibiru-ease-spring`      | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reserved for the Oracle panel rise |

## The breath

A six-pixel rise, a fraction-of-a-degree rotate, over 18 seconds. The lotus is alive but not asking for attention.

```css
@keyframes atelier-breathe {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.6deg); }
}
.atelier-hero__mark {
  animation: atelier-breathe 18s ease-in-out infinite;
}
```

## The oracle rise

220ms entrance. A small `translateY` and `scale(0.99)` so it feels like it grew, not popped.

```css
@keyframes oracle-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
#oracle-panel.is-open {
  animation: oracle-rise 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
```

## The hover lift

Cards and the primary button rise 1–2px on hover, with a deeper shadow.

```css
.card {
  transition: transform 240ms var(--nibiru-ease-out),
              box-shadow  240ms var(--nibiru-ease-out),
              border-color 240ms;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nibiru-shadow-lg);
}
```

## Reduced motion

```css
@media (prefers-reduced-motion: reduce) {
  .atelier-hero__mark,
  .card,
  #oracle-panel.is-open {
    animation: none;
  }
}
```

The site still **looks** right with motion off — animations are decoration, never information.

## Don't

- Don't pulse. The Oracle is a quiet ink-stamp, not a fire alarm.
- Don't combine multiple animations on the same element. Pick one.
- Don't animate longer than 400ms for UI feedback. User clicks should feel immediate.
- Don't use spring/overshoot ease for the hero — only for small "thing-just-arrived" moments.
