Shine

A subtle diagonal specular sweep for drawing attention to interactive surfaces. Unlike a skeleton shimmer, Shine runs as an occasional flick with rest between passes — one quick highlight every few seconds — so it reads as "this surface is alive" rather than "content is loading". Pass playOnce for a single entrance sweep (then it fades out). Two usage shapes: 1. Wrapper — pass children and Shine wraps them in a relative box. 2. Overlay — render without children inside an existing relative parent. Uses mix-blend-mode: soft-light so the highlight harmonizes with the underlying color instead of painting pure white. Honours prefers-reduced-motion — renders nothing when motion is reduced (a static band would read as a permanent artifact, not a cue). When visible flips to false, the sweep fades out then unmounts so its rAF loop stops.

Ready to specify

Usage

import { Shine, ShineProps } from "@desk/ui/components/shine";

Best practices

Use Shine for a periodic "this surface is alive" flick on an interactive element — not for loading; a continuous text sweep is Shimmer and a content placeholder is Skeleton.
Use playOnce for entrance choreography that should not loop.
Either pass children (Shine wraps them in a relative box) or render it bare inside an existing position: relative parent — otherwise the sweep has nothing to overlay.
Needs ReducedMotionProvider; under reduced motion it renders nothing (a static band would look like a permanent artifact), so don't rely on it as persistent decoration.

Props

Prop	Type	Description
visible	`boolean \| undefined`	Drives fade in/out of the shine
radius	`string \| number \| undefined`	Border radius of the sweep container (defaults to fully round)
className	`string \| undefined`	Positional overrides forwarded to the sweep container
children	`ReactNode`	When provided, Shine wraps `children` in a relative container. When omitted, Shine assumes the nearest ancestor is already `position: relative`.
playOnce	`boolean \| undefined`	Run a single diagonal pass, then hide. Use for entrance cues. When false (default), the sweep loops with a rest interval.
onPlayComplete	`(() => void) \| undefined`	Fires after a `playOnce` sweep finishes (and the overlay has faded out).
duration	`number \| undefined`	Override the default one-pass / loop sweep duration in seconds.

Also exports

interfaceShineProps

Composition

Builds on

FadeOverlay