"use client";

import { LaunchOrbitButton } from "./index";

export interface DemoProps {
  accent?: string;
  label?: string;
  dotCount?: number;
  pulse?: boolean;
  flightMs?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", label = "Ship it", dotCount = 7, pulse = true, flightMs = 1800 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <LaunchOrbitButton accent={accent} label={label} dotCount={dotCount} pulse={pulse} flightMs={flightMs} />
      <LaunchOrbitButton accent="#FF6A1F" label="Deploy now" dotCount={dotCount} pulse={pulse} flightMs={flightMs} />
    </div>
  );
}

1d:T1eca, 1e:T1b97e,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    label?: string;
    dotCount?: number;
    pulse?: boolean;
    flightMs?: number;
  }>(),
  { accent: "#38BDF8", label: "Ship it", dotCount: 7, pulse: true, flightMs: 1800 },
);

interface DotSpec {
  x: number;
  y: number;
  dx: number;
  dy: number;
  dur: number;
  delay: number;
}

const DOT_LAYOUT: DotSpec[] = [
  { x: 10, y: 10, dx: 9, dy: -12, dur: 1.9, delay: 0 },
  { x: 22, y: 30, dx: -10, dy: 14, dur: 2.1, delay: 0.09 },
  { x: 16, y: 20, dx: -8, dy: -18, dur: 1.8, delay: 0.18 },
  { x: 30, y: 12, dx: 150, dy: -6, dur: 2.0, delay: 0.05 },
  { x: 38, y: 26, dx: 14, dy: 10, dur: 2.15, delay: 0.24 },
  { x: 12, y: 38, dx: -14, dy: -8, dur: 1.85, delay: 0.12 },
  { x: 46, y: 8, dx: 20, dy: -16, dur: 2.05, delay: 0.03 },
  { x: 26, y: 40, dx: 8, dy: -20, dur: 1.95, delay: 0.3 },
  { x: 8, y: 22, dx: -16, dy: 6, dur: 1.75, delay: 0.15 },
  { x: 34, y: 6, dx: -12, dy: 18, dur: 2.2, delay: 0.27 },
  { x: 44, y: 34, dx: 16, dy: 8, dur: 1.9, delay: 0.06 },
  { x: 18, y: 14, dx: -18, dy: -10, dur: 2.1, delay: 0.21 },
  { x: 52, y: 22, dx: 12, dy: -14, dur: 1.8, delay: 0.33 },
  { x: 14, y: 44, dx: 22, dy: -6, dur: 2.0, delay: 0.09 },
];

const dots = computed(() => DOT_LAYOUT.slice(0, Math.max(0, Math.min(DOT_LAYOUT.length, props.dotCount))));

function hexToRgbTriplet(hex: string): string {
  const clean = hex.replace("#", "");
  const num = Number.parseInt(clean.length === 3 ? clean.replace(/./g, (c) => c + c) : clean, 16);
  return `${(num >> 16) & 255} ${(num >> 8) & 255} ${num & 255}`;
}
function shade(triplet: string, amount: number): string {
  const [r, g, b] = triplet.split(" ").map(Number);
  const toward = amount >= 0 ? 255 : 0;
  const t = Math.abs(amount);
  const mix = (c: number) => Math.round(c + (toward - c) * t);
  return `${mix(r)} ${mix(g)} ${mix(b)}`;
}
const deep = computed(() => shade(hexToRgbTriplet(props.accent), -0.55));

const active = ref(false);
const pressed = ref(false);
const flying = ref(false);
const reduced = ref(false);
let flightTimer: number | undefined;
let media: MediaQueryList | undefined;
const onMediaChange = (event: MediaQueryListEvent) => {
  reduced.value = event.matches;
};

onMounted(() => {
  media = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced.value = media.matches;
  media.addEventListener("change", onMediaChange);
});
onBeforeUnmount(() => {
  window.clearTimeout(flightTimer);
  media?.removeEventListener("change", onMediaChange);
});

function launch() {
  active.value = true;
  if (reduced.value) return;
  flying.value = true;
  window.clearTimeout(flightTimer);
  flightTimer = window.setTimeout(() => {
    flying.value = false;
  }, props.flightMs);
}
function land() {
  active.value = false;
}
function onKeyDown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = true;
}
function onKeyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = false;
}

const cssVars = computed(() => ({
  "--lob-accent": props.accent,
  "--lob-deep": deep.value,
  "--lob-flight-ms": `${props.flightMs}ms`,
}));
</script>

<template>
  <button
    type="button"
    class="launch-orbit-button"
    :class="{ pressed: pressed, active: active }"
    :style="cssVars"
    @mouseenter="launch"
    @mouseleave="land"
    @focus="launch"
    @blur="
      land();
      pressed = false;
    "
    @pointerdown="pressed = true"
    @pointerup="pressed = false"
    @pointercancel="pressed = false"
    @keydown="onKeyDown"
    @keyup="onKeyUp"
  >
    <span v-if="pulse && !reduced" aria-hidden="true" class="ring" :class="{ pressed: pressed }"></span>
    <span class="face">
      <span aria-hidden="true" class="craft" :class="{ flying: flying }">
        <svg width="19" height="19" viewBox="0 0 24 24" fill="none">
          <path d="M12 2 L16.5 12 L12 22 L7.5 12 Z" fill="#EAF2F8" />
          <path d="M12 12 L16.5 12 L14 20 Z" :fill="accent" />
          <circle cx="12" cy="8.4" r="1.6" :fill="accent" />
        </svg>
      </span>
      <span aria-hidden="true" class="fill" :class="{ shifted: reduced && active }"></span>
      <span aria-hidden="true" class="dots">
        <span
          v-for="(dot, i) in dots"
          :key="i"
          class="dot-wrap"
          :style="{
            left: dot.x + 'px',
            top: dot.y + 'px',
            transform: !reduced && active ? `translate(${dot.dx}px, ${dot.dy}px)` : 'translate(0, 0)',
            transitionDelay: (active ? dot.delay : dot.delay * 0.4) + 's',
          }"
        >
          <span
            class="dot"
            :class="{ pulsing: pulse && !reduced }"
            :style="{ animationDuration: dot.dur + 's', animationDelay: dot.delay + 's' }"
          ></span>
        </span>
      </span>
      <span class="label">{{ label }}</span>
    </span>
  </button>
</template>

<style scoped>
.launch-orbit-button {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  border-radius: 9999px;
  outline: none;
  background: none;
  border: none;
  padding: 0;
}
.launch-orbit-button:focus-visible {
  outline: 2px solid var(--lob-accent);
  outline-offset: 4px;
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  border: 1.5px solid var(--lob-accent);
  animation: lob-ring 1.5s ease-out infinite;
}
.ring.pressed {
  animation-name: lob-ring-press;
  animation-duration: 0.55s;
}
@keyframes lob-ring {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(1.45);
    opacity: 0;
  }
}
@keyframes lob-ring-press {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(1.85);
    opacity: 0;
  }
}
.face {
  position: relative;
  z-index: 0;
  display: flex;
  min-width: 180px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.1);
  padding: 0.875rem 1.75rem;
}
.craft {
  position: absolute;
  right: 9px;
  top: 14px;
  z-index: 0;
  transform: rotate(180deg);
}
.craft.flying {
  z-index: 40;
  animation: lob-flight var(--lob-flight-ms) ease-in-out 1;
}
@keyframes lob-flight {
  0% {
    transform: translate(0, 0) rotate(180deg);
  }
  18% {
    transform: translate(-18px, 12px) rotate(150deg);
  }
  42% {
    transform: translate(-52px, -4px) rotate(30deg);
  }
  65% {
    transform: translate(-78px, -22px) rotate(-15deg);
  }
  85% {
    transform: translate(-46px, -16px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.fill {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgb(var(--lob-deep)) 0%, var(--lob-accent) 55%, rgb(var(--lob-deep)) 100%);
  transition: filter 200ms ease;
}
.fill.shifted {
  filter: brightness(1.18);
}
.dots {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.dot-wrap {
  position: absolute;
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dot {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 9999px;
  background: #fff;
  opacity: 0.7;
}
.dot.pulsing {
  animation: lob-dot ease-in-out infinite;
}
@keyframes lob-dot {
  0%,
  100% {
    opacity: 0.95;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.8);
  }
}
.label {
  position: relative;
  z-index: 30;
  color: #fff;
  font: 700 0.875rem/1.25rem system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
  .ring {
    animation: none;
    opacity: 0;
  }
  .craft.flying {
    animation: none;
  }
  .dot.pulsing {
    animation: none;
  }
}
</style>

Nearby