Shine

A band of light that sweeps across a button or card on hover and keyboard focus.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/shine.json

React
import Shine from "@/components/fx/shine"

<Shine><button>Upgrade to Pro</button></Shine>

Wraps the child without cloning it, so its role, props and focus are untouched.
Keyboard focus inside triggers the same sweep as hover.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) removes the sweep.

Prop	Type	Default	Description
children	ReactNode	—	Usually a button, link or card.
radius	number \| string	8	Corner radius to match the child.
color	string	white, 35%	Colour of the light band.