clickreel

Show how your product works, on the real screen.

A pointer clicks and types on your actual website, like a video. But it stays sharp, matches light and dark mode, and visitors can try it themselves.

Make a demo from your screens
  • 5.22 KB for every demo on your site
  • Sharp on any screen
  • Matches dark mode
  • Move your mouse in to try it
  • 0.36 MB for this one clip
  • Blurry on sharp screens
  • Stuck in light mode
  • Watch only

How it works

No video editing and no code to write. You show it once, it plays forever.

Pick the screen

Open your website and point at the part you want to demo, like your app's screen on your home page.

Use it once

Click and type the way a visitor would. Each action becomes a step. Add a zoom or a note where it helps.

Paste the code

You get a short piece of code. Paste it into your site's settings and publish. That's it.

Try it here first

This is a made-up task app. Make a demo of it in about a minute, with the same tool you would use on your own site.

  1. Click New task, type a task, press Enter.
  2. Press Zoom in on… and click your new task.
  3. Press Play it to watch your demo.

Use it on your own site

Works on sites made with Framer, Webflow, or by hand.

  1. Drag this button to your bookmarks bar

    clickreel studio

  2. Open your website and click the bookmark

    A small panel appears in the corner and walks you through three steps.

  3. Paste the code it gives you

    In Framer: Site settings, then Custom code. In Webflow: Page settings, then Before body tag. Publish.

Tested on a site we did not build. On TodoMVC, the studio recorded adding two tasks and ticking one, and the pasted code played it back on a fresh page.
What it needs: your screen must be part of the web page, not a picture or a video of it. If it only exists in Figma, build that one screen on your site first.
Good to know: a few big sites, such as GitHub, block bookmarks like this. Your own site won't. The demo really clicks your screen, so if that screen saves to a real server, demo a copy that doesn't.

Who it's for

Landing pages

Startups showing their product

Replace the hand-made animated mockup in your hero with your real interface, playing itself.

Portfolios

Designers presenting a case study

Show the flow you designed, crisp and in your site's theme, instead of a heavy GIF.

Docs and changelogs

Teams explaining a feature

Show the new button being used. When the design changes, the demo already has.

Inside your app

A "Show me how" button

Let the pointer do it once on the real screen, then hand control back to your user.

For developers

Coming to npm. For now, the files are in /dist on this site.

import { clickreel } from 'clickreel'

clickreel(document.querySelector('#app'), [
  { click: '.new-task' },
  { type: 'Plan the launch', in: '.task-name' },
  { key: 'Enter' },
  { zoom: '.list li:first-child' },
  { note: 'New tasks land at the top', at: '.list li:first-child' },
  { zoom: false },
], { frame: 'browser', url: 'tally.app' })

5.27 KB gzipped, no dependencies. Pauses when a real pointer enters and when scrolled out of view, has a visible pause button, never moves keyboard focus, and respects reduced motion.

{ click: sel }Glide there and click for real. Links and form submits are held back.
{ type: 'text', in: sel }Click a field and type.
{ key: 'Enter' }Press a key. Enter submits the form.
{ zoom: sel | false }Camera in, or back out.
{ note: 'text', at: sel }A pinned callout.
{ move: sel }, { wait: ms }Point at something, or hold.
frame, url, tiltBrowser, phone or laptop around it.
speed, loop, dry, resetTiming, repeat, no real clicks, reset your app.