The Notes is a luxury fragrance brand built on Next.js with Shopify Headless. I was responsible for developing the core frontend experience, implementing complex animations, and building custom interactive features that required engineering solutions beyond standard Shopify themes.

As the Next.js + Shopify developer, I handled the engineering and implementation of key UI components, custom flows, and animations. The project required:

Highly interactive, animation-rich pages

Custom responsiveness logic

Headless Shopify integration

Brand-specific motion and scroll effects

My goal was to transform the designs into smooth, performant, and fully responsive user experiences.

Next.js (dynamic routing, SSR/ISR, performance architecture)

Framer Motion for advanced animation sequences

Metafields & Metaobjects for dynamic product content

Image optimization, caching, layout performance work

Built side panels: left (filters) + right (product list)

Implemented bottle animations that slide smoothly into each slot

Created custom math-based formulas to position bottles correctly across all screen sizes

Added independent interactions for all 5 slots

Ensured fluid motion using Framer Motion

I implemented a highly dynamic, scroll-triggered storytelling page.

elements floating, fading, zooming, sliding, expanding

sequenced animations triggered by scroll

coordinated entrance/exit patterns using Framer Motion’s viewport & exit

Integrated metafields and metaobjects to load additional product details — fragrance notes, descriptions, relationships, etc.

This allowed content to update from Shopify automatically.

The store also required recurring subscription products for monthly, quarterly, half-yearly and annually fragrance boxes. I was responsible for integrating Shopify’s subscription APIs into the headless storefront.

Even with heavy animations, I optimized for speed by:

optimizing image quality and delivery

refining animation logic for smoother frames

reducing bundle size

caching data

Engineering a fully custom configurator not possible with Shopify themes

Synchronizing multiple animated states and scroll sequences

Optimizing heavy visuals (gradients, blurs, layered animations)

Ensuring pixel-perfect responsiveness for mathematically placed elements

Adding support for subcriptions for recurring orders.

This project strengthened my expertise in:

Advanced Next.js + Shopify Headless development

Performance management in animation-heavy pages

Mathematical UI layout engineering

Complex motion design with Framer Motion

Building premium, highly customized e-commerce experiences

https://the-notes-fragrence.vercel.app/