Web Pages Easy

Coming Soon + Waitlist

A minimal coming soon page with an animated countdown, email waitlist capture form, and a background particle field. Clean, focused, converts well.

Open in Lab

css vanilla-js canvas

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  overflow-x: hidden;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.cs-header {
  padding: 1.5rem 2rem;
}
.cs-logo {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #f2f6ff;
}

/* Main */
.cs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 2rem;
}

.cs-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #38bdf8;
}

.cs-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.cs-sub {
  font-size: 1rem;
  color: #64748b;
  max-width: 420px;
  line-height: 1.65;
}

/* Countdown */
.countdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 4rem;
}
.cd-num {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cd-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
}
.cd-sep {
  font-size: 2rem;
  font-weight: 300;
  color: #1e293b;
  padding-bottom: 1.25rem;
}

/* Form */
.cs-form {
  width: min(440px, 100%);
}
.cs-input-wrap {
  display: flex;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.cs-input {
  flex: 1;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.925rem;
  color: #f2f6ff;
}
.cs-input::placeholder {
  color: #334155;
}
.cs-submit {
  padding: 0.875rem 1.25rem;
  background: #38bdf8;
  border: none;
  color: #050910;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.cs-submit:hover {
  opacity: 0.85;
}
.cs-error {
  font-size: 0.8rem;
  color: #f87171;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}
[hidden] {
  display: none !important;
}

/* Success */
.cs-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.cs-success-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #4ade80;
}
.cs-success p {
  font-size: 0.9rem;
  color: #94a3b8;
}

/* Social */
.cs-social {
  display: flex;
  gap: 1rem;
}
.social-link {
  color: #334155;
  transition: color 0.15s;
}
.social-link:hover {
  color: #94a3b8;
}

/* Footer */
.cs-footer {
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: #1e293b;
}
.cs-footer a {
  color: #334155;
  text-decoration: none;
}
.cs-footer a:hover {
  color: #64748b;
}

(function () {
  "use strict";

  // ── Countdown ─────────────────────────────────────────────────
  const TARGET = new Date("2026-09-01T00:00:00Z");

  function pad(n) {
    return String(n).padStart(2, "0");
  }

  function updateCountdown() {
    const now = new Date();
    const diff = Math.max(0, TARGET - now);
    const days = Math.floor(diff / 86400000);
    const hours = Math.floor((diff % 86400000) / 3600000);
    const mins = Math.floor((diff % 3600000) / 60000);
    const secs = Math.floor((diff % 60000) / 1000);

    const d = document.getElementById("cd-days");
    const h = document.getElementById("cd-hours");
    const m = document.getElementById("cd-mins");
    const s = document.getElementById("cd-secs");
    if (d) d.textContent = pad(days);
    if (h) h.textContent = pad(hours);
    if (m) m.textContent = pad(mins);
    if (s) s.textContent = pad(secs);
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);

  // ── Waitlist form ──────────────────────────────────────────────
  const form = document.getElementById("cs-form");
  const input = document.getElementById("cs-email");
  const error = document.getElementById("cs-error");
  const success = document.getElementById("cs-success");

  if (form) {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const val = input.value.trim();
      const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
      error.hidden = valid;
      if (!valid) {
        input.focus();
        return;
      }
      form.hidden = true;
      success.hidden = false;
    });
  }

  // ── Canvas particles ───────────────────────────────────────────
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  const canvas = document.getElementById("bg-canvas");
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  const DPR = window.devicePixelRatio || 1;
  let W, H;

  function resize() {
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W * DPR;
    canvas.height = H * DPR;
    canvas.style.width = W + "px";
    canvas.style.height = H + "px";
    ctx.scale(DPR, DPR);
  }
  resize();
  window.addEventListener("resize", resize);

  const particles = Array.from({ length: 60 }, () => ({
    x: Math.random() * W,
    y: Math.random() * H,
    r: Math.random() * 1.5 + 0.5,
    vx: (Math.random() - 0.5) * 0.25,
    vy: (Math.random() - 0.5) * 0.25,
    a: Math.random() * 0.4 + 0.1,
  }));

  function draw() {
    ctx.clearRect(0, 0, W, H);
    particles.forEach((p) => {
      p.x = (p.x + p.vx + W) % W;
      p.y = (p.y + p.vy + H) % H;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(56,189,248,${p.a})`;
      ctx.fill();
    });
    requestAnimationFrame(draw);
  }
  draw();
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coming Soon</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="bg-canvas"></canvas>

  <div class="page">
    <!-- Logo -->
    <header class="cs-header">
      <span class="cs-logo">◈ NOVA</span>
    </header>

    <!-- Main -->
    <main class="cs-main">
      <p class="cs-eyebrow">Something big is coming</p>
      <h1 class="cs-title">We're building<br>the future.</h1>
      <p class="cs-sub">A new platform for creative professionals. Be the first to know when we launch.</p>

      <!-- Countdown -->
      <div class="countdown" id="countdown" aria-label="Time until launch">
        <div class="cd-unit"><span class="cd-num" id="cd-days">00</span><span class="cd-label">days</span></div>
        <span class="cd-sep">:</span>
        <div class="cd-unit"><span class="cd-num" id="cd-hours">00</span><span class="cd-label">hours</span></div>
        <span class="cd-sep">:</span>
        <div class="cd-unit"><span class="cd-num" id="cd-mins">00</span><span class="cd-label">minutes</span></div>
        <span class="cd-sep">:</span>
        <div class="cd-unit"><span class="cd-num" id="cd-secs">00</span><span class="cd-label">seconds</span></div>
      </div>

      <!-- Waitlist form -->
      <form class="cs-form" id="cs-form" novalidate>
        <div class="cs-input-wrap">
          <input
            type="email"
            id="cs-email"
            class="cs-input"
            placeholder="Enter your email"
            autocomplete="email"
            required
          />
          <button type="submit" class="cs-submit">Notify me →</button>
        </div>
        <p class="cs-error" id="cs-error" hidden>Please enter a valid email address.</p>
      </form>

      <!-- Success state (hidden initially) -->
      <div class="cs-success" id="cs-success" hidden>
        <span class="cs-success-icon">✓</span>
        <p>You're on the list! We'll notify you at launch.</p>
      </div>

      <!-- Social -->
      <div class="cs-social">
        <a href="#" class="social-link" aria-label="Twitter">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.259 5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
        <a href="#" class="social-link" aria-label="Instagram">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
        </a>
        <a href="#" class="social-link" aria-label="LinkedIn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
        </a>
      </div>
    </main>

    <footer class="cs-footer">
      <p>© 2026 Nova Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
    </footer>
  </div>

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

Coming Soon + Waitlist

A minimal launch page designed around a single conversion goal: capture email addresses before launch. Features an animated countdown, email form with validation, and a drifting canvas particle background.

Sections

Logo / Brand mark — top-left wordmark
Headline — bold hook (“Something big is coming”)
Countdown — DD:HH:MM:SS live timer
Waitlist form — email input + submit, success state
Social links — minimal icon row
Canvas bg — drifting dot particles

Features

Countdown to a configurable target date
Email form with inline validation feedback
Success state swaps form for a confirmation message
CSS-only particle animation alternative for reduced-motion
Dark and light variant via CSS custom property