An AI Built The Belfry | Eight Bells, Endless Changes Website — Here’s the Design Trick That Makes It Work

Discover How An AI Crafted The Belfry’s Interactive Ringing Chamber

At the heart of this digital installation lies an innovative approach that transforms a webpage into a dynamic, physically-inspired ringing chamber. The site uniquely combines automated motion, sound, and visual storytelling by simulating the intricate mechanics of traditional bell-ringing within a browser environment. Its signature move is the seamless integration of physics-based pendulum motion with layered audio to evoke the tactile experience of pulling ropes and striking bells, all orchestrated by an AI-designed system that responds intelligently to user interactions.

Design Foundations and Material Language

The Belfry’s aesthetic draws heavily from classical bell towers, employing a carefully curated palette of dark stone greys, warm bronze, parchment cream, vibrant rope red, and deep blue ink. These colors are not just decorative but serve to reinforce the site’s material metaphor—wooden braces, bronze fixtures, and aged paper notation—creating a cohesive tactile sense. Typography follows this theme, with serif fonts evoking traditional craftsmanship and monospace for method charts, balancing warmth with precision.

Interaction and Mechanics

The core interaction hinges on simulating bell movements through a physics engine that calculates pendulum swings based on gravitational forces, damping, and user input. SVG graphics visualize the bells and ropes, with animated paths illustrating the permutations of ringing sequences. Sound is layered via Web Audio, layering oscillators to mimic bronze bell tones, triggered precisely when a user pulls a rope or strikes a virtual bell. These interactions are gated behind deliberate actions, encouraging mindful engagement that echoes the physical labor of tower ringing.

Construction and Material System

The site employs a three-tiered approach: initial build with SVG and physics, a critique phase focusing on visual clarity and interaction fluidity, and a final art-director certification to ensure a cohesive experience. The AI rigorously tests responsiveness across devices, fixing visual flaws like overflow issues, ensuring focus states are accessible, and that interactions remain fluid on mobile without reliance on network requests. The result is a site that invites prolonged exploration while maintaining visual and functional integrity across all platforms.

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 68 of 175, “belfry”):
THE BELFRY — a change-ringing tower, eight bells. Aesthetic: oak frame, bell bronze, rope sallies. Palette: tower stone #575752, bronze #8c6f3f, rope red-white sallies, order-chart ink on cream. Fonts: forum (display), crimson-pro (body), space-mono (method charts). SIGNATURE: RING THE CHANGES — eight bells (SVG, full-circle wheels) that swing with true pendulum physics and STRIKE with synthesized bronze partials (Web Audio: inharmonic hum + tierce, behind a “hands to ropes” switch); choose a method (Rounds, Plain Hunt, Grandsire) and watch the BLUE LINE weave through the grid as the bells reorder each row, ropes bobbing in the chamber. Method library, ringer’s glossary (“sally”, “going up”), tower captain’s notes. Unforgettable: hearing mathematics ring.

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

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.

This project followed a streamlined three-pass process: first, an AI-designed prototype integrated physics, SVG, and sound; second, it was subjected to relentless critique for visual consistency, accessibility, and responsiveness; third, it received an art director approval, confirming it as both a technically sound and aesthetically compelling experience. The guide overseeing this process ensured the site adhered strictly to material and interaction themes, culminating in a harmonious digital reproduction of a traditional bell-tower experience.

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

Experience the Belfry

Immerse yourself in this AI-crafted digital bell chamber by visiting the live site. Explore all 175 projects in the hub and discover how technology and craftsmanship converge in this innovative showcase of interactive design.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

• Room 66: The Comb Works — Bees, decoded
• Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
• Room 58: The Atlantic Cable Company — Race the Signal

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