Catalog
Components
そのままコピペして使える“動きの部品”と“UIパターン”。 まずは 壊れにくさ と カスタマイズ性 を優先しています。
22 / 22 components
Package: tailwind-motion-kit
motion
Reveal (InView)
css+js
スクロールで要素を品良く出現させる基本部品。data属性で距離/遅延/ぼかしも調整可能。
scrollrevealinview
motion
Stagger
css+js
複数要素を少しずつ時間差で出すための補助。CSS簡易版 + JS可変版。
staggerlistscroll
motion
Hover / Press / Focus Ring
css
カード/ボタンに“触れた感”を付ける。transform衝突を避けるmk-transformも同梱。
hoverpressfocus
motion
Underline (link polish)
css
リンクの下線を“品よく”。テキストリンクの質が上がる定番。
linkunderline
ui
Loaders (Skeleton / Spinner / Dots)
css
“待ち”を気持ち良くする小物セット。
loadingskeletonspinner
motion
Text Reveal (chars / words)
css+js
文字/単語を分割して順番に出す。タイトルに効く。
texttypography
patterns
Count Up
js
実績/統計の数値をスクロール時にカウントアップ。
numbersstats
motion
SVG Line Draw
css+js
SVGの線を描くアニメーション。ロゴや線画に。
svgillustration
motion
Background Loop (subtle)
css
主張しすぎない背景のループ。LPの品位を支える。
backgroundambient
motion
Magnetic (CTA)
css+js
CTAを“吸い付く”ように。強さは控えめが上品。
ctahover
ui
Dialog / Drawer
css+js
Modal / Drawer / Bottom sheet を同じ作法で扱う。
modaldrawer
ui
Collapse / Accordion
css+js
FAQ向けの折りたたみ。JS版推奨（内容高さが安定）。
accordionfaq
ui
Toast
css+js
成功/失敗/情報の通知。状態遷移に強い。
toastnotification
patterns
Scroll Progress Bar
demo
css+js
ページ上部に進捗バー。長文記事やLPに。
scrollnavigation
patterns
Nav Underline Indicator
css+js
ナビ下線がスッと移動する。サイトの品位が上がる。
navigation
motion
Tilt (subtle 3D)
css+js
カードに微小な3D。transform衝突を避けるため“内側要素”推奨。
hover3d
motion
Marquee (controlled loop)
css
控えめなループ。ロゴ列やキーワード列に。
loopbranding
motion
Attention (pulse / shake)
css
“ここぞ”の注意喚起。多用は品位を損ねるので限定利用向き。
attentionform
patterns
UI State (idle/loading/success/error)
css+js
非同期処理の状態遷移を、見た目と責務で分離。NyanoやToolsで特に効く。
stateasync
ui
Tabs
css+js
軽量タブ。見た目はCSS、操作/ARIAはJS。
tabsarianavigation
ui
Tooltip (CSS-only)
css
依存ゼロの小さな説明。hover/focus-visibleで表示。
tooltiphint
patterns
Stepper
css
フローの段階表示。Web3のTxフローにも流用可能。
progressflow