Framecraft Studio

Short Summary

Framecraft is a web application for creating premium mockups and compositions for portfolios, cases, and social media. The project was born out of a personal need: having more control over the presentation of my work without relying on watermarks, export limitations, or subscriptions from other tools.

Context

Presenting a digital project goes beyond showing the interface working. Perspective, device, proportion, background, and visual hierarchy influence how the work is perceived.

Tools I used solved part of this process, but limited important resources or inserted their own identity into the result. I decided to build an alternative oriented to my workflow and prepared to evolve as a product.

The Challenge

Creating an experience that offered sufficient visual control without turning the editor into an intimidating interface.

The application should also work without registration, save projects automatically, support different devices, and export images ready for multiple channels.

The Solution

Framecraft brings together in a single editor:

• Mockups for desktop, tablet, and mobile.

• Scale, perspective, rotation, shadow, and blur control.

• Customizable backgrounds, colors, and images.

• Editible text and stickers.

• Upload of custom stickers.

• Layers with ordering, blocking, and visibility.

• Magnetic guides and keyboard shortcuts.

• Locally saved project library.

• Reusable and fully editable templates.

• PNG export in multiple resolutions and social media formats.

Product Decisions

Value before registration
Projects are stored in IndexedDB. The user can experience the entire main flow without creating an account.

Templates as a starting point
Templates preserve the current image and maintain all editable attributes. They accelerate composition without removing authorship.

Consistency in details
Native dialogs were replaced by custom components. Save states, errors, and confirmations follow the same visual language as the editor.

Evolution-compatible
New element attributes have migration to previous compositions, avoiding breaking saved projects.

Stack

• Next.js

• React

• TypeScript

• Tailwind CSS

• Zustand

• IndexedDB

• html-to-image

• Vercel

Result

The project evolved from a mockup editor to a functional creative product base. Today, it already makes part of my own presentation process and has an architecture ready to receive authentication, cloud synchronization, plans, and collaboration.

More than replacing a paid tool, Framecraft transformed a fragmented step of my work into a unique, consistent, and reusable experience.

My Role

Product strategy, visual direction, UX/UI, front-end architecture, and development.

Create a composition, explore templates, and export your first mockup.
Open Framecraft →