ShineBorder
shine-borderAnimates a gradient sheen around an element border.
Usage
Basic usage
ShineBorder is the absolute inset-0 streamer frame layer. Put it into the relative + rounded container to get the flowing shimmer of the entire frame. Default chart three-color gradient.
<div className="relative h-40 w-72 overflow-hidden rounded-xl bg-surface">
<div className="grid h-full place-items-center text-sm text-muted">Shine Border</div>
<ShineBorder />
</div>Solid color · Thick edges
shineColor passes a single CSS color/token which is a single color streamer; borderWidth adjusts the border thickness.
<ShineBorder borderWidth={2} shineColor="var(--color-primary)" />Multi-color · Speed adjustment
shineColor passes the color array to form a multi-segment gradient; duration controls the number of seconds for one round of the streamer (the larger it is, the slower it is).
<ShineBorder
shineColor={["var(--color-chart-2)", "var(--color-chart-4)", "var(--color-chart-1)"]}
duration={8}
/>When to Use
Use it when you want the entire border of the card/container to continuously flow gradient streamer (pure CSS, can be rendered on the RSC server). It is an absolute positioning cover that can be placed into the relative container. If you want a light point to go around the edge instead of a full-edge streamer, use BorderBeam; if you want to hover a light point diagonally and sweep a reflection, use GlareHover.
Import
import { ShineBorder } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| borderWidth | number | 1 | Border width px |
| duration | number | 14 | Duration of one gradient cycle in seconds |
| shineColor | string | string[] | Hulian chart token | Streamer color, single color or multi-color array |
| className | string | — | Additional class name for the overlay |
| style | CSSProperties | — | Inline styles forwarded to the overlay |
Usage Guidelines
- Must be placed in the
position:relativecontainer, otherwise the border will be positioned incorrectly. shineColorfeeding token needs to be prefixed with--color-, and barevar(--primary)does not resolve - see [[hulian-token-color-var-needs-color-prefix]].- Pure CSS implementation, can be used directly in RSC, no need for
"use client".
Related
BorderBeam · GlareHover · Lens · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
<div className="relative">
...content
<ShineBorder borderWidth={1} duration={14} />
</div>