Can I vibecode Shots.so?

Build a client-side screenshot beautifier (Shots.so / Xnapper clone) to convert raw screenshots into high-converting social graphics and docs visuals.

CORE USER JOURNEYS
1. Drag-and-drop, paste from clipboard, or pick a screenshot file. Auto-detect browser/code screenshots to add browser chrome or terminal frames.
2. Customize background, device mockup frame, inset padding, corner radius, and shadow.
3. Annotate image directly on canvas (arrow with arrowhead, text box, blur/redact region, highlight rectangle).
4. Save style configurations as JSON presets in localStorage or share via encoded URL hash.
5. Export composited visual as PNG/JPEG at 1x, 2x, or 3x scale with single-click download or clipboard copy.

UI LAYOUT & ARCHITECTURE
- Left Sidebar (Controls): Aspect ratio presets (1:1, 16:9, Twitter, OG image), Device Frame selector, Background picker, Shadow & Inset sliders, Annotation tools.
- Center Canvas (Preview): Interactive 60fps canvas renderer with live updates, draggable shadow handle, direct annotation layer.
- Right Sidebar (Export & Presets): Style presets gallery, JSON preset saver, format switcher (PNG/JPEG), scale multiplier (1x/2x/3x), Copy to Clipboard & Download buttons.

CORE CAPABILITIES & RENDERING PIPELINE
1. Rendering Pipeline: Screenshot layer + background layer + frame layer + annotations layer composited on canvas in order (Background -> Shadow -> Frame -> Screenshot fitted with aspect-ratio correction -> Annotations).
2. Background System: Color picker, 2-stop linear/radial gradient editor, 20+ mesh gradient presets gallery, custom image fill.
3. Device Frames: SVG frames for MacBook, iPhone, iPad, Safari browser window, macOS Terminal. Screenshot fits inside frame with aspect-ratio correction.
4. Shadow System: CSS box-shadow equivalent on canvas (offset X/Y, blur, spread, color) with draggable shadow handle. Corner radius (0-48px) and inset padding (0-120px) controls.
5. Annotations: Arrow tool (with arrowhead), text box, blur brush (pixelated/blur redact), highlight rectangle.
6. Presets: Save current settings as JSON preset in localStorage. Share preset via URL hash.
7. Export: canvas.toBlob PNG/JPEG at 1x/2x/3x scale, filename includes date (screenshot-YYYY-MM-DD-HHmmss.png).

TECHNICAL DIRECTION & CONSTRAINTS
- Stack: Pure client-side — vanilla HTML+Canvas API or Konva.js, no server needed, everything runs in browser.
- Non-goals: cloud storage, team sharing, subscription billing.