Vertical Scene Gallery

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5 
6import {
7  SlidingList,
8  type SlidingListItem,
9} from "@/components/ui/sliding-list";
10import { cn } from "@/lib/utils";
11 
12import "./vertical-scene.css";
13 
14export type VerticalSceneImage = {
15  src: string;
16  alt: string;
17};
18 
19export type VerticalSceneItem = {
20  /** Stable value used by controlled state and callbacks. */
21  value: string;
22  /** Short label rendered in the scene selector. */
23  label: string;
24  /** Main heading displayed over the active scene. */
25  title: string;
26  /** Optional supporting copy below the heading. */
27  description?: string;
28  /** Optional context displayed above the heading. */
29  context?: string;
30  image: VerticalSceneImage;
31  imagePosition?: React.CSSProperties["objectPosition"];
32};
33 
34export interface VerticalSceneProps
35  extends Omit<React.ComponentPropsWithoutRef<"section">, "onChange"> {
36  items: readonly VerticalSceneItem[];
37  /** Controlled selected scene value. */
38  value?: string;
39  /** Initial selected scene value for uncontrolled usage. */
40  defaultValue?: string;
41  /** Called when a scene is selected. */
42  onValueChange?: (value: string, item: VerticalSceneItem) => void;
43  /** Accessible label for the scene selector. */
44  selectorLabel?: string;
45  /** Persistent label displayed in the stage header. */
46  stageLabel?: string;
47  /** Message displayed when no scenes are provided. */
48  emptyLabel?: string;
49};
50 
51type SceneDirection = -1 | 0 | 1;
52 
53type SceneTransitionState = {
54  value: string;
55  index: number;
56  direction: Exclude<SceneDirection, 0>;
57};
58 
59const MEDIA_EASE = [0.77, 0, 0.18, 1] as const;
60const CONTENT_EASE = [0.22, 1, 0.36, 1] as const;
61const MEDIA_DURATION = 0.56;
62const CONTENT_ENTER_DURATION = 0.5;
63const CONTENT_ENTER_DELAY = 0.12;
64const CONTENT_EXIT_DURATION = 0.22;
65 
66const mediaLayerVariants = {
67  enter: (direction: SceneDirection) => ({
68    transform: `translate3d(0, ${direction * 100}%, 0)`,
69  }),
70  center: { transform: "translate3d(0, 0%, 0)" },
71  exit: (direction: SceneDirection) => ({
72    transform: `translate3d(0, ${direction * -5}%, 0)`,
73  }),
74};
75 
76const mediaImageVariants = {
77  enter: (direction: SceneDirection) => ({
78    transform:
79      direction === 0
80        ? "translate3d(0, 0%, 0) scale(1)"
81        : `translate3d(0, ${direction * -100}%, 0) scale(1.04)`,
82  }),
83  center: { transform: "translate3d(0, 0%, 0) scale(1)" },
84  exit: { transform: "translate3d(0, 0%, 0) scale(1.02)" },
85// … truncated