VNL Works Labs — 設計方針

1. モーションの“言語化”

部品が増えるほど、個別の気分で duration / easing / distance を決めるとサイトがバラつきます。 mk は CSS 変数（tokens）で「標準の速さ・距離・イージング」を定義し、各部品はそれを参照します。

• • 速度: --mk-duration-* を基準にする
• • 距離: --mk-distance-* を基準にする
• • イージング: --mk-ease-* を基準にする

2. data属性で“挙動”を渡す

Tailwind の utility だけで済ませると「どれがアニメ用の値か」が埋もれがちです。 mk の部品は data-mk-* で挙動を宣言し、JS が必要な場合のみ最小限で反映します。

3. “少しだけ”で効かせる

上品さは、派手さではなく「微細な一貫性」で生まれます。 目安として、移動量は 6〜20px 程度、duration は 160〜600ms 程度に抑えると扱いやすいです。

• • Hover は lift（小さな浮き） + shadow の組み合わせが堅い
• • Reveal は blur を多用しない（読みやすさ優先）
• • “遊び”は局所的に。全ページで bounce すると疲れます

4. アクセシビリティ（必須）

mk は prefers-reduced-motion を尊重し、動きを最小化する設計です。 また、Dialog / Tabs などは ARIA / フォーカス操作を前提にしています。

• • focus-visible のリングは “見える” 状態を守る
• • Dialog は ESC / 背景クリック / フォーカストラップが必要
• • Tabs は矢印キー（←→）と Home/End を扱えると丁寧

5. UI設計の観点（レポート参照）

添付のUIレポート（7階層モデル）を “実装側のチェックリスト” に落とし、以下の順で改善します。 まずは 知覚（Perception） と 構造（Architecture）を優先し、最後に 感情（Emotional） を足していきます。

• • コントラスト / 余白 / 境界（カード、セクション）の統一
• • 現在地が分かるナビ（/labs 配下なども active 表示）
• • タップ領域 44×44px を下回らない（特にモバイル）
• • モーションは理解の補助（移動量/速度を tokens で統一）

6. 部品を追加する手順

1. tailwind-motion-kit に CSS / JS を追加（必要なら tokens も追加）
2. motion-labs/registry/items に slug.json を追加
3. motion-labs/registry/index.json に一覧項目を追記
4. /labs/components に表示されることを確認

7. リポジトリ内ドキュメント

Tailwind Motion Kit の詳細は、リポジトリ内の markdown にまとまっています。