Feature 420 block design & features
The block is a variation of feature405 for a food delivery app, with the phone centred instead of at the side. A centred heading and paragraph sit above a three-column row: two steps on the left, the phone on a soft colour panel in the middle, and two steps on the right.
The steps advance on their own every five seconds. A thin line fills along the top border of the active step, and when it completes the next step becomes active. The panel crossfades to that step's flat colour and the phone fades to a list of nearby restaurants, a basket with quantities and a total, a live delivery map with order stages, or a group order where each friend adds their own dish.
Clicking a step jumps to it and restarts the timer. Hovering the area or moving keyboard focus into it pauses the progress line. When the visitor prefers reduced motion, autoplay is off, the active step shows a static line and the fades are removed. Steps are buttons with aria-pressed, and the steps, panel colours and interval are props.
On mobile the four steps stack above the phone and still advance and respond to taps.