Payback Basics

A payback timeline for Framer, free: cumulative cost against cumulative saving, drawn as two series with a marker on the month one clears the other.

Every number is a property control, not a form a visitor fills in: build cost, running cost per month, monthly saving and the months shown drive the chart. Cost draws as a dashed line, saving as a solid filled one, so the pair reads apart without relying on colour alone, and a row of month cells beneath the chart shades from red to green as the crossing point passes.

The marker lands on the first whole month the cumulative saving clears the cumulative cost: at the shipped defaults, a build cost of 4,500 and a running cost of 180 against a saving of 1,290 a month, that is month 5. If the running cost matches or beats the saving, the chart says so instead of drawing a marker that never arrives.

Eight currencies. Gridlines, month labels and the legend are each a switch; the heading and the three series labels are string controls; and every surface, line and text colour plus the corner radius are property controls too.

This is the plain model, a drop-in graphic for a page making an argument rather than a form. Payback Calculator, sold separately, prices the tasks an agent does not clear from a task count, a per task time and a loaded rate; this component does not take those inputs.

Licence: use it in as many sites as you like, your own and work you do for clients, commercially, with no attribution. What you may not do is pass it on as a product: do not resell or redistribute the component or its code, on its own or inside another template, kit or product, paid or free, and do not publish it as a component anywhere. Questions: me@majedesigns.dev