"use client";

import { ParticleSprayOnHold, type ParticleShape } from "./index";

export interface DemoProps {
  emitRate?: number;
  size?: number;
  lift?: number;
  accent?: string;
  shape?: ParticleShape;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ emitRate = 25, size = 16, lift = 18, accent = "#38BDF8", shape = "dot" }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <ParticleSprayOnHold emitRate={emitRate} size={size} lift={lift} accent={accent} shape={shape} autoDemo>
        Hold to launch
      </ParticleSprayOnHold>
      <ParticleSprayOnHold emitRate={emitRate} size={size} lift={lift} accent="#FF6A1F" shape="ring">
        Hold for confetti
      </ParticleSprayOnHold>
    </div>
  );
}

1d:T1de4, 1e:T1779d,

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

const props = withDefaults(
  defineProps<{
    emitRate?: number;
    size?: number;
    lift?: number;
    accent?: string;
    shape?: "dot" | "square" | "ring";
    /** Run a scripted hold-and-release cycle shortly after mount, repeating while idle, so the
     * spray is visible without a pointer. A real pointer or key hold cancels it for the session. */
    autoDemo?: boolean;
  }>(),
  { emitRate: 25, size: 16, lift: 18, accent: "#38BDF8", shape: "dot", autoDemo: false },
);

const GRAVITY = 1.65;
const MAX_PARTICLES = 160;
const AUTO_DELAY = 700;
const AUTO_HOLD = 900;
const AUTO_GAP = 1900;

interface Particle {
  id: number;
  x: number;
  y: number;
  vy: number;
  driftX: number;
  spin: number;
  rot: number;
  size: number;
  opacity: number;
  boundsHeight: number;
  shape: "dot" | "square" | "ring";
  brightness: number;
}

const wrapEl = ref<HTMLSpanElement | null>(null);
const buttonEl = ref<HTMLButtonElement | null>(null);
const particles = reactive<Particle[]>([]);
const pressed = ref(false);
const calm = ref(false);

let holding = false;
let interacted = false;
let pos = { x: 0, y: 0 };
let nextId = 0;
let raf = 0;
let cadence = 0;
let last = 0;
let autoFirstTimer = 0;
let autoLoopTimer = 0;

function spawn() {
  const wrap = wrapEl.value;
  if (!wrap || particles.length >= MAX_PARTICLES) return;
  const h = wrap.clientHeight || 160;
  const s = props.size * (0.72 + Math.random() * 0.56);
  particles.push({
    id: nextId++,
    x: pos.x - s / 2 + (Math.random() - 0.5) * props.size * 0.5,
    y: pos.y - s / 2 + (Math.random() - 0.5) * props.size * 0.5,
    vy: -props.lift * (0.7 + Math.random() * 0.5),
    driftX: (Math.random() - 0.5) * 2.4,
    spin: (Math.random() - 0.5) * 260,
    rot: 0,
    size: s,
    opacity: 1,
    boundsHeight: h,
    shape: props.shape,
    brightness: 0.78 + Math.random() * 0.58,
  });
}

function tick(now: number) {
  const dt = now - last;
  last = now;
  if (holding) {
    cadence += dt;
    const interval = 1000 / props.emitRate;
    while (cadence >= interval) {
      cadence -= interval;
      spawn();
    }
  }
  const step = Math.min(dt, 48) / (1000 / 60);
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i]!;
    p.vy += GRAVITY * step;
    p.y += p.vy * step;
    p.x += p.driftX * step;
    p.rot += p.spin * step;
    const fadeZone = p.size * 2.2;
    const remain = p.boundsHeight - p.y;
    const bottomFade = remain < fadeZone ? Math.max(0, remain / fadeZone) : 1;
    const topFade = p.y < fadeZone ? Math.max(0, p.y / fadeZone) : 1;
    p.opacity = Math.min(bottomFade, topFade);
    if (p.y - p.size > p.boundsHeight) particles.splice(i, 1);
  }
  if (holding || particles.length) raf = requestAnimationFrame(tick);
  else raf = 0;
}

function ensureLoop() {
  if (raf) return;
  last = performance.now();
  cadence = 0;
  raf = requestAnimationFrame(tick);
}

function beginHold(localX: number, localY: number) {
  pos = { x: localX, y: localY };
  holding = true;
  pressed.value = true;
  if (!calm.value) {
    spawn();
    ensureLoop();
  }
}
function release() {
  holding = false;
  pressed.value = false;
}
function start(clientX: number, clientY: number) {
  const wrap = wrapEl.value;
  if (!wrap) return;
  interacted = true;
  const rect = wrap.getBoundingClientRect();
  beginHold(clientX - rect.left, clientY - rect.top);
}

function onPointerDown(event: PointerEvent) {
  if (event.button !== 0) return;
  start(event.clientX, event.clientY);
}
function onPointerMove(event: PointerEvent) {
  if (!holding || !wrapEl.value) return;
  const rect = wrapEl.value.getBoundingClientRect();
  pos = { x: event.clientX - rect.left, y: event.clientY - rect.top };
}
function onKeyDown(event: KeyboardEvent) {
  if (event.repeat || (event.key !== "Enter" && event.key !== " ")) return;
  const btn = buttonEl.value;
  if (!btn) return;
  const rect = btn.getBoundingClientRect();
  start(rect.left + rect.width / 2, rect.top + rect.height / 2);
}
function onKeyUp(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") release();
}

onMounted(() => {
  calm.value = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
  if (!props.autoDemo || calm.value) return;
  const cycle = () => {
    const wrap = wrapEl.value;
    if (interacted) {
      window.clearInterval(autoLoopTimer);
      return;
    }
    if (!wrap) return;
    const rect = wrap.getBoundingClientRect();
    beginHold(rect.width / 2, rect.height / 2);
    window.setTimeout(() => {
      if (!interacted) release();
    }, AUTO_HOLD);
  };
  autoFirstTimer = window.setTimeout(cycle, AUTO_DELAY);
  autoLoopTimer = window.setInterval(cycle, AUTO_HOLD + AUTO_GAP);
});
onBeforeUnmount(() => {
  holding = false;
  if (raf) cancelAnimationFrame(raf);
  window.clearTimeout(autoFirstTimer);
  window.clearInterval(autoLoopTimer);
});
</script>

<template>
  <span ref="wrapEl" class="spray-wrap" @pointermove="onPointerMove" @pointerup="release" @pointercancel="release" @pointerleave="release">
    <span aria-hidden="true" class="spray-overlay">
      <span
        v-for="p in particles"
        :key="p.id"
        :class="['spray-particle', `spray-particle--${p.shape}`]"
        :style="{
          width: p.size + 'px',
          height: p.size + 'px',
          transform: `translate(${p.x}px, ${p.y}px) rotate(${p.rot}deg)`,
          opacity: p.opacity,
          filter: `brightness(${p.brightness})`,
          '--spray-accent': accent,
          borderWidth: p.shape === 'ring' ? Math.max(2, p.size * 0.16) + 'px' : undefined,
        }"
      />
    </span>
    <button
      ref="buttonEl"
      type="button"
      class="spray-button"
      :class="{ pressed: pressed, calm: calm }"
      :style="{ '--spray-accent': accent, transform: pressed ? 'scale(0.96)' : 'scale(1)' }"
      @pointerdown="onPointerDown"
      @keydown="onKeyDown"
      @keyup="onKeyUp"
      @blur="release"
    >
      <slot>Hold to launch</slot>
    </button>
  </span>
</template>

<style scoped>
.spray-wrap {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  padding: 104px 64px;
}
.spray-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spray-particle {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}
.spray-particle--dot {
  border-radius: 9999px;
  background: var(--spray-accent);
}
.spray-particle--square {
  border-radius: 26%;
  background: var(--spray-accent);
}
.spray-particle--ring {
  border-radius: 9999px;
  border-style: solid;
  border-color: var(--spray-accent);
  background: transparent;
}
.spray-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 140px;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #f0f2f5;
  color: #12141a;
  font: 600 0.875rem/1.25rem system-ui, sans-serif;
  cursor: pointer;
  outline: none;
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 150ms ease,
    box-shadow 150ms ease;
}
.spray-button:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.75),
    0 0 0 4px #0b0d10;
}
.spray-button.pressed:not(.calm) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spray-accent) 32%, transparent);
}
.spray-button.pressed.calm {
  background: #ffffff;
}
</style>

Nearby