Caso de estudio · Sitio de presentación y diseño en movimiento
Axoltek
Profundidad, al desplazar.
Un sitio para una consultora tecnológica que opera en México, donde el propio desplazamiento sostiene el argumento: una secuencia 3D prerrenderizada se recorre fotograma a fotograma mientras bajas por la página, y seis capas de servicio se ensamblan una a una. Es un lenguaje de diseño deliberadamente distinto al del resto de este portafolio, y sigue siendo rápido en un teléfono.
Visitar el sitioIngeniería
- Recorrido de fotogramas en canvas
- Anclaje ligado al desplazamiento
- WebGL en tiempo real (React Three Fiber)
- Recursos por nivel de dispositivo
- Alternativas para movimiento reducido y ahorro de datos
- Tres idiomas con detección automática
El problema
Una consultora que vende infraestructura, ciberseguridad, IA y gobierno digital tiene que parecer capaz de construir cosas. Una página de folleto convencional —portada, tres columnas, testimonio— argumenta lo contrario. El encargo era convertir el propio medio en la evidencia, sin entregar un sitio que solo funcione en un portátil rápido.
Qué hace
Presenta un portafolio completo de servicios en seis capas estratégicas —infraestructura y conectividad, nube e identidad digital, ciberseguridad y cumplimiento, IA y automatización, gobierno digital, y espacios inteligentes—, junto con páginas sectoriales para organizaciones públicas y privadas y un flujo de captación que alimenta un backend real.
El efecto de desplazamiento
El avance del desplazamiento controla una secuencia de imágenes dibujada sobre un canvas: cada fotograma es un fotograma clave, así que la búsqueda es instantánea y precisa en cualquier navegador. El enfoque obvio —mover la posición de reproducción de un vídeo— se ve impecable en un navegador y se entrecorta en el resto, porque saltar a un punto intermedio obliga a decodificar de nuevo. Los textos y titulares permanecen en el DOM sobre el canvas, así que el efecto nunca cuesta texto seleccionable, traducible y legible por lectores de pantalla.
Dónde se gana su lugar el 3D real
Los fotogramas prerrenderizados resuelven las secuencias cinematográficas. El WebGL en vivo se reserva para lo que debe responderte: un campo de partículas que reacciona al cursor y a la velocidad del desplazamiento, y la pila de seis capas que se convierte en una escena 3D real y orbitable en equipos de escritorio capaces. Un canvas que solo reproduce píxeles sigue siendo un canvas, no un grafo de escena.
Rápido en el teléfono, o no se publica
Aquí es donde suelen fallar los sitios de este tipo. Cada nivel de dispositivo recibe su propia secuencia —una versión vertical para móvil con una fracción de los fotogramas y del peso, nunca la de escritorio—. El fotograma inicial se pinta de inmediato y el resto se descarga detrás, así que la sección se puede leer antes de estar completa. Las conexiones lentas y el ahorro de datos reciben una imagen fija y no descargan secuencia alguna.
Movimiento que se puede desactivar
La preferencia de movimiento reducido del sistema elimina por completo el anclaje y el recorrido, y sirve la imagen fija en su lugar. El anclaje al desplazar es un desencadenante vestibular real, así que no es una casilla escondida en un panel de ajustes: se respeta antes de pedir el primer fotograma.
Tres idiomas, un solo conjunto de recursos
Español, inglés y chino tradicional, detectados desde el navegador y recordados una vez elegidos, con el idioma resuelto en el servidor para que la primera pintura nunca sea la equivocada. Ningún texto está incrustado en las imágenes, así que una sola capa de medios sirve a los tres idiomas, y los bloques superpuestos están dimensionados para la diferencia de longitud entre ellos.