Shine Border

A band of colour that slides steadily along a border, so the edge seems to catch the light. Wrap a card or a field.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

Team plan

Shared workspaces and single sign-on.

import { ShineBorder } from "@rdloom/react";

export default function ShineBorderBasicExample() {
  return (
    <ShineBorder className="w-72 rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)] p-5">
      <h3 className="font-semibold">Team plan</h3>
      <p className="pt-1 text-sm text-[var(--rd-color-text-muted)]">Shared workspaces and single sign-on.</p>
    </ShineBorder>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add shine-border

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

It also adds rdloom-motion.css next to your tokens and imports it from the tokens file, once: no setup, and no inline styles. The plain components you already use are untouched.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/shine-border.json

Works, but without upgrade tracking, and you import the motion CSS yourself.

Usage

import { ShineBorder } from "@rdloom/react";

<ShineBorder className="w-72 rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)] p-5">
  <h3 className="font-semibold">Team plan</h3>
  <p className="pt-1 text-sm text-[var(--rd-color-text-muted)]">Shared workspaces and single sign-on.</p>
</ShineBorder>

Colors

Your own colours, speed and thickness.

import { ShineBorder } from "@rdloom/react";

export default function ShineBorderColorsExample() {
  return (
    <ShineBorder
      className="w-72 rounded-xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)] p-5"
      colors={["#f97316", "#ec4899", "#8b5cf6"]}
      duration={5}
      borderWidth={2}
    >
      <p className="text-sm">Your own colours, speed and thickness.</p>
    </ShineBorder>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`children`required The content the border surrounds.	`node`	none
`colors` Colours of the band, any CSS colours. Two or more.	`readonly string[]`	none
`duration` Seconds for the band to travel its length.	`number`	`8`
`borderWidth` Thickness of the border in pixels.	`number`	`1.5`
`isPaused` Stops the animation. Moving content that lasts more than five seconds should be stoppable.	`boolean`	`false`
`className` Classes for the wrapper: set its radius, background and border here.	`string`	none

Accessibility

Role none, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

Silent: the wrapper adds nothing to what is read

What your code must do

Decoration only: the animated layers are hidden from assistive technology and never take focus
Stands still for visitors who ask for less motion (prefers-reduced-motion), and the effect can also be shown still with the rdm-still class
The border is a pointer-transparent layer, so clicks and selection reach the content
The content inside keeps its own contrast and focus
Does not flash: nothing changes more than three times in a second (WCAG 2.3.1)
Optional: it is a separate component, so projects that do not add it carry none of its code

Guidelines

Use it when

A featured card or plan
A search or prompt field that should feel alive

Avoid it when

Large lists or tables

Don't

Many shining borders on one page

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-action-primary
--rd-color-feedback-warning
--rd-color-feedback-info
--rd-color-surface-default
--rd-color-border-default
--rd-radius-overlay