Absolute Intent in Luxury Headwear
Studio brief, no client: a luxury cap label that treats each piece as an architectural object, in heavy Italian cotton twill with hand-stitched structured brims and matte-silver hardware.
The storefront had to read as editorial and motion-led rather than as a catalogue, hold to a strict token palette, and model the commerce data properly before any backend work began.
Panarch Digital prototyped the storefront on Next.js 16 App Router, React 19, TypeScript and Tailwind CSS v4, with storefront and admin split into separate route groups.
- A four-token oklch palette of obsidian (#0C0C0C), gallery white (#F7F7F3), silver (#868686) and gold (#C49A4A), with 1px hairline grids and Inter paired with the variable serif Fraunces.
- Lenis momentum scrolling site-wide and a GSAP ScrollTrigger layer: a scrubbed hero parallax and The Archives, a pinned horizontal gallery of 12 looks with edge fade masks.
- Per-character staggered headline reveals, magnetic CTAs on a Motion spring, and a custom cursor hidden below the md breakpoint.
- A product page with a sticky details column, five colorway image sets, and close-up photography of brim stitching and interior detail.
- A Zustand cart in a spring-physics slide-over drawer (checkout not yet implemented).
- A Prisma commerce schema for PostgreSQL (Product, Order, OrderItem) with CUID keys, integer-cent prices, a price-at-purchase snapshot and a five-state OrderStatus enum, modelled for the next build phase. Product, order and dashboard data are mock data.
- Next.js 16 App Router
- React 19
- Tailwind CSS v4
- GSAP ScrollTrigger + Lenis
- Motion (Framer Motion)
- Zustand
- Prisma 7 Schema (PostgreSQL)
Monolithic Silhouette Flagship & Kinetic Gallery
Architectural headwear retail set in an obsidian, gallery-white, silver and brushed-gold oklch palette, with GSAP-pinned editorial galleries and Lenis momentum scroll.
Studio prototype: the brand, catalogue and prices are concept data. No customers, sales or traffic figures exist for this build.
12 looks
GSAP ScrollTrigger pins a 12-look horizontal gallery with scrubbed translation and edge fade masks.
Zustand
Global cart store with quantity merge, auto-open on add, and spring-physics layout animations in the slide-over drawer.
GSAP + Lenis
Scrubbed hero parallax, image parallax inside overflow-hidden frames, per-character headline reveals and site-wide momentum scroll.
Prisma
CUID-keyed Product / Order / OrderItem schema with integer-cent pricing, a price-at-purchase snapshot and a five-state OrderStatus enum, modelled for PostgreSQL.
Studio prototype with no client, no launch and no conversion data. It is a motion and art-direction study: a pinned GSAP archive, Lenis scroll, magnetic CTAs, a Zustand cart and a mock admin for orders, products and settings, in 2 commits on 3 August 2026.
Checkout, persistence and a measured performance run on a live deployment are the next build phase.
- Looks in the Pinned GSAP Archive
- 12
- SKUs Across 5 Colorway Image Sets
- 7
- Prisma Commerce Models
- 3
See where your storefront loses its first second.
A 30-minute consult with Arpan Tyagi, founder and principal engineer, on where your current stack spends its load time and what we would change first.
Client platforms shipped for Fabriclicious, Mithila Enterprises and Kiran Singh Foundation.