Web UIの動きを「秒数＋イージング」から卒業したい開発者に、コピペだけで試せる新しい選択肢が届きました。

スロバキアのフルスタック開発者Csaba Kissi氏（@csaba_kissi）が、2026年7月3日にオープンソースのモーションエフェクトライブラリ「Kinetics」の拡充を告知しました。収録数は99種類で、各エフェクトにCSS版・React版・AIコーディングエージェント向けプロンプトの3形式が揃っています（参考）。

この記事では、Kineticsが何を解決するのか、99種類の内訳、実際の使い方までを整理します。

この記事でわかること

  • Kineticsが固定秒数のイージングと違う理由
  • 99種類のアニメーションが3カテゴリに分かれる構成
  • CSS・React・AIプロンプトをコピーする手順
  • Framer Motionなど既存ライブラリとの使い分け

https://kinetics.colorion.co/

固定秒数のアニメーションが抱える限界

CSSのtransitionやanimationは、多くの場合「何秒かけて動かすか」と「どんなカーブで動かすか」の2値で制御します。見た目は整いますが、途中で別の操作が入ると破綻しやすいのが弱点です。連打されたクリック、高速スクロール、レイアウト変更の途中でアニメーションが割り込まれると、動きがスナップしたり、最初からやり直したりします。秒数ベースの設定には「今どの位置にいるか」という概念がないためです。

Kineticsはこの課題に、スプリング物理（ばねの動きを数式で再現する方式）で向き合います。公式サイトでは「stiffness（硬さ）」と「damping（減衰）」の2値で動きを調整する設計を掲げています。途中で割り込まれても、現在の速度から積分を続けるため、再スタートの違和感が出にくい、と説明されています（参考）。

Kineticsとは何か

https://github.com/ckissi/kinetics

Kineticsは、Webインターフェース向けのスプリング物理ベースのマイクロインタラクション集です。GitHubリポジトリckissi/kineticsでソースが公開されており、ライブデモサイトはkinetics.colorion.coで提供されています。Csaba Kissi氏が運営するColorionネットワークの一員で、CSSトグル集（colorion-toggles）やカラーパレットツールなど、コピペ前提のフロントエンド素材サイト群と同系統のプロダクトです。

READMEによると、Kineticsは「99 spring-physics micro-interactions」のギャラリーとして構成されています。npmパッケージではなく、必要なコード片をそのまま貼り付けて使うレジストリ型です。アニメーション専用ライブラリへの依存も不要で、純粋なCSSだけで動くエフェクトも含まれます。

2026年7月4日時点でGitHubのスター数は69、最終更新は同日のUTC 10:44頃です。リリースタグはまだ切られておらず、サイトとリポジトリの更新で機能が追加される運用になっています。

99種類は3カテゴリに均等配置

告知で注目された「99種類」は、サイト上で次の3セクションに33件ずつ並んでいます。

カテゴリ 内容の例
Interaction & Input カードの高さ伸縮、マグネットボタン、数字カウンター、タブインジケーター、ドラッグで閉じるカード
Feedback & State スクランブル文字表示、トーストのオーバーシュート、リップル、3Dキーキャップ風ボタン
Surface & Motion エラー時のシェイク、ブックマークリボンの落下、テキストの波打ちアニメーション

各カードにはライブデモ、エフェクト名、物理パラメータの読み取り値（例：spring(320, 24)やmagnet(0.35)）が表示されます。デモを触りながら数値の意味を確認し、そのままコードを持ち帰れる構成です。

CSS・React・AIプロンプトの3形式が標準装備

Kineticsの最大の実用ポイントは、1つのエフェクトから3種類の成果物をコピーできる点です。

CSS版はtransitionや@keyframesを中心としたスタイルです。カードの高さアニメーションのように、JavaScriptで高さを測らずcubic-bezierでスプリング風の動きを再現する例もあります。レイアウトスラッシングを避けたい場面でそのまま使えます。

React版はuseStateやuseRefを使ったコンポーネント例です。マグネットボタンではポインタ位置からオフセットを計算し、transformで追従させるコードが示されています。既存のReactプロジェクトにファイルを追加するだけで試せます。

Prompt版は、AIコーディングエージェントに渡す自然言語の指示文です。「クリックで高さが伸びるカードを、スプリング風のcubic-bezierで0.5秒アニメーションさせる」といった具体要件が書かれており、CursorやClaude Codeなどのエージェントに貼り付けて実装を任せる用途を想定しています。Csaba Kissi氏の告知でも「Prompt version for your AI coding agent」と明記されています。

サイトの「View code」からタブを切り替え、「Copy」でクリップボードに取り込む流れです。ビルドステップは不要です。

使い方の流れ

  1. kinetics.colorion.coで目的のエフェクトを探す
  2. ライブデモで動きとパラメータ読み取りを確認する
  3. CSS・React・Promptのいずれかをコピーする
  4. 自分のプロジェクトに貼り付け、必要ならstiffnessやdampingの数値を微調整する

ローカルでサイト全体を動かす場合は、リポジトリをクローンしてnpm installのあとnpm run devで起動します。Astroベースの静的サイトで、エフェクト定義はsrc/content/body.html、デモの挙動はpublic/js/main.jsにまとまっています。カスタムエフェクトを追加したい場合は、この2ファイルと対応するCSSを編集する形になります。

Framer Motionなどとの使い分け

スプリング物理のアニメーションといえば、React界隈ではFramer MotionやReact Springが定番です。これらはランタイムライブラリとしてプロジェクトに組み込み、コンポーネントのpropsやフックで動きを制御します。表現の自由度は高い一方、依存関係と学習コストが乗ります。

Kineticsは対照的に「完成済みのレシピ集」です。99パターンのうち近いものを探し、コードを貼って終わり、というワークフローに最適化されています。大規模なページ遷移や複雑なジェスチャー連鎖には向きませんが、トースト表示・タブ切り替え・ボタンのフィードバックなど、UIの細部を素早く仕上げたい場面で効きます。

似た名称の「Kinetik」（kinetik.ink）という別プロジェクトもありますが、こちらはFramer Motion＋Tailwindの26コンポーネント集で、作者もリポジトリも異なります。検索や導入時はスペルで見分けてください。

今後の活用のヒント

AI支援開発が普及するいま、Prompt版の同梱は地味に効きます。デザインの参考画像だけを渡すより、スプリングの挙動まで言語化された指示文のほうが、エージェントの出力精度を上げやすいからです。フロントエンド開発者はCSS版やReact版を直接使い、プロトタイプ段階ではPrompt版でエージェントに叩き台を作らせる、という二段構えも現実的です。

Kineticsは「動きの辞書」として棚に置いておく価値があります。ゼロからキーフレームを考える時間を、99種類の実例と3形式のコピペに置き換えられるツールです。