"use client";

import { BouncingPhotoFan } from "./index";

export interface DemoProps {
  count?: number;
  spread?: number;
  stagger?: number;
  pushOnHover?: boolean;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  count = 5,
  spread = 85,
  stagger = 0.06,
  pushOnHover = true,
  accent = "#FF6A1F",
}: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <BouncingPhotoFan
        count={count}
        spread={spread}
        stagger={stagger}
        pushOnHover={pushOnHover}
        accent={accent}
        className="max-w-3xl"
      />
    </div>
  );
}

1d:T1520, 1e:Tff32,

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

const props = withDefaults(
  defineProps<{
    count?: number;
    spread?: number;
    stagger?: number;
    pushOnHover?: boolean;
    accent?: string;
  }>(),
  { count: 5, spread: 85, stagger: 0.06, pushOnHover: true, accent: "#FF6A1F" },
);

const TILE = 200;
const HUES = [205, 15, 145, 340, 45, 190];
const ROTATE_STEP = 7;
const PUSH_RATIO = 0.55;
const RIPPLE_DELAY = 45; // ms

function wobble(i: number): number {
  return Math.sin(i * 12.9898) * 2;
}

const size = computed(() => Math.max(3, Math.min(6, Math.round(props.count))));
const center = computed(() => (size.value - 1) / 2);
const width = computed(() => TILE + (size.value - 1) * props.spread + TILE * 0.4);
const height = computed(() => TILE + 96);

const active = ref<number | null>(null);
const entered = ref(false);
const revealed = ref(false);
const reduceMotion = ref(false);
let entryTimer: ReturnType<typeof window.setTimeout> | undefined;

function armEntrance() {
  entered.value = false;
  window.clearTimeout(entryTimer);
  entryTimer = window.setTimeout(() => {
    entered.value = true;
  }, size.value * props.stagger * 1000 + 550);
}

let mq: MediaQueryList | undefined;
function onMqChange(e: MediaQueryListEvent) {
  reduceMotion.value = e.matches;
}

onMounted(() => {
  mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduceMotion.value = mq.matches;
  mq.addEventListener("change", onMqChange);
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      revealed.value = true;
    });
  });
  armEntrance();
});
onBeforeUnmount(() => {
  window.clearTimeout(entryTimer);
  mq?.removeEventListener("change", onMqChange);
});
watch([size, () => props.stagger], armEntrance);

const tiles = computed(() => {
  return Array.from({ length: size.value }, (_, i) => {
    const offset = i - center.value;
    const restX = offset * props.spread;
    const restRotate = offset * ROTATE_STEP + wobble(i);
    const isActive = props.pushOnHover && active.value === i;
    const isPushed = props.pushOnHover && !reduceMotion.value && active.value !== null && active.value !== i;

    let x = restX;
    let y = 0;
    let rotate = restRotate;
    let scale = revealed.value || reduceMotion.value ? 1 : 0;
    let delayMs = entered.value ? 0 : Math.round(i * props.stagger * 1000);

    if (isActive) {
      rotate = 0;
      y = -18;
      scale = revealed.value || reduceMotion.value ? 1.05 : scale;
    } else if (isPushed && active.value !== null) {
      const dir = i < active.value ? -1 : 1;
      x = restX + dir * props.spread * PUSH_RATIO;
      delayMs = entered.value ? Math.abs(i - active.value) * RIPPLE_DELAY : delayMs;
    }

    const opacity = revealed.value ? 1 : 0;
    const zIndex = isActive ? size.value + 10 : size.value - Math.round(Math.abs(offset));
    const hue = HUES[i % HUES.length];

    return {
      i,
      x,
      y,
      rotate,
      scale,
      opacity,
      hue,
      zIndex,
      isActive,
      delayMs,
      left: width.value / 2 - TILE / 2,
      top: height.value / 2 - TILE / 2,
    };
  });
});

function onEnter(i: number) {
  if (props.pushOnHover) active.value = i;
}
function onLeave(i: number) {
  if (active.value === i) active.value = null;
}
</script>

<template>
  <div class="bpf">
    <div class="bpf__stage" :style="{ width: width + 'px', height: height + 'px' }">
      <button
        v-for="tile in tiles"
        :key="tile.i"
        type="button"
        class="bpf__tile"
        :class="{ 'bpf__tile--reduced': reduceMotion }"
        :aria-label="`Photo ${tile.i + 1}`"
        :style="{
          left: tile.left + 'px',
          top: tile.top + 'px',
          zIndex: tile.zIndex,
          opacity: tile.opacity,
          borderColor: tile.isActive ? accent : 'rgba(255,255,255,0.92)',
          outlineColor: accent,
          background: `linear-gradient(135deg, hsl(${tile.hue} 78% 60%), hsl(${tile.hue} 68% 26%))`,
          transform: `translate(${tile.x}px, ${tile.y}px) rotate(${tile.rotate}deg) scale(${tile.scale})`,
          transitionDelay: `${tile.delayMs}ms, 0ms, ${tile.delayMs}ms`,
        }"
        @pointerenter="onEnter(tile.i)"
        @pointerleave="onLeave(tile.i)"
        @focus="onEnter(tile.i)"
        @blur="onLeave(tile.i)"
      >
        <span class="bpf__num">{{ tile.i + 1 }}</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.bpf {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}
.bpf__stage {
  position: relative;
}
.bpf__tile {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 0;
  border-radius: 30px;
  border-width: 8px;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 22px -8px rgb(0 0 0 / 0.55);
  transition:
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 180ms ease,
    opacity 420ms ease;
}
.bpf__tile--reduced {
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    opacity 300ms ease;
}
.bpf__tile:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}
.bpf__num {
  pointer-events: none;
  user-select: none;
  font-size: 3.5rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.25);
}
</style>

Nearby