devto 2026-08-15 원문 보기 ↗
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
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:
As time reverses, the table slowly reconstructs itself.
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:
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.
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.
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:
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:
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:
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.