DUM: Breaking the Seal on Hyderabadi Biryani with Pure CSS

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

Inspiration

Hyderabadi dum biryani is more than a dish to me—it is a ritual. The sealed handi, the slow charcoal heat, the suspense before the atta crust is broken, and the first rush of saffron, mint, birista, and spice all feel inseparable from the experience.

I wanted to turn that moment into an interactive midnight poster: Hyderabad’s skyline behind a copper handi, with the food hidden until the viewer breaks the seal.

Demo

Click BREAK THE SEAL to lift the lid and reveal the four biryani layers.

How it works

The artwork is built with HTML and CSS only:

• A native <details> / <summary> control stores the open and closed states.
• CSS :has() coordinates the seal crack, lid lift, layer reveal, steam, labels, embers, and state-aware copy.
• Rice grains, mint leaves, birista, spices, meat, copper patina, flour dust, the skyline, and the moon are all CSS shapes.
• There are no images, SVGs, canvas, JavaScript, gradients, or frameworks.
• A mobile composition and prefers-reduced-motion keep the piece responsive and accessible.

The reveal is deliberately choreographed:

seal cracks → lid lifts → layers separate → labels arrive → steam settles

Journey

The hardest part was keeping the illustration detailed without losing the strong poster silhouette. I iterated on three areas:

1. Material: hammered copper marks, soot, flour residue, dough cracks, and print texture.
2. Depth: curved food layers, overlapping grains, steam arches, and ingredient silhouettes.
3. Motion: a staged opening sequence rather than making every element animate at once.

The most satisfying decision was using a semantic HTML control for the interaction. The artwork still works with a keyboard, and disabling motion does not hide the final state.

I used Codex as an iterative coding and visual-critique partner. I directed the concept, cultural references, composition, and final decisions, while the agent helped implement and test the CSS system.

What I’m proud of

The finished piece stays intentionally constrained: one HTML file, one CSS file, a small palette, and no image assets. The interaction adds drama, but CSS remains the star of the submission.

Thanks for taking a look—and remember: patience is the final ingredient.