Web Design & Development

Oiyo

A garden café website with a 3D cup and an interactive drink builder.

Oiyo: Home
Oiyo: Build your ritual.
Oiyo: Crafted for the Season
Oiyo: Homepage section
Oiyo: Stories, rituals & seasonal notes
Oiyo: A seat, a moment, a ritual. We’ll save it for yo…
Oiyo: Menu page
Oiyo: Story page
Oiyo: Rituals page
Oiyo on mobile

Home

Project snapshot

A slow-living café website for Oiyo in Portland: seasonal menu, a hands-on Ritual Builder, live opening hours, a journal and table reservations.

Project
Oiyo
Type
Web Design & Development
Services
  • Website Design
  • Frontend Development
  • Interaction Design
Tools
  • Vite
  • Three.js
  • GSAP
  • Lenis
Key capabilities
  • Ritual Builder
  • 3D Cup
  • Live Opening Hours
  • Table Reservations
  • Chat Assistant
Status
Live
Visit live projectoiyo-restaurant.vercel.app

01Overview

ProjectOverview

Oiyo is a garden café that sells calm as much as coffee, so the site slows the visitor down: soft colours, a classic serif, smooth Lenis scrolling and a hero that tells you whether the café is open right now.

The centrepiece is the Ritual Builder. Visitors pick a base, a milk and a sweetener, watch the cup change as they go, see the price update, and add the drink to a tray. Around it sit the seasonal signature picks, the café's story, a journal of seasonal notes and a reservation call-to-action, plus a small chat assistant called Dew that answers questions about hours, the menu and booking.

02Key features

KeyFeatures

  1. Ritual BuilderChoose a base, milk and sweetness; the cup and price update live before adding it to your tray.
  2. Draggable 3D cupA Three.js coffee cup visitors can turn by dragging.
  3. Live opening hoursThe header and hero show whether the café is open now and until when.
  4. Seasonal menuSignature drinks and pastries with dietary tags and prices.
  5. Dew chat assistantA friendly helper for hours, menu questions and booking a table.
  6. JournalSeasonal stories and notes that give the brand a voice beyond the menu.

More projects

Explore more work.