animated-tooltip

1"use client";
2 
3import * as React from "react";
4import { useState, useId } from "react";
5import { AnimatePresence, motion, type Variants } from "framer-motion";
6import { cn } from "@/lib/utils";
7 
8/**
9 * Animated Tooltip
10 * Bouncy, playful tooltip shapes with SVG bubbles and spring animations.
11 * Inspired by Codrops' "Tooltip Animations" (originally anime.js), rebuilt
12 * on framer-motion with theme-adaptive colors.
13 */
14 
15export type AnimatedTooltipVariant =
16  | "cora"
17  | "smaug"
18  | "dori"
19  | "gram"
20  | "indis"
21  | "malva"
22  | "sadoc";
23 
24interface VariantConfig {
25  /** Bubble size in px. */
26  width: number;
27  height: number;
28  /** Distance of the bubble above the trigger (CSS `bottom`). */
29  bottom: string;
30  /** transform-origin for the entrance animation. */
31  transformOrigin: string;
32  /** SVG path(s) rendered inside a `0 0 400 300` viewBox. */
33  shape: (fill: string) => React.ReactNode;
34  /** Bubble (base) entrance/exit animation, transitions embedded per state. */
35  base: Variants;
36  /** Inner content entrance/exit animation, transitions embedded per state. */
37  content: Variants;
38  /** Extra styles for the content wrapper. */
39  contentStyle?: React.CSSProperties;
40}
41 
42const EASE_OUT_QUINT: [number, number, number, number] = [0.22, 1, 0.36, 1];
43const EASE_IN: [number, number, number, number] = [0.55, 0, 1, 0.45];
44 
45const VARIANTS: Record<AnimatedTooltipVariant, VariantConfig> = {
46  // Blobby heart — scales up while un-rotating.
47  cora: {
48    width: 232,
49    height: 174,
50    bottom: "calc(100% + 0.5rem)",
51    transformOrigin: "50% 100%",
52    shape: (fill) => (
53      <path
54        d="M 199,21.9 C 152,22.2 109,35.7 78.8,57.4 48,79.1 29,109 29,142 29,172 45.9,201 73.6,222 101,243 140,258 183,260 189,270 200,282 200,282 200,282 211,270 217,260 261,258 299,243 327,222 354,201 371,172 371,142 371,109 352,78.7 321,57 290,35.3 247,21.9 199,21.9 Z"
55        fill={fill}
56      />
57    ),
58    base: {
59      initial: { scale: 0, rotate: -180, opacity: 0 },
60      animate: { scale: 1, rotate: 0, opacity: 1, transition: { duration: 0.6, ease: EASE_OUT_QUINT } },
61      exit: { scale: 0, opacity: 0, transition: { duration: 0.18, ease: EASE_IN } },
62    },
63    content: {
64      initial: { y: 20, opacity: 0 },
65      animate: { y: 0, opacity: 1, transition: { duration: 0.3, delay: 0.25, ease: EASE_OUT_QUINT } },
66      exit: { y: 20, opacity: 0, transition: { duration: 0.1, ease: EASE_IN } },
67    },
68    contentStyle: { marginBottom: "0.75em" },
69  },
70 
71// … truncated