Rasa Kenangan - Immersive Scroll Narrative Landing Page

Rasa Kenangan - Simfoni Makanan Rumahan "Kenangan dimasak pelan-pelan." A complete redesign of a fictional Indonesian comfort food restaurant landing page - built with vanilla HTML, CSS, and JavaScript, zero frameworks, zero backend. 100% static, deployed on Cloudflare Pages. Live Demo: What I Built Rasa Kenangan (which translates to "Flavor of Memories") is an imaginary upscale Indonesian comfort food restaurant in Yogyakarta. The concept: resep warisan - heritage recipes passed down through generations, served with modern elegance. I chose the comfort food theme because Indonesian "masakan rumahan" (home cooking) is deeply emotional - it's the food that makes you feel at home, no matter where you are. The tagline "Masak pelan, saji hangat, ingat lagi" (Cook slow, serve warm, remember again) captures this perfectly. The Redesign Challenge The original landing page was generic - a typical hero, 3-column feature grid, and CTA. No animation, no personality, nothing distinctive. I completely overhauled it into an immersive scroll narrative inspired by Awwwards-winning restaurant sites like BALANS KITCHEN, CAÍN, and Mister Pio. What Makes It Special Layout (NOT the typical hero→3-col→CTA): - Cinematic hero with full-viewport parallax background and kinetic typography reveal - Sticky scroll story - image stays fixed on the left while narrative text scrolls on the right - Horizontal scroll menu - 6 dish cards in a draggable horizontal track with dot navigation - Split-screen reservation - atmospheric image on the left, form on the right Animations: - Word-by-word kinetic typography reveal with 3D rotateX on hero title - Parallax scrolling on hero background, story image, and reservation image (all GPU-composited) - IntersectionObserver-driven scroll reveals with sibling stagger - Steam puffs with CSS keyframe animations - Tracer marquee between sections - Horizontal menu with snap points and dot indicators Design System: - Palette: Warm amber ( oklch(72% 0.105 62) ), deep charcoal (oklch(22% 0.018 60) ), creamy white (oklch(96% 0.012 85) ) - Fonts: Fraunces (display serif), Manrope (body), Space Grotesk (labels) - All colors via CSS custom properties - zero hardcoded values - oklch throughout - modern, perceptually uniform color space Demo 🔗 Live: The page features: - Loading screen with brand mark and progress bar - Full-viewport hero with parallax background - Sticky scroll story section - Horizontal scroll menu with 6 dishes - Split-screen reservation form with Cloudflare Turnstile - Responsive design (380px to 1920px+) - Respects prefers-reduced-motion - Lighthouse: 100/100/100/100 (Performance, Accessibility, Best Practices, SEO) Journey Research Phase I studied Awwwards-winning restaurant websites to find distinctive patterns: - BALANS KITCHEN: Clip-path slider, sticky layout, horizontal scroll with parallax - CAÍN: Warm countryside fire/tradition aesthetic, bold parallax design - Mister Pio: Parallax columns, animated footer, keyhole image reveal - TRIPLETTA PIZZA: Infinite scroll, horizontal layout - Zur Linde Rotkreuz: GSAP + SplitText, scroll-based microinteractions The key insight: the best restaurant sites don't follow the generic 3-column grid pattern. They use immersive, scroll-driven narratives that pull you into the experience. Design Decisions "Immersive Scroll Narrative" - I completely overhauled the layout: Hero: Full-viewport with parallax background layers and kinetic typography. The title "Kenangan dimasak pelan-pelan." reveals word-by-word with a subtle 3D rotation effect. Story: Sticky scroll narrative - the kitchen image stays fixed while you read the story. This creates a cinematic feel where the image and text work together. Menu: Horizontal scroll instead of a 3-column grid. This is more tactile - you feel like you're flipping through a menu. Dot indicators and prev/next buttons add navigation. Reservation: Split-screen layout with atmospheric image on the left and form on the right. The image has parallax scrolling for depth. Technical Highlights No frameworks. Pure vanilla: - IntersectionObserver for scroll reveals (no scroll event handlers for visibility) - requestAnimationFrame throttling for all parallax effects - CSS scroll-snap for the horizontal menu - CSS custom properties for the entire design system - will-change: transform andtranslate3d() for GPU compositing - prefers-reduced-motion fully respected - all animations killed, all transitions instant Accessibility: - Skip link, semantic HTML5 landmarks, aria-labelledby per section - role="tablist" for menu dots,role="alert" for form errors - All images have alt text, decorative elements markedaria-hidden - Keyboard reachable all interactive elements - Color contrast verified: amber on charcoal ≥ 4.5:1 - Lighthouse accessibility: 100 Performance: - Hero image: AVIF format, fetchpriority="high" , explicit width/height - All other images: lazy loaded with loading="lazy" - Fonts: preconnect to Google Fonts,display=swap - Single CSS file (~767 lines), single JS file (~249 lines) - Zero external JS dependencies - Lighthouse performance: 100 The "Hallmark" Discipline: - Pre-emit self-critique on 6 axes - Honest copy only - no invented metrics, no fake reviews - Locked design tokens - no arbitrary values What I'm Proud Of The sticky scroll narrative - this was the hardest section to implement correctly. The image needs to stay perfectly fixed while the text scrolls, and the parallax effect on the image needs to feel natural, not gimmicky. Lighthouse 100/100/100/100 - on the FIRST audit after implementation. This required careful attention to accessibility (color contrast, target sizes, label associations) and performance (lazy loading, font optimization, GPU compositing). The horizontal scroll menu - it feels tactile and physical, unlike a static grid. The dot navigation updates dynamically as you scroll, and the snap points make it feel native. Zero dependencies - no React, no Tailwind, no GSAP. Just HTML, CSS, and JavaScript. The entire design system lives in CSS custom properties. What I Learned - Awwwards research pays off - studying real award-winning sites gave me concrete patterns to implement, not just abstract design principles. - oklch is worth it - perceptually uniform color space makes palette decisions much more predictable than HSL. - Sticky scroll narratives are hard - getting the timing and feel right requires careful tuning of the scroll math. - Horizontal scroll on mobile needs attention - touch scrolling, snap points, and overflow handling all need special care. What's Next - Server-side form handling (currently demo-only with Turnstile validation) - Image optimization pipeline (currently using Unsplash CDN originals) - Service worker for offline support - CMS integration for menu items Tech Stack - HTML5 - Semantic markup, landmarks, ARIA - CSS3 - Custom properties, oklch, scroll-snap, clip-path, animations - JavaScript (ES6+) - IntersectionObserver, requestAnimationFrame, no transpilation - Cloudflare Pages - Static hosting with global CDN - Cloudflare Turnstile - CAPTCHA protection License MIT Built for Frontend Challenge: Comfort Food Edition · August 2026 Top comments (0)