動き

原則

• シンプルが美。 18秒の単一の息よりも、3つのパルス、4つの回転、フェードアップの方が良い。
• 変形のみ。 transform と opacity をアニメーション化する。top、width、height の使用を避ける — これらはレイアウト作業を引き起こす。
• prefers-reduced-motion を尊重。 システム内のすべてのキーフレームがメディアクエリによって制御されている。
• ホバーで動きを得る。 非アクティブな状態は静的である。動きは何かを行うときに起こる — カードをホバーしたり、Oracle をクリックしたりする。

トークンリファレンス

トークン	値	使用
--nibiru-duration-fast	150ms	インライントランジション（リンク、ヘアラインシフト）
--nibiru-duration-normal	220ms	ホバーのリフト、ボタンの変形、カードのグロー
--nibiru-duration-slow	400ms	モーダルパネル、オラクルの露出
--nibiru-duration-breathe	18s	ヒローロットスの呼吸
--nibiru-ease-out	cubic-bezier(0.2, 0.7, 0.2, 1)	デフォルトのイージーアウト
--nibiru-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	オラクルパネルの上昇に予約

呼吸

6ピクセルの上昇、わずかな角度の回転、約18秒間。蓮は生きているが、注目を求めていない。

@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;
}

オラクルの上昇

220ミリ秒のエントリー。小さなtranslateYとscale(0.99)で、それが大きくなったように感じさせる、ポップしたような感じをしない。

@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);
}

ホバー升

カードとプライマリーボタンは、ホバー時に1～2ピクセル上昇し、より深い影を持つ。

.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);
}

リデュースド・モーション

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

サイトはモーションをオフにしても見えます正しく——アニメーションは装飾であり、決して情報ではありません。

しないでください

• パルスしないでください。オラクルは静かなインクスタンプであり、火災警報ではありません。
• 同じ要素に複数のアニメーションを組み合わせないでください。一つを選んでください。
• UIフィードバックには400ミリ秒を超えてアニメーションさせないでください。ユーザーのクリックは直感的であるべきです。
• ヒーローに対してスプリング/オーバーシュートイージングを使用しないでください。小さな「何かが到着した」瞬間のみに使用してください。