Quest

Quest is a site for an indie game and its studio: a game launch, a small studio, a game jam, a streamer with a game. It’s made like a 16-bit game: the home page is a level where a pixel hero runs across the window as you scroll, collecting coins, and every section is a world. Games with screenshots and a supporter edition, a devlog, a press kit and support complete it. The title screen and the closing call run from edge to edge of the window.

Quest 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)
Games, devlog, press kit, support, 404	Pages → the page’s own entry
Games (screenshots, stores, supporter edition)	Content → Games
Devlog posts	Content → Devlog
Name, description, emails, address, navigation, header button, profiles, social picture	Pages → Site settings
Buttons, labels, chat, search, emails, the level strip, game texts	Content → Interface texts
Privacy, terms	Pages → Legal

In headlines, words wrapped in *stars* light up in the accent, as in “Carry the *last ember* home”.

The level

Under the header runs a strip of ground with coins: as the page scrolls, the hero runs from left to right, the coins pop as it passes and the counter counts them. The run frames change only while you scroll. The hero is a sprite sheet in public/sprites/fox-run.png (four frames of 68 × 40 pixels, facing right): replace it with your own character in the same size. Visitors who prefer reduced motion see the hero waiting at the start.

Small pixel icons (the coin, the lantern in the logo, the feature icons) are drawn in code in src/lib/pixels.ts, as rows of letters in the brand’s colours.

Games and the supporter edition

• A game has a tagline, summary, status (“Coming 2027”), genre, players, platforms, store buttons, key art and screenshots (16:9; they open large without JavaScript).
• Supporter edition: turn on “Sell with Stripe Checkout” and put a one-time Price id there; the game’s page gets a working button. Buyers come back to the games page, and the Stripe webhook (/api/stripe/webhook) emails them, where you can add your own steps (a key on launch day).
• The trailer section takes a YouTube video id; the video loads only when the poster’s play button is pressed.
• Quotes on the home page: only real quotes with their source.

Integrations

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

Feature	Where	Service
Supporter edition	Each game’s page	Stripe
Press and creator calls	Press kit page; a preview of the calendar until it’s connected	Cal.com
Newsletter	Home and devlog pages, with a welcome email	Supabase
Contact form	Support page; messages go to the email in Site settings	Resend
AI chat	On every page, answers from your games, press kit, support answers and devlog	Claude
Search	⌘K or the search button: games, devlog, press, support	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics

Sections

The home page is built from these sections, in any order: The level (title screen), Trailer, Features, Screenshots, Numbers, Quotes, From the devlog, Newsletter sign-up and Closing call.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (buttons and highlights), the second (the sky) and the third (moss). Buttons are darkened until their white text is readable, the second and third are lightened until dark text on them is; a color that can’t get there stops the build with a message. The night theme is a deep indigo. Brand also sets the fonts (a pixel font for headings, the text font, and the label font) and the corners.

Languages

Quest is ready for more languages: see Languages.

The 404 page

A small game, Maze run: the fox is lost in a maze; reach the glowing door before the lantern’s light runs out, and the maze darkens as it does. Arrow keys, WASD, swipes or the on-screen buttons; three mazes, each bigger. The best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, games and devlog for AI assistants, in every language.
• Pages carry JSON-LD: the studio as an Organization, games as VideoGames, the support questions as a FAQPage, and each post.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # 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).