AI ready Refreshed

Coming Soon Template

£15 View live demo or the whole Vault, £79.20

Includes the original v1 design as a separate download.

A coming soon page on one bold colour: the opening date split around a capsule photograph that opens to full bleed as you scroll, a numbered list of what's coming where unreleased items sit under black bars visitors drag back to peek, and a signup band that prints a queue ticket. Worked example: an Italian deli and wine bar opening in Liverpool.

ScrollTrigger Lenis intermediate

11 more details

scroll-scrubpinclip-pathdragpointer-eventsscroll-revealstaggercountdownform-feedbacklenismicro-interaction

Updated 17 October 2026

About this template

A short launch page, about four screens, built on one committed colour and black. The hero sets the name wider than the page and splits the opening date around a capsule-shaped photograph; scroll and the capsule opens to a full-bleed picture while the two halves of the date leave by their own edges.

Read the full template overview

Below it, a numbered list says what's coming. Items you are ready to show carry their photograph; items you are not sit under black redaction bars, and a visitor can drag a bar back to glimpse the picture underneath before it snaps shut. Progress photographs and a short fit-out diary follow, then a full-width black signup band where joining prints a numbered queue ticket.

The worked example is Pellegrino's, a deli and wine bar opening on Duke Street in Liverpool, but nothing in the design is Italian: change the yellow token, the date, the copy and nine photographs and it announces a restaurant, café, shop, studio, gym or product launch.

Coming Soon Template - website template preview

What's included

7 items

Split-date hero: the name overruns both page edges and the opening date is split around a capsule photograph
Scroll-scrubbed opening: the capsule's clip-path and the photo's scale open together to full bleed on one short pin
Drag-to-peek redaction bars on unreleased items, from either side, with click, tap and Enter/Space peeks
Numbered queue ticket printed on signup, with a polite live-region announcement
Days-to-go line counted to one data-open attribute
Five colour tokens; one yellow ground carries the whole identity
Optional Lenis smooth scrolling, reduced-motion and no-JavaScript versions that keep every piece of content

Perfect for

5 use cases

Restaurant, café or bar opening pages
Shop, salon or studio coming soon pages
Product or app launch waitlists
Event and venue launch announcements
Rebrand or relaunch holding pages with a date

How it works

5 sections

The split-date hero

The name is one line of display type sized in viewport units so it always runs slightly wider than the page, centred so both edges cut a letter. The two halves of the date are positioned against the capsule slot rather than the page edges, so the gap between digits and photograph stays constant while the outer edges crop. On a phone the date stacks above and below a wide capsule.

Opening the capsule

Without motion the photograph simply sits in its rounded slot. With motion, one short pinned scroll opens the capsule to the full frame while the photograph grows from a framed view of the whole room to full size, and the two halves of the date leave by their own edges. Wherever the name or date crosses the photograph it switches from black to the ground colour, and that split follows the capsule all the way open. The shape re-fits itself on resize and after the fonts load.

Peeling the redaction bars

Each unreleased item is a real photograph covered by a native button. Dragging along the bar draws it back from whichever side you pulled, with a ground-coloured lip riding the edge, and it closes again on release. On touch only a mostly horizontal drag peels, so vertical swipes still scroll the page. A click, tap or Enter/Space opens the bar part way for a moment instead.

The queue ticket

Submitting the signup form validates it natively, then slides a paper ticket out from under the fields with the visitor's queue number counting up and an opening-night seat line that switches to waitlist past the first 200. The number comes from a data attribute on the section. It is a front-end effect only: nothing is sent until the form is pointed at a real service.

Fallbacks

Content is never hidden without JavaScript: a synchronous head script gates the fades, and the script removes the gate if GSAP fails to load. Reduced motion keeps the capsule in place with no pin, shows every block and lets the bars peek without easing. Lenis is optional and can be switched off with one attribute.

Plugins ScrollTrigger

Difficulty Intermediate

Smooth scroll Lenis integration

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which kinds of launch does this coming soon page suit?

Anything with an opening date and something to tease: a restaurant, café or bar opening, a shop or salon, a gym or studio, or a product and app launch waitlist. The Italian deli is only the worked example. Swap the yellow ground token, the date, the copy and the nine photographs, and remove the progress section if you have no fit-out story to tell.

Does joining the list actually save anyone's email?

No. The signup band is an unwired front end: it collects an email and an optional postcode, then prints a queue ticket in the browser. Nothing is sent or stored, and the ticket number comes from a data attribute. Point the form's action at Formspree, Netlify Forms, Mailchimp or your own endpoint and remove the preventDefault line noted in the script.

How do I change what's under the redaction bars and when it is revealed?

Each list item is plain markup. To reveal an item, change its data-state to revealed, give it its real name and delete the button that covers its photograph. To add a teaser, copy a redacted item, swap its photograph and alt text, and edit the reveal date line. The list is not counted or generated, so you can add or remove rows freely.

Can I use a different colour or keep it dark?

The page reads from five colour tokens, and the ground is the one that sets the identity. Any strong, light colour that holds black type at 4.5:1 or better works as a direct swap. A dark ground would need the ink and paper tokens exchanged and the slabs rethought, which changes the design rather than reskinning it.

How do I set the opening date and the days-to-go line?

The hero's data-open attribute holds the opening moment in ISO format, and the line under the address counts the days to it on load, switching to Tomorrow, Tonight and Open now as the date arrives. The big split digits, the nav date and the footer date are plain text, so change those to match by hand.

What photographs does the template need and at what shape?

One landscape hero that still reads when cropped to a wide capsule and to full screen, five wide strips at roughly five to two for the list, and three progress shots, a wide full-bleed room, a landscape and a portrait. The bundled files are baked from a manifest, so you can replace a file directly or edit the manifest and regenerate.

Paid template

Purchase to unlock the code.

Buying Coming Soon Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£15 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

Unzip and open index.html in a browser, or serve the folder with any static server. There is no build step.
Change the name, the date and the copy in index.html.
Change --ground in assets/style.css to your colour.
Replace the nine photographs in assets/img/ (same file names) or edit assets/img-manifest.json and regenerate (see Photographs).
Point the signup form at your mailing service (see The signup band).

Everything loads from index.html, assets/style.css, assets/script.js, the bundled images and the self-hosted fonts. GSAP, ScrollTrigger and Lenis come from public CDNs.

Using It With Your Own Design

The page is five sections in one file, each with its own hooks, and each can be deleted on its own: every script initialiser returns early when its markup is missing.

Keep the hero's structure ([data-hero], [data-capsule-slot], [data-capsule], [data-digits]) and change the words. The split digits can be any two short strings: a day and month, a year split in half, a product code.
The list, progress grid and signup band are plain markup on CSS grid. Restyle freely; only the data- attributes are behaviour.
To move the design onto another site, copy the token block at the top of style.css, the section's CSS block and its initialiser from script.js.

The page suits a restaurant, café or bar opening, a shop, salon or studio launch, an event or venue announcement, or a product or app waitlist.

Sections and their options

Hero

data-open on the <header> is the opening moment in ISO 8601 (2027-03-05T18:00:00Z). The [data-days-to-go] line counts to it on load and reads "Tomorrow", "Tonight" and "Open now" as the day arrives. Its text in the HTML is the no-JavaScript fallback.
The giant name and the split digits are sized by --step-name and --step-digits; the capsule by --capsule-w and --capsule-h. Keep --capsule-h close to the digits' cap height so the photograph sits between them like a third character.
The scroll opening lasts end: '+=120%' of a viewport in initHeroOpen. Lengthen it for a slower opening.

What's coming

Each <li class="item"> is a row. data-state="revealed" shows its photograph; data-state="redacted" covers the photograph with a <button class="redact" data-peel> that visitors drag back. To reveal an item on its day: set data-state="revealed", write its real name in place of the question marks and delete the button. To add a teaser, copy a redacted row. Nothing is counted or generated from the list.

The question-mark strings inside the bars come from data-mark on .redact__mark, so they are decoration and are never read aloud. The button's visible label ("Under wraps until 01.02 · drag to peek") plus a hidden item number is what assistive technology hears.

Behind the paper

A full-bleed photograph, then a tall portrait beside a landscape with the diary slab anchored under it. Captions sit on the photographs as black tabs. Rewrite the diary rows; the class is-next marks the upcoming one. Delete the section if you have no build story.

The signup band

This is a front end only. The form collects an email and an optional postcode, validates them in the browser and prints a queue ticket. Nothing is sent or stored anywhere, and the ticket number is data-queue-start on the section plus one. To make it real:

Set the form's action to your endpoint (Formspree, Netlify Forms, Mailchimp, Buttondown or your own).
In initJoin, either remove e.preventDefault() to let the form post normally, or fetch() the form data and print the ticket when the request succeeds, using the subscriber count your service returns.

Before anyone joins, the ticket shows as an outlined blank stub (.ticket.is-blank) where it will print. The opening-night seat line switches from "yes" to "waitlist" above 200; change seats in initJoin.

Footer

Address, hours and links. The giant date is decoration, generated from data-mark.

Palette

Five tokens in :root, with their measured contrast pairs recorded in the comment above them:

Token	Value	Role
`--ground`	`#F2C12E`	The page colour behind the hero, list, progress and footer
`--ink`	`#111111`	Display type, slabs, the signup band, buttons
`--ink-soft`	ink at 78%	Meta lines on the ground (6.9:1)
`--paper`	`#F7F3EA`	Text inside black slabs and the ticket
`--paper-soft`	`#B9B4A8`	Labels inside slabs (9.2:1 on ink)

Change --ground and its --ground-rgb triple together. Any light, saturated colour that keeps black type at 4.5:1 or better is a direct swap.

Typefaces

Parkinsans (400, 500, 700, 800) for everything read at a glance, from labels to the 26vw digits, and Chivo Mono (400, 500) for numbers, dates and redaction strings. Both are from Google Fonts and were chosen for a plain, unslashed zero, because the date is the hero. If you change faces, check the zero and the apostrophe at display size.

Both are self-hosted in assets/fonts/ as the latin woff2 files Google Fonts serves, declared by the @font-face rules at the top of assets/style.css, so the page makes no font requests to another site. Both are variable fonts: one file per family covers every weight above, and the page preloads both in its <head>.

Licence: SIL Open Font License 1.1, full text and copyright lines in assets/fonts/OFL.txt (Copyright 2024 The Parkinsans Project Authors; Copyright 2019 The Chivo Project Authors). Keep that file with the fonts. To use Google Fonts instead, delete the two @font-face rules and the font preloads and add the Google Fonts <link> to the <head>.

Photographs

The nine images in assets/img/ are WebP derivatives, cropped and lightly graded, baked from Pexels photographs listed in assets/img-manifest.json:

File	Source
`hero.webp`, `hero.avif`	https://www.pexels.com/photo/2927560/
`row-01-pasta.webp`	https://www.pexels.com/photo/6287322/
`row-02-wine.webp`	https://www.pexels.com/photo/32523798/
`row-03-counter.webp`	https://www.pexels.com/photo/14278936/
`row-04-room.webp`	https://www.pexels.com/photo/5858027/
`row-05-night.webp`	https://www.pexels.com/photo/5848064/
`progress-room.webp`	https://www.pexels.com/photo/15798784/
`progress-light.webp`	https://www.pexels.com/photo/4792521/
`progress-pasta.webp`	https://www.pexels.com/photo/6287339/

Photographs are used under the Pexels licence. Replace a file with your own at the same name, or edit the manifest (src, width, height, crop, grade) and regenerate with any script that reads it; the shapes are a 16:9 hero, 5:2 list strips, a full-bleed 24:11 room, a 4:3 landscape and a 4:5 portrait. The hero must still read when cropped to a wide capsule.

The hero also ships as hero.avif, the same crop and grade at about 60% of the bytes, because it is the first thing the page paints. A <picture> serves it to browsers that take AVIF and hero.webp to the rest, and the <head> preloads it. If you replace the hero, replace both files, or delete the <source> line and the image preload to ship WebP only.

Accessibility

The <h1> holds the name and, for screen readers, the full opening date; the split digits are aria-hidden duplicates.
Redaction bars are native buttons named by their visible label. Enter or Space peeks; the focus ring is drawn on the strip because the bar's own clip-path would cut it.
Touch: only a mostly horizontal drag peels a bar (touch-action: pan-y), so vertical swipes scroll.
The ticket is announced through a polite live region.
Reduced motion: no pin, the capsule stays in its slot, everything is visible and bars open without easing.
Without JavaScript, or if the CDN is blocked, the page is complete and static: the gate on hidden content comes off and the form posts normally.
Every text pair is measured in the :root comment; decorative lettering uses data-mark generated content.

Smooth scrolling

Lenis is optional. Add data-smooth="off" to <html> (or ?smooth=off to the URL) to turn it off, or delete the Lenis <script> tag and the initLenis helper. An existing window.lenis from a host page is left alone.

Teardown

Everything runs inside one gsap.context stored on window.gsapContext. window.gsapContext.revert() removes the pin, every tween and listener, puts the capsule back into its slot and destroys the Lenis instance this page created.

Dependencies

GSAP 3.12+ with ScrollTrigger (the demo pins 3.15.0)
Lenis 1.1+ (optional; the demo pins 1.3.17)

Browser support

Current Chrome, Edge, Firefox and Safari. The bar's focus ring uses :has(); browsers without it still show a ring around the bar's label.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.