The Home Ratio: A Pure-CSS Serving Ritual

Willow Lopez — Wed, 12 Aug 2026 00:03:03 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

The Home Ratio is an interactive CSS artwork about 番茄炒蛋—tomato and egg—and the small differences that let one familiar dish hold several remembered rooms.

Choose one of three balances: a bright 60:40 window, a shared 50:50 table, or a soft 40:60 morning. The same CSS-drawn kitchen recomposes itself—ingredients, sauce, wall light, window weather, clock, table textile, and handwritten note move as one scene.

Then use a second native control to serve the table. The lid lifts, steam rises, and another rice bowl slides into view. The final image is not just a dish; it is a place kept for someone.

There is no “authentic” winning ratio. The interaction is the point: a shared dish can hold several equally valid memories.

Demo

oxygen56.github.io

Journey

How I drew it

The artwork uses only HTML and CSS:

radio inputs drive three whole-room compositions;
a checkbox drives the lid, steam, and second-place-setting reveal;
gradients make the sauce, ceramic, changing window light, weather, wall glow, rice, textile, and wood grain;
borders, border radii, transforms, and pseudo-elements draw every ingredient;
CSS custom properties let one composition rebalance tomato and egg and retune the room without duplicating the artwork.

There is no JavaScript, SVG, canvas, image, icon library, external font, or runtime dependency.

Accessibility and resilience

The controls are native form elements with visible labels and high-contrast focus rings. The complete piece works with touch, mouse, Tab, arrow keys, and Space. It reflows without horizontal scrolling at 320 px, and prefers-reduced-motion reduces every animation and transition to an effectively static state.

The repository includes automated browser checks for keyboard operation, 320 px reflow, slow connections, reduced motion, external requests, console errors, and WCAG A/AA issues with axe-core. The final judge simulation passed across Chromium, Firefox, and WebKit.

AI assistance and rights

OpenAI Codex was used as the primary implementation assistant for research synthesis, interaction prototyping, HTML/CSS development, test authoring, and technical-writing support. The author directed the concept and acceptance criteria. Final review covered the source, behavior, accessibility evidence, third-party-rights status, and public claims.

All artwork and copy are original to this entry. The screenshots and silent demo are direct recordings of that original browser-rendered work. No AI-generated media or third-party visual, font, text, brand mark, API, or dataset is included.

The Home Ratio: Tune a Bowl, Keep a Memory Card

Willow Lopez — Tue, 11 Aug 2026 23:57:25 +0000

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 leave room for people.

The page begins with one culturally specific dish—番茄炒蛋, tomato and egg—without declaring one definitive version. Its centerpiece is a three-step ritual:

tune a keyboard-native ratio between soft egg and bright tomato;
place the bowl in a weeknight glow, rain-window quiet, or an unhurried Sunday;
optionally keep one private word for a person, place, or season.

The page seals those choices into an original memory card and a copyable sentence. The page does not store or send the optional word: there is no account, network request, cookie, browser storage, or analytics endpoint. It reaches the device clipboard only when the visitor explicitly chooses Copy.

The result is not a recipe calculator. It is a small interaction that gives an unwritten preference a shape worth keeping.

Demo

oxygen56.github.io

Journey

The interaction model

I used a real HTML range input rather than a simulated drag surface. That decision gives the centerpiece keyboard, touch, and assistive-technology behavior by default. Arrow keys change the ratio in five-point steps, while a polite live region announces the new balance. A synchronized mini-bowl keeps the visual response in the same viewport as the control.

The three moment choices are native radio inputs, and the optional word is handled as text—not HTML. Submitting moves focus to the completed card; copying produces the same visible sentence. JavaScript only enables the enhanced experience after initialization succeeds. If JavaScript is disabled or the application file fails to load, the interactive maker is replaced by three complete ratio portraits plus the full moment guide.

Design system

The visual language comes from the dish itself: tomato red, egg yellow, enamel blue-green, warm paper, and dark brown ink. Every hero ingredient is a browser-native shape built from gradients, borders, radii, and transforms. System fonts keep the experience fast and free of external rights or availability risk.

The page was designed and tested for:

complete keyboard access and highly visible focus;
320 px reflow without horizontal scrolling;
prefers-reduced-motion;
complete no-JavaScript and failed-script paths;
local-only personalization with no storage or external requests;
WCAG A/AA automated checks;
zero external runtime requests;
final verification in Chromium, Firefox, and WebKit, including a slow-connection path.

AI assistance and rights

OpenAI Codex was used as the primary implementation assistant for research synthesis, interaction prototyping, HTML/CSS/JavaScript development, test authoring, and technical-writing support. The author directed the concept and acceptance criteria. Final review covered the source, behavior, accessibility evidence, third-party-rights status, and public claims.

DEV Community: Willow Lopez

The Home Ratio: A Pure-CSS Serving Ritual

Inspiration

Demo

Journey

How I drew it

Accessibility and resilience

AI assistance and rights

The Home Ratio: Tune a Bowl, Keep a Memory Card

What I built

Demo

Journey

The interaction model

Design system

AI assistance and rights