Hero met getekende pijlen en notities New

A product photo on which hand-drawn arrows draw themselves one by one towards the parts that matter, each with a short note (110 km battery, a free week-long test ride, servicing in our own workshop). SVG strokes with stroke-dashoffset, starting when the hero scrolls into view. Use it as the hero of a bike shop, kitchen showroom or shop with one main product. With reduced motion arrows and notes show at once.

Donkergroene elektrische stadsfiets voor een bakstenen muur

Een week gratis proefrijden

Accu voor 110 km

Onderhoud in onze werkplaats

Je volgende fiets staat in Utrecht

Plan een proefrit

How to use it

Paste the HTML where the hero styles 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.

<!-- 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'));

More hero styles

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 →