VNL Works Labs

Motion / UI パーツを再利用できる形で蓄積する

VNL Works がサイト制作の現場で使う、“壊れにくいアニメーション”と“汎用UIパターン”のカタログです。 Tailwind CSS と相性の良い設計（CSS 変数 / data 属性 / 最小限の JS）を採用しています。

Package

Tailwind Motion Kit (mk)

速度・距離・イージングを“言語化”した上で、 Reveal / Hover / Dialog / Toast などを共通作法で提供します。

Source: /tailwind-motion-kit

Registry API

JSON Catalog

将来的に CLI / コピペ導線へ拡張できるよう、まずは JSON で“部品の棚卸し”をしています。

Guideline

品位を守るルール

動きの強さ、遷移の一貫性、アクセシビリティ。 “増やしても破綻しない”ための作法を明文化します。

Featured

よく使う部品

スクロールで要素を品良く出現させる基本部品。data属性で距離/遅延/ぼかしも調整可能。

複数要素を少しずつ時間差で出すための補助。CSS簡易版 + JS可変版。

Modal / Drawer / Bottom sheet を同じ作法で扱う。

成功/失敗/情報の通知。状態遷移に強い。

軽量タブ。見た目はCSS、操作/ARIAはJS。

依存ゼロの小さな説明。hover/focus-visibleで表示。