.webp%3Fv%3D1792570478588&w=640&q=75)
Flatlay Mockup — Free Flat-Lay Mockup Generator
A free, browser-based tool that turns card and poster designs into a tilted flat-lay mockup photo. Arrange the grid, set light and shadow, then export as PNG or WebP. Built with Three.js, and everything runs client-side so images are never uploaded.
.webp%3Fv%3D1792603415830&w=640&q=75)
Overview
Flatlay Mockup is a small web tool I built for a need that kept coming up in client work: presenting a pile of card or poster designs as one clean, branded flat-lay photo. Instead of placing every card by hand in Photoshop, you upload the designs, pick a canvas ratio, and the tool arranges them on a tilted grid. It is free, needs no account, and runs entirely in the browser.
Key features
- Canvas ratios 1:1, 4:5, 9:16 and 16:9 for feed posts, stories, and banners.
- Uniform and Free layout modes. Free keeps each image's own ratio, so tall posters and squares can mix.
- Pan, Rotate and Light tools on the canvas, plus grid angle, card size, spacing, rounded corners, camera tilt and focal length.
- A draggable sun handle for light direction, with adjustable shadow strength, distance, softness and glow.
- PNG and WebP export up to 3072 px that matches the canvas exactly, in an Indonesian and English interface.
How it is built
A single static page with plain HTML, CSS and JavaScript, and Three.js for the tilted grid, perspective and shadows. No framework, bundler or backend. Designs are processed in the browser, so user images are never uploaded or stored, which matters for designers handling unreleased client work. It is deployed on Vercel straight from GitHub.
What this project demonstrates
It sits between design and code: a tool shaped by real designer workflows, where the details that matter are visual, such as light direction, shadow softness, and how the grid crops at different ratios. It also shows end-to-end ownership, from rendering and UI to the README, promo posters and search metadata.