Qué hace esta página (desglose técnico)
- Capas visuales superpuestas La página tiene 5 capas fijas que se ven siempre:
Film grain → textura de ruido SVG animada, simula película antigua Scanlines → líneas horizontales que se mueven, efecto monitor CRT Canvas de lluvia → gotas dibujadas con JavaScript en un Ciudad parallax → 3 siluetas de edificios SVG que se mueven a distintas velocidades al hacer scroll Neon signs → textos con text-shadow que parpadean aleatoriamente 2. Efecto Glitch del título Usa ::before y ::after con el mismo texto, colores distintos (cyan y magenta), clip-path para recortar mitades, y animaciones que los desplazan ligeramente. Todo CSS puro, sin JavaScript.
-
Animaciones al scroll (IntersectionObserver) Cuando cada tarjeta entra en el viewport, se le cambia opacity de 0 a 1 y se le quita un translateY o translateX. Esto crea la sensación de que la página "se construye" mientras bajas.
-
Typewriter en las citas Un observer detecta cuándo una cita es visible, then va añadiendo letras una a una con setTimeout recursivo, con un cursor parpadeante al final.
-
Sistema de color con variables Todo el tema cambia modificando 3-4 variables CSS al principio: --cyan, --magenta, --orange, --dark-bg. Eso es la clave para adaptarlo.
Ahora la plantilla reutilizable. Solo tienes que cambiar el objeto CONFIG al principio del JavaScript: Cómo adaptarlo a cualquier profesión Solo cambia el objeto CONFIG al principio del <script>. Aquí tienes ejemplos listos para copiar:
Para peluquero/a Resumen de la arquitectura Técnica Dónde está Qué hace CSS Variables :root + JS al inicio Cambia todo el color con 6 valores Film grain + scanlines 2
La clave es que no hay HTML estático de contenido — todo se genera desde el objeto CONFIG. Para cambiar de profesión, solo cambias ese objeto y los colores. El HTML, CSS y JavaScript restantes son la "infraestructura" que sirve para cualquiera.