Framer component

Autodemo

Autodemo

Autodemo

A product demo that plays itself. Add screenshots of your app, choose where the cursor clicks and what it types, and Autodemo plays it like a video.

A product demo that plays itself. Add screenshots of your app, choose where the cursor clicks and what it types, and Autodemo plays it like a video.

Open the setup page

app.yourproduct.com
Product screen. Step 1: Start a new invoice
Product screen. Step 2: Pick the client
Product screen. Step 3: Add the amount
Product screen. Step 4: Send the invoice
Product screen. Step 5: Sent. The invoice is on the list.

1

Add your screenshots

Take a screenshot of each screen you want to show. Until you add yours, the demo shows sample screenshots.

2

Set the cursor and zoom

Use the free setup page. Click where the cursor goes, drag a box around the part to zoom into, and blur anything private. Then paste one code into Framer.

Open the setup page

3

Publish

The demo starts when visitors scroll to it. It loops, or it ends with a button to your sign-up page. Visitors can pause it at any time. On phones, captions move under the screenshot so they stay readable.

Make it fit your site

Change the frame, the cursor and the colors. End the demo with a button to your sign-up page.

app.yourproduct.com
Product screen. Step 1: Start a new invoice
Product screen. Step 2: Pick the client
Product screen. Step 3: Add the amount
Product screen. Step 4: Send the invoice
Product screen. Step 5: Sent. The invoice is on the list.

Dark browser bar

Fits a dark website.

Product screen. Step 1: Start a new invoice
Product screen. Step 2: Pick the client
Product screen. Step 3: Add the amount
Product screen. Step 4: Send the invoice
Product screen. Step 5: Sent. The invoice is on the list.

Card frame and dot cursor

Uses your own accent color.

app.yourproduct.com
Product screen. Step 1: Start a new invoice
Product screen. Step 2: Pick the client
Product screen. Step 3: Add the amount
Product screen. Step 4: Send the invoice
Product screen. Step 5: Sent. The invoice is on the list.

End screen

Ends with a button to your sign-up page and a Watch again button.

app.yourproduct.com
Product screen. Step 1: Start a new invoice
Product screen. Step 2: Pick the client
Product screen. Step 3: Add the amount
Product screen. Step 4: Send the invoice
Product screen. Step 5: Sent. The invoice is on the list.

Phone size

Captions move under the screenshot, so the text stays readable.

Create a free website with Framer, the website builder loved by startups, designers and agencies.