VNL Works Labs

再利用できるUI / Motion 設計資産

VNL Works がサイト制作の現場で使う、再利用できるUI/motion設計資産のカタログです。 Tailwind CSS と相性の良い設計（CSS 変数 / data 属性 / 最小限の JS）を採用し、案件の立ち上げを加速します。

74 コンポーネント3 カテゴリCSS + JS

Public Demo

AI Crawl Observatory β

AI クローラーを bot 種別ごとに Allow / Charge / Observe へ分岐し、x402 の 402 応答と公開ダッシュボードをまとめた検証デモです。

Package

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

Source: /tailwind-motion-kit

Registry API

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

Guideline

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

Featured

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

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

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

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

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

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