Motion & Prototyping

What It Is

Varve's motion system provides timeline-based animation with WAAPI timing, Smart Animate for automatic transitions, and prototype interactions. The system supports export to multiple formats including CSS, Lottie, SVG, MP4, and WebM. Document version 1.6 includes the interactions field for motion data.

Key Capabilities

• Timeline CRUD: Create, read, update, delete timelines and keyframes
• Playback: WAAPI-based timing for smooth animation playback
• Smart Animate: Automatic transitions between states
• Prototype interactions: Define interactions between frames and components
• Interpolation: Oklab color interpolation, path morphing
• Composite operations: Blend modes for animation layers
• Markers: Timeline markers for organization
• Presets: Motion presets for common animations
• Export formats: CSS, Lottie, SVG, MP4, WebM

Technical Depth

The motion system is implemented with MotionFacade for playback, TimelinePanel in Shell, and Document.interactions v1.6. The TimelineSampler provides sampling capabilities, and the prototype renderer handles prototype screen views. Smart animate is implemented in packages/editor/src/motion/smartAnimate.ts.

Interpolation in packages/editor/src/motion/interpolation.ts includes Oklab color interpolation and path morphing. The export system in packages/editor/src/motion/videoExport.ts supports CSS, Lottie, SVG, MP4, and WebM export. Motion presets are defined in packages/editor/src/motion/motion.ts.

Limitations

Status