Scenes / conversion / water-slide-funnel / water-slide-funnel--hero

SVG · conversion · metrics · scale

From visit to paid

One rider rides a single long slide with a loop-the-loop into the Paid pool, and its splash lifts the share of visitors who pay out of the water.

The hero 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 →

A hero section. A big headline holds the top left. One long water slide sweeps across the rest of the frame: from a start platform labelled Visit, 1,000 this week, a single round rider pushes off, slides down a curving flume, plunges into a loop-the-loop, banks round a hairpin turn and races back along the bottom to a ski-jump lip, then flies off and splashes into a large pool labelled Paid. The splash sends a wave across the pool and the figure 6% rises out of the water on it, beside the words of visitors become paying customers, 60 of 1,000 this week. The rider surfaces, floats and sinks away, and the next rider appears on the platform.

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--hero" 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--hero --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": "From visit to paid",
  "label": "A hero section. A big headline holds the top left. One long water slide sweeps across the rest of the frame: from a start platform labelled Visit, 1,000 this week, a single round rider pushes off, slides down a curving flume, plunges into a loop-the-loop, banks round a hairpin turn and races back along the bottom to a ski-jump lip, then flies off and splashes into a large pool labelled Paid. The splash sends a wave across the pool and the figure 6% rises out of the water on it, beside the words of visitors become paying customers, 60 of 1,000 this week. The rider surfaces, floats and sinks away, and the next rider appears on the platform.",
  "eyebrow": "Product analytics",
  "heading": "Watch a visitor\nslide all the way\nto paid.",
  "sub": "Follow each visitor from their first visit to their first payment, and see the share that makes it.",
  "stages": [
    {
      "name": "Visit",
      "value": 1000
    },
    {
      "name": "Paid",
      "value": 60
    }
  ],
  "note": "this week",
  "caption": "of visitors become paying customers",
  "of": "of"
}

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--hero.html" title="From visit to paid" 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

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

Related scenes

all scenes