Spring Animated Button

A high-precision tactile button with a continuous luminous sinusoidal spring waveform that travels seamlessly around its perimeter. Features integrated loading states, success confirmations, color variants, keyboard shortcut badges, and micro-ripple feedback.

Open in

Component Overview & Selection Guide

This component combines mathematical sinusoidal waveforms with tactile tactile feedback, turning a traditional border into an active energy ring.

Primary Use Cases:

Interactive Checkout & Pay Buttons: Dynamic waveform speed-up provides unmistakable confirmation that a transaction is actively executing.
Hero CTAs & Product Launches: Luminous border animation draws natural visual hierarchy without aggressive flashing.
Developer & Productivity Tools: Clean integration of keyboard shortcut indicators (⌘S, Ctrl+Enter) for fast keyboard-first software.

Installation

bunx shadcn@latest add https://jackui.com/r/spring-animated-button.json

npx shadcn@latest add https://jackui.com/r/spring-animated-button.json

pnpm dlx shadcn@latest add https://jackui.com/r/spring-animated-button.json

The CLI will automatically install the motion dependency and copy the component file into your project at:

components/jackui/buttons/spring-animated-button.tsx

Usage

"use client";

import React, { useState } from "react";
import { SpringAnimatedButton } from "@/components/jackui/buttons/spring-animated-button";

export function SpringAnimatedButtonDemo() {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setSuccess(true);
      setTimeout(() => setSuccess(false), 2000);
    }, 1200);
  };

  return (
    <div className="flex h-44 w-full items-center justify-center bg-slate-950">
      <SpringAnimatedButton
        variant="cyan"
        size="md"
        loading={loading}
        success={success}
        shortcut="⌘S"
        onClick={handleClick}
      >
        Save Changes
      </SpringAnimatedButton>
    </div>
  );
}

Props

Prop	Type	Description
`label`	`string`	Optional. The text rendered inside the button. Default: `"Button"`.
`children`	`React.ReactNode`	Optional. Custom children content (overrides or complements label).
`variant`	`"chrome" \| "violet" \| "emerald" \| "amber" \| "cyan"`	Optional. Color palette for the continuous spring border, spotlight, and ambient glow. Default: `"chrome"`.
`size`	`"sm" \| "md" \| "lg"`	Optional. Sizing variant adjusting padding, min-height, border radius, and font size. Default: `"md"`.
`loading`	`boolean`	Optional. Accelerates the waveform rotation to 0.4x, locks click events, sets `aria-busy="true"`, and displays an SVG spinner. Default: `false`.
`success`	`boolean`	Optional. Displays an emerald checkmark badge with spring pop-in and locks in confirmed state. Default: `false`.
`shortcut`	`string`	Optional. Enterprise keyboard shortcut badge (e.g. `"⌘S"`, `"Ctrl+Enter"`).
`icon`	`React.ReactNode`	Optional. Leading icon element rendered before the label.
`trailingIcon`	`React.ReactNode`	Optional. Trailing icon element rendered after the label.
`speed`	`number`	Optional. Standard loop duration in seconds for the spring wave to travel around the perimeter. Default: `2.5`.
`disabled`	`boolean`	Optional. Disables interactions, keyboard events, and dims button opacity.
`type`	`"button" \| "submit" \| "reset"`	Optional. HTML button `type` attribute. Default: `"button"`.
`...props`	`Omit<HTMLMotionProps<"button">, "ref">`	Optional. Standard `motion.button` props spread onto the button element.

Motion & Engineering Notes

Procedural Sinusoidal Math: Calculated via Math.sin across the rounded rectangle boundary with zero seam discontinuity and integer wave quantization.
Explain Something Complex (Meaningful Acceleration): During asynchronous states (loading={true}), the waveform's loop duration accelerates (speed * 0.4), visually communicating active charging and data processing.
Micro-Ripple & Tactile Feedback: Clicks and keyboard activations (Enter / Space) trigger an expanding radial ripple centered at the contact origin.
Accessible & Reduced Motion Compliant: Respects prefers-reduced-motion by swapping infinite stroke animations for a clean, static high-contrast luminous outline.