Examples

Border Trail Loading Card

Border Trail Textarea

Installation

Usage

BorderTrail is a client component and decorative overlay. The parent must be relative with a matching border-radius (the trail inherits rounding via rounded-[inherit]).

import { BorderTrail } from '@/components/sora-ui/effects/border-trail';

export function BorderTrailCard() {
  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-800">
      <BorderTrail
        size={100}
        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%)',
        }}
      />
      <div className="flex h-full animate-pulse flex-col items-start justify-center space-y-2">
        <div className="h-1 w-4 rounded-[4px] bg-zinc-600" />
        <div className="h-1 w-10 rounded-[4px] bg-zinc-600" />
        <div className="h-1 w-12 rounded-[4px] bg-zinc-600" />
      </div>
    </div>
  );
}

When prefers-reduced-motion: reduce is set, the looping trail is replaced by a subtle static ring. Finite animations (e.g. the loading card) still call onAnimationComplete after the equivalent duration. See Accessibility.

Props

When to Use

Use BorderTrail to draw attention to a selected card, active form field, or featured section. Common patterns: loading skeleton cards that feel alive while data fetches, focused textareas that need stronger visual feedback than a plain outline, and featured cards in a grid that should stand out from inactive siblings.

Avoid applying it to every card simultaneously — the spotlight loses meaning when nothing is actively selected.

Accessibility

BorderTrail is a decorative overlay with no semantic role or interactive affordance. Screen readers ignore it. When prefers-reduced-motion: reduce is set, the looping animation is replaced by a static ring so the visual hint remains without motion.

Credits

Inspired by motion-primitives Border Trail.