Launched this week
Framefields
Open-source code-first video for AGI era
93 followers
Open-source code-first video for AGI era
93 followers
Framefields is a high-performance, code-first video engine powered by native WebGPU in Node.js. Built for AI agents and engineers, it replaces bulky creative suites with a single npm package: motion graphics, Photoshop-grade VFX, 3D scenes, and audio DSP. Zero Chromium or browser overhead—render deterministic, frame-accurate video and export hardware-accelerated MP4s directly from TypeScript.
Hey Product Hunt!
Most programmatic video tools today rely on headless Chromium, Puppeteer, or canvas hacks. They are heavy, prone to frame drops, and hard for autonomous AI agents to drive reliably.
We built Framefields to rethink video creation from the ground up: a code-first video engine running on native WebGPU (Dawn, Metal, Vulkan) directly in Node.js with zero browser overhead.
It combines what usually takes three desktop creative suites into one lightweight npm package:
• Motion Graphics & Typography: Kinetic text, SVG paths, Yoga layout trees, and spring/bezier curves.
• 2D Compositing & VFX: Photoshop-grade shaders (curves, film grain, LUTs, 3D relighting, chromatic aberration).
• Audio DSP & Sync: Sample-accurate beat grids, procedural SFX, EQ, and master compression.
• Built for AI Coding Agents: Deterministic frame clocks, visual frame-grid inspection, and hardware-accelerated MP4 export.
Everything is driven by TypeScript. Your agent or script writes code, verifies frames headlessly, and exports studio-grade video.
Check out our docs and open-source examples, and let us know what you think! What would you like to see next?
We make walkthrough videos for our product, so a video engine an agent can drive reliably is something I want to explore. To answer your question: I'd love to see it work with real screen recordings, so an agent can turn them into finished explainer videos. Is that possible today?
@simon_moxon Hi Simon, I think that is a question for me.
Yes, if the LLM model you use capable of it. Framefields is a toolkit for the agent, it brings great capabilities and speed to video rendering. In this case, your agent would need to use a speech-to-text (e.g. whisper) model externally (since framefields does not provide it), it would check related frames in source video and create a new composition.
I've been doing more Claude-first editing of traditional footage (think talking heads/podcasts filmed in a studio) - would you say that Framefields is more for graphics and generated demos and wouldn't really add to my workflow, or does the way it teaches the agent to understand video make it useful for the "traditional" editing I do as well? With the added bonus of integrating graphics?
@justdan Hi,
Framefields is a rendering & composing engine, we do not provide video analysis since claude can do it on it's own already. What framefields provides is a toolkit to edit on top of analysis, e.g. animated transitions, blending, motion graphics, captions with a very fast rendering speed. As a result a lot more productive agent sessions with feedback loops and less token usage relative to other approaches.
@okanasl I appreciate that, thank you for the clarification!
nice to see webgpu in node without chromium. question about the frame grid inspection: agent gets one image with many frames inside? how many frames before small text is too small to read? when claude checks my motion graphics it often just guess the small text
@joertemple Hi,
> how many frames before small text is too small to read
It is determined by agent, whatever grid shape with whatever number of frames inside. So, agent can re-generate the frame with text that is unreadable as a single image also to read it.
Congrats on the launch Okan! The video you have attached, is that made with Framefields?
@sohan_patil Thank you!
Yes, along with 4 other example videos in github repository - all of them edited and composed by Framefields.
See related folder for the code used to build it.