Skip to content
Ahmed AmrDesign Engineer
Let’s talk

Mocky app

Web appsInteractionMotion

Mocky is a concept for a web tool that puts a design into a device mockup and animates it into a video to share. I prototyped it in ProtoPie in six days for ProtoPie’s first Dribbble Playoff in July 2020, where it was one of three runners-up to the grand prize. The idea came from Rotato, which in 2020 would not let me animate each element on its own. In Mocky, text, shapes and images go on the artboard with the mockup, and every one of them is keyframed on a timeline.

The Mocky projects dashboard, headed Active Projects (4), with three cards across it and a New Project button in coral. The sidebar carries the account, then Active Projects, Published, Archived and Collections.
An untitled Mocky project before anything is in it. The canvas holds a numbered primer — add your design to a mockup, create an animated video, export and share it — over an Add new artboard button, with an empty timeline underneath and the layer tools down the left.
The devices panel open over the editor, listing iPhone 8, 8+, SE, 11, 11 Pro and 11 Pro Max under Mobile with Tablet and Responsive web folded below. The inspector on the right is set to a Dribbble shot preset at 1600 by 1200.
A close view of the artboard colour controls: a saturation field over hue and opacity sliders, hex fields reading #161825 for the background and #FFFFFF for the fill, and a row of saved swatches. A shape menu offering Rectangle and Circle is open against the toolbar at the right.
The finished Mocky App - Launching composition, an iPhone X mockup beside the Introducing Mocky App title. The timeline below lists the layers, with the title's position, size and opacity keyframed between diamonds labelled Ease In Cubic and Ease In & Out Cubic.
← All shots