Kinetics：144 个弹簧物理 Web 微交互（CSS + React 可复制）

Kinetics 是一套面向 Web 界面的弹簧物理动效合集：144 个微交互，每个都有在线演示、物理参数读数，以及可直接复制的 CSS 和 React 代码。在线画廊：https://kinetics.colorion.co

Kinetics

项目简介

多数 UI 动效写死 duration + easing，手感一成不变。Kinetics 把动画建在 spring physics 上——刚度、阻尼、质量那一套，而不是「跑 300ms 的 ease-out」。仓库本身是一个 Astro 静态站，用来展示和拷贝这些效果，不是要你装成 npm 包再 import 一整套框架。

当前 GitHub 约 395 stars，在线站点由 colorion 托管。

核心特性

144 个弹簧微交互：按钮、卡片、列表、开关、加载态等常见界面元件
每个效果三件套：实时 Demo + 物理参数读出 + CSS / React 代码面板
复制即用：不绑特定组件库，CSS 和 React 片段直接贴到自己项目
可调物理感：从读数里看 stiffness / damping 一类参数，比死记 cubic-bezier 更直观
本地可改：效果样式和交互脚本拆开，方便 fork 后加自己的 card

技术栈

项	说明
站点框架	Astro 4.x
动效语言	原生 CSS + React 示例片段
运行时脚本	`public/js/main.js`（面板/复制/Demo）、`physics-demo.js`（弹簧示波器）
字体	Google Fonts（Archivo / Inter / JetBrains Mono），可改自托管

package.json 里几乎只有 astro 依赖，构建产物是纯静态 dist/。

本地跑起来

bash

git clone https://github.com/ckissi/kinetics.git
cd kinetics
npm install
npm run dev      # http://localhost:4321
npm run build    # 输出 ./dist
npm run preview

仓库结构

text

src/
  pages/index.astro      # 页面壳：head、字体、CSS、脚本
  content/body.html      # 全部 markup（144 张卡片等），raw 引入
                         # 避免 React 片段里的 {}、` 被 Astro 当表达式
public/
  css/   base · hero · gallery · effects-a/b/c · closing
  js/    main.js · physics-demo.js

改某个动效时：

在 src/content/body.html 找到对应 .card（含 .card-stage / .code-panel）
样式在 public/css/effects-*.css
交互行为按 class 名挂在 public/js/main.js

怎么用到自己项目

典型流程：

打开 kinetics.colorion.co，点进感兴趣的卡片
View code，在 CSS / React 标签间切换，复制片段
贴到自己的组件或全局样式；需要更「弹」或更「闷」时，对照面板上的物理参数微调

它解决的是「从零搓弹簧曲线 + 写交互」的起步成本，不是封装成 import { BounceButton } from 'kinetics' 那种组件库。适合设计系统、落地页、后台细节反馈。

小结

如果你在挑一套 有物理感、可抄代码的 Web 微交互参考，Kinetics 比单纯 easing 合集更贴手：有 Demo、有参数、有 CSS/React 双份输出，源码结构也简单。

GitHub：https://github.com/ckissi/kinetics
在线画廊：https://kinetics.colorion.co