Field guide
How Rosarium makes light visible.
Rosarium is a fictional stained-glass atelier working inside a dark stone nave. The site is not about presenting a pretty circular window and stopping there. Its central claim is that a restored cathedral rose is only successful when the colored light it throws across the floor feels believable: heavy, directional, imperfect, and old enough to have a memory.
Signature Technique
The rose is generated in main.js by generateRose(). The form controls feed folds, ring count, palette, and seed into hashSeed() and mulberry32(), giving each visitor a deterministic but varied window. Every pane is an SVG path from panePath(): an annular wedge between two radii, slightly trembled so the tracery does not feel mechanically perfect. Radial gradients, opacity shifts, lead circles, spokes, and cusp tracery create the impression of flashed glass held in dark came.
The Floor Matters
The emotional trick is under the window. renderProjection() reads the generated pane list and writes blurred .light-shard elements into #floorLight. The canonical-hours slider changes the sun position, then adjusts each shard's x/y position, skew, stretch, blur, and opacity. Extra .lead-shadow elements add dark traces of the cames. CSS perspective on .floor-perspective tilts the pool so it lies on stone instead of floating like a poster effect.
Palette and Type Tokens
The field color is stone #2a2a2e, deepened with near-black nave gradients. The glass accents are ruby #a01b2d, cobalt #1e3d8f, amber #d99b2b, and emerald #1e6e4a. Vellum text keeps body copy warm against the dark. The self-hosted forum font carries the lapidary display voice, while eb-garamond gives the long conservation notes a human, archival texture.
Load, Motion, and Texture
The atmosphere is built in styles.css with masonry grid lines, arch-like radial masks, subtle grain, jewel glows, and a staged reveal using the .ready body class. Pass 3 adds the raking-light study: bindRakingLight() listens for pointer, focus, and checkbox changes, then sets --rake-x, --rake-y, and --rake-angle on .generator-shell. The .raking-study overlay turns those variables into a moving beam, dashed lead rubbing rings, and conservation annotations. There are no external images, fonts, scripts, or canvases. Motion is deliberately event-driven: the page does not run a constant animation loop, and the reduced-motion media query collapses transitions for readers who request stillness.
Reproduce This
Prompt an AI agent to build a pure HTML/CSS/JS site for a cathedral rose-window restoration atelier. Ask for a seeded SVG radial generator with folds, rings, gradients, lead tracery, and no image files. Require a canonical-hours slider that projects generated pane colors onto a skewed stone floor, making the floor light the main memory of the page. Add a pointer-and-keyboard raking-light overlay that reveals lead rubbing notes without a render loop. Specify self-hosted historical serif fonts, a dominant dark-stone field, ruby/cobalt/amber/emerald glass, responsive screenshots at phone, tablet, and desktop widths, and a pass log documenting visual flaws fixed.