// Mechanisme: content-physics-cards-minimal
import Matter from 'https://esm.sh/matter-js@0.19.0';
(() => {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint } = Matter;
  const host = document.querySelector('.matter-host');
  if (!host) return;
  const W = host.clientWidth, H = host.clientHeight;
  const eng = Engine.create();
  const rend = Render.create({ element: host, engine: eng, options: { width: W, height: H, wireframes: false, background: 'transparent' } });
  const cards = Array.from({ length: 7 }, (_, i) => Bodies.rectangle(60 + (i * (W - 120)) / 6, -40 - i * 30, 110, 70, { restitution: 0.4, friction: 0.06, render: { fillStyle: '#ffffff', strokeStyle: '#1a1a1a', lineWidth: 1 }, chamfer: { radius: 4 } }));
  Composite.add(eng.world, [
    Bodies.rectangle(W / 2, H + 25, W, 50, { isStatic: true, render: { visible: false } }),
    Bodies.rectangle(-25, H / 2, 50, H, { isStatic: true, render: { visible: false } }),
    Bodies.rectangle(W + 25, H / 2, 50, H, { isStatic: true, render: { visible: false } }),
    ...cards,
  ]);
  Composite.add(eng.world, MouseConstraint.create(eng, { mouse: Mouse.create(rend.canvas), constraint: { stiffness: 0.2, render: { visible: false } } }));
  Render.run(rend);
  Runner.run(Runner.create(), eng);
})();

<!-- Skeleton: content-physics-cards-minimal -->
<div class="matter-host" style="position:relative;height:60vh"></div>

/* Styling: content-physics-cards-minimal */
.matter-host { position: relative; height: 60vh; overflow: hidden; background: #fafafa; }
.matter-host canvas { display: block; }