Zero Lifestyle

A premium, animations-heavy redesign concept for Zero Lifestyle, a consumer electronics and audio accessories brand. The project features clean layouts, immersive typography, and interactive product details.

Built a robust mapping utility to solve Shopify's complex image-to-variant relationship. By combining direct variant image IDs, image reverse variant lists, and alt-text token parsing (e.g., matching "#color_Orange"), the utility groups product galleries dynamically by color option, allowing seamless image state updates on color selection.

Created motion-driven slide-out navigation panels and cart overlays using Framer Motion and GSAP. Components like CartMenu, NavMenu, and NavProgress work together to give the user a tactile, app-like feel while navigating through wearable tech specs.

Leveraged Tailwind CSS v4 and GSAP scroll triggers to animate smartwatches and wireless earbuds. Features high-fidelity scroll-linked layouts and dynamic text reveals that mirror the premium nature of the brand.