Cadence

Cadence is a site for a music school: piano, guitar, voice, violin, drums and songwriting lessons for children, teens and adults. It also fits private music teachers, academies, choirs and band programmes. It carries the magic of music: the home page opens on a short film of a grand piano on a still lake at night, a ribbon of golden notes rising into the northern lights, with the headline in the calm sky on the left. By day the page is warm manuscript paper with faint staves; at night an indigo sky with aurora, and gold notes drift up through both. The demo is a fictional school, Lark & Lyre, in Austin, Texas.

Cadence 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)
Lessons, events, teachers, journal, 404	Pages → the page’s own entry
Pricing (plans, small print, the trial lesson, gift card and single lesson, questions)	Pages → Pricing page
Visit (opening hours, details, map, contact form, questions)	Pages → Contact page
Lessons (category, price, ages, how lessons run, right for you if, every month, the first year, questions, photo)	Content → Lessons
Events (date, time, venue, kind, price, lesson, teacher, programme, photo)	Content → Events
Teachers (role, what they teach, on repeat, experience, languages, lessons, portrait, biography)	Content → Teachers
Journal (guides; one can be for students only)	Content → Journal
Name, phone, address, currency, navigation, header button, profiles	Pages → Site settings
Buttons, labels, event kinds, chat, emails, game texts	Content → Interface texts
Privacy, terms, lesson policy	Pages → Legal

In headlines, words wrapped in *stars* are set in italic in the accent (gold at night), as in “Your first lesson is *on us*”. 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 calm and dark: the headline sits there on a veil of night, in cream and gold in both themes.

To make your own: film a slow, dreamy 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.

The keyboard, Your path and plans

• Find your instrument shows a piano keyboard whose white keys are your lessons, in their order (up to eight). Press a key and it goes down with a glow, and the lesson opens below it: photo, ages, how lessons run, price and buttons. It works without JavaScript. Visitors can switch on a sound that plays each key’s note when they press it; it never plays on its own.
• Your path (Pages → Home page) sets two to seven milestones as notes climbing a staff, each a step higher than the last.
• Plans (home and pricing pages) are the monthly plans from the pricing page, with the most popular one on the night band.

Events

Each event has a page with its photo, kind (recital, concert, workshop or open day), date, time, venue, price, lesson, teacher and programme. On the home page and the events page they look like tickets with a perforated stub. Events from today on are listed as coming up and earlier ones as past, as of the date the site was built; any deploy rebuilds it, so publish now and then to move past events on.

Booking and payments

The pricing page holds the monthly plans, a free trial lesson booked with Cal.com, a gift card and a single lesson. Each plan takes a monthly Stripe Price id (or a Lemon Squeezy subscription variant), each other option a one-time one. Without keys, the booking shows a preview of the calendar and the payment buttons explain how to switch them on.

The map

The visit page shows the streets round the school, 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 school’s 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
Free trial lesson	Pricing page, loads on click; a preview of the calendar until connected	Cal.com
Monthly plans, gift card, single lesson	Pricing page (monthly and one-time prices)	Stripe or Lemon Squeezy
Newsletter	Home and journal pages, with a welcome email	Supabase or Mailchimp
Contact form	Visit page; messages go to the email in Site settings	Resend
AI chat	Every page; answers about lessons, plans, events and visiting, never promises a time slot	Claude or OpenAI
Students-only guide	A journal post marked “Members only”	Clerk
Search	⌘K or the search button: lessons, events, teachers, guides, pricing, visit	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), Find your instrument, Your path, Plans, Upcoming events, Teachers (record sleeves with a vinyl that slides out), 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 (indigo: the button, links, marked words, and the night itself), the second (aurora teal: soft fills and the glow of a pressed key) and the third (gold: notes, eyebrows, badges and marks at night). 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 (Fraunces, DM Serif Display, Playfair Display or Young Serif) and one for text (Figtree, DM Sans, Manrope or Jost). The site opens in its day theme; the toggle switches to the night, and the browser remembers the choice.

Languages

Cadence is ready for more languages: see Languages.

The 404 page

A small game, Melody line: steer a melody across a staff with the arrow keys, WASD or a swipe, and catch the golden notes; each one makes it longer. It must not run into itself or off the staff, and the tempo rises every five notes. The longest melody is kept as the best score 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, lessons, events, teachers and guides for AI assistants, in every language.
• Pages carry JSON-LD: the school as an EducationalOrganization with its hours and plans, lessons as Courses, events as Events, teachers 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).