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 make a familiar dish feel like one particular home.

Choose one of three remembered balances: tomato-led, quietly balanced, or egg-led. The same CSS-drawn bowl recomposes itself: ingredient scale, sauce color, and the handwritten memory note all change. Then lift the lid to serve it warm.

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 the three compositions;
a checkbox drives the lid and steam ritual;
gradients make the sauce, ceramic, window light, and wood grain;
borders, border radii, transforms, and pseudo-elements draw every ingredient;
CSS custom properties let one composition rebalance tomato and egg without duplicating the bowl.

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 strong focus states. The complete piece works with touch, mouse, Tab, arrow keys, Space, and Enter. 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. A human directed the concept and acceptance criteria and reviewed the final source, behavior, accessibility evidence, third-party-rights status, and public claims.

All shipped visuals and copy are original to this entry. No generated media or third-party visual, font, text, brand mark, API, or dataset is included.

The Home Ratio: A Landing Page Tuned by Memory

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 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 moves, the ingredient composition, numeric ratio, emotional name, description, live-region announcement, and shareable memory line answer together.

The result is not a recipe calculator. It is an invitation to notice the version you already carry.

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.

JavaScript performs one progressive-enhancement job: it keeps the CSS composition and the editorial copy synchronized with the native input. With JavaScript disabled, the interactive card is replaced by three complete ratio portraits, and every narrative section remains available.

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;
a complete no-JavaScript path;
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. A human directed the concept and acceptance criteria and reviewed the final source, behavior, accessibility evidence, third-party-rights status, and public claims.

All shipped visuals and copy are original to this entry. No generated media or third-party visual, font, text, brand mark, API, or dataset is included.

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: A Landing Page Tuned by Memory

What I built

Demo

Journey

The interaction model

Design system

AI assistance and rights