Transitions.dev の代替サイト
Transitions.dev と同じことができる 6 サイトを並べて比較。すべて手作業で選んだモーションキット。
比較の基準Transitions.dev
デザインエンジニアによる実用レベルの UI トランジション集。CSS か React でそのままコピー。
詳細を開く →| サイト | コード | 料金 | 保存数 |
|---|---|---|---|
| Transitions.devこのサイト | コピー | 無料 | |
 Canvas UIReact, WebGL | レジストリ | 無料 | |
 interior.devReact | レジストリ | 無料 | |
 AmicroReact, Motion | npm | 無料 | |
 Animate UIReact, Motion, shadcn/ui | レジストリ | 無料 | |
 Fancy ComponentsReact, Motion | レジストリ | 無料 | |
 Smooth UIReact, Motion, shadcn/ui | レジストリ | 無料 |
モーションライブラリについて
モーションライブラリは、テキストの表示演出・動く背景・カーソルエフェクトなど、ページにそのまま置けるアニメーション部品を提供します。多くは React 製で、Tailwind CSS と Framer Motion を使います。どこまで自分でコードを持ちたいかで選びましょう。ファイル単位でコピーするものも、パッケージとして入れるものもあります。
向いている用途
- LP のファーストビュー
- 動く背景
- ボタンやカードの小さなインタラクション
