After Supper: Rewinding a Family Dinner Through Memory

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing What I Built I built AFTER SUPPER, an interactive landing page about comfort food, memory, and the people around the table. Instead of beginning with a perfect plate of food, the experience opens at 20:47 - after dinner is already over. The plates are nearly empty. The serving bowl has been scraped down. A napkin is crumpled. One chair sits out of place. There are crumbs, stains, water rings, and all the small traces people leave behind when a meal has actually been lived in. The central interaction is simple: you move backwards through the dinner. The timeline runs through: 20:47 - After Supper 20:31 - Last Bite 20:09 - Seconds 19:43 - Served 19:21 - Recipe 18:58 - Before Dinner 19:14 - Full Reconstructed As time reverses, the table slowly reconstructs itself. Food returns to the plates. The serving bowl fills again. Glasses refill. The napkin straightens. The chair moves back toward the table. The warmth of the room returns. Until eventually: Everyone was still here. For this project, I wanted to explore the idea that comfort food is rarely just about the food itself. It is also the person who always serves everyone before themselves. The person who says they are not hungry and then asks for seconds. The recipe card with instructions like “pepper - you know.” The old stain nobody remembers making. The chair that is always slightly out of place. So rather than building a restaurant page, recipe catalogue, or food delivery interface, I made the dinner table itself the interface. Several objects on the table can be inspected to reveal small memories: a plate connected to a second helping the central serving dish and family recipe a drinking glass tied to a recurring ritual the serving spoon an old linen napkin a chair a worn recipe card The visual system combines generated 3D/editorial-style food assets with native frontend interaction, typography, motion, and accessibility controls. The goal was to make one ordinary family dinner feel worth remembering. Demo Live Demo: https://after-supper.vercel.app/ Source Code: https://github.com/xyzbutworse/after-supper Move backwards through the timestamps to reconstruct the dinner, then inspect the marked objects around the table. The experience is designed around one persistent dinner scene that changes through the evening, from the aftermath at 20:47 back to the moment when everyone was still here. Journey The project started as a much more conventional comfort-food landing page. That idea lasted about five minutes. There are already countless beautiful restaurant pages, recipe sites, food galleries, and menu experiences. I wanted the interaction itself to communicate the theme rather than simply wrapping good photography in a polished layout. That led to the question that defined the whole project: What if the first thing you saw was not the dinner, but what remained after it? From there, the experience became a reverse reconstruction. One of the most important design decisions was keeping everything inside one persistent dinner scene. Rather than jumping between unrelated sections, the same table changes through different moments in the evening. Each timestamp represents a different state of the same place. That allowed the chronology to become both the navigation system and the storytelling device. Building the visual system I wanted the table to feel tactile and cinematic without turning the project into a generic glossy 3D landing page. The material language was kept intentionally domestic: warm worn wood matte ceramic plates clear drinking glasses brushed metal utensils soft linen handwritten paper rice grains, sauce traces, crumbs, stains, and other imperfections I used AI-assisted image generation to create a consistent visual world for the dinner, including different table states and individual objects. Those assets were then integrated into the frontend as controllable layers rather than being used as a single static hero image. That made the imagery part of the interaction. Designing motion around the story The motion system was built around one rule: Nothing should animate just because it can. The objects should feel like they are returning to an earlier moment in time. Instead of random entrance animations, things reconstruct: plates refill glasses become fuller crumbs disappear the napkin becomes ordered again objects settle back into place the table gradually becomes warmer and more complete The final reconstruction is intentionally the strongest moment of the page. After moving through the aftermath of the dinner, the user finally reaches the full table and the line: Everyone was still here. That was the moment I designed the rest of the project around. Accessibility Because accessibility is part of the Perfect Landing criteria, I did not want the project to depend entirely on motion or mouse interaction. The experience includes: semantic buttons for interactive objects keyboard-accessible chronology navigation visible focus states Escape handling for memory panels state announcements for assistive technology reduced-motion support responsive mobile behavior readable story content that still makes sense without the full animation system Users who prefer reduced motion still get the same sequence through simpler state changes. What I Learned The biggest lesson from this build was that a landing page does not need a large feature set to feel substantial. The strongest part of AFTER SUPPER is not the number of interactions. It is that the visual design, motion, navigation, copy, and concept are all trying to say the same thing. One table. One dinner. One evening played backwards. I am particularly proud that the final experience does not need accounts, dashboards, APIs, recommendations, checkout flows, or a dozen pages to communicate its idea. It just needed a table that remembers. Comfort food is not only what was on the plate. It is remembering who was around it.