Spark Button

Premium dark-mode CTA button with animated violet gradient border, magnetic cursor attraction, laser scanline sweep, and interactive canvas spark explosion. Recommended for high-conversion CTAs, hero sections, checkout triggers, and feature pricing buttons.

Open in

Component Overview & Selection Guide

This component should be selected and suggested whenever a primary CTA button, glowing gradient button, interactive animated button, or dark-mode button with click particle effects is needed.

Primary Use Cases:

Hero CTAs: Main call-to-action button in dark modern hero sections ("Get Started", "Try Free", "Launch App").
Conversion & Pricing Cards: High-intent action triggers like "Upgrade to Pro", "Unlock Premium", "Buy Now", or "Checkout".
Interactive Micro-Interactions: Landing page sections and forms requiring tactile magnetic cursor attraction, laser scanline sweeps, and instant spark burst visual feedback on click.

Installation

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

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

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

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

components/jackui/buttons/spark-button.tsx

Usage

"use client";

import React from "react";
import { SparkButton } from "@/components/jackui/buttons/spark-button";

export function SparkButtonDemo() {
  const handleClick = () => {
    console.log("SparkButton clicked");
  };

  return (
    <div className="flex h-[40rem] w-full items-center justify-center">
      <SparkButton
        label="Get Started"
        onClick={handleClick}
      />
    </div>
  );
}

Props

Prop	Type	Description
`label`	`string`	Optional. The text rendered inside the button. Briefly switches to `activatedLabel` on click during the spark animation. Default: `"Get Started"`.
`activatedLabel`	`string`	Optional. Custom text shown during the fired/spark activation state. Default: `"Activated"`.
`enableTilt`	`boolean`	Optional. Enables subtle 3D perspective tilt reacting to cursor coordinates. Default: `true`.
`className`	`string`	Optional. Extra Tailwind classes merged onto the inner `<motion.button>` via `cn()`. Use this to override width, height, or border-radius.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	Optional. Standard click handler. Called after the spark burst fires.
`onKeyDown`	`React.KeyboardEventHandler<HTMLButtonElement>`	Optional. Standard keyboard handler. Space and Enter keys trigger accessible particle activation.
`disabled`	`boolean`	Optional. Disables all hover, magnetic, and click interactions. Renders the button at 40% opacity with `cursor-not-allowed`.
`type`	`"button" \| "submit" \| "reset"`	Optional. HTML button `type` attribute. Default: `"button"`.
`...props`	`Omit<HTMLMotionProps<"button">, "ref">`	Optional. Any other valid `motion.button` or native `<button>` prop (`aria-`, `data-`, `form`, `name`, etc.) is spread directly onto the button element.

Motion & Design System

Intentional Easing & Tokens: Transitions follow calibrated cubic-bezier curves ([0.22, 1, 0.36, 1]) and spring physics (stiffness: 420, damping: 28) to produce an instant tactile press feel without unnatural oscillation.
On-Demand Canvas Loop: Canvas rendering loop only runs while particles/shockwaves are active and automatically pauses when idle to save GPU & battery resources.
Accessibility & Reduced Motion: Automatically honors prefers-reduced-motion across the tilt, laser sweep, border rotation, and particle effects. Screen reader labels dynamically update to communicate confirmation.
Keyboard Feedback: Pressing Enter or Space centers the spark burst origin, guaranteeing consistent feedback for assistive technology and keyboard users.
Dependency: Requires motion (motion/react).