ScrollFade

A gradient fade overlay for scroll containers. Place inside a relatively positioned container to indicate more content.

Calacatta Gold marble

Reclaimed oak plank

Brushed stainless steel

Terracotta hex tile

Sage linen weave

Board-formed concrete

Honed basalt

Cane webbing

Usage

import { ScrollFade, ScrollFadeProps } from "@instruments/materia-ui/components/scroll-fade";

Drop ScrollFade inside a position: relative scroll container instead of hand-writing a gradient - it renders the masked scrim for you (it's aria-hidden, purely decorative).
Match theme to the container's actual background (card/popover/…) - the scrim fades to that colour, so a mismatch leaves a visible seam.
Set position (start/end) and orientation to the edge with hidden content - end+vertical is the common "more below" bottom fade.

Prop	Type	Default	Description
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"base"`	Thickness of the fade gradient - height when vertical, width when horizontal.
orientation	`"horizontal" \| "vertical" \| null \| undefined`		Orientation of the gradient
position	`"end" \| "start" \| null \| undefined`		Position/direction of the fade - start: top for vertical, left for horizontal - end: bottom for vertical, right for horizontal
theme	`"popover" \| "muted" \| "background" \| "card" \| "gray" \| null \| undefined`		Background theme the gradient fades to

Used by