UW ONLINE
TOTAAL PAKKET

Voor professionals die zekerheid, vertrouwen en meetbare groei verwachten.

Benieuwd naar wat wij voor u kunnen betekenen?

Hallo, ik ben Karlijn. Ik antwoord op kantooruren gewoonlijk binnen 15 minuten!
^{(Opent de chat niet? Zet dan uw adblocker uit of klik hier.)}

Benieuwd naar wat wij voor u kunnen betekenen?

“Hallo, ik ben Karlijn. Ik antwoord op kantooruren gewoonlijk binnen 15 minuten!”

^{(Opent de chat niet? Zet dan uw adblocker uit of klik hier.)}

(function(){ // ==== Elements ==== const wrap = document.querySelector('.bird-particles'); if(!wrap) return; const canvas = wrap.querySelector('.bp-canvas'); const ctx = canvas.getContext('2d', { alpha: true }); const svgRoot = wrap.querySelector('.bp-shape'); const pathEls = Array.from(svgRoot?.querySelectorAll('path') || []); if(!svgRoot || !pathEls.length) return; // ==== Config uit :root ==== function readCSS(){ const css = getComputedStyle(document.documentElement); return { DOT_COLOR : (css.getPropertyValue('--bp-dot').trim() || '#ffd84d'), DOT_SIZE : parseFloat((css.getPropertyValue('--bp-dot-size') || '2px').trim()), MAX_OPACITY : parseFloat(css.getPropertyValue('--bp-max-opacity') || '0.95') || 0.95, HOVER_BOOST : parseFloat(css.getPropertyValue('--bp-hover-boost') || '1.3') || 1.3, SPRING : parseFloat(css.getPropertyValue('--bp-spring') || '0.015') || 0.015, DAMPING : parseFloat(css.getPropertyValue('--bp-damping') || '0.90') || 0.90, JITTER_BASE : parseFloat(css.getPropertyValue('--bp-jitter') || '0.02') || 0.02, FADE_SPEED : parseFloat(css.getPropertyValue('--bp-fade') || '0.05') || 0.05, IDLE_MULT : parseFloat(css.getPropertyValue('--bp-idle-mult') || '1') || 1, MOUSE_RAD : parseFloat(css.getPropertyValue('--bp-mouse-radius') || '90') || 90, MOUSE_STR : parseFloat(css.getPropertyValue('--bp-mouse-strength') || '1.8') || 1.8, }; } let CFG = readCSS(); const FILL_RULE = 'nonzero'; // of 'evenodd' als je uitgespaarde delen hebt // ==== DPR & canvasmaten ==== let DPR = Math.max(1, Math.min(window.devicePixelRatio || 1, 2)); let W = 0, H = 0; // ==== ViewBox ==== const vb = svgRoot.viewBox.baseVal; // {x,y,width,height} const vbX = vb.x, vbY = vb.y, vbW = vb.width, vbH = vb.height; // ==== Paths combineren (viewBox-space) ==== const unionPath_VB = new Path2D(); for (const el of pathEls) { const d = el.getAttribute('d') || ''; if (d) unionPath_VB.addPath(new Path2D(d)); } // ==== Offscreen context voor hit-test (CSS pixels, géén DPR) ==== const testCanvas = document.createElement('canvas'); const tctx = testCanvas.getContext('2d', { alpha: false }); // ==== Transformatie: viewBox -> canvas (CSS pixels) ==== let scale = 1, ox = 0, oy = 0; let unionPath_CSS = new Path2D(); function rebuildTransform(){ const sx = W / vbW, sy = H / vbH; scale = Math.min(sx, sy) * 0.9; // 90% fit const drawW = vbW * scale, drawH = vbH * scale; ox = (W - drawW) * 0.5 - vbX * scale; oy = (H - drawH) * 0.5 - vbY * scale; unionPath_CSS = new Path2D(); const m = new DOMMatrix([scale, 0, 0, scale, ox, oy]); unionPath_CSS.addPath(unionPath_VB, m); testCanvas.width = W; testCanvas.height = H; tctx.setTransform(1,0,0,1,0,0); } // ==== Particles ==== const baseTotal = parseInt(wrap.dataset.particles || '2000', 10); const isMobile = window.matchMedia('(max-width: 767px)').matches; const TOTAL = isMobile ? Math.round(baseTotal * 0.65) : baseTotal; const particles = []; const mouse = { x:0, y:0, inside:false, down:false }; function pointInShape(x, y){ return tctx.isPointInPath(unionPath_CSS, x, y, FILL_RULE); } function sampleFillPoints(count){ const pts = []; const maxTries = count * 15; let tries = 0; const minX = ox + vbX * scale; const minY = oy + vbY * scale; const maxX = minX + vbW * scale; const maxY = minY + vbH * scale; while (pts.length < count && tries < maxTries) { const rx = minX + Math.random() * (maxX - minX); const ry = minY + Math.random() * (maxY - minY); if (pointInShape(rx, ry)) pts.push({ x: rx, y: ry }); tries++; } if (pts.length < count && pts.length) { while (pts.length < count) { const b = pts[(Math.random()*pts.length)|0]; const nx = b.x + (Math.random()*6 - 3); const ny = b.y + (Math.random()*6 - 3); if (pointInShape(nx, ny)) pts.push({ x: nx, y: ny }); } } return pts; } let targets = []; function rebuildTargets(){ targets = sampleFillPoints(TOTAL); for (let i=0; i{ DPR = Math.max(1, Math.min(window.devicePixelRatio || 1, 2)); resize(); }, {passive:true}); wrap.addEventListener('pointermove', e=>{ const r = wrap.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; mouse.inside = true; }, {passive:true}); wrap.addEventListener('pointerleave', ()=>{ mouse.inside=false; }, {passive:true}); wrap.addEventListener('pointerdown', ()=>{ mouse.down=true; }); wrap.addEventListener('pointerup', ()=>{ mouse.down=false; }); requestAnimationFrame(loop); } function loop(){ ctx.clearRect(0,0,W,H); for (let i=0;i