Shine Border

RzShineBorder is a decorative animated overlay for cards, panels, and callouts. It does not wrap content, and should be placed inside a relatively positioned host container that also clips overflow. The effect is fully SSR-rendered and CSS-driven.

Under the Hood

This component uses an Alpine data object to compute the border style values in a CSP-safe way, then relies on CSS radial-gradients, masking/compositing, and inherited host radius via rounded-[inherit]. For predictable visuals, render it inside a host with relative overflow-hidden.

Basic Usage

Place the border as an overlay child inside a relative, overflow-hidden container.

Source

<div class="relative overflow-hidden rounded-xl border bg-card p-6">
    <RzShineBorder />
    <RzHeading Level="HeadingLevel.H3">Project Summary</RzHeading>
    <RzParagraph class="mb-0 text-sm">Decorative shine border over a static card container.</RzParagraph>
</div>

Multicolor Shine

Use multiple colors to create a more vibrant sweep around the host edge.

Source

<RzShineBorder ShineColors="@(new[] { ""#A07CFE"", ""#FE8FB5"", ""#FFBE7B"" })" />

Width and Speed Customization

Tune border thickness and animation loop duration for subtle or strong emphasis.

Source

<RzShineBorder BorderWidth="2" Duration="8" />
<RzShineBorder BorderWidth="1" Duration="20" />

Theme-Aware Integration

Choose colors from your design system at usage time; no client-side theme hook is required by the component.

Source

<RzShineBorder ShineColor="var(--foreground)" />
<RzShineBorder ShineColors="@(new[] { ""var(--primary)"", ""var(--accent)"", ""var(--secondary)"" })" />

Component Parameters

Property	Description	Type	Default
`BorderWidth`	Decorative border thickness in pixels.	`double`	`1`
`Duration`	Animation loop duration in seconds.	`double`	`14`
`ShineColor`	Single CSS color for the shine. Used when `ShineColors` is not provided; otherwise the component falls back to border token colors.	`string?`	`null`
`ShineColors`	Multi-stop colors in order. Non-empty values take precedence over `ShineColor`.	`IEnumerable<string>?`	`null`
`RespectReducedMotion`	Uses `motion-safe:animate-shine` when true, `animate-shine` when false.	`bool`	`true`
`class`	Merged onto the root slot classes.	`string?`	`null`
`style`	Applied to the root overlay element via unmatched attributes.	`string?`	`null`
`id`	Optional explicit element id; otherwise generated.	`string`	`auto`

Alpine API

RzShineBorder initializes with x-data="rzShineBorder" on an internal child element to compute style values from data attributes. It does not expose a public interactive API beyond its component parameters.

Events and Interoperability

This component emits no events and is decorative-only. Consumers compose it with host containers to control layout and theme context.