Visual Effects

Border Trail

An animated border with a trail of particles that travels along its edge — for frames, cards and callouts.

BorderTrail creates an animated border effect with trailing particles.

Usage

New Message

Alex Johnson

Hey, are we still meeting tomorrow?

2 min ago

Sam Wilson

Check out this new design I made

15 min ago

<template>
  <UCard
    class="relative overflow-hidden max-w-md mx-auto"
    :ui="{ body: 'rounded-lg' }"
  >
    <MBorderTrail
      class="bg-gradient-to-r from-blue-500 to-purple-600"
      :size="40"
      :transition="{ duration: 3, ease: 'easeInOut' }"
    />
    <template #header>
      <div class="flex items-center justify-between">
        <h3 class="text-xl font-bold text-highlighted">
          New Message
        </h3>
        <UBadge color="primary">
          3
        </UBadge>
      </div>
    </template>
    <div class="space-y-3">
      <div class="flex items-start space-x-3">
        <UAvatar
          src="https://avatars.githubusercontent.com/u/1?v=4"
          alt="User"
          size="md"
        />
        <div>
          <h4 class="font-medium text-highlighted">
            Alex Johnson
          </h4>
          <p class="text-sm text-muted">
            Hey, are we still meeting tomorrow?
          </p>
          <p class="text-xs text-muted mt-1">
            2 min ago
          </p>
        </div>
      </div>

      <div class="flex items-start space-x-3">
        <UAvatar
          src="https://avatars.githubusercontent.com/u/2?v=4"
          alt="User"
          size="md"
        />
        <div>
          <h4 class="font-medium text-highlighted">
            Sam Wilson
          </h4>
          <p class="text-sm text-muted">
            Check out this new design I made
          </p>
          <p class="text-xs text-muted mt-1">
            15 min ago
          </p>
        </div>
      </div>
    </div>

    <template #footer>
      <UButton
        color="primary"
        variant="solid"
        size="sm"
        class="w-full"
      >
        View All Messages
      </UButton>
    </template>
  </UCard>
</template>

Examples

John Doe

Senior Developer

<template>
  <UCard
    class="relative overflow-hidden max-w-sm"
    :ui="{ body: 'rounded-lg' }"
  >
    <MBorderTrail
      class="bg-gradient-to-r from-cyan-500 to-blue-500"
      :size="50"
      :transition="{ duration: 4, ease: 'easeInOut' }"
    />
    <template #header>
      <div class="flex flex-col items-center">
        <UAvatar
          src="https://avatars.githubusercontent.com/u/1?v=4"
          alt="Profile"
          size="xl"
          class="mb-4 ring-2 ring-cyan-500"
        />
        <h3 class="text-xl font-bold">
          John Doe
        </h3>
        <p class="text-muted">
          Senior Developer
        </p>
      </div>
    </template>
    <div class="flex gap-2 justify-center">
      <UButton color="neutral">
        Message
      </UButton>
      <UButton color="primary">
        Connect
      </UButton>
    </div>
  </UCard>
</template>

Customize

Size40

Transition

On Animation Complete

Props

Prop	Type	Default	Description
`class`	`string`	`undefined`	CSS classes to apply to the trail element.
`size`	`number`	`60`	Size of the trail element in pixels.
`transition`	`object`	`{ repeat: Infinity, duration: 5, ease: 'linear' }`	Animation transition options.
`onAnimationComplete`	`function`	`undefined`	Callback function when animation completes.
`style`	`object`	`undefined`	Custom styles to apply to the trail element.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.borderTrail in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]`
`trail`	-	`absolute aspect-square bg-accented`

Edit this pageorReport an issue

Border Beam

A comet of light that travels around a box's border as a stroked dash.

Confetti

A canvas burst of paper pieces, fired on demand — the celebration primitive behind milestones.