Oliver Ótica

Making-of · Guide (deutsch)

Variante 1 — «Maré Clara»

Konzept

Brillen leben von Licht — also ist die ganze Variante um brasilianisches Küstenlicht gebaut: warmes Papier statt Weiß, Sonnen-Kaustiken statt Hero-Video, Meerglas-Grün und Terracotta statt Tech-Blau. Die Marke wird als „Oliver Ótica" neu gedacht: nicht Express-Shop, sondern Hausoptiker — Ton der Site: „A gente não vende óculos. A gente cuida dos seus olhos." (direkt aus dem Business-Konzept THAL-315 abgeleitet: Beziehung statt Produktverkauf).

Verkaufslogik: Der Monatspreis (R$34/mês) ist überall der Anker, nie die Jahressumme — BR-Kaufpsychologie aus dem Konzept-Dok. Der Abo-Wert wird als Jahres-Zyklus erzählt (dia 1 → sempre → mês 12), nicht als Feature-Liste.

Palette (OKLCH)

Warme Neutrals, zum Marken-Hue getönt; Akzente sparsam (60-30-10).

--paper · Seiten-BG
--ink · Text
--mar · Meerglas
--mar-deep · CTA
--sol · Terracotta
--hero-bg · Canvas-Anker

--hero-bg ist bewusst ein separater, fest gepinnter Hex-Anker für die WebGL-ClearColor — nicht an --paper gekoppelt (Learning THAL-352: Seiten-Theme muss sich ändern lassen, ohne die Canvas-Optik anzufassen; oklch-Werte nie als rgb parsen).

Typografie

  • Sentient (Fontshare) — Display-Serif mit warmen Italics. Trägt Headlines und die kursiven Akzent-Wörter (cuida, num valor mensal).
  • Supreme (Fontshare) — humanistischer Body-Sans, unverbrauchte Alternative zu Inter & Co.
  • Skala ~1.32, fluid via clamp(); Zeilenlängen ≤ 65ch; Labels als gesperrte Caps (letter-spacing: 0.22em).

Beide self-hosted als WOFF2 in assets/fonts/ — keine externen Requests, offline-fähig.

Techniken

1. WebGL-Kaustiken (Hero)

Fullscreen-Shader (Three.js, vendored): zwei rotierte, driftende Sinus-Gitter, multipliziert und potenziert (pow(v, 3.2)) — das klassische Wasser-Kaustik-Muster, hier in Sonnengold + Meerglas auf Papier. Perf-Regeln aus THAL-343/344: alpha:false, ClearColor == Hero-BG, DPR-Cap 1.5, depthWrite/depthTest:false, Render-Stopp via IntersectionObserver, komplett aus bei prefers-reduced-motion.

2. Lens-Shape-Motiv

Bilder laufen durch organische Linsen-Formen (border-radius: 48%/60%…) statt Standard-Rechtecke — das optische Thema der Marke als Formsprache. Wiederholt sich im Hero, in den Splits und im Footer-Dot des Logos.

3. Fokus-Reveal

Hero-Headline-Wörter starten mit blur(14px) und werden gestaffelt scharf — die Kernmetapher des Produkts (unscharf → scharf sehen) als Ladeanimation. Reine CSS-Transition, JS setzt nur Klassen.

4. Editorial-Layout

Keine Karten-Batterien: die vier Abo-Säulen sind eine liniengeteilte Editorial-Liste mit kursiven Zählwörtern (um/dois/três/quatro); Planos auf der Unterseite als Zeilen-Tabelle statt Card-Grid. Asymmetrische Splits, Ticker-Marquee als Rhythmus-Brecher.

Seiten

  • index.html — Hero + Säulen + Plan-Übersicht + Familie/Saúde-Splits + CTA-Banner
  • planos.html — Detail-Zeilen aller 5 Pläne (echte Preise aus dem Deckungsbeitrags-Modell: 69/34 · 119/49 · 139/59 · 499/119 · 749/159), FAQ vor dem Abschluss
  • como-funciona.html — 3 Schritte + Jahres-Zyklus + Transparenz-FAQ
  • lojas.html — die 3 Läden (Namen/Bairros sind Platzhalter — echte Adressen/Öffnungszeiten vom Kunden einsetzen)
  • contato.html — WhatsApp-first + Formular (Demo-Submit)

Bilder

6 Motive via scripts/gen-image.sh (Codex image_generation), einheitlicher Look: „bright Brazilian coastal morning light, airy and warm, soft sand and sea-glass tones". Als JPEG (~82 Quality) eingebunden, Hero mit fetchpriority="high", Rest loading="lazy".

Nachbau-Schritte

  1. Fonts von Fontshare laden (Sentient, Supreme) → assets/fonts/, @font-face wie in style.css.
  2. Design-Tokens (:root) übernehmen — Palette komplett in OKLCH, Spacing-Skala 4pt.
  3. Three.js vendoren, hero.js als ES-Modul einbinden; ClearColor-Hex an eigenen Hero-BG anpassen.
  4. Reveals: .rv-Klassen + IntersectionObserver aus main.js; Fokus-Wörter mit .focus-word markieren.
  5. Bei Portierung in Next.js: Shader-Komponente client-only (dynamic(..., { ssr: false })), Fonts via next/font/local.