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/gsap@3.12.5';
// 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;document.querySelector('.audio-toggle')?.addEventListener('click',()=>{on=!on;document.querySelector('.audio-toggle')?.classList.toggle('on',on);});document.querySelector('.audio-cta')?.addEventListener('click',()=>{if(on)ping();});document.querySelector('.audio-cta')?.addEventListener('mouseenter',()=>{if(on)ping(800);});

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: ;
}