An 8-package Remotion monorepo for token-driven motion design. FrameFX bridges the gap between design systems and programmatic video by converting design tokens into FPS-aware animation parameters, enabling declarative motion components powered by a shared design language.
FrameFX follows a pipeline architecture where design tokens flow through FPS-aware conversion into animation hooks, which power declarative components that compose into Remotion renders. Each stage is a separate package in the monorepo.
Design tokens are converted to FPS-aware values, consumed by animation hooks with spring physics and easing, used by declarative components via a composition API, and ultimately rendered through Remotion's video pipeline.
The 8-package structure managed by pnpm workspaces ensures clean separation of concerns: tokens, conversion utilities, hooks, components, compositions, and build tooling each live in their own package with explicit dependency boundaries. This makes each layer independently testable and publishable.
Design tokens serve as the single source of truth for all motion parameters, ensuring consistency across the entire animation system
Automatic conversion of time-based tokens to frame-based values, ensuring animations render correctly at any frame rate
React components that express complex animations through props rather than imperative code
Custom React hooks that encapsulate animation logic for use across components and compositions
FrameFX treats design tokens as the single source of truth for motion. By encoding duration, easing, spacing, and color as tokens, designers and developers share a common language. When a token changes, every animation across the system updates automatically.
Built on Remotion, FrameFX brings React's component model to video production. Compositions are defined as React component trees, making complex motion graphics maintainable, versionable, and reviewable through standard code review workflows.
Use the live surface or the source as the next level of proof. The goal here is not to end on a marketing flourish, but to make the next inspection step obvious.