An AI Built a Patang Bazaar — Fly the Old City Sky Website — Here’s the Design Trick That Makes It Work

The Rooftop Festival Reimagined

Patang Bazaar is a digital homage to Ahmedabad’s vibrant rooftop culture, crafted entirely by AI to evoke the spirit of flying paper kites. Its signature move is an interactive kite duel that responds to user input, simulating wind and string tension to create a playful physics-based experience that feels both tactile and alive, even through a screen.

Palette and Typography

The site employs a warm, earthy palette inspired by traditional craft materials—rich golds, brick reds, and lush greens—complemented by deep evening ink for contrast. Typography is handled with two self-hosted fonts: a rounded, folded-paper-inspired typeface for headings, and a clean, modern sans-serif for instructions and content, ensuring clarity amidst visual complexity.

Signature Interaction Technique

The core interaction hinges on a physics toy embedded as an inline SVG within the page. Users manipulate the kite’s string by clicking or tapping, which then triggers calculations of wind pressure and string tension. Collisions are detected via Bézier curve intersections, allowing the kite to ‘snap’ or ‘fall’ realistically. This seamless integration of code and interaction creates an immersive experience that feels tactile and intuitive, accomplished entirely through CSS, inline SVG, and JavaScript.

This project follows a three-step pipeline: first, the AI-generated design was built with clear technical constraints; second, it underwent rigorous critique, focusing on responsiveness, performance, and accessibility; finally, a human art director certified the concept’s cultural resonance and technical integrity, guided by a dedicated AI arts guide to ensure fidelity to the traditional festival spirit.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 84 of 175, “patang”):
PATANG BAZAAR — kite fighters of the old city. Aesthetic: rooftop festival at golden hour; paper and glass-string. Palette: sky gold #e8b64c→rose, kite paper saturates (pink, green, purple, orange), string white, rooftop brick. Fonts: baloo-2 (display — its Devanagari-adjacent warmth fits), manrope (body). SIGNATURE: THE DUEL — two paper kites (SVG with spine/bow flex) dance on catenary strings above a rooftop skyline; YOU fly one: pull (hold) to climb and dive, release to drift, cross the rival’s line and SAW (rapid tugs) to cut it — the loser flutters down the whole page while the crowd cheer ticker erupts (“wo kata!”). Manjha (glass string) craft section, kite anatomy, festival food stalls strip, rooftop etiquette. Unforgettable: the cut — and the fallen kite’s slow spiral.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/patang/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the Sky — Visit Patang Bazaar

Explore this AI-crafted virtual rooftop and see how playful physics and cultural storytelling intertwine. Browse all 175 design cases at the exhibition hub to discover more innovative digital experiences built with AI’s creative hand.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 77: The Foley Stage — Perform the Picture
• Room 76: The Immortal Game — London, 1851
• Room 80: Paper Flight Lab — Fold, Trim & Fly

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI