Content Lottie Icons Minimal — Motion Lab

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

// Mechanisme: content-lottie-icons-minimal
// Echte Lottie animaties via lottie-web — monochroom line-art, restrained loop.
import lottie from 'https://esm.sh/[email protected]';
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-minimal -->
<div class="lottie-grid">
  <div class="lottie-icon" data-lottie="circle"></div>
  <div class="lottie-icon" data-lottie="line"></div>
  <div class="lottie-icon" data-lottie="square"></div>
  <div class="lottie-icon" data-lottie="arrow"></div>
</div>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: content-lottie-icons-minimal */
:root {
  --block-bg: #fafafa;
  --block-fg: #0a0a0a;
  --block-accent: #0a0a0a;
}
.lottie-grid { display:grid; grid-template-columns:repeat(4,minmax(0,72px)); gap:2rem; }
.lottie-icon { width:72px; height:72px; }

Minimal icons