How to record smooth scroll videos for Framer templates

1. 1

   Publish to a public address

   Publish the template, or its demo, to its .framer.website address or a custom domain. It has to open in a private window without a password.

2. 2

   Paste the URL and choose Live Capture

   Paste the address on the home page. Under the engine, choose Live Capture. It screenshots the page at every scroll position rather than panning a still, so appear effects, scroll transforms and sticky sections play exactly as they do in the browser.

3. 3

   Set the pace

   Twelve to twenty seconds suits most template homepages. Smooth is the safe motion; Pulse moves section by section and settles on each, which shows off a template’s structure.

4. 4

   Pause on what sells it

   Click the page where the scroll should stop: the hero, the bento or feature grid, testimonials, pricing. Up to 6 pauses, from 0.5 to 5 seconds each. Turn on Both ways if the video scrolls back up.

5. 5

   Show the hover states

   Turn on the cursor, add a hover and click the card or button it should rest on. The cursor travels there, the hover effect plays, and it holds for 0.5 to 5 seconds before moving on. Eight cursor styles, from macOS to a plain dot.

6. 6

   Export the cuts you need

   A 16:9 MP4 at 1080p or 1440p for the listing, then change the device to Mobile and export a 9:16 or 4:5 cut of the phone layout for X, Instagram or TikTok.

Static Pan reads the page once and moves a frame down it. It is fast and perfectly even, but anything that animates on scroll is frozen in whatever state it was in when the page was read. Turn on Settle Animations and entrance effects are run to their finished state first, so nothing is caught half-faded. Live Capture plays the effects for real. It takes considerably longer to render and adds 13 credits to the export.

• Use Live Capture when the motion is part of what you are selling, which for most Framer templates it is.
• Use Static Pan with Settle Animations for quick drafts, for pages whose animations are only entrances, or for the mobile cut where screen space is tight.

• A browser frame. Safari or Chrome, light or dark, so the preview reads as a website at a glance.
• A background. Padding around the window with a colour, a gradient or one of the 36 presets. Rounded corners and a soft shadow make it look like a product shot rather than a screen grab.
• Light and dark. If the template follows the system theme, force Light or Dark under Color scheme and export one of each.
• A clean first frame. Hold a second on the hero before the scroll begins. Marketplaces and social apps often use the first frame as the thumbnail.