capad.fyi · hero · sticker sheet, three ways
You liked the Sticker Sheet and asked for two things: push it further, and make the photos do something interesting as the screen stretches or shrinks. So every option below is drawn at three true widths — 390, 820 and 1440 — rather than one static picture. The thing to judge is not how it looks but how it changes.
Each frame is rendered at its real pixel width and scaled down by the same factor (0.38), so the three are directly comparable. Aspect ratio is held at 16:10 across all three on purpose: that isolates width as the only variable. On a real phone the hero would be portrait, which changes the composition and is noted per option.
All three keep the Sticker Sheet DNA: a physical paper object, one accent ink, accession labels, and the sense that it was photocopied rather than rendered. What changes is what the viewport does.
The hero is a roll of 35mm, already developed, laid out as a contact sheet. Widening the window does not enlarge the photographs — it reveals more frames, the way pulling more of the roll off the spool reveals more exposures. This is the most literal answer to your brief and the least decorative of the three.
<600px shows 2 frames,
600-999px shows 4, ≥1000px shows all 5. Each frame
is flex:1, so the frames that are showing always fill the strip
edge to edge — they get wider, but no photograph is ever blown up past its
natural size. The sprocket-hole rails and the frame numbers scale with the
strip, so the whole thing reads as one object at every width.390 2 frames
820 4 frames
1440 5 frames
| Size behaviour | The strongest of the three. Count changes, nothing is upscaled, and the object stays one object. |
|---|---|
| Cost to build | Low. Five images, a flex row, one container query. No JS. |
| Keeps from today | Eyebrow, CTA, availability, shipping strip (as the accession label), ambient, grain. |
| Risk | Frames are crops, so a face can land awkwardly in a narrow frame. Needs per-photo object-position tuning — the real work here, and it is art direction, not engineering. |
| On a real phone | A 16:10 strip on a 390px portrait screen is a thin band. This one wants the hero to be landscape-ish, or the strip to rotate 90° and run down the page. |
The photographs are prints stored in a shallow paper tray on the desk. Width is how much room there is on the desk, so a wider window lets more of them slide out and fanned open. Narrow and only two clear the tray; wide and five are laid out across it.
390 2 prints, travel 0
820 3 prints, travel 6%
1440 5 prints, travel 12%, fanned
| Size behaviour | The most physical. Count, travel and fan all move; the metaphor survives every step. |
|---|---|
| Cost to build | Low. Five absolutely-positioned prints, three container queries, no JS. |
| Keeps from today | Statement, name, CTA, ambient, grain, paper stock. |
| Risk | A print hanging off the left edge of a phone is easy to get wrong. The 2-print narrow case has to be composed, not just scaled. |
| On a real phone | Same problem as A: landscape strip on a portrait screen. Would want the tray to run up the page instead. |
Each photograph is separated into three spot-ink layers that multiply together, the way a risograph print is built from misaligned screens. The layers never quite line up, and the gap between them is a live function of the viewport width — so the print drifts further out of register the wider you make the window.
--mis is the whole mechanism, stepped by container query:
0.35cqw → 0.9cqw → 1.8cqw. The three
layers read it and offset against each other. Because it is expressed in
cqw, the misregistration is a proportion of the object, not a
pixel constant — so it looks identical on a phone and a 27″ monitor
instead of vanishing on one and looking broken on the other. This can also be
driven by scroll or pointer later without touching the layout.390 deliberate 0.35cqw offset
820 deliberate 0.9cqw offset
1440 deliberate 1.8cqw offset
| Size behaviour | Subtle at every size, and the one property that could later be driven by scroll or pointer for free. |
|---|---|
| Cost to build | Cheapest of the three. One image, three stacked layers, one custom property. |
| Keeps from today | Keeps the statement, name, CTA, ambient, grain. Uses one photograph, not five. If you wanted your photo set to be the hero, this does not do that. |
| Risk | Three mix-blend-mode: multiply layers is exactly the kind of compositing that costs on a weak rasteriser. Given you are already chasing a frame-rate problem, this is the one to be careful about. |
| On a real phone | Works well — the misregistration scales down with cqw so it stays proportional rather than becoming a muddy smear. |