Discover the Mechanical Cosmos of The Brass Orrery
Step into an AI-crafted virtual observatory that transports you to the late 18th century, where a fictional maker named Alabaster Vane meticulously assembles a brass planetary machine. The site’s standout feature is a highly interactive Three.js model of the orrery, which faithfully reproduces celestial movements based on real sidereal periods. Visitors can manipulate the gear stack, switch reference frames, and observe planets slip into their true positions in a simulated night sky—all within a carefully restrained nocturnal palette that evokes the quiet mystery of a dark observatory.
Design and Interactivity in Harmony
The site’s aesthetic is rooted in a disciplined color scheme—rich greens, deep blacks, oiled brass, and a single crimson accent—crafted entirely with CSS overlays, SVG geometries, and canvas elements, avoiding external images. The signature technique involves a custom Three.js scene built within a self-hosted environment, where core functions like initOrrery() set up the celestial model, and buildGearStack() arranges the intricate brass mechanisms. The 3D model is rendered using SVGRenderer on desktops and tablets, while phones switch to drawCompactOrrery(), a simplified canvas dial. The interactive controls—pointer drag, wheel input, and a physical crank—are wired to functions like setDays() and updateScene(), creating a tangible sense of mechanical operation. Every ornament, from the gear diagrams to the instrument-case frame, is realized through CSS and SVG, ensuring a visually cohesive and responsive experience that mimics the tactile feel of a period instrument.
Creating the Virtual Orrery: A Three-Step Approach
The development begins with a detailed build phase where the site’s core components—3D scenes, gear mechanisms, and UI controls—are assembled with a focus on period accuracy and visual clarity. Next, the team conducts a rigorous critique, testing responsiveness across devices, fine-tuning the color palette, and ensuring the mechanical logic aligns with celestial physics. Finally, an art director reviews the entire experience, certifying that the balance between historical homage and digital craftsmanship is maintained. This process relies heavily on the comprehensive guide, which documents each file, function, and design decision, ensuring fidelity to the imagined historic maker and its nocturnal workshop.
The full build notes live in the room’s design guide.
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 30 of 175, “orrery”):
THE BRASS ORRERY — a mechanical planetarium maker, est. 1774. Aesthetic: observatory nocturne, oiled brass. Palette: green-black #0a120e, brass #b98a3e, ivory dials, one garnet accent. Fonts: cinzel (display), crimson-pro (body). SIGNATURE: Three.js brass orrery — sun at center, six planets on jointed arms with correct RELATIVE periods, gear stack turning beneath; drag (or scroll-crank) advances time with a date readout spinning through years; toggle heliocentric/geocentric and watch the arms mechanically re-rig. Ephemeris table, craftsman’s notes on gear-cutting. Use the importmap three from /assets/js/three/. Unforgettable: cranking decades and watching the machine reason.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/orrery/
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 Virtual Observatory and Beyond
Visit the live site to experience this mechanical universe firsthand, and browse the complete collection of 175 AI-designed exhibition pieces at the hub. Each site is a testament to the craft of digital craftsmanship and the enduring allure of mechanical astronomy.
Visit the live room → · Browse all 175 rooms
Previously in Wing II
- Room 26: KP-9 Station — Arctic Geomagnetic Observatory
- Room 27: CALIBRE 27 — Haute Horlogerie Manufacture
- Room 28: Underwood Network – Living Mycelium Research Map
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.
Cosmos Museum Brass Orrery – Handcrafted Mechanical Solar System Model | Luxury Vintage Decor with Functional Gears | Celestial Masterpiece for Astronomy Enthusiasts, Collectors & Gift for Engineers
- Material: Handcrafted antique brass design
- Mechanism: Functional planetary gear system
- Decor Style: Vintage steampunk aesthetic
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Motorized Metal Solar System Model Kit, 600+ Precision Parts Mechanical Orrery with LED Sun, STEM Astronomy Engineering Building Kit for Adults, Planetary Gear Planetarium Desk Display
- Build Your Own Solar System: Assemble a working planetary model with 600+ parts
- All-Metal Construction: Made from anodized aluminum, stainless steel, and brass
- Durable and Premium Finish: Multi-stage finishing for a refined metallic look
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
DAN&DRE DIY Earth Sports Demonstration Intuitive Teaching Model Tool Child Science Education Toy
- Educational Earth, Moon, Sun Model: Teaches planetary movement rules
- Stimulates Learning Interest: Engages children in science education
- Enhances Practical Skills: Develops children's hands-on abilities
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Talos Artifacts Antikythera Mechanism Sculpture The Ancient Greek First Computer in History Alabaster with Bronze Effect
- Historical Antikythera Mechanism: Ancient Greek analog computer and orrery
- Material: Alabaster with bronze effect
- Dimensions: 20cm height, 14cm width
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
