Infinite Image Field

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useCallback, useEffect, useRef } from "react";
5 
6export const INFINITE_IMAGE_FIELD_IMAGES: string[] = [
7  "https://plus.unsplash.com/premium_photo-1665311515452-a9f54c4266c9?w=400&h=560&fit=crop&q=80",
8  "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=560&fit=crop&q=80",
9  "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=560&fit=crop&q=80",
10  "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&h=560&fit=crop&q=80",
11  "https://images.unsplash.com/photo-1501854140801-50d01698950b?w=400&h=560&fit=crop&q=80",
12  "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400&h=560&fit=crop&q=80",
13  "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=400&h=560&fit=crop&q=80",
14  "https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?w=400&h=560&fit=crop&q=80",
15  "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=400&h=560&fit=crop&q=80",
16  "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400&h=560&fit=crop&q=80",
17  "https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&h=560&fit=crop&q=80",
18  "https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?w=400&h=560&fit=crop&q=80",
19];
20 
21export interface InfiniteImageFieldProps
22  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
23  className?: string;
24  images?: string[];
25  imageWidth?: number;
26  imageHeight?: number;
27  gap?: number;
28  maxSpeed?: number;
29  smoothing?: number;
30  borderRadius?: number;
31}
32 
33function drawRoundedRect(
34  ctx: CanvasRenderingContext2D,
35  x: number,
36  y: number,
37  w: number,
38  h: number,
39  r: number
40) {
41  const clampedR = Math.min(r, w / 2, h / 2);
42  ctx.beginPath();
43  ctx.moveTo(x + clampedR, y);
44  ctx.lineTo(x + w - clampedR, y);
45  ctx.quadraticCurveTo(x + w, y, x + w, y + clampedR);
46  ctx.lineTo(x + w, y + h - clampedR);
47  ctx.quadraticCurveTo(x + w, y + h, x + w - clampedR, y + h);
48  ctx.lineTo(x + clampedR, y + h);
49  ctx.quadraticCurveTo(x, y + h, x, y + h - clampedR);
50  ctx.lineTo(x, y + clampedR);
51  ctx.quadraticCurveTo(x, y, x + clampedR, y);
52  ctx.closePath();
53}
54 
55export function InfiniteImageField({
56  className,
57  images = INFINITE_IMAGE_FIELD_IMAGES,
58  imageWidth = 200,
59  imageHeight = 280,
60  gap = 28,
61  maxSpeed = 5,
62  smoothing = 0.07,
63  borderRadius = 0,
64  ...rest
65}: InfiniteImageFieldProps) {
66  const canvasRef = useRef<HTMLCanvasElement>(null);
67// … truncated