Heartbeat Animation

1"use client";
2 
3import { motion, useReducedMotion, type HTMLMotionProps } from "motion/react";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const heartbeatScale = [1, 1.24, 0.93, 1.19, 0.96, 1, 1];
9const heartbeatLift = ["0%", "-4.2%", "1.1%", "-3.2%", "0.7%", "0%", "0%"];
10const heartbeatRotate = [0, -1.15, 0.62, -0.85, 0.34, 0, 0];
11const heartbeatTimes = [0, 0.055, 0.13, 0.23, 0.34, 0.5, 1];
12const maxHeartbeatLift = Math.max(...heartbeatScale) - 1;
13const heartbeatProjection = heartbeatScale.map((scale) =>
14  Math.max(scale - 1, 0) / maxHeartbeatLift,
15);
16const heartbeatShadowScale = heartbeatScale.map(
17  (scale, index) => scale + heartbeatProjection[index] * 0.055,
18);
19 
20const heartbeatAnimation = {
21  rotate: heartbeatRotate,
22  scale: heartbeatScale,
23  y: heartbeatLift,
24};
25 
26const heartbeatShadowAnimation = {
27  opacity: heartbeatProjection.map((distance) => 0.13 - distance * 0.04),
28  scale: heartbeatShadowScale,
29  x: heartbeatProjection.map((distance) => `${distance * -20}%`),
30  y: heartbeatProjection.map((distance) => `${distance * -5}%`),
31};
32 
33const heartbeatTransition = {
34  duration: 1.18,
35  times: heartbeatTimes,
36  ease: "easeOut" as const,
37  repeat: Infinity,
38  repeatDelay: 0.9,
39};
40 
41type HeartbeatTransition = NonNullable<HTMLMotionProps<"span">["transition"]>;
42 
43export type HeartbeatProps = React.ComponentPropsWithoutRef<"span"> & {
44  /** Classes applied to the visible animated child wrapper. */
45  targetClassName?: string;
46  /** Classes applied to the projected shadow layer. */
47  shadowClassName?: string;
48  /** Hide the projected shadow layer. */
49  showShadow?: boolean;
50  /** Override the default double-thump transition. */
51  transition?: HeartbeatTransition;
52};
53 
54export function Heartbeat({
55  className,
56  children,
57  shadowClassName,
58  showShadow = true,
59  targetClassName,
60  transition = heartbeatTransition,
61  ...props
62}: HeartbeatProps) {
63  const reduceMotion = useReducedMotion();
64  const resolvedTransition = reduceMotion ? { duration: 0 } : transition;
65 
66  return (
67    <span
68      data-slot="heartbeat"
69      className={cn(
70        "relative inline-flex items-center justify-center",
71        className,
72      )}
73      {...props}
74    >
75      {showShadow ? (
76        <motion.span
77          aria-hidden="true"
78          data-slot="heartbeat-shadow"
79          className={cn(
80            "pointer-events-none absolute inset-0 z-0 text-current blur-[5px]",
81            shadowClassName,
82          )}
83// … truncated