Image Crop Blueprint
Static crop tool blueprint with a Placeholder canvas, rule of thirds grid, corner handles, aspect ratio chips, and apply and cancel actions.
Static crop tool blueprint with a Placeholder canvas, rule of thirds grid, corner handles, aspect ratio chips, and apply and cancel actions.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Image Crop Blueprint is a static open-state crop tool for hero-shot.jpg: a Placeholder canvas with a 70 % crop rectangle rendered in pure markup, complete with a two-pixel foreground border, a rule-of-thirds grid (two vertical and two horizontal lines at 33 % and 66 %), corner and mid-edge handles, and surrounding dim overlays. A floating readout pins the live dimensions (1680 x 1120 px) to the bottom of the canvas. Above the canvas, five aspect-ratio chips (Free, 1:1, 16:9, 4:3, 3:2) use aria-pressed, with Free active. Apply crop and Cancel sit in the footer.
Ratios are one array with an active flag driving the chip style. The whole block is zero-JS: no useState, no Radix, just markup that screenshots correctly in every preview context.
Reach for this block as the inline crop step in an image-upload or media-editing flow, replacing the Placeholder with your canvas element and wiring the Apply crop button to your crop handler.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the post-upload crop step. Other configurations:
Tip: show the pixel readout even in the static blueprint; it tells reviewers the crop preserves enough resolution before any JS is wired.