Animated Gradient Hero (zonder JS)

We maken een hero met een subtiel geanimeerd kleurenspel op basis van je design tokens. Alles gebeurt met CSS. Dankzij prefers-reduced-motion respecteert de site de OS-instelling: bij no-preference draait de animatie, bij reduce staat ze automatisch uit — geen JavaScript nodig.

8.1 Markup

<header class="hero hero--gradient" role="banner">
  <div class="container text-center py-5 position-relative">
    <h1 class="fw-bold mb-2">Welkom op onze site</h1>
    <p class="lead mb-3">Licht, modern en token-gedreven.</p>
    <a class="btn btn-primary me-2" href="#main-content">Start hier</a>
    <a class="btn btn-outline-primary" href="/over.html">Meer info</a>
  </div>
</header>

<main id="main-content" class="container">
  <h2 class="pt-4">Sectie 1</h2>
  <p>Inhoud…</p>
</main>

8.2 CSS in assets/css/custom.css

Subtiele, draaiende lichtvlekken via een conic-gradient + @property. Alles kleurt mee met je tokens.

/* ---- Hero basis (compatibel met stap 7) ---- */
header.hero{
  min-height: clamp(40vh, 55vh, 60vh);
  position: relative;
  display: grid; place-items: center;
  overflow: clip; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand-bg), white 6%), var(--brand-bg));
}

/* ---- Animated gradient laag (blurred glow) ---- */
header.hero.hero--gradient::before{
  content: "";
  position: absolute; inset: -25% -15%;
  z-index: -1;
  filter: blur(60px) saturate(120%);
  opacity: .35;                 /* hou het subtiel */
  /* conic gradient op je merk-variabelen */
  background: conic-gradient(from var(--hero-angle, 0deg) at 50% 50%,
    color-mix(in oklab, var(--brand-primary),  white 25%) 0deg,
    color-mix(in oklab, var(--brand-accent),   white 25%) 120deg,
    color-mix(in oklab, var(--brand-secondary),white 30%) 240deg,
    color-mix(in oklab, var(--brand-primary),  white 25%) 360deg
  );
}

/* Animatie-eigenschap (vloeiend interpoleren) */
@property --hero-angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Beweeg héél traag; respecteer motion-voorkeuren */
@media (prefers-reduced-motion: no-preference){
  header.hero.hero--gradient::before{
    animation: hero-rotate 40s linear infinite;
  }
}
@keyframes hero-rotate{
  to{ --hero-angle: 360deg; }
}

/* Tekst blijft leesbaar op lichte/donkere thema's */
header.hero.hero--gradient :is(h1,.lead){ color: var(--brand-text); }

8.3 Snel testen

• Zie je een héél subtiele, langzame kleurbeweging achter de content?
• Zet OS-instelling “Reduce motion” aan → animatie stopt.
• Pas --brand-primary/--brand-accent in je tokens aan → de hero kleurt meteen mee.

Checklist

• Geen JS, alleen CSS (@property + conic-gradient).
• Motion-vriendelijke defaults, subtiel gehouden (opacity: .35, 40s duur).
• Volledig token-gedreven; thema-wissel werkt automatisch.