FadeOverlay

Fades a decorative overlay (a border beam, a shine sweep, …) in and out with visible, keeping it MOUNTED through its fade-out exit so the overlay's animation rAF loop survives until the fade completes - then unmounts it. Honours prefers-reduced-motion by rendering nothing but children (a static decorative band would read louder than the animation it replaces). Use as a wrapper (pass children) or a bare overlay (omit them). This is the shared exit-animation lifecycle that backs BorderBeam and Shine.

Sample selected

Usage

import { FadeOverlay, FadeOverlayProps } from "@instruments/materia-ui/components/fade-overlay";

Best practices

Reach for FadeOverlay to fade a decorative overlay in/out - it keeps the overlay mounted through its fade-out so the animation's rAF loop survives, then unmounts it; don't hand-roll that lifecycle.
It's the shared engine behind BorderBeam and Shine - prefer those named components for their specific looks; drop to FadeOverlay directly only for a new overlay effect.
Needs ReducedMotionProvider; under reduced motion it renders only children (a static band would read louder than the animation), so the overlay doesn't appear.

Props

Prop	Type	Description
visible(required)	`boolean`	Drives the fade in/out of the overlay.
radius(required)	`string \| number`	Border radius of the fade container.
overlay(required)	`ReactNode`	The decorative overlay content (border beam, shine sweep, …).
className	`string \| undefined`	Positional overrides forwarded to the fade container.
children	`ReactNode`	Optional wrapped content. When provided, the overlay wraps it in a `relative` box; when omitted, the overlay assumes its nearest ancestor is already `position: relative`.

Also exports

interfaceFadeOverlayProps

Composition

Used by

BorderBeam, Shine