1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: process-rive-interactive-playful
// Optie A — echte Rive runtime met publieke .riv:
// <script src="https://unpkg.com/@rive-app/canvas@2.21.0"></script>
// new rive.Rive({ src: '/your-file.riv', canvas, autoplay: true, stateMachines: 'State Machine 1' });
//
// Optie B — state-machine simulatie via SVG-morph (gebruikt hier):
import gsap from 'https://esm.sh/gsap@3.12.5';
(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const root = document.querySelector('[data-rive-sim]');
if (!root) return;
const states = ['idle','wave','bounce','spin'];
let i = 0;
const label = root.querySelector('[data-state]');
const eye = root.querySelectorAll('.eye');
const mouth = root.querySelector('.mouth');
const body = root.querySelector('.char-body');
const apply = (name) => {
label.textContent = name;
gsap.killTweensOf([body, mouth, ...eye]);
if (name === 'idle') { gsap.to(body, { y: 0, rotate: 0, scale: 1, duration: 0.4 }); gsap.to(mouth, { scaleX: 1, scaleY: 1, duration: 0.3 }); }
if (name === 'wave') { gsap.to(body, { rotate: 8, y: -4, duration: 0.4, yoyo: true, repeat: -1, ease: 'sine.inOut' }); gsap.to(mouth, { scaleX: 1.4, scaleY: 0.7, duration: 0.3 }); }
if (name === 'bounce') { gsap.to(body, { y: -28, duration: 0.35, yoyo: true, repeat: -1, ease: 'power2.out' }); gsap.to(mouth, { scaleY: 1.4, duration: 0.3 }); }
if (name === 'spin') { gsap.to(body, { rotate: 360, duration: 1.2, repeat: -1, ease: 'none' }); gsap.to(mouth, { scaleX: 0.6, scaleY: 0.6, duration: 0.3 }); }
};
apply(states[i]);
const timer = setInterval(() => { i = (i + 1) % states.length; apply(states[i]); }, 2200);
root.addEventListener('click', () => { clearInterval(timer); i = (i + 1) % states.length; apply(states[i]); });
})();