DEV Community

Cover image for I made a bowl of ramen breathe with CSS, then left the JavaScript almost alone
ANIRUDDHA ADAK
ANIRUDDHA ADAK

Posted on

I made a bowl of ramen breathe with CSS, then left the JavaScript almost alone

#frontendchallenge #css #webdev #creativecoding

Frontend Challenge CSS Art Submission 🍲🥧

The best CSS art makes a familiar object stop feeling ordinary for a second. A bowl of ramen is already a small landscape: a dark rim, a warm surface, a loop of noodles, the bright interruption of an egg, and steam that tells you the meal has not given up on you yet.

For the Comfort Food CSS Art prompt, I made that landscape with ordinary HTML and CSS. There are no image assets in the bowl. The broth is a rounded pseudo-landscape, the noodles are curved borders, the egg is two nested ellipses, and the scallions are rotated pill shapes. The work lives inside Comfort Paws Lab, a domestic field guide for people caring for dogs and themselves.

The art

The bowl is intentionally imperfect. I did not want a glossy product render. I wanted the quiet feeling of looking down at a bowl on a dark table after the room has finally settled. The palette stays close to that moment: deep ink blue, toasted sesame, warm cream, scallion green, and a single marigold highlight.

The composition is also built to be legible before it is elaborate. The wide bowl silhouette arrives first, then the steam, then the details. That order matters on a smaller screen, where a viewer should still recognize the meal before they notice how it was made.

The small interaction

JavaScript does one job here. It lets a visitor pause the steam. The bowl does not need a feature set. It needs one interaction with a clear outcome and an accessible pressed state.

const [steamOn, setSteamOn] = useState(true)

<button onClick={() => setSteamOn((current) => current ? false : true)} aria-pressed={steamOn}>
  <span className={steamOn ? "switch-dot is-on" : "switch-dot"} />
  <span>{steamOn ? "Let the steam rise" : "Hold the steam still"}</span>
</button>
Enter fullscreen mode Exit fullscreen mode

The animation itself stays in CSS, where it belongs. It changes only opacity and transform, uses a soft stagger so the steam does not move like a loading indicator, and disappears completely for visitors who prefer reduced motion.

.steam--on {
  opacity: .85;
  animation: rise 3.2s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none;
    transition: none;
  }
}
Enter fullscreen mode Exit fullscreen mode

Why this bowl belongs in a dog-care project

The bowl is not dog food. It is for the person who remembered to lower the room’s volume, refill the water bowl, find the leash, and do every other small thing that care asks of them. I wanted the project to say, without turning sentimental, that the human should eat too.

That choice changed the design. The dark panel is treated like a field-guide specimen rather than a generic showcase. It has a kitchen-specimen label, a paw stamp, a paper note, and a line that reads, “A calm room still needs someone fed.” The CSS art is the technical centerpiece, but the domestic context is what gives it a reason to exist.

Demo

You can try the bowl and pause the steam in the live Comfort Paws Lab demo. The source-and-asset archive contains the CSS art source and cover images used for the submission.

I would love to know what comfort food you would build if you had to use only borders, radii, and a stubborn amount of patience.

Top comments (0)