Het Lab

ONZE COMPONENTEN
BIBLIOTHEEK.

65+ animaties, componenten en designrichtingen waarmee wij bouwen. Wijs aan wat je mooi vindt, wij maken het van jou.

Alles hier is met de hand gebouwd op onze eigen stack (GSAP, Lenis, WebGL). Geen template, geen plugin die je al op tien andere sites zag.

01Hero-stijlen 4

HERO WebGL gradient-mesh

NEDDEV^®

We build shit that works.

Live fragment-shader, vloeiende kleur, reageert op de cursor. Pure GLSL op OGL.

eigen / Codropseigen

/* WebGL gradient-mesh — eigen / Codrops (eigen) */
.herowebgl-root{position:absolute;inset:0;background:#0a0a0a}
.herowebgl-canvas{position:absolute;inset:0;width:100%;height:100%}
.herowebgl-copy{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-family:'Boldonse','Switzer',sans-serif;pointer-events:none}
.herowebgl-copy span{font-size:30px;letter-spacing:-.03em}.herowebgl-copy sup{font-size:.4em;color:#F5480F}
.herowebgl-copy p{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;margin:4px 0 0;opacity:.8}

// init(root):
var canvas=root.querySelector('.herowebgl-canvas');var renderer,gl;try{renderer=new OGL.Renderer({canvas:canvas,dpr:Math.min(devicePixelRatio,1.5),alpha:false});gl=renderer.gl;}catch(e){return;}
function resize(){var r=canvas.getBoundingClientRect();renderer.setSize(r.width,r.height);}
var vertex='attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.,1.);}';
var fragment='precision highp float;varying vec2 vUv;uniform float uTime;uniform vec2 uMouse;vec3 cA=vec3(.96,.28,.06);vec3 cB=vec3(.04,.04,.04);vec3 cC=vec3(.55,.12,.02);void main(){vec2 p=vUv;float t=uTime*.25;float w=sin(p.x*3.+t)*.5+cos(p.y*4.-t*1.3)*.5;float m=distance(p,uMouse);float g=smoothstep(.0,1.,p.y+w*.18+sin(m*6.-t)*.06);vec3 col=mix(cB,cA,g);col=mix(col,cC,smoothstep(.4,.0,m)*.5);gl_FragColor=vec4(col,1.);}';
var program=new OGL.Program(gl,{vertex:vertex,fragment:fragment,uniforms:{uTime:{value:0},uMouse:{value:[.5,.5]}}});var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:program});
resize();addEventListener('resize',resize);canvas.addEventListener('pointermove',function(e){var r=canvas.getBoundingClientRect();program.uniforms.uMouse.value=[(e.clientX-r.left)/r.width,1-(e.clientY-r.top)/r.height];});
var raf,vis=true;var io=new IntersectionObserver(function(es){es.forEach(function(en){vis=en.isIntersecting;});},{threshold:.05});io.observe(canvas);
(function loop(t){raf=requestAnimationFrame(loop);if(!vis)return;program.uniforms.uTime.value=t*.001;renderer.render({scene:mesh});})(0);

HERO Kinetische typografie

EASY TOUNDERSTAND.IMPOSSIBLETO IGNORE.

De kop is de hero. Regels masken omhoog bij in beeld. Nul beeld-payload.

eigeneigen

/* Kinetische typografie — eigen (eigen) */
.herokin-root{position:absolute;inset:0;display:flex;align-items:center;padding:0 22px;background:#fff}
.herokin-h{font-family:'Boldonse','Switzer',sans-serif;font-size:clamp(22px,4.4vw,40px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;color:#0a0a0a;margin:0}
.herokin-h .kl{display:block;overflow:hidden}.herokin-h .kl i{display:block;font-style:normal;transform:translateY(115%)}
.herokin-h .po{color:#F5480F}

// init(root):
if(!window.gsap)return;gsap.to(root.querySelectorAll('.kl i'),{yPercent:0,duration:.9,stagger:.08,ease:'power3.out',scrollTrigger:{trigger:root,start:'top 90%'}});

HERO Cursor Image Trail

MOVE
your cursor

Beelden volgen je cursor en faden weg, klassieke awwwards-hero.

Codropseigen

/* Cursor Image Trail — Codrops (eigen) */
.cit-stage{position:relative;width:100%;height:100%;background:#fff;overflow:hidden;cursor:none}
.cit-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cit-title{margin:0;font:800 clamp(34px,9vw,84px)/.92 'Boldonse','Switzer',sans-serif;letter-spacing:-.03em;color:#0a0a0a;text-align:center}
.cit-title span{color:#F5480F;font-weight:400;font-size:.42em;letter-spacing:0}
.cit-img{position:absolute;width:130px;height:90px;border-radius:8px;will-change:transform,opacity;pointer-events:none;background-size:cover;opacity:0;transform:translate(-50%,-50%) scale(.5)}
.cit-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#F5480F;mix-blend-mode:difference;transform:translate(-50%,-50%);pointer-events:none;z-index:5}

// init(root):
root.classList.add('cit-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var hues=[18,200,140,330,48,270];
var imgs=hues.map(function(h){return 'data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="130" height="90"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl('+h+',70%,55%)"/><stop offset="1" stop-color="hsl('+((h+40)%360)+',75%,40%)"/></linearGradient></defs><rect width="130" height="90" fill="url(#g)"/></svg>');});
var dot=document.createElement('div');dot.className='cit-dot';root.appendChild(dot);var i=0,last=0,lx=0,ly=0;
root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;dot.style.left=x+'px';dot.style.top=y+'px';if(reduce)return;var dist=Math.hypot(x-lx,y-ly);var now=performance.now();if(dist<48||now-last<60)return;last=now;lx=x;ly=y;var el=document.createElement('div');el.className='cit-img';el.style.backgroundImage='url("'+imgs[i++%imgs.length]+'")';el.style.left=x+'px';el.style.top=y+'px';var rot=(Math.random()*16-8);root.appendChild(el);
if(window.gsap){gsap.timeline({onComplete:function(){el.remove();}}).to(el,{opacity:1,scale:1,rotation:rot,duration:.35,ease:'power3.out'}).to(el,{opacity:0,scale:.85,y:'+=22',duration:.6,ease:'power2.in'},'+=0.25');}else{var an=el.animate([{opacity:0,transform:'translate(-50%,-50%) scale(.5)'},{opacity:1,transform:'translate(-50%,-50%) scale(1) rotate('+rot+'deg)',offset:.3},{opacity:0,transform:'translate(-50%,-40%) scale(.85)'}],{duration:1100,easing:'ease-out'});an.onfinish=function(){el.remove();};}});
root.addEventListener('pointerleave',function(){dot.style.opacity='0';});root.addEventListener('pointerenter',function(){dot.style.opacity='1';});

HERO Glitch Hero Text

SIGNAL//LOST

transmission interrupted

Datamosh/RGB-split glitch op de hero-titel, intensiveert bij hover.

eigeneigen

/* Glitch Hero Text — eigen (eigen) */
.gh-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gh-wrap{text-align:center}.gh-text{position:relative;margin:0;font:800 clamp(32px,8vw,76px)/1 'JetBrains Mono',monospace;letter-spacing:-.02em;color:#fff;text-transform:uppercase}
.gh-text::before,.gh-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;background:transparent;mix-blend-mode:screen}
.gh-text::before{color:#F5480F;animation:gh-a 1.4s infinite linear alternate-reverse;transform:translate(2px,0)}.gh-text::after{color:#27d3e0;animation:gh-b 1.7s infinite linear alternate-reverse;transform:translate(-2px,0)}
@keyframes gh-a{0%{clip-path:inset(8% 0 86% 0);transform:translate(-2px,0)}20%{clip-path:inset(40% 0 38% 0);transform:translate(2px,0)}40%{clip-path:inset(70% 0 12% 0);transform:translate(-3px,0)}60%{clip-path:inset(24% 0 60% 0);transform:translate(3px,0)}80%{clip-path:inset(55% 0 28% 0);transform:translate(-2px,0)}100%{clip-path:inset(12% 0 80% 0);transform:translate(2px,0)}}
@keyframes gh-b{0%{clip-path:inset(60% 0 22% 0);transform:translate(2px,0)}25%{clip-path:inset(12% 0 70% 0);transform:translate(-3px,0)}50%{clip-path:inset(78% 0 6% 0);transform:translate(2px,0)}75%{clip-path:inset(35% 0 45% 0);transform:translate(-2px,0)}100%{clip-path:inset(50% 0 30% 0);transform:translate(3px,0)}}
.gh-sub{margin:.9em 0 0;font:500 13px/1 'JetBrains Mono',monospace;letter-spacing:.5em;text-transform:uppercase;color:#888}
.gh-wrap.is-hot .gh-text::before{animation-duration:.35s}.gh-wrap.is-hot .gh-text::after{animation-duration:.3s}
@media(prefers-reduced-motion:reduce){.gh-text::before,.gh-text::after{animation:none;clip-path:inset(0 0 100% 0)}}

// init(root):
root.classList.add('gh-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var wrap=root.querySelector('.gh-wrap');if(reduce)return;
root.addEventListener('pointerenter',function(){wrap.classList.add('is-hot');});root.addEventListener('pointerleave',function(){wrap.classList.remove('is-hot');});
var timer;function burst(){wrap.classList.add('is-hot');setTimeout(function(){if(!root.matches(':hover'))wrap.classList.remove('is-hot');},260);timer=setTimeout(burst,1800+Math.random()*2600);}
new IntersectionObserver(function(es){if(es[0].isIntersecting)burst();else clearTimeout(timer);}).observe(root);

02Tekst-effecten 8

TEXT Split Text

Animeer je koppen

Karakters vliegen omhoog en faden in zodra in beeld. GSAP + ScrollTrigger.

React BitsMIT

/* Split Text — React Bits (MIT) */
.splittext-root{margin:0;font:700 clamp(1.4rem,4vw,2.6rem)/1.1 'Boldonse','Switzer',sans-serif;color:#fff;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .04em;text-transform:uppercase}
.splittext-root .splittext-char{display:inline-block;will-change:transform,opacity}
.splittext-root .splittext-space{width:.3em}

// init(root):
var text=root.textContent;root.textContent='';for(const ch of text){var span=document.createElement('span');if(ch===' '){span.className='splittext-space';}else{span.className='splittext-char';span.textContent=ch;}root.appendChild(span);}
var chars=root.querySelectorAll('.splittext-char');if(!window.gsap)return;gsap.set(chars,{yPercent:110,opacity:0});gsap.to(chars,{yPercent:0,opacity:1,duration:.6,ease:'back.out(1.7)',stagger:.03,scrollTrigger:{trigger:root,start:'top 90%',once:true}});

TEXT Blur Text

Helderheid woord voor woord

Woorden komen scherp uit een blur, woord voor woord.

React BitsMIT

/* Blur Text — React Bits (MIT) */
.blurtext-root{margin:0;font:600 clamp(1.3rem,3.5vw,2.2rem)/1.3 'Switzer',sans-serif;color:#fff;text-align:center}
.blurtext-root .blurtext-word{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(14px);animation:blurtext-in .7s forwards cubic-bezier(.2,.7,.3,1)}
@keyframes blurtext-in{to{opacity:1;filter:blur(0);transform:translateY(0)}}

// init(root):
var words=root.textContent.trim().split(/\s+/);root.textContent='';words.forEach(function(w,i){var s=document.createElement('span');s.className='blurtext-word';s.textContent=w;s.style.animationDelay=(i*0.12)+'s';root.append(s,document.createTextNode(' '));});

TEXT Shiny Text

Premium Shiny Text

Een lichtveeg trekt continu over de tekst. Pure CSS.

React BitsMIT

/* Shiny Text — React Bits (MIT) */
.shinytext-root{display:inline-block;font:700 clamp(1.4rem,4vw,2.4rem) 'Boldonse','Switzer',sans-serif;color:#5b5b5b;background:linear-gradient(110deg,#5b5b5b 40%,#fff 50%,#5b5b5b 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shinytext-move 3s linear infinite;text-transform:uppercase}
@keyframes shinytext-move{0%{background-position:180% 0}100%{background-position:-80% 0}}

TEXT Gradient Text

Gradient Magic

Stromende multi-kleur gradient geclipt op de tekst.

React BitsMIT

/* Gradient Text — React Bits (MIT) */
.gradienttext-root{display:inline-block;font:800 clamp(1.6rem,5vw,3rem) 'Boldonse','Switzer',sans-serif;background:linear-gradient(90deg,#F5480F,#ff9466,#F5480F,#ffb38c,#F5480F);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradienttext-flow 6s linear infinite;text-transform:uppercase}
@keyframes gradienttext-flow{to{background-position:300% 0}}

TEXT Count Up

Getal telt geanimeerd op naar de doelwaarde zodra in beeld.

React BitsMIT

/* Count Up — React Bits (MIT) */
.countup-root{font:800 clamp(2rem,6vw,3.4rem) 'JetBrains Mono',monospace;color:#fff;font-variant-numeric:tabular-nums}

// init(root):
var target=parseFloat(root.dataset.to||'100');var dur=(parseFloat(root.dataset.dur||'2'))*1000;var dec=(root.dataset.to||'').includes('.')?root.dataset.to.split('.')[1].length:0;var started=false;
function run(){var t0=performance.now();(function tick(now){var p=Math.min((now-t0)/dur,1);var e=1-Math.pow(1-p,3);root.textContent=(target*e).toLocaleString('nl-NL',{minimumFractionDigits:dec,maximumFractionDigits:dec});if(p<1)requestAnimationFrame(tick);})(performance.now());}
var io=new IntersectionObserver(function(es){if(es[0].isIntersecting&&!started){started=true;run();io.disconnect();}},{threshold:.4});io.observe(root);

TEXT Scramble Text

Hover om te decoderen

Hover en de tekst flikkert door random glyphs naar het echte woord.

React BitsMIT

/* Scramble Text — React Bits (MIT) */
.scrambletext-root{font:700 clamp(1.2rem,3.5vw,2rem) 'JetBrains Mono',monospace;color:#F5480F;cursor:pointer;letter-spacing:.02em}

// init(root):
var real=root.dataset.text||root.textContent;var glyphs='!<>-_\\/[]{}=+*^?#________';var raf,frame=0;
function scramble(){cancelAnimationFrame(raf);frame=0;var queue=[].map.call(real,function(ch,i){return{ch:ch,start:Math.floor(Math.random()*12),end:Math.floor(Math.random()*12)+18+i};});
(function tick(){var out='',done=0;queue.forEach(function(q){if(frame>=q.end){out+=q.ch;done++;}else if(frame>=q.start){out+=glyphs[Math.floor(Math.random()*glyphs.length)];}else{out+=q.ch===' '?' ':'';}});root.textContent=out;frame++;if(done<queue.length)raf=requestAnimationFrame(tick);else root.textContent=real;})();}
root.addEventListener('mouseenter',scramble);

TEXT Rotating Text

We maken het

Het laatste woord roteert door een lijst met slide + blur.

React BitsMIT

/* Rotating Text — React Bits (MIT) */
.rotatingtext-root{margin:0;font:700 clamp(1.4rem,4vw,2.4rem) 'Switzer',sans-serif;color:#fff}
.rotatingtext-slot{display:inline-block;position:relative;color:#F5480F;min-width:4ch;text-align:left}
.rotatingtext-slot .rotatingtext-word{display:inline-block;will-change:transform,opacity}
.rotatingtext-slot .rotatingtext-in{animation:rotatingtext-in .5s forwards cubic-bezier(.2,.7,.3,1)}
.rotatingtext-slot .rotatingtext-out{position:absolute;left:0;top:0;animation:rotatingtext-out .5s forwards cubic-bezier(.5,0,.8,.3)}
@keyframes rotatingtext-in{from{opacity:0;transform:translateY(60%);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes rotatingtext-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60%);filter:blur(6px)}}

// init(root):
var words=(root.dataset.words||'').split(',').map(function(s){return s.trim();}).filter(Boolean);var slot=root.querySelector('.rotatingtext-slot');var i=0;
function make(t,c){var s=document.createElement('span');s.className='rotatingtext-word '+c;s.textContent=t;return s;}
slot.appendChild(make(words[0],'rotatingtext-in'));
setInterval(function(){var cur=slot.querySelector('.rotatingtext-word');cur.className='rotatingtext-word rotatingtext-out';cur.addEventListener('animationend',function(){cur.remove();},{once:true});i=(i+1)%words.length;slot.appendChild(make(words[i],'rotatingtext-in'));},2200);

TEXT True Focus

Eén woord is scherp en omkaderd; het frame schuift tussen woorden.

React BitsMIT

/* True Focus — React Bits (MIT) */
.truefocus-root{position:relative;display:flex;gap:.5em;flex-wrap:wrap;justify-content:center;align-items:center;font:800 clamp(1.4rem,4vw,2.4rem) 'Boldonse','Switzer',sans-serif;color:#fff;text-transform:uppercase}
.truefocus-root .truefocus-word{filter:blur(6px);opacity:.5;transition:filter .4s,opacity .4s}
.truefocus-root .truefocus-word.is-active{filter:blur(0);opacity:1}
.truefocus-frame{position:absolute;pointer-events:none;left:0;top:0;width:0;height:0;transition:transform .5s cubic-bezier(.2,.7,.3,1),width .5s,height .5s}
.truefocus-c{position:absolute;width:14px;height:14px;border:2px solid #F5480F}
.truefocus-c.tl{left:-6px;top:-6px;border-right:0;border-bottom:0}.truefocus-c.tr{right:-6px;top:-6px;border-left:0;border-bottom:0}
.truefocus-c.bl{left:-6px;bottom:-6px;border-right:0;border-top:0}.truefocus-c.br{right:-6px;bottom:-6px;border-left:0;border-top:0}

// init(root):
var frame=root.querySelector('.truefocus-frame');var words=(root.dataset.words||'').split(',').map(function(s){return s.trim();});words.forEach(function(w){var s=document.createElement('span');s.className='truefocus-word';s.textContent=w;root.appendChild(s);});
var spans=root.querySelectorAll('.truefocus-word');var i=0;
function focus(idx){spans.forEach(function(s){s.classList.remove('is-active');});var el=spans[idx];el.classList.add('is-active');var r=el.getBoundingClientRect(),pr=root.getBoundingClientRect();frame.style.transform='translate('+(r.left-pr.left)+'px,'+(r.top-pr.top)+'px)';frame.style.width=r.width+'px';frame.style.height=r.height+'px';}
focus(0);setInterval(function(){i=(i+1)%spans.length;focus(i);},1600);

03Scroll-animaties 12

SCROLL Gordijn-reveal

scroll ↓

Twee balken openen als een gordijn en onthullen fullscreen media.

eigeneigen

/* Gordijn-reveal — eigen (eigen) */
.scurt-root{position:absolute;inset:0;overflow:hidden}
.scurt-media{position:absolute;inset:0;background:linear-gradient(135deg,#222,#F5480F);transform-origin:center}
.scurt-c{position:absolute;left:0;right:0;height:50%;background:#F5480F;z-index:3}.scurt-top{top:0}.scurt-bot{bottom:0}
.scurt-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:5;font:10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#fff;text-transform:uppercase;opacity:.7}

// init(root):
if(!window.gsap)return;gsap.timeline({scrollTrigger:{trigger:root,start:'top 90%',end:'bottom 40%',scrub:1}}).to(root.querySelector('.scurt-top'),{yPercent:-100},0).to(root.querySelector('.scurt-bot'),{yPercent:100},0).from(root.querySelector('.scurt-media'),{scale:.45,borderRadius:'24px'},0);

SCROLL Pinned horizontale scroll

Sectie pint vast, verticaal scrollen schuift kaarten zijwaarts.

eigen / Codropseigen

/* Pinned horizontale scroll — eigen / Codrops (eigen) */
.sfilm-root{position:absolute;inset:0;overflow:hidden;background:#0a0a0a}
.sfilm-track{position:absolute;inset:0;display:flex;gap:10px;padding:14px;will-change:transform}
.sfilm-card{flex:0 0 60%;display:flex;align-items:flex-end;padding:14px;color:#fff;font:34px 'Boldonse','Switzer',sans-serif;background:#1a1a1a}
.sfilm-card:nth-child(1){background:#1a1a1a}.sfilm-card:nth-child(2){background:#F5480F}.sfilm-card:nth-child(3){background:#2a2a2a}.sfilm-card:nth-child(4){background:#F5480F;color:#0a0a0a}
.sfilm-bar{position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:rgba(255,255,255,.25)}.sfilm-bar i{display:block;height:100%;width:0;background:#fff}

// init(root):
if(!window.gsap)return;var track=root.querySelector('.sfilm-track'),bar=root.querySelector('.sfilm-bar i');gsap.registerPlugin(ScrollTrigger);ScrollTrigger.create({trigger:root,start:'top 90%',end:'bottom 30%',scrub:1,onUpdate:function(s){var max=track.scrollWidth-root.clientWidth;gsap.set(track,{x:-s.progress*max});if(bar)bar.style.width=(s.progress*100)+'%';}});

SCROLL Sticky-stack kaarten

Kaarten pinnen en schalen terug terwijl de volgende eroverheen schuift.

eigen / Codropseigen

/* Sticky-stack kaarten — eigen / Codrops (eigen) */
.sstack-root{position:absolute;inset:0;overflow:hidden;background:#0e0e14}
.sstack-card{position:absolute;inset:14px;display:flex;align-items:center;justify-content:center;font:60px 'Boldonse','Switzer',sans-serif;color:#fff;border-radius:10px;will-change:transform}
.sstack-card[style*="--i:0"]{background:#1a1a1a;z-index:1}.sstack-card[style*="--i:1"]{background:#F5480F;z-index:2;transform:translateY(40%)}.sstack-card[style*="--i:2"]{background:#2a2a2a;z-index:3;transform:translateY(80%)}

// init(root):
if(!window.gsap)return;root.querySelectorAll('.sstack-card').forEach(function(c){gsap.to(c,{yPercent:0,ease:'none',scrollTrigger:{trigger:root,start:'top 85%',end:'bottom 45%',scrub:1}});});

SCROLL Woord-voor-woord reveal

We ontwerpen en bouwen websites die mensen laten stoppen met scrollen en laten beginnen met opletten.

Woorden gaan van dof naar fel, gekoppeld aan scrollpositie.

eigen / Codropseigen

/* Woord-voor-woord reveal — eigen / Codrops (eigen) */
.stext-root{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;background:#101015}
.stext-words{margin:0;padding:22px;font:clamp(15px,2.4vw,22px)/1.35 'Boldonse','Switzer',sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.stext-words .w{color:rgba(255,255,255,.16);transition:color .1s}

// init(root):
var p=root.querySelector('.stext-words');p.innerHTML=p.textContent.trim().split(' ').map(function(w){return '<span class="w">'+w+'</span>';}).join(' ');if(!window.gsap)return;gsap.to(p.querySelectorAll('.w'),{color:'#fff',stagger:.1,ease:'none',scrollTrigger:{trigger:root,start:'top 85%',end:'bottom 55%',scrub:true}});

SCROLL Lijn-mask reveal

We bouwen interfacesdie bewegen metintentie.

Regels van een kop vegen in via clip-path, één voor één.

Codropseigen

/* Lijn-mask reveal — Codrops (eigen) */
.slm-root{position:absolute;inset:0;display:flex;align-items:center;padding:0 22px;background:#0d0d12}
.slm-h{margin:0;font:800 clamp(20px,4.5vw,38px)/1.05 'Boldonse','Switzer',sans-serif;color:#f6f6fb;text-transform:uppercase}
.slm-line{display:block;clip-path:inset(0 100% 0 0);will-change:clip-path}

// init(root):
var lines=root.querySelectorAll('.slm-line');if(!window.gsap){lines.forEach(function(l){l.style.clipPath='inset(0 0 0 0)';});return;}gsap.to(lines,{clipPath:'inset(0 0% 0 0)',ease:'power3.out',stagger:.25,scrollTrigger:{trigger:root,start:'top 80%',end:'center center',scrub:.8}});

SCROLL Parallax-lagen

DIEPTE

Lagen bewegen op verschillende snelheden voor diepte bij scrollen.

eigen / Codropseigen

/* Parallax-lagen — eigen / Codrops (eigen) */
.splx-root{position:absolute;inset:0;overflow:hidden;background:#0a0e1a}
.splx-layer{position:absolute;left:0;width:100%;will-change:transform}
.splx-sky{inset:0;background:radial-gradient(120% 80% at 50% -10%,#3a2516,#0a0e1a 70%)}
.splx-mid{bottom:0;height:55%;background:linear-gradient(#5a2410,#0c1226);clip-path:polygon(0 35%,20% 20%,45% 40%,70% 18%,100% 38%,100% 100%,0 100%)}
.splx-fore{bottom:0;height:32%;background:#06080f;clip-path:polygon(0 50%,30% 30%,60% 55%,100% 28%,100% 100%,0 100%)}
.splx-title{position:absolute;top:24%;left:0;width:100%;text-align:center;margin:0;font:900 clamp(32px,12vw,80px) 'Boldonse','Switzer',sans-serif;color:#fff;will-change:transform}

// init(root):
if(!window.gsap)return;root.querySelectorAll('[data-depth]').forEach(function(el){var d=parseFloat(el.dataset.depth);gsap.fromTo(el,{yPercent:-d*22},{yPercent:d*22,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});});

SCROLL Scroll-Driven Marquee

WESTLAND • DESIGN • BUILD • SHIP • WESTLAND • DESIGN • BUILD • SHIP •

NEDDEV • MOTION • CRAFT • NEDDEV • MOTION • CRAFT •

Twee tekstregels schuiven tegengesteld; snelheid en richting door scroll aangestuurd.

Osmoeigen

/* Scroll-Driven Marquee — Osmo (eigen) */
.stm-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;background:#0a0a0a;overflow:hidden}
.stm-row{display:flex;white-space:nowrap;font-family:'Boldonse','Switzer',sans-serif;font-weight:900;font-size:clamp(28px,8vw,64px);letter-spacing:-.02em;will-change:transform}
.stm-a span{color:#fff}.stm-b span{color:transparent;-webkit-text-stroke:1.5px #F5480F}

// init(root):
var a=root.querySelector('.stm-a'),b=root.querySelector('.stm-b');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;var xa=0,xb=0,base=0.6;
function loop(extra){xa-=base+extra;xb+=base+extra;var wa=a.firstElementChild.offsetWidth,wb=b.firstElementChild.offsetWidth;if(xa<=-wa)xa+=wa;if(xa>0)xa-=wa;if(xb>=wb)xb-=wb;if(xb<0)xb+=wb;a.style.transform='translateX('+xa+'px)';b.style.transform='translateX('+xb+'px)';}
if(rm){loop(0);return;}
if(g&&g.ticker){var sk=0;g.ticker.add(function(){loop(sk*8);sk*=.9;});if(window.ScrollTrigger)window.ScrollTrigger.create({trigger:root,start:'top bottom',end:'bottom top',scrub:true,onUpdate:function(self){sk=self.getVelocity?Math.min(Math.abs(self.getVelocity())/2000,4):1;}});}else{(function r(){loop(0);requestAnimationFrame(r);})();}

SCROLL Scramble on Scroll

DECODING

THE FUTURE

OF MOTION

Koppen decoderen zich uit ruistekens terwijl je de tile in beeld scrolt.

Codropseigen

/* Scramble on Scroll — Codrops (eigen) */
.tss-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.05em;padding:0 8%;background:#0a0a0a;font-family:'JetBrains Mono',monospace}
.tss-line{color:#fff;font-weight:800;font-size:clamp(22px,6.5vw,52px);letter-spacing:.02em;line-height:1.05}.tss-line span.on{color:#F5480F}

// init(root):
var lines=root.querySelectorAll('.tss-line');var chars='ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&@';var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function scramble(el,p){var t=el.dataset.t;var out='';for(var i=0;i<t.length;i++){var rev=i/t.length;if(p>=rev){out+='<span class=on>'+t[i]+'</span>';}else if(t[i]===' ')out+=' ';else out+=chars[Math.floor(Math.random()*chars.length)];}el.innerHTML=out;}
if(rm){lines.forEach(function(l){l.textContent=l.dataset.t;});return;}
function run(p){lines.forEach(function(l){scramble(l,p);});}
if(window.ScrollTrigger&&window.gsap){window.ScrollTrigger.create({trigger:root,start:'top 85%',end:'bottom 40%',scrub:true,onUpdate:function(self){run(self.progress);}});}else{var i=0;var iv=setInterval(function(){i+=.04;run(Math.min(i,1));if(i>=1)clearInterval(iv);},40);}

SCROLL Scroll Progress Ring

Cirkelvormige SVG-voortgangsring met live percentage, gevuld door scrollpositie.

eigeneigen

/* Scroll Progress Ring — eigen (eigen) */
.spr-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;font-family:'Boldonse','Switzer',sans-serif}
.spr-svg{width:min(46%,180px);height:auto;transform:rotate(-90deg)}.spr-bg{fill:none;stroke:#eee;stroke-width:8}
.spr-fg{fill:none;stroke:#F5480F;stroke-width:8;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7}
.spr-num{position:absolute;font-weight:900;font-size:clamp(22px,5vw,40px);color:#0a0a0a;letter-spacing:-.02em}

// init(root):
var fg=root.querySelector('.spr-fg');var num=root.querySelector('.spr-num');var C=326.7;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function set(p){fg.style.strokeDashoffset=C*(1-p);num.textContent=Math.round(p*100)+'%';}
if(rm){set(1);return;}
if(window.ScrollTrigger){window.ScrollTrigger.create({trigger:root,start:'top 90%',end:'bottom 30%',scrub:true,onUpdate:function(self){set(self.progress);}});}else{var i=0;var iv=setInterval(function(){i+=.02;set(Math.min(i,1));if(i>=1)clearInterval(iv);},20);}

SCROLL Staggered Grid Reveal

Beeldraster dat per cel met mask-clip en diagonale stagger in beeld onthult bij scroll.

Codropseigen

/* Staggered Grid Reveal — Codrops (eigen) */
.sgr-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:8px;padding:7%;background:#fff}
.sgr-cell{border-radius:8px;clip-path:inset(0 0 100% 0);background:#0a0a0a}.sgr-cell:nth-child(3n+1){background:#F5480F}.sgr-cell:nth-child(3n){background:#1a1a1a}

// init(root):
var cells=root.querySelectorAll('.sgr-cell');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
if(!g||rm){cells.forEach(function(c){c.style.clipPath='inset(0 0 0% 0)';});return;}
var cols=4;cells.forEach(function(c,i){c._d=(Math.floor(i/cols)+(i%cols))*0.08;});
if(window.ScrollTrigger){window.ScrollTrigger.create({trigger:root,start:'top 78%',once:true,onEnter:function(){cells.forEach(function(c){g.to(c,{clipPath:'inset(0 0 0% 0)',duration:.7,ease:'power3.out',delay:c._d});});}});}else{cells.forEach(function(c){g.to(c,{clipPath:'inset(0 0 0% 0)',duration:.7,ease:'power3.out',delay:c._d});});}

SCROLL Perspective Tunnel

∞

Concentrische ringen vliegen naar je toe terwijl je scrollt.

eigeneigen

/* Perspective Tunnel — eigen (eigen) */
.pt-stage{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#161616,#0a0a0a 70%);overflow:hidden;perspective:600px}
.pt-tunnel{position:absolute;inset:0;transform-style:preserve-3d;display:grid;place-items:center}
.pt-ring{position:absolute;width:60%;aspect-ratio:1;border:2px solid rgba(245,72,15,.5);border-radius:50%;will-change:transform,opacity}.pt-ring:nth-child(even){border-color:rgba(255,255,255,.22)}
.pt-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:300 clamp(40px,10vw,90px)/1 'Switzer',sans-serif;color:#F5480F;pointer-events:none}

// init(root):
root.classList.add('pt-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var tun=root.querySelector('.pt-tunnel');var COUNT=8,rings=[];
for(var i=0;i<COUNT;i++){var r=document.createElement('div');r.className='pt-ring';tun.appendChild(r);rings.push(r);}
function place(p){rings.forEach(function(r,i){var z=((i/COUNT)+p)%1;var tz=-700+z*900;var op=z<.12?z/.12:(z>.85?(1-z)/.15:1);r.style.transform='translateZ('+tz+'px) scale('+(.4+z*1.1)+')';r.style.opacity=op.toFixed(2);});}
place(0);
if(window.gsap&&window.ScrollTrigger&&!reduce){gsap.registerPlugin(ScrollTrigger);var o={p:0};gsap.to(o,{p:1,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true,onUpdate:function(){place(o.p);}}});}else if(!reduce){var p=0;(function loop(){p=(p+.0025)%1;place(p);requestAnimationFrame(loop);})();}

SCROLL Scroll Image Marquee

SCROLL

Rij beelden schuift horizontaal aangedreven door scroll-positie.

eigeneigen

/* Scroll Image Marquee — eigen (eigen) */
.sim-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:14px}
.sim-row{display:flex;gap:14px;width:max-content;will-change:transform}.sim-row>span{display:block;width:150px;height:96px;border-radius:10px;flex:0 0 auto;background-size:cover}
.sim-b{align-self:flex-end}.sim-label{position:absolute;top:12px;left:14px;font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.4em;color:#F5480F}

// init(root):
root.classList.add('sim-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
function mk(h){return 'url("data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="150" height="96"><rect width="150" height="96" fill="hsl('+h+',16%,14%)"/><rect x="10" y="10" width="130" height="76" rx="6" fill="none" stroke="hsl('+h+',70%,52%)" stroke-width="2"/></svg>')+'")';}
var a=root.querySelector('.sim-a'),b=root.querySelector('.sim-b');for(var k=0;k<10;k++){var sa=document.createElement('span');sa.style.backgroundImage=mk((k*36)%360);a.appendChild(sa);var sb=document.createElement('span');sb.style.backgroundImage=mk((k*36+180)%360);b.appendChild(sb);}
if(window.gsap&&window.ScrollTrigger&&!reduce){gsap.registerPlugin(ScrollTrigger);gsap.fromTo(a,{xPercent:0},{xPercent:-38,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});gsap.fromTo(b,{xPercent:-38},{xPercent:0,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});}else if(!reduce){var x=0;(function loop(){x=(x-.4)%200;a.style.transform='translateX('+x+'px)';b.style.transform='translateX('+(-200-x)+'px)';requestAnimationFrame(loop);})();}

04Componenten 33

COMPONENT Border Beam

Border Beam

Een gloeiende punt cirkelt langs de rand.

Een lichtstraal reist rond de rand van het element.

Magic UIMIT

/* Border Beam — Magic UI (MIT) */
.borderbeam-card{position:relative;width:280px;height:150px;border-radius:16px;background:#0b0b12;border:1px solid #23232e;overflow:hidden;display:flex;align-items:center;justify-content:center}
.borderbeam-content{padding:20px;color:#e7e7ef;text-align:center;z-index:1}.borderbeam-content h3{margin:0 0 6px;font:600 18px 'Switzer',sans-serif}.borderbeam-content p{margin:0;font:13px 'Switzer',sans-serif;color:#9b9ba8}
.borderbeam-beam{position:absolute;inset:-1px;background:conic-gradient(from 0deg,transparent 0 75%,#F5480F 85%,#ff9466 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:16px;animation:borderbeam-spin 5s linear infinite}
@keyframes borderbeam-spin{to{transform:rotate(1turn)}}

COMPONENT Shimmer Button

Knop met een glans die continu langs de binnenrand veegt.

Magic UIMIT

/* Shimmer Button — Magic UI (MIT) */
.shimmerbtn-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10}
.shimmerbtn{position:relative;isolation:isolate;cursor:pointer;padding:14px 28px;border:none;border-radius:999px;background:#0a0a0a;color:#fff;font:600 15px 'Switzer',sans-serif;overflow:hidden;transition:transform .2s}
.shimmerbtn:active{transform:translateY(1px)}
.shimmerbtn-spark{position:absolute;inset:0;overflow:visible;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:999px}
.shimmerbtn-spark-inner{position:absolute;inset:0;width:100%;height:100%;background:conic-gradient(from 0deg,transparent 0 340deg,#fff 360deg);animation:shimmerbtn-spin 3s linear infinite}
.shimmerbtn-label{position:relative;z-index:1}
.shimmerbtn-hl{position:absolute;inset:0;border-radius:999px;z-index:1;pointer-events:none;box-shadow:inset 0 -8px 10px rgba(255,255,255,.12)}
@keyframes shimmerbtn-spin{to{transform:rotate(1turn)}}

COMPONENT Marquee

SnelVanillaAnimatedEigen

Oneindig scrollende rij die pauzeert bij hover.

Magic UIMIT

/* Marquee — Magic UI (MIT) */
.mqc-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10}
.mqc{display:flex;overflow:hidden;gap:var(--gap,1rem);max-width:340px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mqc-track{display:flex;gap:var(--gap,1rem);flex-shrink:0;min-width:100%;animation:mqc-scroll var(--duration,18s) linear infinite}
.mqc:hover .mqc-track{animation-play-state:paused}
.mqc-item{white-space:nowrap;padding:10px 16px;border-radius:10px;background:#15151d;color:#dcdce6;border:1px solid #26262f;font:500 14px 'Switzer',sans-serif}
@keyframes mqc-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap,1rem)))}}

COMPONENT Meteors

Meteors

Geanimeerde meteoor-strepen vallen diagonaal over het paneel.

Magic UIMIT

/* Meteors — Magic UI (MIT) */
.meteors-root{position:absolute;inset:0;border-radius:0;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#11111b,#05050a);display:flex;align-items:center;justify-content:center}
.meteors-label{color:#cfcfe0;font:600 18px 'Switzer',sans-serif;z-index:1}
.meteors-meteor{position:absolute;top:-10%;left:50%;width:2px;height:2px;border-radius:50%;background:#ffd2bf;box-shadow:0 0 6px 1px rgba(245,72,15,.6);transform:rotate(215deg);animation:meteors-fall linear infinite}
.meteors-meteor::before{content:"";position:absolute;top:50%;left:0;width:60px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,#ff9466,transparent)}
@keyframes meteors-fall{0%{transform:rotate(215deg) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(215deg) translateX(420px);opacity:0}}

// init(root):
for(var i=0;i<14;i++){var m=document.createElement('span');m.className='meteors-meteor';m.style.left=Math.floor(Math.random()*100)+'%';m.style.top=Math.floor(Math.random()*40-20)+'%';m.style.animationDelay=(Math.random()*4).toFixed(2)+'s';m.style.animationDuration=(3+Math.random()*5).toFixed(2)+'s';root.appendChild(m);}

COMPONENT Ripple

Ripple

Concentrische ringen die vanuit het midden uitdijen.

Magic UIMIT

/* Ripple — Magic UI (MIT) */
.ripple-root{position:absolute;inset:0;overflow:hidden;background:#06060c;display:flex;align-items:center;justify-content:center}
.ripple-content{color:#e7e7ef;font:600 18px 'Switzer',sans-serif;z-index:1}
.ripple-circle{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(245,72,15,.35);background:rgba(245,72,15,.04);transform:translate(-50%,-50%) scale(1);animation:ripple-pulse 3s ease-out infinite}
@keyframes ripple-pulse{0%{opacity:.7}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

// init(root):
for(var i=0;i<6;i++){var c=document.createElement('div');c.className='ripple-circle';var size=60+i*36;c.style.width=c.style.height=size+'px';c.style.animationDelay=(i*0.18)+'s';c.style.opacity=(0.7-i*0.1).toFixed(2);c.style.borderColor='rgba(245,72,15,'+(0.4-i*0.05).toFixed(2)+')';root.appendChild(c);}

COMPONENT Dot Pattern

Dot Pattern

Tileable dot-grid achtergrond met radiale spotlight-mask.

Magic UIMIT

/* Dot Pattern — Magic UI (MIT) */
.dotpattern-root{position:absolute;inset:0;overflow:hidden;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.dotpattern-root::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(150,150,180,.45) 1px,transparent 1px);background-size:16px 16px;-webkit-mask:radial-gradient(220px 140px at 50% 50%,#000,transparent);mask:radial-gradient(220px 140px at 50% 50%,#000,transparent)}
.dotpattern-label{position:relative;z-index:1;color:#dcdce6;font:600 18px 'Switzer',sans-serif}

COMPONENT Orbiting Circles

⚡

⚛

🌟

💎

🔥

Iconen draaien op twee radii rond een centrum, één omgekeerd.

Magic UIMIT

/* Orbiting Circles — Magic UI (MIT) */
.orbit-root{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#0e0e18,#05050a);display:flex;align-items:center;justify-content:center}
.orbit-center{font-size:28px;z-index:2}
.orbit-path{position:absolute;top:50%;left:50%;width:0;height:0;animation:orbit-spin var(--dur) linear infinite;animation-delay:var(--delay,0s)}
.orbit-path.orbit-reverse{animation-direction:reverse}
.orbit-path::before{content:"";position:absolute;top:50%;left:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(140,140,180,.18)}
.orbit-item{position:absolute;top:0;left:var(--r);transform:translate(-50%,-50%);font-size:18px;animation:orbit-counter var(--dur) linear infinite reverse;animation-delay:var(--delay,0s)}
.orbit-reverse .orbit-item{animation-direction:normal}
@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes orbit-counter{to{transform:translate(-50%,-50%) rotate(1turn)}}

COMPONENT Word Rotate

Bouw sneller

Eén slot cyclet door woorden met een verticale flip.

Magic UIMIT

/* Word Rotate — Magic UI (MIT) */
.wrot-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10;font:800 24px 'Boldonse','Switzer',sans-serif;color:#fff}
.wrot{display:inline-block;color:#F5480F;will-change:transform,opacity}
.wrot.is-out{animation:wrot-out .4s ease forwards}.wrot.is-in{animation:wrot-in .4s ease forwards}
@keyframes wrot-out{to{transform:translateY(-100%);opacity:0}}@keyframes wrot-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

// init(root):
var el=root.querySelector('.wrot');var words=(el.dataset.words||'').split(',').map(function(s){return s.trim();}).filter(Boolean);if(words.length<2)return;var i=0;
setInterval(function(){el.classList.add('is-out');el.addEventListener('animationend',function done(){el.removeEventListener('animationend',done);i=(i+1)%words.length;el.textContent=words[i];el.classList.remove('is-out');el.classList.add('is-in');el.addEventListener('animationend',function(){el.classList.remove('is-in');},{once:true});},{once:true});},2200);

COMPONENT Animated List

Notificaties poppen van onder in en stapelen, één voor één.

Magic UIMIT

/* Animated List — Magic UI (MIT) */
.anl-root{position:absolute;inset:0;background:#0a0a10;padding:14px;overflow:hidden}
.anl-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.anl-item{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#15151d;border:1px solid #26262f;color:#e7e7ef;transform-origin:top;animation:anl-pop .45s cubic-bezier(.22,1,.36,1) both}
.anl-item b{font:600 14px 'Switzer',sans-serif}.anl-item p{margin:2px 0 0;font:12px 'Switzer',sans-serif;color:#9b9ba8}.anl-ico{font-size:20px}
@keyframes anl-pop{from{transform:translateY(120%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

// init(root):
var stack=root.querySelector('.anl-stack');var data=[['\uD83D\uDCAC','Nieuw bericht','Iemand reageerde'],['\u2B50','Nieuwe ster','Repo gestard'],['\uD83D\uDCB8','Betaling','\u20AC129 ontvangen'],['\uD83D\uDE80','Deploy','Build geslaagd']];var i=0;
function add(){var d=data[i%data.length];var li=document.createElement('li');li.className='anl-item';li.innerHTML='<span class="anl-ico">'+d[0]+'</span><div><b>'+d[1]+'</b><p>'+d[2]+'</p></div>';stack.prepend(li);while(stack.children.length>4)stack.lastElementChild.remove();i++;}
add();setInterval(add,1800);

COMPONENT Confetti

Canvas confetti-burst bij klik. Eigen physics, geen library.

Magic UIMIT

/* Confetti — Magic UI (MIT) */
.conf-root{position:absolute;inset:0;overflow:hidden;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.conf-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.conf-btn{position:relative;z-index:1;cursor:pointer;border:none;border-radius:999px;padding:12px 22px;font:600 15px 'Switzer',sans-serif;color:#0a0a10;background:#F5480F;transition:transform .1s}
.conf-btn:active{transform:scale(.96)}

// init(root):
var canvas=root.querySelector('.conf-canvas');var btn=root.querySelector('.conf-btn');var ctx=canvas.getContext('2d');var colors=['#F5480F','#ff9466','#ffd2bf','#fff','#1dd1a1'];var parts=[],raf=null;
function resize(){canvas.width=root.clientWidth;canvas.height=root.clientHeight;}resize();new ResizeObserver(resize).observe(root);
function burst(){var cx=canvas.width/2,cy=canvas.height/2;for(var i=0;i<120;i++){var a=Math.random()*Math.PI*2,sp=2+Math.random()*6;parts.push({x:cx,y:cy,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp-2,size:4+Math.random()*4,rot:Math.random()*6.28,vr:(Math.random()-.5)*.3,color:colors[(Math.random()*colors.length)|0],life:1});}if(!raf)loop();}
function loop(){ctx.clearRect(0,0,canvas.width,canvas.height);parts.forEach(function(p){p.vy+=0.12;p.x+=p.vx;p.y+=p.vy;p.vx*=.99;p.rot+=p.vr;p.life-=.012;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.rot);ctx.globalAlpha=Math.max(0,p.life);ctx.fillStyle=p.color;ctx.fillRect(-p.size/2,-p.size/2,p.size,p.size*0.6);ctx.restore();});parts=parts.filter(function(p){return p.life>0&&p.y<canvas.height+20;});if(parts.length){raf=requestAnimationFrame(loop);}else{raf=null;ctx.clearRect(0,0,canvas.width,canvas.height);}}
btn.addEventListener('click',burst);

COMPONENT Dynamic Island

🎵 Now playing

🎧

Midnight DriveNeon Waves

Apple-stijl pill die morpht tussen idle en expanded.

Cult UIMIT

/* Dynamic Island — Cult UI (MIT) */
.isl-root{position:absolute;inset:0;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.isl{background:#000;color:#fff;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;width:140px;height:34px;padding:0 14px;transition:width .5s cubic-bezier(.34,1.56,.64,1),height .5s cubic-bezier(.34,1.56,.64,1),border-radius .5s;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.isl[data-state="expanded"]{width:240px;height:64px;border-radius:24px}
.isl-idle{display:flex;align-items:center;gap:8px;font:600 13px 'Switzer',sans-serif;white-space:nowrap}
.isl-exp{display:none;align-items:center;gap:12px;width:100%}
.isl[data-state="expanded"] .isl-idle{display:none}.isl[data-state="expanded"] .isl-exp{display:flex}
.isl-art{font-size:26px}.isl-meta b{display:block;font:600 13px 'Switzer',sans-serif}.isl-meta small{color:#9b9ba8;font:11px 'Switzer',sans-serif}
.isl-eq{margin-left:auto;display:flex;gap:2px;align-items:flex-end;height:18px}.isl-eq i{width:3px;background:#F5480F;border-radius:2px;animation:isl-eq .9s ease-in-out infinite}
.isl-eq i:nth-child(2){animation-delay:.2s}.isl-eq i:nth-child(3){animation-delay:.4s}.isl-eq i:nth-child(4){animation-delay:.1s}
@keyframes isl-eq{0%,100%{height:5px}50%{height:16px}}

// init(root):
var isl=root.querySelector('.isl');var exp=false;setInterval(function(){exp=!exp;isl.dataset.state=exp?'expanded':'idle';},2600);

COMPONENT Texture Card

Texture Card

Gelaagde randen met een subtiele noise-grain voor diepte.

Gelaagde kaart met fijne noise-grain overlay en gradient-rand.

Cult UIMIT

/* Texture Card — Cult UI (MIT) */
.texcard-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06060a}
.texcard{width:280px;border-radius:20px;padding:1px;background:linear-gradient(145deg,#2a2a36,#0e0e16 40%,#2a2a36);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.texcard-inner{position:relative;border-radius:19px;padding:22px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 40%),#0c0c14;color:#e7e7ef}
.texcard-inner::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
.texcard-inner h3{margin:0 0 8px;font:700 18px 'Switzer',sans-serif;position:relative}.texcard-inner p{margin:0;font:13px/1.5 'Switzer',sans-serif;color:#9b9ba8;position:relative}

COMPONENT Direction-Aware Hover

Direction AwareKomt binnen vanaf jouw rand

Overlay schuift in vanaf de rand waar de cursor binnenkomt.

Cult UIMIT

/* Direction-Aware Hover — Cult UI (MIT) */
.dah-root{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.dah-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.dah-overlay{position:absolute;inset:0;background:rgba(245,72,15,.92);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .35s ease;transform:translate(var(--tx,0),var(--ty,100%))}
.dah-content{text-align:center;font-family:'Switzer',sans-serif}.dah-content b{display:block;font-size:18px;font-weight:700}.dah-content span{font-size:12px;opacity:.85}

// init(root):
var overlay=root.querySelector('.dah-overlay');
function setFrom(e){var r=root.getBoundingClientRect();var x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5;if(Math.abs(x)>Math.abs(y)){overlay.style.setProperty('--tx',x>0?'100%':'-100%');overlay.style.setProperty('--ty','0');}else{overlay.style.setProperty('--ty',y>0?'100%':'-100%');overlay.style.setProperty('--tx','0');}}
root.addEventListener('mouseenter',function(e){setFrom(e);requestAnimationFrame(function(){overlay.style.setProperty('--tx','0');overlay.style.setProperty('--ty','0');});});
root.addEventListener('mouseleave',function(e){setFrom(e);});

COMPONENT Family Button

Uitklappende FAB die morpht naar een paneel met acties.

Cult UIMIT

/* Family Button — Cult UI (MIT) */
.fam-root{position:absolute;inset:0;background:#0a0a10}
.fam{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fam-panel{display:flex;flex-direction:column;gap:8px;overflow:hidden;background:#15151d;border:1px solid #26262f;border-radius:18px;padding:0 8px;max-height:0;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),padding .4s}
.fam[data-open="true"] .fam-panel{max-height:180px;opacity:1;transform:translateY(0) scale(1);padding:8px}
.fam-action{cursor:pointer;white-space:nowrap;border:none;background:transparent;color:#e7e7ef;font:500 14px 'Switzer',sans-serif;padding:8px 12px;border-radius:10px;text-align:left;transition:background .2s}
.fam-action:hover{background:#23232e}
.fam-toggle{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:#F5480F;color:#fff;font:300 30px/1 'Switzer',sans-serif;box-shadow:0 8px 24px rgba(245,72,15,.5);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.fam[data-open="true"] .fam-toggle{transform:rotate(135deg)}

// init(root):
var fam=root.querySelector('.fam');var toggle=root.querySelector('.fam-toggle');toggle.addEventListener('click',function(){fam.dataset.open=fam.dataset.open==='true'?'false':'true';});

COMPONENT Spotlight Card

Spotlight

Beweeg je cursor over de kaart.

Radiale glow volgt de cursor over de kaart.

React Bits / AceternityMIT/eigen

/* Spotlight Card — React Bits / Aceternity (MIT/eigen) */
.spot-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06060a}
.spot-root{--x:50%;--y:50%;position:relative;overflow:hidden;border-radius:16px;max-width:300px}
.spot-root::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;background:radial-gradient(220px circle at var(--x) var(--y),rgba(245,72,15,.25),transparent 60%);z-index:1}
.spot-root:hover::before{opacity:1}
.spot-inner{position:relative;padding:28px;background:#0e0e12;border:1px solid #26262e;color:#cfcfd6;font-family:'Switzer',sans-serif;border-radius:16px}
.spot-inner h3{margin:0 0 .4em;color:#fff;font-size:1.25rem}.spot-inner p{margin:0;font-size:.92rem;line-height:1.5}

// init(root):
var card=root.querySelector('.spot-root');card.addEventListener('pointermove',function(e){var r=card.getBoundingClientRect();card.style.setProperty('--x',(e.clientX-r.left)+'px');card.style.setProperty('--y',(e.clientY-r.top)+'px');});

COMPONENT Magnetic Button

Knop wordt naar de cursor getrokken, veert terug bij verlaten.

React BitsMIT

/* Magnetic Button — React Bits (MIT) */
.magnet-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0c12}
.magnet-target{padding:16px 34px;border-radius:999px;border:0;cursor:pointer;font:600 1rem 'Switzer',sans-serif;color:#0a0a0a;background:#fff;will-change:transform}
.magnet-label{display:inline-block;will-change:transform;pointer-events:none}

// init(root):
var btn=root.querySelector('.magnet-target');var label=root.querySelector('.magnet-label');
root.addEventListener('pointermove',function(e){var r=btn.getBoundingClientRect();var x=e.clientX-(r.left+r.width/2),y=e.clientY-(r.top+r.height/2);if(window.gsap){gsap.to(btn,{x:x*.4,y:y*.4,duration:.5,ease:'power3.out'});gsap.to(label,{x:x*.7,y:y*.7,duration:.5,ease:'power3.out'});}else{btn.style.transform='translate('+x*.4+'px,'+y*.4+'px)';}});
root.addEventListener('pointerleave',function(){if(window.gsap){gsap.to([btn,label],{x:0,y:0,duration:.7,ease:'elastic.out(1,.4)'});}else{btn.style.transform='';}});

COMPONENT 3D Tilt + glare

CASEMoonay+38% conversie

Kaart kantelt 3D naar de cursor met een bewegende glans.

Cult UI / AceternityMIT/eigen

/* 3D Tilt + glare — Cult UI / Aceternity (MIT/eigen) */
.tilt-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:900px;background:#0c0c14}
.tilt-card{position:relative;width:62%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#202840,#11131f);transform-style:preserve-3d;will-change:transform;transition:transform .25s ease-out}
.tilt-glare{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),transparent 45%);transition:opacity .25s}
.tilt-card:hover .tilt-glare{opacity:1}
.tilt-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px;color:#fff;transform:translateZ(40px)}
.tilt-cat{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#F5480F}.tilt-body b{font:700 26px 'Boldonse','Switzer',sans-serif;text-transform:uppercase}.tilt-body em{font-style:normal;font:11px 'JetBrains Mono',monospace;opacity:.7}

// init(root):
var card=root.querySelector('.tilt-card');var glare=root.querySelector('.tilt-glare');var MAX=12;
card.addEventListener('pointermove',function(e){var r=card.getBoundingClientRect();var px=(e.clientX-r.left)/r.width,py=(e.clientY-r.top)/r.height;var ry=(px-.5)*MAX*2,rx=(.5-py)*MAX*2;if(window.gsap){gsap.to(card,{rotationX:rx,rotationY:ry,duration:.4,ease:'power2.out',transformPerspective:900});}else{card.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)';}glare.style.setProperty('--gx',px*100+'%');glare.style.setProperty('--gy',py*100+'%');});
card.addEventListener('pointerleave',function(){if(window.gsap){gsap.to(card,{rotationX:0,rotationY:0,duration:.6,ease:'power3.out'});}else{card.style.transform='';}});

COMPONENT Click Spark

Klik ergens

Burst van vonken op elke klik. Klein canvas-effect.

React BitsMIT

/* Click Spark — React Bits (MIT) */
.cspark-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0c10;cursor:pointer;overflow:hidden;color:#9aa;font:600 1rem 'Switzer',sans-serif;user-select:none}
.cspark-canvas{position:absolute;inset:0;pointer-events:none}

// init(root):
var canvas=root.querySelector('.cspark-canvas');var ctx=canvas.getContext('2d');var dpr=window.devicePixelRatio||1;
function resize(){canvas.width=root.clientWidth*dpr;canvas.height=root.clientHeight*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}resize();new ResizeObserver(resize).observe(root);
var sparks=[];root.addEventListener('click',function(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top,n=9;for(var i=0;i<n;i++)sparks.push({x:x,y:y,ang:(Math.PI*2*i)/n,t:performance.now()});if(sparks.length===n)requestAnimationFrame(draw);});
function draw(now){ctx.clearRect(0,0,canvas.width,canvas.height);var len=18;sparks=sparks.filter(function(s){var p=(now-s.t)/450;if(p>=1)return false;var e=1-Math.pow(1-p,3);var d=e*22,x1=s.x+Math.cos(s.ang)*d,y1=s.y+Math.sin(s.ang)*d;var x2=x1+Math.cos(s.ang)*len*(1-p),y2=y1+Math.sin(s.ang)*len*(1-p);ctx.strokeStyle='rgba(245,72,15,'+(1-p)+')';ctx.lineWidth=2;ctx.lineCap='round';ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();return true;});if(sparks.length)requestAnimationFrame(draw);else ctx.clearRect(0,0,canvas.width,canvas.height);}

COMPONENT Image Reveal on Hover

Westland Veld Glastuinbouw Schoonmaak Logistiek

Lijst van titels; bij hover schuift een gemaskeerde thumbnail clip-in die de cursor volgt.

Codropseigen

/* Image Reveal on Hover — Codrops (eigen) */
.irc-list{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 9%;background:#fff;font-family:'Switzer',sans-serif}
.irc-row{position:relative;display:block;padding:.5em 0;font-weight:800;font-size:clamp(20px,5.4vw,40px);letter-spacing:-.02em;color:#0a0a0a;text-decoration:none;border-bottom:1px solid #e9e9e9;transition:color .35s,padding-left .35s;cursor:pointer;z-index:2}
.irc-row:hover{color:#F5480F;padding-left:18px}
.irc-thumb{position:absolute;width:140px;height:96px;border-radius:10px;background:var(--c,#F5480F);pointer-events:none;z-index:1;opacity:0;transform:translate(-50%,-50%) scale(.6);clip-path:inset(0 100% 0 0);transition:opacity .25s}
.irc-thumb::after{content:'';position:absolute;inset:0;border-radius:10px;background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.35),transparent 60%)}

// init(root):
var thumb=root.querySelector('.irc-thumb');var rows=root.querySelectorAll('.irc-row');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function move(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;if(g)g.to(thumb,{left:x,top:y,duration:.5,ease:'power3.out'});else{thumb.style.left=x+'px';thumb.style.top=y+'px';}}
rows.forEach(function(row){row.addEventListener('mouseenter',function(){thumb.style.setProperty('--c',row.dataset.c);if(g&&!rm)g.to(thumb,{opacity:1,scale:1,clipPath:'inset(0 0% 0 0)',duration:.45,ease:'power3.out'});else thumb.style.opacity=1;});row.addEventListener('mouseleave',function(){if(g&&!rm)g.to(thumb,{opacity:0,scale:.6,clipPath:'inset(0 100% 0 0)',duration:.3,ease:'power2.in'});else thumb.style.opacity=0;});});
root.addEventListener('mousemove',move);

COMPONENT Flip Card Grid

Speed

Craft

Scale

Trust

Motion

Ship

Raster van kaarten die per stuk in 3D omklappen bij hover.

eigeneigen

/* Flip Card Grid — eigen (eigen) */
.fcg-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;padding:10%;background:#fff;font-family:'Switzer',sans-serif}
.fcg-card{perspective:600px}.fcg-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;border-radius:12px}
.fcg-card:hover .fcg-in{transform:rotateY(180deg)}
.fcg-f,.fcg-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;font-weight:800}
.fcg-f{background:#0a0a0a;color:#fff;font-size:clamp(18px,4vw,30px)}.fcg-b{background:#F5480F;color:#fff;transform:rotateY(180deg);font-size:clamp(13px,2.4vw,18px)}

// init(root):
var g=window.gsap;if(!g)return;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;g.set(root.querySelectorAll('.fcg-card'),{opacity:0,y:14});g.to(root.querySelectorAll('.fcg-card'),{opacity:1,y:0,duration:rm?0:.5,stagger:rm?0:.06,ease:'power3.out',delay:.1});

COMPONENT Infinite Logo Loop

COMOL5MOBILISMAKPB BOUWMULDER

Naadloze logo-band met edge-fade die oneindig doorloopt en pauzeert bij hover.

Osmoeigen

/* Infinite Logo Loop — Osmo (eigen) */
.ill-stage{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;background:#fff;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ill-track{display:flex;will-change:transform}.ill-set{display:flex;flex:none}
.ill-set span{flex:none;padding:0 clamp(20px,4vw,46px);font-family:'Boldonse','Switzer',sans-serif;font-weight:800;font-size:clamp(18px,3.4vw,30px);color:#0a0a0a;letter-spacing:-.01em;white-space:nowrap}
.ill-set span:nth-child(odd){color:#F5480F}.ill-stage:hover .ill-track{animation-play-state:paused}

// init(root):
var track=root.querySelector('.ill-track');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;if(rm)return;var w=root.querySelector('.ill-set').offsetWidth;
if(g){g.to(track,{x:-w,duration:14,ease:'none',repeat:-1});root.addEventListener('mouseenter',function(){g.getTweensOf(track).forEach(function(t){t.timeScale(.15);});});root.addEventListener('mouseleave',function(){g.getTweensOf(track).forEach(function(t){t.timeScale(1);});});}else{track.style.animation='ill-scroll 14s linear infinite';var s=document.createElement('style');s.textContent='@keyframes ill-scroll{to{transform:translateX(-'+w+'px)}}';root.appendChild(s);}

COMPONENT Gooey Blob Nav

Menu met een vloeiende gooey-blob die naar het actieve item morpht.

Codropseigen

/* Gooey Blob Nav — Codrops (eigen) */
.gbh-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a;font-family:'Switzer',sans-serif}
.gbh-goo{position:absolute;inset:0;filter:url(#gbh-goo);pointer-events:none}
.gbh-blob{position:absolute;height:46px;border-radius:30px;background:#F5480F;top:50%;transform:translateY(-50%);transition:left .45s cubic-bezier(.5,1.5,.4,1),width .45s cubic-bezier(.5,1.5,.4,1)}
.gbh-nav{display:flex;gap:6px;position:relative;z-index:2}.gbh-i{padding:11px 20px;font-weight:700;font-size:clamp(13px,2.6vw,18px);color:#fff;cursor:pointer;transition:color .3s;border-radius:30px}

// init(root):
var blob=root.querySelector('.gbh-blob');var items=root.querySelectorAll('.gbh-i');
function place(el){var r=el.getBoundingClientRect();blob.style.left=(r.left-root.getBoundingClientRect().left)+'px';blob.style.width=r.width+'px';}
function set(el){items.forEach(function(i){i.classList.remove('is-on');});el.classList.add('is-on');place(el);}
items.forEach(function(el){el.addEventListener('mouseenter',function(){place(el);});el.addEventListener('mouseleave',function(){place(root.querySelector('.gbh-i.is-on'));});el.addEventListener('click',function(){set(el);});});
requestAnimationFrame(function(){set(root.querySelector('.gbh-i.is-on'));});

COMPONENT Liquid Fill Button

Knop waar bij hover een vloeibare oranje golf vanaf de muispositie omhoog vult.

Osmoeigen

/* Liquid Fill Button — Osmo (eigen) */
.lqb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.lqb-btn{position:relative;overflow:hidden;border:1.5px solid #F5480F;background:transparent;border-radius:40px;padding:18px 42px;cursor:pointer;font-family:'Switzer',sans-serif}
.lqb-fill{position:absolute;width:240px;height:240px;border-radius:50%;background:#F5480F;left:50%;top:120%;transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.3,.8,.3,1);z-index:1}
.lqb-btn:hover .lqb-fill{transform:translate(-50%,-50%) scale(1.6)}
.lqb-txt{position:relative;z-index:2;font-weight:800;font-size:clamp(15px,3vw,20px);color:#F5480F;transition:color .4s}.lqb-btn:hover .lqb-txt{color:#fff}

// init(root):
var btn=root.querySelector('.lqb-btn');var fill=root.querySelector('.lqb-fill');var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;if(rm)return;
btn.addEventListener('mouseenter',function(e){var r=btn.getBoundingClientRect();fill.style.left=(e.clientX-r.left)+'px';fill.style.top=(e.clientY-r.top)+'px';});
btn.addEventListener('mouseleave',function(e){var r=btn.getBoundingClientRect();fill.style.left=(e.clientX-r.left)+'px';fill.style.top=(e.clientY-r.top)+'px';});

COMPONENT Day/Night Toggle

Schakelaar met soepele knop-glijbeweging en dag/nacht-icoon.

UiverseMIT

/* Day/Night Toggle — Uiverse (MIT) */
.tgs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tgs__in{position:absolute;opacity:0;pointer-events:none}
.tgs__track{position:relative;width:104px;height:50px;border-radius:50px;background:#0a0a0a;transition:background .45s cubic-bezier(.4,.1,.2,1);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.tgs__in:checked+.tgs__track{background:#F5480F}
.tgs__thumb{position:absolute;top:5px;left:5px;width:40px;height:40px;border-radius:50%;background:#fff;transition:transform .45s cubic-bezier(.4,.1,.2,1);box-shadow:0 3px 8px rgba(0,0,0,.3);z-index:2}
.tgs__in:checked+.tgs__track .tgs__thumb{transform:translateX(54px)}
.tgs__sun,.tgs__moon{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;transition:opacity .4s,transform .4s}
.tgs__sun{right:11px;fill:none;stroke:#FFD15C;stroke-width:2;stroke-linecap:round;opacity:0}.tgs__moon{left:12px;fill:#cfe0ff}
.tgs__in:checked+.tgs__track .tgs__sun{opacity:1}.tgs__in:checked+.tgs__track .tgs__moon{opacity:0}

COMPONENT Draw-Tick Checkbox

Akkoord met de voorwaarden

Vinkje wordt getekend met bounce van de box.

UiverseMIT

/* Draw-Tick Checkbox — Uiverse (MIT) */
.cbk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;font:600 17px/1.2 'Switzer',sans-serif;color:#0a0a0a}
.cbk__in{position:absolute;opacity:0;pointer-events:none}
.cbk__box{width:34px;height:34px;border-radius:9px;border:2.5px solid #0a0a0a;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.cbk__svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cbk__path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .05s}
.cbk__in:checked+.cbk__box{background:#F5480F;border-color:#F5480F;animation:cbkPop .4s}
.cbk__in:checked+.cbk__box .cbk__path{stroke-dashoffset:0}
@keyframes cbkPop{0%{transform:scale(1)}40%{transform:scale(.86)}100%{transform:scale(1)}}

COMPONENT Loader Trio

Drie loaders: ring, bouncende dots, pulserende bars.

Animistaeigen

/* Loader Trio — Animista (eigen) */
.ldt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:56px;background:#fff}
.ldt__ring{width:48px;height:48px;border-radius:50%;border:5px solid #0a0a0a1a;border-top-color:#F5480F;animation:ldtSpin .8s linear infinite}
@keyframes ldtSpin{to{transform:rotate(360deg)}}
.ldt__dots{display:flex;gap:9px;align-items:center}.ldt__dots i{width:13px;height:13px;border-radius:50%;background:#0a0a0a;animation:ldtBounce 1.1s ease-in-out infinite}
.ldt__dots i:nth-child(2){animation-delay:.16s;background:#F5480F}.ldt__dots i:nth-child(3){animation-delay:.32s}
@keyframes ldtBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-16px);opacity:1}}
.ldt__bars{display:flex;gap:6px;align-items:flex-end;height:44px}.ldt__bars i{width:8px;height:14px;border-radius:4px;background:#F5480F;animation:ldtBars .9s ease-in-out infinite}
.ldt__bars i:nth-child(2){animation-delay:.12s}.ldt__bars i:nth-child(3){animation-delay:.24s}.ldt__bars i:nth-child(4){animation-delay:.36s}
@keyframes ldtBars{0%,100%{height:14px}50%{height:42px}}

COMPONENT Neon Glow Button

Knop met sweep-glans en oplichtende neonrand bij hover.

UiverseMIT

/* Neon Glow Button — Uiverse (MIT) */
.ngb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.ngb{position:relative;width:200px;height:62px;border:0;border-radius:14px;cursor:pointer;background:#141414;color:#fff;font:700 18px/1 'Switzer',sans-serif;letter-spacing:.04em;overflow:hidden;transition:box-shadow .35s,transform .2s}
.ngb::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(120deg,#F5480F,#ff8a3d,#F5480F);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.ngb::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.ngb:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(245,72,15,.65),0 0 46px rgba(245,72,15,.35)}
.ngb:hover::before{opacity:1}.ngb:hover::after{left:120%}.ngb:active{transform:translateY(0) scale(.97)}.ngb__txt{position:relative;z-index:1}

COMPONENT Underline Slide Links

Navigatielinks met underline die vanuit het midden uitschuift.

Hover.cssMIT

/* Underline Slide Links — Hover.css (MIT) */
.usl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:46px;background:#fff}
.usl__a{position:relative;color:#0a0a0a;text-decoration:none;font:600 22px/1 'Switzer',sans-serif;padding-bottom:6px}
.usl__a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;background:#F5480F;border-radius:2px;transition:left .3s ease,right .3s ease}
.usl__a:hover::after{left:0;right:0}.usl__a--c::after{background:#0a0a0a}

COMPONENT Star Rating

Sterren vullen op bij hover, klik zet de waardering vast.

UiverseMIT

/* Star Rating — Uiverse (MIT) */
.srt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff}
.srt__s{width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");background-color:#0a0a0a1f;transition:background-color .15s,transform .15s}
.srt__s:hover{transform:scale(1.18)}.srt:not(:hover) .srt__s.is-on,.srt__s.is-hot{background-color:#F5480F}

// init(root):
var stars=[].slice.call(root.querySelectorAll('.srt__s'));var locked=0;
function paint(n){stars.forEach(function(s,i){s.classList.toggle('is-hot',i<n);});}
stars.forEach(function(s,i){s.addEventListener('mouseenter',function(){paint(i+1);});s.addEventListener('click',function(){locked=i+1;stars.forEach(function(x,j){x.classList.toggle('is-on',j<locked);});});});
root.querySelector('.srt').addEventListener('mouseleave',function(){paint(0);});

COMPONENT Segmented Control

iOS-stijl segment-schakelaar met glijdende pil.

UiverseMIT

/* Segmented Control — Uiverse (MIT) */
.sgc-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.sgc{position:relative;width:316px;height:54px;display:flex;background:#0a0a0a0d;border-radius:14px;padding:6px}
.sgc__pill{position:absolute;top:6px;left:6px;width:calc((100% - 12px)/3);height:calc(100% - 12px);background:#fff;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .35s cubic-bezier(.4,.1,.2,1)}
.sgc__b{flex:1;border:0;background:transparent;cursor:pointer;font:600 15px/1 'Switzer',sans-serif;color:#0a0a0a99;z-index:1;transition:color .3s}.sgc__b.is-active{color:#F5480F}

// init(root):
var btns=[].slice.call(root.querySelectorAll('.sgc__b'));var pill=root.querySelector('.sgc__pill');
btns.forEach(function(b,i){b.addEventListener('click',function(){btns.forEach(function(x){x.classList.remove('is-active');});b.classList.add('is-active');pill.style.transform='translateX('+(i*100)+'%)';});});

COMPONENT Hamburger to X

Menu-knop die soepel naar een kruis morpht.

Animistaeigen

/* Hamburger to X — Animista (eigen) */
.hbx-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.hbx{width:72px;height:72px;border:0;border-radius:18px;background:#141414;cursor:pointer;display:grid;place-items:center;transition:background .3s}.hbx.is-open{background:#F5480F}
.hbx__lines{position:relative;width:34px;height:24px}.hbx__lines i{position:absolute;left:0;width:100%;height:3.5px;border-radius:3px;background:#fff;transition:transform .4s cubic-bezier(.5,0,.2,1),opacity .25s}
.hbx__lines i:nth-child(1){top:0}.hbx__lines i:nth-child(2){top:50%;transform:translateY(-50%)}.hbx__lines i:nth-child(3){bottom:0}
.hbx.is-open .hbx__lines i:nth-child(1){transform:translateY(10px) rotate(45deg)}.hbx.is-open .hbx__lines i:nth-child(2){opacity:0}.hbx.is-open .hbx__lines i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

// init(root):
var b=root.querySelector('.hbx');b.addEventListener('click',function(){b.classList.toggle('is-open');});

COMPONENT Skeleton Shimmer

Laadplaatshouder-kaart met doorlopende shimmer-veeg.

UiverseMIT

/* Skeleton Shimmer — Uiverse (MIT) */
.skl-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f4f3f1}
.skl{width:340px;height:128px;background:#fff;border:1px solid #0a0a0a12;border-radius:16px;display:flex;gap:18px;padding:22px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.skl__avatar{width:72px;height:72px;border-radius:50%;flex:none}.skl__lines{flex:1;display:flex;flex-direction:column;gap:13px}
.skl__l{height:14px;border-radius:7px;width:100%}.skl__l--title{width:62%;height:18px}.skl__l--short{width:40%}
.skl__avatar,.skl__l{background:linear-gradient(100deg,#0a0a0a0d 30%,#F5480F26 50%,#0a0a0a0d 70%);background-size:220% 100%;animation:sklSh 1.4s ease-in-out infinite}
@keyframes sklSh{0%{background-position:180% 0}100%{background-position:-80% 0}}

COMPONENT Copy Button

Kopieerknop die naar een vinkje morpht en weer terugkeert.

UiverseMIT

/* Copy Button — Uiverse (MIT) */
.cpb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.cpb{position:relative;width:206px;height:58px;border:2px solid #0a0a0a;border-radius:13px;background:#fff;color:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;font:600 16px/1 'Switzer',sans-serif;transition:background .3s,color .3s,border-color .3s}
.cpb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .25s}
.cpb__check{position:absolute;left:24px;opacity:0;transform:scale(.5)}.cpb__check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s}
.cpb.is-done{background:#F5480F;border-color:#F5480F;color:#fff}.cpb.is-done .cpb__copy{opacity:0;transform:scale(.5)}.cpb.is-done .cpb__check{opacity:1;transform:scale(1)}.cpb.is-done .cpb__check path{stroke-dashoffset:0}

// init(root):
var b=root.querySelector('.cpb');var t=b.querySelector('.cpb__txt');var busy=false;
b.addEventListener('click',function(){if(busy)return;busy=true;try{navigator.clipboard&&navigator.clipboard.writeText('npm i neddev-ui');}catch(e){}b.classList.add('is-done');t.textContent='Gekopieerd';setTimeout(function(){b.classList.remove('is-done');t.textContent='Kopieer code';busy=false;},1600);});

05WebGL & achtergronden 8

WEBGL WebGL fbm-mesh

WebGL Mesh

Stromende fbm-noise kleurveld in een fragment-shader (OGL).

Codrops / eigeneigen

/* WebGL fbm-mesh — Codrops / eigen (eigen) */
.wmesh-root{position:absolute;inset:0;overflow:hidden;background:#05060c}
.wmesh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wmesh-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.wmesh-copy h3{color:#fff;font:800 clamp(2rem,6vw,4rem) 'Boldonse','Switzer',sans-serif;mix-blend-mode:overlay}

// init(root):
var canvas=root.querySelector('.wmesh-canvas');var renderer,gl;try{renderer=new OGL.Renderer({canvas:canvas,dpr:Math.min(devicePixelRatio,1.5),alpha:false});gl=renderer.gl;}catch(e){return;}
var vertex='attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.,1.);}';
var fragment='precision highp float;varying vec2 vUv;uniform float uTime;uniform vec2 uRes;float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}float noise(vec2 p){vec2 i=floor(p),f=fract(p);float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));vec2 u=f*f*(3.-2.*f);return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y;}float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p*=2.;a*=.5;}return v;}void main(){vec2 uv=vUv;uv.x*=uRes.x/uRes.y;float t=uTime*.08;float n=fbm(uv*2.5+vec2(t,t*.7));float m=fbm(uv*1.7-vec2(t*.6,t));vec3 c1=vec3(.96,.28,.06);vec3 c2=vec3(.1,.1,.14);vec3 c3=vec3(.55,.12,.02);vec3 col=mix(c1,c2,smoothstep(.2,.8,n));col=mix(col,c3,smoothstep(.3,.9,m));col+=.05*fbm(uv*8.+t);gl_FragColor=vec4(col,1.);}';
var program=new OGL.Program(gl,{vertex:vertex,fragment:fragment,uniforms:{uTime:{value:0},uRes:{value:[1,1]}}});var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:program});
function resize(){var w=root.clientWidth,h=root.clientHeight;renderer.setSize(w,h);program.uniforms.uRes.value=[gl.canvas.width,gl.canvas.height];}new ResizeObserver(resize).observe(root);resize();
var raf,vis=true;var io=new IntersectionObserver(function(es){es.forEach(function(en){vis=en.isIntersecting;});},{threshold:.05});io.observe(canvas);
(function loop(t){raf=requestAnimationFrame(loop);if(!vis)return;program.uniforms.uTime.value=t*.001;renderer.render({scene:mesh});})(0);

WEBGL Aurora (CSS)

Aurora

Zachte drijvende kleur-blobs. Pure CSS, vederlicht.

React BitsMIT

/* Aurora (CSS) — React Bits (MIT) */
.aur-root{position:absolute;inset:0;overflow:hidden;background:#05060a}
.aur-root::before,.aur-root::after{content:"";position:absolute;inset:-40%;background:radial-gradient(40% 40% at 30% 30%,#F5480Faa,transparent 70%),radial-gradient(40% 40% at 70% 40%,#ff9466aa,transparent 70%),radial-gradient(45% 45% at 50% 70%,#7a1fa2aa,transparent 70%);filter:blur(40px);animation:aur-drift 14s ease-in-out infinite}
.aur-root::after{animation-duration:20s;animation-direction:reverse;opacity:.7}
@keyframes aur-drift{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}33%{transform:translate(8%,-6%) rotate(8deg) scale(1.1)}66%{transform:translate(-6%,8%) rotate(-8deg) scale(1.05)}}
.aur-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:800 1.6rem 'Boldonse','Switzer',sans-serif;letter-spacing:.05em}

WEBGL Animated grid

Animated Grid

Canvas-grid van vierkanten dat diagonaal drijft met hover-highlight.

React BitsMIT

/* Animated grid — React Bits (MIT) */
.sq-root{position:absolute;inset:0;overflow:hidden;background:#060608}
.sq-canvas{position:absolute;inset:0;display:block}
.sq-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:700 1.3rem 'Boldonse','Switzer',sans-serif;pointer-events:none;text-shadow:0 2px 12px #000}

// init(root):
var canvas=root.querySelector('.sq-canvas');var ctx=canvas.getContext('2d');var dpr=window.devicePixelRatio||1;var size=36,speed=.4;var w,h,offX=0,offY=0,hover=null;
function resize(){w=root.clientWidth;h=root.clientHeight;canvas.width=w*dpr;canvas.height=h*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}resize();new ResizeObserver(resize).observe(root);
root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();var mx=e.clientX-r.left+offX,my=e.clientY-r.top+offY;hover={gx:Math.floor(mx/size),gy:Math.floor(my/size)};});
root.addEventListener('pointerleave',function(){hover=null;});
(function frame(){offX=(offX+speed)%size;offY=(offY+speed)%size;ctx.clearRect(0,0,w,h);for(var x=-size;x<w+size;x+=size){for(var y=-size;y<h+size;y+=size){var gx=Math.floor((x+offX)/size),gy=Math.floor((y+offY)/size);var on=hover&&hover.gx===gx&&hover.gy===gy;ctx.strokeStyle='rgba(255,255,255,.08)';ctx.lineWidth=1;var px=x-offX,py=y-offY;if(on){ctx.fillStyle='rgba(245,72,15,.35)';ctx.fillRect(px,py,size,size);}ctx.strokeRect(px,py,size,size);}}var g=ctx.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.max(w,h)/1.2);g.addColorStop(0,'rgba(6,6,8,0)');g.addColorStop(1,'rgba(6,6,8,.9)');ctx.fillStyle=g;ctx.fillRect(0,0,w,h);requestAnimationFrame(frame);})();

WEBGL Noise Gradient Mesh

Vloeiend bewegend kleurverloop op een fragment-shader met zachte ruis (OGL).

Codropseigen

/* Noise Gradient Mesh — Codrops (eigen) */
.ngc-c{position:absolute;inset:0;display:block;width:100%;height:100%;background:#0a0a0a}

// init(root):
var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;if(typeof OGL==='undefined'){root.innerHTML='<div class=ngc-c style="background:linear-gradient(120deg,#0a0a0a,#F5480F)"></div>';return;}
var renderer=new OGL.Renderer({alpha:false,dpr:Math.min(2,window.devicePixelRatio)});var gl=renderer.gl;gl.canvas.className='ngc-c';root.appendChild(gl.canvas);
var frag='precision highp float;uniform float uT;uniform vec2 uR;varying vec2 vUv;float n(vec2 p){return fract(sin(dot(p,vec2(12.9,78.2)))*43758.5);}void main(){vec2 uv=vUv;float t=uT*.15;float w=sin(uv.x*3.0+t)*.5+cos(uv.y*4.0-t*1.3)*.5;vec3 ink=vec3(.04);vec3 org=vec3(.96,.28,.06);vec3 col=mix(ink,org,smoothstep(-.6,.9,w+uv.y*.3));col+=(n(uv*uR.xy*.5+t)-.5)*.06;gl_FragColor=vec4(col,1.0);}';
var program=new OGL.Program(gl,{vertex:'attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0,1);}',fragment:frag,uniforms:{uT:{value:0},uR:{value:[1,1]}}});
var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:program});
function resize(){renderer.setSize(root.clientWidth,root.clientHeight);program.uniforms.uR.value=[gl.canvas.width,gl.canvas.height];}resize();window.addEventListener('resize',resize);
if(rm){renderer.render({scene:mesh});return;}var vis=true;var io=new IntersectionObserver(function(es){es.forEach(function(e){vis=e.isIntersecting;});});io.observe(root);
(function frame(t){requestAnimationFrame(frame);if(!vis)return;program.uniforms.uT.value=t*0.001;renderer.render({scene:mesh});})(0);

WEBGL Dot Wave Field

WebGL puntenraster dat als een golf reageert op je cursor.

Codropseigen

/* Dot Wave Field — Codrops (eigen) */
.dwf-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;cursor:crosshair}.dwf-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

// init(root):
root.classList.add('dwf-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var c=document.createElement('canvas');root.appendChild(c);
var mouse={x:.5,y:.5,tx:.5,ty:.5};function size(){var r=root.getBoundingClientRect();var dpr=Math.min(devicePixelRatio||1,2);c.width=r.width*dpr;c.height=r.height*dpr;return{w:r.width,h:r.height,dpr:dpr};}var dims=size();
root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();mouse.tx=(e.clientX-r.left)/r.width;mouse.ty=(e.clientY-r.top)/r.height;});
if(typeof OGL!=='undefined'&&!reduce){var renderer=new OGL.Renderer({canvas:c,dpr:Math.min(devicePixelRatio||1,2),alpha:true});var gl=renderer.gl;gl.clearColor(.039,.039,.039,1);
var program=new OGL.Program(gl,{vertex:'attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.,1.);}',fragment:'precision highp float;varying vec2 vUv;uniform float uT;uniform vec2 uMouse;uniform vec2 uRes;void main(){vec2 uv=vUv;float ar=uRes.x/uRes.y;vec2 p=uv;p.x*=ar;vec2 m=uMouse;m.x*=ar;float grid=34.0;vec2 g=fract(p*grid)-0.5;float d=distance(p,m);float wave=sin(d*22.0-uT*3.0)*0.5+0.5;wave*=smoothstep(0.6,0.0,d);float r=0.10+wave*0.30;float dot=smoothstep(r,r-0.08,length(g));vec3 base=vec3(0.18);vec3 col=mix(base,vec3(0.96,0.282,0.059),wave);gl_FragColor=vec4(col*dot,dot*(0.25+wave*0.9));}',uniforms:{uT:{value:0},uMouse:{value:[.5,.5]},uRes:{value:[dims.w,dims.h]}}});
var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:program});new ResizeObserver(function(){dims=size();renderer.setSize(dims.w,dims.h);program.uniforms.uRes.value=[dims.w,dims.h];}).observe(root);
var run=true,t=0;new IntersectionObserver(function(es){run=es[0].isIntersecting;}).observe(root);(function frame(){requestAnimationFrame(frame);if(!run)return;t+=.016;mouse.x+=(mouse.tx-mouse.x)*.08;mouse.y+=(mouse.ty-mouse.y)*.08;program.uniforms.uT.value=t;program.uniforms.uMouse.value=[mouse.x,1-mouse.y];renderer.render({scene:mesh});})();}
else{var ctx=c.getContext('2d');function draw(){ctx.clearRect(0,0,c.width,c.height);var dpr=dims.dpr,step=26*dpr;t2+=.016;mouse.x+=(mouse.tx-mouse.x)*.08;mouse.y+=(mouse.ty-mouse.y)*.08;var mx=mouse.x*c.width,my=mouse.y*c.height;for(var x=step/2;x<c.width;x+=step){for(var y=step/2;y<c.height;y+=step){var d=Math.hypot(x-mx,y-my)/dpr;var wave=reduce?0:Math.max(0,(Math.sin(d*.12-t2*3)*.5+.5))*Math.max(0,1-d/300);var r=(1.8+wave*4)*dpr;ctx.beginPath();ctx.arc(x,y,r,0,7);ctx.fillStyle='rgba('+Math.round(46+wave*199)+','+Math.round(46+wave*26)+','+Math.round(46-wave*31)+','+(.25+wave*.75)+')';ctx.fill();}}if(!reduce)requestAnimationFrame(draw);}var t2=0;draw();}

WEBGL Particle Constellation

Zwevende punten verbonden met lijnen, lichten op rond de cursor.

eigeneigen

/* Particle Constellation — eigen (eigen) */
.pc-stage{position:relative;width:100%;height:100%;background:radial-gradient(120% 120% at 70% 10%,#141414,#0a0a0a);overflow:hidden}.pc-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

// init(root):
root.classList.add('pc-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var c=document.createElement('canvas');root.appendChild(c);var ctx=c.getContext('2d');var dpr=Math.min(devicePixelRatio||1,2),W=0,H=0,parts=[],run=false;var mouse={x:-999,y:-999};
function size(){var r=root.getBoundingClientRect();W=r.width;H=r.height;c.width=W*dpr;c.height=H*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);var n=Math.min(70,Math.round(W*H/12000));parts=[];for(var i=0;i<n;i++)parts.push({x:Math.random()*W,y:Math.random()*H,vx:(Math.random()-.5)*.25,vy:(Math.random()-.5)*.25});}
new ResizeObserver(size).observe(root);size();
root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();mouse.x=e.clientX-r.left;mouse.y=e.clientY-r.top;});root.addEventListener('pointerleave',function(){mouse.x=mouse.y=-999;});
function step(){if(!run)return;ctx.clearRect(0,0,W,H);for(var k=0;k<parts.length;k++){var p=parts[k];if(!reduce){p.x+=p.vx;p.y+=p.vy;}if(p.x<0||p.x>W)p.vx*=-1;if(p.y<0||p.y>H)p.vy*=-1;var dm=Math.hypot(p.x-mouse.x,p.y-mouse.y);var near=dm<140;ctx.beginPath();ctx.arc(p.x,p.y,near?2.6:1.6,0,7);ctx.fillStyle=near?'#F5480F':'rgba(255,255,255,.55)';ctx.fill();}
for(var i=0;i<parts.length;i++)for(var j=i+1;j<parts.length;j++){var a=parts[i],b=parts[j];var d=Math.hypot(a.x-b.x,a.y-b.y);if(d<110){var md=Math.hypot((a.x+b.x)/2-mouse.x,(a.y+b.y)/2-mouse.y);var hot=md<150;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.strokeStyle=hot?'rgba(245,72,15,'+(.5*(1-d/110))+')':'rgba(255,255,255,'+(.14*(1-d/110))+')';ctx.lineWidth=hot?1.1:.6;ctx.stroke();}}
if(!reduce)requestAnimationFrame(step);}
new IntersectionObserver(function(es){var v=es[0].isIntersecting;if(v&&!run){run=true;requestAnimationFrame(step);}else if(!v)run=false;}).observe(root);if(reduce){run=true;step();run=false;}

WEBGL Metaball Blob Field

Vloeibare metaballs die samensmelten en de cursor volgen.

Codropseigen

/* Metaball Blob Field — Codrops (eigen) */
.mb-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden}.mb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:contrast(18) blur(.3px)}

// init(root):
root.classList.add('mb-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var c=document.createElement('canvas');root.appendChild(c);var ctx=c.getContext('2d');var W=0,H=0,dpr=Math.min(devicePixelRatio||1,1.5),run=false,t=0;var N=6,blobs=[];
function size(){var r=root.getBoundingClientRect();W=r.width;H=r.height;c.width=W*dpr;c.height=H*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}new ResizeObserver(size).observe(root);size();
for(var i=0;i<N;i++)blobs.push({r:34+Math.random()*30,sp:.3+Math.random()*.5,rad:.18+Math.random()*.22,ph:Math.random()*7});
var mouse={x:.5,y:.5,active:false};root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();mouse.x=(e.clientX-r.left)/W;mouse.y=(e.clientY-r.top)/H;mouse.active=true;});root.addEventListener('pointerleave',function(){mouse.active=false;});
function draw(){if(!run)return;t+=reduce?0:.01;ctx.clearRect(0,0,W,H);ctx.globalCompositeOperation='lighter';for(var i=0;i<N;i++){var b=blobs[i];var x=(.5+Math.cos(t*b.sp+b.ph)*b.rad)*W;var y=(.5+Math.sin(t*b.sp*1.3+b.ph)*b.rad)*H;if(mouse.active&&i<2){x=mouse.x*W;y=mouse.y*H;}var g=ctx.createRadialGradient(x,y,0,x,y,b.r);g.addColorStop(0,'rgba(245,72,15,1)');g.addColorStop(.6,'rgba(245,72,15,.5)');g.addColorStop(1,'rgba(245,72,15,0)');ctx.fillStyle=g;ctx.beginPath();ctx.arc(x,y,b.r,0,7);ctx.fill();}ctx.globalCompositeOperation='source-over';if(!reduce)requestAnimationFrame(draw);}
new IntersectionObserver(function(es){var v=es[0].isIntersecting;if(v&&!run){run=true;requestAnimationFrame(draw);}else if(!v)run=false;}).observe(root);if(reduce){run=true;draw();run=false;}

WEBGL ASCII Halftone Hover

Beeld lost op in ASCII-tekens, scherp rond de cursor.

Codropseigen

/* ASCII Halftone Hover — Codrops (eigen) */
.ah-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;cursor:crosshair}.ah-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.ah-hint{position:absolute;bottom:10px;left:12px;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.3em;color:#F5480F;pointer-events:none;z-index:2}

// init(root):
root.classList.add('ah-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var hint=document.createElement('div');hint.className='ah-hint';hint.textContent='HOVER';root.appendChild(hint);var c=document.createElement('canvas');root.appendChild(c);var ctx=c.getContext('2d');var chars=' .:-=+*#%@';var W=0,H=0,dpr=Math.min(devicePixelRatio||1,2),run=false,t=0,cell=12;
function size(){var r=root.getBoundingClientRect();W=r.width;H=r.height;c.width=W*dpr;c.height=H*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}new ResizeObserver(size).observe(root);size();
var mouse={x:-999,y:-999};root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();mouse.x=e.clientX-r.left;mouse.y=e.clientY-r.top;});root.addEventListener('pointerleave',function(){mouse.x=mouse.y=-999;});
function draw(){if(!run)return;t+=reduce?0:.02;ctx.clearRect(0,0,W,H);ctx.font=cell+'px monospace';ctx.textBaseline='top';var cx=W/2,cy=H/2,maxd=Math.hypot(cx,cy);for(var y=0;y<H;y+=cell){for(var x=0;x<W;x+=cell){var dc=Math.hypot(x-cx,y-cy)/maxd;var lum=1-dc+Math.sin((x*.02)+(y*.02)+t)*.15;var dm=Math.hypot(x-mouse.x,y-mouse.y);var boost=Math.max(0,1-dm/160);lum=Math.min(1,lum*.6+boost*.9);var ci=Math.max(0,Math.min(chars.length-1,Math.floor(lum*(chars.length-1))));if(ci===0)continue;ctx.fillStyle=boost>.15?'rgba(245,72,15,'+(.5+boost*.5)+')':'rgba(255,255,255,'+(.25+lum*.45)+')';ctx.fillText(chars[ci],x,y);}}if(!reduce)requestAnimationFrame(draw);}
new IntersectionObserver(function(es){var v=es[0].isIntersecting;if(v&&!run){run=true;requestAnimationFrame(draw);}else if(!v)run=false;}).observe(root);if(reduce){run=true;draw();run=false;}

06Design-richtingen 6

Eentje die je mooi vindt?

Zeg welk effect of welke stijl bij jouw merk past, dan bouwen we de hele site eromheen.

Start een project →

ONZE COMPONENTENBIBLIOTHEEK.

01Hero-stijlen 4

EASY TOUNDERSTAND.IMPOSSIBLETO IGNORE.

MOVEyour cursor

SIGNAL//LOST

02Tekst-effecten 8

Animeer je koppen

Helderheid woord voor woord

We maken het

03Scroll-animaties 12

We bouwen interfacesdie bewegen metintentie.

DIEPTE

04Componenten 33

Border Beam

Meteors

Texture Card

Spotlight

05WebGL & achtergronden 8

WebGL Mesh

06Design-richtingen 6

Eentje die je mooi vindt?

ONZE COMPONENTEN
BIBLIOTHEEK.

MOVE
your cursor