"use client";

import { TiltedDeckButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  tilt?: number;
  shadow?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Click me", accent = "#3F5EFB", tilt = 15, shadow = 29 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-10 p-8">
      <TiltedDeckButton accent={accent} tilt={tilt} shadow={shadow}>
        {label}
      </TiltedDeckButton>
      <TiltedDeckButton accent="#F5C542" tilt={tilt} shadow={shadow}>
        Deal
      </TiltedDeckButton>
    </div>
  );
}

1d:T15eb, 1e:T11494,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    tilt?: number;
    shadow?: number;
  }>(),
  { label: "Click me", accent: "#3F5EFB", tilt: 15, shadow: 29 },
);

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}
function hexToRgb(hex: string) {
  const n = parseInt(hex.slice(1), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function shade(hex: string, target: number, amount: number) {
  const { r, g, b } = hexToRgb(hex);
  const m = (c: number) => Math.round(c + (target - c) * amount);
  return `rgb(${m(r)} ${m(g)} ${m(b)})`;
}
function rgba(hex: string, alpha: number) {
  const { r, g, b } = hexToRgb(hex);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

const hovered = ref(false);
const focused = ref(false);
const pressed = ref(false);
const reducedMotion = ref(false);
let mediaQuery: MediaQueryList | null = null;
function onMediaChange() {
  reducedMotion.value = mediaQuery?.matches ?? false;
}
onMounted(() => {
  mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mediaQuery.matches;
  mediaQuery.addEventListener("change", onMediaChange);
});
onUnmounted(() => {
  mediaQuery?.removeEventListener("change", onMediaChange);
});

const restTilt = computed(() => clamp(props.tilt, 0, 35));
const level = computed(() => (pressed.value ? 2 : hovered.value || focused.value ? 1 : 0));
const activeTilt = computed(() => {
  const multiplier = level.value === 2 ? 2.1 : level.value === 1 ? 1.5 : 1;
  return clamp(restTilt.value * multiplier, 0, 65);
});
const currentTilt = computed(() => (reducedMotion.value ? restTilt.value : activeTilt.value));
const lift = computed(() => (level.value === 2 ? 9 : level.value === 1 ? 3 : 0));
const perspective = computed(() => clamp(1180 - currentTilt.value * 13, 420, 1180));

const shadowAmount = computed(() => clamp(props.shadow, 0, 60));
const poolOpacity = computed(() => 0.16 + (shadowAmount.value / 60) * 0.34 + level.value * 0.03);
const poolBlur = computed(() => (18 + shadowAmount.value * 0.6) * 0.5);
const poolScale = computed(() => 1 + level.value * 0.08);
const poolOffset = computed(() => 20 + shadowAmount.value * 0.35 + lift.value * 0.6);

const top = computed(() => shade(props.accent, 255, 0.32));
const bottom = computed(() => shade(props.accent, 0, 0.4));
const edge = computed(() => shade(props.accent, 0, 0.62));
const glow = computed(() => rgba(props.accent, 0.5));

const transition = computed(() => (reducedMotion.value ? "none" : undefined));

function press() {
  pressed.value = true;
}
function release() {
  pressed.value = false;
}
function onKeydown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = true;
}
function onKeyup(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = false;
}
function leave() {
  hovered.value = false;
  pressed.value = false;
}
function blur() {
  focused.value = false;
  pressed.value = false;
}
</script>

<template>
  <span class="tilted-deck-button">
    <span
      aria-hidden="true"
      class="tilted-deck-button__pool"
      :style="{
        background: `radial-gradient(closest-side, ${accent}, transparent 72%)`,
        filter: `blur(${poolBlur}px)`,
        opacity: poolOpacity,
        transform: `translate(-50%, ${poolOffset}px) scaleX(${poolScale})`,
        transition: transition,
      }"
    />
    <button
      type="button"
      class="tilted-deck-button__face"
      :style="{
        transform: `perspective(${perspective}px) rotateX(${currentTilt}deg) translateY(${lift}px)`,
        transition: transition,
        background: `linear-gradient(to top, ${bottom}, ${top})`,
        boxShadow: `0 -1px 0 rgb(255 255 255 / 0.18) inset, 0 18px 34px -18px ${glow}`,
      }"
      @pointerenter="hovered = true"
      @pointerleave="leave"
      @pointerdown="press"
      @pointerup="release"
      @focus="focused = true"
      @blur="blur"
      @keydown="onKeydown"
      @keyup="onKeyup"
    >
      <span aria-hidden="true" class="tilted-deck-button__edge" :style="{ background: edge }" />
      <span class="tilted-deck-button__label">{{ label }}</span>
    </button>
  </span>
</template>

<style scoped>
.tilted-deck-button {
  position: relative;
  display: inline-flex;
}
.tilted-deck-button__pool {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84%;
  height: 1.25rem;
  border-radius: 9999px;
  pointer-events: none;
  transition:
    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tilted-deck-button__face {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 0.625rem;
  color: #fff;
  font: 700 1rem/1.2 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transform-origin: 50% 100%;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tilted-deck-button__face:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.8);
  outline-offset: 2px;
}
.tilted-deck-button__edge {
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  pointer-events: none;
}
.tilted-deck-button__label {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tilted-deck-button__face,
  .tilted-deck-button__pool {
    transition: none;
  }
}
</style>

Nearby