Inertia Gallery

1"use client";
2 
3import {
4  animate,
5  type MotionValue,
6  motion,
7  useMotionTemplate,
8  useMotionValue,
9  useReducedMotion,
10  useTransform,
11} from "framer-motion";
12import * as React from "react";
13 
14export type InertiaGalleryProps = Omit<
15  React.HTMLAttributes<HTMLDivElement>,
16  "children" | "onChange"
17> & {
18  /** Slides, in order. */
19  children?: React.ReactNode;
20  /** Slide width in px. */
21  itemWidth?: number;
22  /** Gap between slides in px. */
23  gap?: number;
24  /** Snap the nearest slide to center when the throw settles. */
25  snap?: boolean;
26  /** 0 disables the distance-from-center scale/blur/opacity falloff. */
27  falloff?: number;
28  /** Slide centered on mount. */
29  defaultIndex?: number;
30  /** Fired when a new slide reaches center. */
31  onChange?: (index: number) => void;
32};
33 
34// SPRING.smooth — surfaces / settle.
35const SETTLE_SPRING = {
36  type: "spring",
37  stiffness: 320,
38  damping: 32,
39  mass: 0.9,
40} as const;
41 
42const clamp = (v: number, lo: number, hi: number) =>
43  Math.max(lo, Math.min(hi, v));
44 
45type ItemProps = {
46  offset: number;
47  pitch: number;
48  x: MotionValue<number>;
49  falloff: number;
50  reduce: boolean;
51  width: number;
52  children: React.ReactNode;
53};
54 
55const InertiaItem: React.FC<ItemProps> = ({
56  offset,
57  pitch,
58  x,
59  falloff,
60  reduce,
61  width,
62  children,
63}) => {
64  // Normalised distance of this slide's center from the viewport center.
65  const nd = useTransform(x, (xv) =>
66    Math.min(Math.abs(offset + xv) / pitch, 2.4),
67  );
68  const scale = useTransform(nd, (d) => 1 - d * 0.14 * falloff);
69  const opacity = useTransform(nd, (d) => clamp(1 - d * 0.3 * falloff, 0.4, 1));
70  const blurPx = useTransform(nd, (d) =>
71    reduce ? 0 : Math.min(d * 3.2, 5) * falloff,
72  );
73  const filter = useMotionTemplate`blur(${blurPx}px)`;
74 
75  return (
76    <motion.div
77      className="relative shrink-0"
78      style={{ width, scale, opacity, filter }}
79    >
80      <div className="aspect-[3/4] size-full overflow-hidden rounded-2xl border border-border bg-card shadow-xl">
81        {children}
82      </div>
83    </motion.div>
84  );
85};
86 
87const InertiaGallery = React.forwardRef<HTMLDivElement, InertiaGalleryProps>(
88  (
89    {
90      children,
91      itemWidth = 200,
92      gap = 24,
93      snap = false,
94      falloff = 1,
95      defaultIndex = 0,
96      onChange,
97      className,
98      ...props
99    },
100    forwardedRef,
101  ) => {
102    const reduce = useReducedMotion() ?? false;
103    const items = React.Children.toArray(children);
104    const count = items.length;
105// … truncated