image-sphere

1import { X } from "lucide-react";
2import Image from "next/image";
3import type React from "react";
4import { useCallback, useEffect, useRef, useState } from "react";
5 
6export interface Position3D {
7  x: number;
8  y: number;
9  z: number;
10}
11 
12export interface SphericalPosition {
13  theta: number; // Azimuth angle in degrees
14  phi: number; // Polar angle in degrees
15  radius: number; // Distance from center
16}
17 
18export interface WorldPosition extends Position3D {
19  scale: number;
20  zIndex: number;
21  isVisible: boolean;
22  fadeOpacity: number;
23  originalIndex: number;
24}
25 
26export interface ImageData {
27  id: string;
28  src: string;
29  alt: string;
30  title?: string;
31  description?: string;
32}
33 
34export interface SphereImageGridProps {
35  images?: ImageData[];
36  containerSize?: number;
37  sphereRadius?: number;
38  dragSensitivity?: number;
39  momentumDecay?: number;
40  maxRotationSpeed?: number;
41  baseImageScale?: number;
42  hoverScale?: number;
43  perspective?: number;
44  autoRotate?: boolean;
45  autoRotateSpeed?: number;
46  className?: string;
47}
48 
49interface RotationState {
50  x: number;
51  y: number;
52  z: number;
53}
54 
55interface VelocityState {
56  x: number;
57  y: number;
58}
59 
60interface MousePosition {
61  x: number;
62  y: number;
63}
64 
65// ==========================================
66// CONSTANTS & CONFIGURATION
67// ==========================================
68 
69const SPHERE_MATH = {
70  degreesToRadians: (degrees: number): number => degrees * (Math.PI / 180),
71  radiansToDegrees: (radians: number): number => radians * (180 / Math.PI),
72 
73  sphericalToCartesian: (
74    radius: number,
75    theta: number,
76    phi: number,
77  ): Position3D => ({
78    x: radius * Math.sin(phi) * Math.cos(theta),
79    y: radius * Math.cos(phi),
80    z: radius * Math.sin(phi) * Math.sin(theta),
81  }),
82 
83  calculateDistance: (
84    pos: Position3D,
85    center: Position3D = { x: 0, y: 0, z: 0 },
86  ): number => {
87    const dx = pos.x - center.x;
88    const dy = pos.y - center.y;
89    const dz = pos.z - center.z;
90    return Math.sqrt(dx * dx + dy * dy + dz * dz);
91  },
92 
93  normalizeAngle: (angle: number): number => {
94    while (angle > 180) angle -= 360;
95    while (angle < -180) angle += 360;
96    return angle;
97  },
98};
99 
100// ==========================================
101// MAIN COMPONENT
102// ==========================================
103 
104const SphereImageGrid: React.FC<SphereImageGridProps> = ({
105  images = [],
106  containerSize = 400,
107  sphereRadius = 200,
108  dragSensitivity = 0.5,
109  momentumDecay = 0.95,
110  maxRotationSpeed = 5,
111  baseImageScale = 0.12,
112// … truncated