Proyecto | HTML / CSS / JavaScript
ARCup Experience es un sistema interactivo de realidad aumentada con temática del Mundial 2026. El objetivo fue presentar información de los países clasificados mediante recursos visuales como modelos 3D, videos y filtros, además de una trivia interactiva para hacer la experiencia más dinámica.
El usuario llega primero a la pantalla principal. Ahí se muestra el título del proyecto, una imagen representativa del Mundial 2026 y las banderas de los países anfitriones.
En esta sección, el usuario puede acceder al botón “IR AL ESCÁNER” para explorar los elementos de realidad aumentada.
Esta sección presenta información sobre los países clasificados al Mundial 2026. La tabla muestra estadísticas de sus partidos en los mundiales, junto con datos curiosos de cada selección.
El GIF muestra el funcionamiento de la trivia, la cual incluye 5 preguntas aleatorias con 3 posibles respuestas. El sistema indica en verde si la respuesta es correcta y en rojo si es incorrecta.
El usuario puede retomar el quiz cuando desee.
Esta captura ya es en la parte del escáner.
Al detectar una bandera de un país clasificado, el sistema despliega dos opciones principales: reproducir un video relacionado con la selección escaneada o visualizar un modelo 3D interactivo.
Si se selecciona la opción de video:
El sitio permite aplicar distintos filtros al video (Blanco & Negro, Sepia e Invertir). El usuario puede cambiar entre ellos dinámicamente y regresar al estado original en cualquier momento.
El sistema también permite visualizar un modelo 3D alusivo al Mundial. Una vez detectada la bandera, el usuario puede proyectar el modelo sobre la superficie y activar o detener su animación mediante botones interactivos.
Este proyecto representó uno de mis primeros acercamientos al desarrollo de experiencias con realidad aumentada, por lo que implicó investigar nuevas herramientas y formas de interacción visual. Hablando un poco de los colores, decidí utilizar principalmente tonos azules y rojos para mantener una estética relacionada con el fútbol y transmitir una apariencia formal.
El proyecto también me permitió aprender más sobre la temática de los mundiales y las selecciones, y explorar cómo combinar contenido interactivo, multimedia y modelos 3D dentro de una misma experiencia.