What I Built
Yonaka is a landing page for a midnight ramen counter — an imaginary 12-seat spot that opens after dark. The whole page is built around one idea: a fixed background video that scrubs frame-by-frame as you scroll, so a bowl of ramen assembles itself (empty bowl → noodles → broth → chashu → egg → finished bowl) in perfect sync with how far down the page you are — the video finishes exactly as you hit the bottom.
Beyond the hero, it's got a build breakdown (the four steps that go into the bowl, in order), a photo gallery pulled from stills of the same footage, a four-item menu styled like a paper ticket, fictional reviews, and hours/location info. Built with vanilla HTML/CSS/JS — no frameworks.
Demo
Journey
The trickiest part was getting the scroll-scrubbing to feel smooth in both directions. My first pass used a source video with only a single keyframe, which meant seeking backward (scrolling up) had nowhere to go but back to frame zero — a jarring snap every time. Re-encoding with a keyframe every 6 frames fixed it completely, since the browser could now seek precisely to nearby frames instead of re-decoding from the start.
I'm proud of how the whole page ties motion to intent instead of using motion for its own sake — every animation (the video scrub, the reveal-on-scroll steps, the header that only shows at the top) is driven by what the user is actually doing, not on a timer.
Next, I'd like to add a lightweight "order" flow and experiment with WebCodecs for even smoother frame seeking on lower-end devices.
can feel free to ask in comments ❤️
Top comments (0)