shadcn.io is not affiliated with official shadcn/ui
Studio Reel Awards Block for React Aria
Award-winning projects as film frames in a snap-scroll reel: sprocket holes, a drawn greyscale poster, and the project, client, award and year in text.
Installation
Overview
A film reel for React with React Aria. A start-aligned header whose end holds Previous and Next buttons sits over a band with a top rule and + marks. In it, five frames scroll sideways and snap: each is a dark strip with a row of sprocket holes along its top and foot and a drawn greyscale poster between them (SVG shapes in foreground tones, never a photo). Under each frame, in text: the project, the client, the award, and the programme with its year. The band is a focusable scroll region and never moves by itself. The clients and programmes are made up for the example.
FAQ
How do I change the projects?
Edit PROJECTS: each has a title, a client, an award, a programme, a year and a poster kind. The count in the header comes from the list.
How do I use real stills?
Replace the body of Poster with an <img> that has object-cover and a real alt, in the same box. The sprocket strip and the caption stay.
How do I move through the reel?
Swipe or scroll the band, use the arrow keys when it has focus, or press Next and Previous: each steps one frame, and a button reads as disabled at the end of the reel. Under reduced motion the step is instant.
How are the sprocket holes drawn?
A radial-gradient dot row knocked out of the dark strip: two lines of CSS, no images. The strip follows the theme.