fframes ships a skill for coding agents. Add it once:
npx skills add dmtrKovalenko/fframes
Then describe the video you want, the way you would brief a motion designer. The skill takes your agent from an empty
folder to a rendered .mp4: it installs fframes, creates a project, designs the motion, places the sound, and checks
the result before handing it to you.
The fframes API is explicit and verbose, and that is why it stayed unreleased for years.
Writing explicit, verbose code is exactly what an agent with the right skill is good at.
Built for an author that cannot watch
A coding agent cannot watch a video or hear a soundtrack. Every generated project comes with a command line that turns
a video into things an agent can read: PNGs, text and numbers.
Your agent
You
Checks every frame without rendering pixels. inspect reports missing fonts or images, text cut off by the canvas, invalid SVG and panics, each with its time and scene.
Looks at the motion. strip lays evenly spaced frames out on one contact sheet, onion blends frames to show a movement's path and easing, frame writes full-size PNGs.
Measures the sound. audio analyze reports loudness (LUFS), true peak, clipping and silence, per scene.
Watch it in real time, with sound. preview opens a GPU window to play, pause, seek and step through frame by frame.
Scrub it in the browser.
The editor runs the video compiled to WebAssembly, with a timeline.
Ship it. render writes the final file; render --draft encodes one scene at half size in about a second.
Every command runs as cargo run --release -- <command> inside the project:
command
output
timeline
the scenes with their frame and second ranges, and every audio track with its mix settings
inspect
problems in a frame every 0.25 s and the first and last frame of every scene; exit code 2 on errors
strip <scene> -n 12
strip.png, a labelled contact sheet
frame <scene>@end,<scene>@50%
full-size PNGs in frames/
onion "<scene>@0..<scene>@1s" -n 6
onion.png, the blended movement
audio analyze --waveform w.png
the loudness report and a waveform with scene lines and cue ticks
snapshot
a comparison with approved PNGs, .diff.png marks what changed
preview
the real-time window, for a human
render [--draft]
the video, or a part of it
<scene> is the name of a scene struct in your video. Times read as 120 (frame), 3.2s, 50%, <scene>@1.2s, and
ranges like <scene>@0..<scene>@1s. Add --json to parse the output.
Why it is fast
The GPU draws. The Skia backend renders on Metal (macOS) or Vulkan (Linux, Windows), about 10x faster than the built-in CPU backend.
Static markup is cached. Parts of a frame without {expressions} are hashed at compile time and reused by the renderers.
ffmpeg encodes. fframes links ffmpeg's libav libraries instead of shelling out to a separate tool.
Shaders when SVG is not enough. Run SkSL or pasted Shadertoy GLSL as a layer of any frame.
What your agent writes
Every frame is an SVG tree returned by a Rust function, written with the svgr! macro. From
examples/hello-world, shortened: a square moves along a timeline and a line
of text prints the current frame.
my dog's memorial video generator (totally randomized)
From the repository root, just run podcast opens an example in the editor with live reload and just render podcast
writes it to a file.
Without an agent
cargo install --locked cargo-fframes
cargo fframes new my-video
cd my-video && cargo run --release -- preview
cargo fframes new takes --template single-scene|multi-scene, --format landscape|portrait|square|uhd, --fps,
--title and --backend. The first build compiles Skia and ffmpeg from source and takes a while; later builds take
seconds. --backend cpu skips the Skia build (no preview window, slower renders). To track main, install with
--git https://github.com/dmtrKovalenko/fframes.
Requirements
Rust and, for working on the editor, NodeJS.
fframes compiles ffmpeg's libav libraries during the build, so the system encoders they link against have to be installed.
macOS
brew install pkg-config ffmpeg x264 x265 opus nasm ninja
On Windows ffmpeg is not compiled from source. Instead fframes links a prebuilt FFmpeg 9.0 shared build
(for example ffmpeg-n9.0-latest-win64-gpl-shared-9.0.zip from BtbN/FFmpeg-Builds)
and needs LLVM for bindgen:
winget install LLVM.LLVM
# unzip the ffmpeg build somewhere, then point the build to it:
$env:FFMPEG_DIR = "C:\ffmpeg-n9.0-latest-win64-gpl-shared-9.0"
$env:LIBCLANG_PATH = "C:\Program Files\LLVM\bin"
# the ffmpeg DLLs must be reachable when building (proc macros load them) and running
$env:PATH = "$env:FFMPEG_DIR\bin;$env:PATH"
vcpkg install ffmpeg works as well instead of FFMPEG_DIR. Codecs come from the prebuilt build, so leave the
codec features (h264, h265, ...) off: they request a from-source ffmpeg build which is not supported on Windows.
Codecs
Cargo features of the fframes crate choose which codecs and hardware acceleration libraries are linked:
[dependencies]
# this will enable and try to link libx264 during the build
fframes = { version = "1", features = ["h264", "libav-agree-gpl"] }
All the build and linking of codecs and other system libs are leveraging the ffmpeg build system, so for
troubleshooting please refer the ffmpeg compilation guide.
Troubleshooting
Build fails in ffmpeg-sys-next: a system library from the list above is missing (nasm, pkg-config, the codec packages).
Build fails in the Skia bindings with a bindgen or libclang error: point LIBCLANG_PATH at a working libclang,
on macOS Xcode's: export LIBCLANG_PATH=$(xcode-select -p)/Toolchains/XcodeDefault.xctoolchain/usr/lib.
Text renders in the wrong font:inspect reports No match for ... font-family; put the font file in the
project's media/ folder and use its exact family name.
Working on fframes
Agents working on fframes itself should start from AGENTS.md. For humans, install the
just command runner and init the repo:
npm install --global pnpm # the package manager for the nodejs based editor
cargo install --locked just cargo-watch wasm-bindgen-cli wasm-pack
just init-repo
just watch-editor # in a separate terminal, to work on the editor
fframes 是一个用代码书写视频的 Rust 框架：你用 Rust 和 SVG 组合场景，GPU 把它们渲染成 MP4。它围绕“真正快”这一目标构建，不同于许多代码优先的视频工具。