This is a submission for Frontend Challenge: Comfort Food Edition, CSS Art.
Inspiration
Yesterday I submitted a landing page for ChocoDEV, a chocolate brand that exists only in CSS. A brand needs a product shot, and this brand has a rule: no images, ever. So the product shot had to be drawn in the only medium the brand allows.
It is one chocolate bar with a bite taken out of it, because a perfect untouched bar is a lie. Nobody photographs their comfort food before tasting it.
Demo
Live: vinimabreu.dev/chocodev/bar
The fallen chunk reacts if you click it. That is the entire JavaScript budget, three lines, and the piece is complete without them.
Journey
Every chunk is a molded facet: four trapezoid faces built from angular gradients, so the light lands differently on each slope, the way a real mold presses chocolate. The letters are not printed on top, they are pressed in, one dark shadow above and one thin highlight below, and that two-shadow trick is the whole illusion of depth.
The bite was the hard part. A clean clip-path zigzag looked like scissors had done it, so the exposed edge got fracture facets in lighter matte browns and a few crumbs, because chocolate never breaks politely.
There is exactly one animation, a slow sheen that crosses the bar like it is turning under a studio light, and it sits behind a prefers-reduced-motion guard. When your system asks for stillness, the bar just stands there looking edible.
Everything is gradients, box-shadow, border-radius and clip-path. Open devtools, it is chocolate all the way down.
Top comments (3)
"A perfect untouched bar is a lie. Nobody photographs their comfort food before tasting it." That is a better argument for honest demos than most conference talks manage, and it applies well outside CSS art. The polished untouched version of anything is the version nobody has used yet.
The detail I liked most is that the letters are pressed in rather than printed on top. That is the difference between something modelled and something decorated, and it is usually the part that gets skipped because nobody would notice it missing. They would notice, though. They just would not know what they were noticing.
The bite started as composition and ended up as the thesis. Software demos have the same problem: the screenshot everyone ships is the untouched bar, first run, empty states, nothing retried. The version worth showing is the one with a bite out of it, the run that hit a rate limit two thirds in and recovered, the log with the one ugly line. That is the only version that proves somebody actually ate it.
On pressed versus printed, the test I use for systems is whether a detail shares its source with the thing it belongs to or was added after. The pressed letters inherit the bar's geometry, so the light treats them like chocolate. A printed label just sits on top and drifts. Most dashboards are printed: the number was true the day someone typed it.
And nobody naming it is the point. Users file that difference under "feels solid", which may be the best review a detail can get.
"Most dashboards are printed: the number was true the day someone typed it." That is the sentence, and it sent me to look at ours.
We threw away every hand kept status table for the reason you are describing. The prose tables recorded what somebody believed on the day they wrote them, and they drifted the moment anything shipped. Our status surface is now derived from git and from live checks, which is the pressed version. The detail shares a source with the thing it describes, so it has no way to drift on its own.
It still caught me last week, in a way your metaphor predicts. A pressed letter is honest about the bar it was pressed into and silent about when the photograph was taken. Our generated line was 236 hours old when I quoted it. Derived, correct at the moment of generation, and I read it as a description of the present.
So the pressed test wants a second half for anything with a clock in it. Share the source, and carry the moment. People leave the second one off, because a generated number feels current in a way a typed one never does.
The bite is doing real work in that post, incidentally. It is the only part of the image that could not have been rendered from an idea of chocolate.