Motion One Spring Cards — Free Spring-Physics Card Grid Snippet

<section class="msc-wrap">
  <header class="msc-head"><h1>Team Snapshot</h1><p>Hover a card, or drag one sideways — every motion here is Motion One's spring easing, not a linear or bezier curve.</p></header>
  <div class="msc-grid" id="mscGrid">
    <div class="msc-card" data-drag="true"><span class="msc-avatar" style="background:#6366f1">M</span><h3>Maya Chen</h3><p>Product Design</p></div>
    <div class="msc-card" data-drag="true"><span class="msc-avatar" style="background:#ec4899">R</span><h3>Ravi Patel</h3><p>Engineering</p></div>
    <div class="msc-card" data-drag="true"><span class="msc-avatar" style="background:#22c55e">S</span><h3>Sofia Reyes</h3><p>Growth</p></div>
    <div class="msc-card" data-drag="true"><span class="msc-avatar" style="background:#f59e0b">J</span><h3>Jamal Okafor</h3><p>Research</p></div>
  </div>
  <button class="msc-shuffle" id="mscShuffle">Shuffle in ↻</button>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0d16;color:#eef1fb;min-height:100vh}
.msc-wrap{max-width:760px;margin:0 auto;padding:60px 24px}
.msc-head{text-align:center;margin-bottom:44px}
.msc-head h1{font-size:clamp(28px,5vw,42px);letter-spacing:-.02em;margin-bottom:10px;background:linear-gradient(135deg,#fff,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.msc-head p{color:#8b93b0;font-size:15px;max-width:440px;margin:0 auto;line-height:1.6}
.msc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:32px}
.msc-card{
  background:linear-gradient(160deg,#161b2c,#0f1220);border:1px solid #232a41;border-radius:18px;
  padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  cursor:grab;touch-action:pan-y;opacity:0;transform:scale(.85);
}
.msc-card:active{cursor:grabbing}
.msc-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff}
.msc-card h3{font-size:16px;letter-spacing:-.01em}
.msc-card p{font-size:12px;color:#8b93b0}
.msc-shuffle{display:block;margin:0 auto;padding:11px 22px;border-radius:10px;border:1px solid #2b3350;background:#151a2c;color:#cdd4ee;font-size:14px;font-weight:600;cursor:pointer}
.msc-shuffle:hover{background:#1d2440}

// Motion One is loaded globally from the CDN as `Motion` (UMD build),
// exposing animate(), stagger(), and spring().
const { animate, stagger, spring } = Motion;

const cards = document.querySelectorAll('.msc-card');
const shuffleBtn = document.getElementById('mscShuffle');

// Entrance: spring physics instead of a duration/easing curve — spring()
// takes stiffness/damping-style parameters and settles naturally.
function enter() {
  animate(
    cards,
    { opacity: [0, 1], scale: [0.85, 1], y: [24, 0] },
    { delay: stagger(0.08), easing: spring({ stiffness: 220, damping: 18 }) }
  );
}
enter();

// Hover: a quick spring "pop" on scale, independent per card.
cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    animate(card, { scale: 1.05, y: -6 }, { easing: spring({ stiffness: 300, damping: 14 }) });
  });
  card.addEventListener('mouseleave', () => {
    animate(card, { scale: 1, y: 0 }, { easing: spring({ stiffness: 300, damping: 18 }) });
  });

  // Drag: simple pointer-driven horizontal drag that springs back to
  // center on release, using the same spring() easing as the entrance.
  let startX = 0, originX = 0, dragging = false;
  card.addEventListener('pointerdown', e => {
    dragging = true;
    startX = e.clientX;
    originX = 0;
    card.setPointerCapture(e.pointerId);
  });
  card.addEventListener('pointermove', e => {
    if (!dragging) return;
    originX = e.clientX - startX;
    card.style.transform = `translateX(${originX}px) rotate(${originX / 20}deg)`;
  });
  card.addEventListener('pointerup', () => {
    dragging = false;
    animate(card, { x: 0, rotate: 0 }, { easing: spring({ stiffness: 260, damping: 16 }) });
    card.style.transform = '';
  });
});

// Shuffle button: replay the staggered spring entrance.
shuffleBtn.addEventListener('click', () => {
  animate(cards, { opacity: [1, 0], scale: [1, 0.85], y: [0, 24] }, { duration: 0.15 })
    .finished.then(enter);
});