[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"subscription":3,"guide-scrolling-website-video":4},null,{"_id":5,"body":6,"excerpt":332,"faq":3,"heroImage":3,"publishedAt":333,"seo":334,"slug":338,"title":339,"updatedAt":3},"guide-scrolling-website-video",[7,27,35,44,52,60,68,76,84,92,107,119,131,143,155,163,171,179,187,195,203,211,219,227,250,259,267,276,284,292,300,308,316,324],{"_key":8,"_type":9,"children":10,"markDefs":25,"style":26},"8c7ea4f65fcc","block",[11,16,21],{"_key":12,"_type":13,"marks":14,"text":15},"52ee93f2e4e7","span",[],"Most tools that capture a long web page stitch it into one tall image. That is the right answer when you want a document. It is the wrong answer when you want to show a site ",{"_key":17,"_type":13,"marks":18,"text":20},"2cf6a47e4df5",[19],"em","moving",{"_key":22,"_type":13,"marks":23,"text":24},"f15dbd55aa62",[]," — a scroll that reveals a layout the way a visitor would meet it, sized for a feed.",[],"normal",{"_key":28,"_type":9,"children":29,"markDefs":34,"style":26},"f64aab4757f5",[30],{"_key":31,"_type":13,"marks":32,"text":33},"0d2d7d1ed33e",[],"This is how to produce that: an MP4 of a website scrolling, at whatever ratio the destination wants, from a URL.",[],{"_key":36,"_type":9,"children":37,"markDefs":42,"style":43},"69134fb33aab",[38],{"_key":39,"_type":13,"marks":40,"text":41},"fb426c708adf",[],"What you need",[],"h2",{"_key":45,"_type":9,"children":46,"markDefs":51,"style":26},"1d9123292c31",[47],{"_key":48,"_type":13,"marks":49,"text":50},"ebb3ab469701",[],"Aspects for macOS, and the address of the page. Nothing is installed in the browser and no extension is involved — Aspects loads the page itself, in a real WebKit view.",[],{"_key":53,"_type":9,"children":54,"markDefs":59,"style":43},"5804a4952a5a",[55],{"_key":56,"_type":13,"marks":57,"text":58},"d473ea03d3b5",[],"1. Load the page",[],{"_key":61,"_type":9,"children":62,"markDefs":67,"style":26},"064cdfd8016b",[63],{"_key":64,"_type":13,"marks":65,"text":66},"00ca27bb3d9b",[],"Make a new Capture artboard and put the URL in. The page loads exactly as it would in Safari, because it is the same engine. Sign in, dismiss a cookie banner, scroll to the section you care about — whatever state you leave the page in is the state it renders from.",[],{"_key":69,"_type":9,"children":70,"markDefs":75,"style":26},"875de8f81e5f",[71],{"_key":72,"_type":13,"marks":73,"text":74},"13ff4fe4742e",[],"That last point is worth pausing on. Because Aspects drives a live page rather than a screenshot service, anything you can reach in a browser you can capture: pages behind a login, a staging URL on localhost, a design that only exists on your machine.",[],{"_key":77,"_type":9,"children":78,"markDefs":83,"style":43},"db13306a366f",[79],{"_key":80,"_type":13,"marks":81,"text":82},"c0ea3633ca97",[],"2. Choose the shape before you choose the motion",[],{"_key":85,"_type":9,"children":86,"markDefs":91,"style":26},"365452923717",[87],{"_key":88,"_type":13,"marks":89,"text":90},"b14c9b15f2b6",[],"The ratio decides the composition, so set it first. Aspects names the destinations rather than making you remember numbers:",[],{"_key":93,"_type":9,"children":94,"level":104,"listItem":105,"markDefs":106,"style":26},"6a2fb3f6f9c6",[95,100],{"_key":96,"_type":13,"marks":97,"text":99},"52631cf7265f",[98],"strong","9:16",{"_key":101,"_type":13,"marks":102,"text":103},"c127b44a2041",[]," — Reels, Stories, TikTok, Shorts",1,"bullet",[],{"_key":108,"_type":9,"children":109,"level":104,"listItem":105,"markDefs":118,"style":26},"0b39c7d304d8",[110,114],{"_key":111,"_type":13,"marks":112,"text":113},"89a0a7c7910c",[98],"4:5",{"_key":115,"_type":13,"marks":116,"text":117},"9dd9f2b8bad8",[]," — the Instagram and Facebook portrait feed",[],{"_key":120,"_type":9,"children":121,"level":104,"listItem":105,"markDefs":130,"style":26},"6f1f6e58df98",[122,126],{"_key":123,"_type":13,"marks":124,"text":125},"0befdcddc608",[98],"3:4",{"_key":127,"_type":13,"marks":128,"text":129},"319a52612400",[]," — Instagram's profile grid preview, which changed from square in 2025 and is what your post is cropped to on your own profile",[],{"_key":132,"_type":9,"children":133,"level":104,"listItem":105,"markDefs":142,"style":26},"60120e9a9b2b",[134,138],{"_key":135,"_type":13,"marks":136,"text":137},"d8579ce7c29f",[98],"1:1",{"_key":139,"_type":13,"marks":140,"text":141},"91e1365e4c1f",[]," — a square post",[],{"_key":144,"_type":9,"children":145,"level":104,"listItem":105,"markDefs":154,"style":26},"ac8601b10bfa",[146,150],{"_key":147,"_type":13,"marks":148,"text":149},"4974c1044aa4",[98],"16:9",{"_key":151,"_type":13,"marks":152,"text":153},"d05b5061afac",[]," — YouTube, or anywhere a video is expected to be landscape",[],{"_key":156,"_type":9,"children":157,"markDefs":162,"style":26},"e462b277f053",[158],{"_key":159,"_type":13,"marks":160,"text":161},"7b38112bb680",[],"A desktop layout in a 9:16 frame is mostly empty margin. If the output is for a phone, set a narrower render viewport too and let the site's own responsive breakpoints do the work — you are capturing the mobile design, not shrinking the desktop one.",[],{"_key":164,"_type":9,"children":165,"markDefs":170,"style":43},"01e4b05a1d61",[166],{"_key":167,"_type":13,"marks":168,"text":169},"a73fbd9a2bc3",[],"3. Build the scroll",[],{"_key":172,"_type":9,"children":173,"markDefs":178,"style":26},"0008c25a8273",[174],{"_key":175,"_type":13,"marks":176,"text":177},"375cb786b506",[],"Switch to Scroll mode. A scroll is a list of steps: go to this position, over this long, with this easing. Two steps is usually enough — rest at the top, then travel to the bottom — and a hold at either end stops the video starting and ending mid-motion, which is what makes a loop feel deliberate.",[],{"_key":180,"_type":9,"children":181,"markDefs":186,"style":26},"945702c958a5",[182],{"_key":183,"_type":13,"marks":184,"text":185},"4999c64310bb",[],"Easing matters more than duration. A linear scroll reads as machinery; an ease-in-out reads as a hand. If the page has a section worth dwelling on, add a step that stops there for a beat rather than slowing the whole thing down.",[],{"_key":188,"_type":9,"children":189,"markDefs":194,"style":43},"c67ea553987f",[190],{"_key":191,"_type":13,"marks":192,"text":193},"ed318a4cc5b0",[],"4. Export",[],{"_key":196,"_type":9,"children":197,"markDefs":202,"style":26},"67bafa8d494e",[198],{"_key":199,"_type":13,"marks":200,"text":201},"d2c40d1624c0",[],"Press export and you get an MP4. Not a screen recording of your desktop — there is no desktop in it, no cursor unless you asked for one, no dropped frames because another app woke up mid-capture.",[],{"_key":204,"_type":9,"children":205,"markDefs":210,"style":43},"cb6afbcfc9e2",[206],{"_key":207,"_type":13,"marks":208,"text":209},"a162015fd16b",[],"Why the output is identical every time",[],{"_key":212,"_type":9,"children":213,"markDefs":218,"style":26},"7cfd95f20882",[214],{"_key":215,"_type":13,"marks":216,"text":217},"b100a1f0eac1",[],"This is the part that separates a rendered scroll from a recorded one, and it is worth understanding because it changes how you work.",[],{"_key":220,"_type":9,"children":221,"markDefs":226,"style":26},"efc8e05bbfd5",[222],{"_key":223,"_type":13,"marks":224,"text":225},"72efe59e2826",[],"A screen recorder samples whatever the display happened to show, at whatever rate the machine could manage. Render the same scroll twice and you get two different files: different frame timings, different dropped frames, a different result on a busy machine than on an idle one.",[],{"_key":228,"_type":9,"children":229,"markDefs":249,"style":26},"2956ca69d5ea",[230,234,238,242,245],{"_key":231,"_type":13,"marks":232,"text":233},"5378d9d0dcab",[],"Aspects does not sample. Frame ",{"_key":235,"_type":13,"marks":236,"text":237},"097c5eae8351",[19],"N",{"_key":239,"_type":13,"marks":240,"text":241},"bbbe491d0584",[]," is computed from the scroll position at frame ",{"_key":243,"_type":13,"marks":244,"text":237},"91ef14904862",[19],{"_key":246,"_type":13,"marks":247,"text":248},"92cd27f83008",[],", with no reference to the wall clock at all. The same artboard produces the same bytes on a laptop on battery and a Mac Studio, today and next month.",[],{"_key":251,"_type":9,"children":252,"markDefs":257,"style":258},"84dcb06deb97",[253],{"_key":254,"_type":13,"marks":255,"text":256},"de3c03c632e3",[],"Which means you can re-export at a different ratio, or after fixing a typo on the page, and get back exactly the video you had — minus the typo.",[],"blockquote",{"_key":260,"_type":9,"children":261,"markDefs":266,"style":43},"f4c9d52a3680",[262],{"_key":263,"_type":13,"marks":264,"text":265},"271a30e9dbf3",[],"Common mistakes",[],{"_key":268,"_type":9,"children":269,"markDefs":274,"style":275},"509bf589864c",[270],{"_key":271,"_type":13,"marks":272,"text":273},"44d0af10fb5c",[],"Capturing the desktop layout for a phone-shaped video",[],"h3",{"_key":277,"_type":9,"children":278,"markDefs":283,"style":26},"65e1d1cc95fd",[279],{"_key":280,"_type":13,"marks":281,"text":282},"71bf144e6395",[],"The most frequent one. If the render viewport is 1440 wide and the output is 9:16, you are showing a wide layout letterboxed into a tall frame. Narrow the viewport and the site gives you its mobile design.",[],{"_key":285,"_type":9,"children":286,"markDefs":291,"style":275},"c26d4502bf74",[287],{"_key":288,"_type":13,"marks":289,"text":290},"d193d68ae039",[],"Scrolling too fast to read",[],{"_key":293,"_type":9,"children":294,"markDefs":299,"style":26},"1b7f4751c287",[295],{"_key":296,"_type":13,"marks":297,"text":298},"93fc9ac95cac",[],"A scroll that takes three seconds to cross a page nobody can read is an animation, not a demonstration. If the point is the content, slow down; if the point is the length, speed up and hold at the end.",[],{"_key":301,"_type":9,"children":302,"markDefs":307,"style":275},"bd3c72036070",[303],{"_key":304,"_type":13,"marks":305,"text":306},"e4b104ac9ca6",[],"Forgetting the first frame is the thumbnail",[],{"_key":309,"_type":9,"children":310,"markDefs":315,"style":26},"fc7d94cf0ad4",[311],{"_key":312,"_type":13,"marks":313,"text":314},"24affe1a37ce",[],"Whatever is at the top of the scroll is what people see before they press play. Start on something worth stopping for.",[],{"_key":317,"_type":9,"children":318,"markDefs":323,"style":43},"0d9b7ad49aec",[319],{"_key":320,"_type":13,"marks":321,"text":322},"814a3ab1247b",[],"Where the file goes",[],{"_key":325,"_type":9,"children":326,"markDefs":331,"style":26},"be69ec6c7f9a",[327],{"_key":328,"_type":13,"marks":329,"text":330},"58ad6485acb2",[],"Exports land in your Movies folder, and if cloud sync is on they appear on your iPhone within seconds — in the same folders you use on the Mac. That is usually the point: the video is for a feed, the feed is on a phone, and the file is already there when you get to it.",[],"Most tools stitch a long screenshot. Here is how to render a website scrolling as an MP4 instead, at the ratio your destination wants, with the same output every time.","2026-09-07T09:00:00Z",{"_type":335,"description":336,"title":337},"seoFields","Render a website scrolling as an MP4 at 9:16, 4:5 or any ratio, from a URL, on your Mac. A deterministic alternative to screen recording.","How to make a scrolling video of a website (macOS)","scrolling-website-video","How to make a scrolling video of a website"]