Immersive 1 block design & features
Immersive1 wraps a photo archive around a globe. This shadcn/ui block pairs a left column with a heading and description with a large interactive sphere on the right. Sixty-four small portrait tiles are spread evenly over its surface, so the same set of images repeats around the globe without obvious gaps.
The sphere turns slowly on its own. Dragging spins it on both axes, with tilt limited so it never flips upside down, and a flick keeps it spinning briefly before it slows. Tiles facing away are hidden so only the front half shows. Clicking a tile opens a lightbox on a blurred backdrop, where the image springs in with a slight turn and can be closed with the button, a backdrop click, or the Escape key.
It is an elaborate, experimental block, built entirely with CSS 3D transforms, that suits photographers, archives, and agencies wanting a playful index. It works with any number of images because tiles cycle through the list, and the tile count is a prop.
On mobile the sphere shrinks and sits below the copy. On touch screens a horizontal swipe spins it while a vertical swipe scrolls the page as usual.