"use client";

import { InterruptibleHoverSwell } from "./index";

export interface DemoProps {
  stageOneScale?: number;
  peakScale?: number;
  duration?: number;
  accent?: string;
  showValue?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ stageOneScale = 1.1, peakScale = 1.6, duration = 0.5, accent = "#7C5CFF", showValue = true }: DemoProps) {
  return (
    <div className="flex items-center justify-center p-20">
      <InterruptibleHoverSwell stageOneScale={stageOneScale} peakScale={peakScale} duration={duration} accent={accent} showValue={showValue} />
    </div>
  );
}

1d:T130e, 1e:Ted3a,

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

const props = withDefaults(
  defineProps<{
    stageOneScale?: number;
    peakScale?: number;
    duration?: number;
    accent?: string;
    showValue?: boolean;
  }>(),
  { stageOneScale: 1.1, peakScale: 1.6, duration: 0.5, accent: "#7C5CFF", showValue: true },
);

const STAGE_ONE_SHARE = 0.32;
const RETURN_FACTOR = 0.42;
const REDUCED_SECONDS = 0.12;
const TOUCH_FOCUS_GUARD_MS = 400;

type Phase = "rest" | "stage-1" | "stage-2" | "return";
type Ease = (t: number) => number;

const STAGE_TEXT: Record<Phase, string> = { rest: "Rest", "stage-1": "Stage 1", "stage-2": "Stage 2", return: "Return" };

/** Quick decelerating lift. */
const easeStageOne: Ease = (t) => 1 - Math.pow(1 - t, 4);
/** Slower, weightier push, easing in then settling out. */
const easeStageTwo: Ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
/** Short settle back to rest. */
const easeReturn: Ease = (t) => 1 - Math.pow(1 - t, 3);

const scale = ref(1);
const phase = ref<Phase>("rest");
const reduced = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;

let raf = 0;
let touchGuard = false;
let touchGuardTimer: number | undefined;

function stopTween() {
  if (raf) cancelAnimationFrame(raf);
  raf = 0;
}

/** Always reads scale.value as the starting point, so a new run picks up from wherever the live value is. */
function tweenScale(to: number, seconds: number, ease: Ease, onDone?: () => void) {
  stopTween();
  const from = scale.value;
  const start = performance.now();
  const durationMs = Math.max(seconds, 0.001) * 1000;
  const step = (now: number) => {
    const t = Math.min(1, (now - start) / durationMs);
    scale.value = from + (to - from) * ease(t);
    if (t < 1) {
      raf = requestAnimationFrame(step);
    } else {
      raf = 0;
      onDone?.();
    }
  };
  raf = requestAnimationFrame(step);
}

function runForward(onSettled?: () => void) {
  const target = Math.max(props.peakScale, props.stageOneScale);
  if (reduced) {
    phase.value = "stage-2";
    tweenScale(target, REDUCED_SECONDS, easeStageOne, onSettled);
    return;
  }
  phase.value = "stage-1";
  tweenScale(props.stageOneScale, props.duration * STAGE_ONE_SHARE, easeStageOne, () => {
    phase.value = "stage-2";
    tweenScale(target, props.duration * (1 - STAGE_ONE_SHARE), easeStageTwo, onSettled);
  });
}

function runReturn() {
  phase.value = "return";
  tweenScale(1, reduced ? REDUCED_SECONDS : props.duration * RETURN_FACTOR, easeReturn, () => {
    phase.value = "rest";
  });
}

function onPointerEnter(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  runForward();
}
function onPointerLeave(event: PointerEvent) {
  if (event.pointerType === "touch") return;
  runReturn();
}
function onPointerDownTile(event: PointerEvent) {
  if (event.pointerType !== "touch") return;
  touchGuard = true;
  window.clearTimeout(touchGuardTimer);
  touchGuardTimer = window.setTimeout(() => {
    touchGuard = false;
  }, TOUCH_FOCUS_GUARD_MS);
  runForward(runReturn);
}
function onFocusTile() {
  if (touchGuard) return;
  runForward();
}
function onBlurTile() {
  if (touchGuard) return;
  runReturn();
}

onBeforeUnmount(() => {
  stopTween();
  window.clearTimeout(touchGuardTimer);
});
</script>

<template>
  <div class="swell-wrap">
    <button
      type="button"
      class="swell-tile"
      aria-label="Swell tile"
      :style="{ transform: `scale(${scale})`, background: accent }"
      @pointerenter="onPointerEnter"
      @pointerleave="onPointerLeave"
      @pointerdown="onPointerDownTile"
      @focus="onFocusTile"
      @blur="onBlurTile"
    ></button>
    <div v-if="showValue" class="swell-readout">
      <span class="swell-readout__value">{{ scale.toFixed(2) }}×</span>
      <span class="swell-readout__stage">{{ STAGE_TEXT[phase] }}</span>
    </div>
  </div>
</template>

<style scoped>
.swell-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}
.swell-tile {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
}
.swell-tile:focus-visible {
  box-shadow: 0 0 0 2px transparent, 0 0 0 4px color-mix(in srgb, currentColor 40%, transparent);
}
.swell-readout {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 11px;
  line-height: 1;
}
.swell-readout__value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: color-mix(in srgb, currentColor 45%, transparent);
}
.swell-readout__stage {
  min-width: 54px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: color-mix(in srgb, currentColor 35%, transparent);
}
</style>

Nearby