尚未检测到更新。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.