Animated Border

Cards 32

About

A card or container border with a glowing light that travels around its edge, used to draw attention to featured content.

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

Code

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

Usage.tsx

import { AnimatedBorder } from "@/components/ui/animated-border";

export default function AnimatedBorderDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-10">
      <AnimatedBorder className="w-72">
        <div className="flex flex-col gap-2 p-6">
          <h3 className="text-sm font-medium">Default</h3>
          <p className="text-sm text-muted-foreground">
            The primary colour, six seconds a lap.
          </p>
        </div>
      </AnimatedBorder>
    </div>
  );
}