DomeGallery Component | TFE Svelte Templates

Key Features

🔮

3D CSS Transforms

Images positioned on a spherical surface using CSS 3D transforms with perspective. Hardware-accelerated for smooth 60fps performance.

🎮

Drag & Inertia

Drag to rotate with velocity tracking. Release to coast with realistic momentum physics and configurable dampening.

🔍

Click to Enlarge

Click any tile to enlarge with smooth FLIP-style animation. Scrim backdrop with blur effect and ESC to close.

📐

Responsive Radius

ResizeObserver automatically calculates optimal sphere radius based on container size with configurable min/max bounds.

🎨

Grayscale Filter

Optional grayscale filter on tiles for artistic effect. Easy to toggle on/off via prop.

📱

Touch Support

Full touch and pointer events support for mobile devices. Scroll locking prevents page bounce during interaction.

Basic Usage

Import the component and provide an array of images. Images can be simple string URLs or objects with src and alt properties.

<script>
  import DomeGallery from '$lib/components/DomeGallery.svelte';

  const images = [
    { src: 'https://example.com/image1.jpg', alt: 'Description 1' },
    { src: 'https://example.com/image2.jpg', alt: 'Description 2' },
    'https://example.com/image3.jpg', // Simple string URL also works
  ];
</script>

<div style="height: 100vh;">
  <DomeGallery {images} />
</div>

Customisation

Configure the gallery behaviour with props for sensitivity, animation timing, colours, and more.

<DomeGallery
  images={images}
  segments={35}
  grayscale={false}
  dragSensitivity={15}
  dragDampening={1.5}
  enlargeTransitionMs={400}
  overlayBlurColor="#1a1a2e"
  imageBorderRadius="16px"
  openedImageWidth="400px"
  openedImageHeight="500px"
/>

Props Reference

Prop	Type	Default	Description
`images`	`(string \| {src, alt})[]`	`[]`	Array of image URLs or objects with src/alt
`segments`	`number`	`35`	Grid resolution (affects tile count)
`grayscale`	`boolean`	`true`	Apply grayscale filter to images
`fit`	`number`	`0.5`	Radius as fraction of container dimension
`fitBasis`	`'auto' \| 'min' \| 'max' \| 'width' \| 'height'`	`'auto'`	Which dimension to base radius on
`minRadius`	`number`	`600`	Minimum radius in pixels
`maxRadius`	`number`	`Infinity`	Maximum radius in pixels
`dragSensitivity`	`number`	`20`	Drag sensitivity (higher = less sensitive)
`dragDampening`	`number`	`2`	Inertia dampening (0-1, higher = longer coast)
`maxVerticalRotationDeg`	`number`	`5`	Maximum vertical rotation in degrees
`enlargeTransitionMs`	`number`	`300`	Animation duration for enlarge/close
`overlayBlurColor`	`string`	`'#060010'`	Edge fade/blur overlay colour
`imageBorderRadius`	`string`	`'30px'`	Border radius of tile images
`openedImageBorderRadius`	`string`	`'30px'`	Border radius of enlarged image
`openedImageWidth`	`string`	`'250px'`	Width of enlarged image
`openedImageHeight`	`string`	`'350px'`	Height of enlarged image
`padFactor`	`number`	`0.25`	Viewer padding as fraction of container

Technical Implementation

3D Sphere Geometry

Items positioned using rotateX/Y and translateZ to place them on a spherical surface. CSS perspective creates depth.

Velocity Tracking

Pointer move events track velocity using time deltas. On release, velocity feeds into inertia animation with configurable friction.

FLIP Animation

Click-to-enlarge uses FLIP technique: First (tile position), Last (enlarged position), Invert, Play for smooth transitions.

ResizeObserver

Responsive radius recalculation on container resize. CSS custom properties updated dynamically for optimal sizing.

Use Cases

🖼️ Portfolio Galleries

Showcase photography, artwork, or design work in an immersive 3D gallery experience.

🛍️ Product Showcases

Display product images in an interactive format that encourages exploration.

🏢 Team Introductions

Creative way to display team member photos on an "About" or company page.

🎭 Event Galleries

Display event photos, conference speakers, or exhibition highlights.

🏠 Real Estate

Property photo galleries with an immersive feel. Each image expands to full view.

📸 Instagram/Social Feeds

Alternative display for social media image grids with a unique 3D presentation.