Hero met getekende pijlen en notities Nieuw

<!-- Hero met getekende pijlen en notities · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hnt">
<img class="hnt__img" src="https://neddev.com/lab-media/hk-notities-1.webp" alt="Donkergroene elektrische stadsfiets voor een bakstenen muur" width="1376" height="768">
<svg class="hnt__svg" viewBox="0 0 1000 625" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
<g class="hnt__a" style="--i:0"><path class="hnt__l" d="M250 108 C 320 100 370 130 392 186"/><path class="hnt__l hnt__k" d="M372 172 L 393 190 L 400 162"/></g>
<g class="hnt__a" style="--i:1"><path class="hnt__l" d="M590 170 C 600 230 570 290 528 336"/><path class="hnt__l hnt__k" d="M532 310 L 526 338 L 553 330"/></g>
<g class="hnt__a" style="--i:2"><path class="hnt__l" d="M290 532 C 360 530 420 500 462 452"/><path class="hnt__l hnt__k" d="M438 456 L 464 450 L 460 476"/></g>
</svg>
<p class="hnt__n" style="--i:0;left:3%;top:11%">Een week gratis proefrijden</p>
<p class="hnt__n" style="--i:1;left:50%;top:18%">Accu voor 110 km</p>
<p class="hnt__n" style="--i:2;left:3%;top:83%">Onderhoud in onze werkplaats</p>
<div class="hnt__txt">
<h2 class="hnt__h">Je volgende fiets staat in Utrecht</h2>
<a class="hnt__cta" href="#hk-notities">Plan een proefrit</a>
</div>
<button class="hnt__again" type="button">Nog eens</button>
</div>
</div>

/* Hero met getekende pijlen en notities · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hnt{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hnt *,.hnt *::before,.hnt *::after{box-sizing:border-box}
.hnt__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hnt__svg{position:absolute;inset:0;width:100%;height:100%}
.hnt__l{fill:none;stroke:#F5480F;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hnt__k{stroke-width:5}
.hnt.is-on .hnt__l{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.5,0,.3,1) calc(var(--i)*.9s + .2s)}
.hnt.is-on .hnt__k{transition-delay:calc(var(--i)*.9s + .8s);transition-duration:.25s}
.hnt__n{position:absolute;margin:0;color:#fff;font:600 clamp(13px,3.4cqi,20px)/1.2 'Switzer',sans-serif;font-style:italic;letter-spacing:-.01em;transform:rotate(-3deg) translateY(6px);opacity:0;white-space:nowrap;text-shadow:0 1px 2px rgba(10,10,10,.9),0 0 10px rgba(10,10,10,.75)}
.hnt.is-on .hnt__n{opacity:1;transform:rotate(-3deg);transition:opacity .35s ease calc(var(--i)*.9s + .85s),transform .35s ease calc(var(--i)*.9s + .85s)}
.hnt__txt{position:absolute;right:16px;bottom:14px;max-width:min(44%,300px);padding:12px 14px;background:#0a0a0a;color:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hnt__h{margin:0;font:700 clamp(15px,4.2cqi,26px)/1.08 'Switzer',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.hnt__cta{white-space:nowrap;padding:9px 14px;background:#F5480F;color:#0a0a0a;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hnt__cta:hover{background:#ff6a36}
.hnt__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hnt__again{position:absolute;top:12px;right:12px;min-height:30px;padding:0 10px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:500 12px/1 'Switzer',sans-serif;cursor:pointer}
.hnt__again:hover{background:#2a2a2a}
.hnt__again:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
@container (max-width:440px){.hnt__n{white-space:normal;max-width:40%;font-size:12px}.hnt__again{display:none}.hnt__txt{right:10px;bottom:10px;max-width:46%;padding:8px 10px;gap:6px}.hnt__h{font-size:14px}}
@media (prefers-reduced-motion:reduce){.hnt.is-on .hnt__l,.hnt.is-on .hnt__n{transition:none}}

// Hero met getekende pijlen en notities · © 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){
const w=root.querySelector('.hnt');if(!w)return;
w.querySelectorAll('.hnt__l').forEach(p=>p.setAttribute('pathLength','1'));
let tm=0;function play(){clearTimeout(tm);w.classList.remove('is-on');void w.offsetWidth;tm=setTimeout(()=>w.classList.add('is-on'),80);}
w.querySelector('.hnt__again').addEventListener('click',play);
if(matchMedia('(prefers-reduced-motion: reduce)').matches){w.classList.add('is-on');return;}
if('IntersectionObserver' in window){const io=new IntersectionObserver(es=>{if(es[0].isIntersecting){io.disconnect();play();}},{threshold:.4});io.observe(w);}else play();
}
init(document.querySelector('.jouw-container'));