Shine Border

Installation

pnpm dlx @glinui/cli@latest add shine-border

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Token colors, Web Animations gated by motion level, logical RTL direction, a glass variant and no inline styles. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

ShineBorder differs from BorderBeam: the beam is a single travelling dot, the shine is a soft gradient that drifts around the whole edge. The parent must be `relative` and have a border radius, which the layer inherits.

Improvement over the original: no inline style object, no hardcoded black default, and the animation is removed from the DOM when motion is none or reduced.

Engines: the `engine` prop is not applicable. Looping css conic-gradient animation; not a reveal, so engines do not apply.

import { ShineBorder, Card } from "@glinui/ui"
// Omit `variant` to follow the ambient style (glinr by default).
export function ShineBorderVariants() {

import { ShineBorder, Card } from "@glinui/ui"


// Omit `variant` to follow the ambient style (glinr by default).
export function ShineBorderVariants() {
  return (
    <>
      <Card variant="glinr" className="relative">
        <ShineBorder borderWidth={2} />
        ...
      </Card>
      <Card variant="plain" className="relative">
        <ShineBorder borderWidth={2} />
        ...
      </Card>
      <Card variant="solid" className="relative">
        <ShineBorder borderWidth={2} />
        ...
      </Card>
      <Card variant="glass" className="relative">
        <ShineBorder borderWidth={2} />
        ...
      </Card>
    </>
  )
}

import { ShineBorder, Card } from "@glinui/ui"
export function ShineBorderTones() {
  return (

import { ShineBorder, Card } from "@glinui/ui"


export function ShineBorderTones() {
  return (
    <Card className="relative">
      <ShineBorder shineColor={["var(--tone-success)", "var(--color-accent)"]} />
      ...
    </Card>
  )
}

// A pricing row where the highlighted plan wears the shine.
import { ShineBorder, Card } from "@glinui/ui"
export function ShineBorderLayout() {

// A pricing row where the highlighted plan wears the shine.
import { ShineBorder, Card } from "@glinui/ui"


export function ShineBorderLayout() {
  return (
    <section className="grid gap-4 sm:grid-cols-3">
      ...
    </section>
  )
}

Accessibility

• Purely decorative: aria-hidden and pointer-events-none, never receives focus or intercepts clicks.
• Hidden under forced-colors so the parent keeps its real border.
• No information is conveyed by the animation.

Reduced Motion

The sweep only runs when the Glin motion level is full and prefers-reduced-motion is off. Otherwise the border renders as a static gradient frame.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { ShineBorder } from "@glinui/ui"