Work it, Serve it, Eat it
“Work It, Serve It, Eat It” is an interactive performance project that combines physical cooking with digital design. Inspired by the bird’s-eye-view format of YouTube cooking shows, we challenged ourselves to create a sandwich in a specific time frame while showcasing the Supreme typeface. As ingredients are prepared and assembled, our digital interface responds in real-time, reacting to AprilTags, audio levels, and colors. This fusion of culinary action and typographic design transforms a simple 9-step sandwich-making process into an immersive, time-based experience that bridges the tactile and the digital.
Concept and font choice
This project emerged from our interest in merging physical performance with responsive digital media. At its core, the concept explores how digital elements can react and evolve through tangible actions, in this case, the act of making a sandwich, without requiring direct manual control of the technology. Drawing inspiration from the signature overhead perspective of YouTube cooking shows, we constructed a framework where culinary preparation becomes the driving force behind visual transformation.
Our design choices reflect this intersection of food and technology: the Supreme typeface from Lineto provides bold geometric presence, while AprilTags, audio-reactive elements, and color detection create a system of automated responses. The performance itself is strictly choreographed, nine sequential steps from toasting bread to final assembly, all executed within a short time frame.
The conceptual tension lies in this marriage of the everyday and the digital. By channeling the methodical process of sandwich-making through technological mediation, we create a performance where slicing tomatoes, spreading condiments, and layering ingredients trigger typographic and visual responses. This approach transforms routine culinary gestures into an unconventional dialogue between hand and screen, appetite and algorithm.
Performance
Setup right side
Setup left side
Moodboards
Digital
Performance
Process
The development of this project began with extensive sketch-making and visual research. We immersed ourselves in the aesthetic language of nutritional labels, nutrition scores, and food packaging—dissecting their rigid grids, systematic layouts, and informational hierarchy. These everyday design objects became our primary inspiration, offering a visual vocabulary that felt both clinical and familiar.
Through iterative sketching, we translated these packaging principles into a dynamic performance framework. The Supreme typeface emerged as our typographic anchor, its bold geometric forms echoing the authoritative clarity of ingredient lists and calorie counts. We experimented with how AprilTags could trigger specific visual states, how audio levels might modulate typographic elements, and how color detection could create unexpected connections between physical ingredients and digital responses.
Sketches
More Sketches
Technical stuff and difficulties
Interactions
The most challenging technical aspect was coding a digital napkin that folds convincingly in response to AprilTags. Using SVG, the square was divided into four triangular sections, each with its own clip path and transformation origin at the center point (50,50). When AprilTags appeared, specific triangles would animate independently—the bottom triangle folding vertically, the left triangle horizontally, and finally the top triangle completing the wrap. Each fold required precise coordinate calculations to maintain the illusion of depth, with dashed lines suggesting creases and layering orders carefully managed so triangles would overlap naturally. This created a three-dimensional folding effect from purely two-dimensional geometry.
<div id="wrap">
<svg id="wrap-square" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="topClip">
<polygon points="0,0 100,0 50,50" />
</clipPath>
<clipPath id="leftClip">
<polygon points="0,0 0,100 50,50" />
</clipPath>
<clipPath id="rightClip">
<polygon points="100,0 100,100 50,50" />
</clipPath>
<clipPath id="bottomClip">
<polygon points="0,100 100,100 50,50" />
</clipPath>
</defs>
<g id="base-layer">
<polygon points="100,0 100,100 50,50" fill="#FFFFFF" stroke="none" />
</g>
<g id="folding-layer">
<g id="bottom-triangle" class="triangle">
<polygon points="0,100 100,100 50,50" fill="#FFFFFF" stroke="none" />
<line x1="0" y1="100" x2="100" y2="100" stroke="black" stroke-width="1" />
</g>
<g id="top-triangle" class="triangle">
<polygon points="0,0 100,0 50,50" fill="#FFFFFF" stroke="none" />
<line x1="0" y1="0" x2="100" y2="0" stroke="black" stroke-width="1" />
<line x1="100" y1="0" x2="50" y2="50" stroke="black" stroke-width="1"
stroke-dasharray="3,3" />
</g>
<g id="left-triangle" class="triangle">
<polygon points="0,0 0,100 50,50" fill="#FFFFFF" stroke="none" />
<line x1="0" y1="0" x2="0" y2="100" stroke="black" stroke-width="1.5" />
<line x1="0" y1="0" x2="50" y2="50" stroke="black" stroke-width="1"
stroke-dasharray="3,3" />
</g>
</g>
<g id="lines">
<line x1="100" y1="0" x2="100" y2="100" stroke="black" stroke-width="1.5" />
<line x1="50" y1="50" x2="100" y2="100" stroke="black" stroke-width="1"
stroke-dasharray="3,3" />
</g>
</svg>
</div>