The verdict: can you vibe code Shots.so?
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.
Estimated effort: 2-3 weeks part-time
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
Founded
—
Raised
—
Team
—
Cheapest paid tier
~$8/mo
What Shots.so 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 TierFree
- Basic Tier~$8/mo
- Pro Tier~$12/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 2 — after that, every month is money kept.
The hard parts of vibe coding Shots.so
- 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 vibecode Shots.so
Prerequisites
Node.jsfree
Required for running the Next.js development environment and building the application bundle.
GitHubfree
Source code hosting and version control for AI agent integration.
AI coding tools
Recommended 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 & infrastructure
| Cloudflare | Hosting the Next.js frontend and static assets globally on the edge. | $0-5/mo |
Build guide
01Scaffold 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.02Build 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.03Implement 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.04Canvas 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.05Video 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 for Shots.so
What will you build it with?
Starting total with Claude Code$0 one-time
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 Shots.so
~$12/mo
Your time to build
25-35 hours
AI tool credits
~$20 (Claude Pro / Cursor)
Break-even
1 month of Pro subscription
Vibe code Shots.so: FAQ
- Can you vibe code Shots.so yourself?
- Solid side project — 75/100 vibecodeable. 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.
- How long does it take to vibe code Shots.so?
- 2-3 weeks part-time — roughly 25-35 hours of hands-on time with an AI coding agent.
- How do you build your own Shots.so?
- Scoped to personal use: Next.js on the front, Next.js API Routes behind it, Turso for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Shots.so without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Shots.so instead of paying?
- About ~$12 one-time to start and ~$0-5/mo to run, versus ~$12/mo for Shots.so. Break-even: 1 month of Pro subscription.
- What stack should you use to vibe code Shots.so?
- Next.js; Next.js API Routes; Turso; plus Tailwind CSS, HTML5 Canvas API, Lucide React.