릴 레이아웃

<div class="frame">
  <div class="reel" id="reel">
    <div class="card">1</div><div class="card">2</div><div class="card">3</div>
    <div class="card">4</div><div class="card">5</div><div class="card">6</div>
  </div>
</div>

.frame{width:min(80%,440px);box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}
.reel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:64px;height:64px;border-radius:10px;background:var(--accent);scroll-snap-align:start;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}
.card:nth-child(even){background:var(--accent-3)}

const reel = document.getElementById('reel');
let dir = 1;
function tick() {
  const max = reel.scrollWidth - reel.clientWidth;
  reel.scrollLeft += dir * 0.7;
  if (reel.scrollLeft >= max - 1) dir = -1;
  if (reel.scrollLeft <= 1) dir = 1;
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);