Giffuse
Stitch Tumblr gifs + TikTok audio
stack: React/TypeScript, Node/Express (fluent-ffmpeg), FastAPI (MoviePy)
Giffuse lets you stitch Tumblr GIFs to TikTok audio in the browser, no installs.
problem
Tumblr’s native composer doesn’t handle external audio, and desktop tools add friction. I wanted a 100% in-browser way to align multiple GIFs to a short audio clip and export a shareable video.
constraints
- must run client-side (privacy + zero install)
- source inputs are animated GIFs (variable FPS, weird timing)
- target output is mp4 (so TikTok/IG accept it)
- trimming/splitting needs to feel instant
approach
- decode GIFs with ffmpeg.wasm, extract frames + real durations
- snap track markers to the audio waveform (Web Audio API peaks)
- build a simple “timeline” model (JSON) that maps:
clip -> startMs, endMs, playbackRate, offset
- render with ffmpeg filtergraph:
- scale/pad to 1080x1920
- concat with explicit
-r
and-vsync 2
to avoid dup frames - encode
libx264 -pix_fmt yuv420p -crf 23 -preset veryfast
demo
(coming soon)
results
- typical 15s output exports in ~6–9s on M2 MacBook Air
- audio stays in sync (±1 frame) across odd GIF timings
- no server costs, everything local
lessons
- GIF frame durations lie; always normalize to exact ms
- doing layout in “timeline JSON” kept UI and export in sync
- ffmpeg.wasm memory spikes; reuse the same instance
next
- draggable split points
- preset aspect ratios (1:1, 4:5, 9:16)
- shareable JSON project files