Animated Gradient Border

Cards 876

About

Animated Border, Border animation, border gradient, animated border gradient, border rotate, border rotate animation, border rotation animation, card

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Gradient Border to your project and fits it to your theme.

Code

How Animated Gradient Border is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BorderRotate } from "@/components/ui/animated-gradient-border";
import { Star, Zap, Shield, Heart, Download, Play, Settings, User, Mail, Phone } from "lucide-react";

function Default() {
  return (
    <BorderRotate className="w-96 h-65">
    </BorderRotate>
  );
}


function FastAnimation() {
  return (
    <BorderRotate
      animationSpeed={0.8}
      gradientColors={{
        primary: '#7f1d1d',
        secondary: '#dc2626',
        accent: '#f87171'
      }}
      backgroundColor="#410d0dff"
      className="p-6"
    >
      <div className="text-white text-center space-y-4">
        <div className="flex justify-center mb-4">
          <Shield className="w-8 h-8 text-red-400" />
        </div>
        <h3 className="text-xl font-semibold mb-2">Security First</h3>
        <p className="text-gray-300 mb-4">0.5s rotation speed with vivid red theme</p>
        <div className="grid grid-cols-2 gap-3">
          <button className="px-3 py-2 bg-red-600 hover:bg-red-500 rounded-lg transition-colors text-sm">
            <Shield className="w-4 h-4 inline mr-1" />
            Secure
          </button>
          <button className="px-3 py-2 border border-red-400 hover:border-red-300 rounded-lg transition-colors text-sm">
            <Download className="w-4 h-4 inline mr-1" />
            Download
          </button>
        </div>
      </div>
    </BorderRotate>
  );
}

function StopOnHover() {
  return (
    <BorderRotate
      animationMode="stop-rotate-on-hover"
      gradientColors={{
        primary: '#581c87',
        secondary: '#7c3aed',
        accent: '#a855f7'
      }}
      backgroundColor="#271832ff"
      className="p-6"
    >
      <div className="text-white text-center space-y-4">
        <div className="flex justify-center mb-4">
          <User className="w-8 h-8 text-purple-400" />
        </div>
        <h3 className="text-xl font-semibold mb-2">User Profile</h3>
        <p className="text-gray-300 mb-4">Animation pauses on hover - purple theme</p>
        <div className="space-y-3">
          <div className="flex gap-2 justify-center">
            <button className="px-3 py-2 bg-purple-600 hover:bg-purple-500 rounded-lg transition-colors">
              <Mail className="w-4 h-4 inline mr-1" />
              Message
            </button>
            <button className="px-3 py-2 bg-purple-600 hover:bg-purple-500 rounded-lg transition-colors">
              <Phone className="w-4 h-4 inline mr-1" />
              Call
            </button>
          </div>
          <div className="text-sm text-purple-300">
            Premium Member Since 2024
          </div>
        </div>
      </div>
    </BorderRotate>
  );
}

export {
  Default,
  FastAnimation,
  StopOnHover,
};