This is a submission for Frontend Challenge: Comfort Food Edition, Perfect Landing.
What I Built
ChocoDEV is a landing page for a chocolate brand that does not exist, and I am fine with that. Chocolate is my comfort food, and it turns out it is also South America's: the oldest traces of cacao were found in the upper Amazon, which as a Brazilian I consider a home win.
The page has one rule: zero images. No PNGs, no SVGs, no background URLs. Every square of chocolate, every drip, every bevel is gradients, box-shadow and keyframes. The footer makes the claim and devtools can check it, which is my favorite kind of claim.
The centerpiece is a chocolate bar you can actually eat. Each chunk is a button, each bite updates a counter, and when the bar is gone you get to bake a new one. There is also an exploded anatomy view of a single square, a scroll progress bar, and a testimonials section where four honest people confess things about chocolate that most of us only think.
Demo
Live demo: vinimabreu.dev/chocodev
Click a chunk of the bar. The counter is watching.
Journey
The zero images rule sounded like a gimmick and turned into the whole education. A believable chocolate square needs light coming from somewhere, and without images that means layered box-shadows: an inset highlight on top, an inset shadow at the bottom, a drop shadow below. Once the light direction was consistent, everything suddenly looked edible. Before that it looked like brown buttons.
The part I am most proud of is not visible. The page respects prefers-reduced-motion in three places: the CSS animations, the stat counters that jump straight to their final value instead of counting up, and the parallax that simply declines to run. Every interactive element is a real button with a name a screen reader can speak, the document has a language and a title, and the menu wraps instead of clipping on narrow screens. Accessibility is a judging criterion in this challenge, and I think it should be the first one: a landing page that only works for some visitors is a poster.
What I would do next: a dark and milk chocolate theme toggle, and sound on the snap. Probably a mistake. Most good ideas about chocolate are.
Thanks for reading, and go eat something that makes you feel at home.
Top comments (2)
The line I would frame is "the footer makes the claim and devtools can check it, which is my favorite kind of claim." That is a whole engineering philosophy hiding in a chocolate bar. A claim that ships with its own verification method costs the reader nothing to test and costs you nothing to defend, and the zero images rule works precisely because it is falsifiable in one keystroke.
Most claims are not built that way. We spend a lot of our time on the opposite problem, numbers that are true when written and cannot be re-checked later by the person reading them, and the fix always turns out to be the same as yours: make the artifact carry the evidence rather than the assertion.
Also the counter that updates as you eat it is the correct amount of unnecessary.
That re-check gap is the one that bites in client work. A delivery report full of numbers that were true at write time is worth little a week later unless the package carries what it takes to recompute them. The rule I ended up with: every number in the report has to resolve to a file in the deliverable, a request ledger, an export, an archived capture. If the reader cannot re-derive it, it does not ship. I arrived there the honest way, by catching my own "measured" figures that turned out to be estimates written from memory. The fix was mechanical, not moral: before sending, re-derive each number against the raw artifact, never against the write-up.
And you are right about why the zero images rule holds up as a claim: a budget of 0 is the only performance budget that cannot be argued with, only checked.
The counter stays. Some features earn their place precisely by being indefensible.