Download badges are usually a <img src="app-store-badge.svg"> — a fixed bitmap you can't restyle or resize cleanly. StoreBadge draws the lockup itself: one height prop drives the icon, the two lines of text, and the padding, so the badge scales like a font instead of an image.

Every dimension — icon, gap, padding, corner radius, both text sizes — is a ratio of height, floored with Math.max so the caption never drops below a legible 9px. Hand it height={72} for a hero and height={40} for a footer; nothing else changes, because nothing else is a hardcoded pixel value.

This isn't a shimmer that loops on an interval — it's a single translate-x transition parked off-screen left (-130%) that eases to off-screen right (130%) the moment group-hover is true, and snaps back to -130% the instant the pointer leaves (no exit transition is defined, so it resets instantly, ready for the next hover). The -12deg skew is what makes it read as a light streak crossing a curved badge edge instead of a rectangular bar sliding across a rectangular one.

The QR is a popover, not a modal. matchMedia("(pointer: coarse)") gates the whole feature: on touch, show is a no-op and the badge just links normally — there's no tap-to-reveal state to get stuck in on a phone. On a fine pointer, hover or focus (so keyboard users get it too) mounts the AnimatePresence child, which pops in on the same { stiffness: 520, damping: 32 } spring used everywhere else in the library for menus and popovers. The QR itself is generated client-side from the badge's href (or an explicit qrUrl) — no image asset, no server round trip.

const mq = window.matchMedia("(pointer: coarse)");
const show = () => !coarse && setOpen(true);

<span onMouseEnter={show} onMouseLeave={hide} onFocusCapture={show} onBlurCapture={hide}>
  {children}
  <AnimatePresence>
    {open ? (
      <motion.span
        initial={{ opacity: 0, y: 8, scale: 0.96 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, y: 8, scale: 0.96 }}
        transition={{ type: "spring", stiffness: 520, damping: 32 }}
        role="dialog"
        aria-label={label}
      >
        <QrCode value={url} size={size} logo={logo} label={label} />
      </motion.span>
    ) : null}
  </AnimatePresence>
</span>

One height prop drives an entire scalable lockup, a sheen that crosses once per hover instead of looping, and a QR popover that only exists where a phone camera could actually use it — hover either badge below to see all three.