← all work11 / 14 · ch. 04 — ship

Cordel

A vintage archive in Lima, hung out on a line.

Site for a designer-and-vintage archive brought from Europe and sold in Lima: a physically simulated clothesline for a hero, a scroll-driven film, and a shop where favourites hang on your own line.

Kindproduct
StatusIn development
PlatformWeb
Year2026
Screenshot 2
Screenshot 1
About

The brand is a clothesline — a cordel — so the site is built around one. The hero is a verlet rope spanning the viewport with the six letters of the name pinned to it; it reacts to a global wind and to the pointer, and on scroll the logo’s full stop swells into the hero photograph. One wind engine writes a handful of CSS variables every frame, so everything that hangs anywhere on the site — tags, cards, the footer wordmark — sways in the same breeze, and scroll velocity adds a swing.

A scroll-driven film draws video frames onto a canvas masked by the wordmark, zooming through the stem of the “l” until the footage fills the screen. The shop has filters, a quick view, and a “my line” of favourites that hang from a rope at the top of the page. Product photography was generated with Higgsfield Soul — garments on a line against a grey sky — and processed by a script that crops film borders, forces 3:4 and writes a blur manifest.

What's in it
  • Verlet-rope clothesline with the logotype pinned to it, driven by wind and pointer
  • One global wind engine: every hanging element on the site moves in the same breeze
  • Scroll-driven film masked by the wordmark, frames extracted with ffmpeg
  • Pinned horizontal rail of the latest pieces; page transitions; custom cursor with labels
  • Shop with filters, quick view and a line of favourites kept in localStorage
  • Image pipeline: crop, 3:4, optimise, blur placeholders, contact sheet
Stack
Next.js 16TypeScriptTailwind v4GSAP ScrollTriggerLenisMotionDesign & build