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, and SVG, plus MP4 and WebM where the platform exposes WebCodecs. Prototype interactions are stored on the document as the interactions field.

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), and SVG animate; MP4 and WebM require supported WebCodecs codecs

Experimental frame interpolation

The Photo workspace can optionally run a local RIFE model to generate a derived in-between image from two photographs. This utility is separate from the Motion timeline: it does not create keyframes or a video sequence, and it is not a replacement for layer compositing. Read the Frame Interpolation guidefor the model, memory, and output limitations.

Technical Depth

The motion system is implemented with MotionFacade for playback, TimelinePanel in Shell, and the document's interactions field. The TimelineSampler provides sampling capabilities, and the prototype renderer handles prototype screen views. Smart Animate is implemented in packages/prototype/src/smartAnimate.ts and adapted for the editor in packages/editor/src/motion/smartAnimateBridge.ts.

Interpolation in packages/shared/src/interpolation.ts includes Oklab color interpolation and path morphing. Animation export is implemented in packages/codegen/src/animation-css.ts, animation-lottie.ts, animation-svg.ts, and animation-interactive.ts; MP4 and WebM video export is implemented in packages/engine/src/videoExport.ts (WebCodecs, capability-gated) and bridged to the export dialog in packages/editor/src/motion/videoExportBridge.ts. Motion presets are defined in packages/scene/src/motion.ts.

Limitations

Status