<script setup lang="ts">
import { computed, ref } from "vue";

type FlipAxis = "top" | "bottom" | "left" | "right";

const props = withDefaults(
  defineProps<{
    frontLabel?: string;
    backLabel?: string;
    axis?: FlipAxis;
    duration?: number;
    accentColor?: string;
  }>(),
  {
    frontLabel: "View pricing",
    backLabel: "Compare plans",
    axis: "top",
    duration: 480,
    accentColor: "#FF4D8D",
  },
);

const emit = defineEmits<{ activate: [] }>();

const ROTATE_PROP: Record<FlipAxis, "rotateX" | "rotateY"> = {
  top: "rotateX",
  bottom: "rotateX",
  left: "rotateY",
  right: "rotateY",
};
const ROTATE_TARGET: Record<FlipAxis, number> = { top: -180, bottom: 180, left: -180, right: 180 };

const flipped = ref(false);
const lastPointerType = ref("mouse");

const rotateProp = computed(() => ROTATE_PROP[props.axis]);
const target = computed(() => ROTATE_TARGET[props.axis]);
const flipperStyle = computed(() => ({
  transitionDuration: `${props.duration}ms`,
  transform: flipped.value ? `${rotateProp.value}(${target.value}deg)` : `${rotateProp.value}(0deg)`,
}));
const backStyle = computed(() => ({
  background: props.accentColor,
  transform: rotateProp.value === "rotateX" ? "rotateX(180deg)" : "rotateY(180deg)",
}));

function onPointerDown(event: PointerEvent) {
  lastPointerType.value = event.pointerType;
}
function onPointerEnter(event: PointerEvent) {
  lastPointerType.value = event.pointerType;
  if (event.pointerType !== "touch") flipped.value = true;
}
function onPointerLeave(event: PointerEvent) {
  if (event.pointerType !== "touch") flipped.value = false;
}
function onFocus() {
  flipped.value = true;
}
function onBlur() {
  flipped.value = false;
}
function onClick(event: MouseEvent) {
  if (lastPointerType.value === "touch" && !flipped.value) {
    event.preventDefault();
    flipped.value = true;
    return;
  }
  emit("activate");
}
</script>

<template>
  <button
    type="button"
    class="flip-face-button"
    @pointerdown="onPointerDown"
    @pointerenter="onPointerEnter"
    @pointerleave="onPointerLeave"
    @focus="onFocus"
    @blur="onBlur"
    @click="onClick"
  >
    <span class="flip-face-button__flipper" :style="flipperStyle">
      <span class="flip-face-button__face flip-face-button__face--front">{{ frontLabel }}</span>
      <span class="flip-face-button__face flip-face-button__face--back" aria-hidden="true" :style="backStyle">{{ backLabel }}</span>
    </span>
  </button>
</template>

<style scoped>
.flip-face-button {
  position: relative;
  display: inline-flex;
  height: 2.25rem;
  min-width: 9rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.875rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: 500 0.875rem/1.25rem system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  perspective: 800px;
  outline: none;
}
.flip-face-button:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px rgb(255 255 255 / 0.7);
}
.flip-face-button__flipper {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0.05, 0.2, 1);
}
.flip-face-button__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 6px;
  backface-visibility: hidden;
}
.flip-face-button__face--front {
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.06);
}
.flip-face-button__face--back {
  color: #1a0c03;
}
@media (prefers-reduced-motion: reduce) {
  .flip-face-button__flipper {
    transform: none !important;
    transform-style: flat;
  }
  .flip-face-button__face {
    backface-visibility: visible;
    transition-property: opacity;
  }
  .flip-face-button__face--front {
    opacity: v-bind('flipped ? 0 : 1');
  }
  .flip-face-button__face--back {
    opacity: v-bind('flipped ? 1 : 0');
    transform: none;
  }
}
</style>

1f:Te79, 20:Tbe47,

<script lang="ts">
  type FlipAxis = "top" | "bottom" | "left" | "right";

  let {
    frontLabel = "View pricing",
    backLabel = "Compare plans",
    axis = "top",
    duration = 480,
    accentColor = "#FF4D8D",
    onactivate,
  }: {
    frontLabel?: string;
    backLabel?: string;
    axis?: FlipAxis;
    duration?: number;
    accentColor?: string;
    onactivate?: () => void;
  } = $props();

  const ROTATE_PROP: Record<FlipAxis, "rotateX" | "rotateY"> = {
    top: "rotateX",
    bottom: "rotateX",
    left: "rotateY",
    right: "rotateY",
  };
  const ROTATE_TARGET: Record<FlipAxis, number> = { top: -180, bottom: 180, left: -180, right: 180 };

  let flipped = $state(false);
  let lastPointerType = "mouse";

  let rotateProp = $derived(ROTATE_PROP[axis]);
  let target = $derived(ROTATE_TARGET[axis]);
  let flipperStyle = $derived(
    `transition-duration: ${duration}ms; transform: ${rotateProp}(${flipped ? target : 0}deg);`,
  );
  let backStyle = $derived(
    `background: ${accentColor}; transform: ${rotateProp === "rotateX" ? "rotateX(180deg)" : "rotateY(180deg)"};`,
  );

  function onPointerDown(event: PointerEvent) {
    lastPointerType = event.pointerType;
  }
  function onPointerEnter(event: PointerEvent) {
    lastPointerType = event.pointerType;
    if (event.pointerType !== "touch") flipped = true;
  }
  function onPointerLeave(event: PointerEvent) {
    if (event.pointerType !== "touch") flipped = false;
  }
  function onFocus() {
    flipped = true;
  }
  function onBlur() {
    flipped = false;
  }
  function onClick(event: MouseEvent) {
    if (lastPointerType === "touch" && !flipped) {
      event.preventDefault();
      flipped = true;
      return;
    }
    onactivate?.();
  }
</script>

<button
  type="button"
  class="flip-face-button"
  onpointerdown={onPointerDown}
  onpointerenter={onPointerEnter}
  onpointerleave={onPointerLeave}
  onfocus={onFocus}
  onblur={onBlur}
  onclick={onClick}
>
  <span class="flipper" class:flipped style={flipperStyle}>
    <span class="face front">{frontLabel}</span>
    <span class="face back" aria-hidden="true" style={backStyle}>{backLabel}</span>
  </span>
</button>

<style>
  .flip-face-button {
    position: relative;
    display: inline-flex;
    height: 2.25rem;
    min-width: 9rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.875rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font: 500 0.875rem/1.25rem system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    perspective: 800px;
    outline: none;
  }
  .flip-face-button:focus-visible {
    box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px rgb(255 255 255 / 0.7);
  }
  .flipper {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0.05, 0.2, 1);
  }
  .face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 6px;
    backface-visibility: hidden;
  }
  .front {
    border: 1px solid rgb(255 255 255 / 0.15);
    background: rgb(255 255 255 / 0.06);
  }
  .back {
    color: #1a0c03;
  }
  @media (prefers-reduced-motion: reduce) {
    .flipper {
      transform: none !important;
      transform-style: flat;
    }
    .face {
      backface-visibility: visible;
      transition-property: opacity;
      opacity: 1;
    }
    .back {
      opacity: 0;
      transform: none;
    }
    .flipper.flipped .front {
      opacity: 0;
    }
    .flipper.flipped .back {
      opacity: 1;
    }
  }
</style>

Nearby