Ridge lightAutomated station
Circular carousel
A ring of cards that turns around a vertical axis, with a drag that carries and a click that brings a card to the front.
Long swellOff the point
Last office lightsRain on the avenue
Homeward fieldBefore the frost
Night harbourPilot boat returns
Hedgerow lineAfter the first frost
Drag the ring to turn it, flick to let it carry, and click a card to bring it to the front.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 useState,9 type CSSProperties,10 type PointerEvent as ReactPointerEvent,11} from "react";12 13export type CarouselScene =14 "lighthouse" | "wave" | "city" | "hill" | "harbour" | "field";15 16export type CircularCarouselItem = {17 /** Title shown on the focused card. */18 title?: string;19 /** Secondary line shown on the focused card. */20 caption?: string;21 /** Original artwork drawn by the component; an unknown name falls back to the lighthouse. */22 scene?: CarouselScene | (string & {});23 /** Accent colour used for the focus ring. */24 accent?: string;25 /** Alternative text for the artwork. */26 alt?: string;27};28