How to record a product demo for Product Hunt
The gallery is not a trailer. It is the answer to 'what does this actually do'.
Record Product Hunt gallery media at 1920 x 1080 (16:9). The gallery autoplays muted beside your tagline, and it is doing a specific job: showing what the product does before anyone reads a word. A recording that opens on a landing page rather than on the product working is the most common launch-day mistake.
The frame to record at
1920 x 1080
16:9 · landscape
The gallery renders 16:9 media at full card width, so a landscape frame fills it with no bars - and the same file works unchanged as the demo embed on your own site.
Why Product Hunt is different
Launch-day traffic arrives in a burst, from people scanning a list of products they have never heard of, and gives each one a few seconds. The gallery recording has to answer 'what is this' before the tagline is read. That means opening inside the product doing its core action - not on a marketing hero, and not on a logo animation.
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. The gallery renders 16:9 media at full card width, so a landscape frame fills it with no bars - and the same file works unchanged as the demo embed on your own site.
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 check the very first frame in isolation - it is doing the work of a thumbnail as well as an opening.
Product Hunt video specifications
| Gallery media | 1920 x 1080 px (16:9) |
|---|---|
| Thumbnail | 1270 x 760 px |
| Playback | Autoplays muted in the gallery |
| Format | MP4 (H.264), GIF also accepted |
Source: Product Hunt Help. Checked . Third-party pricing and limits change; confirm at the source before relying on them.
Three things that make the difference
Open inside the product
Skip the landing page entirely. The first frame should be the interface mid-task, because that is the question the viewer is actually asking.
One flow, start to finish
A gallery clip that completes a single job - input to output - communicates more than four clips showing four features.
Re-export the day before, not the week before
Launch-day builds change. An authored timeline can be re-rendered against the current UI in minutes, which a hand-performed capture cannot.
Recording for Product Hunt, 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
Record websites for X at 1920 x 1080 (16:9), which is the frame the timeline renders inline without cropping. The constraint that matters more than size is compression: X re-encodes aggressively, so fine type and low-contrast UI degrade visibly. Record tighter than feels necessary and the loss is far less obvious.
For LinkedIn, record websites at 1080 x 1080 (1:1) or 1080 x 1350 (4:5) rather than 16:9. The feed is a narrow column on mobile, and a square or portrait video occupies substantially more vertical space than a landscape one - which is the single largest lever on how long the post stays on screen.
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.