How it's made

Notes from the front desk.

REVERIE is a dreamcore hotel built entirely from CSS and inline SVG — no photographs, no canvas, no libraries. Everything that looks impossible here is ordinary primitives asked to behave slightly wrong.

The concept

A hotel that only exists while you're asleep should feel almost real — familiar architecture, gentle service copy, a front desk — but nothing quite obeys physics. Magritte by way of a boutique brochure. Every scene idea had to double as an amenity: a door standing on nothing, a shadow that drifts from its object, a staircase that only goes down.

The floating door

The hero doorframe is genuine CSS 3D, not an illustration. A perspective container holds a transform-style: preserve-3d frame; two pseudo-elements rotate 90° on their own axes (rotateX for the lintel, rotateY for the jamb) and push outward to fake a casing with real thickness. The frame sways rotateY(±7deg) on a sine-shaped cubic-bezier loop, so the foreshortening genuinely changes frame to frame. Inside the opening, layered radial-gradient dots read as stars, so the sky behind the door is night while the sky around it stays pastel dusk. The "impossible" shadow is a separate blurred ellipse cast up and sideways instead of down — a door standing on nothing shouldn't cast a shadow that makes sense either.

The staircase

The Escher-nod staircase is generated at runtime. A small script projects a 24-step square ring through an isometric basis (two 30° axes plus a height axis) and appends the resulting polygons — top, riser, front — into an inline <svg>. Each step's fill interpolates along the palette, cream to twilight, so the ring reads as a gradient plunge into the night section. A pillar at one corner bridges the seam where the last step's floor doesn't reconcile with the first step's ceiling — the same sleight of hand Escher used, just isometric instead of perspective. The light descending forever is a circle riding a closed offset-path loop; because the path is a true closed shape, there's no seam to jump across, so it reads as endless.

Everything else that moves

The moon is fixed to the viewport and nudged by a scroll-velocity value, tracked on scroll and eased toward zero every frame — it lags, then catches up.
Lost & Found objects (key, chair, umbrella) are hand-drawn line-art SVGs. Each bobs on its own sine timing while its shadow drifts on a different one, so object and shadow slowly fall out of sync.
The check-in dial is a hand-rolled role="slider": pointer drags compute an angle via atan2 against the dial's center, arrow keys nudge the value directly, and a stroke-dashoffset arc stays in sync.
Clouds are layered, multi-lobe radial-gradient blobs at different speeds; a couple sit in front of the doorframe specifically, so they're never just background.

Process

Built in passes: structure and copy, then the door's 3D casing, then the staircase generator (the trickiest part — hiding the seam behind the pillar took several coordinate rewrites), then the moon and dial. A final visual pass fixed a hidden drop-shadow, clouds nearly invisible against the pastel sky, and a "0" that read as an "o" in the display font. See PASSES.md for the dated log.

Respecting the room. Every loop honours prefers-reduced-motion — the door settles into a fixed tilt, the orb stops mid-path, shadows stop drifting. Nothing here plays a sound or shows an alert; it just keeps breathing quietly in the background, capped at a sane frame budget and paused whenever the tab isn't visible.