Loftwing

Overview#

Loftwing is a multi-page, waitlist-first launch site for a startup. Its fictional brand is an email marketing platform for independent newsletters and small online shops, based in Spokane, Washington, and still in private beta, so every page leads to one goal: joining the waitlist for the public launch. This version is built with Astro 7, TypeScript and Tailwind CSS v4, with no UI framework, and it builds to plain static files. This guide covers version 1.0.0. The template page, with a link to the live demo, is at https://freeframe.dev/templates/loftwing.

Quick start#

Requires Node 24 and pnpm (corepack enable pnpm).

pnpm install
pnpm dev

Then visit http://localhost:4321. Google Fonts need an internet connection.

Pages#

Project structure#

loftwing/
  src/pages/*.astro            one file per page
  src/layouts/Layout.astro     <html>, <head> metadata, the sky layer, header, footer and the script import
  src/components/SiteHeader.astro   header and mobile menu
  src/components/SiteFooter.astro   footer
  src/data/loftwing.ts         all content the features read
  src/data/nav.ts              the header's menu links
  src/lib/site.ts              site name, theme color and the url() helper
  src/scripts/main.ts          menus, reveals, dates and every interactive feature
  src/styles/global.css        Tailwind source: brand tokens and a few components
  public/img/                  favicon.svg, og-image.svg, og-image.png
  astro.config.mjs             site URL, base path and static output
  eslint.config.mjs, tsconfig.json
  package.json, pnpm-lock.yaml, pnpm-workspace.yaml
  README.md                    short introduction
  DOCS.md                      this guide
  CHANGELOG.md                 the template's own changelog
  LICENSE.txt                  added to the download

Customizing#

Brand and colors#

Design tokens live in the @theme block of src/styles/global.css and become Tailwind utilities such as bg-night, text-apricot and border-wire.

To change the warm accent, edit the two tokens:

--color-coral: #ff7a90;
--color-apricot: #ffc3cf;

The dusk sky is the .sky component in src/styles/global.css: one fixed layer of soft gradients that drifts slowly. A few inline SVGs and src/scripts/main.ts chart strings use the hex values directly, so search for them if you change the palette completely. If you brighten the sky, check the contrast of text-fog and text-haze on .glass panels as they scroll over its brightest part.

Blur is used on purpose in only two places, the header bar and the hero mockup. Other panels use .glass, which is translucent without backdrop-filter, so scrolling stays smooth.

Typography#

Red Hat Display sets the headings, Sen the body text and Overpass Mono the numbers and labels. They load from a Google Fonts <link> in src/layouts/Layout.astro and are named in --font-display, --font-sans and --font-mono in src/styles/global.css. To swap one, change the link and the matching token.

Content#

Fixed page copy is in src/pages/*.astro. Everything the features read is in src/data/loftwing.ts, as named exports:

To add a roadmap item, add an object to ROADMAP.ITEMS. The id must be unique, since saved votes refer to it:

{
  id: "inbox-preview",
  status: "next", // shipped, beta or next
  votes: 88,
  area: "Editor",
  title: "Inbox previews",
  body: "See your issue in the common mail apps before you send it.",
},

If you add a journal topic, add a filter button with data-journal-filter to src/pages/journal.astro as well.

Images and artwork#

All artwork is inline SVG, drawn for this template. Each page has its own scene (the flock on the product page, the banded pigeon on the waitlist page, the three lofts on the pricing page, the basket and route on the migrate page, the weather vane on the roadmap page, the logbook on the journal page, the loft at dusk on the about page and the lost pigeon on the 404 page). Journal topics use the TOPIC_ART map in src/scripts/main.ts. To use a photo instead, replace an SVG with an <img> of about the same aspect ratio, for example 2:1 for the product hero and 13:8 for the about scene. Put the file in public/img/ and link it with url("/img/your-photo.jpg"). The social image is public/img/og-image.png (1200 by 630), generated from public/img/og-image.svg. The favicon is public/img/favicon.svg.

Navigation, header and footer#

The header is src/components/SiteHeader.astro, and its menu links come from navLinks in src/data/nav.ts, for both the desktop and mobile menus. The footer is src/components/SiteFooter.astro. To add a page, create src/pages/your-page.astro, add an entry to navLinks and a link in the footer, and pass the entry's id as current to <Layout> so the link gets aria-current="page". Write internal links with url() from src/lib/site.ts, without .html. The header's waitlist button has data-spot-cta, and refreshSpotCallouts() in src/scripts/main.ts changes it to "Your spot: No. 18,413" once a visitor has joined.

Dark mode#

The template is dark only, and color-scheme: dark is set in src/styles/global.css. There's no light theme or toggle.

Features#

Launch date and rolling dates#

Launch dates must never read as past, so they are worked out from today in src/scripts/main.ts (rollingLaunchDay). While DEMO.KEEP_DEMO_CURRENT is true, the launch is the second Tuesday of the first month whose second Tuesday is at least MIN_WEEKS (16) weeks away, at LAUNCH_HOUR (9:00 AM) in America/Los_Angeles. On November 4, 2026 that gives the written text, Tuesday, March 9, 2027.

Any element with data-date="launch" and data-format (long, medium, short, monthDay or year) is filled in by initDates(). The text written in the pages is the November 4, 2026 value. Elements with data-year get the current year. Journal entries keep their real past dates.

For a real launch: set KEEP_DEMO_CURRENT: false and FIXED_LAUNCH: "YYYY-MM-DD" in DEMO in src/data/loftwing.ts. Cohorts and founding dates still follow from it, and after that moment the countdown changes to the [data-cd-live] message. Update the dates written in the pages and SiteFooter.astro to match, so visitors without JavaScript see the right text.

Previewing: add ?now=YYYY-MM-DDTHH:MM to any page URL to see the site at that Pacific time, for example /?now=2027-03-10T09:00. The clock keeps ticking from there. The parameter is validated, and anything else is ignored.

Countdown#

[data-countdown] on the home page counts down to the launch instant in days, hours, minutes and seconds, in initCountdown(). It has role="timer", with no live announcement of each tick. If the launch has passed, which can only happen with a fixed date, [data-cd-cells] hides and [data-cd-live] shows.

Subject-line tester#

initSubjectTester() and scoreSubject() in src/scripts/main.ts, with the rules in SUBJECT. Every score starts at 90 and is clamped to 0 to 100:

Grades: 85 and up is "Ready to send", 65 is "Worth a tweak", 40 is "Needs work", and below that is "Likely to hit the filters". Previews cut after MOBILE_LIMIT (38) and DESKTOP_LIMIT (60) characters, counted by code point, with an ellipsis. The grade and flags are in an aria-live region.

Product tour#

initTabs() gives the five tabs full keyboard support (arrow keys, Home, End) and reads ?tab= (editor, automations, segments, deliverability, analytics). Clicking a tab updates the URL. Each panel has its own small tool:

• Preview size (initDevicePreview): [data-device] buttons switch the email between full width and phone width.
• Flightpaths (initFlowViewer): radios show a flow from AUTOMATIONS.
• Flocks (initSegmentBuilder): "all" multiplies the chosen SEGMENTS.RULES shares, and "any" uses 1 - product(1 - share), on a list of 12,480. For example, "Opened" alone is 7,738, "Opened" and "Clicked" is 2,089, and either one is 9,018.
• Warm-up planner (initWarmupPlanner): MIGRATION.WARMUP gives the days, and each day's volume is round(size * (day / days)^2), reaching the full list on the last day.
• Logbook (initAnalyticsChart): radios redraw an inline SVG chart from ANALYTICS.METRICS.

Waitlist and referrals#

initWaitlist() in src/scripts/main.ts. The form validates the address, publication name, list size and current tool, with inline errors that clear as you correct them. Addresses are trimmed and lowercased.

• Position: a new spot starts at WAITLIST.BASE + seq, where seq counts spots ever created on this device and never goes back, so a first spot is No. 18,413 and a spot number is never reused.
• Duplicates: an address that's already on the list gets its existing spot, invites included. No other field is checked and no invite is credited.
• Invite link: /waitlist?ref=<code>. The code is LW plus six characters from an FNV-1a hash of the address, in the alphabet ABCDEFGHJKLMNPQRSTUVWXYZ23456789. a@x.example gives LWSFASHK.
• Arriving with ?ref=: a valid code is remembered until the visitor joins. Joining with a new address credits the spot with that code, if it's known, once only, and never to itself. A visitor who opens their own link sees their spot and a note. From there, "Use a different address" lets them join a second address from the link, which does count.
• Matching an invite: the "Someone join without your link?" form in the spot panel adds an accepted invite by address. It refuses the visitor's own address and duplicates. This is what makes the tiers work without a server. On a real site, it would ask your backend whether that address joined.

Position is start - accepted * PER_REFERRAL - jumps of the tiers reached, and never below 1. WAVES then picks the invite date:

"Leave the waitlist" asks for confirmation first, then removes the spot from this device.

Accessibility: errors use aria-invalid and aria-describedby, focus moves to the first invalid field, then to the spot heading after joining. The notice has role="status", and the progress bar is a labeled role="progressbar".

Pricing calculator#

initPricing() and planQuote() in src/scripts/main.ts, reading PRICING.

• List price: the BANDS row for the list size, with inclusive tops, times the plan's factor (Solo 1, Shop 1.5, Press 2.2), rounded to a whole dollar.
• Discounts are worked out in whole cents, once: monthly is list * (100 - founding). A year is list * 12 * 85 * (100 - founding) / 100, rounded. Annual per month is that divided by 12, rounded.
• Founding discount: 25%, plus the highest extraDiscount of the tiers a saved spot has reached (Loft +5, Lead bird +10).
• Overage: extra emails beyond includedSends per subscriber cost 40 cents per 1,000 or part of it. They aren't discounted, and they're added to the total.
• Best fit: the first plan whose includedSends covers the sends, otherwise Press.
• Above 100,000 subscribers: plan cards are replaced by a quote panel.

An invalid number in the subscribers field shows an error and keeps the last good estimate. Moving the slider or pressing Reset clears the error. The slider covers 100 to 100,000, and the field accepts any whole number up to 1,000,000.

Migration estimator#

initMigration() in src/scripts/main.ts, reading MIGRATION. Each kind of tool in SOURCES lists its steps from STEPS. A step's minutes are minutes + scale.add * ceil(size / scale.per), and the "automations" checkbox removes the rebuild step. WARMUP gives the warm-up days, with inclusive tops. When "Nothing yet" is selected, list size and automations hide and the warm-up uses the smallest row. ?from= preselects a kind of tool.

Checked steps are saved, with the time left recalculated, and "Start over" clears them.

Roadmap voting#

initRoadmap() in src/scripts/main.ts, reading ROADMAP. Each visitor has one vote per item, and pressing again removes it. Votes are saved and added to the item's starting count. Status filters are aria-pressed buttons, and ?status= (shipped, beta or next) opens one directly. Sorting is by most votes, fewest votes or name. Focus stays on the vote button when the list redraws, and each vote is announced in a status region.

Journal#

initJournal() in src/scripts/main.ts, reading JOURNAL. Entries are sorted newest first, with filter buttons and ?topic=. Each entry's full text is in a <details> element.

FAQ#

The FAQs on the waitlist and pricing pages are plain <details> elements in the markup, so they work with the keyboard and without JavaScript. Dates inside them use data-date.

Menu and reveals#

initMenu() handles the mobile menu (aria-expanded, and Esc closes it and returns focus). initReveal() adds .is-visible to .reveal elements with an IntersectionObserver, and also reveals everything above them. Both respect prefers-reduced-motion.

Forms#

No form sends anything until you connect it. All of them validate in the browser and finish with a success state.

Connect the waitlist#

In join() inside initWaitlist(), post the fields and render the spot from the answer. The position and code should come from your server. For the contact form, the same idea with Formspree goes in the submit handler of initContact():

const response = await fetch("https://formspree.io/f/your-id", {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});
if (!response.ok) return; // show an error and keep the form
// then show the success state

Make the submit handler async when you add this. Show the success state only when the response is OK. Once a backend runs the list, also remove the [data-claim-form] shortcut or have it check with the server.

Saved data (localStorage)#

Every read and write goes through the safeStorage object in src/scripts/main.ts, which falls back to memory for the page view when storage is blocked.

To reset, delete the keys in your browser's developer tools, or run:

Object.keys(localStorage).filter((key) => key.startsWith("loftwing:")).forEach((key) => localStorage.removeItem(key));

SEO and sharing#

Each page passes its title and description to <Layout>, which writes the meta description, canonical link and Open Graph tags. Set SITE_URL when you build, for example SITE_URL=https://yourdomain.example pnpm build, or change site in astro.config.mjs; canonical URLs, og:url and the absolute og:image come from it. Regenerate the PNG from the SVG if you change the name or colors. Add a sitemap.xml and robots.txt to public/ if your host doesn't create them. The 404 page passes noindex, and many hosts serve 404.html automatically for missing pages.

Accessibility#

Built in: a skip link, landmarks, one <h1> per page, visible focus rings, labeled inputs with linked errors, the WAI tab pattern, aria-pressed filters, status regions and prefers-reduced-motion support that stops the sky and the reveals. Color is never the only signal: statuses have words. Text colors meet WCAG AA on glass panels at the brightest part of the sky.

When you edit, keep one <h1> per page, label new inputs, and recheck contrast if you change the sky or .glass. Automated tools often can't judge text over gradients, so check those by eye or with a pixel sampler.

Building and deploying#

pnpm build     # static site in dist/
pnpm preview   # serves dist/
pnpm check     # astro check
pnpm typecheck # astro sync and tsc
pnpm lint      # eslint

Tailwind classes are picked up from src/ automatically, including classes written in src/scripts/main.ts. Keep class names as whole strings there. Upload dist/ to any static host, such as Netlify, GitHub Pages or Cloudflare Pages. Pages build as pricing.html and are linked as /pricing, which those hosts serve as is (Vercel needs cleanUrls). To serve the site from a sub-folder, build with DEMO_BASE_PATH=/your/folder; url() and the links made in main.ts follow it.

Troubleshooting#

• The launch date changed by itself. That's KEEP_DEMO_CURRENT. Turn it off and set FIXED_LAUNCH.
• My old test spot keeps appearing. It's saved in this browser. Press "Leave the waitlist", or clear the loftwing: keys.
• A referral didn't count. Credit needs a new address and a code that belongs to a spot known to this browser, and it isn't given to the spot's own address. A real backend removes the browser limit.
• A class has no effect. Write it as one whole string in a file under src/; a class assembled from pieces isn't detected.
• /pricing is a 404 on my host. The host needs to map extensionless URLs to .html. On Vercel, turn on cleanUrls.
• The spot isn't there after a reload in a preview. Storage is blocked in sandboxed frames, so state lasts only for the page view. This is expected.
• Fonts look different offline. Google Fonts need a connection, and the site falls back to system fonts.
• The sky looks banded or text feels dim after a color change. Keep the .sky gradients dark, and check text-fog on .glass at the top right of the screen, where the sky is brightest.

License#

Freeframe Commercial License: use it in unlimited websites and apps for yourself and your clients; it may not be resold or redistributed as a template. The full terms, with your licensee details, are in LICENSE.txt and at https://freeframe.dev/license#commercial. Third-party components keep their own licenses. Red Hat Display, Sen and Overpass Mono are licensed under the SIL Open Font License. All business, product and personal details are fictional, and any resemblance to real ones is a coincidence.