Mothers Little Helper
Our project explores the mid-century housewife aesthetic through performance, typography and color. A live cleaning act, tracked by AprilTags and a webcam, alters the variable font DMT LL.
Performance
Performance Video
Concept
The typeface DMT LL itself is named after the psychedelic drug DMT, which made us think further about the connection between drugs and the housewife aesthetic. While DMT represents a more experimental and mind-altering substance, the drugs advertised to women in the mid-20th century were about control, calmness, and appearance. Using this typeface to show the names of those medications creates an interesting contrast between freedom and conformity and connects our visual concept back to the theme of chemical influence in everyday life.
Alongside the poster, we developed a live performance where we clean a yellow surface using different tools – a sponge, wire sponge, squeegee, and duster. The surface is sprayed with black water to make it dirty. We wear pink cleaning gloves and silver rings while performing. Each cleaning tool is tagged with an AprilTag, allowing the movements to be tracked by a webcam. The data from this live feed directly influences the DMT LL variable font, creating a digital reaction to the physical act of cleaning.
The performance is streamed live on a website, next to a clean, minimalist poster that resembles a washing label – black DMT type on white background and inverted when sprayed by the bottle. For the color palette, we used high-contrast shades of pink, blue, and yellow, referencing mid-century bathroom and kitchen colors.
Project
Teaser
mother's little helper
Setup
Props
Code
tag01 detection: triggers CSS animation when tag is within 100px of a letter.
//tag1
function updateLetterPositions(detection) {
if (!detection) return;
constx=getRawAxis(detection, 'x');
consty=getRawAxis(detection, 'y');
constnx=x/ (video.videoWidth||1280);
constny=y/ (video.videoHeight||720);
constgridBox=document.getElementById('layout-grid').getBoundingClientRect();
letters.forEach(letter=> {
constrect=letter.getBoundingClientRect();
constcx= (rect.left+rect.right) /2;
constcy= (rect.top+rect.bottom) /2;
constdx=nx*gridBox.width+gridBox.left-cx;
constdy=ny*gridBox.height+gridBox.top-cy;
constdist=Math.sqrt(dx*dx+dy*dy);
if (dist<100) animateLetter(letter);
});
}
function animateLetter(el) {
if (el.dataset.animating==="1") return;
el.dataset.animating="1";
el.classList.add("animate-letter");
setTimeout(() => {
el.classList.remove("animate-letter");
el.dataset.animating="0";
}, 800);
}
//css animation
.letter.animate-letter {
font-variation-settings: 'ROTA'360, 'SIZE'100, 'wght'100;
}Process
Inspiration
We were inspired by housewives of the mid-20th century, and we explore this theme in several parts of our project concept.
Interactions
Testing
testing01
testing02
Interface sketches
Challenges
One of the biggest challenges in our project was the acrylic paint we applied to the acrylic glass, as it didn’t provide enough coverage. In the end, we solved this problem by scrubbing off the acrylic paint and spraying on color instead.
