OFFRAIL

OFFRAIL is a concept for a streetwear label’s first drop: heavyweight tees and leather jackets for people who never stayed on the line. The brief we set ourselves was a shop that feels like walking into the store, where you flick through a rail instead of scrolling a grid.

It runs to eleven pages: the rail on the home page, a shop, a page for each of the seven pieces, the Drop 01 lookbook and the bag. The look is warm grey and black with an oxblood accent, tall condensed type and outlined lettering, so the clothes do the shouting.

The rail is the idea everything hangs from. Seven pieces drift past on their hangers, each one angled away until you show an interest in it.

Most clothing sites sell from a grid of flat photographs, which is efficient and forgettable. A rail is the opposite, but it brings its own problems. Something that moves by itself has to stop the moment someone wants to look, hand control back cleanly and never fight the person using it.

It also had to stay a working shop underneath the theatre: sizes, details, a size guide, a bag that remembers what’s in it, and pages that a keyboard user and a search engine can both find their way round. And all of it had to carry over to a phone, where there is no hover and fingers do the work.

On the home page the rail drifts slowly by itself. Hover over a piece and the rail eases to a stop, that piece turns to face you, its neighbours step aside and the name, colour and price appear underneath. A flick or a swipe sends the rail along with momentum, and the hangers sway as it moves.

Click a piece and it lifts off the rail into a product sheet without leaving the page, with sizes, front and back views, close-ups, and next and previous to move through the drop while the rail follows along behind. Drag one downwards instead and it comes off its hanger with a swing, and dropping it on the bag puts it in, ready to pick a size.

On a phone the same rail works by touch. Swipe to browse, and the piece nearest the centre turns to face you. Tap to open it, or press and hold to lift it off and drop it in the bag.

Each product page hangs its garment on a stage that swings as you move across it, and you can grab it and swing it yourself. One switch turns it from front to back, another takes it off the hanger and shows it worn, and three close-ups sit underneath with the sizes, a size guide that highlights your size and an add to bag button that sets the piece swinging. In the lookbook, Try it on puts a model in the middle with the next and previous pieces hanging faded either side. Choose one and it flies off its hanger onto his shoulders as the photo changes.

Build. Eleven static pages in plain HTML and CSS, with eight small JavaScript files and no framework. The drifting rail, the swinging hangers and the lift and drop all run on simple physics, and the rail’s position is snapped to whole pixels so the fine outlined prints stay sharp as they move. The bag lives in the browser with quantities and a running total, and checkout is switched off with a note that this is a concept store. Fonts are served from the site itself, so it makes no third-party requests, and with reduced motion turned on the rail stays still.

OFFRAIL is a self-initiated concept by WebWork Software. It turns a clothing shop into something you handle, with a rail you browse by hand and pieces you can turn, lift and try on.

OFFRAIL shows that an online shop can have the pleasure of a real store without giving up any of the basics. The rail gives the home page a reason to linger, the product pages make each piece feel physical, and the sizes, size guide and bag all work as they should, on a desktop or a phone.

It’s built for fashion and lifestyle brands launching a drop who want the shop to be part of the story, not just the checkout. The rail, the try-on and the product pages can take a real catalogue, and the bag can be connected to a real checkout.