About this component
Photo Ring
Portrait photographs mounted on a slowly turning 3D ring seen slightly from above. Each panel is gently curved, catches the light and a soft gloss as it turns toward the front, and fades into the surface as it passes behind, while a quiet reflection lies on the floor below. Drag or scroll to give the ring momentum; it eases back to its idle turn. Radius, panel size, tilt, pace, fog, shading and reflection are all props. Reduced motion holds a still ring.
Usage
The import and the props worth knowing about, in one place.
import { PhotoRing } from "@/components/beste/component/photo-ring";
<PhotoRing
className="h-[32rem]"
images={[
{ src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop", alt: "Portrait of a woman" },
{ src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&h=800&fit=crop", alt: "Portrait of a man" },
// ...ten to fourteen photographs read best
]}
gap={0.2}
tilt={10}
reflection={0.5}
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
images* | PhotoRingImage[] | — | Photographs around the ring, in order |
gap | number | — | Space between neighboring photos as a share of a photo's width; the ring's size follows from it, so it always stays closed |
panelWidth | number | — | Panel width as a share of the width |
aspect | number | — | Panel width divided by height |
tilt | number | — | Degrees the camera looks down on the ring |
speed | number | — | Idle turning pace, 0 stops it |
reflection | number | — | Strength of the floor reflection, 0 to 1 |
fog | number | — | How far panels at the back fade into the surface, 0 to 1 |
fogColor | string | — | Surface color the far panels and the reflection fade into |
shading | number | — | Light and gloss on the panels as they turn, 0 to 1 |
interactive | boolean | — | Drag and scroll give the ring momentum; the cursor leans the view |
paused | boolean | — | Stop the idle turn |
className | string | — |
