ROI Calculator Sliders

About this style

Interactive ROI calculators are a long-standing staple of B2B marketing, especially for software sold to buyers who must justify the purchase to finance. The visitor enters a few facts about their team, such as headcount, hours lost to a task and the cost of an hour, and the page estimates annual savings, return on investment and payback time. Animated versions appear in promo videos and on landing pages to show the estimate responding live, which makes the claim feel testable rather than asserted. The format earns trust when its formula is simple and stated on screen, the inputs are realistic, and every output can be recomputed by hand from the slider values.

Make a 10-second ROI calculator promo on a dark espresso page: a cursor drags three sliders, and the net savings figure, ROI, payback time, hours saved and a 12-month savings chart recompute live with every pixel the sliders move.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Ampleo, which automates status reports and handoffs (fictional). Wordmark: "ampleo".
- Page title: "What Ampleo gives back", with the label "ROI CALCULATOR".
- Sliders (label · range · step · start → end): "Team size" · 5–200 people · 1 · 20 → 85; "Hours lost per person each week" · 1–12 h · 0.5 · 4 → 6; "Loaded hourly cost" · $30–$150 · $1 · $60 → $72.
- The model, stated in the footnote: Ampleo recovers 40% of the hours lost; 48 working weeks a year; $39 per seat per month.
  Weekly savings = team × hours × 0.4 × cost. Gross per year = weekly × 48. Ampleo cost per year = team × 39 × 12. Net = gross − cost. ROI = net ÷ cost. Payback = cost ÷ weekly savings, in weeks. Hours back per year = team × hours × 0.4 × 48.
- Key states (net · ROI · payback · hours back):
  start (20, 4, $60): $82,800 · 8.8× · 4.9 weeks · 1,536
  after team (85, 4, $60): $351,900 · 8.8× · 4.9 weeks · 6,528
  after hours (85, 6, $60): $547,740 · 13.8× · 3.3 weeks · 9,792
  end (85, 6, $72): $665,244 · 16.7× · 2.7 weeks · 9,792 (gross $705,024, cost $39,780)
- Tooltip on month 12: "Month 12" over "$665,244 saved · $39,780 spent".
- Footnote: "Assumes Ampleo recovers 40% of status-reporting time · 48 working weeks · $39 per seat per month".
- Button: "Email me this estimate", which becomes "Sent · check your inbox". Note beside it: "Estimates update as you move the sliders."
- Length: 10 seconds.
</inputs>

<direction>
- Look: a calm, confident, finance-grade page in warm darkness: espresso background, cream type, one mint for money and one amber for the controls. It reads like a well-made landing page module, not a dashboard: big type for the answer, small honest type for the assumptions. The pleasure is watching everything respond at once, smoothly, while every number stays true to the formula.
- Palette: page #16120E with a soft warm pool of #221B14 at the top-left (a radial gradient, 900px radius); cards #201A15 with a 1px #33291F border; text cream #F3EDE3; secondary #A89B8A; faint #6F6457; slider track #3A3027; amber #F0B45A (slider fills, thumb rings, the break-even mark, the button); mint #7FE0B5 (savings: bars, underline); mint cap #B9F2D6; gridlines #2E261F dashed; tooltip #2B231C with a 1px #4A3D30 border. Nothing glows.
- Type: Instrument Serif 400 for the title (56px) and the big figure (132px); Instrument Sans 400, 500 and 600 for everything else (labels 15px uppercase tracked 0.14em, slider labels 20px, slider values 28px 600, stats 34px 600, chart labels 13px, footnote 14px, button 17px 600) with tabular figures. Instrument Serif has no tabular figures, so set each character of the big figure in a fixed-width slot (digits 70px, comma and dollar sign 34px) so it never jitters while it changes.
- Layout:
  - Header: "ROI CALCULATOR" in amber at x 120, baseline y 110; the title in cream at x 120, baseline y 178. The wordmark right-aligned to x 1800 at baseline y 110: a 26px mint circle with a quarter cut out of its top-right, then "ampleo" in Instrument Sans 600 24px.
  - Inputs card x 120–760, y 240–980, radius 24. "YOUR TEAM" label at x 168, baseline y 300. Three sliders centered on y 380, 560 and 740: the label at x 168 and the value right-aligned to x 712, both at baseline 50px above the track ("85 people", "6 h", "$72"); the track x 168–712, 6px tall, radius 3, filled amber from its start to the thumb; the thumb a 28px cream circle with a 3px amber ring; the range ends in 14px faint under the track's ends ("5" / "200", "1 h" / "12 h", "$30" / "$150"). Thumb x = 168 + (value − min) ÷ (max − min) × 544. The footnote at x 168 wrapping to 544px across baselines y 916 and 938.
  - Results card x 820–1800, y 240–980, radius 24. "NET SAVINGS PER YEAR" label at x 868, baseline y 300; the figure at x 868, baseline y 432; "after Ampleo's cost" Instrument Sans 400 18px secondary just right of the figure's last slot on the same baseline. Stats at x 868, 1162 and 1456: labels at baseline y 490 ("ROI", "PAYS FOR ITSELF IN", "HOURS BACK PER YEAR"), values at baseline y 532 ("16.7×", "2.7 weeks", "9,792").
  - The chart: "Cumulative net savings, first 12 months" 15px secondary at x 868, baseline y 590; plot x 880–1740, y 620–850 on a fixed $0–$700K scale; dashed gridlines at $200K, $400K and $600K with labels right of the plot at x 1752; 12 bars, 46px wide, centered in 12 equal slots, each = month × net ÷ 12, mint with a 3px mint-cap top and 4px top radius; month numbers 1–12 in 13px faint at baseline y 876. A dashed 1.5px amber line traces the cumulative Ampleo cost (month × cost ÷ 12) across the slots, labeled "Ampleo cost" in 13px amber at its right end; it stays small, which is the point. The break-even mark: a 1px amber vertical hairline at payback weeks ÷ 52 × 12 months on a month axis that maps month 0 to x 880 and month 12 to x 1740, from y 620 to 850, labeled "Break-even" at its top in 12px amber.
  - The note at x 868, baseline y 936; the button at x 1512–1752, y 908–952, radius 22, amber with #16120E text.
- Live recompute: every output is a pure function of the three slider values, and each value is the thumb's continuous position rounded to its step, so what's printed always reconciles: outputs use the printed values, never the continuous ones. While a slider moves, its value text, the figure, the stats, all twelve bars, the cost line and the break-even mark update every frame. Bars move together because they share one net.
- Dragging: the cursor (an original arrow drawn in SVG, 24px, cream with a 2px #16120E outline) presses the thumb (cursor scales to 0.9, the thumb grows to 1.15× with an 8px amber ring at 25%), drags it along the track on easeInOutCubic, and releases (both return over 0.12 s). A 13px value bubble (#2B231C, radius 8) floats 22px above the thumb while it's held.
- Motion rules: smooth and continuous, never stepped animation; cards rise 24px and fade in on easeOutCubic; the underline draws on easeInOutCubic; nothing bounces.
- Premium: numbers that are visibly computed, not animated toward a target; large confident serif for the answer; assumptions printed on the page; a chart whose bars all breathe together. Cheap: a counter that rolls to a final number regardless of the sliders, a gauge or speedometer, dollar-bill particles, neon green on black, rounding that doesn't match.
- Banned: real company names, logos and UI copied from existing products, gauges and speedometers, money or coin particles, confetti, neon glows, purple, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.9s: the header and the two cards rise and fade in, 0.1 s apart; the sliders sit at 20, 4 and $60; the figure reads $82,800 and the stats 8.8×, 4.9 weeks, 1,536; the bars grow from 0 to their starting heights (0.5–1.0 s, easeOutCubic).
- 1.0–1.25s: the cursor enters from (60, 1060) and reaches the team thumb at (210, 380).
- 1.3–2.5s: it drags team size from 20 to 85 (thumb to x 391); everything recomputes live; at release the figure reads $351,900.
- 2.5–2.8s: the cursor moves to the hours thumb at (316, 560).
- 2.8–3.7s: it drags hours from 4 to 6 (thumb to x 415); at release $547,740, 13.8×, 3.3 weeks, 9,792.
- 3.7–4.0s: the cursor moves to the cost thumb at (304, 740).
- 4.0–4.9s: it drags cost from $60 to $72 (thumb to x 358); at release $665,244, 16.7×, 2.7 weeks.
- 4.9–5.4s: the cursor glides to the month 12 bar (1704, 680); the bar gains a 1px cream outline and the tooltip appears above it at 5.4 s, right-aligned to x 1780 (Instrument Sans 600 15px over 400 14px).
- 5.0–5.6s: a 3px mint underline draws under the figure (x 868 to its end, y 452) and "after Ampleo's cost" fades in.
- 6.0s: the hero frame: all three sliders at their end values, $665,244 underlined, the stats, the full chart with the cost line, the break-even mark and the tooltip, the footnote and the button.
- 6.4–7.0s: the tooltip fades; the cursor moves to the button and presses at 7.0 s.
- 7.0–7.3s: the button's label crossfades to "Sent · check your inbox" with a small check.
- 7.3–10.0s: hold on the final frame: the finished estimate and the sent button.
For other lengths, stretch the drags and the pauses between them; keep each output live with its slider and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: everything is drawn in SVG.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face (Instrument Serif 400; Instrument Sans 400, 500 and 600) before defining window.seek.
- Engine: SVG. One inline <svg viewBox="0 0 1920 1080"> scaled to fit; seek(t) sets attributes (x, width, height, transform, opacity, stroke-dashoffset, path d) and text content from t. No SMIL, no CSS animations. seek(t) first computes the three thumb positions from t, rounds them to the slider values, runs the model, and then draws, so every visible number comes from the same values. Format money with en-US grouping and round only at display.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the figure, ROI, payback and hours match the key states at 2.5, 3.7 and 4.9 s; at any mid-drag frame (say 1.9 s) the printed slider value, the figure and the month 12 bar agree with the formula; the big figure's digits don't jitter as they change; the cost line stays a thin band near the bottom; the break-even mark sits at about week 2.7 by 6.0 s; the 6.0 s frame shows everything including the tooltip; and the final frame shows the sent button. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…