Mockup

A mock-up is a picture of the product, not the product: it is aria-hidden and nothing in it is interactive. Give it a title, a quiet subtitle and an icon for the header chip, and put whatever the picture needs underneath as child content.

sequence is a comma-separated list of delays in milliseconds. Each delay advances an Alpine step by one, and the loop holds the finished picture for rest milliseconds before it starts again. It only starts once a quarter of the card is on screen, and under reduced motion it jumps straight to the end. Anything inside can key off step: a mockup step lights up and ticks, a mockup meter grows, and a mockup notification slides in.

subtitle-text is an Alpine expression that replaces the subtitle as the loop plays. Keep a plain subtitle as well, so the first paint and reduced motion both read correctly. Child content can key off step too, as the signing button does here.

tilt leans the card at rest and straightens it on hover. float adds a slow bob; Late starts half a cycle behind, so two floating cards side by side never move in step.

bare drops the card's fill, padding and shadow so the mock-up becomes only the sequence: one loop driving several cards, a phone or a notification positioned around it. This is how the Legal home and Estate agents heroes are built.