About this project

PFP Studio is a browser-based profile picture editor and animator purpose-built for developers, creators, and social media users who want polished, unique avatars. The application offers a rich editing canvas with layer-based composition, background removal, custom frame overlays, gradient effects, and real-time CSS filter adjustments — all running client-side for instant preview. Framer Motion powers smooth animation previews for animated avatars in WebP and GIF formats. The Next.js frontend delivers a fast, responsive interface with drag-and-drop image upload, real-time parameter controls, and one-click export at high resolution. PFP Studio showcases advanced frontend engineering: performance-optimized canvas operations, complex animation timelines, and a polished SaaS-style product experience built entirely in TypeScript.

Key highlights

• Layer-based image composition with real-time canvas rendering
• Background removal and gradient overlay tools
• Animated avatar export in WebP and GIF via Framer Motion
• Drag-and-drop image upload with instant preview
• CSS filter controls for brightness, contrast, saturation, and blur
• Custom border frames and aspect ratio crops
• Next.js server components for fast initial load
• One-click high-resolution export at multiple sizes