# How to Vibe Code Your Own Shots.so (and Stop Paying for It) > Create Amazing Mockups - Site: https://shots.so - Category: Design & Mockup Tools - Platforms: Web app - Verdict: **Solid side project** (75/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict You can build a fully functional personal mockup generator in a couple of weeks, but handling client-side WebGL/canvas video animation rendering and heavy export pipelines will test your patience. The core UI of Shots.so—layout controls, device frames, background pickers, and CSS styling—is straightforward to scaffold with modern web tools and AI coding assistants. The real engineering hurdle lies in the export pipeline: compositing high-resolution screenshots, shadows, and animated video zoom effects onto an HTML5 canvas or WebGL context, and exporting clean WebM or high-res PNG files without hitting browser memory walls or stuttering frames. For personal use, skipping user accounts and billing lets you focus entirely on the canvas rendering engine. ### What you can't replicate - The exact catalog of day-one device frames for unreleased hardware - The brand authority and community mindshare built over years ## What it does An online visual design and mockup generation platform that transforms standard screenshots, videos, or raw graphics into polished device mockups, animated presentations, and marketing assets. ### Core features - Device frame library (phones, tablets, laptops, browser windows) - Image and video upload handler with drag-and-drop support - Magic backgrounds generation (solid, gradient, glass, abstract textures) - 3D shapes, shadow depth adjustments, and overlay styling - Cinematic filters (noise, VHS, glitch effects) - Motion and zoom animation presets with keyframes - Custom brand watermarking - Multi-format export pipeline (PNG, WebP, WebM) ## The business ### Pricing - Free Tier: Free — Basic device frames, background selections, and standard watermark-free PNG exports. - Basic Tier: ~$8/mo — Higher-resolution exports and additional formatting configurations. - Pro Tier: ~$12/mo — Advanced motion capabilities, animated mockups, video zoom/parallax features, and transparent video formats. ## The hard parts - Client-side video compositing and WebGL/HTML5 canvas rendering for smooth animations - Real-time video zoom and parallax effect math inside browser canvas - Exporting multi-second animated mockups (WebM/MP4) without crashing browser memory limits - Maintaining device pixel ratio crispness across high-DPI display exports ## How to vibe code Shots.so ### Prerequisites - Node.js (free): Required for running the Next.js development environment and building the application bundle. - GitHub (free): Source code hosting and version control for AI agent integration. ### Recommended AI tools - Claude Code: Best-in-class agentic coding tool for scaffolding complex canvas rendering components, React state architectures, and multi-file logic. - Cursor: Ideal for fine-tuning layout tweaks, Tailwind CSS styling, and visual component arrangements interactively. ### Stack - Frontend: Next.js - Backend: Next.js API Routes - Database: Turso - Auth: better-auth - Payments: none - Other: Tailwind CSS, HTML5 Canvas API, Lucide React ### Hosting - Cloudflare (Hosting the Next.js frontend and static assets globally on the edge.): $0-5/mo ### Build guide 1. **Scaffold Project & Layout Structure** — Initialize the Next.js application with Tailwind CSS, Lucide icons, and the core dashboard layout containing a canvas preview area on the right and customization panels on the left. ``` Create a new Next.js project with Tailwind CSS and set up a responsive two-column dashboard layout. The left column will house collapsible configuration panels (Device, Frame, Background, Effects, Export), and the right column will serve as a centered, scaled preview canvas workspace. Ensure the layout mimics a clean, modern SaaS design tool interface with dark mode support. Use Lucide icons for toolbar actions like undo, redo, and export. ``` 2. **Build Device Frame & Screenshot Upload Engine** — Implement image and video dropzones, state management for uploaded media, and dynamic device wrapper components (iPhone, Browser, Mac, Tablet). ``` Implement a drag-and-drop media upload component supporting PNG, JPG, and MP4 files. Store uploaded media as object URLs in React state. Build a modular device frame wrapper component that supports multiple device types (iPhone with notch/Dynamic Island, modern browser window with traffic lights, tablet, laptop, and minimalist border frames). Allow users to adjust corner radius, shadow depth (spread, hug, adaptive), and padding dynamically via Tailwind CSS properties. ``` 3. **Implement Magic Backgrounds & Visual Effects** — Add background preset generation (solid colors, linear/radial gradients, glassmorphism styles, abstract textures) and cinematic overlay filters. ``` Build a background configuration section allowing users to choose between transparent, solid colors, gradient presets, and abstract glassmorphism styles. Add a toggle for cinematic visual effects including CSS/canvas-based noise grain, VHS scanlines, and subtle glitch filters. Ensure background variants dynamically update wrapper containers without causing layout shifts. ``` 4. **Canvas Rendering & High-Resolution Export Pipeline** — Set up an HTML5 Canvas compositing pipeline to merge user media, device frames, shadows, and backgrounds into crisp high-resolution PNG and WebP exports. ``` Develop an HTML5 Canvas rendering utility that composites the background layer, shadow effects, device frame border, and inner user media screenshot at high device pixel ratios (2x/3x scale) to prevent blurry exports. Implement an export function triggered from the header that captures the canvas state and prompts a browser download for high-resolution PNG and WebP formats. ``` 5. **Video Animation & Zoom Presets** — Incorporate keyframe-based zoom, tilt, and parallax animation presets for video inputs with client-side export capabilities. ``` Add an animation configuration panel allowing users to apply zoom percentage, pan tilt, and parallax motion presets to video inputs. Implement a timeline or keyframe state manager that previews smooth easing curves in the UI workspace. Ensure the canvas rendering loop correctly captures animated frames when exporting motion formats. ``` ### Cost vs paying **Starting costs (one-time):** - Domain name (optional): ~$12 one-time - Total: ~$12 one-time **Ongoing costs (monthly):** - Cloudflare Edge Hosting: $0-5/mo - Total: ~$0-5/mo - Paying for the SaaS instead: ~$12/mo - Build time: 25-35 hours - AI tool credits: ~$20 (Claude Pro / Cursor) - Break-even: 1 month of Pro subscription ## Sources - [Shots.so Homepage Content & Platform Scrape](https://shots.so)