Build guide · Site 17 of 25

A clothing label with no photographs.

DRIFTWEAR is one of 25 sites designed and built by Formwork to demonstrate web design, motion, and taste. Every "garment" you see is drawn by code — here's exactly how, and how you can do the same.

The idea

A streetwear label wants garments front and centre — but shooting a lookbook is expensive and dates fast. The brief here was fashion without a single image. So the clothes are rendered: each look is a duotone "fabric drape" painted on a canvas, and the hero look leans toward your cursor like a panel hung just out of reach. Heavy grotesk type, a near-black stage, and one sand accent do the rest.

The stack

• Hero visual A cursor-follow parallax with a 3D-tilting garment panel.
• Garments A seeded 2D-canvas "drape" routine — folds, shading, vignette.
• Lookbook A drag-to-scroll row with CSS scroll-snap, momentum and arrows.
• Type Archivo Black (display) · Space Grotesk (interface) · JetBrains Mono (tags).
• Build Plain HTML/CSS/JS in an IIFE — no framework, no bundler, no images.
• Host GitHub Pages, served straight from the repo's main branch.

The signature: a fabric drape from one seed

Each garment starts as an integer. A tiny PRNG turns it into fold count, tilt and contrast, then the canvas is painted in thin vertical strips. Within each strip a top-to-bottom gradient shades the cloth: ridges lean toward the highlight colour, valleys toward the shadow — and the folds slant with the vertical position, so the panel reads as hanging cloth.

const u = fx * folds + tilt * yy + phase;   // fold position, slanted by y
let b = 0.5 + 0.5 * Math.sin(u * TAU);      // ridge (1) → valley (0)
b += 0.12 * Math.sin((fx*ripFreq + yy*1.6) * TAU + ripPh); // cloth grain
b = Math.pow(clamp(b,0,1), sharp);          // per-seed fold contrast
grad.addColorStop(yy, mixRgb(shadow, highlight, b));

Because everything derives from the seed, LOOK 01 and LOOK 06 never share a fold pattern, yet they belong to the same family. Swap the two duotone colours per look and you get an entire collection from one function.

Details that matter

• Clean handoff — the intro animates every hero layer to transform:none, then the pointer-parallax takes over from that resting state, so there's no jump.
• Custom cursor — a ring that lerps toward the pointer and swells to read VIEW over a look or DRAG over the row.
• Light sheen — a soft-light highlight tracks the pointer inside each panel, so the "cloth" catches the light.
• Reduced motion — with prefers-reduced-motion the parallax, cursor and ticker all switch off and every panel renders as a still.
• Fails safe — content is only hidden once JS is confirmed (.js), and if the canvas is unavailable a CSS duotone gradient shows instead.

Ship it on GitHub Pages

The whole site is static, so hosting is three commands:

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-driftwear --public --source=. --push
gh api --method POST /repos/OWNER/formwork-driftwear/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

Use relative paths (./main.js, not /main.js) because project Pages live under /repo-name/. Add an empty .nojekyll file so every asset serves verbatim.

That's the recipe: one seeded canvas routine, a cursor-follow parallax, strong type, and static hosting. The other 24 sites each swap the central technique — but the discipline is the same.