← back to Bounce Studio
public/index.html
349 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bounce — premium sites, before you write the brief</title>
<meta name="description" content="Six specialized skills sit in the model before your brief is written — each one owns a piece of the site, so it never has to guess. Premium sites, $15k, fast.">
<meta property="og:title" content="Bounce — six skills, one site, no guessing">
<meta property="og:description" content="Same Claude everyone opens. But six specialized skills are already running in context before a word of the brief. $15k a site.">
<meta name="theme-color" content="#0a0a0a">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a0b'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23c6ff3a'/%3E%3C/svg%3E">
<style>
:root{
--bg:#0a0a0b; --bg2:#111114; --ink:#f2f2ee; --mut:#8a8a86; --line:#22222a;
--acc:#c6ff3a; --acc2:#7cf1c0; --warn:#ff9d5c;
--mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
--sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
--max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
-webkit-font-smoothing:antialiased;line-height:1.55;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);letter-spacing:0}
.acc{color:var(--acc)}
.mut{color:var(--mut)}
section{padding:96px 0;border-top:1px solid var(--line)}
h1,h2,h3{letter-spacing:-.03em;line-height:1.04;font-weight:640;margin:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:18px;display:flex;gap:10px}
/* nav */
nav{position:sticky;top:0;z-index:40;background:rgba(10,10,11,.72);
backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--acc);
box-shadow:0 0 0 0 rgba(198,255,58,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,255,58,.5)}70%{box-shadow:0 0 0 9px rgba(198,255,58,0)}100%{box-shadow:0 0 0 0 rgba(198,255,58,0)}}
.navlinks{display:flex;gap:26px;align-items:center;font-size:14px}
.navlinks a{color:var(--mut);text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#0a0a0b;
font-weight:650;font-size:14px;padding:11px 18px;border-radius:10px;text-decoration:none;
border:1px solid var(--acc);transition:transform .12s ease,box-shadow .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px -10px rgba(198,255,58,.6)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--acc);box-shadow:none}
@media(max-width:720px){.navlinks a:not(.btn){display:none}}
/* hero */
.hero{padding:110px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
background:radial-gradient(60% 55% at 72% 8%,rgba(198,255,58,.10),transparent 60%),
radial-gradient(50% 50% at 8% 95%,rgba(124,241,192,.07),transparent 60%);
pointer-events:none}
.hgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;position:relative}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:34px}}
h1{font-size:clamp(38px,6.2vw,68px)}
.lede{color:var(--mut);font-size:clamp(17px,2vw,20px);max-width:34ch;margin:24px 0 30px}
.lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.trust{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.trust b{color:var(--ink);font-weight:640;font-family:var(--mono)}
/* terminal card */
.term{background:linear-gradient(180deg,#0e0e11,#0b0b0d);border:1px solid var(--line);
border-radius:16px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:12px;color:var(--mut)}
.tl{width:11px;height:11px;border-radius:50%;background:#2a2a30}
.term-body{padding:18px 18px 20px;font-family:var(--mono);font-size:13px;line-height:1.9;overflow-x:auto}
.ln{white-space:pre-wrap}
.skill{color:var(--acc)}
.ok{color:var(--acc2)}
.cur{display:inline-block;width:8px;height:15px;background:var(--acc);vertical-align:-2px;
animation:blink 1.05s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
/* skills grid */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:860px){.grid6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid6{grid-template-columns:1fr}}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px;
position:relative;transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:#33333c;transform:translateY(-2px)}
.card .no{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.05em}
.card h3{font-size:19px;margin:12px 0 8px}
.card p{margin:0;color:var(--mut);font-size:14.5px}
.owns{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--acc2);
border-top:1px dashed var(--line);padding-top:12px}
/* offer */
.offer{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}
@media(max-width:860px){.offer{grid-template-columns:1fr}}
.price{font-family:var(--mono);font-size:clamp(52px,9vw,88px);font-weight:600;line-height:1;letter-spacing:-.04em}
.price small{font-size:20px;color:var(--mut);font-weight:400}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#d9d9d4}
.ticks li::before{content:"→";color:var(--acc);font-family:var(--mono);flex:0 0 auto}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:28px}
.panel h3{font-size:18px;margin-bottom:6px}
.compare{display:grid;gap:0;margin-top:14px;font-size:14px}
.compare .row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.compare .row span:last-child{font-family:var(--mono)}
.bad{color:var(--warn)} .good{color:var(--acc2)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{border-left:2px solid var(--line);padding:4px 0 18px 18px;position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
font-family:var(--mono);font-size:12px;color:var(--acc);position:absolute;left:-1px;top:-2px;
background:var(--bg);padding:0 8px 0 2px}
.step h4{margin:22px 0 6px;font-size:16px}
.step p{margin:0;color:var(--mut);font-size:14px}
/* faq */
details{border-top:1px solid var(--line);padding:18px 0}
details summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--acc);font-family:var(--mono);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--mut);margin:14px 0 0;max-width:70ch}
/* cta / form */
.final{background:
radial-gradient(70% 120% at 50% 0%,rgba(198,255,58,.09),transparent 60%);
text-align:center}
.form{max-width:520px;margin:30px auto 0;display:grid;gap:12px;text-align:left}
.frow{display:flex;gap:10px;flex-wrap:wrap}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
font-family:var(--sans);font-size:15px;padding:13px 15px;border-radius:10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
.frow input{flex:1;min-width:200px}
.frow .btn{white-space:nowrap}
.msg{font-family:var(--mono);font-size:13px;min-height:18px;margin-top:6px;text-align:center}
.msg.ok{color:var(--acc2)} .msg.err{color:var(--warn)}
.fineprint{color:var(--mut);font-size:12px;margin-top:14px;text-align:center}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:13px}
.frow2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.dot,.cur{animation:none}}
</style>
</head>
<body>
<nav>
<div class="wrap navrow">
<div class="brand"><span class="dot"></span>bounce<span class="mut mono" style="font-size:13px;font-weight:500">/idc</span></div>
<div class="navlinks">
<a href="#system">the system</a>
<a href="#offer">offer</a>
<a href="#how">how</a>
<a href="#faq">faq</a>
<a class="btn" href="#start">start a build</a>
</div>
</div>
</nav>
<header class="hero">
<div class="wrap hgrid">
<div>
<div class="eyebrow">six skills · one site · zero guessing</div>
<h1>premium sites,<br>before you write<br>the <span class="acc">brief</span>.</h1>
<p class="lede">same claude everyone opens. but <b>six specialized skills are already running in context</b> before a single word of the brief — brief, front-end, design, components, motion, and media, each owning a piece — so the model never guesses and the site comes out immersive, animated, and built to convert.</p>
<div class="cta-row">
<a class="btn" href="#start">book a $15k build →</a>
<a class="btn ghost" href="#system">see the six skills</a>
</div>
<div class="trust">
<span><b>~5 days</b> brief → launch-ready</span>
<span><b>6</b> skills pre-loaded</span>
<span><b>$15k</b> flat, per site</span>
</div>
</div>
<div class="term reveal" aria-hidden="true">
<div class="term-bar"><span class="tl"></span><span class="tl"></span><span class="tl"></span>
<span style="margin-left:8px">claude — context loaded</span></div>
<div class="term-body">
<div class="ln mut"># before you type anything:</div>
<div class="ln"><span class="ok">✓</span> <span class="skill">brief</span> <span class="mut">locks colors, fonts, motion</span></div>
<div class="ln"><span class="ok">✓</span> <span class="skill">frontend</span> <span class="mut">turns the brief into code</span></div>
<div class="ln"><span class="ok">✓</span> <span class="skill">design</span> <span class="mut">polished pages & decks</span></div>
<div class="ln"><span class="ok">✓</span> <span class="skill">components</span> <span class="mut">animated, drop-in ready</span></div>
<div class="ln"><span class="ok">✓</span> <span class="skill">motion</span> <span class="mut">scroll reveals, fades</span></div>
<div class="ln"><span class="ok">✓</span> <span class="skill">media</span> <span class="mut">generated images & video</span></div>
<div class="ln mut" style="margin-top:6px">context: <span class="acc">6/6 skills active</span></div>
<div class="ln">brief> <span class="cur"></span></div>
</div>
</div>
</div>
</header>
<section id="proof" style="padding:64px 0">
<div class="wrap offer">
<div>
<div class="eyebrow">where this started</div>
<blockquote class="panel" style="margin:0;border-left:2px solid var(--acc)">
<p style="margin:0;font-size:17px;line-height:1.5;color:#e9e9e4">"he started billing <span class="acc">$15k a site</span> the moment six skills sat in his claude — same claude everyone opens, but before he types a single word of a brief there are six specialized skills already running in context, each one owning a piece of the site, so the model never has to guess."</p>
<div style="display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px" class="mut">
<span style="width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#c6ff3a,#7cf1c0);display:inline-block"></span>
<b style="color:var(--ink)">Bounce</b>
<span class="acc" title="verified">✓</span>
<span class="mono">@bounceidc</span>
<span>· 54 ❤ · 61s video</span>
</div>
<a class="mono" style="display:inline-block;margin-top:12px;font-size:12px;color:var(--acc);text-decoration:none" href="https://x.com/bounceidc/status/2076312794279125005" target="_blank" rel="noopener noreferrer">read the original on X →</a>
</blockquote>
</div>
<div>
<h2 style="font-size:clamp(24px,3.4vw,34px);max-width:16ch">you're looking at one of them.</h2>
<p class="mut" style="margin-top:16px;max-width:42ch;font-size:15.5px">this page was built with the exact six-skill stack it describes — brief, front-end, design, components, motion, media, all loaded before the first line. the proof isn't a testimonial; it's the thing you're reading.</p>
<p class="mut" style="margin-top:14px;max-width:42ch;font-size:14px">want your own? that's the whole offer below.</p>
</div>
</div>
</section>
<section id="system">
<div class="wrap">
<div class="eyebrow">the system</div>
<h2 style="font-size:clamp(28px,4vw,42px);max-width:20ch">the model doesn't guess. six skills each own a piece.</h2>
<p class="mut" style="max-width:58ch;margin-top:18px">a <b style="color:var(--ink);font-weight:600">skill</b> is a specialist the AI loads before it works — a tight set of instructions and taste for one job, so it acts like an expert on that piece instead of winging it. everyone has the same model; the difference is what's <em>in the room</em> before the work starts. bounce pre-loads one specialist for every stage of the site — nothing improvised, nothing left to a lucky prompt.</p>
<div class="grid6">
<div class="card reveal"><div class="no">SKILL 01</div><h3>brief</h3><p>writes the design brief and locks it in — the palette, the type, the motion language — before a single line of layout exists, so nothing downstream has to guess.</p><div class="owns">owns → colors, fonts & motion</div></div>
<div class="card reveal"><div class="no">SKILL 02</div><h3>front-end</h3><p>takes that brief and turns it straight into clean, responsive code. the spec becomes the site — no telephone-game between "designed" and "built."</p><div class="owns">owns → the actual code</div></div>
<div class="card reveal"><div class="no">SKILL 03</div><h3>design</h3><p>a full design surface for polished pages and decks — the right prompt produces flagship-grade layouts, not a stock template you have to rescue.</p><div class="owns">owns → the visual craft</div></div>
<div class="card reveal"><div class="no">SKILL 04</div><h3>components</h3><p>a library of animated, production-ready components — the sliders, cards, navs, and interactions — dropped in already working, not rebuilt from scratch.</p><div class="owns">owns → the interactive parts</div></div>
<div class="card reveal"><div class="no">SKILL 05</div><h3>motion</h3><p>controls every fade-in, fade-out, and scroll reveal on the page. the difference between a flat page and one that feels alive as you move through it.</p><div class="owns">owns → how it moves</div></div>
<div class="card reveal"><div class="no">SKILL 06</div><h3>media</h3><p>generates the imagery and video across the whole site — original, on-brand, and immersive — so the page is never waiting on a stock-photo budget.</p><div class="owns">owns → images & video</div></div>
</div>
</div>
</section>
<section id="offer">
<div class="wrap offer">
<div>
<div class="eyebrow">the offer</div>
<div class="price">$15k<small> / site · flat</small></div>
<ul class="ticks">
<li>a real, launch-ready site — not a mockup, not a template you finish yourself</li>
<li>brief to launch-ready in about a week, because the six skills don't stall</li>
<li>fixed price. you know the number before we start and it doesn't move</li>
<li>proven working across three real browsers before it ever reaches you</li>
<li>you own the code and you hold the deploy switch — full handoff</li>
</ul>
</div>
<div class="panel reveal">
<h3>why it's fast <span class="mut">(and still premium)</span></h3>
<p class="mut" style="margin:0;font-size:14px">the cost of a great site is usually the back-and-forth — guessing, redoing, re-explaining. bounce removes the guessing.</p>
<div class="compare">
<div class="row"><span>the usual agency</span><span class="bad">6–10 wks</span></div>
<div class="row"><span>a freelancer + your nights</span><span class="bad">who knows</span></div>
<div class="row"><span>a template you finish</span><span class="bad">still yours</span></div>
<div class="row"><span>bounce · six skills loaded</span><span class="good">~5 days</span></div>
</div>
</div>
</div>
</section>
<section id="how">
<div class="wrap">
<div class="eyebrow">how a build runs</div>
<h2 style="font-size:clamp(26px,3.6vw,38px)">you send a link. the room is already set.</h2>
<div class="steps">
<div class="step reveal"><h4>you drop a reference</h4><p>a site you like, your current one, or two sentences. that's the whole intake.</p></div>
<div class="step reveal"><h4>brief + direction lock</h4><p>the spec and the look are pinned before layout — so there's nothing to redo later.</p></div>
<div class="step reveal"><h4>scaffold → build → verify</h4><p>it's stood up, built, and proven across real browsers, fixing itself as it goes.</p></div>
<div class="step reveal"><h4>you get the switch</h4><p>a launch-ready site, the code, and the go-live in your hands. nothing public till you say.</p></div>
</div>
</div>
</section>
<section id="faq">
<div class="wrap" style="max-width:820px">
<div class="eyebrow">questions</div>
<h2 style="font-size:clamp(26px,3.6vw,38px);margin-bottom:22px">the honest answers</h2>
<details open><summary>is this just "chatgpt made my website"?</summary><p>no. the difference is the six skills that sit in context before the brief — a specialist owning each stage. the model isn't guessing its way through one giant prompt; it's running a repeatable pipeline where every stage has one job and one owner. same model, completely different room. this page is a working example of it.</p></details>
<details><summary>why $15k if a model does the work?</summary><p>you're paying for the system and the judgment around it, not keystrokes. the result is a launch-ready, browser-proven site in about a week, fixed-price, with no back-and-forth tax. that's the value — a great site, fast, at a number that doesn't move.</p></details>
<details><summary>what do you need from me?</summary><p>a reference and the outcome you want. that's the intake. the brief skill turns it into a spec; you approve the direction; the rest runs.</p></details>
<details><summary>who holds the keys?</summary><p>you do. deploy, domain, and go-live are never automatic — the build ships one switch from live and you flip it. you own the code outright.</p></details>
</div>
</section>
<section id="start" class="final">
<div class="wrap">
<div class="eyebrow" style="justify-content:center">start a build</div>
<h2 style="font-size:clamp(30px,5vw,52px)">send a link. get a site.</h2>
<p class="mut" style="max-width:46ch;margin:16px auto 0">tell us where to reach you and roughly what you're building. we'll come back with a scoped brief and a start date.</p>
<form class="form" id="wl" novalidate>
<div class="frow">
<input type="email" id="email" name="email" placeholder="you@company.com" autocomplete="email" required>
<button class="btn" type="submit">request a build →</button>
</div>
<select id="budget" name="budget" aria-label="what are you building">
<option value="">what are you building? (optional)</option>
<option>a new marketing site / landing</option>
<option>a rebuild of my current site</option>
<option>a product / app front-end</option>
<option>something else</option>
</select>
<textarea id="note" name="note" rows="2" placeholder="drop a reference link or a sentence (optional)"></textarea>
<div class="msg" id="msg" role="status" aria-live="polite"></div>
<div class="fineprint">no spam, no list. this goes straight to the build queue.</div>
</form>
</div>
</section>
<footer>
<div class="wrap frow2">
<div class="brand"><span class="dot"></span>bounce<span class="mut mono" style="font-size:12px;font-weight:500">/idc</span></div>
<div>six skills · one site · no guessing — built with the claude web-dev accelerator</div>
</div>
</footer>
<script>
// reveal-on-scroll
const io = new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.12});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
// waitlist -> local endpoint (no send)
const form = document.getElementById('wl');
const msg = document.getElementById('msg');
form.addEventListener('submit', async (ev)=>{
ev.preventDefault();
const email = document.getElementById('email').value.trim();
const budget = document.getElementById('budget').value;
const note = document.getElementById('note').value.trim();
msg.className='msg'; msg.textContent='';
if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)){ msg.className='msg err'; msg.textContent='that email looks off — check it?'; return; }
msg.textContent='sending…';
try{
const r = await fetch('/api/waitlist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,budget,note})});
const j = await r.json();
if(j.ok){ msg.className='msg ok'; msg.textContent="you're in the queue. we'll be in touch with a scoped brief."; form.reset(); }
else { msg.className='msg err'; msg.textContent = j.error || 'something went wrong — try again.'; }
}catch(_){ msg.className='msg err'; msg.textContent='network hiccup — try again.'; }
});
</script>
</body>
</html>