Updraft

Updraft is a site for a hot-air balloon company: shared and private flights, proposals, family flights and group charters. It also fits sightseeing tours, scenic flights, gliding and paragliding schools and other sunrise adventures. It is warm and wide open: the home page opens on a short film of a fleet of balloons rising at sunrise over red rock arches and a river in golden mist, with the headline in the sky on the left. Behind everything is a sunrise sky by day and the blue hour before dawn at night, with small balloons rising far away. The demo is a fictional company, Sunward, in Sedona, Arizona.

Updraft comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Flights, routes, crew, journal, 404	Pages → the page’s own entry
Prices (seats and packages, small print, booking, gift vouchers, questions)	Pages → Pricing page
Meeting point (hours, details, map, contact form, questions)	Pages → Contact page
Flights (category, price, per person or basket, time, seats, right for you if, what’s included, the morning, questions, photo)	Content → Flights
Routes (region, time in the air, highest point, season, what you see, description, photo)	Content → Routes
Pilots and crew (role, what they fly, hours flown, experience, languages, flights, portrait, biography)	Content → Pilots
Journal (guides; one can be for guests only)	Content → Journal
Name, phone, address, currency, navigation, header button, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, weather and rebooking	Pages → Legal

In headlines, words wrapped in *stars* are set in the accent color (saffron at night), as in “Rise with *the sun*”. The opening’s headline has its two lines in separate fields.

The film in the opening

The opening plays a short muted film across the whole window (Pages → Home page → Opening → Film, a file in public/, e.g. /media/hero.mp4), with its first frame as the photo. The photo shows at once; the film is fetched after the page has loaded and fades in when it plays, so the page stays fast. With reduced motion or a data saver the photo stays. Keep the upper left of the picture bright and calm: the headline sits there on a veil of morning light, in the day’s ink in both themes.

To make your own: film a slow, wide shot (or generate one), 10 to 20 seconds, then export it about 1280 pixels wide as H.264 MP4 without sound, ideally under 2 MB. A clip played forward and then backward loops without a cut. Replace the photo with its first frame.

Your morning and the weather rules

• Your morning (Pages → Home page) is a climb chart: each moment of the morning has a time, a title, a line and an altitude, and the chart draws a smooth line through them with a small balloon at each one, from pickup on the ground to the highest point and back down to the toast. Change the unit (ft or m) in the same section.
• We fly when the sky says yes lists the conditions your pilot checks, as gauges, and your rebooking promise.

Flights, prices and routes

Each flight has a page with its photo, category, time, seats, price (per person or per basket), who it is right for, what’s included, the morning, the pilots who fly it and questions. The prices page and the home page show seats and packages as cards; each pays online with a one-time Stripe Price id (or a Lemon Squeezy variant), and gift vouchers sit below. Routes are tall windows onto the view with the time in the air and the highest point; each has a page with the season and what you see.

The map

The meeting point page shows the streets round the launch field, drawn from OpenStreetMap in your colors, with a pin, your address and directions links. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put the coordinates in map.config.json and run npm run map -- fetch.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Choose a date	Prices page, loads on click; a preview of the calendar until connected	Cal.com
Seats, packages and gift vouchers	Prices page (one-time prices)	Stripe or Lemon Squeezy
Newsletter	Home and journal pages, with a welcome email	Supabase or Mailchimp
Contact form	Meeting point page; messages go to the email in Site settings	Resend
AI chat	Every page; answers about flights, prices, weather and pickup, never promises a flight will happen	Claude or OpenAI
Guests-only guide	A journal post marked “Members only”	Clerk
Search	⌘K or the search button: flights, routes, crew, guides, prices, meeting point	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics, PostHog
Photos	Served by Cloudinary when it is set	Cloudinary

Sections

The home page is built from these sections, in any order: Opening (the film, the headline, the buttons and up to three numbers of proof), Your morning, Flights, We fly when the sky says yes, Seats and packages, Routes, Pilots and crew (portraits with a badge), Reviews, Questions, Journal, Newsletter and Closing call. With reduced motion everything stands still.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (burnt orange: the button, links, marked words), the second (turquoise: the sky, soft fills and the hue of the night) and the third (saffron: sunrise light, the climb line and eyebrows). Buttons are deepened until their cream text is readable and links are adjusted until they read on the page; a color that can’t get there stops the build with a message. Brand also sets the corners and two fonts: one for headings (Bricolage Grotesque, Fraunces, Syne or DM Serif Display) and one for text (Instrument Sans, DM Sans, Figtree or Manrope). The site opens in its day theme; the toggle switches to the night, and the browser remembers the choice.

Languages

Updraft is ready for more languages: see Languages.

The 404 page

A small game, Ride the winds: a balloon climbs while you hold the burner (Space, the up arrow, the button or the board) and sinks when you let go; the wind blows a different way and speed in each of four layers of sky, so you steer by height and land on the field. Five flights with new winds and a smaller field each time; points for landing near the middle and for fuel left. The best total is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project and its design rules for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, flights, routes, crew and guides for AI assistants, in every language.
• Pages carry JSON-LD: the company as a LocalBusiness with its hours and prices, flights as TouristTrips, routes as TouristAttractions, the crew as Persons, questions as a FAQPage, and each guide as a BlogPosting.

Commands

npm run dev                     # local site, editor at /keystatic
npm run build                   # production build
npm run map -- fetch            # draw the map round map.config.json from OpenStreetMap
npm run cms -- sanity schema    # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).