Content Lottie Icons Brutalist — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: content-lottie-icons-brutalist
// Echte Lottie animaties via lottie-web — harde mono shapes, instant transitions.
import lottie from 'https://esm.sh/lottie-web@5.12.2';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('[data-lottie]').forEach(el => {
  const a = lottie.loadAnimation({
    container: el, renderer: 'svg', loop: true,
    autoplay: !reduce, animationData: window.__lottieIcons[el.dataset.lottie]
  });
  if (reduce) a.goToAndStop(0, true);
});

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: content-lottie-icons-brutalist -->
<div class="lottie-grid">
  <div class="lottie-icon" data-lottie="block"></div>
  <div class="lottie-icon" data-lottie="tri"></div>
  <div class="lottie-icon" data-lottie="cross"></div>
  <div class="lottie-icon" data-lottie="bar"></div>
</div>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: content-lottie-icons-brutalist */
:root {
  --block-bg: #f0f0f0;
  --block-fg: #000;
  --block-accent: #000;
}
.lottie-grid { display:grid; grid-template-columns:repeat(4,minmax(0,88px)); gap:1rem; }
.lottie-icon { width:88px; height:88px; background:#fff; border:2px solid #000; }

BRUTALIST/ICONS