Vault
Uilora Vault — immersive 3D spherical gallery powered by Three.js. 180 image planes on a Fibonacci sphere, drag-to-rotate with inertia, hover-to-enlarge, and click-to-lightbox.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...array of 30 image URLs] | Array of image URLs distributed across 180 sphere planes (cycled if fewer than 180 are provided). |
| backgroundColor | string | #07070d | Background and fog color of the 3D scene — also tints the radial vignette overlay. |
When to Use
Perfect for Uilora-powered art exhibitions, premium portfolio showcases, and creative agencies that want a jaw-dropping 3D presence. The Vault turns any image collection into an immersive 360° gallery that users genuinely want to explore.
Best Practices
Supply at least 30 high-quality square or landscape images for best sphere density — the component cycles through them to fill all 180 planes. Use a dark backgroundColor for maximum depth and contrast. Three.js loads lazily (28 images initially, 14 per batch), so performance is excellent even on lower-end devices.
Why This Component Matters
The Vault is a statement piece — it signals that the brand thinks differently. A spherical art exhibition in the browser creates a cinematic first impression that flat galleries simply cannot match, dramatically increasing time-on-page and memorability.
FAQ
QHow does the 3D sphere work?
Images are placed as flat planes at positions calculated using a Fibonacci sphere algorithm, which evenly distributes points across a sphere surface with no clustering at poles — the same technique used in scientific visualization.
QDoes it work server-side?
Three.js is imported dynamically inside a useEffect, so no server-side rendering occurs. The canvas only initializes in the browser, making it fully Next.js compatible.
QHow does lazy loading work?
The first 28 textures load immediately on mount. Every 80 animation frames thereafter, the next batch of 14 textures loads — textures appear smoothly without blocking the render loop.
QCan I navigate to a specific image?
Click any image plane to open it full-size in a spring-animated lightbox overlay. Press Escape or click outside to close.