Rotating Arc Carousel
Travorra Escape.
A premium visual storytelling landing page implementing a mathematical circular thumbnail menu. Built using custom polar coordinates, mouse wheel listeners, and fullscreen cross-fading imagery.
Lago di Braies
Alpine lake wooden boathouse cabins in Braies, Italy
Curving the Interaction
The engineering behind the circular carousel maps layout coordinates dynamically using polar trigonometry. Thumbnails are placed along a virtual circle off-screen to the right:
y = Math.sin(angleOffset) * radius;
When the user scrolls or drags, the offset angle shifts dynamically, causing the thumbnails to slide and rotate along the curved arc smoothly.
The active thumbnail scales up by 1.22x with a thick white border ring, displaying the destination title and country location labels next to it.
Simultaneously, the full-bleed background container handles dynamic opacity toggling between the 7 high-resolution scenic layers, completing the immersive travel transition.
Interactive Key Features
7 Destination Portals
Configured a list of 7 countries including Greece, Maldives, Italy, Turkey, Japan, Switzerland, and Canada, mapping each to dedicated high-resolution landscapes.
Two-Line Title Flow
Refactored the header fonts to flow inline, constraining the custom handwritten script style tag into exactly two lines of balanced layout.
Wheel Debounce
Throttled the mouse-wheel listeners using an 800ms timer buffer. This prevents accidental multiple skips and ensures fluid, deliberate item transition snaps.