A closer look (mobile) at the subtle parallax shift in iOS WhatsApp when you swipe between photos I rebuilt for the web.

Full keyboard nav + screen reader support.

#react  #nextjs

Rebuilding a native interaction like that parallax shift for the web is genuinely tricky to get feeling right, and baking in full keyboard nav plus screen reader support from the start rather than bolting it on after is rare. What was the hardest part of matching that particular motion feel?

I designed and built an interactive, 3D conversion-focused web application for personal Starbucks project , showcasing their specialty Reserve coffee line and seasonal Frappuccino menu. The brand needed an owned digital experience that could bridge high-end editorial product storytelling with real-time 3D WebGL interaction, allowing customers to explore and customize drinks before ordering.

The site is a fast, mobile-first single page with a luxury cream and forest green editorial look. Guests can inspect a 3D Frappuccino cup in real-time with 360° drag rotation, hover over menu items to reveal an interactive drink customizer (size, milk type, blend selectors), browse single-origin roast profiles, and place takeaway orders seamlessly within the brand experience.

It also ships full 3D performance optimizations (60 FPS WebGL rendering with procedural fallbacks), scroll-driven micro-animations, and an ultra-smooth frosted glass navbar (backdrop-blur-2xl) that dynamically blurs on scroll.

What I delivered:

-Custom Next.js 14 web app (Hero, 3D Inspect Canvas, Featured Selections, Popular Beverages, Starbucks Reserve Banner, Store Locations, Subscription)

-Real-time 3D WebGL coffee cup showcase with 360° drag controls (Three.js / React Three Fiber)

-Interactive hover product customization cards (Size, Milk, Blend selectors + Add to Basket)

-Custom typography, watermarked storytelling background, and luxury cream/green visual system

-Responsive UI with Framer Motion & GSAP scroll polish

-Frosted glass scroll-activated navigation bar with mobile overlay

-Production-ready Next.js web application.

I love starbucks , that's why I built this web for showcasing the my skills.That's it.

For me, the drink customizer is the strongest part. Once the 3D cup draws someone in, keeping size, milk, and blend choices in the same view gives them a clear next step.