Keyframes
Intuitive Keyframe Timeline
Set position, rotation, scale, elevation, and lighting keyframes with millisecond precision along an interactive visual timeline.
Keyframe Motion Studio • Mockship
Turn static app screens into animated device mockups
Bring your product to life with kinetic 3D movement. Mockship's Motion Studio lets you animate camera orbits, device rotations, depth zooms, and screen interactions with smooth bezier and spring easing. Export high-FPS WebM, MP4, or animated GIFs tailored for landing page heroes and social launches.
Keyframe Timeline EditorPhysics-Based Spring CurvesOrbital Camera RotationsMulti-Device ChoreographyTransparent WebM & GIF Export60 FPS Smooth Rendering
Ready to ship your app with Mockship?
Launch directly in your browser. All projects render client-side with full offline persistence.
Dynamic motion designed for modern product marketing
Turn any static screenshot into an eye-catching motion asset.
Animation Curves
Spring Physics & Custom Easing
Choose from snappy spring curves, smooth ease-in-out transitions, or linear loops to give your device motions an authentic, weighted feel.
Camera Paths
Orbital 3D Camera Paths
Animate cinematic camera sweeps across your app interface, zooming in on key details and pulling back for grand product reveals.
Alpha Channel
Transparent Animated Export
Export transparent WebM or GIF files that integrate seamlessly onto dark or light landing page backgrounds with zero halo artifacts.
How to animate 3D mockups in 3 steps
Create smooth motion graphics without touching After Effects.
01
Set up your 3D device & screen
Choose your device model, upload your screenshot or video, and set your starting camera angle.
02
Add motion keyframes on the timeline
Set start and end poses for rotation, tilt, and zoom. Tweak spring tension and dampening for the perfect punch.
03
Preview & export motion file
Play back in real time at 60 FPS, then export as an MP4, WebM, or animated GIF.
Motion Engine Technical Specifications
High-performance rendering built for web developers and designers.
| Specification | Target & Value | Category |
|---|---|---|
| Animation Framerates | 24 FPS, 30 FPS, 60 FPS (Ultra Smooth) | Customizable |
| Export Formats | WebM with Alpha Transparency, MP4 (H.264), Animated GIF | Lossless / Compressed |
| Easing Engine | Cubic bezier presets, physics springs (stiffness, damping, mass) | Parametric |
| Supported Resolutions | 1080p (1920×1080 / 1080×1920), Square (1080×1080), 4K UHD | Retina ready |
| Project Portability | Export and import editable .mockship.json motion project files | Reusable |
Mockship Motion vs. After Effects Mockup Templates
Why founders and designers build mockup animations in Mockship.
| Feature | Mockship | Traditional Tools |
|---|---|---|
| Time to First Animation | Under 2 minutes with visual timeline | Hours relinking composition pre-comps and 3D layers |
| Real-Time 60 FPS Playback | Instant GPU playback in browser | Heavy RAM preview caching required |
| Transparent Web Video | 1-click transparent WebM export | Complex alpha channel rendering and external transcoders |
Frequently Asked Questions
Questions about animated device mockups?
Can I export animated mockups with transparent backgrounds?
Yes! Mockship supports transparent WebM exports and transparent GIFs, enabling you to place rotating 3D devices directly over your website's CSS background or video headers.
Can I save and share my motion animation projects?
Yes. You can export editable `.mockship.json` project files at any time and reload them on any device to make quick screen updates or adjust animation timing.
What is the best format for Product Hunt launch GIFs?
Mockship allows exporting compact, high-quality animated GIFs and MP4 teaser videos optimized for Product Hunt gallery thumbnails and post headers.
Create. Mock. Ship.
Ready to launch your app?
Create App Store screenshots, realistic 3D device mockups, and launch promos directly in your browser with Mockship.