This-or-That-Filter

I developed an interactive experience as a test with the this or that mechanics using 8thWall.

Flavor Selector AR Experience

Desarrollé una experiencia interactiva en realidad aumentada (WebAR) utilizando 8thWall, centrada en un breve cuestionario inmersivo tipo “Esto o Aquello”. El usuario responde a tres preguntas clave mediante inclinación de cabeza (izquierda o derecha), seleccionando entre pares de opciones como tipo de comida, compañía preferida y estilo de consumo.

Al finalizar, se genera una pantalla personalizada que refleja sus elecciones con imágenes y textos dinámicos. El usuario puede tomarse una foto con una marca de agua adaptada a sus respuestas, guardarla o compartirla fácilmente. La navegación es simple, divertida y totalmente manos libres gracias al seguimiento facial.

⚙️ Resumen técnico Input principal: inclinación de cabeza (head tilt) usando xrface de 8thWall.

Sistema de decisiones: 3 pasos (comida, compañía, preferencia).

Opciones visuales: izquierda y derecha, seleccionadas por rotación en el eje X.

Lógica de combinación: estructura que calcula una de 8 combinaciones posibles según las respuestas (firstChoice, secondChoice, thirdChoice).

Resultado final: imagen y texto personalizados + marca de agua adaptativa.

Extras:

Captura de foto integrada con marca de agua.

Compartir o guardar el resultado.

Reinicio rápido para rejugabilidad.

Comunicación vía postMessage y dataLayer para análisis externo.

"This or That" AR Experience

This is a head-gesture-based WebAR experience created with 8thWall, designed as a playful "This or That" decision quiz. Users tilt their heads left or right to answer three questions — choosing between food types, social settings, and preference styles.

At the end of the journey, a personalized results screen is displayed with dynamic visuals and messaging based on the selected path. A custom watermark reflecting the user’s choices is also generated for photo capture, which can be saved or shared. The experience is hands-free, intuitive, and encourages replayability.

⚙️ Technical Overview Input: Head tilt (X-axis rotation), using xrface.

Three-step decision flow:

Food (e.g., Pizza vs. Hamburgers)

Company (Family vs. Friends)

Preference (Flavor vs. Cold)

Head tracking logic:

Tilt left (< -0.1): selects left option

Tilt right (> 0.1): selects right option

Dynamic content loading:

Choices stored (firstChoice, secondChoice, thirdChoice)

Match logic to display one of 8 possible outcomes

Show matching image/text and dynamic watermark