Zero2Webmaster ✦ Cinematic Starter

One config file. A whole cinematic page.

The Cinematic Starter is the tooling distilled from two hand-crafted showcase pages — the SAVE THE FROGS! Technology page and the Zero2Webmaster Web Craft page. Everything those builds derived from scratch (shader hero, scroll choreography, particle morph, big-type discipline, SEO baseline) is factored into a reusable engine. Producing a new brand's page is now: edit one JSON config → run one command → get a polished, crawlable, on-brand cinematic landing page.

Proof of range: the two samples

Both pages below were rendered by the same engine from different configs. They share no palette, no fonts, no section list, and no signature set-piece. If they looked like siblings, the kit would have failed its one job.

Sample A — Ursa Observatory Fictional community observatory. Dark midnight-indigo palette, Sora/Inter, WebGL aurora hero, custom cursor, and a 🌙 → wordmark particle morph. Sample B — Quill & Meadow Fictional neighborhood bookshop. Warm paper palette, Fraunces/Newsreader serifs, ruled-paper hero, scroll-progress hairline, and a kinetic-typography set-piece.

Both sample brands are fictional demo brands, and say so on their pages. Their stats and copy are demonstration content, not real-world claims.

How to make a new page

Copy a config: duplicate configs/sample-a.config.json (dark) or configs/sample-b.config.json (light) as configs/yourbrand.config.json.
Fill it in: palette, fonts, copy, section list, wow module, SEO block. Set "out" to the output folder name.
Bake it: node public/cinematic-starter/build.mjs configs/yourbrand.config.json (or npm run build:cinematic to rebuild all). The output is one fully-static index.html — deployable anywhere.
Capture og.jpg from the live hero at 1200×630 and drop it in the output folder.

The config schema

{
  "out": "sample-a",                  // output folder under cinematic-starter/
  "meta": {                           // SEO baseline — title/description/canonical,
    "title", "description", "url",    // OG + Twitter cards, favicon, Fathom site id
    "siteName", "fathomSiteId"
  },
  "brand": {
    "name", "wordmarkHtml",           // nav + footer wordmark (span.wm-accent = colored part)
    "mode": "dark" | "light",         // flips derived tints, glyph brightness, morph glow
    "palette": {                      // ALL page color comes from these 8 tokens
      "bg", "ink", "inkDim",
      "primary", "primaryBright", "primaryDeep",
      "accent", "accentSoft"          // accent = links + primary CTA
    },
    "fonts": {
      "display": { "family", "axis", "stack", "headingWeight" },
      "body":    { "family", "axis", "stack" }   // any Google Fonts pair
    }
  },
  "effects": { "grain": 0.045, "cursor": true, "progress": false },
  "nav":     { "homeHref", "guideHref", "guideLabel", "guideShort" },
  "jsonLd":  { ... },                 // structured data, emitted verbatim
  "sections": [ ... ],                // array order = page order; "enabled": false to skip
  "footer":  { "lines": [ ... ] }
}

Copy fields are author-trusted HTML: <strong> for emphasis, <span class="accent"> in the headline, <span class="hl-a"> / <span class="hl-b"> for primary/accent highlights anywhere.

Section menu

Type	What it renders
`hero`	Full-viewport opener: eyebrow, one `<h1>` (accent styled as `gradient`, `italic`, or `color`), sub, optional CTAs + note, backdrop module (`aurora` WebGL shader, `paper` ruled-light CSS, or none), scroll cue (`droplet`/`beam`/`none`).
`stats`	Count-up numerals strip. Final values live in the HTML (no-JS safe); GSAP animates on first view.
`manifesto`	Giant statement with word-by-word scroll-scrub reveal + follow-up paragraph.
`marquee`	Looping keyword strip (decorative, stops under reduced motion).
`features`	Alternating editorial features: ghost numeral, self-drawing SVG visual (10 built-ins: `orbits`, `constellation`, `scope`, `stack`, `press`, `path`, `window`, `chart`, `wave`, `shield` — or raw `svg`), body, pill or link. A pill with `"measured": true` becomes the honest Navigation-Timing speed pill.
`cards`	3-up card grid with glyph icons (10 built-ins), cursor spotlight + 3D tilt on fine pointers.
`wow`	The signature set-piece — see the module menu below.
`close`	Closing pitch + CTA row.

Wow-module menu

particle-morph — ~3,200 canvas particles sample shape A (an emoji, or a glyph filled with a brand gradient) and reassemble as the wordmark under a pinned scroll scrub. Params: shapeA, shapeB.lines, particleColors (keep them bright on dark bgs), rareEvery, pin, caption, fallback. Seen on Sample A.
kinetic-type — rows of giant real text (crawlable, visible without JS) drift horizontally at different rates under a pinned scrub, over a drawing hairline. Params: rows (text, style: outline/ink/accent/dim, drift), pin, caption. Seen on Sample B.

New modules drop into engine/wow/ as a file exporting html/css/js and one registry line — candidates from the recipe's technique menu: a data-viz orbit system, a WebAudio-reactive piece, a retro-play tile board.

What the engine guarantees on every page

Crawlable: every word is real HTML in the static file — view source on either sample. Meta/OG/Twitter/JSON-LD baked into <head>.
BIG readable text: body 20–26px, hero up to ~124px — the non-negotiable inherited from the exemplars.
Reduced motion respected: shader renders one still frame, morph swaps to a static fallback, kinetic rows stand still, marquees stop, all copy immediately visible.
Performance: GSAP vendored locally, rAF loops pause off-screen, devicePixelRatio capped, everything animating is GPU-friendly.
Accessibility: one <h1>, semantic sections with aria-labels, decorative canvases aria-hidden, skip-link, visible focus styles, custom cursor only on fine pointers.
No hardcoded brand: a grep for hex colors in engine/ finds only an offscreen sampling mask. Every visible color derives from the config's 8 palette tokens.

Provenance

Engine, both sample configs, and this guide were designed, coded, and iteration-tested in a single session by Claude Fable 5 (Anthropic's Mythos-class AI model), working from a one-page written brief — the same method that produced the two exemplar pages it generalizes. The build is structured to port cleanly to a future Next.js <CinematicSite spec={...}> renderer.