"use client";

import { EasingPreviewTile, type EasingPreviewName } from "./index";

export interface DemoProps {
  easing?: EasingPreviewName;
  duration?: number;
  delay?: number;
  mirror?: boolean;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ easing = "circInOut", duration = 1000, delay = 0, mirror = true, accent = "#F5C542" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <EasingPreviewTile easing={easing} duration={duration} delay={delay} mirror={mirror} accent={accent} />
    </div>
  );
}

1d:T2798, 1e:T22cce,

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

type EasingName = "linear" | "easeIn" | "easeOut" | "easeInOut" | "circInOut" | "backOut" | "anticipate";

const props = withDefaults(
  defineProps<{
    easing?: EasingName;
    duration?: number;
    delay?: number;
    mirror?: boolean;
    accent?: string;
  }>(),
  { easing: "circInOut", duration: 1000, delay: 0, mirror: true, accent: "#F5C542" },
);

/** Full tile size in px; the growing body scales up to this inside a fixed hit area. */
const TILE = 96;
/** Scale the body rests at before a run starts, and returns to on the last hold. */
const MIN_SCALE = 0.18;
/** Curve plot viewBox is a square this many units on a side, inset so the stroke never touches the edge. */
const VIEW = 100;
const INSET = 9;
/** Samples used to trace the curve and to measure how far it over/undershoots [0, 1]. */
const SAMPLES = 48;
/** Pause at each end of a mirrored run, in ms. */
const HOLD_MS = 260;

const clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n);
const xAt = (t: number) => INSET + t * (VIEW - INSET * 2);
const yAt = (v: number, lo: number, hi: number) => INSET + (1 - (v - lo) / (hi - lo)) * (VIEW - INSET * 2);

function cubicBezier(x1: number, y1: number, x2: number, y2: number) {
  if (x1 === y1 && x2 === y2) return (t: number) => t;
  const calc = (t: number, a1: number, a2: number) => (((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t + 3 * a1) * t;
  const solveT = (x: number) => {
    let lo = 0;
    let hi = 1;
    let t = x;
    for (let i = 0; i < 12; i++) {
      const cx = calc(t, x1, x2) - x;
      if (Math.abs(cx) < 1e-7) break;
      if (cx > 0) hi = t;
      else lo = t;
      t = (lo + hi) / 2;
    }
    return t;
  };
  return (t: number) => (t === 0 || t === 1 ? t : calc(solveT(t), y1, y2));
}
const reverseEasing = (fn: (t: number) => number) => (p: number) => 1 - fn(1 - p);
const mirrorEasing = (fn: (t: number) => number) => (p: number) => (p <= 0.5 ? fn(2 * p) / 2 : (2 - fn(2 * (1 - p))) / 2);

const linear = (t: number) => t;
const easeIn = cubicBezier(0.42, 0, 1, 1);
const easeOut = cubicBezier(0, 0, 0.58, 1);
const easeInOut = cubicBezier(0.42, 0, 0.58, 1);
const circIn = (p: number) => 1 - Math.sin(Math.acos(clamp01(p)));
const circInOut = mirrorEasing(circIn);
const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
const backIn = reverseEasing(backOut);
const anticipate = (pIn: number) => {
  let p = pIn;
  if (p >= 1) return 1;
  p *= 2;
  return p < 1 ? 0.5 * backIn(p) : 0.5 * (2 - 2 ** (-10 * (p - 1)));
};
const EASINGS: Record<EasingName, (t: number) => number> = { linear, easeIn, easeOut, easeInOut, circInOut, backOut, anticipate };

/** How far a curve strays outside [0, 1], with a little breathing room so peaks are not on the edge. */
function sampleRange(fn: (t: number) => number): [number, number] {
  let lo = 0;
  let hi = 1;
  for (let i = 0; i <= SAMPLES; i++) {
    const v = fn(i / SAMPLES);
    if (v < lo) lo = v;
    if (v > hi) hi = v;
  }
  const pad = Math.max((hi - lo) * 0.14, 0.06);
  return [lo - pad, hi + pad];
}

const range = computed<[number, number]>(() => sampleRange(EASINGS[props.easing]));
const mid = computed(() => yAt(0.5, range.value[0], range.value[1]));
const lineStart = computed(() => ({ x: xAt(0), y: yAt(0, range.value[0], range.value[1]) }));
const lineEnd = computed(() => ({ x: xAt(1), y: yAt(1, range.value[0], range.value[1]) }));
const restPoint = computed(() => ({ x: xAt(0), y: yAt(0, range.value[0], range.value[1]) }));
const points = computed(() => {
  const fn = EASINGS[props.easing];
  const [lo, hi] = range.value;
  let out = "";
  for (let i = 0; i <= SAMPLES; i++) {
    const t = i / SAMPLES;
    out += `${xAt(t).toFixed(2)},${yAt(fn(t), lo, hi).toFixed(2)} `;
  }
  return out.trim();
});
const captionText = computed(() => `${props.easing} · ${props.duration}ms${props.delay ? ` · +${props.delay}ms delay` : ""}`);

const bodyEl = ref<HTMLSpanElement | null>(null);
const railEl = ref<HTMLSpanElement | null>(null);
const markerEl = ref<SVGCircleElement | null>(null);
const svgEl = ref<SVGSVGElement | null>(null);
const captionEl = ref<HTMLParagraphElement | null>(null);
let hovering = false;
let raf = 0;
let reduced = false;

function setCaption() {
  if (captionEl.value && !hovering) captionEl.value.textContent = captionText.value;
}

function paint(rawT: number, eased: number) {
  const scale = Math.max(0.02, MIN_SCALE + eased * (1 - MIN_SCALE));
  if (bodyEl.value) bodyEl.value.style.transform = `scale(${scale})`;
  if (railEl.value) railEl.value.style.width = `${clamp01(rawT) * 100}%`;
  if (markerEl.value) {
    const [lo, hi] = range.value;
    markerEl.value.setAttribute("cx", xAt(rawT).toFixed(2));
    markerEl.value.setAttribute("cy", yAt(eased, lo, hi).toFixed(2));
  }
}

function start() {
  cancelAnimationFrame(raf);
  const fn = EASINGS[props.easing];
  if (reduced) {
    paint(1, fn(1));
    return;
  }
  const beginAt = performance.now();
  const tick = (now: number) => {
    const elapsed = now - beginAt;
    let rawT: number;
    if (elapsed < props.delay) {
      rawT = 0;
    } else {
      const local = elapsed - props.delay;
      if (props.mirror) {
        const cycle = props.duration * 2 + HOLD_MS * 2;
        const p = ((local % cycle) + cycle) % cycle;
        if (p < props.duration) rawT = p / props.duration;
        else if (p < props.duration + HOLD_MS) rawT = 1;
        else if (p < props.duration * 2 + HOLD_MS) rawT = 1 - (p - props.duration - HOLD_MS) / props.duration;
        else rawT = 0;
      } else {
        rawT = clamp01(local / props.duration);
      }
    }
    paint(rawT, fn(rawT));
    if (!props.mirror && elapsed >= props.delay + props.duration) return;
    raf = requestAnimationFrame(tick);
  };
  raf = requestAnimationFrame(tick);
}

onMounted(() => {
  reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  setCaption();
  start();
});
onUnmounted(() => cancelAnimationFrame(raf));

watch(
  () => [props.easing, props.duration, props.delay, props.mirror],
  () => {
    setCaption();
    start();
  },
);

function replay() {
  start();
}

function onPlotMove(event: PointerEvent) {
  const svg = svgEl.value;
  if (!svg || !captionEl.value) return;
  const rect = svg.getBoundingClientRect();
  const insetPx = (INSET / VIEW) * rect.width;
  const span = Math.max(rect.width - insetPx * 2, 1);
  const t = clamp01((event.clientX - rect.left - insetPx) / span);
  hovering = true;
  captionEl.value.textContent = `at ${Math.round(t * 100)}% time → ${Math.round(EASINGS[props.easing](t) * 100)}% value`;
}
function onPlotLeave() {
  hovering = false;
  setCaption();
}
</script>

<template>
  <div class="ept">
    <div class="ept__row">
      <div class="ept__col">
        <button
          type="button"
          class="ept__tile"
          :style="{ width: TILE + 'px', height: TILE + 'px' }"
          aria-label="Replay the easing preview"
          @click="replay"
        >
          <span
            ref="bodyEl"
            class="ept__body"
            aria-hidden="true"
            :style="{ width: TILE + 'px', height: TILE + 'px', background: accent, transform: `scale(${MIN_SCALE})` }"
          ></span>
        </button>
        <span class="ept__railTrack" :style="{ width: TILE + 'px' }">
          <span ref="railEl" class="ept__railFill" :style="{ width: '0%', background: accent }"></span>
        </span>
      </div>

      <svg ref="svgEl" :viewBox="`0 0 ${VIEW} ${VIEW}`" class="ept__plot" aria-hidden="true" @pointermove="onPlotMove" @pointerleave="onPlotLeave">
        <line :x1="INSET" :x2="VIEW - INSET" :y1="mid" :y2="mid" class="ept__guide" />
        <line :x1="xAt(0.5)" :x2="xAt(0.5)" :y1="INSET" :y2="VIEW - INSET" class="ept__guide" />
        <line :x1="lineStart.x" :y1="lineStart.y" :x2="lineEnd.x" :y2="lineEnd.y" class="ept__diagonal" />
        <polyline :points="points" class="ept__curve" :style="{ stroke: accent }" />
        <circle ref="markerEl" class="ept__marker" r="3.2" :cx="restPoint.x" :cy="restPoint.y" :style="{ fill: accent }" />
      </svg>
    </div>

    <p ref="captionEl" class="ept__caption">{{ captionText }}</p>
  </div>
</template>

<style scoped>
.ept {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}
.ept__row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.ept__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
.ept__tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: none;
  cursor: pointer;
  outline: none;
}
.ept__tile:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentcolor 60%, transparent);
  outline-offset: 2px;
}
.ept__body {
  display: block;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -10px 14px -8px rgba(0, 0, 0, 0.22);
}
.ept__railTrack {
  display: block;
  height: 3px;
  border-radius: 9999px;
  overflow: hidden;
  background: color-mix(in srgb, currentcolor 14%, transparent);
}
.ept__railFill {
  display: block;
  height: 100%;
  border-radius: 9999px;
}
.ept__plot {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentcolor 10%, transparent);
  background: color-mix(in srgb, currentcolor 2%, transparent);
}
.ept__guide {
  stroke: currentcolor;
  stroke-opacity: 0.12;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ept__diagonal {
  stroke: currentcolor;
  stroke-opacity: 0.3;
  stroke-width: 1;
  stroke-dasharray: 1 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ept__curve {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ept__caption {
  margin: 0;
  font:
    500 10px/1 ui-monospace,
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: currentcolor;
  opacity: 0.45;
}
</style>

Nearby