View on GitHub

Every format, from one timeline

Your agent writes one screen and one timeline. Everything below is built from them: for a launch post, a help center, a homepage or a phone. Each format ends with the sentence to give your agent.

export

A demo video, cut the way you need it

The cursor, the clicks, the typing, the camera and the captions are rendered into an MP4. The length comes from the timeline, so a changed step never leaves a gap to re-edit.

What you get

  • demo.mp4the video
  • demo.vttsubtitles for any player
  • chaptersone per titled step, inside the MP4
  • demo-step-02.mp4one short clip per step, for docs and social posts
  • narrationa spoken line per step, mixed into the video
Ask your agent

"Export the demo as a video with narration and one clip per step."

export --guide · build-all

A help article, or a whole help center

Every titled step becomes a numbered instruction with its own screenshot, already highlighted and cropped. List your guides in one catalog and one command builds all of them, in every language, rebuilding only the ones whose screen or timeline changed.

Steps 2 and 3 of a generated help guide: "Check what is left", with the drafted-sections badge highlighted, and "Open the section", with the outline item highlighted, each followed by its caption
help.catalog.json
{ "outputDir": "help-out",
  "defaults": { "locales": ["en", "fr"] },
  "guides": [
    { "slug": "draft-response", "dir": "demo" },
    { "slug": "export-word", "dir": "guides/export" }
  ] }

What you get

  • guide.mdfor your docs site
  • guide.htmla standalone page, video inline
  • guide.jsonfor your own help center
  • index.jsonevery guide in every language, one index

When a rebuild changes a screenshot beyond a threshold, the guide is flagged as stale, with a picture of what moved, so nobody publishes a help article that no longer matches the product.

Ask your agent

"Set up a help center: one guide per feature, in English and French."

"kind": "reel" · --device mobile

A homepage loop, in landscape and portrait

Silent, looping product clips that start when they scroll into view. One responsive screen makes both shapes: the desktop cut pushes the camera in on the answer, the phone cut skips the pushes a narrow screen has no room for. Both below come from the same two files.

The desktop reel's last frame: Clarido's pipeline view answering "Where is churn risk hiding?" with a bar chart and $310K recoverable this quarter
Desktop · 10 s
16:9, for a homepage hero or a launch post.
The phone reel's last frame: the same pipeline answer, stacked for a portrait screen
Phone · 9 s
Portrait, for mobile visitors and stories.

What you get, per shape

  • clip.mp4 · .webmfor the web
  • clip.giffor email and READMEs
  • clip.poster.pngthe payoff frame
  • embed-mobile.htmldrop-in page, plays in view

Any step can be marked desktop-only or phone-only, or carry a phone override. Visitors who ask for reduced motion get the still frame.

Ask your agent

"Make a 10-second loop for our homepage, in landscape and in portrait for phones."

tour --embed

An interactive tour you can put on any page

Visitors pause, step back and pick the next scenario. Nothing is encoded: the tour is the screen itself, so it stays sharp at any size and weighs what a web page weighs. One tag puts it on your own site, and it picks the desktop or phone version from the visitor's screen.

Desktop.
Phone, same scenario.
on your page 
<script type="module" src="https://your-site.com/tour/anim-tour.js"></script>
<anim-tour src="https://your-site.com/tour/"
           scenario="draft-response" autoplay="inview"></anim-tour>

What you get

  • index.htmlthe full tour, every scenario in a list
  • anim-tour.jsthe one-tag embed
  • embed-*.snippet.htmlfor a CMS that strips scripts
  • tourstep · tourendevents for your analytics

Several scenarios can share one screen, so one product needs one mockup. Open the full Clarido tour to see the scenario list.

Ask your agent

"Build an interactive tour with three scenarios, for desktop and phone, and embed it on our pricing page."

localize

Every format, in every language

A translation reuses the timeline step for step. Only the words change: one strings file for the titles and captions, and the translated screen. Dates, numbers and currencies follow the locale, and every format above comes out in that language too.

What you get

  • locales/fr/the translated screen
  • strings.fr.jsontitles, captions, narration
Ask your agent

"Make a French version of every demo."

record

Your real app, not just a mockup

The same timeline can play in your running app: real pages, real navigation, your signed-in session. You get the same video and the same help guide, recorded from staging instead of from a mockup.

anim.config.json · a step in your app
{ "id": "save", "time": "6s", "action": "click",
  "target": "[data-help='save']",
  "waitFor": "[data-help='editor']",
  "title": "Save your changes" }

What it handles

  • waitForwaits for your page before each step
  • auth.jsonsign in once, reuse the session
  • resetputs your data back between passes
Ask your agent

"Record the demo against our staging app at https://staging.example.com."

Start with one demo. Ask for the rest.

Every format on this page is one sentence away once the first demo exists. Free, open source, and it runs on your machine.

Get started View on GitHub