Berëzta — Restaurant Concept Site

The brief

Show what a modern author-restaurant site should look like: not a 2010s booking table and not a “PDF menu in the footer,” but an atmospheric digital space that conveys the mood of the place from the first screen.

The “Berëzta” (Birch Bark) concept is a fusion of Russian tradition and European refinement. The site should match: serif accents + clean typography, a natural palette (forest green + cream + dark wood), warm AI-generated photography, light micro-interactions across the user journey.

The solution

The starting point was a small custom design system: a four-token palette (forest green + cream + dark wood + bark light), serif Playfair Display headlines, clean Be Vietnam Pro for body, soft 4-8px corners, and a paper-grain texture overlaid on the entire page. The brief for each screen was spec’d upfront — typography, spacing, components. From there — a one-page Tailwind build with advanced animation.

Background animations

• Ken Burns — the hero background slowly zooms and shifts on a 30-second loop. The interior feels “alive” rather than a static image.
• Floating particles — 24 glowing dots drift up from below at different speeds and offsets. Mimics light particles caught through a large window.
• Animated blobs — pulsing color patches behind the Menu and Booking sections. blur-3xl + slow translate + scale animation produces a soft “breathing” effect.
• Mouse parallax — the hero content gently follows the cursor.

Hero with letter-by-letter reveal

The “Taste of the Forest” headline assembles character by character, 100 ms apart, with a slight rotateZ(-10deg) flourish. The word “Forest” is a shimmer gradient — a running color sweep via linear-gradient + background-position keyframes.

Scroll-reveal without libraries

Each section and card group gets a reveal or reveal-stagger class. A single IntersectionObserver watches them and adds .visible when they enter the viewport. Cards inside a stagger block appear 100 ms apart — a natural visual rhythm with no AOS or GSAP dependency.

Menu with category switching

Breakfast / Lunch / Dinner toggle instantly via data-tab / data-pane. On switch, the reveal-stagger re-fires so cards in the new pane fade up one by one. Each section is real dishes with ruble prices, not lorem ipsum.

A booking form people will actually fill in

The form is not a grey table. Guests via a select, date via native <input type="date">, time via chip buttons with an active-slot highlight. Special requests in a generous textarea. Submit is handled in JS — the button morphs into ”✓ Booking received.”

Accessibility and performance

• prefers-reduced-motion: reduce — disables all animations for users with that preference
• Semantic markup: <header>, <main>, <section> with id anchors
• All images carry alt attributes
• Zero backend — static HTML, served in milliseconds

The outcome

The site is deployed on a dedicated subdomain over HTTPS with a Let’s Encrypt cert. It loads instantly (~80 KB for index.html, everything else is CDN-served images and Google Fonts).

This is a concept demo — there’s no real “Berëzta” restaurant. But the project is architecturally production-ready: plug in a real backend for the booking form (a PHP endpoint or a Telegram bot to notify the manager), drop in real photos and venue data, and ship.

Tech stack

• Frontend: Vanilla HTML5 + Tailwind CSS (via CDN, no build) + Vanilla JS
• Animations: CSS @keyframes (Ken Burns, blob pulse, letter reveal, shimmer, particle float-up), IntersectionObserver for scroll reveal, requestAnimationFrame for menu pane swaps
• Typography: Playfair Display (headlines), Be Vietnam Pro (body), Material Symbols (icons)
• Imagery: AI art tuned to the brand palette + Unsplash for the gallery
• Design stage: in-house mini design system (color, typography, spacing tokens) under the “Cozy Luxury” brand concept
• Hosting: own VPS, Nginx + Let’s Encrypt SSL