Galería de shaders procedurales

Crea un sitio web de showroom cinematográfico para una marca ficticia de vehículos eléctricos, Nexus Automotive. El encabezado es un shader de fragmentos procedural a pantalla completa —luz que fluye en tiempo real— detrás de dos líneas de tipografía serif de gran tamaño y un eslogan breve, seguido al desplazarse por una sección de manifiesto de marca. El núcleo es un índice de modelos: cuatro vehículos (un sedán insignia, una SUV de turismo, un superauto de alto desempeño y un auto urbano compacto) enumerados en enormes filas tipográficas. Al pasar el cursor sobre una fila, se revela la imagen de ese auto junto a la lista y se atenúan las demás entradas; al hacer clic, se abre una página de detalle dedicada con una introducción de posicionamiento y tres capítulos de texto (forma, cabina, desempeño), además de una forma de volver a la lista. Agrega una sección de video sobre la experiencia de marca y un pie de página de contacto con la dirección y el horario de atención del centro de experiencia. Mantén una paleta casi monocromática, combina una tipografía serif de exhibición con una fuente monoespaciada para etiquetas y usa desplazamiento suave con paralaje sutil y transiciones de desvanecimiento. Entrega un sitio estático que funcione directamente en el navegador: el desplazamiento, las revelaciones al pasar el cursor y la navegación entre páginas deben funcionar de verdad. Sustituye el contenido de muestra por una marca de café de especialidad: cinco líneas de productos se convierten en cinco granos de origen único, el encabezado shader cambia a vapor marrón cálido y partículas de granos de café, y cada página de detalle agrega origen, proceso, notas de sabor y consejos de preparación. 

Crea un sitio web de showroom cinematográfico para una marca ficticia de vehículos eléctricos, Nexus Automotive. El encabezado es un shader de fragmentos procedural a pantalla completa —luz que fluye en tiempo real— detrás de dos líneas de tipografía serif de gran tamaño y un eslogan breve, seguido al desplazarse por una sección de manifiesto de marca. El núcleo es un índice de modelos: cuatro vehículos (un sedán insignia, una SUV de turismo, un superauto de alto desempeño y un auto urbano compacto) enumerados en enormes filas tipográficas. Al pasar el cursor sobre una fila, se revela la imagen de ese auto junto a la lista y se atenúan las demás entradas; al hacer clic, se abre una página de detalle dedicada con una introducción de posicionamiento y tres capítulos de texto (forma, cabina, desempeño), además de una forma de volver a la lista. Agrega una sección de video sobre la experiencia de marca y un pie de página de contacto con la dirección y el horario de atención del centro de experiencia. Mantén una paleta casi monocromática, combina una tipografía serif de exhibición con una fuente monoespaciada para etiquetas y usa desplazamiento suave con paralaje sutil y transiciones de desvanecimiento. Entrega un sitio estático que funcione directamente en el navegador: el desplazamiento, las revelaciones al pasar el cursor y la navegación entre páginas deben funcionar de verdad. Cambia todos los textos del sitio al inglés, incluido el índice de gran tamaño, el texto principal de las páginas de detalle y la navegación. Ajusta los tamaños de fuente y el interlineado para el inglés sin modificar las imágenes del shader ni las interacciones al pasar el cursor.