PresetHaus
← All presets

Fashion · Light

Fitting Room

A streetwear store in hospital white and black: a horizontal fitting room of cut-out models in a row, where the look in focus is sharp and its neighbors blur, followed by a 3D rack that spins garments and a glass lens that swaps the photo underneath — all in heavy uppercase condensed type.

Palette

  • --bg#FDFDFD

    main background (studio white)

  • --bg-2#F3F3F3

    strips and product cards

  • --preto#101010

    headlines, buttons, dark sections, category bar

  • --texto#1A1A1A

    body text

  • --texto-2#6B6B6B

    struck-through prices, meta, captions (5.2:1 on --bg; #8A8A8A only on black)

  • --linha#E6E6E6

    dividers and card borders

  • --acento#F2C200

    occasional yellow ("new" badge, active indicator)

Typography

  • Display: extra-bold condensed grotesque in uppercase, tracking 0 to -0.01em, line-height 0.9 — clamp(2rem, 4vw, 3.6rem) for titles; manifesto at ~4vw — suggestions: Anton / Bebas Neue (or Oswald 700)
  • Body: neutral grotesque 400–500, 11–13px — suggestions: Inter / Geist
  • Support/labels: 9–10px uppercase tracking 0.08em (caption under the look in detail), superscript counters beside categories
  • Treatments: manifesto in giant condensed type with inline dots/objects and underlined words; centered stacked category list with superscript counts; price with the previous value struck through.

Sections

  1. Nav — graphic symbol + name on the left, 4 categories + a bag with a counter on the right, white background (or black in the dark sections).
  2. Hero / fitting room — condensed title at the top left + subtitle; horizontal row of 8 full-length cut-out models: the central one sharp, the side ones progressively blurred; right-hand side panel "shop the look" with 3 items (thumbnail, name, price, +), look total with discount and a black button; numbered 01–08 track and arrows below.
  3. Look detail — on clicking the model, it stands alone with numbered hotspots over the garments; garment card appears beside it.
  4. Manifesto — black background, centered white condensed text on 4–5 lines with inline icons/objects and underlined phrases, words lighting up with the scroll.
  5. 3D rack — title on the left, text on the right; rack in perspective with 6–8 hanging garments that spin on mouse-over; garment caption and count below.
  6. In motion — full-bleed night photo/video with a circular glass lens that follows the cursor and reveals another photo underneath; condensed title at the bottom left, light button on the right.
  7. Categories — centered stacked list of categories in condensed type with superscript counts; horizontal black strip crossing it with floating products that swap on hover.
  8. Products — title + text, pill filters, grid of 4 product cards with price, pagination arrows.
  9. Video strip + newsletter/footer — video band; black block with a 2-line title, input + button, 3 link columns.

Motion and interaction

  • Intro: load → models enter from the right with stagger and the title reveals via a mask (~1.2s).
  • Fitting room in a row: drag/arrows/horizontal scroll → the row slides; the central model is sharp (blur 0) and the others get blur/opacity proportional to distance; "shop the look" panel swaps with a crossfade.
  • Hotspots: click on the model → the others disappear (blur + fade), numbered dots appear; hover shows the garment card.
  • Lit-up manifesto: scroll scrub → words go from dark gray to white.
  • 3D rack: hover on a garment → spins 360° on Y on its hanger with a sway; Three.js (alpha-cut planes) or CSS 3D.
  • Glass lens: cursor → ~120px circle with refraction/chromatic aberration reveals another image; GLSL shader (or clip-path + CSS filter as a fallback).
  • Categories: hover on a word → products in the black strip swap with a slide.
  • Lenis for smooth scrolling.

Components

  • Black button: 32px pill-rectangle, 999px radius, 10px 600 text + "→".
  • "Shop the look" item: 48×56 thumbnail on --bg-2, 10px 600 name, 9px gray category, 10px price, 16px "+" button.
  • Look total: label + savings in gray on the left, struck-through price + 14px final price on the right.
  • Numbered track: 01–08 at 9px, active one with a 24px black bar above and the name.
  • Hotspot: 14px black circle with a white number, pulsing ring.
  • Product card: square image on --bg-2, "001" index and "+" at the top, 11px name, 11px price.
  • Filter pill: 22px, 1px outline; active one black with white text; count in parentheses.
  • Lens: 120px circle, 1px white border at 40%, distortion + aberration.
Fitting Room · Fashion · PresetHaus