Skip to content
All projects
Web & Full StackPrivate

InkStudio: Premium Next.js Experience Powered by Framer Motion

A modern web application tailored for high-end art studios, featuring hardware-accelerated animations via Framer Motion, URL-based state management, and a high-performance media rendering architecture.

View live

Tech stack

Performance & metrics

  • Aggressive viewport-oriented resolution optimization utilizing the sizes prop in the next/image component to minimize payload overhead
  • Complete elimination of unnecessary re-render cycles by wrapping intensive filtering logic and dynamic stat calculations (dynamicStats) in useMemo hooks
  • Offloading main-thread scroll performance bottlenecks by enforcing passive: true constraints on window scroll event listeners

Why I built it

Premium art studios require fluid, high-performance digital storefronts that reflect their brand identity, rather than relying on bloated, standard CMS templates. I engineered the InkStudio project from scratch to deliver a luxurious UI/UX experience where user interactions occur with zero-latency, and high-resolution imagery is served without compromising render performance.

Architecture & decisions

The application is built on the Next.js App Router architecture. Client-side filtering states (activeCategory, activeArtist) are strictly bound to URL parameters (useSearchParams) to ensure state persistence and deep-linking capabilities. Heavy visual filtering algorithms and mathematical aggregations are strictly isolated using useMemo. The animation layer leverages framer-motion to handle GPU-accelerated page transitions, unmount lifecycles via AnimatePresence, and complex staggered rendering sequences.

Key features

  1. 01Complex micro-interactions and staggered layout animations orchestrated via framer-motion
  2. 02URL-based, deep-linkable, and asynchronous portfolio filtering engine utilizing useSearchParams
  3. 03Real-time Instagram feed integration fetched asynchronously via the Behold API
  4. 04Custom-built, highly optimized Lightbox/Carousel module designed for high-res media consumption
  5. 05Global and centralized 'Elegant' theme engine structured heavily around Tailwind CSS variables

Technical review

This project embodies the intersection of aesthetic design and robust frontend engineering. The Framer Motion integration bypasses heavy CSS DOM manipulations by offloading transform and opacity calculations directly to the GPU, guaranteeing a steady 60 FPS even on mobile devices. Synchronizing the complex UI filtering logic with the URL rather than relying solely on local component state is a critical architectural decision, enabling users to seamlessly share specific artist/style combinations as direct links.