Variante 2 — «A Jornada da Visão»

Konzept

Die Homepage ist keine Seite, sondern eine 60-Sekunden-Reise durch das Sehen selbst: Der Besucher startet blind (alles unscharf, nur Bokeh-Lichter), fliegt scroll-getrieben durch eine riesige Brillenlinse — im Moment des Durchflugs rastet die Welt in Schärfe ein —, dann durch einen Tunnel aus leuchtenden Snellen-Optotypen, und landet im warmen Morgenlicht von Peruíbe (Sonne + Meer-Glitzer). Erst dann kommt der Verkauf: „a partir de R$34/mês". Die Dramaturgie IST das Produktversprechen: vom Embaçado zum Nítido.

Das Logo (Gradient-«O» + Playfair-Italic-Wortmarke) wurde 1:1 von oe.thalex.de übernommen; sein Violett-Rosa-Gradient ist der Akzent-Faden der ganzen Variante (Linsen-Schimmer, CTAs, Fortschrittsbalken).

Die 5 Akte (Scroll-Progress)

• 0.00–0.20 — Blind: CSS-Blur 10px auf dem Canvas, Bokeh-Feld, Text „Tudo embaçado não é normal"
• 0.16–0.26 — Linsen-Durchflug: Blur → 0, Sättigung ↑, Fresnel-Glas schimmert im Logo-Gradient
• 0.28–0.58 — Optotypen-Tunnel: ~126 leuchtende Buchstaben (Optician Sans auf Canvas-Texturen), HTML-Overlay als Snellen-Tafel („VOCÊ MERECE VER MELHOR" in absteigenden Zeilen)
• 0.50–0.72 — Ankunft: Hintergrund-Shader blendet Nacht → Bernstein-Morgen, Sonnen-Sprite wächst, Meer-Glitzer twinkelt
• 0.74–1.00 — Verkauf: Preis-Statement + CTA, Canvas beruhigt sich

Palette (OKLCH + Logo-Hexes)

Typografie

• Optician Sans — echte Optotypen-Schrift (aus den Snellen-Sehtafel-Buchstaben konstruiert, ANTI Hamar / Open Source). Trägt Labels, Ziffern, den Tunnel und die Sehtafel-Station. Konzeptionell perfekt: die Schrift des Sehtests für einen Optiker.
• Zodiak (Fontshare) — scharfe Serif für die großen Statements der Reise.
• Synonym (Fontshare) — neutraler Body-Sans.
• Playfair Display Italic + Dancing Script — nur fürs übernommene Logo.

Techniken

1. Scroll-Journey (journey.js)

Sticky-Stage in einer 640vh-Sektion; Progress = Scroll-Anteil, geglättet mit prog += (target-prog)*0.07. Kamera fährt z=8 → −66 mit Maus-Parallax. HTML-Stationen (data-in/data-out) werden pro Frame aus dem Progress geblendet — kein Scroll-Library-Dependency, ~250 Zeilen Vanilla.

2. Schärfe als CSS-Filter

Der „Depth-of-Field" ist kein teurer Post-Processing-Pass, sondern filter: blur() saturate() auf dem Canvas-Element — GPU-billig und der Effekt sitzt trotzdem. Overlay-Text bleibt dabei immer scharf (er liegt über dem Canvas).

3. Optotypen-Tunnel

8 Buchstaben-Texturen (Optician Sans via document.fonts.load auf Canvas gezeichnet, Glow via shadowBlur), je ~14 Ringe à 9 Planes, additiv geblendet, rotieren langsam um die Tunnelachse und drehen sich zur Kamera (lookAt).

4. Nacht→Morgen-Shader

Fullscreen-Background-Quad (gl_Position.z = 0.9999, renderOrder −1) mit zwei Farbverläufen, gemischt über smoothstep(0.50, 0.72, uProg). Dazu Sonnen-Sprite (radialer Canvas-Gradient) und Meer-Glitzer-Points mit Twinkle-Shader.

5. Perf-Regeln (THAL-343/352-Learnings)

alpha:false + ClearColor = fixer Hex-Anker #0a0d16 (nie aus CSS-Token geparst), DPR-Cap 1.5, depthWrite:false auf allen transparenten Layern, Render-Stopp via IntersectionObserver, Partikel-Counts halbiert auf pointer: coarse, komplette Journey deaktiviert bei prefers-reduced-motion (Stationen werden dann normale Sektionen).

6. Screenshot-Dev-Hook

?p=0.42 forced den Progress für deterministische Screenshots (Playwright resettet Scroll zwischen Eval und Screenshot — Learning aus THAL-343).

Seiten

• index.html — die Reise + Plan-Übersicht + Warum-Abo + Lojas-Teaser + CTA
• planos.html — 5 Plan-Zeilen (Preise aus dem Deckungsbeitrags-Modell THAL-315: 69/34 · 119/49 · 139/59 · 499/119 · 749/159) + FAQ
• como-funciona.html — 3 Schritte + Jahres-Zyklus + Transparenz-FAQ
• lojas.html — 3 Läden (Namen/Bairros Platzhalter)
• contato.html — WhatsApp-first + Formular (Demo-Submit)

Bilder

5 Motive via scripts/gen-image.sh, Look: „cinematic night photography, deep ink-blue shadows with warm amber practical lights, well-lit ambient fill light, soft shadows (not deep-black)" — der Fill-Light-Zusatz ist das Learning aus THAL-352 gegen Full-Black-Keller-Optik.

Nachbau-Schritte

1. Fonts: Optician Sans (GitHub), Zodiak/Synonym (Fontshare), Logo-Fonts (Google) → assets/fonts/.
2. Three.js vendoren; journey.js als ES-Modul; Journey-Höhe (640vh) und Akt-Fenster nach eigenem Pacing tunen.
3. Stationen als data-in/data-out-Overlays anlegen; CTA-Station braucht pointer-events: auto.
4. Bei Portierung in Next.js: Journey client-only (dynamic, ssr:false), Reduced-Motion-Fallback als Server-Markup lassen.