---
title: "Mouvement"
description: "Comment les choses se déroulent sur les sites de Nibiru : lentement, discrètement et rarement."
---

## Principes

- **Moins est plus.** Une seule respiration de 18 secondes est meilleure que trois pulsations, quatre rotations et une montée en intensité.
- **Transforme uniquement.** Animer `transform` et `opacity`. Évitez `top`, `width`, `height` — ils provoquent du travail de mise en page.
- **Respectez `prefers-reduced-motion`.** Chaque cléframe dans le système est soumis à une requête média.
- **Le survol gagne en mouvement.** Les états d'attente sont immobiles. Le mouvement se produit lorsque vous *faites* quelque chose — survolez une carte, cliquez sur l’Oracle.

## Référence des jetons

| Jeton | Valeur | Utilisation |
|---|---|---|
| `--nibiru-duration-fast`    | 150ms | Transitions en ligne (liens, décalages fins) |
| `--nibiru-duration-normal`  | 220ms | Levées de survol, transformations de boutons, éclat de carte |
| `--nibiru-duration-slow`    | 400ms | Panneaux modaux, révélation de l'oracle |
| `--nibiru-duration-breathe` | 18s   | Respiration du lotus héroïque |
| `--nibiru-ease-out`         | `cubic-bezier(0.2, 0.7, 0.2, 1)` | Défaut de sortie douce |
| `--nibiru-ease-spring`      | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Réservé pour l'ascension du panneau de l'oracle |

## La respiration

Une élévation de six pixels, une rotation d'une fraction de degré, sur plus de 18 secondes. Le lotus est vivant mais ne demande pas d'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;
}
```
## L'essor de l'oracle

220 ms d'entrée. Une petite translationY et une échelle à 0,99 pour qu'il ait l'impression de s'être développé, pas de sauter brusquement.
```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);
}
```
## Le levier de survol

Les cartes et le bouton principal se soulevant de 1 à 2 pixels au survol, avec une ombre plus profonde.
```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);
}
```
## Réduction du mouvement
```css
@media (prefers-reduced-motion: reduce) {
  .atelier-hero__mark,
  .card,
  #oracle-panel.is-open {
    animation: none;
  }
}
```
Le site **semble** toujours correct avec les mouvements désactivés — les animations sont uniquement décoratives et ne transmettent jamais d'informations.

## Ne faites pas

- Ne pulsez pas. L'Oracle est un tampon d'encre silencieux, pas une sonnette d'incendie.
- Ne combinez pas plusieurs animations sur le même élément. Choisissez-en une.
- N'animez pas plus de 400 ms pour la rétroaction utilisateur. Les clics des utilisateurs devraient se sentir immédiats.
- N'utilisez pas l'effet de rebond/survol pour le héros — seulement pour les petits moments où quelque chose vient juste d'arriver.
