Tactile magnetic button with cursor physics spring, dynamic spotlight gradient, click ripple wave animations, and 6 aesthetic themes
"use client";
import React, { useState } from "react";
import { MagneticLiquidButton } from "@/components/ui/magnetic-liquid-button";
import { Sparkles, ArrowRight, Zap, Flame, Terminal, Play } from "lucide-react";
export function MagneticLiquidButtonDemo() {
const [loading, setLoading] = useState(false);
const handleSimulateAction = () => {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
};
return (
<div className="flex min-h-[500px] w-full flex-col items-center justify-center gap-12 bg-neutral-950 p-8 text-neutral-100 selection:bg-violet-500/30">
{/* Header Info */}
<div className="flex flex-col items-center gap-2 text-center max-w-md">
<h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
Magnetic Liquid Button
</h2>
<p className="text-sm text-neutral-400">
Physics-based magnetic cursor attraction, dynamic spotlight gradient,
click ripple waves, and multi-variant glow themes.
</p>
</div>
{/* Main Interactive Showcase */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 items-center justify-items-center">
{/* Cosmic Variant */}
<MagneticLiquidButton
variant="cosmic"
size="lg"
leftIcon={<Sparkles className="h-4 w-4 text-violet-400" />}
rightIcon={<ArrowRight className="h-4 w-4 text-fuchsia-400" />}
>
Explore Cosmos
</MagneticLiquidButton>
{/* Aurora Variant */}
<MagneticLiquidButton
variant="aurora"
size="lg"
leftIcon={<Zap className="h-4 w-4 text-emerald-400" />}
rightIcon={<ArrowRight className="h-4 w-4 text-teal-400" />}
>
Activate Aurora
</MagneticLiquidButton>
{/* Sunset Variant */}
<MagneticLiquidButton
variant="sunset"
size="lg"
leftIcon={<Flame className="h-4 w-4 text-rose-400" />}
rightIcon={<ArrowRight className="h-4 w-4 text-orange-400" />}
>
Ignite Launch
</MagneticLiquidButton>
{/* Electric Variant with Loading Toggle */}
<MagneticLiquidButton
variant="electric"
size="lg"
isLoading={loading}
onClick={handleSimulateAction}
leftIcon={<Play className="h-4 w-4 text-cyan-400 fill-cyan-400/20" />}
>
{loading ? "Processing" : "Live Action"}
</MagneticLiquidButton>
{/* Cyberpunk Variant */}
<MagneticLiquidButton
variant="cyberpunk"
size="lg"
leftIcon={<Terminal className="h-4 w-4 text-pink-400" />}
>
Deploy Matrix
</MagneticLiquidButton>
{/* Glass Variant */}
<MagneticLiquidButton
variant="glass"
size="lg"
rightIcon={<ArrowRight className="h-4 w-4 text-neutral-300" />}
>
Frosted Glass
</MagneticLiquidButton>
</div>
{/* Size Scale Preview */}
<div className="flex flex-wrap items-center justify-center gap-4 pt-4 border-t border-neutral-800/80">
<MagneticLiquidButton variant="cosmic" size="sm">
Small
</MagneticLiquidButton>
<MagneticLiquidButton variant="cosmic" size="md">
Medium
</MagneticLiquidButton>
<MagneticLiquidButton variant="cosmic" size="lg">
Large
</MagneticLiquidButton>
</div>
</div>
);
}
export default MagneticLiquidButtonDemo;