Engine documentation

FISO-RUN — Dopareads-landing v2 (Mode B)

Engine protocol and working reference.

Datum: 09-07-2026 · Bouwer: Mike (Fable 5, directe bouw) · Input: FISO/inbox/dopareads-landing.html (kopie van Dopareads/dopareads-landing.html, 05-07-2026) · Output: FISO/out/dopareads/index.html

Het origineel in Dopareads/ is NIET aangeraakt. Deze v2 is de vervangkandidaat.

Gekozen spine + waarom

Zelfde single-file spine als v1 (geen framework, geen build-step): het origineel was al goed getekend (kleursysteem met CSS-variabelen, EN/NL via data-attributen, canvas-stroming) en Mode B zegt upgraden, niet herbouwen. De snee zat in wat er ontbrak, niet in wat er stond.

Baseline (contract, vastgelegd VÓÓR de bouw — flows-dopareads-baseline.js, uitslag GROEN)

  1. EN/NL-toggle verandert de copy — werkt
  2. Taalkeuze persist via localStorage['dopareads-lang'] — werkt
  3. Deuren → #shop / #engine — werkt
  4. Hero-canvas tekent golven — werkt
  5. 6 boeken + 6 koopknoppen renderen, pennamen/prijzen — werkt
  6. Baseline-feit: koopknoppen = no-op (geen handler)
  7. Baseline-feit: "Get FIBO" href="#" (dood)
  8. Rendert zonder errors, geen h-scroll @375px

0-regressie-bewijs

Alle 8 baseline-punten zitten als [regressie]-checks in flows-dopareads-v2.js en zijn op de eindversie GROEN (inclusief identieke storage-key, pennamen, prijzen en de relatieve FIBO-link). Volledige run: 26/26 PASS, 0 console-errors, 0 page-errors.

Verbeteringen (aantoonbaar beter)

  1. Document-shell: doctype, <head> met title/description/OG/theme-color/favicon (inline SVG-golf) en — cruciaal — meta viewport. v1 was een fragment zonder head: mobiel rendert dan op ~980px desktop-breedte. Nu echt mobile-first.
  2. Licht/donker-toggle: de CSS-variabelen voor data-theme stonden al in v1 maar niks zette ze. Nu een toggle naast de taalknop, persist via localStorage['dopareads-theme'], zon/maan-icoon volgt de stand. Voldoet aan de huis-licht/dark-regel.
  3. Eerlijke kassa: één PRODUCTS-configblok bovenin het script. Product-id ingevuld → koopknop opent payhip.com/b/<id>. Nog leeg → een eerlijke toast ("De kassa opent binnenkort"), geen dode knop meer. Zelfde patroon voor "Get FIBO" (LINKS.getFibo).
  4. Signatuurmoment: de hero-stroming is nu een leesstroom — letters drijven mee in de golven, de stroom buigt zacht om de cursor heen. Reduced-motion: statisch frame, geen drift.
  5. Scroll-reveal: secties en boeken komen gestaggerd binnen (IntersectionObserver). Progressive enhancement: zonder JS of met reduced-motion is alles gewoon direct zichtbaar (js-reveal-klasse-gate — geen verstopte content).
  6. Mobiele plank: 2 boeken naast elkaar onder 520px (v1: één kaart van een heel scherm hoog).
  7. A11y: skip-link, <main>-landmark, focus-visible-states, aria-pressed op de taalknoppen, aria-label op de thematoggle, aria-live op de toast, html.lang volgt de taalkeuze.
  8. Social-proof zonder leugen: REVIEWS-config; de "Eerste lezers"-sectie rendert ALLEEN met echte quotes en is anders onzichtbaar. Nul verzonnen reviews.
  9. Em-dash-regel (naar-buiten content): alle em-dashes uit de zichtbare copy herschreven met punten/dubbele punten, betekenis intact; check zit in de flows (0 gevonden). Nota voor Tash: dit raakt bestaande copy-zinnen licht — de woorden zijn gelijk gebleven, alleen de leestekens zijn aangepast aan je eigen buiten-regel.

De drie loep-passes

  • Pass 1 (screenshots dark/light/mobiel/NL): stroming + glyphs subtiel goed, beide thema's schoon, mobiel-hero strak. Bevinding: geen.
  • Pass 2: mobiele plank te leeg (één kaart = heel scherm) → 2-koloms plank onder 520px + compactere cover-typo. Topbar-overlap bij scroll bekeken: paneel-achtergrond houdt 'm leesbaar, geen actie.
  • Pass 3: volledige gate opnieuw gedraaid na de fix → 26/26 GROEN. Mobiel-plank-screenshot opnieuw bekeken: leest als een echte winkelplank.

Kaiju-lat-check (Part 2 — drie of meer raak)

  • Signatuurmoment: de leesstroom met driftende letters + cursor-respons — raak.
  • Beweging met betekenis: reveal-orkestratie + stroming die het "meegetrokken worden in een verhaal"-gevoel draagt — raak.
  • Palet/sfeer eigen aan dit merk: het tide/abyss-systeem van v1 doorgezet in beide thema's — raak.
  • Detail-afwerking: cover-sheen op hover, knop-press-states, focus-states, toast — raak.
  • Anti-slop: geen sjabloonpalet, geen Inter, serif-gedragen typografie — staat.

Self-verify gate (Part 8)

Playwright-core + systeem-Chromium (Engines/verify-rig/verify.js): rendert · 0 console-errors · 0 page-errors · geen h-scroll @375px · interactie-walk 16 elementen · alle 23 flow-checks GROEN (incl. aparte reduced-motion-context). Uitslag: GROEN, 26/26.

Delivery-status: IN PROGRESS (eerlijk), niet DELIVERED

Part 9 eist een live URL. RECON NEEDED: geen Vercel/Netlify-account of CLI-credentials op deze machine. Check die 't sluit: Tash logt eenmalig in (npx vercel login of Netlify-token), daarna is deployen één commando (zie README). Alles daarbuiten is af en geverifieerd.

Wat Tash invult (config bovenin index.html, gemarkeerd blok)

  • PRODUCTS.<boek> = Payhip product-id per boek zodra de winkel bestaat.
  • LINKS.getFibo = URL van de FIBO-productpagina.
  • REVIEWS = echte lezersquotes (sectie verschijnt vanzelf).