"use client";

import { OrbitingAvatarIntro } from "./index";

export interface DemoProps {
  count?: number;
  stageSize?: number;
  orbitSeconds?: number;
  tileSize?: number;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ count = 9, stageSize = 320, orbitSeconds = 30, tileSize = 60, accent = "#F5C542" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <OrbitingAvatarIntro count={count} stageSize={stageSize} orbitSeconds={orbitSeconds} tileSize={tileSize} accent={accent} />
    </div>
  );
}

1d:T1fae, 1e:T16edf,

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

const props = withDefaults(
  defineProps<{
    count?: number;
    stageSize?: number;
    orbitSeconds?: number;
    tileSize?: number;
    accent?: string;
  }>(),
  { count: 9, stageSize: 320, orbitSeconds: 30, tileSize: 60, accent: "#F5C542" },
);

interface Person {
  name: string;
  initials: string;
  from: string;
  to: string;
  angle: number;
}

const NAMES = [
  "Mara Chen",
  "Owen Vance",
  "Priya Nair",
  "Diego Soto",
  "Lena Fischer",
  "Kwame Boateng",
  "Ines Duarte",
  "Sana Malik",
  "Theo Bergman",
  "Alia Novak",
  "Rafael Costa",
  "Yuki Tanaka",
];
const PALETTE: [string, string][] = [
  ["#5B7FDE", "#1C2A4A"],
  ["#4FB286", "#123726"],
  ["#E0975A", "#4A2A12"],
  ["#D9668B", "#421C2C"],
  ["#63A8C9", "#12333F"],
  ["#A98BDB", "#2C1F49"],
  ["#C9A24C", "#3A2C0E"],
  ["#7FA6A0", "#1E322F"],
];

function initialsOf(name: string): string {
  const parts = name.split(" ");
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

type Phase = "piled" | "lift" | "fan" | "orbit";

const n = computed(() => Math.max(4, Math.min(12, Math.round(props.count))));
const radius = computed(() => Math.max(0, props.stageSize / 2 - props.tileSize / 2 - 10));
const liftPx = computed(() => Math.max(14, props.tileSize * 0.22));
const people = computed<Person[]>(() =>
  Array.from({ length: n.value }, (_, i) => {
    const name = NAMES[i % NAMES.length];
    const [from, to] = PALETTE[i % PALETTE.length];
    return { name, initials: initialsOf(name), from, to, angle: (360 / n.value) * i - 90 };
  }),
);

const phase = ref<Phase>("piled");
const hovered = ref<number | null>(null);
const reduced = ref(false);
let liftTimer: number | undefined;

const placed = computed(() => reduced.value || phase.value === "fan" || phase.value === "orbit");
const spinning = computed(() => phase.value === "orbit" && !reduced.value);

function scheduleIntro() {
  if (liftTimer !== undefined) window.clearTimeout(liftTimer);
  if (reduced.value) {
    phase.value = "orbit";
    return;
  }
  phase.value = "piled";
  liftTimer = window.setTimeout(() => {
    phase.value = "lift";
  }, 160);
}

function onGroupTransitionEnd(event: TransitionEvent) {
  if (event.propertyName !== "transform") return;
  if (phase.value === "lift") phase.value = "fan";
}

function onLeadRadialTransitionEnd(event: TransitionEvent) {
  if (event.propertyName !== "transform") return;
  if (phase.value === "fan") phase.value = "orbit";
}

function setHovered(i: number) {
  hovered.value = i;
}
function clearHovered(i: number) {
  if (hovered.value === i) hovered.value = null;
}

onMounted(() => {
  reduced.value = !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  scheduleIntro();
});

onBeforeUnmount(() => {
  if (liftTimer !== undefined) window.clearTimeout(liftTimer);
});
</script>

<template>
  <div
    class="obai"
    :style="{
      width: stageSize + 'px',
      height: stageSize + 'px',
      '--obai-radius': radius + 'px',
      '--obai-lift': liftPx + 'px',
      '--obai-duration': orbitSeconds + 's',
    }"
  >
    <div class="obai-group" :class="{ 'obai-lifted': phase === 'lift' }" @transitionend="onGroupTransitionEnd">
      <div
        v-for="(person, i) in people"
        :key="person.name"
        class="obai-anchor"
        :style="{ zIndex: hovered === i ? 40 : n - i }"
      >
        <div class="obai-arm-base" :style="{ transform: `rotate(${person.angle}deg)` }">
          <div class="obai-arm-spin" :class="{ 'obai-spinning': spinning }">
            <div
              class="obai-radial"
              :class="{ 'obai-placed': placed, 'obai-reduced': reduced }"
              @transitionend="i === 0 ? onLeadRadialTransitionEnd($event) : undefined"
            >
              <div class="obai-counter-base" :style="{ transform: `rotate(${-person.angle}deg)` }">
                <div class="obai-counter-spin" :class="{ 'obai-spinning': spinning }">
                  <button
                    type="button"
                    class="obai-avatar"
                    :class="{ 'obai-lead': i === 0, 'obai-placed': placed, 'obai-reduced': reduced, 'obai-hovered': hovered === i }"
                    :aria-label="person.name"
                    :style="{
                      width: tileSize + 'px',
                      height: tileSize + 'px',
                      marginLeft: -tileSize / 2 + 'px',
                      marginTop: -tileSize / 2 + 'px',
                      background: `linear-gradient(135deg, ${person.from}, ${person.to})`,
                      borderWidth: i === 0 ? '1.5px' : '1px',
                      borderColor: i === 0 ? accent : 'rgba(148,157,171,0.55)',
                    }"
                    @mouseenter="setHovered(i)"
                    @mouseleave="clearHovered(i)"
                    @focus="setHovered(i)"
                    @blur="clearHovered(i)"
                  >
                    {{ person.initials }}
                    <span
                      class="obai-chip"
                      aria-hidden="true"
                      :style="{ color: accent, borderColor: `color-mix(in srgb, ${accent} 55%, transparent)` }"
                      >{{ person.name }}</span
                    >
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.obai {
  position: relative;
  margin: 0 auto;
}
.obai-group {
  position: absolute;
  inset: 0;
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.obai-group.obai-lifted {
  transform: translateY(calc(-1 * var(--obai-lift)));
}
.obai-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.obai-arm-base,
.obai-counter-base,
.obai-arm-spin,
.obai-counter-spin,
.obai-radial {
  width: 0;
  height: 0;
}
.obai-arm-spin.obai-spinning {
  animation: obai-spin var(--obai-duration) linear infinite;
}
.obai-counter-spin.obai-spinning {
  animation: obai-spin-rev var(--obai-duration) linear infinite;
}
.obai-radial {
  transform: translateX(0);
  transition: transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.obai-radial.obai-placed {
  transform: translateX(var(--obai-radius));
}
.obai-radial.obai-reduced {
  transition: none;
}
.obai-avatar {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: solid;
  color: rgba(255, 255, 255, 0.95);
  font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 480ms cubic-bezier(0.22, 0.8, 0.24, 1),
    transform 160ms ease;
  outline: none;
}
.obai-avatar.obai-lead {
  opacity: 1;
}
.obai-avatar.obai-placed {
  opacity: 1;
}
.obai-avatar.obai-reduced {
  transition: transform 160ms ease;
}
.obai-avatar.obai-hovered {
  transform: scale(1.08);
}
.obai-avatar:focus-visible {
  box-shadow:
    0 0 0 2px #0b0d10,
    0 0 0 4px rgba(255, 255, 255, 0.7);
}
.obai-chip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(11, 13, 16, 0.94);
  border: 1px solid;
  font: 500 11px/1 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.obai-avatar.obai-hovered .obai-chip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
@keyframes obai-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes obai-spin-rev {
  to {
    transform: rotate(-360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .obai-group {
    transition: none !important;
  }
  .obai-radial {
    transition: none !important;
  }
  .obai-avatar {
    transition: transform 160ms ease !important;
  }
  .obai-arm-spin,
  .obai-counter-spin {
    animation: none !important;
  }
}
</style>

Nearby