Scroll Shadow — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::ScrollShadow;
2use gpui::prelude::*;
3use gpui::px;
4
5ScrollShadow::new("scroll-shadow")
6    .max_h(px(180.))
7    .children((1..=14).map(|n| {
8        gpui::div().py(px(6.)).child(format!("Row {n} of fourteen"))
9    }),)

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

ScrollShadow

Scroll Shadow is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Scroll Shadow uses.

Styling

Scroll Shadow styling
Style	Description
`track_scroll + overflow_x_scroll / overflow_y_scroll`	Uses a tracked GPUI scroller with explicit gradient overlays.
`size(Pixels)`	Fade depth follows the size builder.
`orientation(Orientation)`	Orientation switches scroll axis and fade direction; wheel input from the other axis is not remapped.

API reference

Builders

Scroll Shadow builders
Builder	Type	Default	Description
`orientation(Orientation)`	`Orientation`	`Orientation::Vertical`	Axis along which content scrolls and fades appear.
`size(Pixels)`	`Pixels`	`40`	Depth of each fade gradient in pixels.
`offset(Pixels)`	`Pixels`	`0`	Scroll distance before the corresponding fade appears.
`is_enabled(bool)`	`bool`	`true`	Turns fade rendering and visibility reporting on or off.
`visibility(ScrollShadowVisibility)`	`ScrollShadowVisibility`	`ScrollShadowVisibility::Auto`	Controls which edge fades are eligible to render.
`on_visibility_change(callback)`	`Fn(visibility: ScrollShadowVisibility) -> ()`	—	Reports resolved visible edges when they change.

Parts

Scroll Shadow parts
Part	Description
`ScrollShadow`	Scrollable root plus edge-fade overlays.

States

Scroll Shadow states
Builder	State	Description
`ScrollHandle::offset + offset`	`Leading edge`	Leading fade appears after content moves beyond the configured offset.
`ScrollHandle::max_offset + offset`	`Trailing edge`	Trailing fade appears while more content remains after the viewport.
`ScrollShadowVisibility::Both`	`Both edges`	Both fades render when content can scroll in either direction.