I wanted a tool that turns screenshots and screen recordings into device mockups and short product videos, without a subscription. Every tool I tried locked video export or higher resolutions behind a paywall, so I built my own: Sparkshots.
The biggest decision was to do all editing and rendering in the browser.
What it does
- Puts screenshots or screen recordings inside phone, tablet, laptop, desktop and browser frames, in portrait or landscape
- Supports several devices on one canvas, editable one by one or as a group
- Animates with zoom, position, rotation and tilt on an editable timeline
- Trims and splits video, and adds a soundtrack with mute controls
- Offers custom backgrounds: colors, gradients, uploaded images, Unsplash photos, patterns, overlays, vignette and shadows
- Adds annotations: text, arrows, hand-drawn underlines, stickers, emojis, shapes and blur regions
- Captures a website from its URL and uses it inside a frame
- Exports PNG, JPEG, WebP, MP4 and WebM in HD, 4K or 6K, at 24, 30 or 60 fps, plus an experimental 144 fps mode
Why client-side
- No server cost per export, so there's nothing to put behind a paywall
- Media stays on your device unless you choose cloud save or a share link
- Projects autosave locally, so you can start editing without signing up
The stack
Next.js, React and TypeScript for the app, Canvas and WebGL for rendering, and WebCodecs for video export. Accounts and cloud saves are optional.
Problems worth solving
Video export in the browser. Exporting MP4 and WebM at 4K and 6K on the user's own machine is the heaviest part of the app, so export got its own optimized engine.
MOV files. Screen recordings from iPhones and Macs are often MOV files that browsers don't handle cleanly, so the editor has a compatibility step when you drop one in.
Multiple devices on one canvas. Each device can be edited independently or updated together as a group, so the editing state has to support both without getting confusing.
A timeline that stays simple. Clips can be arranged, resized, trimmed and split, and animation clips stay editable, so the controls had to be usable without instructions.
What's still rough
- The 144 fps export mode is experimental
- Very high resolutions depend on the device and browser doing the rendering
- It's an early project, so some browsers will behave differently than others
Try it and tell me what breaks
It's free and needs no signup: sparkshots.app. I'm planning to open-source it.
I'd like feedback on three things:
- Do the multi-device controls make sense without instructions?
- Is the animation timeline easy to use?
- Does export work smoothly in your browser? Tell me which one you used if it doesn't.
Top comments (0)