cards-slider

1"use client";
2 
3/**
4 * Cards Slider — an infinite deck of product cards. The active card sits
5 * front-and-centre while the rest fan out behind it, each one stepped back
6 * with less scale, a touch of rotation and a soft blur. Drag, click a peeking
7 * card, or let it auto-advance; the index wraps forever so the deck never ends.
8 */
9 
10import { motion } from "framer-motion";
11import { useEffect, useState } from "react";
12 
13type Card = { title: string; image: string };
14 
15const CARDS: Card[] = [
16  {
17    title: "ZV210",
18    image:
19      "https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=800&auto=format&fit=crop",
20  },
21  {
22    title: "AX90",
23    image:
24      "https://images.unsplash.com/photo-1604871000636-074fa5117945?q=80&w=800&auto=format&fit=crop",
25  },
26  {
27    title: "NOVA",
28    image:
29      "https://images.unsplash.com/photo-1620421680010-0766ff230392?q=80&w=800&auto=format&fit=crop",
30  },
31  {
32    title: "DRIFT",
33    image:
34      "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=800&auto=format&fit=crop",
35  },
36  {
37    title: "PULSE",
38    image:
39      "https://images.unsplash.com/photo-1557672172-298e090bd0f1?q=80&w=800&auto=format&fit=crop",
40  },
41];
42 
43const VISIBLE = 2; // cards shown on each side of the active one
44const SPACING = 56; // px each step fans sideways
45const DRAG_THRESHOLD = 70; // px before a drag commits to a step
46 
47const offsetFrom = (i: number, active: number, len: number) => {
48  let d = (((i - active) % len) + len) % len;
49  if (d > len / 2) d -= len;
50  return d;
51};
52 
53const CardsSlider = () => {
54  const [active, setActive] = useState(0);
55  const [paused, setPaused] = useState(false);
56  const len = CARDS.length;
57 
58  useEffect(() => {
59    if (paused) return;
60    const id = setInterval(() => setActive((a) => a + 1), 2600);
61    return () => clearInterval(id);
62  }, [paused]);
63 
64  return (
65    <div
66      className="relative flex h-[80vh] w-full select-none items-center justify-center overflow-hidden"
67      onPointerEnter={() => setPaused(true)}
68      onPointerLeave={() => setPaused(false)}
69    >
70      <div className="relative h-96 w-72">
71        {CARDS.map((card, i) => {
72          const offset = offsetFrom(i, active, len);
73          const abs = Math.abs(offset);
74          const hidden = abs > VISIBLE;
75          const isActive = offset === 0;
76 
77          return (
78            <motion.div
79              key={card.title}
80              className={`absolute inset-0 overflow-hidden rounded-3xl shadow-2xl ${
81// … truncated