Skip to content
Components

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 colour instead of painting pure white. Honours prefers-reduced-motion - renders nothing when motion is reduced (a static band would read as a permanent artefact, 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 "@instruments/materia-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 artefact), so don't rely on it as persistent decoration.

Props

PropTypeDefaultDescription
visibleboolean | undefined

Drives fade in/out of the shine

radiusstring | number | undefined

Border radius of the sweep container (defaults to fully round)

classNamestring | undefined

Positional overrides forwarded to the sweep container

childrenReactNode

When provided, Shine wraps children in a relative container. When omitted, Shine assumes the nearest ancestor is already position: relative.

playOnceboolean | 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).

durationnumber | undefined

Override the default one-pass / loop sweep duration in seconds.

Also exports

  • interfaceShineProps

Composition

Builds on

FadeOverlay