CSS-lab · Hero's

Grid-reveal hero

Een raster van tegels valt bij het laden diagonaal weg en onthult een hero met kop, intro en knoppen. Het raster blijft als fijn lijnwerk achter. Pure CSS.

Gevorderd
Pure CSS
MIT-licentie
CSS grid
@keyframes
animation-delay met calc()
custom properties (--i)
animation-fill-mode

HTML

<section class="grh-hero">
  <div class="grh-content">
    <p class="grh-kicker">Webdesign · Development · Groei</p>
    <h2 class="grh-title">Achter elk raster zit een <span class="grh-accent">plan</span></h2>
    <p class="grh-intro">We breken je merk op in bouwstenen en zetten het weer in elkaar als een website die klopt: snel, toegankelijk en gemaakt om te converteren.</p>
    <div class="grh-actions">
      <a href="#" class="grh-btn grh-btn--primary">Start je project</a>
      <a href="#" class="grh-btn">Hoe wij werken</a>
    </div>
  </div>
  <div class="grh-tiles" aria-hidden="true">
    <span style="--i:0"></span><span style="--i:1"></span><span style="--i:2"></span><span style="--i:3"></span><span style="--i:4"></span><span style="--i:5"></span>
    <span style="--i:1"></span><span style="--i:2"></span><span style="--i:3"></span><span style="--i:4"></span><span style="--i:5"></span><span style="--i:6"></span>
    <span style="--i:2"></span><span style="--i:3"></span><span style="--i:4"></span><span style="--i:5"></span><span style="--i:6"></span><span style="--i:7"></span>
    <span style="--i:3"></span><span style="--i:4"></span><span style="--i:5"></span><span style="--i:6"></span><span style="--i:7"></span><span style="--i:8"></span>
  </div>
</section>

CSS

/* Grid-reveal hero: tegels vallen diagonaal weg */
.grh-hero {
  --bg: #0C0C0D;
  --ink: #F9F8F6;
  --accent: #C6FF3D;
  --accent-2: #2E5BFF;
  --tile: #18181B;
  --line: rgba(249, 248, 246, .07);
  --stagger: 90ms;
  --start: 250ms;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 520px;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px);
  overflow: hidden;
  /* Raster blijft als lijnwerk achter */
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) 25%;
  color: var(--ink);
  font-family: system-ui, sans-serif;
  text-align: center;
}

.grh-content {
  position: relative;
  max-width: 820px;
  animation: grh-rise .8s cubic-bezier(.2, .8, .2, 1) calc(var(--start) + 8 * var(--stagger)) both;
}

.grh-kicker {
  margin: 0 0 18px;
  font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.grh-title {
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: clamp(36px, 6.4vw, 84px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.grh-accent {
  padding: 0 .12em;
  background: var(--accent);
  color: var(--bg);
}

.grh-intro {
  max-width: 52ch;
  margin: 20px auto 28px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(249, 248, 246, .8);
}

.grh-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.grh-btn {
  display: inline-flex;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  font: 700 15px/1 system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.grh-btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.grh-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.grh-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Tegelraster boven de inhoud, klikken gaan erdoorheen */
.grh-tiles {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.grh-tiles span {
  border: 1px solid var(--line);
  background: var(--tile);
  animation: grh-drop .7s cubic-bezier(.6, 0, .4, 1) calc(var(--start) + var(--i, 0) * var(--stagger)) both;
}

/* Een paar accenttegels voor ritme */
.grh-tiles span:nth-child(5n+2) { background: var(--accent); }
.grh-tiles span:nth-child(7n+4) { background: var(--accent-2); }

@keyframes grh-drop {
  to { opacity: 0; transform: translateY(30%) rotate(6deg) scale(.6); }
}

@keyframes grh-rise {
  from { opacity: 0; transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .grh-tiles { display: none; }
  .grh-content { animation: none; }
  .grh-btn { transition: none; }
}

Wat het is en waar je het gebruikt

Bij deze hero ligt bij het laden een raster van 24 tegels over de inhoud. De tegels vallen één voor één weg, in een diagonale golf van linksboven naar rechtsonder, en onthullen de kop, intro en knoppen. Daarna blijft het raster subtiel zichtbaar als dunne lijnen op de achtergrond. Zo voelt de hero gebouwd in plaats van gewoon getoond.

Het effect past goed bij de homepage van een bureau, een portfolio of een lanceringspagina waar de eerste seconde indruk moet maken. Omdat het maar één keer afspeelt, gaat het niet vervelen en zit het de inhoud daarna niet in de weg.

Zo werkt het

Het raster: .grh-tiles ligt absoluut over de hero en is een CSS grid met repeat(6, 1fr) kolommen en repeat(4, 1fr) rijen. Met pointer-events: none blijven de knoppen eronder altijd klikbaar.
Diagonale stagger: elke tegel krijgt in de HTML een --i, de som van rij en kolom. De vertraging is calc(var(--start) + var(--i, 0) * var(--stagger)). Tegels met dezelfde som vallen tegelijk, zo ontstaat de diagonaal.
Wegvallen: de keyframes grh-drop hebben alleen een to-stap met opacity: 0 en een combinatie van translateY, rotate en scale. Dankzij animation-fill-mode: both blijven de tegels daarna weg.
Ritme: :nth-child(5n+2) en :nth-child(7n+4) kleuren een paar tegels lime en cobalt, zodat het raster niet saai grijs is.
Lijnwerk: de hero zelf heeft twee linear-gradient-lagen met background-size: calc(100% / 6) 25%. Die lijnen vallen precies samen met de tegels.
Inhoud: .grh-content schuift met grh-rise omhoog zodra de laatste diagonaal valt; de vertraging rekent met 8 * var(--stagger).

Aanpassen

--stagger: tijd tussen twee diagonalen. Lager is sneller.
--start: wachttijd voordat de eerste tegel valt.
--tile en --line: kleur van de tegels en het lijnwerk.
--accent en --accent-2: accenttegels, het gemarkeerde woord en de primaire knop.

Wil je een ander patroon? Geef de tegels in de HTML een andere --i. Met alleen het kolomnummer krijg je een gordijn van links naar rechts; met de afstand tot het midden krijg je een explosie vanuit het centrum. Werkt --i niet, bijvoorbeeld omdat je CMS inline styles verwijdert, dan valt alles tegelijk weg via de fallback var(--i, 0).

Toegankelijkheid en browsersupport

Het tegelraster is aria-hidden="true" en blokkeert geen klikken. De inhoud staat vanaf het begin in de DOM, dus screenreaders hoeven niet op de animatie te wachten. Met prefers-reduced-motion: reduce worden de tegels helemaal verborgen en staat de inhoud direct stil in beeld. Alles draait op grid, keyframes en calc() met custom properties en werkt in alle actuele browsers.

Verder lezen

Een onthulling werkt als een microinteractie op paginaniveau: kort, doelgericht en met een duidelijk eindpunt. Meer daarover lees je in ons artikel over microinteracties in UX. Benieuwd hoe we dit soort beweging in een complete site inzetten? Bekijk interactief webdesign en animaties.

Licentie & credit

Gratis te gebruiken onder de MIT-licentie, ook in commerciële projecten. Een link terug is niet verplicht, maar wordt enorm gewaardeerd:

Credit-link

<a href="https://manifestdigital.nl/css-snippets/grid-reveal-hero/">Grid-reveal hero door Manifest Digital</a>

Wil je deze stijl op maat, gekoppeld aan je merk en met scroll-animaties? Bekijk interactief webdesign →

Meer hero's

Nog meer gedurfde CSS

Hero's · GemiddeldBrutalist split-screen heroBekijk & kopieer code

Hero's · GemiddeldKinetische typografie-heroBekijk & kopieer code

Hero's · GevorderdMesh-gradient heroBekijk & kopieer code

Alle CSS-snippets →

Grid-reveal hero

Achter elk raster zit een plan

Wat het is en waar je het gebruikt

Zo werkt het

Aanpassen

Toegankelijkheid en browsersupport

Verder lezen

Nog meer gedurfde CSS

Rauw ontwerp. Strakke code.

Websites die bewegen en raken

Kleur die beweegt, merken die blijven