How to catch
the wind.

01 · Concept

A city seen from its fifth wall

Patang Bazaar treats the rooftop as Ahmedabad’s fifth wall: a social surface above the lanes where craft, rivalry, food and etiquette meet. The page starts in an open gold sky, compresses into the focused rectangle of a duel, then descends through a maker’s green workshop, a diagram pinned to warm paper, a row of loud food stalls and a dusky communal finale. That alternating rhythm prevents the project from becoming a stack of cards. Each section is a neighboring roof with its own material, while string-white rules and the same handmade typography tie the route together.

02 · Signature technique

The duel is a small physics toy

The playable scene lives in index.html as one responsive SVG. In main.js, frame() advances velocity, wind pressure and Noor’s looping flight. Holding the stage or PULL applies upward acceleration; releasing adds gravity. stringGeometry() draws each quadratic Bézier and exposes its control points to the collision system.

findIntersection() samples both curved strings, so “pench” appears only where the visible lines truly cross. Fresh pointer-down events during that window add bite; holding cannot fake a sawing rhythm. win() severs Noor’s string, erupts paper shards, rewrites the crowd ticker and begins a thirteen-second fixed-position spiral. Keyboard flyers use Space or Arrow Up. The loop pauses when document.hidden; reduced-motion visitors receive the result without the long fall.

03 · Visual system

Paper without pictures

Every image is code. Rooflines are clipped CSS blocks with inset brick courses; kites combine paper-fold gradients, SVG spines and elastic bows. The spool and anatomy plate are inline SVG, while food stalls use one-color line drawings. A data-URI turbulence layer supplies paper tooth. Concentric sun halos, warm atmospheric veils and a dark green guide spine create depth without photographic assets. On the anatomy plate, toggleBacklight() switches a real button’s pressed state and reveals the SVG #fibreGrain pattern, bridle geometry and a warm transmitted-light field. The load moment staggers type, skyline and kite unfurling; section transitions move from sky gold through workshop green, bazaar brick and late-violet dusk.

04 · Palette & type

Gold field, sharp paper

Baloo 2 carries display text at weights 600–700, tight tracking and compressed line-height; its rounded, hand-shaped forms echo folded paper. Manrope handles instructions and stories at 400–800. Both are self-hosted. The core spacing steps—8, 18, 30, 55, 90 and 140 pixels—compress at the 900px and 560px breakpoints, while body copy never drops below a readable mobile measure.

05 · Reproduce this

Prompt for a living place