The Making Of
THE GATSBY GRAND is built on one idea, repeated with variation: ornament that behaves like it was inked in front of you, not stamped on the page. Here is how that trick — and the rest of the room — was assembled.
A hotel established in 1928 asks for a very particular kind of confidence: symmetry, brass, and just enough restraint that the excess reads as taste rather than clutter. The palette is a single deep emerald with two golds and a champagne text color, nothing else — the discipline of a short cocktail list. Marcellus supplies the deco capitals; Lora carries the paragraphs so the voice stays warm rather than shouting.
Every gold line on this page — the hero’s corner brackets, the suite frames, the chevron dividers, the chandelier’s arms — is a real <path>, not a background image. On load, JavaScript walks each one and calls path.getTotalLength(), then sets stroke-dasharray and stroke-dashoffset to that exact length. The line becomes invisible: a dash exactly as long as the path, offset exactly out of view. An IntersectionObserver watches each section; the instant it crosses into view, the dashoffset animates to zero on a staggered delay per path, and the ornament inks itself in, corner by corner, arm by arm.
The sunburst fans (above the hotel name, and folded into The Aurora’s room illustration) are not hand-plotted rays — a small function walks a count, a spread angle and a min/max length, and generates each radial <path> at runtime so the fan stays perfectly symmetric no matter how many rays it’s asked for. The stepped chevron dividers are built the same way: a loop steps across a baseline, jumping up and back down at right angles to produce the ziggurat silhouette, rather than a hand-authored zigzag.
The three suite illustrations use a variant of the same trick, but without JavaScript deciding when to draw. Their path lengths are written into a CSS custom property, --len, and the stylesheet alone owns the transition: stroke-dashoffset: var(--len) at rest, 0 on :hover or :focus-within. That keeps the interaction fully keyboard-accessible — tabbing onto a card’s content draws the coupe glass, the sextant, or the sunrise exactly as a mouse hover would.
The hero title is a gradient — dim gold, bright gold, a near-white hot spot, back down again — painted onto the text with background-clip: text and a transparent fill. The gradient is twice as wide as the text box and slides via an eight-second background-position keyframe, so a specular highlight sweeps across the letters the way light catches foil stamping when the page tilts. Behind it, a sparse canvas of champagne bubbles rises: a plain 2D context, capped at device-pixel-ratio 2, each bubble a circle plus a tiny highlight dot, drifting on a sine wave and recycled from the bottom when it clears the top. The loop fully cancels on visibilitychange rather than idling in a hidden tab.
The fixed side-nav reinterprets an actual hotel floor indicator as a small brass compass: a needle pinned at the dial’s center rotates 90° per floor as an IntersectionObserver — tuned with a −45% top/bottom rootMargin so it fires when a section crosses the vertical middle of the viewport — reports which floor, L, 2, 3 or P, currently holds the room. The rotation runs on the same 600–900ms “velvet” cubic-bezier used everywhere else on the page, so the needle settles rather than snaps.
Pass 1 — structure & signature technique. Built the frame: hero, suites, ballroom, promenade menu, and the stroke-dashoffset draw system with its IntersectionObserver trigger, shared between scroll-reveal and hover-reveal.
Pass 2 — the moving parts. Added the canvas bubble field, the gold foil sheen keyframe, the chandelier’s sway and sparkle glints, and the elevator dial’s rotation logic.
Pass 3 — verification. Screenshotted both viewports at load and several seconds later, confirmed zero console errors, checked the reduced-motion path renders fully composed and static, and tuned spacing and contrast against the rubric.