Local image composition · responsive media · 2026 · Solo — product framing, test-first crop geometry, interaction design, accessibility, responsive verification, production deployment
Crop Choir
An editorial crop bench where one focal pin conducts four publishing apertures without uploading the source image.
The problem
Content designers and editorial producers routinely reuse one image across incompatible hero, feed, portrait, and story frames. The common workaround is to reopen an image editor for every destination, repeatedly find the same subject, and then translate those visual decisions into CSS or a CMS focal-point field. Crop Choir turns that repetition into one browser-local comparison: load a bounded PNG, JPEG, or WebP, move one focal pin by pointer or keyboard, inspect four synchronized apertures, and copy normalized focal data plus CSS object-position. Image bytes remain in a blob URL in the browser; the app has no upload service, account, analytics SDK, payment path, or image-generation claim. Production deployment dpl_HzXWjcdwPbE4Bxn3PZcvwENcf8EN reached READY before independent Foundry harness checks proved HTTP markers and the six-step interaction at the stable HTTPS alias.
Architecture
Key decisions
Compare one decision instead of exporting four files
The core product decision is a normalized focal point, not a raster transformation. Four differently shaped apertures move together so the operator can judge tradeoffs before copying one portable value into CSS or a CMS.
Keep the image boundary exact
Local files are limited to PNG, JPEG, or WebP under 15 MB and become revocable browser object URLs. The built-in specimen is an inline data URL. There is no image upload endpoint, remote font request, tracking SDK, account, or storage claim.
Name the score's limitation
The aperture score measures only a focal point's normalized distance from the image edges. The interface explicitly says it is composition guidance rather than face, text, saliency, or subject detection.
Repair observed browser behavior before release
The first headless behavior run exposed an unavailable Clipboard API. A visible, bounded in-page copy fallback repaired the interaction. The final six-step local and production golden paths passed with hard assertions and screenshots.
Use an editorial crop bench instead of a tile dashboard
The Compare surface uses a ruled paper field, asymmetric type-led introduction, numbered process rails, one dominant source stage, differently shaped contact-sheet apertures, and a brass focal pin. Manual anti-slop audit after repair: 0/10 blocking issues.