Content Lottie Icons Playful — Motion Lab

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

// Mechanisme: content-lottie-icons-playful
// Echte Lottie animaties via lottie-web — inline JSON, geen externe assets.
import lottie from 'https://esm.sh/[email protected]';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const anims = { heart: {/* lottie json */}, star: {}, check: {}, sparkle: {} };
document.querySelectorAll('[data-lottie]').forEach(el => {
  const key = el.getAttribute('data-lottie');
  const a = lottie.loadAnimation({
    container: el, renderer: 'svg', loop: true,
    autoplay: !reduce, animationData: anims[key]
  });
  if (reduce) a.goToAndStop(0, true);
  el.addEventListener('mouseenter', () => !reduce && a.setSpeed(2));
  el.addEventListener('mouseleave', () => !reduce && a.setSpeed(1));
});

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

<!-- Skeleton: content-lottie-icons-playful -->
<div class="lottie-grid">
  <div class="lottie-icon" data-lottie="heart"></div>
  <div class="lottie-icon" data-lottie="star"></div>
  <div class="lottie-icon" data-lottie="check"></div>
  <div class="lottie-icon" data-lottie="sparkle"></div>
</div>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: content-lottie-icons-playful */
:root {
  --block-bg: #fff8f0;
  --block-fg: #1a0f0a;
  --block-accent: #ff5b5b;
}
.lottie-grid { display:grid; grid-template-columns:repeat(4,minmax(0,96px)); gap:1.5rem; }
.lottie-icon { width:96px; height:96px; background:#fff; border-radius:18px; padding:.5rem; cursor:pointer; }

Playful Icons