The Home Ratio: A Landing Page Tuned by Memory
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I built The Home Ratio is a landing-page experience for a simple idea: recipes record steps, but ratios can record people. The page begins with one culturally specific dish—番茄炒蛋, tomato and egg—without declaring one definitive version. Its signature ratio dial moves between soft egg and bright tomato. As it…
The Home Ratio is a captivating landing page experience that explores the concept of recipes and ratios from a unique perspective. Rather than presenting a traditional recipe calculator, this page invites users to reflect on the versions of dishes they already know and love.
The focal point of the page is a culturally specific dish: 番茄炒蛋, a tomato and egg stir-fry. Rather than declaring a single definitive version, the page showcases a dynamic ratio dial that smoothly transitions between soft egg and bright tomato. As the user interacts with this dial, various elements of the page adapt to reflect the changing ratio.
This includes numeric ratios, emotional names, descriptions, live-region announcements, and shareable memory lines, all working in harmony to create a cohesive and engaging experience.
One of the key design choices in The Home Ratio is the use of real HTML range input elements, rather than simulated drag surfaces. This decision ensures that the centerpiece of the page is fully accessible using keyboard, touch, and assistive technology. Arrow keys can be used to adjust the ratio in five-point increments, and a polite live region announces the new balance, enhancing the overall user experience for all individuals.
The visual language of the page is inspired by the dish itself. Tomato red, egg yellow, enamel blue-green, warm paper, and dark brown ink are the primary color palette. Each hero ingredient is crafted using browser-native shapes, built from gradients, borders, radii, and transforms. The system fonts chosen for the page ensure fast loading times and minimize the risk of external rights or availability issues.
The page has been designed and tested for complete keyboard access, highly visible focus, a 320px reflow without horizontal scrolling, prefers-reduced-motion support, and a complete no-JavaScript path. It has passed WCAG A/AA automated checks, with zero external runtime requests. The concept and acceptance criteria were directed by a human, who reviewed the final source, behavior, accessibility evidence, third-party-rights status, and public claims.
All visuals and copy are original to this entry, with no generated media or third-party elements included.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — it may contain errors, so check the original before relying on it.
