Motion Studio

Browser Window

A Mac-style browser frame. The URL types into the address bar, then your page content fades in below.

Preview

Open editor

Usage

The classic SaaS-product-video opening shot — a Mac-style browser window with traffic lights, back/forward/refresh buttons, and a URL bar. The window springs in, the URL types out character-by-character with a blinking caret, then your page content fades up from below.

Drop your product screenshot URL into pageImageUrl (host it anywhere — apps/web/public/ works) and set url to whatever address you want typed. Use pageBackgroundColor as a fallback while the image is loading or as the page color when there's no screenshot.

Props

NameTypeDefault
urlstring"https://aesthetic.dev"
pageImageUrlstring""
pageBackgroundColorstring"#fafafa"
backgroundColorstring (hex)"#ffffff"

Composition

ID
BrowserWindow
Resolution
1920×1080
FPS
60
Duration
4.7s