capad.fyi · hero · framing locked
The composition is now fixed and held identical across every panel below: statement on the paper at the left, portrait on the right, name bottom-left, ink swatches and CTA bottom-right sitting on the print.
Your picture is no longer cut off. It used to bleed off the right and bottom edges, which also meant the photograph was being cover-cropped — the box was wider than the photo's own 0.758 aspect, so roughly a fifth of its width was discarded before the bleed even started. The portrait is now pinned to its real aspect ratio and sits whole on the paper at every width, with clean paper above it.
Only the ink varies, and you have picked: T4 leads (chewed edge, full colour), T2 is the alternate (one warm ink), T1 is held rather than dropped. T4 is first in reading order now, and it is the one I would ship.
Two things at the bottom, both of which you said you liked: a deckled edge, and live ink swatches, which turns "one ink" from a decision into a control.
On mis, since the label confused you: it is not a misalignment
bug. It is the deliberate registration offset between the ink plate and the
photograph — the reason the thing reads as printed rather than screened.
0.35cqw at 390 is the smallest of the three widths on purpose.
No ink at all. One displacement filter erodes the alpha boundary so the silhouette tears, and the photograph keeps every bit of its own colour. The cheapest of the three and the least like a filter.
390
820
1440 primary
The photograph untouched underneath, a single warm plate over it whose bright end is white, so it takes ink in the shadows and does nothing to the highlights. You said one ink is fine, so this is the default.
390
820
1440 alternate
The full tritone: your measured shadows, your measured skin, your measured highlight. Most stylised of the three and the most committed to the medium.
390
820
1440 held
Both of these you said you liked, so both stay. The deckled edge tears the silhouette rather than cropping it, so the print reads as a sheet physically hanging off the page. Live ink swatches turn "one ink" from a decision into a control: click one and the duotone ramp swaps, while the registration offset stays put, so re-inking and re-registering are two independent things you can do to the same object.
LIVE — click an ink, then drag to register
Deckled edge. The silhouette is torn rather than cropped, so the print reads as a sheet that is physically hanging off the page. Anisotropic turbulence (low horizontal, high vertical frequency) so the tear runs with the paper fibre instead of looking like generic noise. Live inks. All three swatches are your measured tones. Clicking one swaps the duotone ramp; the plate keeps its registration offset, so re-inking and re-registering are two independent things you can do to the same object.
| Deckle cost | One feTurbulence + feDisplacementMap, same family as the chew. Per-pixel and non-compositable, but it rasterises once and the plate does not animate, so it costs nothing per frame. This is the honest difference from T4: identical mechanism, finer amplitude, and only worth it because the edge is a compositional element here rather than an accident. |
|---|---|
| Ink switching | Three SVG filters, one class swap. No re-layout, no re-raster of the photograph — only the duotone plate changes, and it is a compositor-layer change. |
| Portrait crop | Fixed, and this was the real defect. The portrait was background-size:cover in a box wider than the photograph's 0.758 aspect, so cover discarded about a fifth of the picture's width; the negative right/bottom then pushed what survived off two more edges. It is now background-size:100% 100% in a box pinned to aspect-ratio:1092/1440, sized by width alone, anchored bottom-right. At 1440 that is 576x760 inside a 900px plate, so the whole photograph is on the paper with 140px of clean paper above it. Nothing is clipped at any of the three widths. |
| Behaviour | Shipping B1 + B3 together, dropping B2 and B4. B1 pointer lean is what makes the offset legible to someone who never touches the hero, and B3 drag is what gives it a payoff — horizontal travel to a wrong registration, then it snaps to zero with a brightness tick. Together they are one custom property and one pointer handler. B2 idle breathing fights the lean for the same value and B4 scroll-linked only pays off once the hero is already off-screen. |
| What I would cut | If this is going in the hero, the deckle and the drag are enough. Live ink switching is a delight for about four seconds per visitor and then it is furniture. It earns its place only if you think the ink choice is genuinely part of the story. |