// scenes-3.jsx — Act III: cost formula, worked example, model comparison + outro
// illustrative pricing, USD per 1,000,000 tokens
const PRICE = { input: 3.00, cached: 0.30, output: 15.00 };
function PriceCard({ o, highlight = null }) {
if (o <= 0.01) return null;
const rows = [
{ k: 'input', v: PRICE.input, c: COLORS.blue },
{ k: 'cached', v: PRICE.cached, c: COLORS.green },
{ k: 'output', v: PRICE.output, c: COLORS.yellow },
];
return (
Price · per 1M tokens
{rows.map(r => (
{r.k}
${r.v.toFixed(2)}
))}
illustrative numbers
);
}
// ════════════════════════════════════════════════════════════════════════════
// SCENE 6 — THE COST FORMULA (length 20s)
// ════════════════════════════════════════════════════════════════════════════
function SceneFormula() {
const { localTime: lt } = useSprite();
const o1 = pulse(lt, 1.0, 20, 0.4); // cost = tokens × price
const split = ramp(lt, 5.2, 6.2); // morph into input/output rows
const o2 = pulse(lt, 5.6, 20, 0.4);
const oOut = pulse(lt, 9.0, 20, 0.4); // output emphasis
const oCache = pulse(lt, 13.2, 20, 0.4);// cache row
const priceHi = lt > 9.0 && lt < 13.0 ? 'output' : (lt > 13.2 ? 'cached' : (lt>2 ? 'input' : null));
const cy = 470;
const Mono = ({ children, c=COLORS.ink, s=54 }) => {children};
return (
<>
{/* simple form (fades when split happens) */}
{o1 > 0.01 && split < 0.5 && (
0?1-split*2:0) }}>
cost
{' = '}
tokens
{' × '}
price
)}
{/* expanded form */}
{o2 > 0.01 && (
cost
{' = '}
input
{' tokens '}
{' × '}
$3
{' + '}
output
{' tokens '}
{' × '}
$15
{/* cache refinement */}
{oCache > 0.01 && (
…and input splits again:
input
{' = '}
cached
{' × '}
$0.30
{' + '}
fresh
{' × '}
$3
)}
)}
At heart, the bill is simple: tokens × price.
But input and output are priced separately.
Output is usually ~5× pricier — every generated token counts.
Re-reading cached context can be ~10× cheaper than fresh tokens.
);
}
// ════════════════════════════════════════════════════════════════════════════
// SCENE 7 — WORKED EXAMPLE (length 21s)
// ════════════════════════════════════════════════════════════════════════════
const RUN = [
{ turn: 1, in: 1000, out: 100 },
{ turn: 2, in: 1800, out: 120 },
{ turn: 3, in: 3100, out: 260 },
{ turn: 4, in: 4500, out: 180 },
{ turn: 5, in: 6200, out: 320 },
];
function SceneWorked() {
const { localTime: lt } = useSprite();
const setup = ramp(lt, 0.2, 1.0);
// reveal rows one by one starting at 1.4, every 0.85s
const rowAt = (i) => 1.4 + i * 0.85;
let inTot = 0, outTot = 0;
RUN.forEach((r, i) => {
const p = clamp((lt - rowAt(i)) / 0.55, 0, 1);
inTot += r.in * p; outTot += r.out * p;
});
const inCost = inTot / 1e6 * PRICE.input;
const outCost = outTot / 1e6 * PRICE.output;
const total = inCost + outCost;
const showCalc = pulse(lt, 7.6, 21, 0.4);
const showTotal = pulse(lt, 11.4, 21, 0.4);
// cached-optimised comparison
const showCache = pulse(lt, 14.6, 21, 0.45);
const cachedFrac = 0.8;
const optInCost = (inTot*(1-cachedFrac)/1e6*PRICE.input) + (inTot*cachedFrac/1e6*PRICE.cached);
const optTotal = optInCost + outCost;
const cacheReveal = ramp(lt, 15.0, 16.2);
return (
<>
{/* table on the left */}
| turn | input | output |
{RUN.map((r,i) => {
const o = pulse(lt, rowAt(i), 21, 0.3);
return (
tool call #{r.turn} |
{fmtNum(r.in)} |
{r.out} |
);
})}
Σ totals |
{fmtNum(Math.round(inTot))} |
{fmtNum(Math.round(outTot))} |
{/* calculation + total on the right */}
{showCalc > 0.01 && (
{fmtNum(Math.round(inTot))} × $3/M = {fmtUSD(inCost)}
{fmtNum(Math.round(outTot))} × $15/M = {fmtUSD(outCost)}
)}
{showTotal > 0.01 && (
run cost
0.3 ? COLORS.inkDim : COLORS.coral,
textDecoration: showCache>0.5 ? 'line-through' : 'none',
transition:'none', fontVariantNumeric:'tabular-nums' }}>
{fmtUSD(total)}
{showCache > 0.01 && (
with 80% context cached ↓
{fmtUSD(optTotal)}
)}
)}
Five tool-calling turns. Watch the input tokens pile up.
Notice: input dwarfs output — that re-sent history again.
Multiply each column by its price…
…a few cents for this little run.
Cache the stable context and the same run costs less than half.
);
}
function Cell({ children, head, total, c = COLORS.ink, mono, o = 1 }) {
return (
{children}
);
}
function Line({ children, c }) {
return {children}
;
}
function S({ children }) { return {children}; }
Object.assign(window, { SceneFormula, SceneWorked, PriceCard, PRICE, RUN, Cell, Line, S });