PROMPT

Build a premium clothing brand product website.

Use React, Tailwind CSS, Framer Motion, and GSAP + ScrollTrigger for all animations.

The clothing should feel like architecture — present each garment like a sculptural object.

Fabric, silhouette, and construction explored through scroll and interaction, not gimmicks.

The site should breathe: silence and whitespace are as important as motion.

CORE PHILOSOPHY

— The garment is the hero. Nothing competes with it.

— Light on the fabric is a design element. Shadows define form.

— Restraint IS the luxury. Less text. More presence.

— The model doesn't pose. The garment moves.

TECH STACK

— React + TypeScript

— Tailwind CSS (custom design tokens: warm off-white, deep charcoal, aged brass)

— Framer Motion for component-level transitions

— GSAP + ScrollTrigger for scroll-driven sequences

— Lenis or Locomotive Scroll for buttery smooth scrolling

— React Three Fiber (optional) for a 3D fabric/material viewer

— next/image or Cloudinary for cinematic-quality image rendering

SECTIONS TO BUILD

1. HERO — Full-bleed film-grain texture over a slow editorial video. Brand name in ultra-thin serif, 120px+. A single word fades in letter by letter: "considered."

2. COLLECTION REVEAL — Garments scroll into frame on a horizontal track. Fabric name and origin (e.g. "170gsm Japanese selvedge denim — Kojima, Okayama") appear in a minimal tooltip as cursor hovers.

3. MATERIAL STUDY — Full-screen close-up textile photography. Scroll parallax reveals weave structure. A floating label reads: GSM weight · Origin · Certification · Hand feel.

4. THE GARMENT — Sticky scroll section. One piece. Multiple angles. As you scroll, the camera orbits the garment on a model. On mobile, a swipe-gallery. Specs appear in sequenced fade.

5. CONSTRUCTION NOTES — Expanded diagram with animated SVG stitch paths tracing the seams. Each stitch point triggers a callout: double-chain stitch, horn buttons, floating canvas.

6. LOOKBOOK — Infinite masonry grid of editorial shots. On hover, images desaturate and a film-grain overlay appears. Click expands to full-screen lightbox with cinematic exit transition.

7. FIT PHILOSOPHY — A typographic manifesto section. Words enter one line at a time using scroll scrubbing. Large, airy, editorial.

8. ATELIER — Behind-the-seams: production process told through still photography and short captions. Nothing moves unless it earns it.

9. SIZE & FIT — An interactive garment flat lay. Click a measurement point → a smooth tooltip reveals the dimension. Toggle between size charts with a fluid morphing animation.

10. FOOTER — Coordinates of the atelier. Season. A single CTA: "Reserve a piece."

MOTION PRINCIPLES

— All page transitions: fade + 8px vertical shift, 600ms ease-out

— Scroll-triggered elements: staggered entrance, 80ms between siblings

— Hover states: 200ms ease, never jarring — always organic

— Cursor: custom cursor that morphs into a fabric swatch on product hover

— Loading screen: thread unspooling animation, then snap to content

— Image entrance: clip-path wipe from bottom, revealing fabric like fabric being unfolded

MICRO-INTERACTIONS

— Add to cart: button inhales and exhales, then collapses to a checkmark

— Image hover: a slow 1.04× scale on the image only, not the card

— Navigation links: an underline that draws itself from left to right on hover

— Size selector: pills with a sliding pill indicator (like a segmented control)

— Cursor over editorial image: cursor becomes a magnifier ring with a subtle pulse

TYPOGRAPHY

— Display: a high-contrast hairline serif (e.g. Cormorant Garamond, Editorial New, or PP Editorial Old at 5–10px tracking)

— Body: a humanist mono or neutral grotesque (e.g. Suisse Int'l, ABC Diatype, or Inter)

— Hierarchy: massive display size (100–140px) vs. micro-caption (9–11px) — nothing in between

— All headings in sentence case. Zero uppercase outside labels.

COLOR PALETTE

— Background: warm #F5F2EC (aged paper)

— Foreground: deep #1C1814 (ink)

— Accent: #B5955A (aged brass / raw hem)

— Surface: #EAE6DE (linen)

— No pure black. No pure white. Every color has warmth.

REFERENCES

— Aesop (restraint + texture)

— Loro Piana (material obsession)

— The Row (silence as luxury)

— Bottega Veneta (craft foregrounded)

— Assembly New York (editorial minimalism)

— Awwwards: Acne Studios, Jacquemus, Lemaire

This should be Awwwards Site of the Day quality.

Blow the viewer's mind with restraint, precision, and total command of silence and motion.

Every scroll should feel intentional. Every hover should feel handmade.