Get the latest gadgets delivered free — and shop member deals
- Fast, free delivery on millions of items
- Access to Prime Big Deal Days deals on October 6–7
- Prime Video, Amazon Music and more included
Discover How an AI-Generated Exhibition Transforms Circuitry into an Urban Landscape
“Trace City – Rush Hour as Electrons” is an innovative digital installation that reimagines a printed circuit board as a bustling metropolis, with roads, districts, and dynamic traffic—all crafted entirely through AI-driven design. Its standout feature is the seamless integration of routing logic and visual metaphor, creating an interactive map where electrons are animated commuters traveling along copper traces, presenting a captivating fusion of technology and urban planning.
Streamlined Three-Stage Creation Guided by an AI-Generated Manual
The development begins with an initial build phase, translating civic maps into routable circuit layouts using the guide’s step-by-step instructions. This is followed by a critical review, where the routing and aesthetic choices are refined through an iterative critique process, ensuring clarity, accessibility, and visual harmony. Finally, the project receives an art-director certification—verifying that the metaphor effectively communicates both the urban and circuit concepts—before being deployed as an interactive exhibit. The entire process is documented within the guide, which details functions like drawNetwork(), buildRoutes(), and placePackets(), ensuring reproducibility and clarity for future iterations.
The full build notes live in the room’s design guide.
Deconstructing the Visual and Technical Fabric of Trace City
This project employs a meticulously curated palette of dark and cyan hues to evoke a night-time cityscape, using inline SVG elements as the core canvas. Key layers—such as traceLayer, districtLayer, and packetLayer—are managed within a single SVG, with JavaScript functions transforming data structures into intricate routing paths and district configurations. The design leverages custom typography—Orbitron for display and IBM Plex Mono for detailed information—creating a consistent civic aesthetic. No raster images are used; instead, CSS effects like shadows and noise augment the organic feel, while the routing logic relies on weighted graph algorithms to animate the electron traffic, simulating rush hour with real-time updates and user controls.
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 34 of 175, “circuitry”):
TRACE CITY — a city whose map is a motherboard. Aesthetic: solder-mask green PCB cartography. Palette: mask green #0d3323, copper #c77b3f, silkscreen white, gold pads; night mode = traces glow cyan. Fonts: orbitron (display), ibm-plex-mono (datasheets). SIGNATURE: a large inline-SVG city-as-PCB (districts = IC chips with pin rows, avenues = copper traces, parks = capacitor cans, river = ground plane) with smooth pan/zoom; DATA PACKETS as light pulses routing along traces between chips like commuter traffic (visible pathfinding); click a chip → district “datasheet” (population as pin count, exports as bus width). Day silkscreen / night glow toggle. Unforgettable: rush hour as electrons.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/circuitry/
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.
Explore the Interactive Circuit City and Dive Deeper
Visit the live exhibition to experience the city in motion—pan, zoom, and interact with the traffic flow. Curious about the techniques? Browse all 175 sites at the hub to see how AI-driven design can push the boundaries of digital storytelling and technical visualization.
Visit the live room → · Browse all 175 rooms
Previously in Wing II
- Room 26: KP-9 Station — Arctic Geomagnetic Observatory
- Room 31: La Bourse — October 1929 Stock Exchange
- Room 27: CALIBRE 27 — Haute Horlogerie Manufacture
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.
interactive city map visualization
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
