webdevpuneet.com

Related Snippets

60 in Heroes category
52–57 of 60

Coming Soon Hero

Agency Hero

Portfolio Hero

App Download Hero

Gradient Mesh Hero

Product Hero

Coming Soon Hero — Free HTML CSS JS Countdown Snippet

Coming Soon Hero · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsText EffectsCSS AnimationLanding Page

Copy & paste

Source Code

<section class="hero">
  <div class="glow"></div>

  <div class="badge">🚀 Launching soon</div>
  <h1 class="headline">Something <span class="grad">amazing</span><br>is coming</h1>
  <p class="sub">We are putting the finishing touches on something you will love. Be the first to know when we launch.</p>

  <div class="countdown" id="countdown">
    <div class="cd-block"><span class="cd-n" id="cd-d">00</span><span class="cd-l">Days</span></div>
    <div class="cd-sep">:</div>
    <div class="cd-block"><span class="cd-n" id="cd-h">00</span><span class="cd-l">Hours</span></div>
    <div class="cd-sep">:</div>
    <div class="cd-block"><span class="cd-n" id="cd-m">00</span><span class="cd-l">Minutes</span></div>
    <div class="cd-sep">:</div>
    <div class="cd-block"><span class="cd-n" id="cd-s">00</span><span class="cd-l">Seconds</span></div>
  </div>

  <form class="capture" onsubmit="handleSubmit(event)">
    <input class="email" type="email" placeholder="Enter your email address" required>
    <button type="submit" class="cta-btn">Notify me</button>
  </form>

  <p class="note">No spam, ever. Unsubscribe anytime.</p>

  <div class="social-row">
    <a href="#" class="soc-link">Twitter</a>
    <span class="soc-dot">·</span>
    <a href="#" class="soc-link">LinkedIn</a>
    <span class="soc-dot">·</span>
    <a href="#" class="soc-link">Instagram</a>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Live countdown: setInterval tick() updates days/hours/minutes/seconds every second
LAUNCH date: single constant at top of JS — change one line to deploy
Animated radial glow: opacity pulse keyframe, pointer-events:none
Gradient headline: background-clip:text on gradient span, clamp() fluid sizing
Countdown cards: glass background rgba(255,255,255,0.04), tabular-nums digits
Email capture: success state changes button text + green class + disables input
Dark background: #050a14 — deep navy for maximum contrast with the glow
Social links: inline text links with hover colour transition

About this UI Snippet

Coming Soon Hero — Live Countdown Timer, Dark Gradient & Email Capture Form

Screenshot of the Coming Soon Hero snippet rendered live

A coming soon page gives your product a professional presence before launch while building an email waitlist of early adopters. This snippet provides a complete coming soon hero: a dark background with animated radial glow, a gradient headline, a live countdown timer (days, hours, minutes, seconds), an email capture form (see also waitlist signup) with success feedback, a spam disclaimer, and social platform links — all in plain HTML, CSS, and minimal JavaScript.

The countdown timer

The tick() function runs every second via setInterval. It computes the difference between LAUNCH (a configurable Date object) and new Date(), converts milliseconds to days/hours/minutes/seconds using integer division and modulo, and updates four CD-N elements. The pad() helper zero-pads single digits. Setting LAUNCH at the top of the JS is the only configuration needed to deploy the timer for your specific date.

The animated glow

A single div with radial-gradient background and absolute positioning creates the central glow effect. A CSS keyframe animation pulses the opacity between 0.6 and 1 on a 4-second loop, giving the impression of a breathing energy source behind the content. The glow uses pointer-events: none so it never intercepts clicks.

The gradient headline

The .grad span uses background: linear-gradient(135deg, indigo, violet, pink) with background-clip: text and -webkit-text-fill-color: transparent. The font uses clamp(36px, 7vw, 68px) for fluid sizing from mobile to wide desktop.

Countdown block design

Each time unit (Days, Hours, Minutes, Seconds) has its own card block with a dark glass background (rgba white at 4% opacity), a subtle border, border-radius: 12px, and the large number in tabular-nums font-variant for stable digit width. The colon separators between blocks use a lighter colour and sit slightly lower.

Email capture with success state

The form prevents default submission, changes the button text to "✓ You're on the list!", adds a green .done class, and disables the email input. Wire the form to your mailing list API (Mailchimp, ConvertKit, Resend) inside handleSubmit() before the UI update.

Customising for your launch

Change the LAUNCH constant to your real launch date. Update the headline text. Replace the email API endpoint. Add your real social media URLs. Change the gradient colours (#6366f1 → your brand) throughout the CSS. Update the headline .grad gradient to include your primary brand colour as the starting colour stop for fully branded gradient text.

Step by step

How to Use

  1. 1
    Set your launch dateIn the JS panel, change the LAUNCH constant: const LAUNCH = new Date("YYYY-MM-DDTHH:MM:SS"). The countdown updates automatically. The timer shows zeros once the launch date has passed.
  2. 2
    Update the headline and subtitleEdit the h1 text — change "amazing" to your product adjective and keep it in the .grad span for the gradient effect. Update the .sub paragraph with your specific product promise.
  3. 3
    Wire the email form to your APIIn handleSubmit(), add a fetch call before the UI update: await fetch("/api/waitlist", { method: "POST", body: JSON.stringify({email}) }). Show the success state on resolve and an error message on reject.
  4. 4
    Update the social media linksReplace href="#" on the three .soc-link anchors with your actual Twitter/X, LinkedIn, and Instagram URLs. Change the link labels to match your active platforms.
  5. 5
    Change the brand colourReplace #6366f1 throughout the CSS with your brand hex. Updates the glow, badge, input focus ring, and CTA button. Also update the gradient in .grad to include your brand colour.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component using useEffect for the setInterval with cleanup, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

Pre-launch product waitlist and beta signup pages
The countdown timer creates urgency and excitement. The email capture builds a waitlist of users who are already interested before the product ships — giving you a day-one audience to email on launch day.
Maintenance and scheduled downtime notice pages
Adapt the coming soon page as a scheduled maintenance notice. Set LAUNCH to the expected return time. Replace the email capture with a status page link. The countdown gives users a concrete expected resolution time.
Event and conference countdown landing pages
Use for conference registrations, product event announcements, and webinar countdowns. The countdown blocks communicate time remaining to the event date. Replace the email capture with a registration CTA linking to your ticketing page.
Mobile app store submission countdown
While your app awaits App Store or Play Store approval (typically 24–72 hours), show a coming soon page at your marketing URL with the estimated launch countdown. Collect emails for day-one download notifications.
Study countdown timer JavaScript with setInterval
The tick() function demonstrates the standard countdown pattern: subtract current time from target time, convert milliseconds to time units with integer division, pad with zeros, and update the DOM. The setInterval with 1000ms is the universal countdown interval.
A/B test coming soon page email capture rates
Deploy multiple variants of this page with different headlines, CTAs ("Notify me" vs "Join the waitlist" vs "Get early access"), and form positions. Track submission rates. The winner variant informs the full landing page copy at launch.
A/B test coming soon page email capture variants
Deploy multiple variants with different headlines, CTAs (Notify me vs Join the waitlist vs Get early access), and form positions. Track submission rates per variant. The winner informs the full launch landing page copy and layout.
Related: App Hero with Phone Mockup and Store Badges
See the App Hero with Phone Mockup and Store Badges for a related heroes pattern worth pairing with this one.
Related: Mega CTA Banner
See the Mega CTA Banner for a related heroes pattern worth pairing with this one.
Related: Hero with Rotating Testimonial Spotlight
See the Hero with Rotating Testimonial Spotlight for a related heroes pattern worth pairing with this one.
Related: Split Hero with Scroll-Highlighted Feature List
See the Split Hero with Scroll-Highlighted Feature List for a related heroes pattern worth pairing with this one.
Related: Hero with Company Milestone Timeline Strip
See the Hero with Company Milestone Timeline Strip for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

At the top of the JS panel, set const LAUNCH = new Date("YYYY-MM-DDTHH:MM:SS"). The tick() function runs every 1000ms via setInterval. It computes LAUNCH - new Date() in milliseconds, converts to total seconds, then uses integer division (Math.floor(diff / 86400) for days, etc.) and modulo to extract each time unit. The pad() function zero-pads each unit to always show two digits. Setting LAUNCH is the only change needed.

In handleSubmit(), before the UI update code, add your API call. For a custom backend: const res = await fetch("/api/waitlist", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify({email: e.target.querySelector(".email").value}) }); if (!res.ok) { showError(); return; }. For Mailchimp, use their Embedded Forms or API v3 endpoint. Use a server-side proxy to hide API keys.

Math.max(0, LAUNCH - now) ensures diff never goes negative — all four blocks show 00 when the launch date has passed. To show a "We are live!" state when the timer expires, check if LAUNCH < new Date() inside tick() and update the countdown section innerHTML with a launch announcement instead of continuing to show the timer.

Click "JSX" to download a React component. Manage the countdown values in useState({d:"00",h:"00",m:"00",s:"00"}). Run the tick interval in a useEffect: const id = setInterval(tick, 1000); return () => clearInterval(id) — the return cleanup prevents the interval from running after the component unmounts. For email capture, make the form a Client Component ("use client") and use useState for the submitted state.