GUIDE — FEIRA DA VISÃO

Konzept

Die Anti-These zu V1/V2: brasilianischer Feira-/Lambe-Lambe-Poster-Maximalismus. Die Site ist eine Abfolge knallbunter Plakatwände (Gelb → Magenta → Papier → Blau → Orange), getrennt durch gegenläufige Marquee-Bänder — wie ein Marktstand, der Brillen verkauft. Ton: Feira-Ausrufe („VER BEM É FESTA!", „CHEGA DE APERTAR O OLHO, PERUÍBE!"), Preise als rotierte Preisschild-Etiketten mit „o mais pedido!"-Splash. Verkauft den R$34-Einstieg an Familien — laut, nahbar, null Premium-Distanz.

Logo (Gradient-«O» + Playfair-Wortmarke) von oe.thalex.de übernommen, hier als angeschrägter Sticker mit Tinte-Outline und Hard-Shadow inszeniert.

Der 3D-Hero

Eine Cartoon-3D-Brille aus Primitiven (2 Tori + Brücken-/Bügel-Zylinder, MeshToonMaterial) mit dicker Comic-Outline (skaliertes Backface-Duplikat in Tinte). Sie schwebt, folgt der Maus — und Klick auf die Brille wechselt die Fassungs-Farbe + löst einen Konfetti-Burst aus (~90 Physik-Partikel). Dahinter regnen Optotypen-Buchstaben (Tanker auf Canvas-Texturen) mit Mini-Physik: Gravity, ein Bounce am Boden, Respawn oben. Klick irgendwo im Hero = Konfetti an der Klickstelle.

Perf: alpha:false, ClearColor = fixer Anker #f5c400, DPR-Cap 1.5, Partikel-Counts halbiert auf Touch, alles aus bei prefers-reduced-motion.

Palette

Dazu ein SVG-feTurbulence-Korn als fixes Overlay (mix-blend-mode: multiply, 9%) — der Riso-/Zeitungsdruck-Charakter über allen Farben.

Typografie

• Tanker (Fontshare) — fette Poster-Display, überall uppercase; Outline-Varianten via -webkit-text-stroke.
• Ranade (Fontshare) — charaktervoller Body-Sans.
• Playfair Italic + Dancing Script — nur Logo.

Design-Mechanik

• Alles ist leicht rotiert (−2.5° … +1.8°) — Plakate, Etiketten, Polaroids, Stempel. Hover richtet auf (rotate(0) scale(1.05)) mit Spring-Easing cubic-bezier(0.34, 1.56, 0.64, 1).
• Hard-Shadows statt Soft-Shadows: box-shadow: 5px 5px 0 var(--tinta) — Druck-Ästhetik, kein Material-Design.
• Marquee-Bänder in wechselnden Farben/Richtungen als Sektions-Trenner (reine CSS-Animation, animation-direction: reverse).
• Reveals springen statt zu faden (translateY + rotate + scale mit Spring).
• FAQ als Ticket-Stapel, Läden als „Bancas", Steps als nummerierte Stempel-Karten.

Seiten

• index.html — 3D-Hero + Preisschild-Grid + Polaroid-Galerie + 3 Passos + Mega-CTA
• planos.html — Preistabelle als rotierte Zeilen-Etiketten (Preise aus THAL-315: 69/34 · 119/49 · 139/59 · 499/119 · 749/159) + Ticket-FAQ
• como-funciona.html — 3 Passos + Jahres-Zyklus + FAQ
• lojas.html — 3 Bancas (Namen/Bairros Platzhalter)
• contato.html — WhatsApp-first + Formular (Demo-Submit)

Bilder

4 Motive via scripts/gen-image.sh: „bold pop studio photography, hard direct flash, vivid saturated solid color backdrop, Brazilian street-market energy" — jede Person vor einer anderen Plakatfarbe, als Polaroids mit Tinte-Rahmen eingebunden.

Nachbau-Schritte

1. Fonts von Fontshare (Tanker, Ranade) + Logo-Fonts → assets/fonts/.
2. Farb-Tokens + Korn-Overlay + Hard-Shadow-Bausteine (.etiqueta, .polaroid, .banda) aus style.css übernehmen.
3. Three.js vendoren; feira.js als ES-Modul — Brillen-Farben im CORES-Array, Konfetti-Menge über burst().
4. Bei Portierung: Hero client-only; Marquees und Rotationen sind reines CSS und portieren 1:1.