Animated modal as mobile bottom sheet with Tailwind

Responsive modal using Motion One with CSS variables.

• Animation scales up on desktop, slides up from bottom on mobile as a drawer.

tsx
<Motion.div
  class={cn(
    // Slide
    "[--slide-from:80px] [--slide-to:0px] md:[--slide-from:0px]",
    // Scale
    "[--scale-to:1] [--scale-from:1] md:[--scale-from:0.95]"
  )}
  initial={{ scale: "var(--scale-from)", y: "var(--slide-from)" }}
  animate={{ scale: "var(--scale-to)", y: "var(--slide-to)" }}
  exit={{ scale: "var(--scale-from)", y: "var(--slide-from)" }}
/>