# dmtrkovalenko/fframes architecture

> Architecture diagram of the GitHub repository dmtrkovalenko/fframes, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dmtrkovalenko/fframes
- Repository: https://github.com/dmtrkovalenko/fframes

## Overview

fframes is a Rust framework for authoring animated, audio-enabled videos as SVG-producing Rust code, then previewing, inspecting, and rendering them. The main workflow is author-defined scenes and media → frame generation → rasterization → audio/video encoding. The repository also provides a browser timeline editor, a native playback window, and CLI diagnostics such as frame export, contact sheets, onion skins, and audio analysis. The README documents these capabilities; sampled source supports the rendering pipeline and media/editor interfaces, but not every CLI command’s internal wiring.

Main entry points: [`fframes/src/video.rs`](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/video.rs) (Video API), [`fframes/src/renderer/renderer.rs`](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/renderer.rs) (Render runtime), [`fframes/src/renderer/cli.rs`](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/cli.rs) (Project CLI), [`fframes/src/renderer/encoder.rs`](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/encoder.rs) (Video encoder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Video authoring"]
  node_video_api["Video API<br/>[video.rs]"]
  node_scenes["Scenes and timing<br/>[scenes.rs]"]
  node_svg_macro["SVG authoring macro<br/>[lib.rs]"]
  node_animation["Animation<br/>[mod.rs]"]
end

subgraph group_rendering["Render and export"]
  node_cli["Project CLI<br/>[cli.rs]"]
  node_runtime["Render runtime<br/>[renderer.rs]"]
  node_gpu["GPU renderer<br/>[skia_pipeline.rs]"]
  node_cpu["CPU renderer<br/>[cpu.rs]"]
  node_encoder["Video encoder<br/>[encoder.rs]"]
  node_diagnostics["Render diagnostics<br/>[diagnostics.rs]"]
end

subgraph group_playback["Preview and editor"]
  node_native_player["Native preview<br/>[app.rs]"]
  node_editor_ui["Browser editor<br/>[Editor.bs.js]"]
  node_timeline_ui["Timeline UI<br/>[Timeline.bs.js]"]
  node_wasm_bridge["Wasm controller"]
  node_frame_buffer["Video frame buffer"]
end

subgraph group_media["Media and audio"]
  node_media_api["Media providers<br/>[media_provider.rs]"]
  node_media_decode["Media decoding<br/>[lib.rs]"]
  node_audio_mix["Audio mixing<br/>[audio_mix.rs]"]
  node_audio_analysis["Audio analysis<br/>[audio_analysis.rs]"]
end

node_author(("Video author"))
node_ffmpeg["FFmpeg libraries"]
node_browser_user(("Editor user"))
node_video_file["Rendered video"]

node_author -->|"implements"| node_video_api
node_video_api -->|"defines scenes"| node_scenes
node_video_api -->|"returns SVG"| node_svg_macro
node_video_api -->|"animates frames"| node_animation
node_cli -->|"starts render"| node_runtime
node_runtime -->|"generates frames"| node_video_api
node_runtime -->|"dispatches frames"| node_gpu
node_runtime -.->|"dispatches frames"| node_cpu
node_gpu -->|"sends pixels"| node_encoder
node_cpu -.->|"sends pixels"| node_encoder
node_encoder -->|"encodes via"| node_ffmpeg
node_encoder -->|"writes"| node_video_file
node_cli -->|"runs diagnostics"| node_diagnostics
node_cli -->|"analyzes audio"| node_audio_analysis
node_cli -->|"opens preview"| node_native_player
node_browser_user -->|"edits video"| node_editor_ui
node_editor_ui -->|"shows timeline"| node_timeline_ui
node_editor_ui -->|"calls controller"| node_wasm_bridge
node_wasm_bridge -->|"renders frames"| node_video_api
node_frame_buffer -->|"decodes video"| node_media_decode
node_wasm_bridge -->|"requests frames"| node_frame_buffer
node_video_api -->|"resolves media"| node_media_api
node_media_api -->|"uses decoders"| node_media_decode
node_runtime -->|"mixes audio"| node_audio_mix
node_audio_mix -->|"encodes audio"| node_ffmpeg

click node_video_api "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/video.rs"
click node_scenes "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/scenes.rs"
click node_svg_macro "https://github.com/dmtrkovalenko/fframes/blob/main/svgr-macro/src/lib.rs"
click node_animation "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/animation/mod.rs"
click node_cli "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/cli.rs"
click node_runtime "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/renderer.rs"
click node_gpu "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-skia-renderer/src/skia_pipeline.rs"
click node_cpu "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/cpu.rs"
click node_encoder "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/encoder.rs"
click node_diagnostics "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/diagnostics.rs"
click node_native_player "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-native-player/src/app.rs"
click node_editor_ui "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/ui/Editor.bs.js"
click node_timeline_ui "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/ui/Timeline/Timeline.bs.js"
click node_wasm_bridge "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/WasmController.bs.js"
click node_frame_buffer "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/services/VideoFrameBufferManager.ts"
click node_media_api "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/media_provider.rs"
click node_media_decode "https://github.com/dmtrkovalenko/fframes/blob/main/fframes-media/src/lib.rs"
click node_audio_mix "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/audio_mix.rs"
click node_audio_analysis "https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/audio_analysis.rs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_video_api,node_scenes,node_svg_macro,node_animation,node_browser_user toneBlue
class node_cli,node_runtime,node_gpu,node_cpu,node_encoder,node_diagnostics toneAmber
class node_native_player,node_editor_ui,node_timeline_ui,node_wasm_bridge,node_frame_buffer toneMint
class node_media_api,node_media_decode,node_audio_mix,node_audio_analysis toneRose
class node_author,node_ffmpeg,node_video_file toneIndigo
```

## Components

### Video authoring

- [Video API](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/video.rs): `fframes/src/video.rs`
- [Scenes and timing](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/scenes.rs): `fframes/src/scenes.rs`
- [SVG authoring macro](https://github.com/dmtrkovalenko/fframes/blob/main/svgr-macro/src/lib.rs): `svgr-macro/src/lib.rs`
- [Animation](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/animation/mod.rs): `fframes/src/animation/mod.rs`

### Render and export

- [Project CLI](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/cli.rs): `fframes/src/renderer/cli.rs`
- [Render runtime](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/renderer.rs): `fframes/src/renderer/renderer.rs`
- [GPU renderer](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-skia-renderer/src/skia_pipeline.rs): `fframes-skia-renderer/src/skia_pipeline.rs`
- [CPU renderer](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/cpu.rs): `fframes/src/renderer/cpu.rs`
- [Video encoder](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/renderer/encoder.rs): `fframes/src/renderer/encoder.rs`
- [Render diagnostics](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/diagnostics.rs): `fframes/src/diagnostics.rs`

### Preview and editor

- [Native preview](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-native-player/src/app.rs): `fframes-native-player/src/app.rs`
- [Browser editor](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/ui/Editor.bs.js): `fframes-editor/src/ui/Editor.bs.js`
- [Timeline UI](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/ui/Timeline/Timeline.bs.js): `fframes-editor/src/ui/Timeline/Timeline.bs.js`
- [Wasm controller](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/WasmController.bs.js): `fframes-editor/src/WasmController.bs.js`
- [Video frame buffer](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-editor/src/services/VideoFrameBufferManager.ts): `fframes-editor/src/services/VideoFrameBufferManager.ts`

### Media and audio

- [Media providers](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/media_provider.rs): `fframes/src/media_provider.rs`
- [Media decoding](https://github.com/dmtrkovalenko/fframes/blob/main/fframes-media/src/lib.rs): `fframes-media/src/lib.rs`
- [Audio mixing](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/audio_mix.rs): `fframes/src/audio_mix.rs`
- [Audio analysis](https://github.com/dmtrkovalenko/fframes/blob/main/fframes/src/audio_analysis.rs): `fframes/src/audio_analysis.rs`

### Other components

- **Video author**
- **FFmpeg libraries**
- **Editor user**
- **Rendered video**

## Connections

- Video author → Video API: implements
- Video API → Scenes and timing: defines scenes
- Video API → SVG authoring macro: returns SVG
- Video API → Animation: animates frames
- Project CLI → Render runtime: starts render
- Render runtime → Video API: generates frames
- Render runtime → GPU renderer: dispatches frames
- Render runtime → CPU renderer: dispatches frames
- GPU renderer → Video encoder: sends pixels
- CPU renderer → Video encoder: sends pixels
- Video encoder → FFmpeg libraries: encodes via
- Video encoder → Rendered video: writes
- Project CLI → Render diagnostics: runs diagnostics
- Project CLI → Audio analysis: analyzes audio
- Project CLI → Native preview: opens preview
- Editor user → Browser editor: edits video
- Browser editor → Timeline UI: shows timeline
- Browser editor → Wasm controller: calls controller
- Wasm controller → Video API: renders frames
- Video frame buffer → Media decoding: decodes video
- Wasm controller → Video frame buffer: requests frames
- Video API → Media providers: resolves media
- Media providers → Media decoding: uses decoders
- Render runtime → Audio mixing: mixes audio
- Audio mixing → FFmpeg libraries: encodes audio