Logo onthult zich eenmalig New

The brand mark appears, the quay line draws itself and the wordmark slides out from behind it; then everything rests. Plays once when it enters the viewport (IntersectionObserver), with a replay button. CSS keyframes with clip-path and stroke-dashoffset; with reduced motion only a short fade. Without JS the logo is simply shown.

Woningen en verbouwingen aan het water, vanuit Maarssen.

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.

<!-- Logo onthult zich eenmalig · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lgo">
<div class="lgo__stage">
<div class="lgo__logo" role="img" aria-label="Kade Architecten">
<svg class="lgo__mark" viewBox="0 0 48 48" aria-hidden="true"><rect class="lgo__sq" x="0" y="0" width="48" height="48" rx="4"/><path class="lgo__line" pathLength="1" d="M9 32h13V18h17"/></svg>
<span class="lgo__word" aria-hidden="true"><span class="lgo__w1">Kade</span><span class="lgo__w2">architecten</span></span>
</div>
<p class="lgo__tag">Woningen en verbouwingen aan het water, vanuit Maarssen.</p>
</div>
<button class="lgo__again" type="button">Opnieuw afspelen</button>
</div>
</div>

/* Logo onthult zich eenmalig · NedDev · eigen werk. */
.lgo{position:absolute;inset:0;background:#0a0a0a;color:#fff;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.lgo__stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16px 30px}
.lgo__logo{display:flex;align-items:center;gap:clamp(10px,2.6cqi,16px);--lgo-shift:0px}
.lgo__mark{width:clamp(38px,11cqi,60px);height:auto;flex:none;position:relative;z-index:1}
.lgo__sq{fill:#F5480F}
.lgo__line{fill:none;stroke:#0a0a0a;stroke-width:4;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:0}
.lgo__word{display:flex;align-items:baseline;gap:.28em;font-size:clamp(22px,7.2cqi,42px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.lgo__w1{font-weight:700}
.lgo__w2{font-weight:400;color:#d6d3ce}
.lgo__tag{margin:0;font:400 clamp(12px,3cqi,15px)/1.4 'Switzer',sans-serif;color:#b9b6b0;text-align:center;max-width:28em}
.lgo__again{position:absolute;right:12px;bottom:12px;margin:0;padding:8px 12px;border:1px solid rgba(255,255,255,.5);border-radius:4px;background:transparent;color:#fff;font:500 12px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,border-color .16s}
.lgo__again:hover{background:#262626;border-color:#fff}
.lgo__again:active{transform:translateY(1px)}
.lgo__again:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.lgo--wacht .lgo__logo,.lgo--wacht .lgo__tag{opacity:0}
@media (prefers-reduced-motion:no-preference){
.lgo--play .lgo__logo{animation:lgo-schuif .8s cubic-bezier(.6,0,.2,1) .75s both}
.lgo--play .lgo__mark{animation:lgo-mark .5s cubic-bezier(.2,.7,.2,1) both}
.lgo--play .lgo__line{animation:lgo-lijn .55s ease-out .3s both}
.lgo--play .lgo__word{animation:lgo-woord .8s cubic-bezier(.6,0,.2,1) .75s both}
.lgo--play .lgo__tag{animation:lgo-fade .5s ease 1.5s both}}
@media (prefers-reduced-motion:reduce){.lgo--play .lgo__logo,.lgo--play .lgo__tag{animation:lgo-fade .3s ease both}}
@keyframes lgo-mark{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes lgo-lijn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lgo-schuif{from{transform:translateX(var(--lgo-shift))}to{transform:none}}
@keyframes lgo-woord{from{clip-path:inset(0 100% 0 0);transform:translateX(-18px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes lgo-fade{from{opacity:0}to{opacity:1}}

// Logo onthult zich eenmalig · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.lgo');if(!w)return;
var logo=w.querySelector('.lgo__logo'),word=w.querySelector('.lgo__word'),mark=w.querySelector('.lgo__mark'),btn=w.querySelector('.lgo__again'),played=false;
function play(){var gap=parseFloat(getComputedStyle(logo).columnGap)||12;logo.style.setProperty('--lgo-shift',((word.offsetWidth+gap)/2).toFixed(1)+'px');
w.classList.remove('lgo--play','lgo--wacht');void w.offsetWidth;w.classList.add('lgo--play');played=true;}
btn.addEventListener('click',play);
if('IntersectionObserver' in window){w.classList.add('lgo--wacht');var io=new IntersectionObserver(function(es){if(es[0].isIntersecting&&!played){play();io.disconnect();}},{threshold:.5});io.observe(w);}
}
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 →