Kite
A pre-launch waitlist that shows the line filling up.
A waitlist site for a product that is not out yet. The hero draws your product's name in thousands of points, one for each place in line: the word fills from the left as far as your first wave is taken, the places still open drift through the frame on a slow crosswind, and when a visitor joins, their own point turns your brand colour and flies into the word. Around it: the email form with every state designed, the figures behind the list, how the product works with a real piece of its interface, how the waves and the founding perks work, build notes, questions, and a "your place" page with a referral link that moves people up the line.
- For
- Pre-launch waitlist
- Built with
- HTML, CSS, ES modules, three.js, Motion, anime.js (no build step)
- Pages
- 5 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
The product's name made of thousands of points, one per place in line: it fills from the left as far as the first wave is taken, and the visitor's own point flies in, in colour, when they join.
What you get
Straight from the template's README, the same file you will find in the repository.
- A hero whose 3D moment is the waitlist itself: the product name in points, filled to the share of first-wave places taken, with the visitor's own point flying in when they join
- The offer right above the form and proof right under it: an initials stack and the live count of people in line
- A features deck: four product cards that fan out and shuffle (Motion), with an index, Previous, Pause and Next, still and stepped under reduced motion
- A live "days until the first invites" figure, counted on the visitor's clock
- An email form with every state designed: empty, invalid address, saving, joined, already on the list, offline, network and server errors, and a spam trap
- Demo mode that works with no backend, and one setting to send sign-ups to any endpoint that accepts JSON
- A "your place" page with the visitor's number, their wave, a copyable referral link, email and native sharing, and a reward ladder
- Referral links (?ref=code) captured and sent with the sign-up
- A real product fragment built in HTML and CSS: a shared trip itinerary, not a grey mock-up
- Sections for how it works (the steps joined by a line drawn with anime.js), proof figures, the features deck, launch waves with a live progress meter and countdown, founding perks, a tester quote with a graded photo, build notes, questions and a closing form
- Build notes page with an empty state, a plain-words privacy page and a 404 that works at any address
- Light and dark themes that follow the system until the visitor picks one; the switch opens as a circle from the button
- Phone, tablet and desktop layouts from 320 px up, a phone menu, visible focus, skip link, AA contrast, reduced motion respected
- Every word, number and date in one file:
content.js
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Your place in line
- Build notes
- Privacy
- 404
Stack
- HTML
- CSS
- ES modules
- three.js
- Motion
- anime.js (no build step)
What is not included
- A backend or database for the list: connect your own endpoint (see above).
- Referral counting and confirmation emails: those belong to the service behind the endpoint.
- A share image for social cards: add a 1200 x 630 PNG and an
og:imagetag (seeIMAGES.md).
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
