Conversion funnel

Riders slide down one ramp per funnel stage; at each lip some splash into that stage's pool, and the last pool fills with paying customers.

Drawn in Soft UI · follows any look See the matched set →

Look Make your own look →

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "water-slide-funnel" scene for our site, in our brand.
Read our design tokens from this project (or run `site-motion theme <our url>`), write the content JSON with our real product nouns and numbers, then render mp4, webm and a poster. Check the loop seam before you finish.

From the command line

Draft your tokens, then copy the scene into your project. The first scene you add sets your site's look; every scene after it follows.

node bin/site-motion.mjs theme https://yoursite.com --out brand.json
node bin/site-motion.mjs add water-slide-funnel --tokens brand.json

Your brand, as tokens

The theme playing above, as a token file the CLI and the skill accept.

content.json, the words in this scene

{
  "title": "Conversion funnel",
  "label": "A water-slide cascade with one ramp per funnel stage: visit, sign up, trial, paid. Riders (each ten visitors) slide down; at every lip some splash into the pool under it, the drop-off at that stage, and the rest hop onto the next ramp. Each stage counts the riders that reach it, and the last pool fills with paying customers.",
  "eyebrow": "Product analytics",
  "heading": "See exactly where\nyour visitors\nfall off.",
  "sub": "Every rider is ten real visitors. Every pool is the people you lost at that step.",
  "unit": "visitors",
  "stages": [
    {
      "name": "Visit",
      "value": 1000
    },
    {
      "name": "Sign up",
      "value": 420
    },
    {
      "name": "Trial",
      "value": 180
    },
    {
      "name": "Paid",
      "value": 60
    }
  ],
  "firstNote": "this week",
  "ofPrev": "of",
  "leftAt": "left at",
  "riders": 100,
  "spawnUntil": 5.6
}

Files

default theme

Rendered frame-exact. For your brand, run the command on the left.

MP4 · 1600×900 Poster PNG Preview WebM

embed snippet

<iframe src="/water-slide-funnel.html" title="Conversion funnel" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>

More ways to show this

the same story, one per job on the page

Before and after

The same riders go down two slides at once; the guided one loses fewer at each lip, so its paid pool fills 2.4 times higher.

feature

Slide into the trial

One rider waits on a small tower, the water lights the flume segment by segment, and it splashes into a landing pool shaped like the Start button, which presses in once.

cta