The latest articles on DEV Community by shaik riyan shareef (@riyanshareefshaik). https://dev.to/riyanshareefshaik https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4064393%2F6a97d0b4-0ac6-40eb-b1b6-f4bc672aee64.jpg https://dev.to/riyanshareefshaik en shaik riyan shareef Sat, 15 Aug 2026 06:09:27 +0000 https://dev.to/riyanshareefshaik/yonaka-a-midnight-ramen-counter-3nko https://dev.to/riyanshareefshaik/yonaka-a-midnight-ramen-counter-3nko <h2> What I Built </h2> <p>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.</p> <p>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.</p> <h2> Demo </h2> <div class="ltag-netlify"> <iframe src="https://yonakasramen.netlify.app/" title="Netlify embed"> </iframe> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi6xxffy50b40op5oys1g.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi6xxffy50b40op5oys1g.png" alt=" " width="800" height="496"></a></p> <h2> Journey </h2> <p>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.</p> <p>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.</p> <p>Next, I'd like to add a lightweight "order" flow and experiment with WebCodecs for even smoother frame seeking on lower-end devices.</p> <p>can feel free to ask in comments ❤️</p> webdev programming productivity javascript