Immersive 3D dome gallery projecting images on a hemispheric surface.
Drag to spin the dome, release to let it coast, and click a tile to open it. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
images | (string | { src: string; alt?: string })[] | DEFAULT_IMAGES | Array of image URLs (strings) or image objects with src and optional alt text. |
fit | number | 0.5 | Size factor for the dome radius based on container dimensions. |
fitBasis | 'auto' | 'min' | 'max' | 'width' | 'height' | "auto" | Basis for calculating the dome size. |
minRadius | number | 600 | Minimum radius for the dome in pixels. |
maxRadius | number | Infinity | Maximum radius for the dome in pixels. |
padFactor | number | 0.25 | Padding factor for the viewer area. |
overlayBlurColor | string | "#120F17" | Color for the outer portion of the radial overlay blur. |
maxVerticalRotationDeg | number | 5 | Maximum vertical rotation angle in degrees. |
dragSensitivity | number | 20 | Sensitivity of drag interactions. |
enlargeTransitionMs | number | 300 | Duration of image enlargement transition in milliseconds. |
segments | number | 35 | Number of segments for both X and Y to keep the dome proportional. |
dragDampening | number | 2 | Damping factor for drag inertia (0-1, higher = more damping). |
openedImageWidth | string | "400px" | Width of the enlarged image. |
openedImageHeight | string | "400px" | Height of the enlarged image. |
imageBorderRadius | string | "30px" | Border radius for closed tile images. |
openedImageBorderRadius | string | "30px" | Border radius for opened/enlarged images. |
grayscale | boolean | true | Whether to render all images in grayscale. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Move focus between the image tiles. |
| Escape | Close the opened image. |
