Screenshot Beautifier & Showcase Images

Screenshot beautifier

Plans solid/gradient backgrounds, padding, corner radius, shadow and transparent-image compositing from a geometry model; verifies that preview and export layers agree across padding/radius variants. Produces a deterministic JSON plan, not image bytes.

Run in browser

Inputs and parameters

• spec — Geometry / layer model JSON
• scale — Export scale
• backgroundPreset — Switch background (keeps input/crop)
• frameAssetStatus — Frame asset status
• clipboardMode — Input scenario (paste / file fallback)
• format — Output format (field in the plan)

Real example

{"image":{"id":"shot-01","width":1280,"height":800,"bytes":245760,"hasAlpha":true,"format":"png"},"crop":{"x":0,"y":0,"width":1280,"height":800},"padding":48,"radius":20,"background":{"kind":"gradient","from":"#E8F3EC","to":"#F7F8F5","alpha":1},"shadow":{"blur":24,"offsetY":12,"alpha":0.18},"frame":{"kind":"browser","assetStatus":"ok"},"preset":"auto","format":"png","scale":1,"clipboardMode":"desktop-paste"}
(transparent 1280×800 PNG; padding=48; radius=20; browser frame; scale=1)
→ Design canvas 1400×952; preview 1200×816; export 1x = 1400×952 (1,332,800 px), 2x = 2800×1904 (5,331,200 px); preview signature === export signature; transparentBlackEdge=false; composite.steps starts with clearRect(rgba(0,0,0,0)); downloadableImage=false; file name shot-beautify-<timestamp>.json.

Limits and failure handling

No real File/Blob decoding, no Canvas 2D context, no PNG/WebP/JPEG encoding; input limits 15 MiB/16 MP, export limits 64 MP/16384 px per side, over-limit fails before canvas allocation with EXPORT_PIXEL_LIMIT or CANVAS_SIDE_LIMIT; only 1x/2x; real rendering/export is untested.

FAQ