LIUMAR
UX/UI Design
Web prototyping for an entertainment hub
Interactive intro
Billiards as an immersive instrument
CONCEPT
I wanted the intro not to feel like a loading screen, but as an integral part of the product itself. I chose billiards because it was consistent with the entertainment hub I was designing, and the mechanics of the ball sinking into the pocket provided a narrative device for the transition into the home page — the camera zooms in, the canvas fades out, and the site begins. From that point on, I aimed to maintain the same logic: every section had to justify its own navigation structure, rather than relying on a default one.
VISUAL DESIGN
I kept a reduced palette—cream and black, with color used only on the balls—because the site already carries a high level of interactive complexity, and I didn’t want to add visual noise. The typography is entirely Roboto Mono, chosen more for consistency with a technical aesthetic than for a specific branding rationale. The glitch effect on the title was used to introduce motion into the hero section without relying on video or background imagery. The footer echoes the same elements as the intro—the cream tone and the physics-based billiard balls—bringing the experience full circle.
The vertical scroll-driven navigation was the most natural choice for a section-based site: each panel enters from below, with no routing and no page transitions. For the Game Room, I used a hover-driven horizontal accordion because I needed to present eight activities without relying on a carousel—allowing users to explore without clicking. The cinema booking experience was built around a dynamically generated seat map, as it was the most direct way to simulate a real-world interaction, even though the system itself is entirely fictional. For the Game Room and the restaurant, I opted for a simpler form with a people selector, since a seat map would not make sense in contexts like a billiard table.
TOOLS AND PROCESS
I used only vanilla HTML, CSS, and JavaScript. The physics—both in the billiards intro and in the balls in the footer—was written from scratch. I didn’t rely on libraries because I wanted to understand how every piece worked, and honestly, for a project of this scale, a framework would have added more overhead than value. The downside is that the code became quite monolithic—it’s all in a single file—and in hindsight I would have structured a clearer separation between logic and rendering layers.
