Motion & Prototyping

Timeline Panel

Press Ctrl+Alt+T to toggle the Timeline Panel. This panel is your central hub for all animation work. It consists of:

• Playback Controls — Play, pause, stop, and loop buttons with time display
• Timeline Ruler — Time axis with configurable zoom and scrubber head for frame-by-frame navigation
• Track Rows — One track per animated property, showing keyframes as diamonds on the timeline

Keyframes and Animation Tracks

Animation in Varve is built on keyframes organized into tracks:

• Animation Track — A sequence of keyframes for a single property of a node (e.g., position, rotation, opacity, fill color, stroke color)
• Keyframe — A snapshot of a property value at a specific point in time. Keyframes can be moved, added, and deleted on the timeline.
• Target reference — Each track references a target node and property path using dot notation (e.g., transform.x, fill, stroke)
• Virtualized rendering — Large track lists use position-based virtualization: only visible tracks are rendered in the DOM, keeping the timeline responsive with hundreds of tracks

To create an animation:

1. Select a node on the canvas
2. In the Timeline Panel, click the "+" button to add a new track
3. Choose the property you want to animate (position, size, rotation, opacity, fill color, stroke color, etc.)
4. Move the scrubber to a new time position
5. Change the property value on the canvas or in the Inspector — a keyframe is automatically created
6. Repeat to build up your animation

Interpolation

Varve interpolates between keyframes using a type-safe interpolation engine that handles:

• Numeric values — Linear interpolation for position, size, rotation, opacity
• Colors — Interpolation in Oklab color space for perceptually uniform color transitions
• Arrays and objects — Recursive interpolation for complex property types
• Affine transforms — Decomposed interpolation for smooth transforms
• Path morphing — Interpolation between path shapes for shape morphing animations

Each keyframe has an easing function that controls the acceleration curve between keyframes. Varve supports:

• CSS named easings (linear, ease, ease-in, ease-out, ease-in-out)
• Cubic bezier curves (custom easing via control points)
• Spring physics (mass-spring-damper model for natural motion)
• CSS steps() function for stepped animations

Graph Editor

Toggle the Graph Editor with the curve icon in the timeline panel header. The graph editor shows animation curves where the X axis is time and the Y axis is property value:

• Curve visualization — Each animated property renders as a colored curve with keyframe dots
• Tangent handles — Spatial bezier tangent arms are shown for keyframes with custom tangents
• Easing cycle — Shift+click on a keyframe cycles through easing types (linear, ease, ease-in, ease-out, ease-in-out)
• Keyboard — Arrow keys nudge keyframe progress, Delete removes keyframes

Motion Presets

The timeline panel includes a preset dropdown with 9 built-in motion presets:

• Fade In, Fade + Slide Up
• Slide Up, Slide Down, Slide Left, Slide Right
• Scale In, Rotate, Bounce In

Save custom presets from any timeline using the Save button. Custom presets appear in the dropdown alongside built-in presets.

Smart Animate

Smart Animate automatically generates animations between different states of a node group. When the same node exists in two different frames with modified properties, Varve can animate the transition — interpolating position, size, rotation, color, and other animatable properties automatically.

Prototype Interactions

Varve's prototype system lets you define how screens connect and respond to user input:

Triggers

14 trigger types define what initiates an action:

• On Click / On Tap — Mouse click or touch tap
• On Hover — Mouse enter/exit
• On Drag — Drag gesture
• On Key Press — Keyboard input
• After Delay — Time-delayed trigger
• On Scroll — Scroll position change
• On Load — Screen load
• On Variable Change — Variable value change
• And more (focus, media query, pointer enter/leave)

Actions

13 action types define what happens when a trigger fires:

• Navigate To — Go to another screen (with dissolve/slide/push/smart animate transition)
• Open Overlay — Show a screen as an overlay
• Close Overlay — Dismiss an overlay
• Play Animation — Start a timeline animation (wired to MotionFacade playback)
• Stop Animation — Stop a running timeline animation
• Set Variable — Set a variable value
• Toggle Variable — Toggle a boolean variable
• Scroll To — Scroll to a target element
• Open URL — Open an external link
• Toggle Visibility — Show/hide an element
• Dismiss — Close all overlays
• Go Back — Navigate to previous screen

Variables and Conditions

Prototype variables support string, number, boolean, and color types with a safe expression evaluator (arithmetic, comparison, string concatenation). Conditional actions evaluate variable values to determine whether an action executes.

Screen Transitions

When navigating between screens, Varve supports six transition types:

• Dissolve — Cross-fade between screens
• Slide — Slide in from left, right, top, or bottom
• Push — Push the current screen off as the new one slides in
• Move In — New screen slides over the current
• Move Out — Current screen slides away to reveal the new screen below
• Instant — No transition (immediate switch)

Each transition has configurable duration and easing. For accessibility, Varve respects prefers-reduced-motion and clamps durations to meet WCAG timing requirements.

Presentation Mode

Press the Present button in the menubar or Status Bar to enter fullscreen presentation mode. In this mode:

• Navigate through prototype screens using click/tap or keyboard
• Device frame overlay shows phone, tablet, or desktop bezels
• Animations play in real time
• Press Escape to exit

Animation Export

Animations can be exported in multiple formats:

• CSS @keyframes — Standard CSS keyframe animation with per-keyframe timing functions, compatible with any web project
• SVG animate — SMIL-based SVG animation embedded in SVG files
• Lottie JSON — Lottie format for use with Lottie-web, Lottie-iOS, and Lottie-Android. Supports opacity, rotation, position (separate X/Y), scale, stroke width, corner radius, fill color, and stroke color with per-keyframe bezier easing
• MP4 / WebM video — WebCodecs-based video export with configurable frame rate
• Self-contained HTML prototype — Exports prototype interactions, state machines, variables, and screen transitions as a single HTML file with embedded CSS + JS runtime

See Export & Code Generation for detailed export instructions.