1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: cta-shader-orb-brutalist (techniek #36 — Custom GLSL fragment shader)
// Raw WebGL2 fragment shader op een fullscreen quad binnen een ronde clip.
// Simplex-achtige noise + harde stepped color-bands (geen smooth gradients).
// Mouse-position als uniform uMouse -> orb-distortion. Fallback: SVG conic-gradient.
import gsap from 'https://esm.sh/gsap@3.12.5';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const root = document.querySelector('.shader-orb-brutalist');
if (root) {
const canvas = root.querySelector('canvas');
const fallback = root.querySelector('.orb-fallback');
const gl = canvas && canvas.getContext('webgl2', { antialias: false, premultipliedAlpha: false });
if (!gl) { if (fallback) fallback.style.display = 'block'; if (canvas) canvas.style.display = 'none'; }
// ... (zie bron-component voor volledige shader + render loop)
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: cta-shader-orb-brutalist -->
<section class="cta-orb-section">
<div class="shader-orb-brutalist">
<canvas></canvas>
<div class="orb-fallback" aria-hidden="true"></div>
<a class="cta-btn" data-intro href="#">VRAAG NU AAN -></a>
</div>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: cta-shader-orb-brutalist */
:root {
--block-bg: #F4F1EB;
--block-fg: #0A0A0A;
--block-accent: #FF4A1C;
}
.shader-orb-brutalist canvas { width: 400px; height: 400px; display: block; }
.shader-orb-brutalist .orb-fallback {
width: 400px; height: 400px; border-radius: 50%; display: none;
background: conic-gradient(#0A0A0A 0deg, #0A0A0A 60deg, #FF4A1C 60deg, #FF4A1C 120deg,
#F4F1EB 120deg, #F4F1EB 180deg, #0A0A0A 180deg, #0A0A0A 240deg,
#FF4A1C 240deg, #FF4A1C 300deg, #F4F1EB 300deg, #F4F1EB 360deg);
border: 3px solid #0A0A0A;
}
.cta-btn {
font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.5rem);
letter-spacing: -0.02em; color: #0A0A0A; background: #F4F1EB;
border: 3px solid #0A0A0A; padding: 1.25rem 2.5rem; text-decoration: none;
text-transform: uppercase;
}