How to record a website for a portfolio case study
Hiring managers are not watching a demo. They are checking whether the thing you claimed actually behaves that way.
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.
The frame to record at
1920 x 1080
16:9 · landscape
One frame held across every clip in a project is what makes a case study read as designed rather than assembled - and 16:9 embeds cleanly in every portfolio platform and site builder.
Why a portfolio case study is different
The person reading your case study is looking for evidence that you handled the parts of the work that are hard to fake: the empty state, the error, the loading transition, the layout at 400px. Those are also precisely the moments a hand-driven screen capture misses, because catching them live means getting the product into that state and scrolling steadily at the same time.
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 1920 x 1080
Set the recording size to 1920 x 1080 (16:9, landscape) before you record. One frame held across every clip in a project is what makes a case study read as designed rather than assembled - and 16:9 embeds cleanly in every portfolio platform and site builder.
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
Export at 1920 x 1080 and keep the timeline file. When the design changes, you re-render rather than reshoot.
a portfolio case study video specifications
| Recommended frame | 1920 x 1080 px (16:9) |
|---|---|
| Mobile views | 1080 x 1920 px (9:16) |
| Format | MP4 (H.264) for web embedding |
| Per-clip length | 5 to 20 seconds |
| Consistency | One frame size across the whole project |
Source: web.dev, video embedding. Checked . Third-party pricing and limits change; confirm at the source before relying on them.
Three things that make the difference
Record the four states
Empty, loading, error, success. A case study that shows all four is making a claim about your process that a hero shot cannot.
Keep the timelines, not just the exports
Portfolios get updated for years. A saved timeline re-renders against the current site in minutes; a lost one means reshooting the whole take.
Match the clip length to the claim
If the sentence above it is one line, the clip should be a few seconds. Long clips under short claims are where case studies start feeling padded.
Recording for a portfolio case study, answered
Frame it at 1920 x 1080 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.
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.
Record websites for YouTube at 1920 x 1080 or 2560 x 1440, both 16:9. YouTube is the one destination on this list watched full-screen, deliberately, often with sound - which reverses most of the constraints that apply elsewhere. Detail survives, length is permitted, and the failure mode is pacing rather than legibility.