Horizontal Depth Fade

1"use client";
2 
3import { useEffect, useRef, useState, type RefObject } from "react";
4import gsap from "gsap";
5import { ScrollTrigger } from "gsap/ScrollTrigger";
6import { cn } from "@/lib/utils";
7 
8gsap.registerPlugin(ScrollTrigger);
9 
10export interface HorizontalDepthFadeImage {
11  src: string;
12  alt?: string;
13}
14 
15export interface HorizontalDepthFadeProps {
16  /** Array of image sources to display in the strip. */
17  images: HorizontalDepthFadeImage[];
18  /** Horizontal travel amount in percent of the available strip overflow. @default 100 */
19  travel?: number;
20  /** Maximum blur amount (px) away from each image focus zone. @default 10 */
21  blur?: number;
22  /** Minimum brightness (%) away from each image focus zone. @default 20 */
23  dim?: number;
24  /** Extra brightness applied around the active focus zone. @default 45 */
25  brightnessBoost?: number;
26  /** Multiplier for out-of-focus darkening intensity. Values > 1 darken more aggressively. @default 1.35 */
27  darknessStrength?: number;
28  /** Minimum saturation (%) away from focus. Use `0` for full desaturation on edges. @default 0 */
29  minSaturation?: number;
30  /** Multiplier for desaturation intensity away from focus. Values > 1 desaturate faster. @default 1.35 */
31  saturationStrength?: number;
32  /** Focus zone width as normalized progress range. @default 0.16 */
33  focusSpread?: number;
34  /** Scale reduction amount away from focus. @default 0.09 */
35  scaleEffect?: number;
36  /** Scroll sensitivity multiplier. Lower values require longer scrolling. @default 0.6 */
37  scrollSensitivity?: number;
38  /** Gap between images. Accepts px number or CSS string. @default "1.5rem" */
39  gap?: number | string;
40  /** Image width in pixels. @default 360 */
41  itemWidth?: number;
42  /** Image height in pixels. @default 460 */
43  itemHeight?: number;
44  /** Height of the scroll section in viewport units. @default 280 */
45  scrollLength?: number;
46  /** Optional scrollable container element used as the animation scroller. */
47  scrollContainerRef?: RefObject<HTMLElement | null>;
48  /** Additional class name on the root element. */
49  className?: string;
50}
51 
52const DEFAULT_TRAVEL = 100;
53const DEFAULT_BLUR = 10;
54const DEFAULT_DIM = 20;
55const DEFAULT_BRIGHTNESS_BOOST = 45;
56const DEFAULT_DARKNESS_STRENGTH = 1.35;
57const DEFAULT_MIN_SATURATION = 0;
58const DEFAULT_SATURATION_STRENGTH = 1.35;
59const DEFAULT_FOCUS_SPREAD = 0.16;
60const DEFAULT_SCALE_EFFECT = 0.09;
61const DEFAULT_SCROLL_SENSITIVITY = 0.6;
62const DEFAULT_ITEM_WIDTH = 360;
63// … truncated