←
Magnetic Pulsing CTA

Magnetic Pulsing CTA

Audio + Haptic

High-energy glowing action button with ambient radiant pulse effect, click audio trigger hook, and 3D depth press feedback.

Interactive Playground & Studio

Live Controls
magnetic-pulse-cta.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

UI Pirate MagmapulseColor="#FF5B04"

Signature glowing orange radiant pulse bloom for high-conversion CTAs.

Emerald PulsepulseColor="#00E5BE"

Electric teal-emerald ambient pulse wave with responsive press damping.

Laser Sky CyanpulseColor="#38BDF8"

High-voltage sky cyan beacon wave with audio trigger click listener.

Electric PurplepulseColor="#8B5CF6"

Deep violet ambient glow aura for creative studio and agency actions.

Features & Physics

✓Ambient concentric pulse waves
✓Optional web audio sound click trigger
✓Tactile 3D press scaling animation
✓High-conversion lead capture design

Code & Integration

Customized live with your active playground prop settings:

import { MagneticPulseCTA } from "@/components/MagneticPulseCTA";

export default function Example() {
  return (
    <MagneticPulseCTA
      label=""
      pulseColor=""
      onClick={() => console.log("Pulsed!")}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
labelstring"Let's Venture"Button text.
pulseColorstring"#FF5B04"Color for the pulsing flare.