Warp Slider

1"use client";
2 
3import { useEffect, useMemo, useRef } from "react";
4 
5import * as THREE from "three";
6 
7interface WarpSliderProps {
8  slides: {
9    name: string;
10    img: string;
11  }[];
12  config?: Partial<{
13    orientation: "vertical" | "horizontal";
14    minHeight: number;
15    maxHeight: number;
16    aspectRatio: number;
17    gap: number;
18    smoothing: number;
19    distortionStrength: number;
20    distortionSmoothing: number;
21    momentumFriction: number;
22    momentumThreshold: number;
23    wheelSpeed: number;
24    wheelMax: number;
25    dragSpeed: number;
26    dragMomentum: number;
27    touchSpeed: number;
28    touchMomentum: number;
29  }>;
30}
31 
32const labToHex = (css: string): string => {
33  const values = css
34    .replace(/lab|\(|\)/g, "")
35    .split(/[ ,/]+/)
36    .filter(Boolean);
37 
38  const [L, a, b] = values;
39 
40  const l = parseFloat(L.replace("%", "")) / 100;
41  const A = parseFloat(a);
42  const B = parseFloat(b);
43 
44  // LAB → XYZ
45  const y = (l + 0.16) / 1.16;
46  const x = A / 5 + y;
47  const z = y - B / 2;
48 
49  const x3 = x ** 3;
50  const y3 = y ** 3;
51  const z3 = z ** 3;
52 
53  const X = 0.95047 * (x3 > 0.008856 ? x3 : (x - 16 / 116) / 7.787);
54  const Y = 1.0 * (y3 > 0.008856 ? y3 : (y - 16 / 116) / 7.787);
55  const Z = 1.08883 * (z3 > 0.008856 ? z3 : (z - 16 / 116) / 7.787);
56 
57  // XYZ → linear RGB
58  let r = X * 3.2406 + Y * -1.5372 + Z * -0.4986;
59  let g = X * -0.9689 + Y * 1.8758 + Z * 0.0415;
60  let b_ = X * 0.0557 + Y * -0.204 + Z * 1.057;
61 
62  // linear → sRGB
63  const toSRGB = (x: number) =>
64    x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
65 
66  r = toSRGB(r);
67  g = toSRGB(g);
68  b_ = toSRGB(b_);
69 
70  // clamp
71  r = Math.min(Math.max(r, 0), 1);
72  g = Math.min(Math.max(g, 0), 1);
73  b_ = Math.min(Math.max(b_, 0), 1);
74 
75  const toHex = (x: number) =>
76    Math.round(x * 255)
77      .toString(16)
78      .padStart(2, "0");
79 
80  return `#${toHex(r)}${toHex(g)}${toHex(b_)}`;
81};
82 
83export const WarpSlider = ({
84  slides,
85  config: {
86    orientation = "vertical",
87    minHeight = 1,
88    maxHeight = 1.5,
89    aspectRatio = 1.5,
90    gap = 0.05,
91    smoothing = 0.05,
92    distortionStrength = 2.5,
93    distortionSmoothing = 0.1,
94    momentumFriction = 0.95,
95    momentumThreshold = 0.001,
96    wheelSpeed = 0.01,
97    wheelMax = 150,
98    dragSpeed = 0.01,
99    dragMomentum = 0.01,
100    touchSpeed = 0.01,
101    touchMomentum = 0.1,
102  } = {},
103}: WarpSliderProps) => {
104  const canvasRef = useRef<HTMLCanvasElement | null>(null);
105  const titleRef = useRef<HTMLParagraphElement | null>(null);
106// … truncated