The Leaf Is the Page: My Mother's Sunday Meal, Served in Eating Order

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

The leaf is the page.

For my CSS Art entry, I drew my mother's Sunday meal: sixteen dishes on a banana leaf, each one placed where Telugu tradition puts it. For Perfect Landing, that artwork became the navigation. Tap any dish on the leaf and the page takes you to that dish's course. Scroll instead, and you move through the meal in eating order: ghee first, then the curries, the pulusu, rasam, the rice varieties, the crunch, the sweet, and finally perugu. The scroll is the serving order. The structure of the page is the structure of the meal.

It is deliberately not a restaurant. No menu cards, no reservation form, no gallery. One family, one Sunday, eight courses, and the rules my mother enforces at each one.

The part I cared most about:

a screen reader is served this meal the same way my mother serves it. The heading order, the tab order, and the reading order all follow the eating order. Tap targets on the leaf move focus to the course they open, so keyboard and screen reader users travel with everyone else. Telugu headings carry lang="te" so they are pronounced as Telugu, not mangled as English. The course nav marks where you are. And with reduced motion on, the smooth scrolling and the ghee-pour animation both settle down together.

Demo

Things to try:

tap the rice mound (or the ghee spoon) on the leaf and see where it takes you. Press Tab from the top of the page and watch the skip link appear before anything else. Scroll and watch the Telugu nav track your course. Turn on reduced motion and take the calm version of the same journey.

Every visual on the page is CSS. No images, no SVG, no canvas.

Journey

The concept came from the eating itself. On a banana leaf, order is information: neyyi before anything, perugu always last. Most landing pages invent an information architecture. This meal already had one, and it is thirty years older than CSS grid. My whole job was not to break it.

Reusing the art as UI:

The sixteen-dish leaf from my CSS Art entry dropped in as the hero almost unchanged. The dishes already had names and tap behavior; the landing layer only adds a data-section per dish and a small script that shows the Telugu name for a beat, then scrolls you to the course and moves focus there. The art and the page share one visual language because they are literally the same code.

Accessibility as the design, not the audit:

I made the accessibility decisions before the visual ones this time, and it changed what I built:

The heading outline is the menu: one h1, eight h2s, in serving order. If you read only the headings, you have eaten the meal.
lang="te" on every Telugu heading. Without it, screen readers attempt Telugu words with English phonetics, and my mother would not forgive the pronunciation.
After leaf navigation, focus moves to the target course with tabindex="-1". Scrolling a sighted user somewhere while leaving a keyboard user behind is not navigation.
The course nav highlight uses IntersectionObserver with aria-current, so "where am I" is exposed to assistive tech, not just painted on.
scroll-margin-top on every course so the sticky header never swallows a heading you just navigated to.
prefers-reduced-motion turns off smooth scrolling and the ghee animation in the same query. Calm should be consistent.

What I deliberately left out:

This challenge's Perfect Landing pool is full of beautiful cultural food pages, several with menus, modals, and reservation forms. I cut all of it. Modals are where keyboard experiences usually go to die, and a fictional reservation form on a page about my mother's kitchen would be a lie. The page does one thing: it serves the meal in order.

What I'm proud of:

the sentence I kept testing against was "a blind visitor is served this meal the way amma serves it." Getting the reading order, focus order, and serving order to be the same order took more restraint than code, and restraint turned out to be the whole design.

What's next:

recordings of the Telugu dish names in a real voice, and a festival-day mode where the sweet moves to the front of the leaf, because on festival days, it does.

This work is licensed under the MIT License.

If you build a page about your family's food, here is my one suggestion: find the order your house eats in, and let it be your information architecture. Every kitchen already has one.