Cards
Shine Border
A single highlight that travels around the edge of a box.
The Shine Border paints a gradient over the whole box and then masks it down to the padding ring, which leaves a highlight running around the border. Because the mask is derived from the box itself, the ring follows whatever radius you give the wrapper.
It animates background-position, so the loop is pure CSS and costs nothing on the main thread.
Usage
Shine Border
A single highlight travels around the edge of the box, forever.
<template>
<MShineBorder
class="w-full max-w-sm p-6"
:border-width="2"
:duration="8"
color="#3b82f6"
>
<div class="flex flex-col gap-2">
<h3 class="text-lg font-semibold text-highlighted">
Shine Border
</h3>
<p class="text-sm text-muted">
A single highlight travels around the edge of the box, forever.
</p>
</div>
</MShineBorder>
</template>
Examples
Customize
Motion primitive
Hover, drag or scroll to interact
Customize
Color
Duration14
Border Width1
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'var(--ui-primary)' | Colour of the travelling highlight. Any CSS colour works. |
duration | number | 14 | Seconds for one full loop of the highlight. |
borderWidth | number | 1 | Thickness of the lit ring, in pixels. |
class | string | '' | CSS classes to apply to the wrapper. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.shineBorder in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | relative rounded-xl border border-default bg-default |
shine | - | shine pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position] |