shadcn.io is not affiliated with official shadcn/ui
Photo Stories Carousel Block for Ark UI
Eight drawn picture stories in a free-scroll rail of tall plates that sit in a staggered quilt, each with a title, a place, a byline and a Like toggle with a count, plus a Pause button for the softly pulsing lamps.
Installation
Overview
Browse picture stories as a quilt, with this photo stories carousel for React with Ark UI. Reelvale, a photo-journal app, shows eight tall 2:3 plates in a free-scroll rail on a fixed-height stage: a harbour at dusk, a market table, a ridge, a laundry line, a tram stop, a bakery window, a lighthouse and a bridge, each drawn from shapes in your theme's foreground colour instead of a photo. Alternate plates sit a little lower, so the rail reads as a staggered quilt, and every plate has a title, a place, a byline on an initials avatar and a Toggle that likes it and counts. The lamps and windows in the scenes pulse softly, and a Pause lights Button in the header holds them still; they are still under reduced motion. The foot says which stories are whole ("Stories 1–4 of 8") and how many you liked ("Liked 3 of 8") next to Previous and Next. It is built from Carousel, Toggle, Avatar, Button and Guides. The app, the scenes and the people are made up.
FAQ
How do I use my own stories?
Edit STORIES. Each has an id, a title, a place, a by name with its initials, a starting likes count and a scene. A scene is a list of lines like "mid|M10 120H44V121.5H10Z": a weight (faint, soft, mid, strong, or lamp for a shape that pulses) and a path in a 120 by 180 box. For real pictures, replace the plate's svg with your image and keep the 2:3 box.
What does Pause lights do, and is anything else moving?
The lamp shapes pulse with a CSS animation; the button toggles it (aria-pressed) and its label changes between "Pause lights" and "Play lights" without moving the header. Nothing else loops or plays by itself, and under a reduced-motion setting the lamps are still from the start. There is no autoplay.
How do likes work?
Each Like is a toggle with a count. Pressing it adds one to the story's count and the foot counts the stories you liked; pressing again takes it back. Likes live in the tab's memory only. To keep them, send the toggle's new state to your server and load each story's likes and your own from it.
How does the free scroll behave?
A fling stops where it stops and then settles near a plate. Previous, Next and the arrow keys move a whole view (four plates on a wide screen, three on a medium one, one on a phone) and Home and End jump to the ends. Edge fades show only on a side with more. Plates more than one step out of view are hidden from the tab order. The rail uses the Carousel's proximity snapping with mouse drag on.