I Built a Browser-Based Video Creation Tool
Added an Animation Editor to the Lab. Arrange images on a timeline and make a simple flip-book video — right in the browser.
What It Does
- Place image layers on a timeline
- Add subtitle layers (vertical text supported)
- Export as WebM, MP4, or SRT
Everything runs in the browser. Nothing gets uploaded to a server.
Interface Layout
The screen is divided into four main areas:
- Toolbar: play/stop, FPS, resolution, and duration settings
- Preview: real-time display of the current frame
- Layer panel: add and configure layers
- Timeline: visually manage the timing of each layer
Basic Usage
Adding images
- Click the “Image” button in the layer panel
- Select image files (multiple selection supported)
- Each selected image is added as its own layer
Adjusting timing
Select a layer to set its start and end times. The timeline gives a visual overview.
Playing back
Hit the play button in the toolbar to preview. Drag on the timeline to scrub to any position.
Image Layer Options
Image layers have placement options:
Horizontal alignment:
- Original size (left / center / right)
- Fit width
- Fit height
Vertical alignment:
- Top / Center / Bottom
Stacking multiple layers puts the one higher in the list on top. Drag to reorder.
Subtitle Feature
Click the “Subtitle” button to add a subtitle layer.
Settings:
- Text: the string to display
- Position: bottom / left (vertical) / right (vertical)
- Size: font size (px)
- Color: text color
SRT import
Import an existing SRT file to add all subtitle layers at once, with timing intact.
Export
WebM
Browser-native encoding via the MediaRecorder API. Fast, and playback works fine in modern browsers.
MP4
Encoded with ffmpeg.wasm. Slower than WebM, but more compatible — safer for iPhones and social media uploads.
SRT
Exports only the subtitle layers in SRT format, ready to import into video editing software.
Tips
- Lower FPS for lighter processing. 12fps is plenty for a flip-book feel
- Resolution can be changed later — start small and increase at the end if needed
- When making a longer video, set the duration first so the timeline is easier to read
Handy for quick explainer clips or animating illustrations.