Add Rive vector animation runtime

README.md

@@ -15,7 +15,7 @@
 <p>
   GPU-first editing with <b>32 effects</b>, <b>37 blend modes</b>, <b>79 AI tools</b>, <b>native WebGPU 3D</b>, and only <b>15 runtime dependencies</b>.<br>
   Built from scratch in <b>2,700+ lines of WGSL</b> and <b>165k lines of TypeScript</b>.<br>
-  Import <b>.lottie, Lottie JSON, OBJ, glTF, GLB, PLY, SPLAT, KSPLAT, SPZ, SOG, LCC</b> assets and play <b>PLY / GLB sequences</b> directly on the timeline.
+  Import <b>.lottie, .riv, Lottie JSON, OBJ, glTF, GLB, PLY, SPLAT, KSPLAT, SPZ, SOG, LCC</b> assets and play <b>PLY / GLB sequences</b> directly on the timeline.
 </p>
 
 <p>
@@ -55,7 +55,7 @@ Decoding depends on what the **browser** supports — the container is just the
 <tr><td><b>Video codecs</b></td><td>H.264 (AVC), H.265 (HEVC)¹, VP8, VP9, AV1</td></tr>
 <tr><td><b>Audio files</b></td><td>WAV, MP3, OGG, FLAC, AAC, M4A, WMA, AIFF, OPUS</td></tr>
 <tr><td><b>Image</b></td><td>PNG, JPG/JPEG, WebP, GIF, BMP, SVG</td></tr>
-<tr><td><b>Vector animation</b></td><td><code>.lottie</code> packages and Lottie JSON files (content-sniffed)</td></tr>
+<tr><td><b>Vector animation</b></td><td><code>.lottie</code> packages, <code>.riv</code> files, and Lottie JSON files (content-sniffed)</td></tr>
 <tr><td><b>3D Models</b></td><td>OBJ, glTF, GLB - rendered through the native WebGPU shared-scene path</td></tr>
 <tr><td><b>3D sequences</b></td><td>PLY and GLB frame sequences played as timeline media</td></tr>
 <tr><td><b>Gaussian Splats</b></td><td>PLY, compressed PLY, SPLAT, KSPLAT, SPZ, SOG, LCC, SOG-style ZIP payloads</td></tr>
@@ -87,7 +87,7 @@ Most browser-based video editors share a pattern: Canvas 2D compositing, heavywe
 
 **3-tier scrubbing cache.** **300 GPU textures in VRAM** for instant scrub (Tier 1), per-video last-frame cache for seek transitions (Tier 2), and a **900-frame RAM Preview** with CPU/GPU promotion (Tier 3). When the cache is warm, **scrubbing doesn't decode at all**.
 
-**15 runtime dependencies.** React/React DOM, Zustand, MediaBunny, mp4box, PlayCanvas / splat-transform helpers, dotLottie, HuggingFace Transformers, ONNX Runtime, SoundTouch, WebGPU types, plus an **experimental FFmpeg WASM path**. **Everything else is custom-built from scratch**: the WebGPU compositor, all 32 effect shaders, the keyframe animation system, the export engine, the audio mixer, the text renderer, the mask engine, the video scope renderers, the dock/panel system, the timeline UI, and the native shared 3D scene path. Zero runtime abstraction layers between your timeline and the GPU.
+**16 runtime dependencies.** React/React DOM, Zustand, MediaBunny, mp4box, PlayCanvas / splat-transform helpers, dotLottie, Rive WASM, HuggingFace Transformers, ONNX Runtime, SoundTouch, WebGPU types, plus an **experimental FFmpeg WASM path**. **Everything else is custom-built from scratch**: the WebGPU compositor, all 32 effect shaders, the keyframe animation system, the export engine, the audio mixer, the text renderer, the mask engine, the video scope renderers, the dock/panel system, the timeline UI, and the native shared 3D scene path. Zero runtime abstraction layers between your timeline and the GPU.
 
 **Nested composition rendering.** Compositions within compositions, each with their own resolution. Rendered to **pooled GPU textures** with frame-level caching, composited in the parent's ping-pong pass, all in a **single `device.queue.submit()`**.
 
@@ -146,7 +146,7 @@ This requires the Native Helper to be running, a MasterSelects editor tab to be
 | [**Export Pipeline**](docs/Features/Export.md) | WebCodecs Fast/Precise, FFmpeg intermediates, image/audio-only export, FCPXML, and project-persistent presets |
 | [**Live EQ & Audio**](docs/Features/Audio.md) | 10-band parametric EQ with real-time Web Audio preview |
 | [**Download Panel**](docs/Features/Download-Panel.md) | YouTube, TikTok, Instagram, Twitter/X, Vimeo, and other yt-dlp-supported sites via Native Helper |
-| [**Vector Animation**](docs/Features/Vector-Animation.md) | `.lottie` and Lottie JSON clips with bounce playback, render resolution overrides, keyframed state machines, and deterministic preview/export |
+| [**Vector Animation**](docs/Features/Vector-Animation.md) | `.lottie`, `.riv`, and Lottie JSON clips with bounce playback, render resolution overrides, state-machine keyframes, Rive data binding, and preview/export |
 | [**Text & Solids**](docs/Features/Text-Clips.md) | 50 Google Fonts, stroke, shadow, and solid color clips |
 | [**Proxy System**](docs/Features/Proxy-System.md) | GPU-accelerated proxies with resume and cache indicator |
 | [**Output Manager**](docs/Features/Preview.md) | Multi-window outputs, source routing, corner pin warping, slice masks |
@@ -324,7 +324,7 @@ src/
 │   ├── nativeHelper/    # Native decoder + WebSocket client
 │   ├── layerBuilder/    # Layer building + video sync
 │   ├── mediaRuntime/    # Media runtime bindings + playback
-│   ├── vectorAnimation/ # Lottie metadata sniffing + runtime canvas playback
+│   ├── vectorAnimation/ # Lottie/Rive metadata + runtime canvas playback
 │   └── export/          # FCPXML export
 ├── shaders/             # WGSL (composite, effects, output, optical flow, slice)
 ├── hooks/               # React hooks (useEngine, useGlobalHistory, useMIDI, useTheme)

docs/Features/Color-Correction.md

@@ -90,7 +90,7 @@ This is the core product rule: same grade, different professional control surfac
 
 Add a `Color` tab beside `Transform`, `Effects`, and `Masks` for visual clips.
 
-Recommended tab order for video/image/text/solid/Lottie/3D clips:
+Recommended tab order for video/image/text/solid/Lottie/Rive/3D clips:
 
 ```text
 Transform | Color | Effects | Masks | Transcript | Analysis
@@ -500,7 +500,7 @@ Integration points:
 
 - Add `color` to `PropertiesTab` in `src/components/panels/properties/index.tsx`.
 - Add `color-workspace` to the dock panel system when the expanded workspace is implemented.
-- Insert the tab for visual clips, including text, solid, Lottie, image, video, model, gaussian avatar, and gaussian splat clips. Keep it hidden for audio-only clips and camera/controller clips.
+- Insert the tab for visual clips, including text, solid, Lottie, Rive, image, video, model, gaussian avatar, and gaussian splat clips. Keep it hidden for audio-only clips and camera/controller clips.
 - Keep the active tab reset logic aware of `color` so switching selected clips does not bounce the user back to Transform.
 - Reuse existing `DraggableNumber`, `KeyframeToggle`, `MIDIParameterLabel`, and history batching patterns from `EffectsTab`.
 - Share list/inspector editing primitives between the Properties tab and workspace where practical. The workspace owns the large node graph layout.

docs/Features/Export.md

@@ -43,7 +43,7 @@ FCPXML is exposed as a selectable export container for NLE interchange.
 
 `FrameExporter` is used for both the WebCodecs and HTMLVideo export buttons.
 
-Canvas-backed sources such as text, solids, and Lottie are re-rendered for every export frame before capture, so the exported frame matches the current timeline time instead of reusing a stale first-frame texture. Motion shape clips are built as `motion` layer sources and rendered by the WebGPU motion renderer at export frame time before compositing.
+Canvas-backed sources such as text, solids, Lottie, and Rive are re-rendered for every export frame before capture, so the exported frame matches the current timeline time instead of reusing a stale first-frame texture. Motion shape clips are built as `motion` layer sources and rendered by the WebGPU motion renderer at export frame time before compositing.
 
 ### Fast Mode
 

docs/Features/Keyframes.md

@@ -83,14 +83,15 @@ The numeric mask properties use the same curve and easing behavior as transform
 
 ### Vector Animation Properties
 
-Lottie state machines use the same keyframe store as transform and effect properties:
+Vector animation state machines and Rive Data Binding use the same keyframe store as transform and effect properties:
 
 ```text
 lottieState.{stateMachine}
 lottieInput.{stateMachine}.{input}
+riveData.{property}
 ```
 
-`lottieState.*` keyframes are discrete named states. They render as blue diamonds and stepped curves because a state change should hold until the next state keyframe, not ease between values. Boolean and numeric `lottieInput.*` properties use the normal stopwatch/keyframe workflow.
+`lottieState.*` keyframes are discrete named states. They render as blue diamonds and stepped curves because a state change should hold until the next state keyframe, not ease between values. Boolean and numeric `lottieInput.*` properties use the normal stopwatch/keyframe workflow. Rive Data Binding properties use `riveData.*` for numeric, integer, boolean, and color values; string and enum bindings remain static clip settings.
 
 ### Motion Shape Properties
 
@@ -177,7 +178,7 @@ When recording is enabled:
 - Dragging a handle updates the stored handle position and switches the keyframe to Bezier mode.
 - `Shift+drag` on a keyframe constrains movement to one axis in the curve editor.
 - Right-clicking a handle resets it to the default 1/3-distance handle for that segment.
-- Lottie state keyframes show state labels on the value axis and draw stepped segments instead of Bezier curves.
+- Vector animation state keyframes show state labels on the value axis and draw stepped segments instead of Bezier curves.
 - Mask path rows expose timing and easing in the timeline; their value is a whole shape snapshot rather than a numeric scalar.
 
 ### Delete and Copy/Paste

docs/Features/Media-Panel.md

@@ -32,14 +32,14 @@ Import, organize, and manage media assets with folder structure, proxy generatio
 | **Video** | MP4, WebM, MOV, AVI, MKV, WMV, M4V, FLV |
 | **Audio** | WAV, MP3, OGG, FLAC, AAC, M4A, WMA, AIFF, OPUS |
 | **Image** | PNG, JPG/JPEG, GIF, WebP, BMP, SVG |
-| **Vector Animation** | `.lottie`, Lottie JSON (`.json`, content-sniffed) |
+| **Vector Animation** | `.lottie`, `.riv`, Lottie JSON (`.json`, content-sniffed) |
 
 The panel also accepts a few specialized asset types that flow into the timeline as 3D clips:
 
 - `model` files: OBJ, glTF/GLB
 - `gaussian-splat` files: PLY, compressed PLY, SPLAT, KSPLAT, SPZ, SOG, LCC, and SOG-style ZIP payloads
 
-Lottie imports are treated as first-class media items. `.json` files are only accepted when their contents actually match Lottie structure, so arbitrary JSON data is not misclassified as animation.
+Lottie and Rive imports are treated as first-class media items. `.json` files are only accepted when their contents actually match Lottie structure, so arbitrary JSON data is not misclassified as animation.
 
 ### Import Methods
 
@@ -462,7 +462,7 @@ interface MediaFile {
 ### Drag Types
 | Item Type | Drag Payload Kind | Data Transfer Key |
 |-----------|-------------------|-------------------|
-| Media file (video/image/lottie) | `media-file` | `application/x-media-file-id` |
+| Media file (video/image/lottie/rive) | `media-file` | `application/x-media-file-id` |
 | Media file (audio) | `media-file` (marked as audio) | `application/x-media-file-id` |
 | Composition | `composition` | `application/x-composition-id` |
 | Text item | `text` | `application/x-text-item-id` |
@@ -481,7 +481,7 @@ interface MediaFile {
 ### Track Type Enforcement
 | Media Type | Allowed Tracks |
 |------------|----------------|
-| Video/Image/Lottie/Composition/Text/Solid/Mesh | Video tracks only |
+| Video/Image/Lottie/Rive/Composition/Text/Solid/Mesh | Video tracks only |
 | Audio | Audio tracks only |
 
 ---

docs/Features/README.md

@@ -24,7 +24,7 @@ The docs in this folder were re-audited against the current codebase and now tra
 | **AI Control** | OpenAI/Cloud or local Lemonade chat with 79 exported tools plus local/native bridge access for external agents |
 | **AI Video Workspace** | Classic AI Video plus FlashBoard board-mode generation and media import |
 | **3D Layers** | Shared-scene 3D layers, camera clips, Gaussian splats, and splat effectors |
-| **Vector Animation** | Lottie clips with deterministic canvas playback, bounce modes, render resolution overrides, keyframed state machines, and export |
+| **Vector Animation** | Lottie and Rive clips with canvas playback, bounce modes, render resolution overrides, keyframed state/data inputs, and export |
 | **Audio** | Element-synced playback, drift correction, waveform extraction, EQ, and audio export |
 | **Project Storage** | `project.json` source of truth, RAW-copy-first media flow, autosave, relink, backups |
 | **Native Helper** | Firefox storage backend, yt-dlp download flow, local AI bridge, native jobs |
@@ -59,7 +59,7 @@ The docs in this folder were re-audited against the current codebase and now tra
 | [Text Clips](./Text-Clips.md) | Canvas-backed text rendering, typography controls, and timeline text items |
 | [Motion Design](./Motion-Design.md) | Motion layer schema, property registry, rectangle/ellipse shape editing, GPU renderer, and persistence/export plumbing |
 | [3D Layers](./3D-Layers.md) | Shared-scene path, native Gaussian splats, cameras, and splat effectors |
-| [Vector Animation](./Vector-Animation.md) | Lottie import, runtime playback, bounce modes, state-machine keyframes, and export behavior |
+| [Vector Animation](./Vector-Animation.md) | Lottie/Rive import, runtime playback, bounce modes, state-machine keyframes, Rive data binding, and export behavior |
 | [Audio](./Audio.md) | Playback sync, EQ, waveform extraction, audio clip behavior, and export |
 | [Export](./Export.md) | WebCodecs fast/precise export, animated GIF, FFmpeg intermediates, image frame/sequence export, audio-only export, FCPXML, and project-persistent presets |
 | [Proxy System](./Proxy-System.md) | Proxy generation, on-disk frame layout, audio proxies, and warmup behavior |

docs/Features/Timeline.md

@@ -2,14 +2,14 @@
 
 [<- Back to Index](./README.md)
 
-The Timeline is the core editing interface for multi-track editing. It now covers video, audio, image, Lottie, text, solid, motion shape, mesh, composition, camera, and splat-effector clips, with keyframe lanes, transitions, multicam grouping, pick-whip parenting, and slot-grid playback.
+The Timeline is the core editing interface for multi-track editing. It now covers video, audio, image, Lottie, Rive, text, solid, motion shape, mesh, composition, camera, and splat-effector clips, with keyframe lanes, transitions, multicam grouping, pick-whip parenting, and slot-grid playback.
 
 ---
 
 ## Track Types
 
 ### Video Tracks
-- Hold video, image, Lottie, text, solid, motion shape, mesh, composition, camera, and splat-effector clips.
+- Hold video, image, Lottie, Rive, text, solid, motion shape, mesh, composition, camera, and splat-effector clips.
 - Higher tracks render on top of lower tracks.
 - Expanded tracks can show keyframe property rows and curve editors.
 - Default layout starts with `Video 2` above `Video 1`.
@@ -53,12 +53,14 @@ getTrackChildren()  // Query child tracks
 - Created through the timeline text slice.
 - Supports typography, stroke, shadow, and path text.
 
-### Lottie
-- Imported from `.lottie` packages or Lottie JSON files from the Media Panel.
-- Uses the same canvas-backed render path as text and solids, so preview, nested comps, and export stay deterministic.
+### Vector Animation
+- Lottie is imported from `.lottie` packages or Lottie JSON files from the Media Panel.
+- Rive is imported from `.riv` files and rendered through the Rive WASM canvas runtime.
+- Both providers use the same canvas-backed render path as text and solids, so preview, nested comps, and export stay aligned.
 - Exposes per-clip loop, end behavior, playback mode, fit, render resolution, animation selection, and background controls in the Properties panel.
-- `.lottie` state machines can be selected in the Lottie tab, with state changes stored as blue stepped keyframes.
-- Boolean and numeric `.lottie` state-machine inputs appear as normal stopwatch-keyframed properties.
+- State machines can be selected in the provider tab, with state changes stored as blue stepped keyframes when state names are available.
+- Boolean and numeric state-machine inputs appear as normal stopwatch-keyframed properties.
+- Rive Data Binding exposes view models, instances, static string/enum values, and keyframed numeric/boolean/color values.
 - When loop is enabled, the clip can be extended beyond its source duration on the right trim edge without freezing on the first pass.
 
 ### Solid
@@ -107,7 +109,7 @@ getTrackChildren()  // Query child tracks
 
 ### Copy and Paste
 - Copying clips includes linked audio automatically when the video clip is selected.
-- Copy/paste preserves Lottie clip type and vector animation settings.
+- Copy/paste preserves vector animation clip type and vector animation settings.
 - Copy/paste preserves motion shape definitions.
 - Copying keyframes stores them relative to the earliest copied keyframe.
 - Pasting keyframes targets the selected clip when exactly one clip is selected; otherwise it falls back to the original clip from the clipboard data.
@@ -143,7 +145,7 @@ getTrackChildren()  // Query child tracks
 - The UI hides `rotation.x`, `rotation.y`, `position.z`, and `scale.z` for 2D clips.
 - Camera clips and native-render gaussian splats keep the camera-style property model visible.
 - Numeric effect parameters appear as `effect.{effectId}.{paramName}` lanes.
-- Lottie state changes appear as `lottieState.{stateMachine}` lanes; state-machine inputs appear as `lottieInput.{stateMachine}.{input}` lanes.
+- Vector animation state changes appear as `lottieState.{stateMachine}` lanes; state-machine inputs appear as `lottieInput.{stateMachine}.{input}` lanes. Rive Data Binding values appear as `riveData.{property}` lanes.
 - Motion shape numeric lanes use registry paths such as `shape.size.w` and `appearance.{id}.stroke.width`.
 - Audio EQ lanes sort `volume` and the band parameters first.
 
@@ -162,7 +164,7 @@ getTrackChildren()  // Query child tracks
 - Composition changes propagate into nested render data.
 - Selected clips can be converted into a new nested composition from the clip context menu.
 - Composition switches trigger clip entrance/exit animations in the timeline UI.
-- Lottie clips inside nested comps render through the same canvas path used in the primary timeline and export flow.
+- Vector animation clips inside nested comps render through the same canvas path used in the primary timeline and export flow.
 
 ### Transitions
 - Transitions operate between adjacent clips on the same track.

docs/Features/UI-Panels.md

@@ -343,7 +343,7 @@ The unified Properties panel adapts its tabs to the selected clip type and to sl
 
 | Clip Type | Tabs |
 |-----------|------|
-| **Lottie** | Lottie, Transform, Effects, Masks |
+| **Vector Animation** | Lottie/Rive, Transform, Effects, Masks |
 | **Gaussian avatar** | Blendshapes, Transform, Effects, Masks |
 | **Gaussian splat** | Transform, Gaussian Splat, Effects, Masks |
 | **Camera** | Transform |