Editframe
Building video products would be easy if you could just use a <video> tag and there were no bandwidth/latency restrictions. But video files are large, and often on another computer.
So we've built primitives to support video creation in HTML, CSS, and JavaScript. This means we start simple, but we can scale to meet complexity by looping in JavaScript.
To build a video product, you need:
1. A syntax for defining timeline, graphics, and animation
This needs to be reactive so it can be used to build editing tools—from small forms/GUIs to full-fledged editors. The primitives scale to the use case.
<Timegroup mode="sequence">
<Timegroup mode="fixed" duration="3s">
<h1>First scene</h1>
</Timegroup>
<Timegroup mode="fixed" duration="2s">
<h2>Second scene</h2>
</Timegroup>
</Timegroup>2. A preview rendering system
Fast feedback loop for development. See your changes immediately as you code.
3. A backend rendering system
Render at scale, highly parallel. Takes your HTML/CSS/JS and produces video files.
Let's build a video, step by step
Start with a basic video element, then add editing operations one at a time.
Title
Title
Intro
Title
What do people build?
- • Personalized outreach videos (CRM)
- • Data report videos (analytics platforms)
- • Course previews (e-learning)
- • Project recaps (PM tools)
- • User highlight reels (social apps)
- • Social media templates
- • Email campaign videos
- • Property tour videos
- • Product demos from specs
- • Sales pitch personalization
- • Video generation APIs
- • No-code platform integrations
- • Gaming match replays
- • Fitness workout summaries
- • Training material generation
- • Portfolio performance videos
- • Quarterly report animations
- • Real estate market analysis
- • Case timeline visualizations
- • Compliance training videos
Common thread: programmatic video generation where content changes based on data, user inputs, or business logic.