Proyecto | HTML / CSS / JavaScript

ARCupExperience

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.

Información sobre el proyecto

Screenshot

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.

Screenshot

En esta sección, el usuario puede acceder al botón “IR AL ESCÁNER” para explorar los elementos de realidad aumentada.

Screenshot

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.

Gif

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.

Screenshot

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.

Screenshot

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.