Infinite Parallax Gallery

1'use client';
2 
3import React, { useEffect, useRef, useState } from 'react';
4import * as THREE from 'three';
5import { cn } from '@/lib/utils';
6 
7export interface InfiniteParallaxGalleryProps extends React.HTMLAttributes<HTMLDivElement> {
8  /** Array of image URLs to load in the gallery */
9  images: string[];
10  /** Number of depth layers for the parallax effect. Default: 5 */
11  depthLayers?: number;
12  /** Number of images to instantiate per layer. Default: 10 */
13  imagesPerLayer?: number;
14  /** Max width of an image sprite. Default: 160 */
15  maxImageWidth?: number;
16  /** Max height of an image sprite. Default: 160 */
17  maxImageHeight?: number;
18  /** Optional overlay to display on top of the gallery (e.g., attribution text) */
19  overlayText?: React.ReactNode;
20  /** Whether to show the loading indicator. Default: true */
21  showLoading?: boolean;
22}
23 
24const LAYER_CONFIG = [
25  { scale: 1.5, speed: 80, opacity: 1.0 },
26  { scale: 1.0, speed: 40, opacity: 0.85 },
27  { scale: 0.8, speed: 30, opacity: 0.7 },
28  { scale: 0.6, speed: 20, opacity: 0.55 },
29  { scale: 0.5, speed: 15, opacity: 0.4 },
30];
31 
32function shuffleArray<T>(array: T[]): T[] {
33  const newArray = [...array];
34  for (let i = newArray.length - 1; i > 0; i--) {
35    const j = Math.floor(Math.random() * (i + 1));
36    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
37  }
38  return newArray;
39}
40 
41function rand(min: number, max: number) {
42  return Math.random() * (max - min) + min;
43}
44 
45function createFallbackTexture(
46  layer: number,
47  maxWidth: number,
48  maxHeight: number
49) {
50  const c = document.createElement('canvas');
51  c.width = maxWidth;
52  c.height = maxHeight;
53  const ctx = c.getContext('2d');
54  if (ctx) {
55    ctx.fillStyle = ['#4a6572', '#344955', '#232f34', '#1c2529', '#0f1518'][
56      Math.min(layer, 4)
57    ];
58    ctx.fillRect(0, 0, c.width, c.height);
59  }
60  return new THREE.CanvasTexture(c);
61}
62 
63export const InfiniteParallaxGallery = React.forwardRef<
64  HTMLDivElement,
65  InfiniteParallaxGalleryProps
66>(
67  (
68    {
69      images,
70      depthLayers = 5,
71      imagesPerLayer = 10,
72      maxImageWidth = 160,
73      maxImageHeight = 160,
74      overlayText,
75      showLoading = true,
76      className,
77      ...props
78    },
79    ref
80  ) => {
81    const containerRef = useRef<HTMLDivElement>(null);
82    const [loadingProgress, setLoadingProgress] = useState(0);
83    const [isLoaded, setIsLoaded] = useState(false);
84 
85    useEffect(() => {
86      const container = containerRef.current;
87      if (!container) return;
88 
89// … truncated