MÖRK — Born in the Dark

A luxury streetwear storefront for a fictional label, MÖRK — released in finite "chapters," engineered in shadow, never restocked. Built as a showcase of cinematic motion design and refined e-commerce UI.

All editorial imagery was generated with Higgsfield (the soul_2 model) and wired in through the Higgsfield MCP connector.

---

✨ Highlights

• Cinematic hero — parallax + Ken Burns drift, scroll-driven vignette, staggered word reveals
• Scroll-reveal everything — headings, sections, and product cards animate in on scroll via Framer Motion
• Animated shop filtering — category pills with a shared-layout indicator and layout-animated grid
• Product detail pages — sticky editorial image, size selector with validation, add-to-bag
• Persisted cart drawer — slide-in bag with backdrop blur, quantity steppers, live subtotal (localStorage-backed)
• Checkout UI — full form with live order summary, tax/shipping calc, and an order-confirmed success animation
• Editorial lookbook — parallax masonry gallery
• Brand story page — scroll-driven stats and pillars
• Details — film-grain overlay, marquee strips, magnetic buttons, custom 404, route transitions, fully responsive

---

🖼️ Screenshots

The Drop	Shop

Product detail	Cart drawer

Lookbook	Brand story

---

🛠️ Tech Stack

Framework	Next.js 16 (App Router, Turbopack)
UI	React 19
Styling	Tailwind CSS v4
Animation	Framer Motion 12
Type	Anton (display) · Inter (body) · Space Mono (labels) via next/font
Imagery	AI-generated via Higgsfield soul_2
Language	TypeScript

---

🚀 Getting Started

Requirements: Node.js 20.9+

# install dependencies
npm install

# start the dev server
npm run dev

Open http://localhost:3000.

Other scripts

npm run build   # production build (Turbopack)
npm run start   # serve the production build
npm run lint    # ESLint
npm run shots   # regenerate README screenshots (requires the dev server running)

npm run shots uses Playwright. First time, install the browser with npx playwright install chromium, start the dev server in another terminal, then run the script.

---

📁 Project Structure

src/
├─ app/
│  ├─ layout.tsx            # fonts, metadata, providers, site chrome
│  ├─ template.tsx          # route-transition wrapper
│  ├─ page.tsx              # landing page
│  ├─ globals.css           # brand system (colors, type, grain, marquee)
│  ├─ shop/                 # shop grid + client-side filtering
│  ├─ product/[slug]/       # product detail (async params) + add-to-cart
│  ├─ lookbook/             # parallax editorial gallery
│  ├─ about/                # brand story
│  ├─ checkout/             # checkout form + order summary
│  └─ not-found.tsx         # custom 404
├─ components/
│  ├─ Hero.tsx              # parallax cinematic hero
│  ├─ Nav.tsx  Footer.tsx   # site chrome
│  ├─ ProductCard.tsx  Marquee.tsx
│  ├─ cart/                 # CartContext (state) + CartDrawer (UI)
│  └─ motion/               # Reveal, AnimatedWords, MagneticButton
└─ lib/
   └─ products.ts           # product catalog + helpers

public/media/               # Higgsfield-generated editorial imagery

---

🎨 Brand System

Defined in src/app/globals.css as CSS variables exposed to Tailwind v4:

Token	Value	Use
--ink	#0a0a0a	Base background
--surface	#141414	Cards / panels
--bone	#f4f1ea	Primary text
--muted	#7c7a74	Secondary text
--ember	#ff4d1c	Signature accent

---

📝 Notes

• The store is front-end only — the cart persists to localStorage and checkout is a UI mockup (no real payment is processed).
• The hero is an AI image with code-driven motion rather than a video; a true video hero is a drop-in upgrade if desired.

---

Made in the dark. Imagery by Higgsfield · Built with Claude Code.