Border Trail

Component 45

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 FormInputBorderTrail() {
  return (
    <div className="relative h-[160px] w-[260px] overflow-hidden rounded-md border border-zinc-950/10 bg-white text-zinc-700 outline-none dark:border-zinc-50/20 dark:bg-zinc-950 dark:text-zinc-300">
      <textarea className="h-full w-full resize-none rounded-md bg-transparent px-4 py-3 text-sm outline-none" />
      <BorderTrail
        className="bg-gradient-to-l from-blue-200 via-blue-500 to-blue-200 dark:from-blue-400 dark:via-blue-500 dark:to-blue-700"
        size={120}
      />
    </div>
  );
}