404 met losse stekker New
An error page where a plug dangles next to the socket and the cord sways gently. Hover or focus the button and the plug slides in: the cord pulls tight, small sparks jump and the light switches on. For the 404 page of an electrician, installer or energy supplier, or any site that wants an error page with a smile.
Hier zit de stekker eruit
Deze pagina bestaat niet meer. Elektro Visser in Amersfoort helpt je graag verder.
Stekker erin, naar de homepageHow to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 404 met losse stekker · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7sk">
<svg class="r7sk__svg" viewBox="0 0 300 100" aria-hidden="true" focusable="false">
<path class="r7sk__snoer" d="M-6 84C40 84 60 50 104 50"/>
<g class="r7sk__stekker"><rect x="104" y="38" width="34" height="24" rx="4"/><path class="r7sk__pin" d="M138 44H152M138 56H152"/><path class="r7sk__ribbel" d="M114 42V58M121 42V58"/></g>
<g class="r7sk__vonk"><path d="M196 34L203 26M200 50H211M196 66L203 74"/></g>
<rect class="r7sk__plaat" x="186" y="22" width="56" height="56" rx="6"/>
<circle class="r7sk__gat" cx="214" cy="44" r="2.6"/><circle class="r7sk__gat" cx="214" cy="56" r="2.6"/>
<circle class="r7sk__led" cx="232" cy="32" r="3"/>
<path class="r7sk__muur" d="M260 8V92"/>
</svg>
<div class="r7sk__txt">
<h3 class="r7sk__h">Hier zit de stekker eruit</h3>
<p class="r7sk__p">Deze pagina bestaat niet meer. Elektro Visser in Amersfoort helpt je graag verder.</p>
<a class="r7sk__a" href="#r7s-stekker-404">Stekker erin, naar de homepage</a>
</div>
</div>
</div>/* 404 met losse stekker · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7sk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 20px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;overflow:hidden}
.r7sk *,.r7sk *::before,.r7sk *::after{box-sizing:border-box}
.r7sk__svg{display:block;width:100%;height:auto;max-height:42cqh;overflow:visible}
.r7sk__snoer{fill:none;stroke:#0a0a0a;stroke-width:3.5;stroke-linecap:round}
.r7sk__stekker rect{fill:#0a0a0a}
.r7sk__pin{stroke:#8a8781;stroke-width:3;stroke-linecap:round}
.r7sk__ribbel{stroke:#3a3835;stroke-width:1.5}
.r7sk__plaat{fill:#fff;stroke:#0a0a0a;stroke-width:1.5}
.r7sk__gat{fill:#0a0a0a}
.r7sk__led{fill:#d6d3cd;transition:fill .2s .15s}
.r7sk__muur{stroke:#c9c6c0;stroke-width:1.5}
.r7sk__vonk path{fill:none;stroke:#F5480F;stroke-width:2.2;stroke-linecap:round;opacity:0}
.r7sk.is-in .r7sk__led{fill:#F5480F}
.r7sk.is-in .r7sk__vonk path{animation:r7sk-vonk .45s ease-out .12s}
@keyframes r7sk-vonk{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(-6px)}}
.r7sk__txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.r7sk__h{margin:0;font:650 clamp(17px,5.6cqi,24px)/1.1 'Switzer',sans-serif;letter-spacing:-.02em}
.r7sk__p{margin:0;font:400 clamp(12px,3.4cqi,14px)/1.4 'Switzer',sans-serif;color:#45433f;max-width:34em}
.r7sk__a{margin-top:2px;padding:10px 14px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 14px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.r7sk__a:hover{background:#2a2826}
.r7sk__a:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.r7sk.is-in .r7sk__vonk path{animation:none}}// 404 met losse stekker · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.r7sk');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var snoer=w.querySelector('.r7sk__snoer'),stekker=w.querySelector('.r7sk__stekker'),knop=w.querySelector('.r7sk__a'),svg=w.querySelector('.r7sk__svg');
var x=0,doelX=0,t=0,raf=0,zicht=true,laatste=0;
function teken(){
var inn=x/62,zwaai=rm?0:Math.sin(t*1.6)*(1-inn)*7,y=50+zwaai*0.5,rot=zwaai*0.9*(1-inn);
var ex=104+x;
snoer.setAttribute('d','M-6 84C'+(40+x*0.3).toFixed(1)+' '+(84-inn*20).toFixed(1)+' '+(60+x*0.6+zwaai).toFixed(1)+' '+(y+zwaai*0.6).toFixed(1)+' '+ex.toFixed(1)+' '+y.toFixed(1));
stekker.setAttribute('transform','translate('+x.toFixed(1)+' '+(y-50).toFixed(1)+') rotate('+rot.toFixed(2)+' 104 50)');
}
function lus(nu){raf=0;var dt=laatste?Math.min(50,nu-laatste)/1000:0;laatste=nu;t+=dt;x+=(doelX-x)*Math.min(1,dt*11);if(Math.abs(doelX-x)<.3)x=doelX;teken();
var rust=rm&&x===doelX;if(zicht&&!rust)raf=requestAnimationFrame(lus);}
function start(){if(!raf&&zicht){laatste=0;raf=requestAnimationFrame(lus);}}
function erin(){doelX=62;w.classList.add('is-in');start();}
function eruit(){doelX=0;w.classList.remove('is-in');start();}
knop.addEventListener('pointerenter',erin);knop.addEventListener('pointerleave',function(){if(document.activeElement!==knop)eruit();});
knop.addEventListener('focus',erin);knop.addEventListener('blur',eruit);
svg.addEventListener('pointerenter',erin);svg.addEventListener('pointerleave',function(){if(document.activeElement!==knop)eruit();});
if('IntersectionObserver' in window){new IntersectionObserver(function(e){zicht=e[0].isIntersecting;start();}).observe(w);}
teken();start();
}
init(document.querySelector('.jouw-container'));More components
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →