transitions-dev

Transitions.dev

t-* セレクターの名前空間と、意味を持つ CSS カスタムプロパティを備えた、ポータブルな CSS トランジション 32 種類です。貼り付けるだけで使えます。スニペットを貼り付け、ドキュメントに記載された HTML フックを設定すれば完了です。フレームワークへの依存はなく、デモ専用のマークアップもありません。また、すべてのスニペットに prefers-reduced-motion ガードが含まれています。

クイックリファレンス

トランジション	用途	リファレンス
カードのリサイズ	レイアウト状態が変わるときに、コンテナーの幅または高さをトゥイーンします。	01-card-resize.md
数字のポップイン	数値の更新時に、ぼかしを伴うスライドで各桁を再表示します。	02-number-pop-in.md
通知バッジ	小さなバッジをトリガーにスライドさせて表示し、ドットをポップさせます。	03-notification-badge.md
テキスト状態の切り替え	ぼかしを伴う上下のトランジションで、テキストをその場で切り替えます。	04-text-states-swap.md
メニューのドロップダウン	トリガーを起点に広がる、起点を考慮したドロップダウンを開きます。	05-menu-dropdown.md
モーダルの開閉	モーダルダイアログを拡大して表示し、閉じるときはより穏やかに縮小します。	06-modal.md
パネルの表示	クロスブラーを伴って、パネルを領域内にスライド表示します。	07-panel-reveal.md
ページの横並び切り替え	横並びの2つのページ間をスライドします（リスト ↔ 詳細、ステップ1 ↔ ステップ2）。	08-page-side-by-side.md
アイコンの切り替え	同じスロット内の2つのアイコンを、ぼかしとスケールを伴ってクロスフェードします。	09-icon-swap.md
成功チェック	フェード＋回転＋Y方向のバウンス＋パスのストローク描画を組み合わせて、アクションの完了を祝います。	10-success-check.md
アバターグループのホバー	アイテムの列を、距離に応じて浮き上がらせ、戻るときは弾むスプリングを適用します。	11-avatar-group-hover.md
エラー状態のシェイク	セグメントごとの cubic-bezier シェイクと、自動で元に戻る境界線＋メッセージです。	12-error-state-shake.md
ディゾルブを伴う入力のクリア	テキストフィールドをクリアするときに、飛び出し＋単語ごとの軌跡を表示します。	13-input-clear-dissolve.md
スケルトンローダーと表示	プレースホルダーをパルスさせた後、ロード済みコンテンツへクロスフェード＋クロスブラーで切り替えます。	14-skeleton-reveal.md
シマー表示のテキスト	ループ再生で、くすんだテキスト上をハイライトの帯が横切ります（純粋なCSS）。	15-shimmer-text.md
タブのスライド	セグメントコントロール内で、アクティブなピルをタブ間でスライドさせます。	16-tabs-sliding.md
ツールチップの開閉	遅延付きでフェード＋スケールインし、瞬時に消え、トリガー間を移動します。	17-tooltip.md
テキストの表示	積み重ねたテキスト行を、ぼかしを伴って順番に上昇させ、静かにフェードアウトします。	18-texts-reveal.md
カードのホバーチルト	カーソルに追従するグレアを伴って、カードをポインターの方向へ3Dで傾けます。	19-card-tilt.md
プラスからメニューへの変形	円形のトリガーを、開くメニュー／パネルへと変形させます。	20-plus-menu-morph.md
アコーディオンの展開	chevron の反転とともに、grid-rows を使ってパネルを拡大／縮小します。	21-accordion.md
トーストの開閉	トーストを下から浮き上がらせ、フェード＋クロスブラーを適用します。表示は消えるときよりゆっくりです。	22-toast.md
いいねボタン	いいね時に、ポップ＋パーティクルバーストでハートを塗りつぶします。	23-like-button.md
「詳細を見る」のホバー	ホバー時に chevron をスライドさせ、両端を広げて矢印にします。	24-learn-more-hover.md
チェックボックスのチェック	ボックスを塗りつぶしてから、チェックマークをストローク描画します。	25-checkbox-check.md
回転カウンター	縦方向のモーションブラーを伴って、スロットマシンの数字リールを回転させます。	26-spinning-counter.md
トグル	二重バウンスの行き過ぎを伴って、スイッチのつまみを移動させます。	27-toggle.md
思考状態	状態を維持している間はステータス行をシマー表示し、その後、次の状態に切り替えます。	28-thinking-states.md
推論ストリーム	エージェントの推論トランスクリプトを、ループ再生で一度に2行ずつ上へ送ります。	29-reasoning-stream.md
ストリーミングテキスト	ストリーミングされた単語を、ソフトなクロスブラーで1つずつ表示します。	30-streaming-text.md
マトリックスドットローダー	4×4のドットマトリックスを、スキャン／トゥインクル／オービット／パルスのパターンで点滅させます。	31-matrix-loader.md
バナーのスタッキング	トーストのようにバナーを重ねます。新しいバナーは浮き上がり、古いバナーは後ろへ押し戻されます。	32-banner-stacking.md
テキストのモーフィング	2つのラベルで共通する文字はそのまま残し、変化する部分だけをクロスブラーで切り替えて幅をイージングします。	33-text-morph.md
ソフトなテキスト切り替え	動きを伴わず、2つを同時に表示しながら、値をその場で新しい値へクロスブラーで切り替えます。	34-text-swap-soft.md
ドーナツチャート	均等な隙間と丸みのある角を持つリングセグメントを、新しい値へモーフィングします。	35-donut-chart.md

判定ルール

ユーザーがトランジションを求めた場合は、まず画面上で見える UI 要素に照らし合わせ、次に動詞を確認します。

• トリガー ＋ その上に浮かぶ小さなドット → 通知バッジ。
• トリガーから広がるサーフェス → ドロップダウン（アンカー付きで、起点を考慮）またはモーダル（中央配置で、アンカーなし）。
• ページの領域にスライドして入るサーフェス → パネル表示。
• 2 つの画面、リスト ↔ 詳細、またはステップ 1 ↔ ステップ 2 → ページの左右並列表示。
• 要素の幅または高さが変わる → カードのリサイズ。
• ラベルがその場で変わり、変更前後のテキストの先頭または末尾に共通の文字がある（Copy code から Copied、Follow から Following）→ テキストモーフィング。
• 要素のテキスト内容がその場で変わり、変更前後のテキストに共通部分がない（Processing から Done）→ テキスト状態の切り替え。
• ビューの背後にあるデータが変わったため、値がその場で更新される（グラフの期間、通貨、単位）→ 変更されたすべての値にソフトテキスト切り替え。
• ドーナツ型またはリング型のグラフ → ドーナツグラフ（間隔を均等にし、角の丸みを最小にして、データの変更時にモーフィングします）。
• 同じスロットに 2 つのアイコンがある → アイコン切り替え。
• 数値が更新される → 数値のポップイン。
• 確認／成功／「完了」の瞬間（チェックマーク、支払い処理完了、ファイルのアップロード）→ 成功チェック。
• 横方向に並んだスタック内の項目にホバーする（アバター、チップ、セグメントボタン、タグピル）→ アバターグループのホバー。
• フォームの検証エラー／「これは誤りです」というフィードバック（無効なフィールド、誤った PIN、重複した名前）→ エラー状態のシェイク。
• テキストフィールドをクリアする（検索ボックスの × ボタン、フィルターのリセット）→ ぼかしを伴う入力クリア。
• 読み込み後に実際のコンテンツへ切り替わるプレースホルダー（リスト行、カード、プロフィールヘッダー）→ スケルトンローダーと表示。
• 動きのある演出が望ましい、処理中／「思考中」のテキスト（読み込みラベル、ストリーミング状態）→ シマーテキスト。
• ハイライトが動く、相互排他的な小さな横並びの選択肢（ビュー切り替え、セグメントコントロール、フィルタータブ）→ スライド式タブ。
• トリガー上に表示されるホバー／フォーカス時のヒント（アイコンのツールチップ、情報バブル）→ ツールチップの開閉。
• リズムをつけて表示される、見出しと補足文のスタック（ヒーローコピー、空の状態、オンボーディングのステップ）→ テキストの段階的表示。
• ホバー時にポインターに反応して 3D で傾くカード／タイル（商品カード、カバーアート、会員カード。光の反射の有無は問いません）→ カードのホバー傾斜。
• 開くサーフェスそのものに変化する円形のトリガー（＋ FAB が広がってメニュー／パネルになる、作成ボタンが展開する）→ プラスからメニューへのモーフィング。サーフェスがトリガーから広がるだけの 別個の ポップオーバーである場合は、代わりにメニュードロップダウンを使います。
• 高さが変わって展開／折りたたみされる本文付きヘッダー（設定グループ、FAQ、フィルターセクション、「さらに表示」、開示パネル）→ アコーディオンの展開。
• 明確に一致するものがない → transitions reveal にフォールバックし、ユーザーに選んでもらいます。推測しないでください。

2 つのトランジションが当てはまりそうな場合は、デザイン上、より大がかりなサーフェスが明らかに必要でない限り、負荷が低いほうを選びます（パネル表示よりカードのリサイズ、モーダルよりドロップダウン、モーダル全体を使った演出より成功チェック）。成功チェックはアニメーションのみです。スピナーからチェックマークへの切り替えも必要な場合は、アイコン切り替えと組み合わせてください。

コマンド

このスキルでは、トランジションの直接的なリクエストに加えて、エージェントが認識すべき、名前空間付きの動詞を 4 つ提供します。プロジェクト内にインストールされた他のスキルの動詞と衝突しないよう、すべてのコマンドは transitions で始まります。

transitions reveal — すべてのトランジションを一覧表示

トリガーとなるフレーズ： transitions reveal、「トランジションを表示して」、「すべてのトランジションを一覧表示して」、「このスキルにはどんなトランジションがありますか」、「トランジションのカタログを表示して」。

動作： 32 個のトランジションを、名前、1 行の概要、対応するリファレンスファイル名を含む番号付きのプレーンテキストリストとして出力します。上記の ## Quick reference にある項目を再利用し、新しい文言は作成しないでください。プロジェクトにはアクセスしません。

transitions review — プロジェクトが適合するか監査する

トリガーフレーズ： transitions review、"review my project"、"audit my animations"、"where would transitions.dev help"、"find places to use this skill"。

動作：

1. ワークスペースを検索し、次の項目を見つけます。transition: 宣言、@keyframes、スタイルファイル内のハードコードされた ms / s の時間、判定ルールのパターンに一致するコンポーネント（モーダル、ドロップダウン、バッジ、検索入力、スケルトン、タブ、ツールチップなど）。
2. 見つかった各項目を判定ルールと照合し、最適なトランジションを1つ選びます。
3. ファイルごとにグループ化した番号付きリストを出力します。
   • path/to/Component.tsx:L42 — ドロップダウンが開くように見えるため、menu-dropdown（05-menu-dropdown.md）を提案します。
   • すでに t-* クラスを使っている、その場限りのトランジションは除外します。
4. 何も編集しません。最後に「transitions apply を任意の行に実行して、提案されたトランジションをインストールしてください。」と記載します。

transitions apply — 最適なトランジションをインストールする

トリガーフレーズ： transitions apply、"apply a transition here"、"add the right transition"、"install transitions-dev here"、"fix the animation on this element"。

動作：

1. コンテキストを読み取ります。現在開いているファイル、カーソルに最も近い要素、周辺の CSS / JSX を確認します。ユーザーがトランジションを明示的に指定した場合（例：transitions apply menu-dropdown）、それを使います。
2. そのコンテキストに対して ## Decision rules の判定ルールを適用し、トランジションを1つ選びます。2つが適合しそうな場合は、オーバーヘッドの小さい方を優先します（既存のルールと同じタイブレーク基準）。
3. 1行で提案します。「トリガーから開き、位置が固定される要素のため、ここには menu-dropdown を適用します。インストールしますか？」
4. 確認を受けたら、## Output format の既存の5ステップ手順（ルートブロック、スニペット、フック、動きを減らす設定のガード、必要に応じた JS のオーケストレーション）にそのまま従います。
5. エージェントが確信を持ってトランジションを1つ選べない場合は、transitions reveal に切り替えて、ユーザーに選択を求めます。

transitions refine — その場限りのモーションをモーショントークンに置き換える

トリガーフレーズ： transitions refine、"refine my transitions"、"scan for ad-hoc transitions"、"replace hardcoded durations with motion tokens"、"tokenize my animations"、"tune the durations / easing"、"audit my custom keyframes"、"make the timing consistent"、"align to the motion tokens"。

動作：

1. 専用のスタイルシートだけでなく、プロジェクト全体をスキャンします。 インラインの style= / CSS-in-JS、styled-components、<style> ブロック、duration-[300ms] のような Tailwind の任意値も対象です。その場限りのモーションとして、transition / animation のショートハンドとロングハンド、カスタムの @keyframes ブロック、ハードコードされた時間（…ms / …s）、イージング（cubic-bezier(...) またはキーワード）、移動距離（px）、scale(...)、blur(...) を探します。
2. 各値について、周辺のセレクター / コンポーネントと ## Decision rules から、モーションが何をするものか（モーダルを閉じる、ドロップダウンを開く、ツールチップ、バッジの表示、テキストの表示、ページのスライド、揺れなど）を推測します。@keyframes ブロックについては、それを動かす animation を読み取り、キーフレーム自体の時間とイージングを判断します。
3. 重要な判断基準は生の数値ではなく用途です。 推測した用途を ## Motion tokens で確認し、文書化された用途と一致するトークンのみを提案します。用途が一致する場合に限ります。300ms のモーダルを閉じる動作は、数値が異なっていても、どちらも「モーダルを閉じる」用途なので --duration-quick に対応します。値の用途がどのトークンの用途とも一致しない場合は no matching token usage と記載してそのまま残し、数値が近いというだけで置き換えを無理に提案しないでください。
4. ファイルごとにグループ化した番号付きリストを出力し、変更すべき値だけを示します。各項目は path/to/Component.css:L42 — モーダルを閉じる：300ms → var(--duration-quick) (150ms)、ease → var(--ease-smooth-out) の形式にします。キーフレームで動かすモーションでは、駆動する animation の時間 / イージングに対応するトークンを提案します。
5. 何も編集しません。最後に「変更を適用するには任意の行を承認するか、代わりに transitions apply を実行してトランジション全体をインストールしてください。」と記載します。

モーショントークン

32 種類のトランジションで共通して使われるモーションスケールです。transitions.dev の Motion tokens タブで公開されているものと同じトークンです。これらは _root.css の先頭に定義されているため、インポートすれば var(--…)（例：transition: transform var(--duration-fast) var(--ease-smooth-out)）で参照できます。

transitions refine は、既存の値を以下の用途に対応付け、参照するトークンを提案します。生の数値ではなく、用途に基づいて対応付けてください。たとえば、300ms のモーダルを閉じる動作も --duration-quick（150ms）に対応します。

時間

トークン	値	用途
--duration-stagger	40ms	アイテムごとのスタッガー間隔
--duration-micro	80ms	ツールチップ／パスの遅延、シェイクの区間、大きなスタッガー
--duration-quick	150ms	モーダル／ドロップダウンを閉じる動作、テキストの切り替え、ツールチップの表示
--duration-fast	250ms	アイコンの切り替え、ドロップダウン／モーダルを開く動作、タブのスライド、ページのスライド
--duration-medium	350ms	パネルを閉じる動作、トーストを閉じる動作
--duration-slow	400ms	パネルを開く動作、スケルトンコンテンツの表示、入力のクリア
--duration-very-slow	500ms	強調表示、バッジの表示、テキストの表示、成功チェック

イージング

トークン	値	用途
--ease-smooth-out	cubic-bezier(0.22, 1, 0.36, 1)	モーダル／ドロップダウン／パネルを開閉する動作、ページのスライド、サイズ変更、位置の変更
--ease-in-out	ease-in-out	アイコンの切り替え、テキストの切り替え、テキストの表示、スケルトンの表示
--ease-out	ease-out	ツールチップを開閉する動作
--ease-linear	linear	シマー、スケルトンのパルス、スピナー
--ease-bounce	cubic-bezier(0.34, 1.36, 0.64, 1)	バッジが弾むように表示される動作
--ease-bounce-strong	cubic-bezier(0.34, 3.85, 0.64, 1)	弾むようなホバー解除（アバターが元の位置に戻る動作）

距離

トークン	値	用途
--distance-micro	4px	テキストの切り替え
--distance-small	6px	エラー時のシェイク（短い区間）
--distance-base	8px	バッジの斜め表示、ページのスライド、エラー時のシェイク（長い区間）
--distance-medium	12px	テキストの表示
--distance-large	30px	チェックバッジの表示

スケール

トークン	値	用途
--scale-large	0.96	モーダルを開閉する動作
--scale-medium	0.97	ドロップダウンを開く動作
--scale-small	0.98	ツールチップを開く動作
--scale-tiny	0.99	ドロップダウンを閉じる動作

ぼかし

トークン	値	用途
--blur-small	2px	パネルの表示、アイコンの切り替え、テキストの切り替え、スケルトンの表示、数値のポップイン
--blur-medium	3px	ページのスライド、テキストの表示
--blur-large	8px	成功チェックを開く動作

共通インストール

_root.css をプロジェクトに一度だけコピーしてインポートするか、その :root ブロックをグローバルスタイルシートに貼り付けます。先頭には共通のモーショントークンスケール（--duration-*、--ease-*、--distance-*、--scale-*、--blur-*。## Motion tokens を参照）があり、その後に32 種類すべてのトランジションで使う、意味のある調整可能な変数が続きます。各スニペットは、--resize-*、--badge-*、--dropdown-*、--clear-*、--shimmer-*、--tabs-*、--tt-*、--stagger-*、--tilt-*、--morph-*、--acc-* など、これらの名前を参照します。

各リファレンスファイルには、そのスニペットに必要な変数のみが再掲されているため、ブロック全体を取り込まずに、単一のトランジションだけをインストールできます。ブロックを重複させないでください。_root.css がすでにインポートされている場合は、スニペットごとの :root を再度貼り付ける必要はありません。

transitions.dev のライブデモで使われる --pX-* のソーストークンは、意図的にエクスポートされていません。調整可能な値は意味のある名前に変更されており、デザイン用語はユーザーが自由に決められます。入力のクリア、シマーテキスト、タブ、ツールチップなど、一部のトランジションにはテーマによって異なる色トークンがあります。各リファレンスファイルに html[data-theme="dark"] のオーバーライドが記載されています。

出力形式

ユーザーのプロジェクトにトランジションを追加する際は、次の手順に従います。

1. _root.css の変数をユーザーのグローバルスタイルシートにインストールします。ただし、まだ定義されていない場合に限ります。トランジションを1つだけインストールする場合は、参照ファイルにある個別スニペットの :root ブロックだけを使います。共通ブロックがすでにインポートされている場合は、重複させないでください。
2. 選択したトランジションの CSS を、該当する参照ファイルからそのまま貼り付けます。セレクターを書き換えたり、トランジションを短縮形にまとめたり、will-change を削除したりしないでください。スニペットは調整・テスト済みです。
3. ドキュメントに記載されている HTML フック（クラス名（.t-dropdown、.t-modal、.t-success-check、.t-avatar、.t-clear、.t-skel、.t-shimmer、.t-tabs、.t-tt、.t-stagger、.t-tilt、.t-morph、.t-acc、…）と状態属性（data-open、data-state、data-page、data-origin、aria-selected、aria-expanded、.is-open、.is-closing、.is-error、.is-shaking、.has-value、.is-clearing、.is-pulsing、.is-revealed、.is-shown、.is-hiding、.is-hover、.is-tilting）を設定します。
4. @media (prefers-reduced-motion: reduce) ブロックは必ず残してください。すべてのスニペットに含まれています。削除すると、コンポーネントがアクセシビリティ監査に合格できなくなります。
5. JS が必要なトランジション（ドロップダウン、モーダル、テキストの切り替え、数値のポップイン、ページスライド、成功チェック、アバターグループのホバー、エラー状態のシェイク、入力欄のクリア、スケルトンの表示、タブのスライド、ツールチップ、テキストの表示、カードのホバーティルト、プラスからメニューへのモーフ、アコーディオンの展開）では、参照ファイルから小さなオーケストレーション用スニペットをコピーし、ユーザーの DOM に合わせてセレクターを調整します。getComputedStyle(...)getPropertyValue("--…") によるタイミングの取得はそのまま残し、再生時間が :root の値と同期するようにしてください。シマー効果のテキストは CSS のみで実現でき、JS は不要です。

差分は小さく保ちます。トランジションの導入に必要なファイルだけを編集してください。ユーザーが既存の変数名を変更したり、無関係な CSS を整形し直したり、モーションライブラリを追加したりしないでください。

よくある避けるべきミス

• ドロップダウン／モーダルを閉じるときのクラス削除を省略する — .is-closing を削除する setTimeout がないと、次に開くとき、閉じる際のスケールから始まり、開く前の通常のスケールから始まりません。
• テキスト切り替え、数値のポップイン、成功チェックの再生、エラー状態のシェイクでリフローを忘れる — クラス／属性を削除してから再追加する間に void el.offsetWidth（または offsetHeight）を実行することで、アニメーションが確実に再生されます。
• 内側のパーツではなく、単一のコンテナをアニメーションさせる — バッジではトリガーではなくドットをアニメーションさせます。ページスライドではコンテナではなくページセクションをアニメーションさせます。
• transition: … を transition: all に置き換える — 無関係なスタイル変更が意図せず適用されないよう、各スニペットでは意図的にプロパティを正確に指定しています。
• 成功チェックの stroke-dasharray をハードコードする — スニペットではプレースホルダーとして 20 を使用しています。使用するパスに合わせて path.getTotalLength() の値を切り上げて置き換えてください。そうしないと、ストロークが事前に表示されたり、描画しすぎたりします。
• アバターグループのホバーで CSS に transition-timing-function を設定する — バウンスするイージングアウトが mouseleave のときだけ適用されるよう、--shift／--scale-active を設定する前に、JS でインライン設定する必要があります。
• エラー状態のシェイクで .is-error と .is-shaking を1つのクラスにまとめる — これらを独立させておくことで、エラー表示全体をちらつかせずにシェイクを再生（削除 → リフロー → 再追加）できます。
• ダークモードで入力欄のクリア時のグローに mix-blend-mode: multiply を使い続ける — screen に切り替え、--glow-opacity を約 0.85 に上げ、JS で白いグラデーションを描画します。
• タブのピルの初期位置をトランジションなしで設定し忘れる — 初回描画時とリサイズ時には、transition: none を指定して transform と width を設定します（その後、リフローして元に戻します）。そうしないと、ピルが translateX(0)／width: 0 からアニメーションして表示されます。
• カードのホバー時の傾きで、傾く要素自体のポインターを追跡する — .t-tilt-card ではなく、平坦な外側の .t-tilt ラッパーに pointermove をバインドしてください。そうしないと、回転する縁がカーソルの下に入り、ホバーがちらつきます。
• アコーディオンのグリッドトラックにパディングを設定する — パディングは .t-acc-panel ではなく、.t-acc-panel-inner に設定してください。0fr トラックにパディングを設定すると高さが少し残り、パネルが完全に閉じません。
• アコーディオンのシェブロンの d パスをモーフィングする — CSS の d: パス補間は Chromium でしか使えないため、モバイル版 Safari／Firefox ではアニメーションしません。代わりにシェブロンを垂直方向に反転（transform: scaleY(-1)）してください。パスのモーフィングと同様に中間点で水平線を通過し、どの環境でも動作します。パスは viewBox の中心を軸に対称にし、反転中もストローク幅が一定に保たれるよう vector-effect: non-scaling-stroke を追加してください。スニペットではこの方法を採用しています。

参考ファイル

• 01-card-resize.md — カードのリサイズ
• 02-number-pop-in.md — 数字のポップイン
• 03-notification-badge.md — 通知バッジ
• 04-text-states-swap.md — テキスト状態の切り替え
• 05-menu-dropdown.md — ドロップダウンメニュー
• 06-modal.md — モーダルの開閉
• 07-panel-reveal.md — パネルの表示
• 08-page-side-by-side.md — ページの並列表示
• 09-icon-swap.md — アイコンの切り替え
• 10-success-check.md — 成功チェック
• 11-avatar-group-hover.md — アバターグループのホバー
• 12-error-state-shake.md — エラー状態のシェイク
• 13-input-clear-dissolve.md — 溶けるように消える入力内容
• 14-skeleton-reveal.md — スケルトンローダーと表示
• 15-shimmer-text.md — シマー効果のあるテキスト
• 16-tabs-sliding.md — スライドするタブ
• 17-tooltip.md — ツールチップの開閉
• 18-texts-reveal.md — テキストの表示
• 19-card-tilt.md — カードのホバーチルト
• 20-plus-menu-morph.md — プラスからメニューへの変形
• 21-accordion.md — アコーディオンの展開
• 22-toast.md — トーストの開閉
• 23-like-button.md — いいねボタン
• 24-learn-more-hover.md — 「詳細を見る」のホバー
• 25-checkbox-check.md — チェックボックスのチェック
• 26-spinning-counter.md — 回転するカウンター
• 27-toggle.md — トグル
• 28-thinking-states.md — 思考状態
• 29-reasoning-stream.md — 推論ストリーム
• 30-streaming-text.md — ストリーミングテキスト
• 31-matrix-loader.md — マトリックスドットローダー
• 32-banner-stacking.md — バナーのスタッキング
• 33-text-morph.md: テキストの変形
• 34-text-swap-soft.md: テキストのソフトな切り替え
• 35-donut-chart.md: ドーナツチャート
• _root.css — そのままインポートできる、ユニバーサルインストールブロック単体です。