Snapstyle

laptop frame
Snapstyle

Overview

A sleek, ad-free screenshot editor with features like direct clipboard pasting, seamless background changes, and high-quality exports, all within a user-friendly dark UI. Perfect for quick, quality image enhancements.

Features

  • Frame Customization: Adjust frame dimensions, color, and corner radius for both the frame and screenshot.

  • Borders & Stroke: Add and customize border width and color around the frame and screenshot.

  • Background Options: Choose background type (transparent, solid color, gradient, or image) and customize with a color picker, gradient editor, or image uploader.

  • Pattern Overlays: Apply and adjust pattern overlays on the background, with options to select pattern type and opacity.

  • Transformations: Move, resize, and align the screenshot within the frame; apply perspective transformations and scaling.

  • Crop & Aspect Ratios: Crop the screenshot using drag-and-select or predefined aspect ratios.

  • Typography: Add text with customizable font family, size, color, and alignment options.

Timeline

3 months, Deployed in May 2024

Challenges

  • Control Management: Implementing a flexible store to manage various controls for image manipulation.

  • Version Control: Adding robust undo and redo functionality to track and reverse actions effectively.

  • Advanced Color Picker: Developing a versatile color picker that supports gradients, solid colors, and image backgrounds seamlessly.

  • Aspect Ratio Consistency: Ensuring images of different aspect ratios render consistently across frames and transformations.

Tech Stack

React React
Tailwind CSS Tailwind CSS
nextjs nextjs

Highlights

Showcasing Major Milestones and the Key Features

Upload image

0.1 Upload image

Image
Adjust the Frame Radius

0.2 Adjust the Frame Radius

Image
Add a background gradient

0.3 Add a background gradient

Image
Tilt the image

0.4 Tilt the image

Image
Add text

0.5 Add text

Image
Add a pattern

0.6 Add a pattern

Image
Download your screenshot

0.7 Download your screenshot

Image

Next Project

StorySpire

A cutting-edge full-stack modern blogging platform. Leveraging the latest technologies including Next.js, Prisma, MongoDB, and NextAuth. This platform offers a seamless experience for both creators and readers.