Orbital Image Wheel Demo

1"use client";
2 
3import { useEffect, useMemo, useRef, useState } from "react";
4import Lenis from "lenis";
5 
6import {
7  OrbitalImageWheel,
8  type OrbitalImageWheelProps,
9} from "@/components/unlumen-ui/orbital-image-wheel";
10 
11type OrbitalImageWheelDemoProps = Pick<
12  OrbitalImageWheelProps,
13  | "turns"
14  | "blur"
15  | "dim"
16  | "brightnessBoost"
17  | "darknessStrength"
18  | "minSaturation"
19  | "saturationStrength"
20  | "focusSpread"
21  | "scaleEffect"
22  | "scrollSensitivity"
23  | "itemWidth"
24  | "itemHeight"
25  | "wheelSize"
26  | "cropRatio"
27  | "scrollLength"
28  | "captionOffset"
29  | "showCaption"
30  | "subtitleDirection"
31  | "subtitleSpeed"
32  | "subtitleStagger"
33> & {
34  imageCount?: number;
35  smooth?: boolean;
36};
37 
38const LABELS = [
39  "Neural",
40  "Capsule",
41  "Vision",
42  "Fusion",
43  "Pulse",
44  "Signal",
45  "Orbit",
46  "Clinic",
47  "Vault",
48  "Prism",
49  "Quantum",
50  "Nova",
51];
52 
53const SUBTITLES = [
54  "AI diagnostics",
55  "Precision delivery",
56  "Imaging stack",
57  "Research pipeline",
58  "Real-time monitoring",
59  "Clinical workflow",
60  "Predictive screening",
61  "Data mesh",
62  "Bioinformatics",
63  "Automated QA",
64  "Companion model",
65  "Lab insights",
66];
67 
68export default function OrbitalImageWheelDemo({
69  turns = 4,
70  blur = 4,
71  dim = 40,
72  brightnessBoost = 30,
73  darknessStrength = 1.05,
74  minSaturation = 55,
75  saturationStrength = 0.6,
76  focusSpread = 0.34,
77  scaleEffect = 0.06,
78  scrollSensitivity = 0.7,
79  itemWidth = 220,
80  itemHeight = 300,
81  wheelSize = 2200,
82  cropRatio = 0.75,
83  scrollLength = 330,
84  captionOffset = 8,
85  showCaption = true,
86  subtitleDirection = "top",
87  subtitleSpeed = 1,
88  subtitleStagger = 0.018,
89  imageCount = 20,
90  smooth = true,
91}: OrbitalImageWheelDemoProps) {
92  const scrollContainerRef = useRef<HTMLDivElement>(null);
93  const contentRef = useRef<HTMLDivElement>(null);
94  const [previewWidth, setPreviewWidth] = useState(900);
95 
96  useEffect(() => {
97    const node = scrollContainerRef.current;
98    if (!node) return;
99 
100    const update = () => setPreviewWidth(node.clientWidth || 900);
101    update();
102 
103    const observer = new ResizeObserver(update);
104    observer.observe(node);
105 
106    return () => observer.disconnect();
107  }, []);
108 
109  useEffect(() => {
110    const wrapper = scrollContainerRef.current;
111    const content = contentRef.current;
112    if (!smooth || !wrapper || !content) return;
113 
114    const lenis = new Lenis({
115      wrapper,
116      content,
117      smoothWheel: true,
118      wheelMultiplier: 0.95,
119      lerp: 0.09,
120    });
121 
122    let rafId = 0;
123// … truncated