📸 Framerly - 🌐 Live Demo

Plain screenshots walk into the studio. Portfolio shots walk out.

Framerly takes any screenshot and wraps it in a browser or device frame, sets the backdrop, casts the shadow, and hands back a polished image ready for your landing page, deck, or tweet.

---

Table of Contents

• Features
• Sample
• Tech Stack
• Getting Started
• How It Works
• Project Structure
• Deploy Your Own
• Upcoming Features

Features

• Browser & device chrome — Safari, Chrome, and bare frames, in light or dark, matched pixel-for-pixel to the real thing.
  
• Backdrops that don't fight the shot — gradient, solid, or image backgrounds tuned to sit behind your screenshot.
  
• 3D tilt and zoom — angle the frame in space and dial the zoom until the composition feels intentional.
  
• Layered shadow and padding — independent controls for shadow depth, corner radius, and canvas padding.
  
• Code snippet mode — drop in a code block instead of a screenshot, with syntax themes, fonts, and window chrome.
  
• Layer management — reorder and toggle visibility across everything on the canvas.
  
• Export at any size — PNG, sized for a tweet, a deck slide, an App Store listing, or a 4K hero banner.
  
• 75+ Backgrounds — Choose from a curated library of backgrounds across multiple styles: Gradients, Patterns, macOS, Radial and Abstract.
  
• Angle Preview — Instantly preview your design from every angle before exporting.
  
• Website Screenshot — Generate a screenshot directly from a website link, no manual upload needed.

Steps

Studio

Sample

Tech Stack

Layer	Choice	Badge
Framework	Next.js
UI	React
Styling	Tailwind CSS
Language	TypeScript
Linting	ESLint
Hosting	Vercel

Getting Started

Prerequisites

• Node.js 18.17 or later
• npm (bundled with Node)

No environment variables are required to run the project locally.

Installation

git clone https://github.com/anupam-kumar-krishnan/framerly.git
cd framerly
npm install
npm run dev

Open http://localhost:3000 to view it locally. The studio itself lives at /app.

How It Works

1. Upload a screenshot (or switch to code-snippet mode and paste a code block instead).
2. Frame it — pick a browser or device chrome, light or dark.
3. Style the scene — set the backdrop, tilt/zoom the frame in 3D, and dial in shadow, radius, and padding.
4. Arrange layers — reorder and toggle visibility for every element on the canvas.
5. Export — pick a size (social post, deck slide, App Store listing, 4K banner) and download a PNG.

Project Structure

framerly/
├── public/          # Static assets
├── src/             # Application source (app router, components, studio logic)
├── next.config.ts   # Next.js configuration
├── eslint.config.mjs
├── postcss.config.mjs
└── tsconfig.json

Deploy Your Own

Framerly is a standard Next.js app, so it deploys anywhere Next.js does. The live demo runs on Vercel:

Features In Progress

• Additional device/browser chrome presets
• Custom backdrop image uploads
• Saved already created designs
• Signup and Login
• Video Animations with presets
• Templates

Have an idea? Open an issue.

---

© Built for people who ship screenshots.