Steal This: The Signature Technique Behind 'Culture No. 46 — The Living Pattern Laboratory'

Culture No. 46 — The Living Pattern Laboratory — Reaction-Diffusion Simulation — Room 46 of 175: “Culture No. 46 — The Living Pattern Laboratory” — visit the live site.

Discover a Digital Microscope with a Living Twist

Imagine stepping into a space where chemical patterns breathe and evolve under your touch, as if peering through a vintage scientific instrument fused with modern code. This AI-crafted exhibition invites visitors to explore an interactive specimen that blurs the line between science and art, utilizing a signature technique that makes digital patterns feel alive and responsive in real time.

From Build to Benchmark: A Four-Step Workflow

The development begins with constructing a responsive simulation that models chemical diffusion using a reaction-diffusion system inspired by classic microscopy techniques. Next, the creator rigorously critiques the interactive fidelity, ensuring that touch and pointer inputs produce meaningful, visually compelling changes. This iterative process is followed by a formal certification from an art director, confirming that the simulation’s aesthetic and tactile coherence align with the overarching laboratory theme, as outlined in the guiding manual. The entire process is meticulously documented in the guide, emphasizing the importance of a disciplined yet creative approach to building living, responsive interfaces.

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

The Visual Palette and Interaction Design

The experience is anchored in a restrained, laboratory-inspired color scheme featuring warm creams, brass tones, and subtle pigment accents like deep blues and pinks. These hues are meticulously mapped onto SVG and CSS styles to evoke an antique microscopy setting, while modern JavaScript handles the dynamic simulation. The core interaction relies on a reactive diffusion process, where chemical concentrations are visualized through a vivid stain palette that mimics biological staining techniques. Tactile controls, such as a CSS-animated pipette cursor and adjustable focus parameters, enable visitors to inoculate the specimen, directly influencing the evolving patterns. This seamless integration of visual tokens and interaction cues creates an evidentiary atmosphere, making each pattern feel like a specimen with a history, temperaments, and potential for growth.

Live view of Culture No. 46 — The Living Pattern Laboratory — The room as it renders live — open it in your browser.

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 46 of 175, “petri”):
CULTURE No. 46 — a microscopy lab where patterns are alive. Aesthetic: brass microscope, stained specimens, lab ledger. Palette: lab cream #f2ede2, brass #b98a3e, stains (methylene blue #2b5fb3, eosin pink #d96a8b, iodine amber #c98a2b) on agar. Fonts: newsreader (display), chivo-mono (lab labels). SIGNATURE: GRAY–SCOTT reaction–diffusion running LIVE in petri-dish circles (fast canvas/GPU) — coral, labyrinth and mitosis regimes as selectable “cultures”; the cursor is a pipette dropping catalyst that perturbs growth; a stain selector recolors the render; a brass-ring microscope frame with a working FOCUS knob (blur/sharpen). Lab journal entries per culture, incubation timers. Unforgettable: patterns that grow like life under your hand.

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/petri/

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 Exhibition and Explore More

Visit the live, AI-built installation to witness patterns that respond and evolve under your touch. Dive into the full collection of 175 experimental sites at our central hub, each offering a unique glimpse into the future of interactive culture and scientific visualization.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

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.

Amazon