Initial commit

src/components/button/ButtonTextShift/ButtonTextShift.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useRef, memo } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./TextShiftButton.css";
+
+export interface ButtonTextShiftProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonTextShift = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonTextShiftProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useCharAnimation(buttonRef, text, "[data-button-animate-chars]", 0.0);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      data-href={href}
+      className={cls(
+        "stagger-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "stagger-button-bg absolute inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className={cls(
+          "stagger-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+ButtonTextShift.displayName = "ButtonTextShift";
+
+export default memo(ButtonTextShift);

src/components/button/ButtonTextShift/TextShiftButton.css

@@ -0,0 +1,21 @@
+.stagger-button [data-button-animate-chars] span {
+    display: inline-block;
+    position: relative;
+    text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    transform: translateY(0em) rotate(0.001deg);
+    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.stagger-button:hover [data-button-animate-chars] span {
+    transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
+}
+
+@media (max-width: 768px) {
+    .stagger-button [data-button-animate-chars] span {
+        text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    }
+
+    .stagger-button:hover [data-button-animate-chars] span {
+        transform: translateY(0vw) rotate(0);
+    }
+}