Initial commit

src/components/button/Button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { memo } from "react";
+import ButtonHoverMagnetic from "./ButtonHoverMagnetic/ButtonHoverMagnetic";
+import ButtonIconArrow from "./ButtonIconArrow";
+import ButtonShiftHover from "./ButtonShiftHover/ButtonShiftHover";
+import ButtonTextStagger from "./ButtonTextStagger/ButtonTextStagger";
+import ButtonTextUnderline from "./ButtonTextUnderline";
+import ButtonHoverBubble from "./ButtonHoverBubble";
+import ButtonExpandHover from "./ButtonExpandHover";
+import ButtonElasticEffect from "./ButtonElasticEffect/ButtonElasticEffect";
+import ButtonBounceEffect from "./ButtonBounceEffect/ButtonBounceEffect";
+import ButtonDirectionalHover from "./ButtonDirectionalHover/ButtonDirectionalHover";
+import ButtonTextShift from "./ButtonTextShift/ButtonTextShift";
+import type { ButtonVariantProps } from "./types";
+
+export type { ButtonVariant, ButtonVariantProps, ButtonPropsForVariant } from "./types";
+
+const buttonComponents = {
+  "hover-magnetic": ButtonHoverMagnetic,
+  "hover-bubble": ButtonHoverBubble,
+  "expand-hover": ButtonExpandHover,
+  "elastic-effect": ButtonElasticEffect,
+  "bounce-effect": ButtonBounceEffect,
+  "icon-arrow": ButtonIconArrow,
+  "shift-hover": ButtonShiftHover,
+  "text-stagger": ButtonTextStagger,
+  "text-shift": ButtonTextShift,
+  "text-underline": ButtonTextUnderline,
+  "directional-hover": ButtonDirectionalHover,
+} as const;
+
+const Button = (props: ButtonVariantProps) => {
+  const { variant = "hover-magnetic", ...restProps } = props;
+  const ButtonComponent = buttonComponents[variant];
+  return <ButtonComponent {...restProps} />;
+};
+
+Button.displayName = "Button";
+
+export default memo(Button);

src/components/button/ButtonBounceEffect/BounceButton.css

@@ -0,0 +1,30 @@
+.bounce-button {
+  --ease-elastic: linear(0, 0.55 7.5%, 0.85 12%, 0.95 14%, 1.03 16.5%, 1.09 20%, 1.13 22%, 1.14 23%, 1.15 24.5%, 1.15 26%, 1.13 28%, 1.11 31%, 1.05 39%, 1.02 43%, 0.99 47%, 0.98 52%, 0.97 59%, 1.002 81%, 1);
+  transition: transform 0.65s var(--ease-elastic);
+}
+
+.bounce-button [data-button-animate-chars] span {
+  display: inline-block;
+  position: relative;
+  text-shadow: 0px calc(var(--text-sm) * 1.5) currentColor;
+  transform: translateY(0) rotate(0.001deg);
+  transition: transform 0.65s var(--ease-elastic);
+}
+
+.bounce-button:hover {
+  transform: scale(0.92) rotate(-3deg);
+}
+
+.bounce-button:hover [data-button-animate-chars] span {
+  transform: translateY(calc(var(--text-sm) * -1.5)) rotate(3deg);
+}
+
+@media (max-width: 768px) {
+  .bounce-button:hover {
+    transform: scale(1) rotate(0deg);
+  }
+
+  .bounce-button:hover [data-button-animate-chars] span {
+    transform: translateY(0) rotate(0);
+  }
+}

src/components/button/ButtonBounceEffect/ButtonBounceEffect.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 "./BounceButton.css";
+
+interface ButtonBounceEffectProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonBounceEffect = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonBounceEffectProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useCharAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      data-href={href}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "bounce-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(
+          "bounce-button-bg absolute inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className={cls(
+          "bounce-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+ButtonBounceEffect.displayName = "ButtonBounceEffect";
+
+export default memo(ButtonBounceEffect);

src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useRef, memo } from "react";
+import { useDirectionalHover } from "./useDirectionalHover";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./DirectionalButton.css";
+
+export interface ButtonDirectionalHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  circleClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonDirectionalHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  circleClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonDirectionalHoverProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useDirectionalHover(buttonRef);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      data-href={href}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "directional-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(
+          "directional-button-bg absolute inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <div className="directional-button-circle-wrap">
+        <div
+          className={cls(
+            "directional-button-circle bg-accent",
+            circleClassName
+          )}
+        ></div>
+      </div>
+      <span
+        className={cls(
+          "directional-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+ButtonDirectionalHover.displayName = "ButtonDirectionalHover";
+
+export default memo(ButtonDirectionalHover);

src/components/button/ButtonDirectionalHover/DirectionalButton.css

@@ -0,0 +1,37 @@
+.directional-button-circle-wrap {
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.directional-button-circle {
+  pointer-events: none;
+  border-radius: 50%;
+  width: 100%;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
+  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
+}
+
+.directional-button-circle::before {
+  content: "";
+  display: block;
+  padding-top: 100%;
+}
+
+.directional-button:hover .directional-button-circle {
+  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
+}
+
+@media (max-width: 768px) {
+  .directional-button:hover .directional-button-circle {
+    transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
+  }
+}

src/components/button/ButtonDirectionalHover/useDirectionalHover.ts

@@ -0,0 +1,48 @@
+import { useEffect, useCallback, RefObject } from "react";
+
+export const useDirectionalHover = (
+  buttonRef: RefObject<HTMLButtonElement | null>,
+  circleSelector: string = ".directional-button-circle"
+) => {
+  const handleHover = useCallback(
+    (event: MouseEvent) => {
+      const button = buttonRef.current;
+      if (!button) return;
+
+      const buttonRect = button.getBoundingClientRect();
+      const buttonWidth = buttonRect.width;
+      const buttonHeight = buttonRect.height;
+      const buttonCenterX = buttonRect.left + buttonWidth / 2;
+
+      const mouseX = event.clientX;
+      const mouseY = event.clientY;
+
+      const offsetXFromLeft = ((mouseX - buttonRect.left) / buttonWidth) * 100;
+      const offsetYFromTop = ((mouseY - buttonRect.top) / buttonHeight) * 100;
+
+      let offsetXFromCenter = ((mouseX - buttonCenterX) / (buttonWidth / 2)) * 50;
+      offsetXFromCenter = Math.abs(offsetXFromCenter);
+
+      const circle = button.querySelector(circleSelector) as HTMLElement;
+      if (circle) {
+        circle.style.left = `${offsetXFromLeft.toFixed(1)}%`;
+        circle.style.top = `${offsetYFromTop.toFixed(1)}%`;
+        circle.style.width = `${115 + offsetXFromCenter * 2}%`;
+      }
+    },
+    [buttonRef, circleSelector]
+  );
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    if (!button) return;
+
+    button.addEventListener("mouseenter", handleHover);
+    button.addEventListener("mouseleave", handleHover);
+
+    return () => {
+      button.removeEventListener("mouseenter", handleHover);
+      button.removeEventListener("mouseleave", handleHover);
+    };
+  }, [buttonRef, handleHover]);
+};

src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { memo } from "react";
+import useElasticEffect from "./useElasticEffect";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonElasticEffectProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonElasticEffect = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonElasticEffectProps) => {
+  const elasticRef = useElasticEffect<HTMLButtonElement>();
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      ref={elasticRef}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative cursor-pointer h-9 min-w-0 w-fit max-w-full px-6 primary-button rounded-theme text-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+    </button>
+  );
+};
+
+ButtonElasticEffect.displayName = "ButtonElasticEffect";
+
+export default memo(ButtonElasticEffect);

src/components/button/ButtonElasticEffect/useElasticEffect.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef, useEffect, useCallback } from "react";
+import gsap from "gsap";
+
+const useElasticEffect = <T extends HTMLElement>() => {
+  const elementRef = useRef<T>(null);
+  const hoverLockedRef = useRef(false);
+  const timelineRef = useRef<gsap.core.Timeline | null>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    const el = elementRef.current;
+    if (!el || hoverLockedRef.current) return;
+
+    hoverLockedRef.current = true;
+    setTimeout(() => {
+      hoverLockedRef.current = false;
+    }, 500);
+
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const fs = parseFloat(getComputedStyle(el).fontSize);
+    const stretch = 0.75 * fs;
+    const sx = (w + stretch) / w;
+    const sy = (h - stretch * 0.33) / h;
+
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+    }
+
+    timelineRef.current = gsap
+      .timeline()
+      .to(el, { scaleX: sx, scaleY: sy, duration: 0.1, ease: "power1.out" })
+      .to(el, { scaleX: 1, scaleY: 1, duration: 1, ease: "elastic.out(1, 0.3)" });
+  }, []);
+
+  useEffect(() => {
+    // Skip on touch devices
+    if (window.matchMedia("(hover: none) and (pointer: coarse)").matches) {
+      return;
+    }
+
+    const el = elementRef.current;
+    if (!el) return;
+
+    el.addEventListener("mouseenter", handleMouseEnter);
+
+    return () => {
+      el.removeEventListener("mouseenter", handleMouseEnter);
+      if (timelineRef.current) {
+        timelineRef.current.kill();
+      }
+    };
+  }, [handleMouseEnter]);
+
+  return elementRef;
+};
+
+export default useElasticEffect;

src/components/button/ButtonExpandHover.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { memo } from "react";
+import { ArrowUpRight } from "lucide-react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonExpandHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  iconBgClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonExpandHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  iconClassName = "",
+  iconBgClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonExpandHoverProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "group relative cursor-pointer h-fit min-w-0 w-fit max-w-full rounded-theme text-sm text-background pointer-events-auto outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className="relative h-9 w-full px-5"
+        style={{ paddingRight: "calc(2.25rem + 0.75rem)" }}
+      >
+        <div className="h-9 flex items-center" >
+          <span
+            className={cls(
+              "relative z-10 block overflow-hidden truncate whitespace-nowrap md:transition-colors md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
+              textClassName
+            )}
+          >
+            {text}
+          </span>
+        </div>
+        <div className="absolute overflow-hidden top-[2px] bottom-[2px] left-[2px] right-[2px] rounded-theme flex justify-end">
+          <div
+            className={cls(
+              "relative z-10 h-full w-auto aspect-square flex items-center justify-center",
+              iconClassName
+            )}
+          >
+            <ArrowUpRight
+              className="h-1/2 w-auto aspect-square"
+              strokeWidth={1}
+            />
+          </div>
+          <div
+            className={cls(
+              "absolute z-0 h-full w-full rounded-theme",
+              "md:transition-transform md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
+              "-translate-x-[calc(-100%+2.25rem-4px)] md:group-hover:translate-x-0",
+              iconBgClassName
+            )}
+          ></div>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+ButtonExpandHover.displayName = "ButtonExpandHover";
+
+export default memo(ButtonExpandHover);

src/components/button/ButtonHoverBubble.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { memo } from "react";
+import { ArrowDownRight } from "lucide-react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonHoverBubbleProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonHoverBubble = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  iconClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonHoverBubbleProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      data-href={href}
+      className={cls(
+        "relative group flex justify-center items-center min-w-0 w-fit max-w-full rounded-theme cursor-pointer pointer-events-auto outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 aspect-square rounded-theme relative",
+          "scale-0 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-left md:group-hover:scale-100",
+          iconClassName
+        )}
+      >
+        <ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
+      </div>
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 px-4 min-w-0 w-fit max-w-full rounded-theme relative",
+          "-translate-x-[var(--height-9)] md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:group-hover:translate-x-0",
+          bgClassName
+        )}
+      >
+        <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+      </div>
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 aspect-square rounded-theme absolute right-0 z-20",
+          "scale-100 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-right md:group-hover:scale-0",
+          iconClassName
+        )}
+      >
+        <ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
+      </div>
+    </button>
+  );
+};
+
+ButtonHoverBubble.displayName = "ButtonHoverBubble";
+
+export default memo(ButtonHoverBubble);

src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { memo } from "react";
+import useMagneticEffect from "./useMagneticEffect";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonHoverMagneticProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  strengthFactor?: number;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonHoverMagnetic = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  strengthFactor = 20,
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonHoverMagneticProps) => {
+  const magneticRef = useMagneticEffect(strengthFactor);
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      ref={magneticRef as React.RefObject<HTMLButtonElement>}
+      data-href={href}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative cursor-pointer h-9 min-w-0 w-fit max-w-full px-6 primary-button rounded-theme text-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+    </button>
+  );
+};
+
+ButtonHoverMagnetic.displayName = "ButtonHoverMagnetic";
+
+export default memo(ButtonHoverMagnetic);

src/components/button/ButtonHoverMagnetic/useMagneticEffect.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+const useMagneticEffect = (strengthFactor = 10) => {
+    const elementRef = useRef<HTMLElement | null>(null);
+
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+
+        import("gsap").then((gsap) => {
+            const element = elementRef.current;
+
+            if (!element || window.innerWidth < 768) return;
+
+            const resetEl = (el: HTMLElement, immediate: boolean) => {
+                if (!el) return;
+                gsap.default.killTweensOf(el);
+                (immediate ? gsap.default.set : gsap.default.to)(el, {
+                    x: "0vw",
+                    y: "0vw",
+                    rotate: "0deg",
+                    clearProps: "all",
+                    ...(!immediate && { ease: "elastic.out(1, 0.3)", duration: 1.6 })
+                });
+            };
+
+            const resetOnEnter = () => {
+                resetEl(element, true);
+            };
+
+            const moveMagnet = (e: MouseEvent) => {
+                const b = element.getBoundingClientRect();
+                const strength = strengthFactor;
+
+                const offsetX = ((e.clientX - b.left) / element.offsetWidth - 0.5) * (strength / 16);
+                const offsetY = ((e.clientY - b.top) / element.offsetHeight - 0.5) * (strength / 16);
+
+                gsap.default.to(element, {
+                    x: offsetX + "vw",
+                    y: offsetY + "vw",
+                    rotate: "0.001deg",
+                    ease: "power4.out",
+                    duration: 1.6
+                });
+            };
+
+            const resetMagnet = () => {
+                gsap.default.to(element, {
+                    x: "0vw",
+                    y: "0vw",
+                    ease: "elastic.out(1, 0.3)",
+                    duration: 1.6,
+                    clearProps: "all"
+                });
+            };
+
+            element.addEventListener("mouseenter", resetOnEnter);
+            element.addEventListener("mousemove", moveMagnet);
+            element.addEventListener("mouseleave", resetMagnet);
+
+            return () => {
+                element.removeEventListener("mouseenter", resetOnEnter);
+                element.removeEventListener("mousemove", moveMagnet);
+                element.removeEventListener("mouseleave", resetMagnet);
+            };
+        });
+    }, [strengthFactor]);
+
+    return elementRef;
+};
+
+export default useMagneticEffect;

src/components/button/ButtonIconArrow.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { memo } from "react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonIconArrowProps {
+    text: string;
+    onClick?: () => void;
+    href?: string;
+    className?: string;
+    textClassName?: string;
+    iconClassName?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+    type?: "button" | "submit" | "reset";
+}
+
+const ButtonIconArrow = ({
+    text,
+    onClick,
+    href,
+    className = "",
+    textClassName = "",
+    iconClassName = "",
+    disabled = false,
+    ariaLabel,
+    type = "button",
+}: ButtonIconArrowProps) => {
+    const handleClick = useButtonClick(href, onClick);
+
+    return (
+        <button
+            type={type}
+            onClick={handleClick}
+            disabled={disabled}
+            data-href={href}
+            aria-label={ariaLabel || text}
+            className={cls(
+                "relative group cursor-pointer h-9 min-w-0 w-fit max-w-full primary-button rounded-theme px-6 text-sm text-background flex items-center gap-3",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+        >
+            <span className={cls(
+                "block overflow-hidden truncate whitespace-nowrap md:transition-transform md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:[transform:translateX(calc(var(--height-9)/4))]",
+                textClassName
+            )}>
+                {text}
+            </span>
+            <div className={cls(
+                "h-5 w-[var(--height-5)] aspect-square rounded-theme flex items-center justify-center md:transition-transform md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:scale-[0.2] md:group-hover:rotate-90",
+                iconClassName || "secondary-button text-foreground"
+            )}>
+                <ArrowRight className="h-1/2 w-1/2 md:transition-opacity md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:opacity-0" />
+            </div>
+        </button>
+    );
+};
+
+ButtonIconArrow.displayName = "ButtonIconArrow";
+
+export default memo(ButtonIconArrow);

src/components/button/ButtonShiftHover/ButtonShiftHover.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useRef, memo } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./ShiftButton.css";
+
+interface ButtonShiftHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonShiftHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonShiftHoverProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useCharAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "shift-button group relative cursor-pointer flex gap-2 items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-5 pr-4 min-w-0 w-fit max-w-full rounded-theme text-background text-sm",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        textClassName,
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "shift-button-bg absolute inset-0 rounded-theme transition-transform duration-[600ms] primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className="shift-button-text relative inline-block overflow-hidden truncate whitespace-nowrap"
+      >
+        {text}
+      </span>
+      <div className="relative h-[1em] w-auto aspect-square rounded-theme border border-current scale-65 transition-all duration-300 md:group-hover:bg-current md:group-hover:scale-40" />
+    </button>
+  );
+};
+
+ButtonShiftHover.displayName = "ButtonShiftHover";
+
+export default memo(ButtonShiftHover);

src/components/button/ButtonShiftHover/ShiftButton.css

@@ -0,0 +1,29 @@
+.shift-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);
+}
+
+.shift-button:hover [data-button-animate-chars] span {
+    transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
+}
+
+.shift-button:hover .shift-button-bg {
+    transform: scale(0.975);
+}
+
+@media (max-width: 768px) {
+    .shift-button [data-button-animate-chars] span {
+        text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    }
+
+    .shift-button:hover [data-button-animate-chars] span {
+        transform: translateY(0vw) rotate(0);
+    }
+
+    .shift-button:hover .shift-button-bg {
+        transform: scale(1);
+    }
+}

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}
+      data-href={href}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      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);
+    }
+}

src/components/button/ButtonTextStagger/ButtonTextStagger.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 "./StaggerButton.css";
+
+export interface ButtonTextStaggerProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonTextStagger = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonTextStaggerProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useCharAnimation(buttonRef, text, "[data-button-animate-chars]", 0.01);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      data-href={href}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      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 transition-transform duration-[600ms] 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>
+  );
+};
+
+ButtonTextStagger.displayName = "ButtonTextStagger";
+
+export default memo(ButtonTextStagger);

src/components/button/ButtonTextStagger/StaggerButton.css

@@ -0,0 +1,29 @@
+.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);
+}
+
+.stagger-button:hover .stagger-button-bg {
+    transform: scale(0.975);
+}
+
+@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);
+    }
+
+    .stagger-button:hover .stagger-button-bg {
+        transform: scale(1);
+    }
+}

src/components/button/ButtonTextUnderline.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { memo } from "react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonTextUnderlineProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonTextUnderline = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonTextUnderlineProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative text-sm inline-block bg-transparent border-none p-0 cursor-pointer",
+        "after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1px]",
+        "after:bg-current after:scale-x-0 after:origin-right after:transition-transform after:duration-300",
+        "hover:after:scale-x-100 hover:after:origin-left",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:after:scale-x-0",
+        className
+      )}
+    >
+      {text}
+    </button>
+  );
+};
+
+ButtonTextUnderline.displayName = "ButtonTextUnderline";
+
+export default memo(ButtonTextUnderline);

src/components/button/SelectorButton.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useRef, useEffect, memo, ReactNode } from "react";
+import { cls } from "@/lib/utils";
+
+export interface SelectorOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+  labelClassName?: string;
+}
+
+export interface SelectorButtonProps {
+  options: SelectorOption[];
+  activeValue: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+  buttonClassName?: string;
+  wrapperClassName?: string;
+  labelClassName?: string;
+}
+
+const SelectorButton = memo<SelectorButtonProps>(({
+  options,
+  activeValue,
+  onValueChange,
+  className = "",
+  buttonClassName = "",
+  wrapperClassName = "",
+  labelClassName = "",
+}) => {
+  const hoverRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const hoverElement = hoverRef.current;
+
+    if (!container || !hoverElement) return;
+
+    const moveHoverBlock = (target: HTMLElement) => {
+      if (!target) return;
+      const targetRect = target.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+
+      hoverElement.style.width = `${targetRect.width}px`;
+      hoverElement.style.transform = `translateX(${targetRect.left - containerRect.left}px)`;
+    };
+
+    const updatePosition = () => {
+      const activeButton = container.querySelector(
+        `[data-value="${activeValue}"]`
+      ) as HTMLElement;
+      if (activeButton) moveHoverBlock(activeButton);
+    };
+
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [activeValue]);
+
+  return (
+    <div className={cls("relative w-fit p-1 card rounded-theme-capped", wrapperClassName)}>
+      <div
+        ref={containerRef}
+        className={cls("relative overflow-hidden cursor-pointer flex", className)}
+      >
+        {options.map((option) => (
+          <button
+            key={option.value}
+            data-value={option.value}
+            disabled={option.disabled}
+            onClick={() => !option.disabled && onValueChange(option.value)}
+            className={cls(
+              "relative px-4 py-2 text-sm md:text-base rounded-theme transition-all duration-300 ease-in-out z-1 text-nowrap",
+              option.disabled ? "opacity-50" : "cursor-pointer",
+              activeValue === option.value ? "" : "bg-transparent",
+              buttonClassName
+            )}
+          >
+            {typeof option.label === "string" ? (
+              <span
+                className={cls(
+                  "transition-colors duration-300 ease-in-out",
+                  activeValue === option.value ? "text-background" : "text-foreground",
+                  option.disabled ? "" : "cursor-pointer",
+                  option.labelClassName || labelClassName
+                )}
+              >
+                {option.label}
+              </span>
+            ) : (
+              <div
+                className={cls(
+                  "flex items-center justify-center transition-opacity duration-300",
+                  activeValue === option.value ? "opacity-100" : "opacity-50",
+                  option.disabled ? "" : "cursor-pointer",
+                  option.labelClassName || labelClassName
+                )}
+              >
+                {option.label}
+              </div>
+            )}
+          </button>
+        ))}
+
+        <div
+          ref={hoverRef}
+          className="absolute top-0 left-0 h-full rounded-theme overflow-hidden pointer-events-none z-0 transition-all duration-400 ease-out"
+        >
+          <div className="relative primary-button w-full h-full rounded-theme" />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+SelectorButton.displayName = "SelectorButton";
+
+export default SelectorButton;

src/components/button/types.ts

@@ -0,0 +1,89 @@
+export type ButtonVariant =
+  | "hover-magnetic"
+  | "hover-bubble"
+  | "expand-hover"
+  | "elastic-effect"
+  | "bounce-effect"
+  | "icon-arrow"
+  | "shift-hover"
+  | "text-stagger"
+  | "text-shift"
+  | "text-underline"
+  | "directional-hover";
+
+export type CTAButtonVariant = Exclude<ButtonVariant, "text-underline">;
+
+export type ButtonWithBgClassName = "text-stagger" | "text-shift" | "shift-hover" | "bounce-effect" | "directional-hover";
+
+export const hasBgClassName = (variant?: string): variant is ButtonWithBgClassName => {
+  return variant === "text-stagger" || variant === "text-shift" || variant === "shift-hover" || variant === "bounce-effect" || variant === "directional-hover";
+};
+
+export type BaseButtonProps = {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+};
+
+export type ButtonVariantProps =
+  | ({
+      variant?: "hover-magnetic";
+      textClassName?: string;
+      strengthFactor?: number;
+    } & BaseButtonProps)
+  | ({
+      variant: "hover-bubble";
+      bgClassName?: string;
+      textClassName?: string;
+      iconClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "expand-hover";
+      textClassName?: string;
+      iconClassName?: string;
+      iconBgClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "elastic-effect";
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "bounce-effect";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "icon-arrow";
+      textClassName?: string;
+      iconClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "shift-hover";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-stagger";
+      bgClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-shift";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-underline";
+      disabled?: boolean;
+    } & BaseButtonProps)
+  | ({
+      variant: "directional-hover";
+      bgClassName?: string;
+      textClassName?: string;
+      circleClassName?: string;
+    } & BaseButtonProps);
+
+export type ButtonPropsForVariant<V extends ButtonVariant> = Extract<
+  ButtonVariantProps,
+  { variant?: V }
+>;

src/components/button/useButtonClick.ts

@@ -0,0 +1,31 @@
+import { useLenis } from "lenis/react";
+
+export const useButtonClick = (href?: string, onClick?: () => void) => {
+  const lenis = useLenis();
+
+  const handleClick = () => {
+    if (href) {
+      const isExternalLink = /^(https?:\/\/|www\.)/.test(href);
+
+      if (isExternalLink) {
+        window.open(
+          href.startsWith("www.") ? `https://${href}` : href,
+          "_blank",
+          "noopener,noreferrer"
+        );
+      } else {
+        if (lenis) {
+          lenis.scrollTo(`#${href}`);
+        } else {
+          const element = document.getElementById(href);
+          if (element) {
+            element.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      }
+    }
+    onClick?.();
+  };
+
+  return handleClick;
+};

src/components/button/useCharAnimation.ts

@@ -0,0 +1,31 @@
+import { useEffect, RefObject } from "react";
+
+export const useCharAnimation = (
+    buttonRef: RefObject<HTMLButtonElement | null>,
+    text: string | undefined,
+    selector: string = "[data-button-animate-chars]",
+    staggerDelay: number = 0
+) => {
+    useEffect(() => {
+        const buttonElement = buttonRef.current?.querySelector(selector);
+        if (!buttonElement) return;
+
+        const textContent = text || buttonElement.textContent || "";
+        buttonElement.innerHTML = "";
+
+        [...textContent].forEach((char, index) => {
+            const span = document.createElement("span");
+            span.textContent = char;
+
+            if (staggerDelay > 0) {
+                span.style.transitionDelay = `${index * staggerDelay}s`;
+            }
+
+            if (char === " ") {
+                span.style.whiteSpace = "pre";
+            }
+
+            buttonElement.appendChild(span);
+        });
+    }, [buttonRef, text, selector, staggerDelay]);
+};