Dome gallery
A CSS 3D dome of material studies with pointer rotation and a focus-safe lightbox.
Dome index
Drag to turn the dome; open any study for the full note.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type KeyboardEvent as ReactKeyboardEvent,11 type PointerEvent as ReactPointerEvent,12} from "react";13import { ChevronLeft, ChevronRight, RotateCcw, X } from "lucide-react";14 15export type DomeGalleryTone = "paper" | "ink" | "accent" | "wash";16export type DomeGalleryShape = "circle" | "bar" | "arch" | "tile";17 18export type DomeGalleryItem = {19 id: string;20 title: string;21 meta: string;22 description: string;23 tone?: DomeGalleryTone;24 shape?: DomeGalleryShape;25};26 27export type DomeGalleryProps = Omit<28 HTMLAttributes<HTMLDivElement>,