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:
-
IntersectionObserverfor scroll reveals (no scroll event handlers for visibility) -
requestAnimationFramethrottling for all parallax effects - CSS
scroll-snapfor the horizontal menu - CSS custom properties for the entire design system
-
will-change: transformandtranslate3d()for GPU compositing -
prefers-reduced-motionfully respected — all animations killed, all transitions instant
Accessibility:
- Skip link, semantic HTML5 landmarks,
aria-labelledbyper section -
role="tablist"for menu dots,role="alert"for form errors - All images have
alttext, 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:
preconnectto 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 (7)
The explicit GPU-compositing discipline is the detail worth calling out — restricting all parallax to
transformandopacityonly is easy to state in a design doc and hard to maintain as the project grows. On teams I've run, the first scroll-jank regression almost always traces back to someone animating a layout-triggering property because it felt more convenient in the moment. That constraint is actually an interesting candidate for a Stylelint rule: flag transitions or animations on non-compositor-safe properties when they appear insideIntersectionObservercallbacks or scroll handlers, so the discipline survives past the original author.Thanks
Solid execution — the sticky scroll story section is the standout for me, that's genuinely one of the harder things to get feeling smooth rather than janky. Good call keeping everything to transform/opacity for the parallax, and hitting 100 across the board on Lighthouse on the first audit says the performance budget was baked in from the start, not bolted on after. The horizontal menu with scroll-snap over a plain grid was a nice choice too, fits the "tactile" feel you were going for. Nice work keeping it dependency-free.
Great design! The typography and overall layout look really clean and modern. However, the hero background image makes the body text a bit difficult to read, so adding a dark overlay or backdrop blur would significantly improve text contrast.
Thanks
This is wonderful 😊
Thanks