About this template

A lookbook for an invented fashion label, built like a printed issue: near-monochrome photography, one collection accent, and type so big it behaves like architecture. The cover is a full-bleed silhouette — a single model under a sculptural coat, face turned away — with the collection name set across it in oversized condensed type. Then the signature move: the book reads sideways. Vertical scroll drives a pinned viewport whose chapters slide horizontally — chapter titles drifting slower than the photographs, frames carrying their own inner parallax, a thin accent line tracking progress. Two chapters hold five looks; a campaign film appears only as an honest drawn placeholder, poster frame and play glyph, no real video. Clicking any look opens a full-screen detail: the photograph beside a code-drawn spec card of garment credits — fabric, cut, finishing — marked as invented sample copy. A quiet typographic interlude carries the collection notes, and a stockists list closes with invented stores in real cities. Ink ground, bone type, one accent color that is itself a variable; Oswald display over Manrope text; zero radius, hairline structure. Under prefers-reduced-motion the chapters stack vertically and everything still reads. Every photograph comes from one campaign shoot in one hard light: models turned away, shadowed or cropped above the shoulders, silhouettes over portraits, and no readable text anywhere in frame. Swap label, collection, season and accent in one content file; the second demo case turns the issue into a tailoring capsule in deep green.

The template prompt

The live demo was built from exactly this text — nothing added.

# Fashion Lookbook Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A single-page high-fashion lookbook: a full-bleed silhouette cover under oversized condensed type, vertical scroll driving pinned horizontal chapters of editorial look frames with slower-drifting chapter titles, code-drawn look-detail overlays with garment credits, an honest campaign-film placeholder, a typographic collection-notes interlude, and invented stockists.

- Audience: Independent fashion labels, editorial and campaign studios, and portfolio photographers presenting work in chapters.
- Goal: Read like an issue, not a website: carry the visitor sideways through the collection with scroll, let them open any look for its credits, and leave with the label's name set in their memory.
- Tone: austere, declarative, magazine-flat — captions like credits, notes like manifestos; no exclamation, no softness in the words.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: tailwindcss (MIT), motion (MIT), lucide-react (ISC), @fontsource/oswald (OFL), @fontsource/manrope (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest fashion-lookbook-website -- --template react-ts; add [email protected], postcss and autoprefixer as dev dependencies; add motion, lucide-react, @fontsource/oswald and @fontsource/manrope as dependencies.
  - vite.config.ts: base './', build.sourcemap false, build output dist/.
  - tailwind.config.js: extend colors ink #111214, graphite #1B1D21, fogline #2E3136, bone #EDEDEA, ash #6E7176, and accent var(--accent) (bind --accent in :root from content.ts); fontFamily display 'Oswald' and sans 'Manrope'; default radius 0 everywhere.
  - postcss.config.js: tailwindcss + autoprefixer.
  - src/hooks/useHorizontalChapters.ts: the core choreography — the outer wrapper's height is set to calc(100vh + (trackWidth - viewportWidth) px) measured from refs on mount and resize; a sticky 100vh child pins the track; Motion's useScroll on the wrapper drives useTransform(scrollYProgress, [0,1], [0, -(trackWidth - viewportWidth) px]) applied as the track's translateX (linear, no spring); chapter title blocks get a second transform at 0.6 of that speed; each frame's inner image gets a translateX of -6%→6% across the chapter's own progress.
  - src/components/LookOverlay.tsx: full-screen fixed overlay (graphite at 96%, z-50) — photograph at 3:4 on the left (max-h 78vh), spec card on the right (bone text on graphite, hairline fogline rules), accent look number, close X; opens on frame click, closes on X, Escape and backdrop.
  - The campaign film placeholder is drawn in code: a graphite frame with a 64px accent play triangle (SVG), the caption 'CAMPAIGN FILM — PLACEHOLDER' and a subline 'The film slot is a drawn placeholder; no video ships with this demo.' Clicking does nothing but nudge the glyph 2px.
  - src/lib/motion.ts: reveal variants (opacity 0→1, y 30→0, 900ms cubic-bezier(0.16,1,0.3,1), 120ms stagger, whileInView once) with useReducedMotion falling back to plain fades and — for the chapters — to a vertical stacked layout with no pinning and no transforms.
  - Keep every user-facing string and data set (label, collection, season, accent hex, chapters array {number, title, frames[{image, look, caption, credits[]}]}, notes, stockists, footer copy) in src/content.ts; sections read from it so values swap in one place.
  - index.html: <title>[BRAND] — [COLLECTION]</title> plus a drawn-in-code favicon.svg (a small accent-colored square on the ink ground); no other meta work.

## Variables
- [BRAND] — Label name (default: "Stille"). Invented fashion label for the wordmark, page title and footer.
- [COLLECTION] — Collection name (default: "Monolith"). The collection title set in oversized type on the cover and echoed through chapters and notes.
- [SEASON] — Season label (default: "Autumn–Winter"). Static season label next to the label name (no years, no real dates).
- [ACCENT] — Collection accent (default: "#D8461F"). The one accent color, applied as a CSS variable: chapter numbers, progress line, play glyph, links, look tags. Change it and the whole issue re-inks.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/fashion-lookbook-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

Join Pro early access →

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Fashion Lookbook Website"
colors:
  ink: "#111214"
  graphite: "#1B1D21"
  fog_line: "#2E3136"
  bone: "#EDEDEA"
  ash: "#6E7176"
  accent: "var(--accent) #D8461F"
typography:
  display_cover_title_chapter_titles_look_numbers_oversized_condensed_uppercase_tight_tracking: { family: "Oswald", weights: [500, 600, 700] }
  text_captions_spec_cards_notes_stockists_quiet_sans_labels_uppercase_tracked_0_14em: { family: "Manrope", weights: [400, 500, 600] }
spacing: "Editorial and architectural: content max-w-[1600px] px-6/px-10; the lookbook track pads x 8vw with 6vw gaps between frames; chapter interludes take 40vw of track; notes and stockists py-36; captions sit 16px beneath frames with a fogline rule."
radius: "Zero everywhere — frames, cards, buttons, overlays; the only geometry is the accent play triangle."
---

# Fashion Lookbook Website — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Ink** `#111214` — Page ground everywhere — near-black neutral, the paper of the issue.
- **Graphite** `#1B1D21` — Overlay and spec-card ground, film placeholder, footer band.
- **Fog line** `#2E3136` — Hairlines, spec-card rules, caption underlines — the only borders.
- **Bone** `#EDEDEA` — Primary text: oversized titles, captions, credits.
- **Ash** `#6E7176` — Muted text: sub-captions, stockist meta, sample-copy notes.
- **Accent** `var(--accent) #D8461F` — The single collection accent from [ACCENT]: chapter numbers, progress line, play glyph, look tags, link hovers.

## Typography
- **Display — cover title, chapter titles, look numbers (oversized condensed, uppercase, tight tracking)** — Oswald (OFL), weights 500/600/700. Self-host the font files.
- **Text — captions, spec cards, notes, stockists (quiet sans; labels uppercase tracked 0.14em)** — Manrope (OFL), weights 400/500/600. Self-host the font files.

## Spacing & shape
- Spacing: Editorial and architectural: content max-w-[1600px] px-6/px-10; the lookbook track pads x 8vw with 6vw gaps between frames; chapter interludes take 40vw of track; notes and stockists py-36; captions sit 16px beneath frames with a fogline rule.
- Radius: Zero everywhere — frames, cards, buttons, overlays; the only geometry is the accent play triangle.

## Motion
- Horizontal chapters: vertical scroll drives the pinned track's translateX linearly (no spring); wrapper height = 100vh + the track's scrollable width, so the scrub is exactly 1:1 with the wheel.
- Chapter titles drift at 0.6 of the track's speed, so type lags behind photographs as they pass.
- Inner parallax: each frame's image slides -6%→6% inside its frame across its chapter's progress, images slightly larger than their masks (scale 1.12).
- Progress line: a 2px accent line across the top of the pinned viewport fills with scrollYProgress; the current chapter number ('01 / 02') in accent updates as chapters change.
- Cover: the photograph scales 1.05→1 over 3s on load; the collection title rises 40px once; the scroll cue line loops 3s.
- Look overlays: fade in 300ms with the photograph sliding 24px into place; Escape and backdrop close.
- Reveals: notes and stockists fade up (y 30→0, 900ms) with 120ms stagger via Motion whileInView, once.
- prefers-reduced-motion: no pinning and no transforms — chapters render as a vertical stack of frames and titles; the cover and overlays become plain fades; the progress line is static at full.

## Imagery
One campaign shoot in one light: high-fashion editorial photography, near-monochrome — charcoal, bone and ink grays with at most one muted accent tone — hard directional side light carving sculptural silhouettes, deep shadows, subtle film grain, medium-format look, full-length compositions with generous negative space. Faces are never identifiable: models are turned away, in shadow, or cropped above the shoulders — silhouette over portrait. No readable text, no logos anywhere in frame. The six photographs are generated by VibeFather and downloaded into public/images.

## Tone
austere, declarative, magazine-flat — captions like credits, notes like manifestos; no exclamation, no softness in the words.

---
— Prompt by VibeFather · https://vibefather.ai/t/fashion-lookbook-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown