🎥 Visuals & Motion

The experience was designed with fluid motion and cinematic quality. We ensured:

• ✅ High-quality pre-rendered animations for smooth performance.
• ✅ Seamless UI/3D transitions powered by A-Frame.
• ✅ Real-time physics interactions for dynamic reactions.

⚡ Quick Explainers

• 🎯 The Slap Mechanic: Users slap Krampus with perfect timing.
• 😂 Reaction Feedback: Krampus reacts differently depending on timing.
• 🎬 Outro Sequence: A theatrical ending ties everything together.
• 🎟️ Buy Tickets CTA: Users can purchase tickets directly from the experience.

🕹️ Start-to-Finish Experience

1. 👋 Intro: Users tap ‘Start’ to begin.

2. 📊 Gameplay: A meter animation challenges users to time their slap.

3. 💥 Reaction: Krampus reacts differently depending on the score.

4. 🎞️ Outro: The scene transitions into a final animation + ticket CTA.

📦 Tech Stack

• 🌍 8th Wall – WebAR tracking & deployment.
• 🎮 A-Frame – 3D rendering & animations.
• 🎨 Blender – 3D asset creation, optimization & compression.
• 📊 Google Analytics – Event tracking & conversion monitoring.

🎶 Licensed Audio & Visual Assets

We integrated official movie assets to create a truly immersive experience:

• 🔊 Authentic Krampus Voice Lines – Official studio-quality voice recordings, with different lines triggered dynamically based on gameplay.
• 🎼 Movie Soundtrack & Sound Effects – Key sound effects and background music from *Red One* for added intensity.
• 🎥 Movie-Grade Visuals – The 3D Krampus model was designed to closely match the film’s character while remaining optimized for WebAR.

⚙️ 3D Krampus Model: Balancing Fidelity & Performance

• ✅ Optimized Poly Count – Reduced complexity while maintaining high detail.
• ✅ Efficient Rigging & Animations – Pre-rendered and blended animations for smooth transitions.
• ✅ Compressed Textures & Shaders – Optimized for fast loading and real-time rendering.
• ✅ Real-Time Animation Transitions – Event-driven animation blending for seamless interactions.

function setAnimationClip(clipName, loop = 'once') {
    if (krampusModel) {
        krampusModel.setAttribute('animation-mixer', `clip: ${clipName}; loop: ${loop}; timeScale: 1`);
        console.log(`Set animation clip to: ${clipName} with loop: ${loop}`);
    } else {
        console.warn('Krampus model not available for setting animation.');
    }
}