Polaroid Stack CTA Block for React

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.

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.

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.

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.

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.

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 the link it's given with render, with nativeButton={false}.