Scenes / conversion / water-slide-funnel / water-slide-funnel--cta

SVG · conversion · metrics · scale

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.

The cta 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 call to action built from a single short water slide. Under the heading, one rider waits on a small tower and gives a little bob. The water switches on and lights the flume one segment at a time, each segment's lamp turning on as it fills. The rider slides down, flies off the lip and splashes into the landing pool, which is a button labelled Start your free trial; the button presses in and sends out one pulse. The water drains segment by segment and the next rider climbs the ladder to wait at the top.

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--cta" 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--cta --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": "Slide into the trial",
  "label": "A call to action built from a single short water slide. Under the heading, one rider waits on a small tower and gives a little bob. The water switches on and lights the flume one segment at a time, each segment's lamp turning on as it fills. The rider slides down, flies off the lip and splashes into the landing pool, which is a button labelled Start your free trial; the button presses in and sends out one pulse. The water drains segment by segment and the next rider climbs the ladder to wait at the top.",
  "eyebrow": "Product analytics",
  "heading": "See where your\nnext visitor lands.",
  "sub": "Add one snippet and see who makes it through every step of your funnel.",
  "button": "Start your free trial",
  "fine": "14 days free · No card needed",
  "segments": 8,
  "seed": 11
}

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--cta.html" title="Slide into the trial" 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

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.

hero

Related scenes

all scenes