Study
03
WRAITH
STUDIO
WRAITH started at 3 AM with no budget and one question: could I build a store that was technically sound but still felt like an immersive world? The case study starts with the 2027 storefront preview, then breaks down product data, variant paths, cart persistence, checkout handoff, image placement, and motion engineering.
WRAITH
STUDIO
I designed every piece for WRAITH, then built an intentionally unusual storefront around that universe. It still has to behave like a real store, so the platform covers product data, variant paths, cart persistence, checkout handoff, responsive image placement, and motion that stays smooth instead of decorative.
- StackNext.js 15 · React 19
- CommerceCart · Price guards · Stripe
- Products10 SKUs · 5 categories
- DeployVercel · Live domain
The Web Idea
A full-screen drop page that also works as a store. The technical work was making product browsing, cart entry, and image-led pacing share one scroll without turning into a standard product grid. The constraint was simple: the hero, product rail, and cart path had to live in one route.
Interface System
Glass navigation, large product frames, reveal timing, and responsive image placement had to move as one system. The difficult part was keeping the UI consistent across 10 SKUs, each with several images and variant paths.
The Platform
An end-to-end store built with Next.js 15, React 19, typed product data, variant routing, persisted cart state, server-side price resolution, Stripe checkout, and Vercel deployment. I needed Stripe checkout live from day one, which meant the commerce structure had to be type-safe and correct before any of the visual layer was wired. Commerce-first, then skin.
Commerce stack.
Campaign skin.
WRAITH had to behave like a real store while still reading as a drop preview. The commerce logic stays separate from the presentation layer: cart state, price guards, and Stripe can be tested without touching the visual system. The front end can stay image-led while checkout remains predictable.
Storefront shell
App Router storefront with React 19 UI composition, typed product records, image-heavy pages, and Vercel deployment.
Launch motion
Scroll reveals, water-ripple canvas, product transitions, and reduced-motion fallbacks for the drop surface.
Checkout spine
A persisted cart backed by server-side price resolution, product variants, and a Stripe checkout path built for live drops.
Authoring workflow
Internal Fit Wizard controls let product imagery be positioned and shipped without reopening design files for every crop.
I designed Fit Wizard from a personal frustration I had before I knew how to code: handing off assets, assigning the correct size, rotation, crop, and sequence, then waiting on tech support could leave a single product misaligned for days. The Fit Wizard turns that gap into a built-in product authoring tool. Each image in a product gallery can be panned, scaled, and rotated independently within its tile, then saved back to the product data. New images can be dragged into the carousel directly from Finder without leaving the product page.
Designed.
Rendered.
Deployed.
Every garment in the collection started as a 3D silhouette. Modeled from scratch, detailed with material and hardware choices, then rendered into final product cutouts. Hoodies with leather panels and protective shells around vital zones, metal-detailed gloves and boots, anti-scratch and anti-reflective glasses. Ten SKUs across five product categories, each with color variant routing and a multi-image gallery.
The design constraint was that every product had to read clearly at 33vw tile size with no hover affordance, carry brand identity in its silhouette alone, and scale to multiple color variants without a separate photoshoot.
WRAITH was the project where I stopped separating design decisions from implementation decisions. The garments were designed by someone who knew how they would be rendered, routed, cropped, and sold. The technical choices were made by someone who knew how the store had to feel. I built that workflow because I needed it.