尚未偵測到更新。GitHub 發布版本後會顯示在這裡。
依最近已完成的 8 小時觀測回合間的 GitHub 星號增量排序
ZBrush-style sculpting for VFX, animation and games. VFX Reference Platform CY2026 and CY2027 builds, OpenUSD, a Python API and Send to Unreal. Free built-in AI: describe a brush and get it, or turn a
翻譯準備中
個人 GitHub 帳號下公開儲存庫的擁有者可以登入並驗證所有權，自行管理介紹，無需管理員核准。
登入並產生驗證檔案，在 30 分鐘內將其提交至此儲存庫的預設分支。其他分支或分叉儲存庫中的檔案無效。然後在下方檢查檔案，即可無需管理員核准直接管理專案。請保留檔案以維持管理權限。
如需登入，將前往登入頁面。登入後請回到此處，再次點擊所選的驗證按鈕。
在專案資料夾中執行 /nomorevibe verify，即可驗證所有權並自行管理介紹。
一分鐘完成驗證A motion design system explorer. Adjust the tokens that define timing and easing, and the interface answers in real time.
翻譯準備中
取自儲存庫 README
正在載入完整 README。 以下為已儲存的摘錄。
A motion design system explorer built for designers learning how animation tokens drive UI behavior.
Cadence demonstrates the relationship between design tokens and motion through three interactive tools: Token Lab, a live token editor; the Principles Library, animation principles applied to UI components, the classic 12 plus 6 extended design-engineering principles; and Motion Tiles, a pooled Rive mosaic that runs the system's three motion personalities at field scale.
Built with: React, Framer Motion, CSS Custom Properties, Vite檢視完整 README ↗A motion design system explorer built for designers learning how animation tokens drive UI behavior.
Cadence demonstrates the relationship between design tokens and motion through three interactive tools: Token Lab, a live token editor; the Principles Library, animation principles applied to UI components, the classic 12 plus 6 extended design-engineering principles; and Motion Tiles, a pooled Rive mosaic that runs the system's three motion personalities at field scale.
Built with: React, Framer Motion, CSS Custom Properties, Vite
Live: https://cadence.davidpreli.com
A live editor for motion design tokens: duration, easing, delay, scale. Adjusting token values updates components across the UI in real time. The relationship between token and behavior is visible and immediate. A Constrained / Explore toggle switches each control between semantically bounded ranges and the full range, so the editor teaches correct token usage without locking the user out of experimentation.
Token sets export as a downloadable file in four formats: W3C Design Tokens (DTCG), flat JSON, a drop-in CSS :root block, and a ready-to-use Framer Motion module with the spring as a native { type: 'spring' } config. The DTCG and flat files import back into the tool, with a report listing any value clamped, filled, or ignored. That is the bridge from a tuned token set to the artifact an engineer's pipeline consumes.
Animation principles, each demonstrated through a real UI component. Each principle is interactive, isolated, and driven by the token system. The classic 12 principles of animation:
Six extended design-engineering principles that bridge animation and systems thinking:
A pooled mosaic of Rive tiles that runs the system's three motion personalities at field scale. Snappy, Standard, and Cinematic name the same characters in both tools, and each tool speaks them in its own terms: Token Lab as interaction tokens, the grid as an ambient clock (period, envelope, spread, cell, gap). Change a preset and every tile retimes together. Drag the spread and the change crosses the grid in a wave.
The grid is landing-gated, so its WebGL2 runtime and the tiles load only when you enter it. The per-tile Rive bindings were built with Claude Code driving the Rive editor over MCP, and the landing walks through that build.
Motion tokens are defined as CSS Custom Properties and consumed by Framer Motion at the component level.
:root {
/* Duration */
--motion-duration-fast: 100ms;
--motion-duration-base: 200ms;
--motion-duration-slow: 400ms;
--motion-duration-slower: 600ms;
/* Duration scalar: a unitless multiplier on the durations (effective = base * scalar) */
--motion-duration-scalar: 1;
/* Easing */
--motion-ease-linear: cubic-bezier(0, 0, 1, 1);
--motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--motion-ease-enter: cubic-bezier(0, 0, 0.2, 1);
--motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
--motion-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Delay */
--motion-delay-none: 0ms;
--motion-delay-short: 50ms;
--motion-delay-medium: 100ms;
--motion-delay-long: 200ms;
/* Scale: press keys shrink below 1, lift grows above 1 */
--motion-scale-press-subtle: 0.98;
--motion-scale-press-base: 0.95;
--motion-scale-press-expressive: 0.9;
--motion-scale-lift: 1.02;
/* Spring (physics): unitless, no duration; settle emerges from these three */
--motion-spring-stiffness: 170;
--motion-spring-damping: 20;
--motion-spring-mass: 1.5;
}
cadence/
├── README.md
├── docs/
│ ├── case-study.md
│ ├── token-architecture.md
│ ├── principles/
│ │ └── [one file per principle]
│ └── decisions/
│ └── [architecture decision records]
├── e2e/
│ └── [Playwright suite, run against built output]
├── worker/
│ └── index.js
└── src/
├── tokens/
│ └── motion.css
├── background/
├── components/
│ ├── TokenLab/
│ ├── PrinciplesLibrary/
│ ├── MotionTiles/
│ └── [one folder per component]
└── principles/
└── [one folder per principle]
npm install
npm run dev
Full documentation lives in /docs. Architecture decisions are recorded in /docs/decisions. The case study is in /docs/case-study.md.
Built by David Preli, motion designer and creative technologist working at the intersection of motion design and design engineering.