The GlidePage blog
Make websites move.
Guides to making website videos: scrolling recordings, device mockups, transparent exports, launch and portfolio videos, and keeping them smooth and sharp.
Recording a website smoothly
Why screen recordings stutter, and how to get a steady, sharp scroll at the right size.
How to Record Website Animations as Smooth Video (CSS, GSAP, Parallax and Scroll Effects)
You spent a week on the motion. The screen recording makes it look broken. Here is why, and how to capture each kind of web animation cleanly.
Read the guide →
How to Set a Browser Window to an Exact Size on Mac (1920×1080 for Recording)
You want a clean 1920 × 1080 recording of a website. The window, the page and the video all measure size differently, and a Retina screen doubles everything. Here is how to get the numbers right.
Read the guide →
4K 60fps Website Videos on Mac: When They Are Worth It and How to Make One
A website is mostly small text in motion, which is exactly what low resolution and low frame rates ruin. Here is when 4K at 60 fps pays off, and how to get it on a Mac.
Read the guide →
How to Animate a Website Scroll (After Effects, Keynote, and the Easing That Makes It Look Right)
The keyframes are the easy part. What makes a scrolling website animation look professional is the curve between them. Here is how to build it, and which curve suits which page.
Read the guide →
How to Record a Scrolling Screen on Mac (Built-in Tools, Step by Step)
macOS can already record you scrolling through a page. Here is how to do it properly, how to get a steadier take, and when a different approach works better.
Read the guide →
Why Your Screen Recording Looks Choppy When You Scroll (and How to Fix It)
The page scrolls perfectly on your screen, then the recording looks like a flipbook. Here is where the judder comes from, and how to get rid of it.
Read the explainer →Mockups and device frames
Put a scrolling site inside a phone, laptop or tablet, by hand or in one step.
How to Add a Scrolling Website Video to Canva (Laptop and Phone Mockups)
Dropping a screen recording into a laptop frame in Canva takes five minutes. Making it look smooth, sharp and properly fitted takes a better clip. Here is how to get both.
Read the guide →
How to Put a Screen Recording in an iPhone Frame on Mac
You already have the recording. Now you want it inside a phone, on a clean background, without it looking pasted on. Here is how to do it properly on a Mac.
Read the guide →
How to Add a Transparent Device Mockup in Final Cut Pro, Premiere Pro and DaVinci Resolve
Skip the template hunt. A transparent device clip on the track above your footage gives you a phone or laptop mockup you can move, scale and animate like any other layer.
Read the guide →
How to Make a Mobile Website Mockup Video (iPhone, Pixel and Galaxy)
A phone-shaped video of your site is one of the most useful assets you can make for social. The trick is showing the real mobile design, not a shrunken desktop page.
Read the guide →
How to Make a Scrolling Website Mockup (Laptop, Phone and Tablet)
A website scrolling inside a laptop or phone looks finished in a way a bare screen recording never does. Here is how to build one by hand, and how to skip the fiddly parts.
Read the guide →Portfolios, clients and presentations
Show your work: case studies, client reviews, slides, demos and template listings.
How to Present a Website to a Client (Before It Goes Live)
A good presentation gets you clear decisions. A loose one gets you forty comments about the shade of a button. Here is how to show a site before launch and keep the feedback useful.
Read the guide →
How to Show a Website in a Presentation Without a Live Demo (Keynote, PowerPoint, Google Slides)
The demo slide should be the one part of your talk that cannot fail. Here is how to put a website on a slide that plays by itself, loops, and does not depend on the venue Wi-Fi.
Read the guide →
How to Make a Preview Video and Screenshots for a Website Template or Theme
A theme listing sells something buyers cannot touch yet. Here are the sizes and rules each marketplace sets, and how to make the whole set of videos and stills from one live demo.
Read the guide →
How to Showcase Websites in a Web Design Portfolio (Video, Mockups and Stills)
Live links break, clients redesign, and screenshots flatten your best work. Here is how to present websites so the portfolio still works in five years.
Read the guide →
How to Make a Website Demo Video (Narrated Walkthroughs and Silent Loops)
Most website demos are either too long to finish or too vague to help. Here is how to plan, structure and record one that people actually watch.
Read the guide →Transparent video and video on the web
Export with an alpha channel, pick the right format, and put video on your own pages.
How to Make a Looping Product Video for Your Landing Page Hero (Size, Format, Code)
A short, silent loop of your product scrolling can say more above the fold than any screenshot, as long as it loads fast and loops cleanly. Here is how this site builds its own.
Read the guide →
ProRes 4444 vs WebM with Alpha (and HEVC): Which Transparent Format Should You Use?
Two files, one transparent video: a huge MOV and a small WebM. They are not interchangeable. Here is what each one is for, and where Apple's HEVC with alpha fits in.
Read the explainer →
How to Make a Video with a Transparent Background on Mac (Alpha Channel Export)
A transparent video lets a phone, a logo or a title float over anything you put behind it. Here is how to export one on a Mac that actually stays transparent.
Read the guide →
How to Use a Transparent Video on Your Website (Safari, Chrome and Firefox in 2026)
A transparent WebM looks perfect in Chrome and sits in an opaque box in Safari. Here is why, and a setup that gives every browser a file it can actually show transparently.
Read the guide →Screenshots and getting the page ready
Sharp stills, full-page captures, dark mode, cookie banners, logins and sites that are not live yet.
How to Take a High-Resolution (4K) Screenshot of a Website on Mac
A website screenshot that looked crisp on your screen turns soft in a portfolio or a slide. Here is how to capture one with enough pixels, and keep it sharp all the way to where it is shown.
Read the guide →
How to Record or Screenshot a Website Behind a Login (and Past Popups)
Dashboards, member areas and client previews are often the pages worth showing, and the first ones a recording tool turns into a login screen. Here is how to get the real page on camera.
Read the guide →
How to Take a Full-Page Screenshot on Mac (and When a Scrolling Video Is Better)
Your Mac can capture an entire web page as one tall image, for free, in any major browser. Here is how, what tends to go wrong, and when a video is the better format.
Read the guide →
How to Record a Demo Video of a Localhost or Staging Site
The launch video should be ready before the launch. Here is how to record a site that only exists on your machine or your office network, without handing it to anyone.
Read the guide →
How to Screenshot or Record Any Website in Dark Mode
Most sites with a dark theme only show it when your system asks for it. Here is how to ask for it just for the page you are capturing, for a screenshot or a video.
Read the guide →
How to Take Screenshots and Videos of a Website Without Cookie Banners
A consent banner is the first thing anyone notices in a website screenshot, and in a video it sits there the whole time. Here is how to get it out of the shot, cleanly and honestly.
Read the guide →Framer templates
Listing images, animated thumbnails, mockups and promo clips for Framer sites and templates.
How to Export a Framer Website as an MP4 Video (Smooth 4K Scroll)
The site is published and it feels great. Now you need it as a video, and Framer has no export button for that. Here is how to record it so it looks as smooth as it feels.
Read the guide →
Framer Marketplace Requirements in 2026: Listing Images, Preview URL and Checkout
Framer dropped the review step in June 2026, so getting the listing right is now up to you. Here is every field, the rules that still apply, and how to make listing images that hold up.
Read the guide →
How to Make a Framer Mockup Video (iPhone, MacBook and Safari Frames)
Buyers judge a template on the devices their visitors hold. Here is how to show your Framer site in a real phone, laptop or browser frame, with the layout each one actually gets.
Read the guide →
How to Make an Animated Thumbnail and Preview Loop for a Framer Template
With review gone, a template gets noticed in a scroll of listings and feed posts. A short loop of the real preview does more there than a still, as long as it is sharp, small and never jumps.
Read the guide →
How to Promote a Framer Template: One Recording, Every Channel
A listed template is not a sold template. Here is where buyers find Framer templates, what each channel wants, and how to make every asset in one session with your live preview.
Read the guide →
How to Record Framer Scroll Animations, Appear Effects and Tickers on Video
Your Framer template sells on motion, and the recording makes it look broken or empty. Here is what each Framer effect does on camera, and how to capture all of it.
Read the guide →Awards, Dribbble and case studies
Submission media for awards and showcases, responsive layouts, and before-and-after redesigns.
Awwwards Submission Requirements: Thumbnail Size, Screenshots and Video (Plus CSSDA and One Page Love)
The site is finished. Now the form wants a thumbnail, extra images, a video, mobile screenshots and a JPG under 150 KB. Here is what each gallery asks for, and how to capture it from the live site.
Read the guide →
How to Post a Website on Dribbble and Behance (Sizes, Video Limits, Covers)
Dribbble and Behance are built for images, and a website is a long, moving page. Here are the sizes and limits that apply today, and how to turn a live site into shots that look sharp.
Read the guide →
How to Show Responsive Design in Your Portfolio (Phone, Tablet and Desktop)
A narrow browser window is not your mobile design. Here is how to capture each layout the way visitors really see it, and present the set so it reads as one piece of work.
Read the guide →
How to Show a Website Redesign Before and After (Capture the Old Site First)
The most convincing image in a redesign case study is the old site next to the new one. It is also the one most designers cannot make, because the old site is gone by the time they need it.
Read the guide →
Social media and launches
Sizes, lengths and formats for feeds, Reels, carousels and launch day.
How to Turn a Website Into an Instagram Carousel (4:5 Mockups That Don't Get Cropped)
A carousel is one of the best ways to show a website on Instagram, if every slide survives the crop and the text is big enough to read. Here is how to get both.
Read the guide →How to Turn a Website Into a Vertical Video for Reels, TikTok and Shorts
A website is built for scrolling, and so are Reels, TikTok and Shorts. Here is how to turn one into a vertical video that people can actually read on a phone.
Read the guide →How to Make a Website Launch Video (Including Your Product Hunt Gallery)
Launch day moves fast. One short, sharp video of the real site, cut into the right shape for each place you post, does more than any countdown template.
Read the guide →LinkedIn and X Video Specs for Website Videos (and How to Post One That Plays Well)
The numbers are easy to look up. Making a website readable in a phone feed is the harder part. Here are both.
Read the guide →