How it
rings.

The concept

The Belfry treats a webpage as a change-ringing instrument. Its material language comes directly from an English tower: dark oak braces divide the interactive chamber, bronze catches the light, cream paper holds the notation, and a striped sally becomes a vivid vertical seam. The page alternates between close, shadowed rooms and broad editorial records so the visitor feels both the physical labor and the mathematical calm of ringing.

Pendulum motion and ropes

main.js creates eight inline SVG bell buttons in makeBell(). Each state holds an angle, angular velocity and alternating pull direction. The animate() loop integrates gravity with -5.8 * sin(theta), adds damping, and lets each strike carry the bell nearly to mouth-up balance before rotating back. The rope group moves from the same angle. The animation frame is cancelled while the document is hidden, and reduced-motion visitors receive a stable chamber.

Hearing bronze

The “Hands to ropes” switch creates a Web Audio context only after a deliberate click. Pulling any individual sally does the same, so touch and keyboard visitors can interrupt the method with a chosen bell. strikeBell() layers five oscillators: low hum, nominal, tierce, quint and upper partial. Separate exponential envelopes let high frequencies vanish sooner than the hum. There are no audio files or network requests.

Pulling the tenor

The red practice room turns its striped seam into a working rope. Pointer events measure a downward drag, write the distance into the --pull CSS property and call pullTenor() after a purposeful release; click, Enter and Space reach the same function. Anselm sounds while the resonance, room-thrum and card-thrum keyframes send the impact through the room. Reduced motion keeps the sound and removes the shake.

Methods and the blue line

renderMethod() writes the selected rows into a monospaced paper grid. Rounds repeats the home order, Plain Hunt is generated by alternating adjacent swaps, and Grandsire uses a composed lead fragment with the tenor covering. advanceSequence() strikes one bell every 430 milliseconds and advances the row after all eight places. drawBlueLine() finds bell number 2 in every visible row and joins those positions with an SVG path, turning permutation into a woven gesture.

Palette and type

The core tokens in styles.css are tower stone #575752, bronze #8c6f3f, cream #f0e7cf, rope red #a83932, and blue-line ink #245e99. Forum supplies broad, inscription-like display forms. Crimson Pro carries the narrative with bookish warmth. Space Mono gives method charts, weights and controls the exactness of a conductor's notebook.

Atmosphere and composition

A fixed fractal-noise SVG adds grain without an image asset. Radial gradients suggest dusty light, oversized circles echo bell wheels, and sharply divided sections change scale like moving between tower levels. The load moment uses title-rise, dust-reveal and a drawn wheel before settling into stillness; choosing a method redraws the blue path with weave-line. Responsive rules rebuild the chamber into two rows of four bells without hiding its playable ropes or live strike ledger.

Reproduce this

Prompt an AI agent to choose one physical system with a real behavior, then make that behavior govern sound, motion and information graphics. Ask for code-native SVG, a small physics integrator, interaction-gated Web Audio, a strict material palette, three complementary type roles and a full mobile composition. Require the agent to inspect screenshots at phone, tablet and desktop widths, list concrete visual flaws, fix each one, and verify reduced motion, focus states, overflow and network independence.