The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →A Munchable landing-page hero uses four React-controlled phases to animate an SVG illustration with CSS instead of playing a video. The sequence moves from approach to scan, lock, and result; when reduced motion is requested, it displays the result frame. The design gives the team control over the illustration and its motion, but it also creates a second drawing of the product interface that must be kept in sync with the real app.
Why the hero uses SVG and CSS instead of video
In his Munchable landing-page case study, Daniel Pertu describes a hero built with a React component, an inline SVG illustration, and CSS. The implementation has no animation library, Lottie runtime, or video element, according to Pertu’s account.
As an Amazon Associate I earn from qualifying purchases.
The choice lets the illustration respond to design tokens and gives the team direct control over how its elements move. It does not establish that CSS animation is inherently faster or lighter than video: Pertu supplies no comparative loading measurements or independent performance test. He says the compositor handles the animation while the rest of the page hydrates, but that is his explanation of this implementation, not independently verified browser-performance evidence.
How the four phases coordinate React and CSS
React holds a coarse phase value, exposes it through a data-phase attribute, and advances the sequence on a timer. CSS selectors keyed to that attribute control details such as the scanline, reticle, and result text. This separates the story’s broad states from the frame-by-frame visual work handled by CSS.
#1 Best Overall
| Phase | Duration in Pertu’s implementation | Role in the visual sequence |
|---|---|---|
approach |
2,200 ms | The illustrated camera moves toward the product. |
scan |
1,700 ms | The scanline and reticle communicate a scan in progress. |
lock |
900 ms | The visual sequence marks the apparent lock-on. |
result |
4,600 ms | The informative result remains visible before the loop starts again. |
These are the authored phase durations, not measurements of page performance. Pertu also says a React key remounts a small subtree so its CSS keyframes replay on each loop. The key is a practical bridge between React’s state-driven sequence and CSS animations that need to start again.
What the scan depicts—and what it does not
The carton and barcode are geometric SVG drawings. The camera-like zoom is timed so that a known barcode position lines up with the reticle. Nothing in the described implementation detects or reads a barcode: the apparent scan is an authored visual illusion, not computer vision or a live product interaction.
That distinction matters if visitors could mistake the hero for a working feature demo. In Pertu’s account, the hero and the four feature-row visuals below it are still images or illustrations, marked aria-hidden; nearby copy explains what the visuals depict. The interface communicates through its text rather than requiring assistive technology to interpret decorative motion.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallHow reduced motion changes the animation
The component checks the prefers-reduced-motion setting, subscribes to changes, and sets the phase to result for users who request reduced motion. Instead of freezing at whichever point a visitor happens to reach, it presents the informative result frame. A blanket reduced-motion CSS rule provides an additional safety net.
This is a deliberate state choice: the reduced-motion experience keeps the content the animation was meant to convey while avoiding the moving sequence. It also means the result phase needs to make sense on its own, without relying on the preceding approach, scan, or lock animation.
The tradeoff: a flexible illustration that can drift
Pertu reports that his implementation contains 382 lines of TSX and 88 CSS rules. Those are his counts for this particular hero, not benchmarks of complexity, loading speed, or maintainability.
The deeper cost is that the illustration is another rendering of an interface. Shared design tokens can keep colors and other token-based styling aligned, but they do not guarantee that the illustrated phone layout stays consistent with the actual mobile app. If the real product changes, someone must update the SVG and animation as well. A video has its own update workflow; this implementation avoids a video asset but does not eliminate upkeep.
When this approach is a good fit
A state-driven SVG hero can suit a short, repeatable product story when the team needs precise motion control, a useful reduced-motion endpoint, and illustration styling that can follow design tokens. It is less suitable when the animation must faithfully show a frequently changing live interface, or when the project cannot budget for keeping a second representation current.
Best Value
To compare it fairly with video, evaluate the actual update workflow, fidelity to the shipped product, motion and accessibility controls, and measured loading behavior in the target browsers. Pertu’s account explains one implementation and its tradeoffs; it does not provide the data needed to declare either medium universally faster or lighter.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
