Animated Border Trail

Animated Border Trail is a React and Tailwind CSS card component from Motion Primitives, licensed MIT. Copy it and paste it into your project.

Motion Primitives MIT cards

What it is

Animated Border Trail is a React and Tailwind CSS card component from Motion Primitives, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Four free copies a week. No card.

No packages beyond the project baseline

Licence

This component comes from Motion Primitives and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Animated Border Trail

app/docs/border-trail/border-trail-card-1.tsx

import { BorderTrail } from '@/components/core/border-trail';

export function BorderTrailCard1() {
  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
        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>
  );
}

Similar components