The Lab

OUR COMPONENT
LIBRARY.

65+ animations, components and design directions we build with. Point at what you like, we make it yours.

Everything here is hand-built on our own stack (GSAP, Lenis, WebGL). No template, no plugin you have seen on ten other sites.

01Hero styles 4

HERO WebGL gradient-mesh

NEDDEV^®

We build shit that works.

Live fragment shader, fluid colour, reacts to the cursor. Pure GLSL on 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.

The headline is the hero. Lines mask up in view. Zero image 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

Images spawn along the cursor and fade out, classic 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 on the hero title, intensifies on 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);

02Text effects 8

TEXT Split Text

Animeer je koppen

Characters fly up and fade in once in view. 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

Words resolve from blur, word by word.

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

A light sweep moves across the text. 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

Flowing multi-colour gradient clipped to the text.

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

Number eases up to its target once in view.

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 and the text flickers through random glyphs to the real word.

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

The trailing word rotates through a list with 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

One word is sharp and framed; the frame slides between words.

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 animations 12

SCROLL Gordijn-reveal

scroll ↓

Two bars part like a curtain to expose 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

Section pins, vertical scroll moves cards sideways.

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

Cards pin and scale down as the next slides over.

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.

Words go from dim to bright tied to scroll position.

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.

Heading lines wipe in via clip-path, one by one.

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

Layers move at different rates for depth on scroll.

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 •

Two text rows drift in opposite directions; scroll drives speed and direction.

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

Headings decode from noise as the tile scrolls into view.

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

Circular SVG progress ring with a live percentage, filled by scroll.

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

Image grid revealing cell by cell with mask-clip and a diagonal stagger on 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

∞

Concentric rings fly toward you as you scroll.

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

Row of images slides horizontally driven by scroll position.

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);})();}

04Components 33

COMPONENT Border Beam

Border Beam

Een gloeiende punt cirkelt langs de rand.

A light beam travels around the element border.

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

Button with a shimmer sweeping its inner edge.

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

Infinite scrolling row that pauses on 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

Animated meteor streaks fall diagonally across the panel.

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

Concentric rings expanding from the center.

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 background with a radial 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

⚡

⚛

🌟

💎

🔥

Icons orbit a center on two radii, one reversed.

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

A slot cycles through words with a vertical 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

Notifications pop in from the bottom and stack, one at a time.

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 on click. Vanilla physics, no 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-style pill morphing between idle and 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.

Layered card with a fine noise-grain overlay and gradient border.

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 slides in from the edge the cursor enters.

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

Expanding FAB that morphs into a panel of actions.

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.

Radial glow follows the cursor across the card.

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

Button pulled toward the cursor, springs back on leave.

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

Card tilts in 3D toward the cursor with a moving glare.

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 of sparks on every click. Small 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

Title list; on hover a clip-masked thumbnail reveals and follows the cursor.

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

Grid of cards that flip in 3D on hover to reveal a back face.

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

Seamless logo strip with edge fade looping infinitely, pausing on 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 with a fluid gooey blob morphing to the active item.

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

Button where a liquid orange wave fills up from the cursor on hover.

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

Switch with smooth thumb slide and day/night icon.

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

Tick draws itself with a box bounce.

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

Three loaders: ring, bouncing dots, pulsing 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

Button with sweep sheen and neon glow on 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

Nav links with an underline that grows from the center.

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

Stars fill on hover, click locks the rating.

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-style segmented control with a sliding pill.

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 button that smoothly morphs into a cross.

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

Placeholder card with a sweeping shimmer load state.

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

Copy button that morphs to a check and resets.

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 & backgrounds 8

WEBGL WebGL fbm-mesh

WebGL Mesh

Flowing fbm-noise colour field in a 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

Soft drifting colour blobs. Pure CSS, feather-light.

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 of squares drifting diagonally with 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

Smoothly flowing animated gradient on a fragment shader with soft noise (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 dot grid that ripples like a wave toward the 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

Floating nodes linked by lines that light up around the 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

Liquid metaballs that merge and follow the cursor.

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

Image dissolves into ASCII glyphs, sharpens around the 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 directions 6

See one you like?

Tell us which effect or style fits your brand and we build the whole site around it.

Start a project →

OUR COMPONENTLIBRARY.

01Hero styles 4

EASY TOUNDERSTAND.IMPOSSIBLETO IGNORE.

MOVEyour cursor

SIGNAL//LOST

02Text effects 8

Animeer je koppen

Helderheid woord voor woord

We maken het

03Scroll animations 12

We bouwen interfacesdie bewegen metintentie.

DIEPTE

04Components 33

Border Beam

Meteors

Texture Card

Spotlight

05WebGL & backgrounds 8

WebGL Mesh

06Design directions 6

See one you like?

OUR COMPONENT
LIBRARY.

MOVE
your cursor