Diorama dat met de muis meeschuift New

A drawn landscape in six layers (sky with sun, distant hills, forest, tents, foreground and the text) that each shift at their own depth with the mouse or finger, as if you peek into a shoebox diorama. Without a pointer it sways very gently. Use it as the hero of a campsite, holiday park or nature organisation without a good photo. With reduced motion it stays still.

Kamperen tussen de heide

Camping De Hondsrug bij Exloo. Ruime plekken vanaf € 24 per nacht.

Reserveer een plek

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.

<!-- Diorama dat met de muis meeschuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hdi">
<div class="hdi__l" data-d="4" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><rect width="800" height="500" fill="#f4f3f1"/><circle cx="640" cy="160" r="56" fill="#F5480F"/></svg></div>
<div class="hdi__l" data-d="10" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-40 330 C 80 270 170 300 260 280 S 430 230 520 270 S 700 250 840 290 V 520 H -40 Z" fill="#d7d1c8"/></svg></div>
<div class="hdi__l" data-d="18" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-40 370 C 120 330 220 360 330 340 S 560 300 680 330 S 800 320 840 330 V 520 H -40 Z" fill="#a8a196"/><g fill="#6f6a62"><path d="M90 352 l14 -48 l14 48z"/><path d="M118 350 l11 -38 l11 38z"/><path d="M600 330 l16 -56 l16 56z"/><path d="M632 332 l12 -42 l12 42z"/><path d="M660 334 l10 -34 l10 34z"/></g></svg></div>
<div class="hdi__l" data-d="28" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-40 410 C 140 380 300 400 420 392 S 700 372 840 390 V 520 H -40 Z" fill="#4a463f"/><g><path d="M470 398 l38 -52 l38 52z" fill="#F5480F"/><path d="M508 346 l0 52" stroke="#0a0a0a" stroke-width="3"/><path d="M498 398 l10 -16 l10 16z" fill="#0a0a0a"/><path d="M560 396 l26 -36 l26 36z" fill="#f4f3f1"/><path d="M586 360 l0 36" stroke="#0a0a0a" stroke-width="2"/></g></svg></div>
<div class="hdi__l" data-d="44" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-60 452 C 160 430 380 446 560 438 S 760 430 860 440 V 520 H -60 Z" fill="#0a0a0a"/><g stroke="#0a0a0a" stroke-width="3" stroke-linecap="round"><path d="M700 444 q-6 -30 -2 -52"/><path d="M712 444 q4 -26 12 -40"/><path d="M690 446 q-14 -18 -20 -34"/><path d="M60 452 q-4 -24 4 -40"/><path d="M72 452 q8 -18 16 -26"/></g></svg></div>
<div class="hdi__txt hdi__l" data-d="-8">
<h2 class="hdi__h">Kamperen tussen de heide</h2>
<p class="hdi__p">Camping De Hondsrug bij Exloo. Ruime plekken vanaf € 24 per nacht.</p>
<a class="hdi__cta" href="#hk-diorama">Reserveer een plek</a>
</div>
</div>
</div>

/* Diorama dat met de muis meeschuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hdi{position:absolute;inset:0;overflow:hidden;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;touch-action:pan-y}
.hdi *,.hdi *::before,.hdi *::after{box-sizing:border-box}
.hdi__l{position:absolute;inset:-7% -7% -8% -7%;will-change:transform}
.hdi__l svg{display:block;width:100%;height:100%}
.hdi__txt{inset:auto;left:20px;top:16px;right:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hdi__h{margin:0;font:700 clamp(20px,7cqi,42px)/1.02 'Switzer',sans-serif;letter-spacing:-.025em;max-width:9em}
.hdi__p{margin:0;max-width:min(22em,58%);font:400 clamp(12px,2.9cqi,15px)/1.4 'Switzer',sans-serif;color:#2a2722}
.hdi__cta{margin-top:4px;padding:9px 14px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hdi__cta:hover{background:#F5480F;color:#0a0a0a}
.hdi__cta:focus-visible{outline:2px solid #F5480F;outline-offset:3px}

// Diorama dat met de muis meeschuift · © 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('.hdi');if(!w)return;
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const L=[...w.querySelectorAll('.hdi__l')].map(el=>({el,d:+el.dataset.d||0}));
let tx=0,ty=0,x=0,y=0,raf=0,hover=false,vis=true,t0=performance.now();
function frame(n){if(!hover){const s=(n-t0)/1000;tx=Math.sin(s*.5)*.35;ty=Math.sin(s*.33)*.15;}
x+=(tx-x)*.08;y+=(ty-y)*.08;const f=Math.min(2,Math.max(.7,w.clientWidth/500));
for(const l of L)l.el.style.transform='translate3d('+(-x*l.d*.6*f).toFixed(2)+'px,'+(-y*l.d*.3*f).toFixed(2)+'px,0)';
raf=vis?requestAnimationFrame(frame):0;}
w.addEventListener('pointermove',e=>{const r=w.getBoundingClientRect();hover=true;tx=((e.clientX-r.left)/r.width-.5)*2;ty=((e.clientY-r.top)/r.height-.5)*2;});
w.addEventListener('pointerleave',()=>{hover=false;t0=performance.now();});
if('IntersectionObserver' in window){new IntersectionObserver(es=>{vis=es[0].isIntersecting;if(vis&&!raf)raf=requestAnimationFrame(frame);}).observe(w);}
raf=requestAnimationFrame(frame);
}
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 →