Vesper Rooms
A luxury architectural portfolio driven by cinematic scrolling physics.
Overview
A highly interactive, Awwwards-style architectural portfolio application built with React and Vite. It leverages GSAP and Lenis for advanced scroll-linked animations, horizontal pinning, and buttery smooth physics. The platform features dynamic randomized masonry grids, state-managed interactive accordions, and a custom cinematic error page.
Vesper Rooms was designed as a high-end architectural studio portfolio that prioritizes digital experience and storytelling over a traditional grid layout. The goal was to build a site that users revisit for design inspiration.
The frontend relies heavily on GSAP's ScrollTrigger and Lenis smooth scrolling to create tactile, cinematic interactions. Every major interaction—from the scroll-fill text manifesto to the horizontal pinned gallery—is tied directly to the user's scroll wheel rather than time-based delays.
To prevent performance bottlenecks caused by heavy architectural imagery, native lazy loading and asynchronous decoding were implemented globally. The window-pane hero section was engineered to randomly shuffle from a master list of projects on mount, ensuring a unique viewing experience on every visit.
Stack
UI / Frontend
Animation / 3D
How it works
Lobby Entrance
User is greeted by a preloader followed by a randomized selection of 6 curated project window panes.
Scroll Discovery
Scrolling triggers staggered fade-ins, an interactive text-fill manifesto, and a horizontal pinned gallery.
Deep Dive
User navigates to individual Project, Archive, or Journal pages for filtered content and detailed case studies.
More projects
Lumina Botanica
A premium landing page concept for a fictional high-end botanical and floral arrangement brand. Built around a glassmorphism aesthetic with frosted-glass UI over dynamic gradient backgrounds, a filterable bento-box product catalogue, a Pinterest-style masonry community board, and custom CSS animations (floating blobs, infinite marquees). Imagery is hotlinked from Unsplash/Pexels with lazy loading and fixed aspect ratios to avoid layout shift.
Serenify
Serenify is a front-end marketing/demo landing page for a fictional mood-and-productivity app, combining email, tasks, and daily mood check-ins into one dashboard. It ships with 8 live-switchable mood themes (4 light, 4 dark) built on an OKLCH analogous-hue color system that re-tints the entire UI instantly. The dashboard mockup is genuinely interactive — folders, a reading pane, a compose modal, and todos/mood state that persist to localStorage — rather than a static screenshot. It's deployed as a Cloudflare Worker that serves the static Vite build and layers on security headers (CSP, HSTS) plus a lightweight health-check route.
Flavorspace
A state-of-the-art, premium digital menu experience designed for high-end culinary concepts. It replaces traditional lists with a dynamic, sensory-driven UI that physically reacts to the active dish. The application features complex glassmorphism, fluid bottom sheet architectures for mobile, and a highly interactive swipe-to-confirm checkout flow.
3AM Espresso
A concept marketing website for a late-night coffee shop in Bacolod City, Philippines. Built as a single-page application with five routes covering home, menu, story, reservation, and find us, each driven by scroll-triggered animations and parallax effects. Deployed on Cloudflare Workers with a thin Worker layer that serves the Vite-built client assets and applies security headers. The reservation form is UI-only with no backend submission.