Egusi Soup. One Bowl, One Checkbox, Zero JavaScript

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Egusi soup with pounded yam. Jollof gets the headlines, but egusi is the quiet one that actually holds Nigerian homes together. Melon seeds, ugu, palm oil, and a dome of pounded yam you eat with your hands.

I already sent this challenge a love letter to jollof for the Perfect Landing prompt. This is the companion piece, and it targets a different audience: not a flat poster, but a photograph with real depth. The entire table sits in a single CSS perspective plane, so the bowl is genuinely a bowl. You look down into it.

Demo

A morsel of pounded yam is resting on top of the dome. Press "Dip the yam" and watch it lift off, cross the table, drop into the soup and come back stained. No JavaScript anywhere near it.

Journey

The rule I set myself: zero JavaScript. The one interactive moment runs on a checkbox and a sibling selector. The checkbox stays keyboard focusable, the label carries a visible focus ring, and if you've asked your system for reduced motion, the morsel skips the flight and just shows up stained.

The whole scene is sized in container query units, so it scales as one object from a phone to a desktop without a single media query for layout. Some of the tricks I'm proud of:

• The table is one plane with transform-style: preserve-3d and a rotateX, so everything standing on it uses translateZ to mean "up off the table"
• The bowl is six rings flaring up the Z axis. The top two are masked hollow, otherwise, they paint straight over the soup, and the whole thing reads as a solid disc. That bug is what taught me the technique
• The soup sits below the rim on the Z axis, so you see the inner wall and the shadow it throws across the curds
• The pounded yam is six contours stacked into a dome, each one a little brighter as it climbs toward the light
• The egusi curds are eleven stacked radial gradients, the palm oil pools at the rim through an inset shadow, and the oil sheen is a blurred specular layer sitting over everything wet
• The ugu leaves and the scattered raw egusi seeds are each one element cloned through a long box-shadow list
• The raffia mat is a repeating radial gradient woven through a repeating conic gradient
• The morsel is billboarded back toward the camera, because a sphere always projects as a circle, and its dip animates all three values of translate so it genuinely lifts, crosses and drops in

Two things I got wrong and had to fix. The bowl started as solid discs, which meant the soup was invisible until I masked the upper rings hollow. And I built the wood with plank seams running across the frame, which looked less like a table and more like a dark line drawn through my picture. It's one continuous surface now.

Hardest part? Light. Flat colours are easy; making CSS gradients behave like palm oil under a window took more attempts than I will admit. The glossy layer over the soup ended up doing half the realism on its own.

MIT licensed. The companion piece, Jollof, A Love Letter, is already up if you want the full table setting.