Border Trail

Cards 174

About

Animated border effect that moves along the edges of its parent container.

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

Code

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

Usage.tsx

"use client";

import { BorderTrail } from "@/components/ui/border-trail";

export function LoadingCardBorderTrail() {
  return (
    <div className="relative flex h-[200px] w-[300px] flex-col items-center justify-center rounded-md bg-zinc-200 px-5 py-2 dark:bg-zinc-900">
      <BorderTrail
        style={{
          boxShadow:
            "0px 0px 60px 30px rgb(255 255 255 / 50%), 0 0 100px 60px rgb(0 0 0 / 50%), 0 0 140px 90px rgb(0 0 0 / 50%)",
        }}
        size={100}
      />
      <div
        className="flex h-full animate-pulse flex-col items-start justify-center space-y-2"
        role="status"
        aria-label="Loading..."
      >
        <div className="h-1 w-4 rounded-[4px] bg-zinc-600"></div>
        <div className="h-1 w-10 rounded-[4px] bg-zinc-600"></div>
        <div className="h-1 w-12 rounded-[4px] bg-zinc-600"></div>
        <div className="h-1 w-12 rounded-[4px] bg-zinc-600"></div>
        <div className="h-1 w-12 rounded-[4px] bg-zinc-600"></div>
      </div>
    </div>
  );
}