color-flair-button

1/**
2 * A pill button with a directional color flair: stacked concentric circles bloom from
3 * the cursor's entry point (GSAP staggered scale), trail it with per-circle lag, and
4 * peel back inner→outer on exit.
5 */
6"use client";
7 
8import { useRef } from "react";
9import { useGSAP } from "@gsap/react";
10import gsap from "gsap";
11 
12gsap.registerPlugin(useGSAP);
13 
14const FLAIRS = [
15  { color: "#A5A6F6", size: "210%" }, // purple
16  { color: "#7BD88F", size: "158%" }, // green
17  { color: "#FFD36E", size: "112%" }, // yellow
18  { color: "#FF9BB3", size: "70%" }, // coral
19];
20 
21const ColorFlairButton = () => {
22  const buttonRef = useRef<HTMLAnchorElement>(null);
23 
24  useGSAP(
25    () => {
26      const button = buttonRef.current;
27      if (!button) return;
28 
29      const flairs = Array.from(
30        button.querySelectorAll<HTMLElement>(".flair"),
31      );
32 
33      gsap.set(flairs, { xPercent: -50, yPercent: -50, scale: 0 });
34 
35      const move = flairs.map((f, i) => {
36        const duration = 0.65 - i * 0.12; // 0.65 → 0.29 across the stack
37        return {
38          x: gsap.quickTo(f, "x", { duration, ease: "power3" }),
39          y: gsap.quickTo(f, "y", { duration, ease: "power3" }),
40          xSet: gsap.quickSetter(f, "x", "px"),
41          ySet: gsap.quickSetter(f, "y", "px"),
42        };
43      });
44 
45      const getXY = (e: MouseEvent) => {
46        const { left, top } = button.getBoundingClientRect();
47        return { x: e.clientX - left, y: e.clientY - top };
48      };
49 
50      const onEnter = (e: MouseEvent) => {
51        const { x, y } = getXY(e);
52        move.forEach((m) => {
53          m.xSet(x); // teleport every circle to the entry point...
54          m.ySet(y);
55        });
56        gsap.to(flairs, {
57          scale: 1,
58          duration: 0.4,
59          ease: "power3.out",
60          stagger: 0.08,
61          overwrite: "auto",
62        });
63      };
64 
65      const onMove = (e: MouseEvent) => {
66        const { x, y } = getXY(e);
67        move.forEach((m) => {
68          m.x(x);
69          m.y(y);
70        });
71      };
72 
73      const onLeave = (e: MouseEvent) => {
74        const { x, y } = getXY(e);
75        move.forEach((m) => {
76          m.x(x);
77          m.y(y);
78        });
79        gsap.to(flairs, {
80          scale: 0,
81          duration: 0.35,
82          ease: "power3.out",
83          stagger: { each: 0.07, from: "end" },
84          overwrite: "auto",
85        });
86      };
87 
88      button.addEventListener("mouseenter", onEnter);
89      button.addEventListener("mousemove", onMove);
90// … truncated