STAY Haneuldam — a cinematic booking site for a private pool villa

A stay site for four private pool villas on the east coast of Korea. What decides a hospitality site is not how large the photos are — it is whether a visitor can choose a villa and accept the rate within thirty seconds. The screen order was designed around that flow.

The problem

A four-villa stay is compared purely on price inside OTA platforms. Its own site has to deliver atmosphere first, let guests compare the villas side by side on one screen, and never hide seasonal rates.

Design approach

The palette is locked to midnight deep-teal and sand beige. Every photograph gets the same deep-teal gradient scrim, so images shot under different conditions read as one brand's editorial. A very slow Ken-Burns zoom on scroll and mask-revealed headlines give the page a cinematic cadence.

Signature interactions

• Pinned horizontal villa gallery — a sticky section converts vertical scrolling into horizontal travel so the four villas can be compared in sequence. On phones it degrades to a swipeable scroll-snap carousel rather than a forced pin.
• Hero booking widget — the real check-in / check-out / guests structure, implemented as it would ship. Being a demo, no booking engine is wired up, and the widget says so.
• Seasonal rate tabs — low, high and peak season split into keyboard-navigable tabs; the table reflows into cards on mobile.
• Sticky booking bar — the starting rate and the inquiry button stay within reach at any scroll position.
• Gallery lightbox — Esc and arrow keys, with focus returned on close.

Information design

The surrounding-area guide uses a hand-drawn SVG map instead of an external maps API. Only travel times to the surf spot, the airport and the station remain, so the graphic communicates what you can do here rather than pretending to be a map.

Engineering, performance, accessibility

• Build-free static site — plain HTML, CSS and vanilla JS. With no framework or bundler, the deployed output is the source, so nothing can rot at maintenance time.
• Deployed on Cloudflare Pages — served from the edge, with a _headers file applying security headers (X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy) and a one-year immutable cache for static assets. Unknown paths return a branded 404 page with a real 404 status.
• Images — everything converted to WebP, every img carrying explicit width/height so there is no layout shift. The hero loads eagerly, everything else lazily.
• Motion — animations touch only transform and opacity so they stay on the compositor, and every auto-playing motion stops under prefers-reduced-motion.
• Accessibility — skip link, semantic landmarks, keyboard-operable tabs, lightbox and mobile navigation, visible focus rings, live regions for form status, and WCAG AA contrast.
• SEO — title, description, canonical, Open Graph, Twitter card and vertical-appropriate JSON-LD structured data.

Result

Live demo: ononc-stay-haneuldam.pages.dev

This is a fictional-brand demo built by ononc to show production quality. It is not a real business, and the inquiry forms do not send anything. Photography comes from freely licensed Wikimedia Commons images, credited in the site footer.