Cut to the browser,
never the framework.

The brief

One page, two rooms. Light is the fitting room — chalk paper and charcoal ink. Dark is the cutting room after hours — charcoal cloth and chalk ink. The whole palette is a single set of custom properties that flip on :root[data-theme]; there is no second stylesheet and no duplicated markup. Choose a room once and every surface, line and label follows.

The one thread of colour is a burgundy — --accent for fills and buttons, and a lightened --accent-ink so the same colour stays readable as text once the lights go down.

The two signatures

Every showcase earns its keep with something you can only do on the web. Selvedge has two, and both are driven by CSS state rather than a per-frame JavaScript loop — so they stay smooth, survive with scripting off, and fall still the moment a visitor asks for less motion.

The measuring figure

Hover — or tab — across the tailor's dummy and a caliper draws itself in: a rule, two ticks, a lead line and a reading. The lines animate by pulling stroke-dashoffset from 1 to 0 over a normalised pathLength, so one length of SVG handles any screen size. A short script only swaps the readout text and keeps the keyboard and pointer in step; the drawing itself is pure stylesheet.

The bolt of cloth

Each fabric card unrolls as it scrolls into view. A rolled bolt-end travels left to right while a clip-path inset opens the weave behind it — the cloth appears to play off the roll. An IntersectionObserver adds one class to start it; the movement, timing and easing all live in CSS, tuned on a house easing curve named for the draw of the needle.

With JavaScript off, every bolt shows fully unrolled and every caliper is drawn in one honest frame — the page is never blank, only quieter.

Built like a coat

Five principles held the build together — the same five, more or less, that hold a jacket together.

1. 01

   Cut by hand

   No framework, no bundler, no build step. Three files — markup, one stylesheet, one small script — that a browser reads directly. Nothing to compile means nothing to rot.

   html · css · vanilla js
2. 02

   One pattern, two rooms

   Colour, line and shadow are all tokens. The dark room is not a repaint — it is the same pattern with the numbers flipped, including a text-safe accent so nothing dims into the cloth.

   css custom properties
3. 03

   Enhanced, not required

   The content reads in full before a line of script runs. Every reveal and animation is gated behind a .js class, so the no-script visitor gets the finished garment, not a fitting in progress.

   progressive enhancement
4. 04

   Motion with manners

   Everything that moves respects prefers-reduced-motion. Ask for less and the bolts sit unrolled, the calipers stand still, and the hero settles without a sweep — the same information, none of the theatre.

   prefers-reduced-motion
5. 05

   Fitted to everyone

   A skip link, visible focus rings, real button semantics on the measuring points, live regions on the readout and the form, and colour contrast checked in both rooms so every label clears the tape.

   wcag aa · keyboard first

The materials

The whole ticket, if you like to read the selvedge:

Markup

Hand-written semantic HTML — one page, plus this colophon.

Style

A single stylesheet, themed with CSS custom properties.

Behaviour

~110 lines of dependency-free JavaScript, deferred.

Motion

CSS transitions on clip-path & stroke-dashoffset; one IntersectionObserver.

Type

Cormorant for display, Inter for text, Space Mono for the tape.

Build

None. Copy the folder to any static host and it serves.

The house

Selvedge is fiction — the address, the mills, the prices and the ledger are invented for the showcase. What is real is the cloth it is cut from: the markup, the stylesheet and the script you are reading now. Designed & built by Parable.