"use client";

import { ClickRippleBurst, type ClickEffectVariant } from "./index";

export interface DemoProps {
  variant?: ClickEffectVariant;
  color?: string;
  size?: number;
  duration?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ variant = "ring", color = "#F5C542", size = 100, duration = 400 }: DemoProps) {
  return (
    <ClickRippleBurst
      variant={variant}
      color={color}
      size={size}
      duration={duration}
      className="flex h-72 w-full max-w-md select-none flex-col items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-6 text-center"
    >
      <span className="text-sm font-medium text-white/70">Click or tap anywhere</span>
      <span className="text-xs text-white/40">Each release spawns one effect at the pointer</span>
    </ClickRippleBurst>
  );
}

1d:T1a60, 1e:T14dd1,

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

type Variant = "ripple" | "ring" | "crosshair" | "burst" | "particles";

const props = withDefaults(
  defineProps<{
    variant?: Variant;
    color?: string;
    size?: number;
    duration?: number;
  }>(),
  { variant: "ring", color: "#F5C542", size: 100, duration: 400 },
);

interface Part {
  key: number;
  x0: number;
  y0: number;
  x1: number;
  y1: number;
  rot: number;
  w: number;
  h: number;
  radius: number;
  scaleEnd: number;
}

interface Spawn {
  id: number;
  x: number;
  y: number;
  parts: Part[];
}

const spawns = ref<Spawn[]>([]);
let nextId = 0;
let partKey = 0;

function pseudoRandom(seed: number) {
  const v = Math.sin(seed) * 10000;
  return v - Math.floor(v);
}

function prefersReducedMotion() {
  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

function buildParts(variant: Variant, size: number): Part[] {
  if (variant === "crosshair" || variant === "burst") {
    const count = variant === "crosshair" ? 4 : 8;
    const length = variant === "crosshair" ? size * 0.22 : size * 0.15;
    const thickness = variant === "crosshair" ? Math.max(2, size * 0.035) : Math.max(1.5, size * 0.025);
    const startR = size * 0.12;
    const endR = size * 0.46;
    return Array.from({ length: count }, (_, i) => {
      const angle = (i / count) * Math.PI * 2 - Math.PI / 2;
      const dirX = Math.cos(angle);
      const dirY = Math.sin(angle);
      return {
        key: partKey++,
        x0: dirX * startR,
        y0: dirY * startR,
        x1: dirX * endR,
        y1: dirY * endR,
        rot: (angle * 180) / Math.PI + 90,
        w: thickness,
        h: length,
        radius: thickness,
        scaleEnd: variant === "crosshair" ? 0.5 : 0.7,
      };
    });
  }
  if (variant === "particles") {
    const count = 7;
    const dot = Math.max(3, size * 0.05);
    return Array.from({ length: count }, (_, i) => {
      const jitter = pseudoRandom(i * 13.37 + 1);
      const angle = (i / count) * Math.PI * 2 + (jitter - 0.5) * 0.9;
      const dist = size * (0.3 + pseudoRandom(i * 7.77 + 2) * 0.22);
      const dirX = Math.cos(angle);
      const dirY = Math.sin(angle);
      return {
        key: partKey++,
        x0: 0,
        y0: 0,
        x1: dirX * dist,
        y1: dirY * dist,
        rot: 0,
        w: dot,
        h: dot,
        radius: 9999,
        scaleEnd: 0.4,
      };
    });
  }
  return [];
}

function press(event: MouseEvent) {
  if (prefersReducedMotion()) return;
  const el = event.currentTarget as HTMLElement;
  const rect = el.getBoundingClientRect();
  const id = nextId++;
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  const parts = buildParts(props.variant, props.size);
  spawns.value.push({ id, x, y, parts });
  window.setTimeout(() => {
    spawns.value = spawns.value.filter((s) => s.id !== id);
  }, props.duration);
}
</script>

<template>
  <div class="crb" :style="{ '--crb-color': color, '--crb-duration': duration + 'ms' }" @click="press">
    <slot />
    <span class="crb__layer" aria-hidden="true">
      <span
        v-for="spawn in spawns"
        :key="spawn.id"
        class="crb__spawn"
        :style="{ left: spawn.x + 'px', top: spawn.y + 'px', width: size + 'px', height: size + 'px' }"
      >
        <template v-if="variant === 'ring'">
          <span class="crb__ring-wrap">
            <span
              class="crb__ring"
              :style="{
                '--crb-start': size * 0.16 + 'px',
                '--crb-end': size + 'px',
                '--crb-bw0': Math.max(2.5, size * 0.06) + 'px',
              }"
            />
          </span>
        </template>
        <template v-else-if="variant === 'ripple'">
          <span class="crb__ripple" :style="{ inset: size * 0.14 + 'px' }" />
        </template>
        <template v-else>
          <span
            v-for="part in spawn.parts"
            :key="part.key"
            class="crb__part"
            :class="{ 'crb__part--dot': variant === 'particles' }"
            :style="{
              width: part.w + 'px',
              height: part.h + 'px',
              marginLeft: -part.w / 2 + 'px',
              marginTop: -part.h / 2 + 'px',
              borderRadius: (variant === 'particles' ? 9999 : part.radius) + 'px',
              '--crb-x0': part.x0 + 'px',
              '--crb-y0': part.y0 + 'px',
              '--crb-x1': part.x1 + 'px',
              '--crb-y1': part.y1 + 'px',
              '--crb-rot': part.rot + 'deg',
              '--crb-scale-end': part.scaleEnd,
            }"
          />
        </template>
      </span>
    </span>
  </div>
</template>

<style scoped>
.crb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
}
.crb__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.crb__spawn {
  position: absolute;
  transform: translate(-50%, -50%);
}
.crb__ring-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  animation: crb-fade var(--crb-duration) ease-out forwards;
}
.crb__ring {
  width: var(--crb-start);
  height: var(--crb-start);
  border-radius: 9999px;
  border-style: solid;
  border-width: var(--crb-bw0);
  border-color: var(--crb-color);
  animation: crb-grow var(--crb-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.crb__ripple {
  position: absolute;
  border-radius: 9999px;
  background: var(--crb-color);
  opacity: 0.5;
  transform: scale(0.15);
  animation: crb-ripple var(--crb-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.crb__part {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--crb-color);
  opacity: 1;
  transform: translate(var(--crb-x0), var(--crb-y0)) rotate(var(--crb-rot)) scaleY(1);
  animation: crb-part var(--crb-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.crb__part--dot {
  transform: translate(var(--crb-x0), var(--crb-y0)) scale(1);
  animation-name: crb-dot;
}
@keyframes crb-fade {
  to {
    opacity: 0;
  }
}
@keyframes crb-grow {
  to {
    width: var(--crb-end);
    height: var(--crb-end);
    border-width: 1px;
  }
}
@keyframes crb-ripple {
  to {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes crb-part {
  to {
    transform: translate(var(--crb-x1), var(--crb-y1)) rotate(var(--crb-rot)) scaleY(var(--crb-scale-end));
    opacity: 0;
  }
}
@keyframes crb-dot {
  to {
    transform: translate(var(--crb-x1), var(--crb-y1)) scale(var(--crb-scale-end));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crb__ring-wrap,
  .crb__ring,
  .crb__ripple,
  .crb__part {
    animation-duration: 1ms;
  }
}
</style>

Nearby