Jitter Animation

1import * as React from "react";
2import { AlarmClock } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5 
6import "./jitter-animation.css";
7 
8export type JitterAxis = "both" | "horizontal" | "vertical";
9export type JitterAnimationAxis = JitterAxis;
10 
11export type JitterProps = React.ComponentPropsWithoutRef<"span"> & {
12  /** The axis the content jitters on. Defaults to horizontal. */
13  axis?: JitterAxis;
14  /** Classes applied to the animated child wrapper. */
15  targetClassName?: string;
16};
17 
18export function Jitter({
19  axis = "horizontal",
20  className,
21  children,
22  targetClassName,
23  ...props
24}: JitterProps) {
25  return (
26    <span
27      data-slot="jitter"
28      data-axis={axis}
29      className={cn("jitter inline-flex", className)}
30      {...props}
31    >
32      <span
33        data-slot="jitter-target"
34        className={cn("jitter-target inline-flex", targetClassName)}
35      >
36        {children}
37      </span>
38    </span>
39  );
40}
41 
42export type JitterAnimationProps = React.ComponentPropsWithoutRef<"div"> & {
43  /** The axis the icon jitters on. Defaults to horizontal. */
44  axis?: JitterAxis;
45};
46 
47export function JitterAnimation({
48  axis = "horizontal",
49  className,
50  ...props
51}: JitterAnimationProps) {
52  return (
53    <div
54      data-slot="jitter-animation"
55      data-axis={axis}
56      className={cn(
57        "jitter jitter-animation flex flex-col items-center text-foreground",
58        className,
59      )}
60      {...props}
61    >
62      <div
63        data-slot="jitter-animation-target"
64        className="jitter-target w-full max-w-72"
65      >
66        <AlarmClock aria-hidden="true" className="h-auto w-full" />
67      </div>
68    </div>
69  );
70}