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.

The feature take on Conversion funnel: same story, built for a different job on the page.

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--compare" 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--compare --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": "Before and after",
  "label": "Two water slides side by side on one ground line, mirrored so their paid pools meet in the middle. The same 1,000 visitors (fifty riders, each twenty visitors) enter the top of each. On the Before slide, the old onboarding, riders have to jump open gaps between ramps and many fly off into the lost trough: 380 sign up, 180 start a trial, 100 pay. On the After slide, guided onboarding, the ramps have guard rails and joined chutes: 620 sign up, 400 start a trial, 240 pay. The two paid pools fill to clearly different water levels, and a bracket between them marks the gap: 2.4 times more paid customers from the same visitors.",
  "eyebrow": "Onboarding, before and after",
  "heading": "Same traffic. Far more of it pays.",
  "sub": "We sent the same visitors down both slides. Guided onboarding keeps them on.",
  "unit": "visitors",
  "riders": 50,
  "spawnUntil": 4.9,
  "sides": [
    {
      "name": "Before",
      "note": "Old onboarding",
      "stages": [
        {
          "name": "Visit",
          "value": 1000
        },
        {
          "name": "Sign up",
          "value": 380
        },
        {
          "name": "Trial",
          "value": 180
        },
        {
          "name": "Paid",
          "value": 100
        }
      ]
    },
    {
      "name": "After",
      "note": "Guided onboarding",
      "stages": [
        {
          "name": "Visit",
          "value": 1000
        },
        {
          "name": "Sign up",
          "value": 620
        },
        {
          "name": "Trial",
          "value": 400
        },
        {
          "name": "Paid",
          "value": 240
        }
      ]
    }
  ],
  "ofPrev": "of",
  "lost": "lost on the way",
  "compare": "more paid customers",
  "compareNote": "from the same {n} visitors"
}

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--compare.html" title="Before and after" 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

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.

the concept

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