How to record a website for a Dribbble shot
4:3, at least 1600 wide, and the loop has to work in a grid full of other people's work.
Dribbble shots are displayed at a 4:3 aspect ratio with a recommended width of at least 1600 pixels, so record the site at 1600 x 1200 rather than at 16:9. Shot videos are short - around 24 seconds - and autoplay muted in a grid of competing thumbnails, which makes the first two seconds of motion the entire decision.
The frame to record at
1600 x 1200
4:3 · landscape
Dribbble presents every shot in a 4:3 frame, so recording at 16:9 guarantees the platform crops your composition rather than you choosing where it gets cut.
Why Dribbble is different
A Dribbble shot is judged in a grid, at thumbnail size, against a screen of other people's best work, and it autoplays without sound. Nothing about that rewards a full walkthrough. The shots that hold a scroll show one moment of craft clearly - a transition landing, a hover state resolving, a page settling - which is a shorter and more controlled recording than most people's instinct.
How to record it, step by step
Open the site in Viewport
Paste the URL into Viewport and let the page load completely. Waiting for fonts, images and entry animations to settle before you record is what stops the first second of the take looking half-built.
Frame it at 1600 x 1200
Set the recording size to 1600 x 1200 (4:3, landscape) before you record. Dribbble presents every shot in a 4:3 frame, so recording at 16:9 guarantees the platform crops your composition rather than you choosing where it gets cut.
Place the interactions on the timeline
Add the scrolls, clicks and hovers you want as points on the timeline rather than performing them live. Each one is a position and a moment, not a gesture you have to land.
Adjust the timing until it reads
Drag the points to change pacing. Viewport interpolates the motion between them, so a scroll that felt rushed becomes a scroll that reads - without reshooting anything.
Play it back and export
Watch the loop point twice before exporting. Export at 1600 x 1200 and confirm the shot still reads at thumbnail size, because that is where it will be judged.
Dribbble video specifications
| Displayed aspect ratio | 4:3 |
|---|---|
| Recommended width | 1600 px minimum |
| Standard shot size | 1600 x 1200 px |
| Video length | Around 24 seconds |
| Profile image | 400 x 400 px |
Source: dribbble.com/dimensions. Checked . Third-party pricing and limits change; confirm at the source before relying on them.
Three things that make the difference
Show one interaction, not the whole page
A shot that scrolls a landing page top to bottom reads as a screen recording. A shot that shows a single hover state resolving reads as design work. Cut the timeline down until only the good part is left.
Make the loop invisible
Shots replay continuously. Ending the recording near the visual state it started in means the loop point disappears instead of snapping.
Zoom into the detail before you record
At thumbnail size a full 1600px-wide page is unreadable. Framing tighter on the component you are showing is almost always the stronger shot.
Recording for Dribbble, answered
Frame it at 1600 x 1200 before you record.
Viewport sets the recording size first, so the site lays itself out at that width instead of being cropped afterwards. Then you build the scroll on a timeline and it plays back the same way every take.
Usual price $19.99 founder discount · macOS 13.1 or later
Related guides
Behance projects are read as a single scrolling column, so record website demos wide - 1920 x 1080 at 16:9 - and let them sit at full column width between sections of your case study. Unlike a Dribbble shot, a Behance embed is watched by someone who has already committed to reading the project, which means it can be longer and can carry explanation.
For a portfolio case study, record website work at a consistent 1920 x 1080 (16:9) across every clip in the project, and record states rather than tours. A case study is read as an argument, and each recording is evidence for one claim - which makes several short, framed clips considerably stronger than one long walkthrough at the end.
To record a website for Instagram Reels, capture it at 1080 x 1920 pixels (9:16, vertical) rather than recording a desktop browser and cropping afterwards. On a Mac, Viewport sets that frame before recording, so the site lays itself out at vertical width and fills the Reel edge to edge instead of sitting in a letterboxed strip.