Cta Audio Cue Playful — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: cta-audio-cue-playful
import gsap from 'https://esm.sh/[email protected]';
// Pas toe op je eigen selector — geen stijlkeuzes hier.
const ac=new(window.AudioContext||window.webkitAudioContext)();const ping=f=>{const o=ac.createOscillator(),g=ac.createGain();o.connect(g);g.connect(ac.destination);o.frequency.value=f||600;g.gain.setValueAtTime(0.12,ac.currentTime);g.gain.exponentialRampToValueAtTime(0.001,ac.currentTime+0.12);o.start();o.stop(ac.currentTime+0.12);};let on=false;const cta=document.querySelector('.audio-cta');document.querySelector('.audio-toggle')?.addEventListener('click',()=>{on=!on;document.querySelector('.audio-toggle')?.classList.toggle('on',on);});cta?.addEventListener('click',()=>{if(on){ping();gsap.fromTo(cta,{scale:0.92},{scale:1,duration:0.85,ease:'back.out(1.7)'});}});cta?.addEventListener('mouseenter',()=>{if(on){ping(800);gsap.to(cta,{scale:1.06,duration:0.75,ease:'back.out(1.7)'});}});cta?.addEventListener('mouseleave',()=>{gsap.to(cta,{scale:1,duration:0.7,ease:'back.out(1.7)'});});

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: cta-audio-cue-playful -->
<div class="demo-block">
  <!-- DOM-structuur hier -->
</div>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: cta-audio-cue-playful */
:root {
  --block-bg: ;
  --block-fg: ;
  --block-accent: ;
}