A four-phase state machine, 88 CSS rules, and no video in our hero
Munchable's landing page opens with a phone that scans a carton of soup and shows a verdict. That animation is the pitch. The product is a camera, a barcode and an answer, and no paragraph of copy lands the way a screen that does it in front of you does. The obvious way to build it is a screen recording. We did not, and the reasons turned out to be more than aesthetic. Why the hero is not a video…
Munchable's landing page features a hero section that animates a camera scanning a soup carton and displaying a verdict. The animation is a key selling point, with no accompanying copy that could explain the process. Instead of using a screen recording, the team opted for a React component with SVG and CSS. This decision was driven by several factors, including the frequent updates to the app's result sheet, the need to maintain the same colours and typeface as the rest of the app, and the performance implications of using a video element.
The hero is a four-phase state machine, with each phase lasting a specific duration. The animation is controlled via CSS rather than JavaScript, allowing for quicker load times and a more seamless user experience. The barcode is drawn as an SVG, using a specific array of module widths to ensure accurate rendering at any size.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
