Logo
Deploy Now

Categories

Marketing Design Tools Content Creation Video Editing Mockup Generator Animation Product Marketing

Stars

1,924

Forks

163

Watchers

32

Developer links

Last Updated: 08-22-2026 02:48 AM (UTC)

Animockup

Product Hunt's Maker of the Year: Animockup delivers an alternative to expensive motion graphics tools for creating animated product teaser videos entirely in the browser. The FabricJS canvas engine provides a fully interactive editing surface where you import product videos or screenshots, place them inside device mockups ranging from iPhones and MacBooks to browser windows and smartwatches, and customize everything from background gradients to overlay text positioning. Anime.js powers the animation system with configurable start and end transitions, easing curves, and duration controls that produce smooth entrance and exit effects without timeline editors or keyframe knowledge. The built-in FFMPEG.wasm pipeline handles all video processing client-side — no server-side rendering required — exporting finished teasers to WebM, MP4, or GIF at custom framerates and resolutions up to 4K. The crop and reposition tool lets you precisely fit product footage into any device screen regardless of aspect ratio differences. Twenty-plus device frames cover phones, tablets, laptops, desktops, watches, and generic browser windows for maximum versatility. Firebase authentication handles user sessions while the optional Paddle integration manages subscriptions — or remove both for a fully free deployment. Self-hosting requires only a static web server with optional PHP for the payment webhook endpoint. Running on a dedicated VPS on RepoCloud with guaranteed CPU, RAM, and SSD, full root SSH access, and a browser serial console. MIT licensed.

Animockup
Animockup
Animockup
Animockup
Animockup

Benefits

  • Zero Server-Side Rendering
  • FFMPEG.wasm processes all video encoding client-side in the browser. No GPU servers, no render queues, no processing costs regardless of export volume or resolution.
  • No Motion Graphics Expertise
  • Preset animations with configurable easing replace After Effects timelines. Select start and end transitions, set duration, and export professional teasers without keyframe knowledge.
  • 20+ Device Frame Library
  • iPhones, MacBooks, iPads, Android phones, browser windows, smartwatches, and generic frames cover every product category without sourcing or licensing external mockup assets.
  • Complete Export Control
  • Choose WebM, MP4, or GIF output with custom framerate from 12 to 60 fps and resolution up to 4K, producing optimized assets for social media or landing pages.

Features

  • Interactive Canvas Editor
  • FabricJS-powered canvas with drag-and-drop positioning, crop handles, layer ordering, and real-time preview of all composition elements.
  • Animation Preset System
  • Multiple entrance and exit animation presets powered by Anime.js with configurable easing curves, duration, and delay timing.
  • Gradient Background Builder
  • Dual-color gradient backgrounds with angle control and color picker, replacing the need for separate design tools for teaser backdrops.
  • Client-Side FFMPEG Export
  • FFMPEG compiled to WebAssembly encodes video locally without uploading footage to external servers, preserving privacy and eliminating bandwidth costs.
  • Text and Image Overlays
  • Add headlines, logos, and promotional graphics as draggable layers with independent positioning, scaling, and opacity controls on the composition canvas.