"use client";

import { TiltedPlinthButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  tilt?: number;
  depth?: number;
  showArrow?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Join today",
  accent = "#FF4D8D",
  tilt = 10,
  depth = 5,
  showArrow = true,
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-12 p-10">
      <TiltedPlinthButton label={label} accent={accent} tilt={tilt} depth={depth} showArrow={showArrow} />
      <TiltedPlinthButton label="Start free trial" accent="#38BDF8" tilt={Math.min(20, tilt + 4)} depth={depth} showArrow={false} />
    </div>
  );
}

1d:T13eb, 1e:T1049a,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    tilt?: number;
    depth?: number;
    showArrow?: boolean;
  }>(),
  { label: "Join today", accent: "#FF4D8D", tilt: 10, depth: 5, showArrow: true },
);

const EASE = "cubic-bezier(0.2, 0.8, 0.2, 1)";

function darken(hex: string, amount: number): string {
  const clean = hex.replace("#", "");
  const num = Number.parseInt(clean, 16);
  const r = Math.max(0, Math.round(((num >> 16) & 255) * (1 - amount)));
  const g = Math.max(0, Math.round(((num >> 8) & 255) * (1 - amount)));
  const b = Math.max(0, Math.round((num & 255) * (1 - amount)));
  return `rgb(${r}, ${g}, ${b})`;
}

const hovered = ref(false);
const pressed = ref(false);
const focused = ref(false);
const reducedMotion = ref(false);

if (typeof window !== "undefined") {
  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = query.matches;
  query.addEventListener("change", (event) => {
    reducedMotion.value = event.matches;
  });
}

const rawState = computed<"rest" | "hover" | "press">(() =>
  pressed.value ? "press" : hovered.value || focused.value ? "hover" : "rest",
);
const state = computed<"rest" | "hover" | "press">(() =>
  reducedMotion.value && rawState.value === "hover" ? "rest" : rawState.value,
);

const barTone = computed(() => darken(props.accent, 0.32));

const targets = computed(() => {
  const depth = props.depth;
  const restBar = depth;
  const hoverBar = depth === 0 ? 0 : Math.max(1, depth - 2);
  const pressBar = depth === 0 ? 0 : Math.max(1, Math.round(depth * 0.2));
  const blurBase = 8 + Math.min(depth, 12) / 3;
  return {
    rest: { lift: 0, bar: restBar, shadowGap: 6, blur: blurBase, opacity: 0.36, spread: 1 },
    hover: { lift: -2, bar: hoverBar, shadowGap: 3, blur: Math.max(5, blurBase - 3), opacity: 0.48, spread: 0.82 },
    press: { lift: 2, bar: pressBar, shadowGap: -1, blur: 4, opacity: 0.22, spread: 0.62 },
  } as const;
});

const t = computed(() => targets.value[state.value]);
const duration = computed(() => (reducedMotion.value ? "0.01s" : "0.2s"));
const shadowY = computed(() => t.value.lift + t.value.bar + t.value.shadowGap);

const wrapperStyle = computed(() => ({
  transform: `perspective(900px) rotateX(${-(props.tilt * 0.4)}deg) rotateY(${props.tilt * 0.6}deg) rotateZ(${props.tilt * 0.22}deg)`,
  transformStyle: "preserve-3d" as const,
}));

const shadowStyle = computed(() => ({
  height: "14px",
  background: barTone.value,
  opacity: t.value.opacity,
  filter: `blur(${t.value.blur}px)`,
  transform: `translateY(${shadowY.value}px) scaleX(${t.value.spread})`,
  transition: `transform ${duration.value} ${EASE}, opacity ${duration.value} ${EASE}, filter ${duration.value} ${EASE}`,
}));

const barStyle = computed(() => ({
  height: `${t.value.bar}px`,
  background: barTone.value,
  transform: `translateY(${t.value.lift}px)`,
  transition: `height ${duration.value} ${EASE}, transform ${duration.value} ${EASE}`,
}));

const buttonStyle = computed(() => ({
  background: props.accent,
  transform: `translateY(${t.value.lift}px)`,
  transition: `transform ${duration.value} ${EASE}`,
}));

function onLeave() {
  hovered.value = false;
  pressed.value = false;
}

function onBlur() {
  focused.value = false;
  pressed.value = false;
}
</script>

<template>
  <div class="tilted-plinth" :style="wrapperStyle">
    <span aria-hidden="true" class="tilted-plinth__shadow" :style="shadowStyle" />
    <span aria-hidden="true" class="tilted-plinth__bar" :style="barStyle" />
    <button
      type="button"
      class="tilted-plinth__button"
      :style="buttonStyle"
      @pointerenter="hovered = true"
      @pointerleave="onLeave"
      @pointerdown="pressed = true"
      @pointerup="pressed = false"
      @focus="focused = true"
      @blur="onBlur"
    >
      <span>{{ label }}</span>
      <svg
        v-if="showArrow"
        aria-hidden="true"
        viewBox="0 0 24 24"
        width="18"
        height="18"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M5 12h14" />
        <path d="M13 6l6 6-6 6" />
      </svg>
    </button>
  </div>
</template>

<style scoped>
.tilted-plinth {
  position: relative;
  display: inline-block;
}
.tilted-plinth__shadow,
.tilted-plinth__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 100%;
  pointer-events: none;
  border-radius: 10px;
}
.tilted-plinth__bar {
  left: 0;
  right: 0;
  border-radius: 0 0 12px 12px;
}
.tilted-plinth__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  border: none;
  border-radius: 12px;
  padding: 15px 40px;
  color: #fff;
  font: 500 18px/1.3 system-ui, sans-serif;
  outline: none;
}
.tilted-plinth__button:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 4px;
}
</style>

Nearby