brand-shader-landing

# Landings de marca con shader vivo (patrón GlamourSurf) ## Cuándo usar - Crear la web/landing de una marca personal o comercial con una imagen/logo fuerte. - El usuario pide algo "disruptivo", "loquísimo" o "llamativo" para una página de marca. - Convertir una imagen de marca en arte visual animado (agua, humo, niebla) con shader. Landing pages de marcas que son **una sola pantalla de arte visual animado + un CTA**. Nacido del proyecto GlamourSurf (~/Projects/glamoursurf, Ntizar/glamoursurf — https://ntizar.github.io/glamoursurf/): foto de marca → shader WebGL a pantalla completa → botón Instagram. ## La lección central (David la corrigió dos veces) 1. **v1 (hero + 3 tarjetas + secciones quiénes/qué/contacto) → rechazada**: "no es disruptiva". Una marca con estética fuerte NO quiere web genérica — quiere impacto cinematográfico. 2. **v2 (multi-pantalla, scroll cinematográfico, manifiestos, marquee) → "demasiado texto"**: la web solo debe **llevar al canal de la marca** (Instagram, etc.). Ahí ya verán todo. **Regla final: una pantalla, arte vivo, un CTA. Cero secciones de relleno.** ## Receta comprobada (deploy en producción 200 OK) 1. **Assets**: copiar la imagen de marca a `assets/`. Repo local en `~/Projects/<marca>`. 2. **Shader fullscreen en WebGL2 puro** (sin three.js — un solo `<script>`, sin dependencias, carga instantánea): - Triángulo gigante + fragment shader: textura de marca con *domain-warp* (flujo de agua), ripples desde el puntero, espuma/luz animada, vignette, grano de película. - Textura con `MIRRORED_REPEAT` para que el warp nunca muestre bordes. 3. **Tipografía**: Playfair Display (serif editorial) para el logotipo gigante `clamp()` + fantasma translúcido de fondo. 4. **CTA**: botón degradado del canal con micro-copy de una línea ("Everything happens here"). 5. **Verificación**: validar llaves del shader y sintaxis JS con `node` + `vm.Script` (NO abrir navegador — file:// no renderiza WebGL2 fiable); desplegar y `curl` producción. 6. **Deploy**: GitHub Pages vía `gh repo create <repo> --public --source=. --push` + `gh api repos/OWNER/REPO/pages -X POST -f "source[branch]=main" -f "source[path]=/"`. `gh` usa keyring (no depende de .env). Verificar con `curl` que sirve el HTML nuevo (grep de contenido característico) — el build tarda ~40s. ## Referencias - `references/shader-template.md` — fragment shader GLSL completo funcionando (ola domain-warp + ripples + espuma + grano) y el scaffolding JS de uniforms/loop, listos para adaptar a otra imagen de marca. ## Pitfalls - **No usar `three.js` desde unpkg para landings**: añade 600KB y fallo de carga en file://; WebGL2 crudo es ~150 líneas y cero dependencias. - **`prefers-reduced-motion`**: congelar el shader (uTime=0) y animaciones CSS — obligatorio. - **No pedirse confirmación de arte**: David itera rápido (v1→v2→v3 en una sesión); entregar versión completa y esperar feedback directo. - **Texto en landings de marca**: máximo 2 líneas fuera del logotipo. Si hay más que decir, es contenido del canal, no de la web.