Components
Loading preview...
A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.
@tonyzebastian
npx shadcn@latest add https://21st.dev/r/tonyzebastian/img-sphereimport SphereImageGrid, { ImageData } from "@/components/ui/img-sphere";
import React from 'react';
// ==========================================
// EASY CONFIGURATION - Edit these values to customize the component
// ==========================================
// Image data using project assets - duplicated to fill sphere better
const BASE_IMAGES: Omit<ImageData, 'id'>[] = [
{
src: "https://images.unsplash.com/photo-1758178309498-036c3d7d73b3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 1",
title: "Mountain Landscape",
description: "A beautiful landscape captured at golden hour with mountains in the background."
},
{
src: "https://images.unsplash.com/photo-1757647016230-d6b42abc6cc9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2072",
alt: "Image 2",
title: "Portrait Photography",
description: "Stunning portrait photography showcasing natural lighting and composition."
},
{
src: "https://images.unsplash.com/photo-1757906447358-f2b2cb23d5d8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 3",
title: "Urban Architecture",
description: "Modern architectural design featuring clean lines and geometric patterns."
},
{
src: "https://images.unsplash.com/photo-1742201877377-03d18a323c18?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1064",
alt: "Image 4",
title: "Nature Scene",
description: "Peaceful nature scene with vibrant colors and natural beauty."
},
{
src: "https://images.unsplash.com/photo-1757081791153-3f48cd8c67ac?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 5",
title: "Abstract Art",
description: "Creative abstract composition with bold colors and unique patterns."
},
{
src: "https://images.unsplash.com/photo-1757626961383-be254afee9a0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 6",
title: "Mountain Landscape",
description: "A beautiful landscape captured at golden hour with mountains in the background."
},
{
src: "https://images.unsplash.com/photo-1756748371390-099e4e6683ae?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 7",
title: "Portrait Photography",
description: "Stunning portrait photography showcasing natural lighting and composition."
},
{
src: "https://images.unsplash.com/photo-1755884405235-5c0213aa3374?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 8",
title: "Urban Architecture",
description: "Modern architectural design featuring clean lines and geometric patterns."
},
{
src: "https://images.unsplash.com/photo-1757495404191-e94ed7e70046?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 9",
title: "Nature Scene",
description: "Peaceful nature scene with vibrant colors and natural beauty."
},
{
src: "https://images.unsplash.com/photo-1756197256528-f9e6fcb82b04?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1064",
alt: "Image 10",
title: "Abstract Art",
description: "Creative abstract composition with bold colors and unique patterns."
},
{
src: "https://images.unsplash.com/photo-1534083220759-4c3c00112ea0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
alt: "Image 11",
title: "Abstract Art",
description: "Creative abstract composition with bold colors and unique patterns."
},
{
src: "https://images.unsplash.com/photo-1755278338891-e8d8481ff087?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1674",
alt: "Image 12",
title: "Abstract Art",
description: "Creative abstract composition with bold colors and unique patterns."
}
];
// Generate more images by repeating the base set
const IMAGES: ImageData[] = [];
for (let i = 0; i < 60; i++) {
const baseIndex = i % BASE_IMAGES.length;
const baseImage = BASE_IMAGES[baseIndex];
IMAGES.push({
id: `img-${i + 1}`,
...baseImage,
alt: `${baseImage.alt} (${Math.floor(i / BASE_IMAGES.length) + 1})`
});
}
// Component configuration - easily adjustable
interface SphereConfig {
containerSize: number;
sphereRadius: number;
dragSensitivity: number;
momentumDecay: number;
maxRotationSpeed: number;
baseImageScale: number;
hoverScale: number;
perspective: number;
autoRotate: boolean;
autoRotateSpeed: number;
}
const CONFIG: SphereConfig = {
containerSize: 600, // Container size in pixels
sphereRadius: 200, // Virtual sphere radius (increased for better spacing)
dragSensitivity: 0.8, // Mouse drag sensitivity (0.1 - 2.0)
momentumDecay: 0.96, // How fast momentum fades (0.8 - 0.99)
maxRotationSpeed: 6, // Maximum rotation speed (1 - 10)
baseImageScale: 0.15, // Base image size (reduced to minimize overlap)
hoverScale: 1.3, // Hover scale multiplier (1.0 - 2.0)
perspective: 1000, // CSS perspective value (500 - 2000)
autoRotate: true, // Enable/disable auto rotation
autoRotateSpeed: 0.2 // Auto rotation speed (0.1 - 2.0, higher = faster)
};
export default function DemoOne() {
return (
<main className="w-full p-6 flex justify-center items-center min-h-screen">
<SphereImageGrid
images={IMAGES}
{...CONFIG}
/>
</main>
);
}