- Deterministic First: Always drive animations using
useCurrentFrame(). Never useDate.now()or unsynchronizedsetInterval. - Cinematic Polish: Use organic easing (e.g.,
easeOutExpo,easeInOutQuart) and staggered delays for a premium feel. - WebGL Integration: When using
@react-three/fiber, ensure the scene state is derived from the frame number for frame-perfect exports. - Tailwind 4: Leverage Tailwind 4 features for styling components within the
packages/motionforgedirectory.
packages/motionforge/src: Core library source. This is the source of truth.src/lib/remotion: Local mirror for development and demo purposes. Sync changes frompackages/to this directory.src/app: The documentation and demo web application.
- Three.js / R3F: Expert-level shader and 3D scene implementation.
- SVG Animations: Mastery of clipPaths and complex SVG paths for masking.
- FLIP Technique: Proficient in coordinating transitions between different layout states.
- Video Export: Understanding of the
CanvasRendererand how it snapshots DOM/WebGL elements.