Promo Card

Accessibility

• A region named by its title.
• The countdown has the timer role, so it is not announced every second.
• The later price is struck with a real s element, and the words beside it say what it means.

Motion

• The arrow moves 2 px up and right in 150 ms on hover and focus.
• Countdown digits roll each second, with no width change.
• Claim crossfades the offer in 240 ms and pops the mark, and the height stays locked.
• With reduced motion, the arrow stays still and digits swap.

Responsive behavior

• 320 px on Web and 358 px on Mobile.
• The Button grows from 44 to 52 px on Mobile.

Performance

• The countdown ticks only on ending, and the interval is cleared on expiry and unmount.
• It reads the clock each tick, so a throttled tab still lands on the right time.
• Only the digits that change roll.

• Import PromoCard from @/components/fetaui/promo-card. brand is required.
• Keep ending to the last 24 hours. endsIn is seconds. At zero onExpire fires and the card returns to default, unless state is controlled.
• On ending, the action moves the card to claimed unless state is controlled. No payment happens, so wire onAction.
• Composes Card, Badge and Button.