SLURP. — A Bowl Worth Stopping For

#frontendchallenge #css #webdev #showdev

Frontend Challenge CSS Art Submission 🍲🥧

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

A bowl is not a meal. It is an instruction.

Inspiration

Tonkotsu ramen — specifically the version you get at a cramped, steam-fogged counter seat at 11pm, where the only rule is you put your phone away and pick up the chopsticks. I wanted to build something that captured that instruction rather than just the dish: a bowl, yes, but staged like it's daring you to stop looking at it and start eating it.

The bowl itself is a straight-up love letter to the components: pulled pork chashu with a seared edge, a soft marinated egg with a jammy yolk, nori, scallion, menma, narutomaki, and noodles layered three deep for texture — all built as shaped, shadowed <div> elements. Zero images, zero SVG.

Demo

Live demo: https://codepen.io/editor/nandandas2407-web/pen/01a00033-8f33-7eb4-ac4d-cbded0cdc6b3

The centerpiece is a single, fully CSS ramen bowl — broth, three layers of noodles, chashu, egg, nori, menma, narutomaki, scallion, sesame, and rising steam — sitting directly on top of a huge kinetic headline instead of being boxed off in its own frame. The bowl and the type share one continuous dark scene, so the "H" in "HANDS" gets physically interrupted by the bowl's rim.

Below the fold: a big kinetic "THE OBJECTIVE WHILE EATING" statement, and a "BUILT FROM SCRATCH" teardown section that flips to a light panel so it reads as a clearly separate beat from the hero.

Journey

I started from the bowl outward rather than the page inward. The ramen itself came first — building the broth as a layered radial-gradient surface, then stacking noodle nests (a deep layer, a main layer, a top layer) so the tangle reads with real depth instead of looking like flat pasta shapes glued on top of each other. The chashu uses a dashed-border "swirl" pseudo-layer plus a soft fat highlight to fake the marbling without a single image asset. The egg is probably my favorite piece — a radial gradient yolk with a small offset gloss circle is doing a surprising amount of work to sell "soft-boiled."

The harder problem turned out to be composition, not the bowl itself. My first pass had the bowl sitting in its own bordered panel below the headline — safe, but it felt like two separate design decisions stapled together instead of one idea. The version I'm actually proud of came from forcing the bowl and the giant type to share the same background and physically overlap, so the eye reads them as one scene: type first, bowl crashing into it, then the smaller supporting copy underneath. That one change did more for the "does this feel designed" test than any individual texture pass.

Getting the overlap to behave responsively was its own small saga — the original art was built at a fixed pixel size, so scaling it down for mobile while keeping it centered and still overlapping the right line of text took a few iterations (transform-scale centering inside a flex parent is sneakier than it looks). I ended up wrapping the bowl in a dedicated flex container just to isolate the scaling math from the rest of the layout.

Things I'm proud of:

The noodle layering system (deep/main/top nests) — it's a simple idea but it's the single biggest contributor to making the bowl look like an actual tangle instead of stacked shapes.
The bowl-and-headline overlap. It's a small trick but it's the difference between "here's my CSS art" and "here's a page."
Everything respects prefers-reduced-motion — steam and shimmer animations turn off cleanly rather than just freezing mid-frame.

What I'd do next with more time:

Push the ceramic bowl surface further — a bit more glaze variation and an uneven rim would sell "stoneware" even harder.
A second color variant (miso or shoyu broth) using CSS custom properties, so the whole palette could retheme with one class swap.
An interactive element in the CSS Art version itself, now that a "sprinkle" of JS is allowed — maybe steam that responds to hovering the bowl.

No external libraries, no build step — just semantic HTML and one stylesheet. Built and tested across desktop and mobile viewports, keyboard-focus states included, and the whole thing degrades gracefully with motion disabled.

License: feel free to remix — MIT.

Thanks for running this challenge, this was a genuinely fun one to sit with. 🍜