Cover Flow

1"use client";
2 
3import { motion, type PanInfo, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type CoverFlowProps = Omit<
7  React.HTMLAttributes<HTMLDivElement>,
8  "children" | "onChange"
9> & {
10  /** Slides, in order. The centered one faces front. */
11  children?: React.ReactNode;
12  /** Index shown at center on mount. */
13  defaultIndex?: number;
14  /** Fired when the centered slide settles on a new index. */
15  onChange?: (index: number) => void;
16  /** Slide width in px. */
17  itemWidth?: number;
18  /** Slide height in px. */
19  itemHeight?: number;
20  /** Extra px added between slide centers, on top of the overlap. */
21  gap?: number;
22  /** CSS perspective depth for the 3D stage. */
23  perspective?: number;
24  /** Render a fading floor reflection under each slide. */
25  reflection?: boolean;
26};
27 
28// SPRING.smooth — surfaces / shared-layout morph.
29const MORPH_SPRING = {
30  type: "spring",
31  stiffness: 320,
32  damping: 32,
33  mass: 0.9,
34} as const;
35 
36const clampIndex = (v: number, count: number) =>
37  Math.max(0, Math.min(count - 1, v));
38 
39type CoverItemProps = {
40  offset: number;
41  spacing: number;
42  width: number;
43  height: number;
44  reflection: boolean;
45  reduce: boolean;
46  onSelect: () => void;
47  children: React.ReactNode;
48};
49 
50const CoverItem: React.FC<CoverItemProps> = ({
51  offset,
52  spacing,
53  width,
54  height,
55  reflection,
56  reduce,
57  onSelect,
58  children,
59}) => {
60  const sign = Math.sign(offset);
61  const abs = Math.abs(offset);
62  const near = Math.min(abs, 1);
63  const far = Math.max(abs - 1, 0);
64  // Neighbours sit a full pitch out; farther cards compress so the row
65  // telescopes toward the edges instead of scrolling off-screen.
66  const x = sign * (near * spacing + far * spacing * 0.55);
67  const rotateY = reduce ? 0 : -Math.max(-1, Math.min(1, offset)) * 52;
68  const z = reduce ? 0 : -Math.min(abs, 3) * 130;
69  const scale = 1 - Math.min(abs, 3) * 0.08;
70  const opacity =
71    abs > 3.4 ? 0 : Math.max(0.15, 1 - Math.max(abs - 1, 0) * 0.28);
72 
73  return (
74    <motion.div
75      className="absolute top-1/2 left-1/2 cursor-pointer [transform-style:preserve-3d]"
76      style={{
77        width,
78        height,
79        marginLeft: -width / 2,
80        marginTop: -height / 2,
81        zIndex: Math.round(100 - abs * 10),
82        transformPerspective: 1000,
83      }}
84      initial={false}
85      animate={{ x, rotateY, z, scale, opacity }}
86      transition={MORPH_SPRING}
87      onTap={onSelect}
88    >
89// … truncated