Web Pages Hard

Startup Pitch Deck

A slides-style scrolljack pitch deck for startups. Each section snaps into view like a presentation slide, with animated stats, investor CTAs, and a problem/solution narrative arc.

Open in Lab

gsap scrolltrigger lenis css

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --accent: #6366f1;
  --accent2: #38bdf8;
  --dark: #050910;
  --dark2: #0d1117;
  --text: #f2f6ff;
  --muted: #475569;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--dark);
  color: var(--text);
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(5, 9, 16, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-logo {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.raise-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
}
.btn-nav {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-nav:hover {
  opacity: 0.85;
}

/* SLIDES */
.slide {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 7rem 4rem 4rem;
  gap: 4rem;
}
.slide--dark {
  background: var(--dark2);
}
.slide--cta {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(56, 189, 248, 0.08));
}
.slide-inner {
  flex: 1;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.slide-inner--center {
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
.slide-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--red {
  color: #f87171;
}
.eyebrow--blue {
  color: #38bdf8;
}
.eyebrow--green {
  color: #4ade80;
}
.slide-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.slide-body {
  font-size: 1rem;
  color: #94a3b8;
  line-height: 1.7;
  max-width: 480px;
}
.grad {
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.highlight-num {
  color: #f87171;
  font-style: italic;
}

.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-primary:hover {
  opacity: 0.85;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: background 0.15s;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.btn-large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Dashboard mock */
.slide-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}
.dashboard-mock {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mock-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.mock-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ms-label {
  font-size: 0.72rem;
  color: var(--muted);
}
.ms-val {
  font-size: 1.75rem;
  font-weight: 800;
  color: #4ade80;
}
.mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.chart-bar {
  flex: 1;
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px 4px 0 0;
  transition: background 0.2s;
}
.chart-bar[data-active] {
  background: #6366f1;
}

/* Pain grid */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.pain-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pain-icon {
  font-size: 1.5rem;
}
.pain-card p {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* Solution steps */
.solution-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.step-num {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 0.375rem;
  padding: 0.2rem 0.5rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.step h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.step p {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* Traction */
.traction-inner {
  max-width: 700px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.875rem;
  padding: 1.5rem;
}
.metric-val {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #4ade80, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.metric-label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Team */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.founder-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.founder-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
}
.founder-card h3 {
  font-size: 1rem;
  font-weight: 700;
}
.founder-role {
  font-size: 0.8rem;
  color: #6366f1;
  font-weight: 600;
}
.founder-bio {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* CTA */
.cta-title {
  text-align: center;
}
.cta-sub {
  font-size: 0.9rem;
  color: #94a3b8;
  text-align: center;
}
.cta-legal {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* Slides without a .slide-visual child — center and widen the content */
.slide:not(:has(.slide-visual)) {
  justify-content: center;
}
.slide:not(:has(.slide-visual)) .slide-inner {
  max-width: 760px;
}

@media (max-width: 768px) {
  .slide {
    flex-direction: column;
    padding: 5rem 1.5rem 3rem;
  }
  .slide-visual {
    display: none;
  }
}

// Metric counters on traction slide
(function () {
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  function animateCounter(el) {
    const target = parseFloat(el.dataset.target);
    const prefix = el.dataset.prefix || "";
    const suffix = el.dataset.suffix || "";
    if (reduced) {
      el.textContent = prefix + target.toLocaleString() + suffix;
      return;
    }
    const obj = { val: 0 };
    const start = performance.now();
    const dur = 1800;
    function ease(t) {
      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }
    function tick(now) {
      const t = Math.min((now - start) / dur, 1);
      obj.val = target * ease(t);
      el.textContent = prefix + Math.round(obj.val).toLocaleString() + suffix;
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.querySelectorAll(".metric-val").forEach(animateCounter);
          observer.unobserve(e.target);
        }
      });
    },
    { threshold: 0.3 }
  );

  const traction = document.getElementById("slide-traction");
  if (traction) observer.observe(traction);
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vela — Pitch Deck</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script type="importmap">{"imports":{"gsap":"https://esm.sh/gsap@3.13.0","gsap/ScrollTrigger":"https://esm.sh/gsap@3.13.0/ScrollTrigger","gsap/all":"https://esm.sh/gsap@3.13.0/all","lenis":"https://esm.sh/lenis@1.1.13/dist/lenis.mjs"}}</script>
</head>
<body>

  <!-- NAV -->
  <nav class="nav">
    <span class="nav-logo">VELA</span>
    <div class="nav-right">
      <span class="raise-badge">Raising $3M Seed</span>
      <a href="#contact" class="btn-nav">Schedule a Call →</a>
    </div>
  </nav>

  <!-- SLIDE 1 — HERO -->
  <section class="slide" id="slide-hero">
    <div class="slide-inner">
      <p class="slide-eyebrow">The future of B2B payments</p>
      <h1 class="slide-title">Payments that work<br><span class="grad">as fast as you do.</span></h1>
      <p class="slide-body">Vela eliminates the 23-day average receivables gap for SMBs with AI-powered invoice factoring and real-time payment rails.</p>
      <div class="cta-row">
        <a href="#traction" class="btn-primary">See traction</a>
        <a href="#deck" class="btn-ghost">Download deck →</a>
      </div>
    </div>
    <div class="slide-visual">
      <div class="dashboard-mock">
        <div class="mock-bar"></div>
        <div class="mock-stat"><span class="ms-label">Cash received today</span><span class="ms-val">$84,200</span></div>
        <div class="mock-chart">
          <div class="chart-bar" style="height:40%"></div>
          <div class="chart-bar" style="height:65%"></div>
          <div class="chart-bar" style="height:50%"></div>
          <div class="chart-bar" style="height:80%"></div>
          <div class="chart-bar" style="height:60%"></div>
          <div class="chart-bar" style="height:95%" data-active></div>
          <div class="chart-bar" style="height:72%"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- SLIDE 2 — PROBLEM -->
  <section class="slide slide--dark" id="slide-problem">
    <div class="slide-inner">
      <p class="slide-eyebrow eyebrow--red">The problem</p>
      <h2 class="slide-title">SMBs wait <span class="highlight-num">23 days</span><br>to get paid.</h2>
      <div class="pain-grid">
        <div class="pain-card"><span class="pain-icon">💸</span><p>$825B in outstanding invoices at any time in the US alone</p></div>
        <div class="pain-card"><span class="pain-icon">⏳</span><p>1 in 4 small businesses close due to cash flow — not profitability</p></div>
        <div class="pain-card"><span class="pain-icon">🏦</span><p>Traditional factoring costs 3–5% and requires manual underwriting</p></div>
      </div>
    </div>
  </section>

  <!-- SLIDE 3 — SOLUTION -->
  <section class="slide" id="slide-solution">
    <div class="slide-inner">
      <p class="slide-eyebrow eyebrow--blue">The solution</p>
      <h2 class="slide-title">Get paid in <span class="grad">2 minutes.</span><br>Not 23 days.</h2>
      <div class="solution-steps">
        <div class="step"><span class="step-num">01</span><h3>Connect your invoices</h3><p>Sync QuickBooks, Xero, or upload a PDF. AI reads and verifies in seconds.</p></div>
        <div class="step"><span class="step-num">02</span><h3>Get funded instantly</h3><p>Vela advances up to 95% of invoice value to your bank account in real-time.</p></div>
        <div class="step"><span class="step-num">03</span><h3>We collect, you grow</h3><p>When your customer pays, we take our 0.5% flat fee. No hidden costs.</p></div>
      </div>
    </div>
  </section>

  <!-- SLIDE 4 — TRACTION -->
  <section class="slide slide--dark" id="slide-traction">
    <div class="slide-inner traction-inner">
      <p class="slide-eyebrow eyebrow--green">Traction</p>
      <h2 class="slide-title">Growing <span class="grad">40% MoM</span></h2>
      <div class="metrics-grid">
        <div class="metric"><span class="metric-val" data-target="4200000" data-prefix="$" data-suffix="">0</span><span class="metric-label">ARR</span></div>
        <div class="metric"><span class="metric-val" data-target="1240" data-prefix="" data-suffix="">0</span><span class="metric-label">Active businesses</span></div>
        <div class="metric"><span class="metric-val" data-target="94" data-prefix="" data-suffix="%">0</span><span class="metric-label">Retention (12-mo)</span></div>
        <div class="metric"><span class="metric-val" data-target="67" data-prefix="" data-suffix="">0</span><span class="metric-label">NPS score</span></div>
      </div>
    </div>
  </section>

  <!-- SLIDE 5 — TEAM -->
  <section class="slide" id="slide-team">
    <div class="slide-inner">
      <p class="slide-eyebrow">The team</p>
      <h2 class="slide-title">Built by operators,<br>not theorists.</h2>
      <div class="team-grid">
        <div class="founder-card">
          <div class="founder-avatar">SK</div>
          <h3>Sara Kim</h3>
          <p class="founder-role">CEO &amp; Co-founder</p>
          <p class="founder-bio">Ex-Stripe (Payments PM), Stanford MBA. Built $40M ARR product at Brex.</p>
        </div>
        <div class="founder-card">
          <div class="founder-avatar">MR</div>
          <h3>Marcus Reid</h3>
          <p class="founder-role">CTO &amp; Co-founder</p>
          <p class="founder-bio">Ex-Plaid infrastructure lead. Built payment rails processing $2B/day.</p>
        </div>
        <div class="founder-card">
          <div class="founder-avatar">AL</div>
          <h3>Ana Lima</h3>
          <p class="founder-role">CFO</p>
          <p class="founder-bio">Ex-Goldman Sachs, 10yr SMB credit underwriting. MIT Sloan.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- SLIDE 6 — CTA -->
  <section class="slide slide--cta" id="contact">
    <div class="slide-inner slide-inner--center">
      <p class="slide-eyebrow">Join the round</p>
      <h2 class="slide-title cta-title">Ready to back<br><span class="grad">the future of payments?</span></h2>
      <p class="cta-sub">We're closing our $3M seed round. $1.8M committed. 2 spots left.</p>
      <div class="cta-row">
        <a href="mailto:invest@vela.finance" class="btn-primary btn-large">Schedule a call →</a>
        <a href="#deck" class="btn-ghost">Download full deck</a>
      </div>
      <p class="cta-legal">This page is for accredited investors only. Not a securities offering.</p>
    </div>
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>

Startup Pitch Deck

A scrolljack pitch deck format — each “slide” snaps and pins as the user scrolls, following the classic investor narrative arc: Problem → Solution → Product → Traction → Team → CTA.

Structure

Hero — Big hook statement, raise amount badge
Problem — The pain point, stat callouts
Solution — Product description, key differentiator
Traction — Animated metrics (ARR, users, retention)
Team — Founder cards
CTA — Schedule a call / deck download

How it works

scroll-snap-type: y mandatory on the container for native CSS snap
GSAP ScrollTrigger with pin: true for animated transitions within each slide
Lenis smooth scroll coordinates with the snap behavior
Stat counters animate on slide enter via IntersectionObserver

When to use it

Pre-seed / seed fundraising pages
Product Hunt launches
Demo Day landing pages