Form Shader Success Minimal — Motion Lab

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

// Mechanisme: form-shader-success-minimal
import gsap from 'https://esm.sh/gsap@3.12.5';
// Pas toe op je eigen selector — geen stijlkeuzes hier.
import gsap from 'https://esm.sh/gsap@3.12.5';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const orb=document.querySelector('.shader-orb,.shader-hero,.cta-orb');if(orb){gsap.to(orb,{backgroundPosition:'200% 50%',duration:6,ease:'sine.inOut',repeat:-1,yoyo:true});document.addEventListener('mousemove',e=>gsap.to(orb,{backgroundPosition:(e.clientX/window.innerWidth*200)+'% '+(e.clientY/window.innerHeight*200)+'%',duration:1.2,ease:'power2.out'}));}

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

<!-- Skeleton: form-shader-success-minimal -->
<div class="demo-block">
  <!-- DOM-structuur hier -->
</div>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: form-shader-success-minimal */
:root {
  --block-bg: ;
  --block-fg: ;
  --block-accent: ;
}