Loading…
Live page · scroll inside
Freepricing · dark · html · css · vanilla js
Usage Slider Pricing on a Cost Curve
An email API's pricing page built around one honest control: a log-scale slider from a thousand to ten million emails a month moves a marker along the bill's cost curve, with the tier breakpoints marked on the chart and the monthly total, the effective price per thousand and the plan name updating as you drag.
What's inside
- 01Pricing intronone
- 02Cost curvemarker follows
- 03Every plan includesnone
How to use it
From prompt to a live page.
- 01Try the page
The preview is the shipped page: one job, one mechanic, every state wired. Scroll, type, click.
- 02Pick a palette
Token sets re-tint the page live. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, or the route your framework keeps for this job: not-found page, auth route, pricing route.
- 04Copy the prompt
It quotes the page block by block with the tokens, the motion script and the rules.
- 05Wire it up
Swap the placeholder copy, point the form or the countdown at your backend, keep the structure.
