Scrim

A directional gradient overlay that darkens one edge of its container, fading to transparent - used to keep light-on-image text (captions, labels, stats) legible over a photo. Place inside a position: relative ancestor. Purely decorative: renders aria-hidden and ignores pointer events.

Terrazzo Bianco

Usage

import { Scrim, ScrimDirection, ScrimIntensity, ScrimProps, scrimVariants } from "@instruments/materia-ui/components/scrim";

Best practices

Scrim is a decorative gradient for text-over-image legibility, not a modal backdrop - dialog / sheet dimming is built into those components.
Place it inside a position: relative ancestor; it renders aria-hidden and ignores pointer events, so it never blocks the content beneath.

Props

Prop	Type	Default	Description
direction	`ScrimDirection`		Which edge holds the dark stop; fades towards the opposite edge.
intensity	`ScrimIntensity`		Token stop set for the dark stop's opacity/shape.

Also exports

typeScrimDirection
typeScrimIntensity
interfaceScrimProps
constscrimVariants