Website Template for Fashion and Textile Studios

You start at the loom, so your site should too. Selvedge opens on a metre of your cloth and tours it as you scroll, zooming to its finished edge, its weave and its dye, with swatches that recolour it, before it opens the collection.

**Signature interaction.** A pinned atelier tour: the hero pins and scroll zooms the view across a bolt of cloth to fixed hotspots while an annotation card fades in at each stop, a transform scale with a moving origin that reverses on scroll up.

**Features**

- **Atelier tour.** Scroll zooms across the cloth to fixed hotspots with an annotation at each, and a progress readout.

- **Swatches.** Colourway swatches that recolour the cloth through a single property, in every mode.

- **Material spec drawers.** Native drawers that open to composition, weight and width, and work with no JavaScript.

- **Lookbook and cases.** A lookbook grid and a case page per piece, with material and colourway.

- **Hotspot-list fallback.** On phones and with no JavaScript the cloth sits still and the hotspots become a labelled list.

- **Fashion type.** A condensed display over a clean sans, magenta as the single accent.

**What's included**

- A home page and 6 piece case pages, generated from one content file

- Every word, image, link and colour in `content.json`, so no code changes are needed to make it yours

- README and a buyer guide for editing, building and deploying

- The Studio Engine: Vite, TypeScript, smooth scrolling and animation

- Self-hosted open licence (OFL) fonts and generated placeholder images

- QA notes with the test results

**Built right**

- Lighthouse mobile 92 to 100 performance, 100 accessibility, best practices and SEO

- Keyboard accessible, works without JavaScript and respects reduced motion

- About 60 KB of JavaScript gzipped

- Deploys as static files to any host

**Requirements:** Node.js 20 or newer to edit and build.

**Tags:** website template, fashion, textile studio, fashion designer portfolio, lookbook, portfolio template, Vite

**Images, in upload order**

1. `selvedge/studio-selvedge-01-cover.jpg`

2. `selvedge/studio-selvedge-02-whats-inside.jpg`

3. `selvedge/studio-selvedge-03-pages.jpg`

4. `selvedge/studio-selvedge-04-listing-16x9.jpg` (wide, for a banner or a rectangular layout)