"use client";

import { PointerTiltPhotoCard } from "./index";

export interface DemoProps {
  maxTilt?: number;
  stiffness?: number;
  hoverScale?: number;
  showGlare?: boolean;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ maxTilt = 14, stiffness = 180, hoverScale = 1.04, showGlare = true, accent = "#38BDF8" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <PointerTiltPhotoCard
        title="Ridgeline at dawn"
        subtitle="Kestrel Pass, 2,340m"
        maxTilt={maxTilt}
        stiffness={stiffness}
        hoverScale={hoverScale}
        showGlare={showGlare}
        accent={accent}
      />
    </div>
  );
}

1d:T1e18, 1e:T1b778,

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

const props = withDefaults(
  defineProps<{
    title?: string;
    subtitle?: string;
    maxTilt?: number;
    stiffness?: number;
    hoverScale?: number;
    showGlare?: boolean;
    accent?: string;
  }>(),
  {
    title: "Ridgeline at dawn",
    subtitle: "Kestrel Pass, 2,340m",
    maxTilt: 14,
    stiffness: 180,
    hoverScale: 1.04,
    showGlare: true,
    accent: "#38BDF8",
  },
);

/** Convert a #rrggbb color to [h, s, l] with h in 0-360 and s/l in 0-100. */
function hexToHsl(hex: string): [number, number, number] {
  const value = hex.replace("#", "");
  const r = Number.parseInt(value.slice(0, 2), 16) / 255;
  const g = Number.parseInt(value.slice(2, 4), 16) / 255;
  const b = Number.parseInt(value.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  if (max === min) return [0, 0, l * 100];
  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;
  return [h, s * 100, l * 100];
}

/** Convert [h, s, l] back to a #rrggbb color. */
function hslToHex(h: number, s: number, l: number): string {
  const sat = s / 100;
  const lig = l / 100;
  const k = (n: number) => (n + h / 30) % 12;
  const a = sat * Math.min(lig, 1 - lig);
  const f = (n: number) => lig - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  const channel = (n: number) => Math.round(f(n) * 255);
  return `#${[channel(0), channel(8), channel(4)].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
}

/** #rrggbb -> [r, g, b]. */
function hexToRgb(hex: string): [number, number, number] {
  const value = hex.replace("#", "");
  return [Number.parseInt(value.slice(0, 2), 16), Number.parseInt(value.slice(2, 4), 16), Number.parseInt(value.slice(4, 6), 16)];
}

const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

const faceImage = computed(() => {
  const [h, s, l] = hexToHsl(props.accent);
  const hueA = hslToHex(h, clamp(s, 42, 78), clamp(l, 30, 48));
  const hueB = hslToHex((h + 42) % 360, clamp(s - 8, 30, 70), clamp(l - 16, 12, 30));
  return `radial-gradient(120% 70% at 18% 12%, rgba(255,255,255,0.16), transparent 58%), radial-gradient(130% 80% at 82% 88%, rgba(0,0,0,0.28), transparent 62%), linear-gradient(135deg, ${hueA}, ${hueB})`;
});

const subtitleColor = computed(() => {
  const [h, s, l] = hexToHsl(props.accent);
  return hslToHex(h, clamp(s - 10, 20, 60), clamp(l + 28, 55, 82));
});

const cardRef = ref<HTMLAnchorElement | null>(null);
const glareRef = ref<HTMLSpanElement | null>(null);
const reduced = ref(false);
let frame = 0;

function onClick(event: MouseEvent) {
  event.preventDefault();
}

onMounted(() => {
  const card = cardRef.value;
  if (!card) return;
  reduced.value = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const damping = Math.max(18, Math.round(Math.sqrt(props.stiffness) * 2));
  const [sr, sg, sb] = hexToRgb(props.accent);
  const target = { x: 0, y: 0, hold: 0 };
  const cur = { x: 0, y: 0, hold: 0 };
  const vel = { x: 0, y: 0, hold: 0 };
  let last = 0;

  const track = (event: PointerEvent) => {
    if (event.pointerType === "touch" || reduced.value) return;
    const rect = card.getBoundingClientRect();
    target.x = clamp(((event.clientX - rect.left) / rect.width) * 2 - 1, -1, 1);
    target.y = clamp(((event.clientY - rect.top) / rect.height) * 2 - 1, -1, 1);
  };
  const engage = (event: PointerEvent) => {
    if (event.pointerType === "touch") return;
    target.hold = 1;
    track(event);
  };
  const release = (event: PointerEvent) => {
    if (event.pointerType === "touch") return;
    target.hold = 0;
    target.x = 0;
    target.y = 0;
  };
  const onFocus = () => {
    target.hold = 1;
    if (!reduced.value) {
      target.x = 0.42;
      target.y = -0.42;
    }
  };
  const onBlur = () => {
    target.hold = 0;
    target.x = 0;
    target.y = 0;
  };

  card.addEventListener("pointerenter", engage);
  card.addEventListener("pointermove", track);
  card.addEventListener("pointerleave", release);
  card.addEventListener("focus", onFocus);
  card.addEventListener("blur", onBlur);

  const step = (now: number) => {
    const dt = Math.min(0.032, last ? (now - last) / 1000 : 0.016);
    last = now;
    vel.x += ((target.x - cur.x) * props.stiffness - vel.x * damping) * dt;
    vel.y += ((target.y - cur.y) * props.stiffness - vel.y * damping) * dt;
    vel.hold += ((target.hold - cur.hold) * 300 - vel.hold * 32) * dt;
    cur.x += vel.x * dt;
    cur.y += vel.y * dt;
    cur.hold += vel.hold * dt;

    const rx = reduced.value ? 0 : cur.y * -props.maxTilt;
    const ry = reduced.value ? 0 : cur.x * props.maxTilt;
    const scale = 1 + cur.hold * (props.hoverScale - 1);
    card.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) scale(${scale})`;

    const spread = 14 + cur.hold * 12;
    const blur = 30 + cur.hold * 24;
    const alpha = 0.4 + cur.hold * 0.22;
    card.style.boxShadow = `0 ${spread}px ${blur}px -16px rgba(${sr}, ${sg}, ${sb}, ${alpha}), 0 10px 30px -18px rgba(0,0,0,0.75)`;

    const glare = glareRef.value;
    if (glare) {
      const gx = 50 + cur.x * 42;
      const gy = 50 + cur.y * 42;
      glare.style.backgroundImage = `radial-gradient(64% 40% at ${gx}% ${gy}%, rgba(255,255,255,0.34), rgba(255,255,255,0) 72%)`;
      glare.style.opacity = String(cur.hold);
    }
    frame = requestAnimationFrame(step);
  };
  frame = requestAnimationFrame(step);

  onBeforeUnmount(() => {
    cancelAnimationFrame(frame);
    card.removeEventListener("pointerenter", engage);
    card.removeEventListener("pointermove", track);
    card.removeEventListener("pointerleave", release);
    card.removeEventListener("focus", onFocus);
    card.removeEventListener("blur", onBlur);
  });
});
</script>

<template>
  <div class="stage">
    <a ref="cardRef" href="#" class="card" :style="{ '--ptpc-ring': accent }" @click="onClick">
      <span class="face" aria-hidden="true" :style="{ backgroundImage: faceImage }" />
      <span class="scrim" aria-hidden="true" />
      <span v-if="showGlare && !reduced" ref="glareRef" class="glare" aria-hidden="true" />
      <span class="caption">
        <span class="title">{{ title }}</span>
        <span class="subtitle" :style="{ color: subtitleColor }">{{ subtitle }}</span>
      </span>
    </a>
  </div>
</template>

<style scoped>
.stage {
  display: inline-block;
  perspective: 1000px;
}
.card {
  position: relative;
  display: block;
  width: 260px;
  height: 340px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.75);
}
.card:focus-visible {
  outline: 2px solid var(--ptpc-ring);
  outline-offset: 2px;
}
.face {
  position: absolute;
  inset: 0;
}
.scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgb(6 7 9 / 0.88), rgb(6 7 9 / 0));
}
.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
.caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.title {
  color: #fff;
  font: 600 20px/1.2 system-ui, sans-serif;
}
.subtitle {
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.85;
  font-family: system-ui, sans-serif;
}
</style>

Nearby