stagger(30–160ms) · enter 300ms
Stagger Choreography
複数要素の入場を Micro / Standard / Dramatic / Wave の 4 preset で比較する。stagger の合計が 500ms を超えると遅く感じる——その budget 感覚を掴むためのデモ。
Kaito Lab
Motion Design
動きに重さと意図を与える実験。動くもの・コード・AI プロンプトをセットで置く。
hover(≤100ms) · settle 150–300ms
Hover Micro-interactions
Button lift / Card tilt / Icon rotate / Image zoom / Underline reveal の 5 パターン。hover は 100ms 以下で反応し、150–300ms で settle する。
animate(0 → n) · 1.6s · tabular-nums
Number Counter
useMotionValue + animate で KPI 数値を補間し、useTransform でフォーマットする。tabular-nums で桁の reflow を防ぐのが肝。duration は 1–2 秒が読みやすい。
word delay 90ms · char delay 25ms
Text Reveal
フレーズを単語単位・文字単位で分割し、順に fade + slide インさせる。tab で分割粒度を切り替えて stagger の効き方を比較する。
enter/exit x ±24 · height 0→auto · 250ms
List AnimatePresence
リストへの追加・削除・シャッフルを AnimatePresence と layout で表現する。要素の出入りと並び替えが spring でつながる。
enter x 60→0 · 300ms · auto-dismiss 3.5s
Toast Notification
ボタン操作でトーストを発火し、右下からスライドインして 3.5 秒後に自動退場する。複数発火時は AnimatePresence + layout でスタックが自然に整列する。
idle→loading→success/error · shake 400ms
State Feedback
ボタンの idle → loading → success / error 遷移。成功は bounce + checkmark draw、失敗は shake で表現する。opacity 単体での状態変化は禁止。
spinner 900ms · skeleton 1.4s · dots stagger 120ms
Loading Patterns
待ち時間の見せ方 5 パターンを並べて比較する。spinner は安全策、skeleton は構造が見える分体感速度が速い。dots はチャット系で定番。
fade / slide / zoom / push · 300–350ms · mode wait
Page Transitions
fade・slide・zoom・push の 4 パターンの画面遷移を切り替えて比較する。AnimatePresence mode="wait" で退場完了後に入場する。
whileInView · amount 0.4 · 500ms
Scroll Reveal
スクロールでビューポートに入るたびカードが fade + slide インする。once: false なので何度でも再発火する。
breathing 3.2s · floating 2.8s · spring(80, 18)
Ambient Loops
触っていない時にも生命感を出す 3 つの常時ループ演出。呼吸・浮遊・マウス視差。振幅を小さく保つのが疲れさせないコツ。
hero x -60→80 · orbs ∓40 / ∓24 · 700–1100ms
Counter-motion
手前の要素が右へ動くとき、背景の ambient レイヤーを逆方向にわずかにずらして奥行きを出す。before / after の比較デモ。
playful 250ms · premium 550ms · energetic 180ms
Motion Personality
同じ「下から登場」でも duration と overshoot の違いだけでブランドの温度感が変わることを 4 アーキタイプで比較する。
linear vs md3 vs apple vs bounce · 1.2s
Easing Lab
同じ移動を 7 種類の easing で並べ、曲線形状と着地の体感の対応を比較する。linear は spinner と progress 以外で使わない。
80 · 200 · 350 · 600 · 1200ms · md3 standard
Duration Lab
80ms から 1200ms まで duration を並べ、要素の種類ごとの体感差を比較する。tooltip は 80–120ms、page transition は 400–600ms が目安。
rigid 600ms · elastic 400ms · gas 1000ms
Material Easing
モーションを素材感（金属・ゴム・水・紙・煙・ガラス）で捉える。同じ移動でも質感パラメータで体感がまったく変わる。
linear · arc · s-curve · spiral · 1.4s
Path Types
同じ A → B の移動でも経路（直線・アーク・S 字・スパイラル）で体感がまったく変わることを CSS Motion Path で比較する。
opacity-only 600ms vs 3-layer stagger
Bad vs Good
同じ削除確認モーダルを、quality rule を無視した実装と遵守した実装で並べて比較する。opacity だけの linear と、position・scale・backdrop・stagger を重ねた実装の体感差。
6 presets · 160–950ms · bounce / gentle / accelerate
Emotion to Motion
喜び・穏やかさ・緊急・悲しみ・驚き・気品の 6 感情を duration・easing・移動・回転・scale の組み合わせで表現する。同じ「丸が登場する」動きでもパラメータだけで感情が変わる。
ambient 1200ms · primary 300ms · secondary 400ms
Three Pillars
primary（主役）だけのフェードは flat に感じる。secondary（影・アイコン）と ambient（背景の生命感）を重ねると、同じ通知 UI でも体感の質が一段上がる。
squash · anticipation · arcs · follow-through · secondary
Disney 12 Principles
『The Illusion of Life』の 12 原則のうち UI モーションに直結する 5 つをタブで切り替えて体感する教材。物理法則をどう嘘でリアルに見せるか。