Fashion · Light

Stitch

A quiet off-white editorial of handcrafted streetwear: a 3D garment spins with the scroll until it reveals the embroidery on the back, text comes out of blur, metadata in mono, and the page turns into a real shop with a pixel-block transition and a punch of pure red.

Palette

--bg#FAF8F6
main off-white background
--surface#F0EEEB
background of the product cards
--ink#1B1A19
titles, logo, solid buttons
--text-2#6B6864
descriptions, secondary prices and mono metadata (≥ 4.8:1)
--text-3#B9B5B0
only the initial state of the blurred text
--accent#F1170E
pure red: manifesto section, bars, highlighted embroidery
--line#E3E0DC
dividers of the mono tables

Typography

Display: high-contrast condensed serif, weight 400, normal case, tracking -0.03em; logo and product titles clamp(40px, 6vw, 96px) — suggestions: Instrument Serif / Gloock (or Bodoni Moda in condensed width via font-stretch when available)
Body: neutral grotesque 400, 12–15px, line-height 1.45 — suggestions: Inter / Geist
Support/labels: mono 9px uppercase for spec sheets (label on the left, value on the right), breadcrumbs and edition numbering — suggestions: JetBrains Mono / Geist Mono
Treatments: text that emerges from blur from left to right; large mono clock/counter numbers; serif title on a red background with a halftone sculpture

Sections

Intro — large serif logo centered on off-white, then rises to the corner.
Hero — enormous logo in the top-left corner, 3 lines of text below, 3D garment floating on the right with a shadow on the floor, pill link in the bottom corner.
Garment spin (sticky) — the garment rotates 180° with the scroll until it shows the embroidery on the back; on the left a headline phrase that comes out of blur; on the right a mono table with the spec sheet.
Shop (grid) — enormous serif title, inline filters with counters, 4-column grid of products in light-gray cards with name + price.
Product page — serif title on the left with price and description, full-length model in the center, size selector and black button on the right, mono spec sheets below; "previous / back to shop / next" navigation.
Page transition — white square blocks (pixels) cover and uncover the screen between pages.
Atelier — photo of embroidery behind the scenes on the left, large mono clock/counter on the right with edition statistics.
Red manifesto — flat red background, white serif title on 2 lines revealed by a mask, white halftone sculpture.
Newsletter + footer — thin red bar at the top, 2-line title, line email field with a black button, 4 link columns, mono legal line.

Motion and interaction

Spinning garment: scroll scrub with sticky → sequence of ~120 canvas frames (turntable), frame follows progress; GSAP ScrollTrigger + Lenis.
Text out of blur: scroll → each word goes from blur(8px)/opacity .15 to sharp, in sequence.
Floating: continuous → garment rises and falls 6px over 3s, elliptical shadow shrinks in sync.
Pixel transition: click on an internal link → 8×12 grid of squares appears in random order (stagger) covering the screen, route swaps, disappears in reverse order.
Product cards: hover → swaps front/back photo with a crossfade and shows sizes.
Atelier counter: scroll → mono digits count up to the value, embroidery "clock" advances.
Manifesto: scroll → lines rise via a mask (overflow hidden, yPercent 100→0); sculpture with parallax.

Components

Solid button: 36px black pill, white 11px text; variant with embedded price.
Pill link: --surface background, 10px text.
Product card: --surface background, centered image without shadow, 12px name on the left and price on the right, 9px gray category.
Mono spec sheet: label/value rows 9px uppercase, 1px --line divider.
Size selector: 4 squares of 32px with a 1px border, active one filled --ink.
Filter: 9px uppercase text with a superscript counter.
Edition progress bar: 1px --line track and --accent fill.
Line field: only a 1px bottom stroke, black pill button beside it.