Zenji Streetwear Storefront

Built to mirror and elevate the authentic aesthetic of zenji.shop - merging brutalist layout structures, Japanese anime visual culture, and high-performance frontend engineering. Rather than relying on heavy 3D canvas runtimes (like Three.js or Spline) that compromise mobile battery and introduce layout jank, the storefront harnesses pure CSS 3D transforms (perspective, rotateY, preserve-3d) paired with lightweight Framer Motion spring transitions (damping: 26, stiffness: 290). The featured drop showcase creates a physical card-deck stacking experience using native sticky positioning with exposed index tabs as each garment pins.

Cart state operates globally through a React Context architecture synchronized with localStorage under zenji_cart_v1. Garments are indexed by composite (id, size) keys for seamless line-item quantity merging, dynamic discount calculations against crossed-out retail prices, and a real-time progress bar computing remaining spend toward free shipping thresholds. The multi-screen application features client-side React Router navigation across the Awakening drop countdown, real-time filtered catalog with multi-field search, Tokyo district editorial lookbook modal, craftsmanship narrative chapters, and 5-angle product detail pages with an interactive CM/IN size chart converter.