Nicolas MarquiSoftware Engineer
Loading000
Nicolas Marqui.
AboutWorkProjectsContact
Get in touch+Get in touch+
← All projects

MokkMokk

Any screenshot, beautifully framed.Any screenshot, beautifully framed.

Visit the site+Visit the site+
Role
Fullstack
Year
2026
Type
Design tool
Built with
  • Next.js
  • TypeScript
  • Tailwind CSS
  • Node.js
  • Express
  • Puppeteer
  • Unsplash API
Mokk, any screenshot, beautifully framed.: home page
Overview

Make your screenshots look good. Paste a link and Mokk captures the page, or drop in your own image, then frame it in a device, pick a background, tilt it and export.Make your screenshots look good. Paste a link and Mokk captures the page, or drop in your own image, then frame it in a device, pick a background, tilt it and export.

The challenge

Every launch post, portfolio and app store page needs nice screenshots, and making them usually means opening a design tool, finding a device template and nudging things around for half an hour. A plain browser screenshot just looks flat.Every launch post, portfolio and app store page needs nice screenshots, and making them usually means opening a design tool, finding a device template and nudging things around for half an hour. A plain browser screenshot just looks flat.

The approach

It’s two parts. A small Express service runs Puppeteer to open any URL in a real browser at desktop, tablet or mobile size, with options for full-page shots, dark mode and hiding cookie banners, and it’s rate-limited so nobody can hammer it. The Next.js editor then puts the shot in a browser, laptop, desktop, tablet or phone frame, sets it on a gradient or an Unsplash photo, adds shadow and 3D tilt, and exports PNG, JPG or WebP at 1× or 2×, or copies it straight to your clipboard.It’s two parts. A small Express service runs Puppeteer to open any URL in a real browser at desktop, tablet or mobile size, with options for full-page shots, dark mode and hiding cookie banners, and it’s rate-limited so nobody can hammer it. The Next.js editor then puts the shot in a browser, laptop, desktop, tablet or phone frame, sets it on a gradient or an Unsplash photo, adds shadow and 3D tilt, and exports PNG, JPG or WebP at 1× or 2×, or copies it straight to your clipboard.

Demo
Gallery
The Mokk editor framing a capture of nicolasmarqui.com in a browser window on a warm gradient
The same capture in a laptop frame, with the gradient backgrounds open
Mokk on a phone
Design
Design system

MokkMokk

Mokk is basically a darkroom. The interface is all neutral graphite with no warm or cool tint, so whatever background you pick looks the same in the editor as it does in the export. There’s exactly one colour, a lime flash, and it only marks what you’re acting on: the main button, the selected frame, slider fills. If two things on screen are lime, one of them is wrong. Everything is set in Geist, with Geist Mono for the numbers so values don’t jitter while you drag a slider. And the logo is a screenshot caught mid-tilt, which is pretty much the whole app in one shape.Mokk is basically a darkroom. The interface is all neutral graphite with no warm or cool tint, so whatever background you pick looks the same in the editor as it does in the export. There’s exactly one colour, a lime flash, and it only marks what you’re acting on: the main button, the selected frame, slider fills. If two things on screen are lime, one of them is wrong. Everything is set in Geist, with Geist Mono for the numbers so values don’t jitter while you drag a slider. And the logo is a screenshot caught mid-tilt, which is pretty much the whole app in one shape.

Type
Geist · Geist Mono
Colour
  • Ground#0E0E10App background
  • Surface#18181BPanels and cards
  • Raised#27272ASelected, hover
  • Ink#F5F5F4Text
  • Muted#A1A1AALabels
  • Flash#C8F03CThe one accent
Mokk start page: “Make your screenshots pocket-sized.” beside a phone mockup on a merlot glow, with styles to start from
Mokk editor: the source panel, the framed shot on the stage and the frame inspector
Picking an Unsplash photo as the background, with blur and dim sliders
Mokk logo sheet: the tilted screenshot mark, reversed and light versions, icon sizes and construction
Mokk editor on a phone, with the frame options in a bottom sheet
Next projectJuntôFamily piggy bankFullstack · Group savings→
Juntô, family piggy bank: home page
Contact
(04)

Wanna reach out?Wanna
reach out?

Got a role in mind, a question about something I built, or just want to say hi? Send me an email. I usually reply within a couple of days.Got a role in mind, a question about something I built, or just want to say hi? Send me an email. I usually reply within a couple of days.

Based in Lisbon, Portugal

nick.marqui@gmail.com→
Navigation
AboutWorkProjectsContact
Elsewhere
GitHubLinkedInInstagramTravels
Say hellonick.marqui@gmail.com

2026 © Nicolas Marqui. All rights reserved.

Paper effects after PaperDrops by Jesper Landberg. Shaders ported from Paper Shaders (Apache-2.0).

Back to top+Back to top+
MarquiMarqui