Huis dat zich per bouwfase tekent New

A line drawing of a house that builds itself phase by phase: foundation, shell, roof, finishing and handover. Pick a phase and the drawing grows or shrinks to that point, with the current phase in orange and the weeks below. Plays once by itself when it comes into view. For the process page of a builder or contractor, or a new build project page.

Zo bouwen we uw huis in Drachten

Week 19: sleutel en oplevering

How 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.

<!-- Huis dat zich per bouwfase tekent · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7hb">
<p class="r7hb__h">Zo bouwen we uw huis in Drachten</p>
<div class="r7hb__grid">
<div class="r7hb__teken">
<svg class="r7hb__svg" viewBox="0 0 220 150" aria-hidden="true" focusable="false">
<path class="r7hb__vast" d="M8 136H212"/>
<g class="r7hb__f" data-f="0"><path pathLength="1" style="--i:0" d="M48 136V127H172V136"/><path pathLength="1" style="--i:1" d="M60 136L68 127M84 136L92 127M108 136L116 127M132 136L140 127M156 136L164 127"/></g>
<g class="r7hb__f" data-f="1"><path pathLength="1" style="--i:0" d="M56 127V78H164V127"/><path pathLength="1" style="--i:1" d="M56 102H164M56 90H110M110 114H164"/></g>
<g class="r7hb__f" data-f="2"><path pathLength="1" style="--i:0" d="M44 80L110 32L176 80"/><path pathLength="1" style="--i:1" d="M140 54V36H153V63"/><path pathLength="1" style="--i:2" d="M70 69L110 40L150 69"/></g>
<g class="r7hb__f" data-f="3"><path pathLength="1" style="--i:0" d="M70 92H94V114H70ZM82 92V114M70 103H94"/><path pathLength="1" style="--i:1" d="M126 92H150V114H126ZM138 92V114M126 103H150"/><path pathLength="1" style="--i:2" d="M100 127V100H120V127M115 114V115"/></g>
<g class="r7hb__f" data-f="4"><path pathLength="1" style="--i:0" d="M110 136L102 148M120 136L128 148"/><path pathLength="1" style="--i:1" d="M196 136V110M196 112C182 112 180 92 192 88C190 76 206 74 208 86C218 90 214 112 196 112"/><path pathLength="1" style="--i:2" d="M146 32C141 26 151 22 146 15C143 10 149 7 147 3"/><path pathLength="1" style="--i:3" d="M24 136V120M18 126L24 120L30 126"/></g>
</svg>
<p class="r7hb__st" aria-live="polite">Week 19: sleutel en oplevering</p>
</div>
<ol class="r7hb__fasen">
<li><button class="r7hb__b" type="button" data-f="0" aria-pressed="false">Fundering</button></li>
<li><button class="r7hb__b" type="button" data-f="1" aria-pressed="false">Ruwbouw</button></li>
<li><button class="r7hb__b" type="button" data-f="2" aria-pressed="false">Dak</button></li>
<li><button class="r7hb__b" type="button" data-f="3" aria-pressed="false">Afbouw</button></li>
<li><button class="r7hb__b" type="button" data-f="4" aria-pressed="true">Oplevering</button></li>
</ol>
</div>
</div>
</div>

/* Huis dat zich per bouwfase tekent · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7hb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7hb *,.r7hb *::before,.r7hb *::after{box-sizing:border-box}
.r7hb__h{margin:0;font:600 clamp(15px,4.6cqi,19px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em}
.r7hb__grid{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center;min-height:0}
.r7hb__teken{min-width:0}
.r7hb__svg{display:block;width:100%;height:auto;max-height:62cqh;overflow:visible}
.r7hb__svg path{fill:none;stroke:#0a0a0a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.r7hb__vast{stroke:#b9b6b0!important}
.r7hb__f path{stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:0;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1) calc(var(--i)*.16s),stroke .3s,stroke-opacity 0s linear .9s}
.r7hb__f.is-af path{stroke-dashoffset:0;stroke-opacity:1;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1) calc(var(--i)*.16s),stroke .3s,stroke-opacity 0s}
.r7hb__f.is-nu path{stroke:#F5480F;stroke-width:2.1}
.r7hb__st{margin:4px 0 0;font:500 13px/1.3 'Switzer',sans-serif;color:#45433f}
.r7hb__fasen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.r7hb__b{width:100%;min-height:28px;padding:4px 10px;text-align:left;border:0;border-left:2px solid #dedbd6;border-radius:0 4px 4px 0;background:transparent;color:#5a5853;font:500 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:color .16s,border-color .16s,background-color .16s}
.r7hb__b:hover{color:#0a0a0a;background:#f4f3f1}
.r7hb__b.is-af{color:#0a0a0a;border-left-color:#0a0a0a}
.r7hb__b[aria-pressed="true"]{color:#0a0a0a;border-left-color:#F5480F;font-weight:650}
.r7hb__b:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
@container (max-height:230px){.r7hb__b{min-height:26px;padding:3px 8px}.r7hb__grid{grid-template-columns:minmax(0,1fr) 100px}}
@media (prefers-reduced-motion:reduce){.r7hb__f path{transition:none}}

// Huis dat zich per bouwfase tekent · © 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('.r7hb');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var groepen=[].slice.call(w.querySelectorAll('.r7hb__f')),knoppen=[].slice.call(w.querySelectorAll('.r7hb__b')),st=w.querySelector('.r7hb__st');
var tekst=['Week 1 tot 3: grondwerk, heipalen en betonnen fundering','Week 4 tot 9: muren, vloeren en het casco','Week 10 en 11: kap, dakbeschot en pannen','Week 12 tot 18: kozijnen, deur en installaties','Week 19: sleutel en oplevering'];
function fase(n){
  groepen.forEach(function(g,i){g.classList.toggle('is-af',i<=n);g.classList.toggle('is-nu',i===n);});
  knoppen.forEach(function(b,i){b.setAttribute('aria-pressed',i===n?'true':'false');b.classList.toggle('is-af',i<n);});
  st.textContent=tekst[n];
}
knoppen.forEach(function(b,i){b.addEventListener('click',function(){gestopt=true;fase(i);});});
var gestopt=false;
function speel(){if(rm){fase(4);return;}fase(0);var i=0;(function volgende(){setTimeout(function(){if(gestopt)return;i++;if(i<5){fase(i);volgende();}},900);})();}
groepen.forEach(function(g){g.classList.remove('is-af');});
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){io.disconnect();speel();}},{threshold:.4});io.observe(w);}else fase(4);
}
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 →