←
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:

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export interface MagneticPulseCTAProps {
  label?: string;
  pulseColor?: string;
  onClick?: () => void;
  className?: string;
}

export function MagneticPulseCTA({
  label = "Let's Venture",
  pulseColor = "#FF5B04",
  onClick,
  className = "",
}: MagneticPulseCTAProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={`relative inline-block group select-none ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Outer pulsing radiant glow */}
      <div
        className="absolute inset-0 rounded-full blur-2xl opacity-70 group-hover:opacity-100 group-hover:scale-125 transition-all duration-500 animate-pulse pointer-events-none"
        style={{ backgroundColor: pulseColor }}
      />
      <motion.button
        type="button"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={onClick}
        className="relative px-8 py-4 rounded-full text-white font-bold text-base shadow-2xl flex items-center gap-3 cursor-pointer focus:outline-none"
        style={{
          backgroundColor: pulseColor,
          boxShadow: `0 0 35px ${pulseColor}80`,
        }}
      >
        <span>{label}</span>
        <span className="w-2 h-2 rounded-full bg-white animate-ping" />
      </motion.button>
    </div>
  );
}

export default MagneticPulseCTA;

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.