3AM Espresso
A late-night coffee shop that never closes.
Overview
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.
3AM Espresso is a fictional late-night cafe concept built as a portfolio piece to demonstrate frontend craft, specifically dark UI design, animation-driven storytelling, and responsive layout across five distinct pages.
Each page is built as a full-bleed visual experience using Framer Motion for scroll-linked parallax, whileInView staggered entrances, and AnimatePresence page transitions. Typography is split between Playfair Display for editorial headings and IBM Plex Mono for labels and UI text, served locally via @fontsource to avoid external font requests.
Cloudflare Workers was chosen for deployment to serve the static Vite output with a thin Worker that injects security headers and handles SPA fallback routing. The reservation form uses react-hook-form for state management but intentionally has no backend - on submit it transitions to a confirmation state to complete the UX story.
The entire site uses a hand-rolled CSS variable palette with a global film grain overlay applied via a body::after SVG pseudo-element. The custom SVG map on the Find Us page replaces any third-party mapping library, keeping the bundle lean and the aesthetic fully on-brand.
Stack
UI / Frontend
Animation / 3D
Infra / Deploy
How it works
Land on Home
Visitor hits / and sees the full-viewport hero with parallax image and animated AWAKE heading.
Browse Hero Sections
Scroll past the quote section and teaser menu, with staggered entrance animations triggering on viewport entry.
Navigate via Nav
Click a nav link on desktop or open the hamburger overlay on mobile to trigger a client-side route change with AnimatePresence fade transition.
Explore Pages
Menu shows three drink categories with scroll-triggered reveals. Story renders a four-era timeline. Find Us shows address, hours, and a custom pulsing SVG map.
Reserve a Table
Fill out the form on /reserve and submit - react-hook-form captures state locally and AnimatePresence swaps the form for an animated confirmation message.