Horizontal Depth Fade Demo

1"use client";
2 
3import { useEffect, useMemo, useRef, useState } from "react";
4import Lenis from "lenis";
5 
6import {
7  HorizontalDepthFade,
8  type HorizontalDepthFadeProps,
9} from "@/components/unlumen-ui/horizontal-depth-fade";
10 
11type HorizontalDepthFadeDemoProps = Pick<
12  HorizontalDepthFadeProps,
13  | "travel"
14  | "blur"
15  | "dim"
16  | "brightnessBoost"
17  | "darknessStrength"
18  | "minSaturation"
19  | "saturationStrength"
20  | "focusSpread"
21  | "scaleEffect"
22  | "scrollSensitivity"
23  | "gap"
24  | "itemWidth"
25  | "itemHeight"
26  | "scrollLength"
27> & {
28  imageCount?: number;
29  smooth?: boolean;
30};
31 
32export default function HorizontalDepthFadeDemo({
33  travel = 100,
34  blur = 10,
35  dim = 20,
36  brightnessBoost = 55,
37  darknessStrength = 1.35,
38  minSaturation = 0,
39  saturationStrength = 1.35,
40  focusSpread = 0.14,
41  scaleEffect = 0.11,
42  scrollSensitivity = 0.6,
43  gap = 24,
44  itemWidth = 360,
45  itemHeight = 460,
46  scrollLength = 360,
47  imageCount = 20,
48  smooth = true,
49}: HorizontalDepthFadeDemoProps) {
50  const scrollContainerRef = useRef<HTMLDivElement>(null);
51  const contentRef = useRef<HTMLDivElement>(null);
52  const [previewWidth, setPreviewWidth] = useState(900);
53 
54  useEffect(() => {
55    const node = scrollContainerRef.current;
56    if (!node) return;
57 
58    const update = () => setPreviewWidth(node.clientWidth || 900);
59    update();
60 
61    const observer = new ResizeObserver(update);
62    observer.observe(node);
63 
64    return () => observer.disconnect();
65  }, []);
66 
67  useEffect(() => {
68    const wrapper = scrollContainerRef.current;
69    const content = contentRef.current;
70    if (!smooth || !wrapper || !content) return;
71 
72    const lenis = new Lenis({
73      wrapper,
74      content,
75      smoothWheel: true,
76      wheelMultiplier: 0.95,
77      lerp: 0.09,
78    });
79 
80    let rafId = 0;
81    const raf = (time: number) => {
82      lenis.raf(time);
83      rafId = window.requestAnimationFrame(raf);
84    };
85 
86    rafId = window.requestAnimationFrame(raf);
87 
88    return () => {
89      window.cancelAnimationFrame(rafId);
90      lenis.destroy();
91    };
92  }, [smooth]);
93 
94  const images = useMemo(() => {
95    const targetWidth = Math.max(220, Math.round(itemWidth));
96    const targetHeight = Math.max(260, Math.round(itemHeight));
97    const qualityBias = Math.max(1, Math.round(previewWidth / 900));
98 
99    return Array.from({ length: imageCount }, (_, i) => ({
100      src: `https://picsum.photos/seed/hbs${i + 1}/${targetWidth * qualityBias}/${targetHeight * qualityBias}`,
101      alt: `Demo image ${i + 1}`,
102// … truncated