A square photo showcase for ten pictures. Each picture has a word, and the words sit in glass pills that bend into an arc hugging one edge of the photo, the outermost visible words landing exactly on the edge at any size. The active word turns white with a small index, the photo cross-fades and settles with a slow zoom, and a caption names it. Each pill holds an enlarged copy of the photo lined up with the picture behind it, so the glass magnifies the real image without a backdrop filter, and pale photos get a darker smoke so the words stay readable. A glass bar beside the frame moves the arc to the left, right, top or bottom edge, opening on hover or keyboard focus to name each edge, and the arc swings round instead of jumping. The ten images, words, titles, captions and alt texts are editable, along with the brand line, background, ambient glow, frame corners, speed, zoom and glass tint. It works as a real component: every word is a button, the arrows, Home and End keys move through it, wheel and swipe work, a play-pause button stops it, a live region announces each change and reduced motion holds a still arc. The export is one HTML file; its photos load from horizonx.so and its type from Google Fonts.
In collections: React Carousels & Image Galleries
Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· React Carousel: Build One With CSS Scroll Snap or a Library· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools