The Brass Orrery

Builder's guide

Making the heavens mechanical.

This site treats an orrery as both a scientific model and a theatrical object: the visitor should feel a dark observatory around them, but the machine still has to reason in public.

Scene
Observatory nocturne
Engine
Three.js SVGRenderer, sighting vane, phone canvas
Rule
Compressed distance, faithful period

Concept

The Brass Orrery imagines Alabaster & Vane, a mechanical planetarium maker established in 1774. It is a nocturnal workshop demonstration, not a museum brochure. The first screen presents the instrument itself; the following sections behave like ledger leaves: origin story, live ephemeris, gear-cutting notes, commissions, and midnight program notes. Invented dates, bench tickets, ratios, and maker lore do the world-building.

Visual Techniques

The signature mechanism lives in main.js. initOrrery() creates the Three.js scene inside #orreryMount, while buildDialPlate(), buildSun(), buildPlanets(), and buildGearStack() assemble the table, sun, six planet bodies, jointed brass arms, and turning gear stack. heliocentricPosition() uses real relative sidereal periods, so Mercury visibly hurries and Saturn barely concedes. setMode() changes the reference frame, and updateScene() interpolates from heliocentric positions into geocentric offsets so the arms visibly re-rig instead of swapping diagrams. Desktop and tablet use Three's SVGRenderer; phone width switches to drawCompactOrrery(), a canvas dial that keeps the same periods and controls.

Interaction is physical. Pointer drag and wheel input call setDays(), the range mirrors the hidden crank, and #decadeCrank advances ten years while the CSS wheel turns from the same day count. initEphemerisSighting() makes each table row focusable; sightPlanet() opens the .transit-sight vane and .sighting-register while brightening the same body in the renderer. updateDateReadout() flips the date drum. updateEphemeris() writes the table from the model periods. One requestAnimationFrame loop pauses on document.hidden and simplifies under prefers-reduced-motion.

The atmosphere is mostly CSS in styles.css: fixed grain overlays, radial lamplight, brass hairlines, an instrument-case frame, reveal transitions, the .rigging-rail, the .archive-strip, asymmetric .bench-note plates, and conic-gradient gear diagrams. There are no external images; every ornament is CSS, SVG-rendered Three geometry, or canvas.

Palette And Type

The palette is a narrow observatory field: green-black #0a120e, deeper night #050907, oiled brass #b98a3e, bright brass #e3bd75, ivory dial light #f3ead4, and one garnet accent #7e1f22. Cinzel is used for engraved headings, navigation, labels, the date drum, and the instrument plaques. Crimson Pro carries the ledger prose, with old-style numerals enabled for a period feel and enough line height to keep the long fictional notes readable.

Green black Brass Ivory Garnet

Reproduce This

Prompt an AI agent to build a static HTML/CSS/JS site for a fictional historic instrument maker. Ask for one dominant interactive Three.js object with real domain rules, rendered in the safest local mode for screenshots, not a decorative animation. Specify a restrained nocturnal palette, self-hosted display and body typefaces, one sharp accent color, an invented archive of names and numbers, and a guide page that explains the exact files and functions. Require responsive screenshots at phone, tablet, and desktop sizes, then force a self-critique pass from the screenshots before shipping.