FRAMER COMPONENT · CALCULATOR
Any calculator, written as a formula.
Sliders, fields, switches and dropdowns on one side. On the other, results from formulas you write in the panel: money, percent, durations, a bar that splits the total and alerts that change colour.
THE FORMULAS BEHIND IT
cost = hours * rate + materials
margin = price - cost
marginPct = if(price > 0, margin / price * 100, 0)
breakEven = (price - materials) / rate
EXAMPLES
Three calculators, one component.
Same file, different properties. Below 640 px of width Sumline moves the results under the inputs by itself: narrow the window and watch the cards.
Rooftop solar estimate
Lumenvale Solar · a first figure before the site visit. Example prices.
About 3 in cloudy regions, 6 in sunny ones.
- Saved each year
- $1,773
- Yearly production
- 8,059 kWh
- System cost
- $11,760
- Pays for itself in
- 6 years 8 months
- Gain over 25 years
- $32,566
Saved each year: $1,773. Yearly production: 8,059 kWh. System cost: $11,760. Pays for itself in: 6 years 8 months. Gain over 25 years: $32,566.
Solar savings. A duration result (“6 years 8 months”), a hidden helper value, two alerts that can show together, min and max under the sliders, dark colours.
Website quote
Pinegate Studio · pick a package and the extras.
Six pages included, then $180 a page.
$90 a page.
30% sooner, 25% more.
- Project total
- $5,160
- Deposit to start
- $1,548
- Ready in
- 5 weeks
Project total: $5,160. Deposit to start: $1,548. Ready in: 5 weeks.
Website quote. A dropdown, two switches and option buttons. The button carries the choices to /quote, where a second Sumline reads them from the address.
FORMULAS
Plain maths, explained when it goes wrong.
Use the keys of your inputs and of the results above. A small parser reads the formula; nothing runs as code. A mistake shows as a sentence on the canvas, never as a blank.
+ - * / ^ ( )
Arithmetic: ^ first, then * and /, then + and −.
< <= > >= == !=
Comparisons give 1 when true and 0 when false.
and or not
Combine conditions: rush and pages > 10.
if(cond, a, b)
a when the condition is true, b otherwise.
min(a, b, …) max(a, b, …)
The smallest or the largest value.
round(x, d)
Rounds half away from zero, to d decimals.
floor ceil abs sqrt
Down, up, absolute value, square root.
clamp(x, lo, hi)
Keeps x between two limits.
Shipping estimate
Two typos, explained where you work.
- Shipping
- —Unknown name: weigth. Did you mean weight?
- With insurance
- —Missing “)” to close round(.
Shipping: —. With insurance: —.
Errors show on the canvas by default. Here Errors is set to Everywhere, so the published page shows them too.
PROPERTIES
Everything lives in the panel.
Inputs
Slider, Number, Switch, Dropdown, Buttons or Fixed. Each has a key, a label, limits, a default, a prefix or suffix, a spoken unit and a note.
Results
A label and a formula. Currency, Percent, Number or Duration, with decimals; highlight one, or hide it and use it as a helper.
Bar
Choose the parts and the total, as keys or a formula. The legend shows each part’s share.
Alerts
Below or above a value, a message in your colour. It can colour other results and their bar part too; {value} prints the number.
Action and Read URL
A button to a page, an address or mailto:, with the inputs (and results) added as ?key=value. Read URL fills a Sumline from the address.
Locale and currency
Any locale and ISO currency: en-US and USD, de-DE and EUR, en-GB and GBP, ja-JP and JPY.
Layout
Auto puts results beside the inputs from 640 px wide and under them below. Or force Columns or Stacked.
Look
Text and number fonts, colours for every surface, radius, padding and gap. Results count up; reduced motion turns it off.
Accessibility
Real range inputs with the value and unit read aloud, labelled fields, results announced politely, a visible focus ring.
Sumline