The Elora Ritual
Sauna Experience.
Recreating the calming physical ritual of a premium outdoor sauna inside the web viewport. We combined 3D stacking card decks, smooth perspective scale calculations, and pointer-driven thermal vapor rendering.
Elora Cabin
Outdoor wooden sanctuary nestled in forest quiet
Designing Thermal Restfulness
The design system for ELORA saunas centers around warm sand palettes (`#e8d8c1`) and dark charcoal wood textures (`#23150c`) to replicate the physical components of wood, sand, and stone.
To mirror the ritual, we mapped the active step to a dynamic sidebar Thermostat Gauge and ambient screen-blend steam overlay. The steam level rises as the user proceeds from Forest Dusk (15°C) to the Hot Hearth (55°C) and Steam Infusion (85°C).
Instead of linear scrolling, we designed a **3D Stacked Card Deck**. Cards recede along the Z-axis in a 3D perspective (`translate3d`), with scale and opacity multipliers calculated in real-time.
Swiping or scrolling up slides the active card upwards out of the viewport, making the stacked cards beneath expand cleanly to the front. We implemented a unified 800ms debounce cycle to prevent rapid layout jumps.
Resolving Interaction Hurdles
Touch Swipe Sensitivity
Standard viewport touch listeners trigger card swaps on micro-gestures, causing the cards to skip past multiple stages too quickly.
3D perspective scaling
Receding background cards looked flat and lacked depth because standard browsers collapse CSS scale parameters without depth indicators.
Steam animation redraws
Running continuous visual steam updates causes browser rendering layout shifts, slowing down card transition frames.