{count.toLocaleString()} CTOs and founders are already on the waitlist
+12 today
);
// ─── Problem section ───────────────────────────────────────────────
const Problem = () => (
01 / The problem
The pain is real - and shared.
I have no idea which AI feature is costing us what.
- common complaint from CTOs we talked to in the last 90 days
You can see your total LLM spend. You can see it broken down by model. But the moment your CFO asks which feature, team, or customer is driving it - you're guessing. And costs keep growing 40% month over month.
{I.smallX}
No feature breakdownSpend by model. Never by what shipped.
{I.smallX}
Manual finance reportsSpreadsheets every month-end.
{I.smallX}
No budget alertsYou notice when the invoice arrives.
About 4 weeks from now. Waitlist members get early access roughly two weeks before public launch.
What if I use multiple providers?
OpenAI and Anthropic at launch. Gemini, Bedrock, and Azure OpenAI follow within 30 days. Tell us your stack in the form and we'll prioritize it.
Will there be a free tier?
We're still finalizing the plan structure. Waitlist members get first access and founding-member perks when we ship - details land in your inbox at launch.
What happens to my API keys?
Your keys never touch our servers. We use read-only billing tokens via each provider's API. SOC 2 Type I in progress; full details in our privacy policy.
Why should I join the waitlist?
First access at launch, founding-member perks, and a direct line to the founding team during the beta - your feedback shapes what we build.
);
// ─── Sticky mobile CTA ─────────────────────────────────────────────
function StickyCTA() {
const [show, setShow] = useState(false);
useEffect(() => {
const onScroll = () => {
const form = document.getElementById('reserve-form');
if (!form) return;
const r = form.getBoundingClientRect();
const past = r.bottom < 0;
const far = window.scrollY > 700;
setShow(past || far);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const scrollToForm = () => {
const el = document.getElementById('reserve-form');
if (!el) return;
const y = el.getBoundingClientRect().top + window.scrollY - 24;
window.scrollTo({ top: y, behavior: 'smooth' });
setTimeout(() => document.getElementById('email')?.focus(), 400);
};
return (
);
}
// ─── Tweaks (design-tool only, invisible in production) ────────────
function Tweaks({ t, setTweak }) {
if (typeof TweaksPanel === 'undefined') return null;
return (
setTweak('brandColor', v)}
options={['#2563eb','#0a0a0a','#16a34a','#f97316','#7c3aed']}/>
setTweak('headlineStyle', v)}
options={[
{value:'italic', label:'Italic accent'},
{value:'plain', label:'Plain'},
]}/>
setTweak('formStyle', v)}
options={[
{value:'card', label:'Card'},
{value:'soft', label:'Soft'},
{value:'flat', label:'Flat'},
]}/>
setTweak('waitlistCount', v)}/>
setTweak('darkCta', v)}/>
);
}
// ─── App ───────────────────────────────────────────────────────────
function App() {
const [t, setTweakState] = useTweaks(window.__TWEAK_DEFAULTS__);
useEffect(() => {
document.body.dataset.form = t.formStyle;
document.body.dataset.darkcta = t.darkCta ? 'true' : 'false';
document.documentElement.style.setProperty('--brand', t.brandColor);
document.documentElement.style.setProperty('--brand-ink', shade(t.brandColor, -0.18));
document.documentElement.style.setProperty('--brand-soft', tint(t.brandColor, 0.88));
}, [t.formStyle, t.darkCta, t.brandColor]);
const headline = t.headlineStyle === 'italic'
? (<>Your LLM bill is a black box.)
: (<>Your LLM bill is a black box.);
return (
<>
waitlist open
finops for ai companies · launching in 4 weeks
{headline}
You see total spend. You see model spend. But "which feature is burning money" - a mystery. We're building the first finance-first cost platform for AI companies.
);
}
// ─── Color helpers ─────────────────────────────────────────────────
function hexToRgb(h) {
const x = h.replace('#','');
const v = x.length === 3 ? x.split('').map(c => c+c).join('') : x;
return [parseInt(v.slice(0,2),16), parseInt(v.slice(2,4),16), parseInt(v.slice(4,6),16)];
}
function rgbToHex(r,g,b){
return '#' + [r,g,b].map(v => Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,'0')).join('');
}
function shade(hex, amt){
const [r,g,b] = hexToRgb(hex);
return amt < 0
? rgbToHex(r*(1+amt), g*(1+amt), b*(1+amt))
: rgbToHex(r + (255-r)*amt, g + (255-g)*amt, b + (255-b)*amt);
}
function tint(hex, amt){ return shade(hex, amt); }
ReactDOM.createRoot(document.getElementById('app')).render();