Wrap Caption

Written for the variant you picked above: Cobalt

Build a photo card with captions that wrap around it in 3D. Props: slides [{id, picture element or src, alt, place, lines: [top phrase, bottom phrase]}], accent (default #4a7be0) and turn (seconds per revolution, default 70). A dark stage (about 54% of the width tall, 440–780px) with a 1700px perspective. In the middle, a 4:5 picture about 30% of the width (220–440px), with a mono caption row under it: the counter ('01 / 04') on the left, two small round previous/next buttons in the middle and the place name on the right, all in the accent colour, uppercase and tracked. Behind the picture, each phrase circles on its own cylinder: set the upper-case phrase plus a ' · ' separator in a heavy grotesk at about 8.5% of the width (40–170px), measure every glyph's width with a canvas, and give each glyph an arc as long as itself; repeat the phrase a whole number of times and solve the radius so the repeats close the circle exactly (no seam) near 80% of the width. Place each glyph with rotateY(its angle) translateZ(radius), centred on its own box, with its back face hidden, inside a container pushed back by the radius — so the front of the cylinder sits just behind the picture plane and the picture hides the middle of the words while they curve away on both sides. The upper line sits at 34% of the stage height and the lower at 58%; they turn in opposite directions (the lower a little slower) with a linear CSS animation, paused offscreen, in hidden tabs and under reduced motion. Changing photos (buttons, or the arrow keys when the region has focus) cross-fades the picture and the words over 600ms; the counter and a visually hidden line announce the new place and phrases politely. Every slide keeps alt text. Selected variant — Cobalt (cobalt): Accent #4a7be0: cobalt blue type and labels on near-black. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Use the arrow buttons, or focus the card and press ← and →, to change photos; the words around it change with them. Motion: Both lines turn continuously in opposite directions (70s and about 80s a revolution); changing photos cross-fades the picture and the words over 600ms. Everything stops offscreen and under reduced motion. Accessibility: A labelled carousel region with real previous and next buttons and arrow keys; each photo has alt text; the counter and a hidden line announce the place and phrases. The circling glyphs are hidden from assistive tech. Responsive behavior: Type size, radius and picture size all follow the container's width; below 640px the picture takes 60% of the width and the two lines circle above and below it, larger, instead of across it. Touch: Tap the arrow buttons to change photos. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Use the arrow buttons, or focus the card and press ← and →, to change photos; the words around it change with them.

Motion

Both lines turn continuously in opposite directions (70s and about 80s a revolution); changing photos cross-fades the picture and the words over 600ms. Everything stops offscreen and under reduced motion.

Accessibility

A labelled carousel region with real previous and next buttons and arrow keys; each photo has alt text; the counter and a hidden line announce the place and phrases. The circling glyphs are hidden from assistive tech.

Responsive

Type size, radius and picture size all follow the container's width; below 640px the picture takes 60% of the width and the two lines circle above and below it, larger, instead of across it.

On touch

Tap the arrow buttons to change photos.