Concept snapshot
Record date: May 20, 2026. Technology and screenshots describe the prototype as documented on this date. Any performance observations belong to the same point-in-time record. No current client deployment is implied.
La Volta is a refined single-page website for an Italian restaurant nestled inside a historic stone bóveda in Madrid. The design language leans heavily on editorial typography, restrained motion, and warm earthy tones, creating an experience that feels closer to flipping through a high-end food magazine than browsing a typical restaurant site.
Built without frameworks, the site uses vanilla HTML, CSS, and JavaScript orchestrated by GSAP and Lenis smooth scrolling. Every section is designed to slow the visitor down: split-text headings reveal line by line, stat counters tick up on scroll, and a cinematic hero anchors the brand before the first pixel moves.
Live Demo: https://lavolta.apalaugonzalez.com/
- Full-bleed hero with a stone-vault interior photograph and layered gradient overlay for text legibility
- Responsive picture element serves a 9:16 crop on mobile and 16:9 on desktop
- Eyebrow, title, and CTA buttons stagger in on load with subtle opacity + translateY
- Scroll-hint indicator with looping vertical motion
- Semantic skip-link for accessibility
Split-Text Scroll Animations
- Every major heading uses a split-line reveal technique: each line is masked in its own overflow-hidden container, and the inner text slides up from below as it enters the viewport
- Powered by GSAP ScrollTrigger with scrubbed progress
- Creates a rhythmic, magazine-like reading pace
Story Section with Animated Stats
- Two-column editorial layout: narrative text alongside a chef portrait
- Stats row counts up from zero on viewport entry (20 years, 12 regions, 3 generations)
- Grain texture overlay adds tactile depth without impacting readability
- Menu categories rendered as accessible tab buttons (role="tablist")
- Tab switching crossfades content panels with GSAP opacity transitions
- Dish cards include pricing, descriptions, and dietary indicators
- Progress bar at the bottom of the menu section tracks scroll depth through the active category
- Fully responsive; tabs become horizontally scrollable on narrow viewports
- Dark grain background inverts the palette for contrast
- Curated wine list with region, vintage, and pairing notes
- Featured espresso pull-quote with decorative quotation marks
- Beverage cards with editorial photography and tasting notes
- Full reservation form with real-time client-side validation
- Fields: name, email, phone, date picker, time select, guest count, occasion
- Custom-styled inputs matching the warm palette, no default browser chrome
- Mobile bottom-sheet interaction: a handle pulls up the form on touch devices
- Success toast notification on submit
- Accessible error messaging with aria-live="polite"
- Burger button toggles a full-screen overlay menu with staggered link reveals
- Close button and backdrop-click dismissal
- Focus management for keyboard and screen-reader users
- aria-expanded and aria-controls attributes for accessibility
- Palette: Deep Umber (#1E0D06), Cream (#FAF3E4), Warm Stone (#C4B7A6), Muted Olive (#8A7E6B)
- Typography: Cormorant Garamond (display / body), Cormorant SC (small caps labels), Jost (UI / navigation)
- Spacing: Generous vertical rhythm; sections breathe with 10vh+ padding
- Texture: Subtle film-grain overlay on select sections to evoke aged paper and stone
- No border radius on cards, sharp editorial edges reinforce the historic setting
- Vanilla HTML / CSS / JS, zero framework overhead for maximum control and performance
- GSAP + ScrollTrigger, all scroll-driven animations are scrubbed or triggered by viewport intersection
- Lenis smooth scroll, inertia scrolling that integrates cleanly with ScrollTrigger via lenis.on('scroll', ScrollTrigger.update)
- IntersectionObserver, stat counters and reveal animations use native observers as lightweight triggers
- Responsive picture element, hero art-directed with <source media> for mobile crop vs. desktop wide shot
- Form validation, custom regex and constraint-validation API; no external library
- prefers-reduced-motion respected: disables scroll-scrubbed animations and grain overlay for users who need it
- All imagery delivered as WebP with loading="lazy" and decoding="async" outside the hero
La Volta demonstrates how a restaurant brand can transcend the template look by investing in editorial design, restrained motion, and typographic hierarchy. The site functions as a portfolio piece for luxury hospitality brands, hotels, private dining, wine bars, and boutique culinary experiences, where atmosphere is the product.
View Project
