Klok die de tijd in woorden zegt New

A grid of letters in which the real time lights up as a Dutch sentence, the way you would say it: het is tien voor half vier. Single minutes show as dots below, the digital time beside it. The button skips ahead five minutes, Nu resets it. For the hero or opening hours of a café, lunchroom or watchmaker.

Koffiebar Mout, Nijmegen

How to use it

Paste the HTML where the text animations 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.

<!-- Klok die de tijd in woorden zegt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7k">
<div class="t7k__clock" role="img" aria-label="Het is">
<div class="t7k__grid" aria-hidden="true"></div>
<div class="t7k__dots" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
</div>
<div class="t7k__side">
<h3 class="t7k__h">Koffiebar Mout, Nijmegen</h3>
<p class="t7k__t" aria-hidden="true">00:00</p>
<div class="t7k__acts"><button class="t7k__btn" type="button" data-k="plus" aria-label="Vijf minuten verder">+5 min</button><button class="t7k__btn" type="button" data-k="nu" aria-label="Terug naar de huidige tijd">Nu</button></div>
</div>
</div>
</div>

/* Klok die de tijd in woorden zegt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7k{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,4cqi,26px);padding:12px 16px;container-type:size;font-family:'Switzer',sans-serif;background:#0a0a0a;color:#fff;box-sizing:border-box;--c:min(5.2cqi,8.4cqh)}
.t7k__clock{display:flex;flex-direction:column;align-items:center;gap:6px}
.t7k__grid{display:grid;grid-template-columns:repeat(11,var(--c));grid-auto-rows:var(--c)}
.t7k__grid span{display:flex;align-items:center;justify-content:center;font-weight:500;font-size:max(12px,calc(var(--c)*.64));line-height:1;color:#5a5a5a;transition:color .5s ease,font-weight .5s}
.t7k__grid span.is-on{color:#fff;font-weight:700}
.t7k__dots{display:flex;gap:8px}
.t7k__dots i{width:6px;height:6px;border-radius:50%;background:#3a3a3a;transition:background-color .4s}
.t7k__dots i.is-on{background:#F5480F}
.t7k__side{display:flex;flex-direction:column;gap:6px;max-width:150px}
.t7k__h{margin:0;font-weight:600;font-size:clamp(12px,3.3cqi,15px);line-height:1.3;color:#d8d6d2}
.t7k__t{margin:0;font-weight:700;font-size:clamp(22px,7cqi,34px);line-height:1;letter-spacing:-.02em;color:#F5480F;font-variant-numeric:tabular-nums}
.t7k__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.t7k__btn{min-height:30px;min-width:36px;padding:6px 9px;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:transparent;color:#fff;font:600 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,color .16s}
.t7k__btn:hover{background:#fff;color:#0a0a0a}
.t7k__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Klok die de tijd in woorden zegt · © 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('.t7k'),grid=w.querySelector('.t7k__grid'),clock=w.querySelector('.t7k__clock'),dig=w.querySelector('.t7k__t'),dots=w.querySelectorAll('.t7k__dots i');
var ROWS=['hetxiszvijf','tienqkwartb','voordoverjl','halfkeensta','tweepdriejo','viervijfzes','zevenachtmo','negentienwl','elftwaalfgo','nukoffieuur'];
var cells=[];ROWS.forEach(function(r){r.split('').forEach(function(ch){var s=document.createElement('span');s.textContent=ch;grid.appendChild(s);cells.push(s);});});
var Wd={het:[0,0,3],is:[0,4,2],vijfm:[0,7,4],tienm:[1,0,4],kwart:[1,5,5],voor:[2,0,4],over:[2,5,4],half:[3,0,4],uur:[9,8,3]};
var HR=[[8,3,6],[3,5,3],[4,0,4],[4,5,4],[5,0,4],[5,4,4],[5,8,3],[6,0,5],[6,5,4],[7,0,5],[7,5,4],[8,0,3]];
var HN=['twaalf','een','twee','drie','vier','vijf','zes','zeven','acht','negen','tien','elf'];
var off=0;
function render(){var d=new Date(Date.now()+off*60000),hh=d.getHours(),mm=d.getMinutes(),r=Math.floor(mm/5),ex=mm%5;
var on=[Wd.het,Wd.is],say=['het is'],H=hh%12,H1=(hh+1)%12;
var plan=[[['uur'],0],[['vijfm','over'],0],[['tienm','over'],0],[['kwart','over'],0],[['tienm','voor','half'],1],[['vijfm','voor','half'],1],[['half'],1],[['vijfm','over','half'],1],[['tienm','over','half'],1],[['kwart','voor'],1],[['tienm','voor'],1],[['vijfm','voor'],1]][r];
var hourIdx=plan[1]?H1:H,words=plan[0];
if(r===0){on.push(HR[hourIdx]);on.push(Wd.uur);say.push(HN[hourIdx]+' uur');}else{words.forEach(function(k){on.push(Wd[k]);say.push(k.replace(/m$/,''));});on.push(HR[hourIdx]);say.push(HN[hourIdx]);}
var lit={};on.forEach(function(p){for(var i=0;i<p[2];i++)lit[p[0]*11+p[1]+i]=1;});cells.forEach(function(c,i){c.classList.toggle('is-on',!!lit[i]);});
dots.forEach(function(dt,i){dt.classList.toggle('is-on',i<ex);});
var s=say.join(' ');s=s.charAt(0).toUpperCase()+s.slice(1);var dg=(hh<10?'0':'')+hh+':'+(mm<10?'0':'')+mm;clock.setAttribute('aria-label',s+' ('+dg+')');
dig.textContent=dg;}
w.querySelectorAll('.t7k__btn').forEach(function(b){b.addEventListener('click',function(){if(b.dataset.k==='nu')off=0;else off+=5;render();});});
render();var iv=setInterval(function(){if(!w.isConnected){clearInterval(iv);return;}render();},10000);
}
init(document.querySelector('.jouw-container'));

More text animations

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 →