Shimmer Button

A soft light sweep travels across the surface.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/shimmer-button.json

Manual

Install the dependencies
npm install clsx motion tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/motion.ts

import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

Copy the source

components/ui/shimmer-button/shimmer-button.tsx

"use client";

import { useEffect, type ComponentProps } from "react";
import { motion, useAnimate, useInView, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { ease, spring } from "@/lib/motion";

export interface ShimmerButtonProps
  extends Omit<ComponentProps<"button">, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"> {
  /** When the light sweep plays: on a loop, or once per hover and focus. @default "loop" */
  trigger?: "loop" | "hover";
  /** Seconds for one sweep across the button. @default 1.4 */
  duration?: number;
  /** Seconds between sweeps in loop mode. @default 1.8 */
  delay?: number;
  /** Visual style. @default "solid" */
  variant?: "solid" | "primary" | "outline";
  /** Button size. @default "md" */
  size?: "sm" | "md" | "lg";
}

const variantClasses = {
  solid:
    "bg-foreground text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.14),0_4px_12px_-2px_rgb(0_0_0/0.12)] hover:bg-foreground/90",
  primary:
    "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.2),0_1px_2px_rgb(0_0_0/0.12),0_4px_12px_-2px_color-mix(in_oklab,var(--primary)_40%,transparent)] hover:bg-primary/90",
  outline: "border border-border bg-background text-foreground shadow-xs hover:bg-accent",
} as const;

const sweepClasses = {
  solid: "via-white/40",
  primary: "via-white/45",
  outline: "via-primary/15",
} as const;

const sizeClasses = {
  sm: "h-8 gap-1.5 rounded-md px-3 text-[13px] after:absolute after:-inset-1 after:content-['']",
  md: "h-10 gap-2 rounded-md px-4 text-sm",
  lg: "h-12 gap-2 rounded-lg px-6 text-[15px]",
} as const;

// The band spans 35–65% of the layer, so ±70% starts and ends just out of view.
const SWEEP = { x: ["-70%", "70%"] };
// Near-linear, so the band crosses the visible area at an even pace.
const SWEEP_EASE = [0.45, 0.05, 0.55, 0.95] as const;

export function ShimmerButton({
  trigger = "loop",
  duration = 1.4,
  delay = 1.8,
  variant = "solid",
  size = "md",
  type = "button",
  className,
  children,
  onPointerEnter,
  onFocus,
  ...props
}: ShimmerButtonProps) {
  const [scope, animate] = useAnimate<HTMLSpanElement>();
  const inView = useInView(scope);
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    // Loop only while visible; nothing animates off-screen.
    if (trigger !== "loop" || reduceMotion || !inView || !scope.current) return;
    const controls = animate(scope.current, SWEEP, {
      duration,
      ease: SWEEP_EASE,
      repeat: Infinity,
      repeatDelay: delay,
    });
    return () => controls.stop();
  }, [trigger, reduceMotion, inView, duration, delay, animate, scope]);

  const sweepOnce = () => {
    if (trigger === "hover" && !reduceMotion && scope.current) {
      animate(scope.current, SWEEP, { duration: duration * 0.8, ease: ease.out });
    }
  };

  return (
    <motion.button
      type={type}
      whileTap={reduceMotion ? { opacity: 0.8 } : { scale: 0.97 }}
      transition={spring.snappy}
      onPointerEnter={(event) => {
        onPointerEnter?.(event);
        sweepOnce();
      }}
      onFocus={(event) => {
        onFocus?.(event);
        sweepOnce();
      }}
      className={cn(
        "relative isolate inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden font-medium whitespace-nowrap outline-none select-none",
        "transition-[background-color,border-color,color,box-shadow] duration-150",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        "disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
        variantClasses[variant],
        sizeClasses[size],
        className,
      )}
      {...props}
    >
      <span
        ref={scope}
        aria-hidden="true"
        style={{ transform: "translateX(-70%)" }}
        className={cn(
          "pointer-events-none absolute inset-0 -z-10 bg-linear-110 from-transparent from-35% to-transparent to-65%",
          sweepClasses[variant],
        )}
      />
      {children}
    </motion.button>
  );
}

Usage

import { ShimmerButton } from "@/components/ui/shimmer-button/shimmer-button";

export function Upgrade() {
  return <ShimmerButton>Upgrade to Pro</ShimmerButton>;
}

API reference

Prop	Type	Default	Description
`trigger`	`"loop" \| "hover"`	`"loop"`	When the light sweep plays: on a loop, or once per hover and focus.
`duration`	`number`	`1.4`	Seconds for one sweep across the button.
`delay`	`number`	`1.8`	Seconds between sweeps in loop mode.
`variant`	`"solid" \| "primary" \| "outline"`	`"solid"`	Visual style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size.

Also accepts every native <button> attribute, including ref and className.

The sweep only animates transform, so it stays on the compositor even when looping.
Keep loops for a single primary call to action per view; several shimmering buttons compete for attention.

Accessibility

Renders a native button; the sweep is a decorative, aria-hidden layer behind the label.
In hover mode the sweep also plays on keyboard focus, so keyboard users see the same cue.
The loop pauses while the button is off-screen and never runs with reduced motion enabled.

Installation#

CLI

Manual

Install the dependencies

Add the shared helpers

Copy the source

Usage#

API reference#

Accessibility#

Installation

Usage

API reference

Accessibility