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 with per-layer property interpolation
• Prototype interactions: 14 trigger types, 13 action types, conditions, variables, state machines
• Interpolation: Oklab color interpolation, path morphing, affine transforms
• Composite operations: Blend modes for animation layers
• Markers: Timeline markers for organization
• Presets: Motion presets for common animations
• Graph editor: Visual curve editor for easing and keyframe values
• Motion paths: Draggable keyframe points on canvas for position animation editing
• Timeline virtualization: Efficient rendering for large track lists
• Export formats: CSS @keyframes, Lottie (with fill/stroke color), SVG animate, MP4, WebM, self-contained HTML prototype

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