shadcn.io is not affiliated with official shadcn/ui
Polaroid Stack CTA Block for React Aria
A centred statement for a photo album app, with a floor band at the foot where three tilted polaroid links peek up, then lift, straighten and develop from a soft blur to clear on hover or focus.
Installation
Overview
Invite people to start a photo album with this centred statement for React with React Aria. Between solid rails, a headline, a sentence about Shoebox (a fictional photo album app) and the Shine Button sit above a floor band: a tinted strip under a hairline, where three tilted, overlapping polaroids peek up from the foot and are cut off by the block's edge. Each polaroid is a link; on hover or keyboard focus a frame lifts, straightens and its photo "develops" from a soft blur to clear. The photos are small scenes (hills, a coast, a trail) drawn in SVG in your theme's foreground tones, so you swap in your own images; the captions are set in a handwritten-style serif italic. It's built from Guides, Aspect Ratio and Shine Button, and every transition is CSS that holds still under reduced motion. Made for photo, scrapbook, travel and portfolio products, gallery launches and any page where the keepsake is the pitch.
FAQ
How do I use my own photos?
Inside each frame's AspectRatio, put an img (or your framework's image component) with className="size-full object-cover" in place of the Scene, and keep the filter classes on the AspectRatio, which is what develops the photo. The POLAROIDS array holds each frame's caption, place in the stack and scene (a list of SVG shapes); drop the scene when you use a photo. Give each image an empty alt, since the caption names the link, and keep them small: they are above the fold.
How does the develop effect work, and what about touch screens and reduced motion?
At rest the photo carries a faint blur; on hover or keyboard focus the frame gets its group-hover and group-focus-visible classes, which ease the filter off and lift and straighten the frame over about 300 milliseconds. Touch screens have no hover, so on a coarse pointer the photos are shown developed from the start. With reduced motion on, the frame still lifts and the photo still clears, but at once, with no transition.
What does each polaroid link to?
Each is a real link (href="#"), so point it at a sample album, a template or the gallery page. Its name is "Open the album: " plus its caption, with the first part visible to screen readers only, and it has the same focus ring as any link. The picture is decoration and are hidden from assistive technology.
How does the stack fit on a phone?
The frames are sized from the width of their row, up to 11rem each, with the overlap measured in the same unit, so the three always fit side by side, down to 320px. The floor band gets shorter on a phone, so the button stays on the first screen, and the headline steps down from text-5xl to text-3xl.
What changes in right-to-left languages?
The stack runs from the right: the frames' order, their overlap (set with a logical margin) and their tilt all mirror, so the stack leans the same way relative to its start. The band and its rule are symmetric, so they don't move.
How do I change the button?
The Shine Button is a link: point href at your sign-up or editor. A band of light sweeps across it once on hover and keyboard focus, and with reduced motion it fades in where it stands. It's the only primary control; the polaroids are links too, but quiet ones.
The button renders a link when it has an href.