Micro-interacciones que hacen que la web se comporte como el material: luz que barre al hacer scroll, reflejos que siguen la mano, el cristal que gira y cambia su brillo. La idea: que la marca se sienta de vidrio sin caer en el efectismo.
Los bloques 1 y 5 reaccionan al scroll (baja despacio y mira cómo el reflejo cruza). Los bloques 3 y 4 reaccionan al ratón. El 2 al pasar por encima. Todo respeta prefers-reduced-motion.
Un haz de luz cruza cada tarjeta a medida que sube por la pantalla, como un reflejo real desplazándose sobre el vidrio. El reflejo está atado a la posición de scroll: al inicio entra por la izquierda, al centro está cruzando, al final sale por la derecha.
Seguridad y resistencia térmica. Fachada, mamparas, barandillas.
Aislamiento acústico y protección. Cubiertas, suelos pisables.
→ Tarjetas de producto y de proyecto en home y listados.
Una capa esmerilada que se vuelve transparente al pasar el cursor: el contenido se revela como cuando limpias un cristal empañado.
→ Tarjetas sobre fotos de obra, galería de proyectos.
Un brillo suave que se desplaza con la mano sobre superficies oscuras, como la luz sobre un vidrio.
→ Secciones oscuras (hero alternativo, CTA, banda de cierre).
La superficie gira siguiendo el cursor y el reflejo se desplaza en sentido contrario al giro, igual que la luz sobre un vidrio real cuando lo mueves en la mano. No es solo tilt: el brillo "vive" la inclinación.
→ Tarjeta o ficha destacada (producto estrella, proyecto premiado).
El mismo destello, pero ahora controlado por el scroll en vez de repetirse en bucle: cruza el banner una vez, a tu ritmo, mientras la sección pasa por la pantalla. Más sobrio y menos "anuncio".
→ Banner/hero, banda de cierre, separadores de sección.
Sección alta: la barra de arriba y el panel central se quedan fijos (sticky) mientras el fondo de círculos sube por detrás. Así se ve el efecto en acción: el contenido pasa borroso a través del cristal a medida que haces scroll. Es exactamente cómo se comportaría un menú sticky de vidrio sobre el contenido de la web.
Haz scroll dentro de esta sección: la barra y el panel se quedan quietos y los círculos del fondo se difuminan al pasar por detrás del vidrio.
→ Navegación sticky, cajas de CTA sobre imagen.