"use client";

import { TiltParallaxTile } from "./index";

export interface DemoProps {
  tilt?: number;
  hoverScale?: number;
  caption?: string;
  showCaption?: boolean;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  tilt = 14,
  hoverScale = 1.08,
  caption = "Autumn field notes",
  showCaption = true,
  accent = "#FF4D8D",
}: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <TiltParallaxTile
        tilt={tilt}
        hoverScale={hoverScale}
        caption={caption}
        showCaption={showCaption}
        accent={accent}
        badge="Vol. 04"
      >
        <span className="text-[11px] font-medium uppercase tracking-wide text-white/70">Field journal</span>
        <span className="text-sm font-semibold text-white">Marsh light before frost</span>
      </TiltParallaxTile>
    </div>
  );
}

1d:T161d, 1e:T13442,

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

const props = withDefaults(
  defineProps<{
    tilt?: number;
    hoverScale?: number;
    caption?: string;
    showCaption?: boolean;
    accent?: string;
  }>(),
  {
    tilt: 14,
    hoverScale: 1.08,
    caption: "Autumn field notes",
    showCaption: true,
    accent: "#FF4D8D",
  },
);

const tileRef = ref<HTMLElement | null>(null);
const rotX = ref(0);
const rotY = ref(0);
const scale = ref(1);
const capX = ref(0);
const capY = ref(0);
const capRotate = ref(0);
const capOpacity = ref(0);

let lastY = 0;
let lastT = 0;
let settleTimer: number | undefined;

function reducedMotion() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

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

function onPointerMove(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  const el = tileRef.value;
  if (!el) return;
  const rect = el.getBoundingClientRect();
  const px = event.clientX - rect.left;
  const py = event.clientY - rect.top;

  if (!reducedMotion()) {
    const nx = px / rect.width - 0.5;
    const ny = py / rect.height - 0.5;
    rotY.value = nx * props.tilt * 2;
    rotX.value = -ny * props.tilt * 2;

    const now = performance.now();
    if (lastT) {
      const dt = now - lastT;
      if (dt > 0) {
        const velocity = ((py - lastY) / dt) * 1000;
        capRotate.value = Math.max(-18, Math.min(18, (velocity / 1000) * 18));
      }
    }
    lastY = py;
    lastT = now;

    window.clearTimeout(settleTimer);
    settleTimer = window.setTimeout(() => {
      capRotate.value = 0;
    }, 140);
  }

  capX.value = px;
  capY.value = py;
}

function onPointerEnter(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  scale.value = props.hoverScale;
  if (props.showCaption) capOpacity.value = 1;
}

function reset() {
  rotX.value = 0;
  rotY.value = 0;
  scale.value = 1;
  capOpacity.value = 0;
  capRotate.value = 0;
  lastT = 0;
}

function onPointerLeave(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  reset();
}

function onFocus() {
  scale.value = props.hoverScale;
}

function onBlur() {
  reset();
}

onBeforeUnmount(() => window.clearTimeout(settleTimer));

const tileStyle = computed<CSSProperties>(() => ({
  transform: `rotateX(${rotX.value}deg) rotateY(${rotY.value}deg) scale(${scale.value})`,
  backgroundImage: `linear-gradient(135deg, ${props.accent} 0%, ${darken(props.accent, 0.45)} 100%), linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 55%)`,
}));

const captionOuterStyle = computed<CSSProperties>(() => ({
  transform: `translate(${capX.value}px, ${capY.value}px)`,
  opacity: capOpacity.value,
}));

const captionInnerStyle = computed<CSSProperties>(() => ({
  transform: `translate(-50%, -140%) rotate(${capRotate.value}deg)`,
}));
</script>

<template>
  <div class="tilt-tile-wrap">
    <div
      ref="tileRef"
      class="tilt-tile"
      tabindex="0"
      role="group"
      :style="tileStyle"
      @pointermove="onPointerMove"
      @pointerenter="onPointerEnter"
      @pointerleave="onPointerLeave"
      @focus="onFocus"
      @blur="onBlur"
    >
      <div class="tilt-tile__badge">Vol. 04</div>
      <div class="tilt-tile__face">
        <span class="tilt-tile__kicker">Field journal</span>
        <span class="tilt-tile__title">Marsh light before frost</span>
      </div>
    </div>
    <div v-if="showCaption" class="tilt-tile__caption" :style="captionOuterStyle" aria-hidden="true">
      <span class="tilt-tile__caption-inner" :style="captionInnerStyle">{{ caption }}</span>
    </div>
  </div>
</template>

<style scoped>
.tilt-tile-wrap {
  position: relative;
  display: inline-block;
  perspective: 800px;
}
.tilt-tile {
  position: relative;
  width: 300px;
  height: 300px;
  max-width: 100%;
  border-radius: 15px;
  overflow: hidden;
  outline: none;
  user-select: none;
  transform-style: preserve-3d;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tilt-tile:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
}
.tilt-tile__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  font: 500 11px/1.2 system-ui, sans-serif;
  transform: translateZ(40px);
}
.tilt-tile__face {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
}
.tilt-tile__kicker {
  font: 500 11px/1.3 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.7);
}
.tilt-tile__title {
  font: 600 14px/1.3 system-ui, sans-serif;
  color: #fff;
}
.tilt-tile__caption {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.tilt-tile__caption-inner {
  display: inline-block;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #fff;
  color: #171717;
  font: 600 10px/1 system-ui, sans-serif;
  transition: transform 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .tilt-tile {
    transition-duration: 150ms;
  }
  .tilt-tile__caption-inner {
    transition-duration: 1ms;
  }
}
</style>

Nearby