Scroll shadow | RiseUI

Edge fades for scrollable overflow — HeroUI ScrollShadow parity (vertical, horizontal, size, hide scrollbar, visibility).

Usage

`Default`: max height 240px, padding 16 — lorem paragraphs like Storybook `LoremContent`.

SizedBox(
  height: 240,
  child: RiseScrollShadow(
    child: ListView(
      padding: EdgeInsets.all(16),
      children: [
        // … lorem paragraphs
      ],
    ),
  ),
)

Variants

Fade vs blur edge treatment (`RiseScrollShadowEffect` — Storybook “Fade / Blur” labels).

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Fade (opacity effect)'),
    SizedBox(
      height: 240,
      child: RiseScrollShadow(
        effect: RiseScrollShadowEffect.fade,
        child: listView,
      ),
    ),
    Text('Blur (blur effect)'),
    SizedBox(
      height: 240,
      child: RiseScrollShadow(
        effect: RiseScrollShadowEffect.blur,
        child: listView,
      ),
    ),
  ],
)

Orientation

`Orientation`: vertical surface + horizontal doc image strip (`LoremCards`).

Column(
  children: [
    RiseSurface(
      child: SizedBox(
        height: 240,
        child: RiseScrollShadow(child: verticalList),
      ),
    ),
    SizedBox(
      height: 112,
      child: RiseScrollShadow(
        axis: Axis.horizontal,
        child: horizontalImageCards,
      ),
    ),
  ],
)

Hide scrollbar

`hideScrollBar` — webkit-style hidden scrollbar ([scroll-shadow.css](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/scroll-shadow.css) `.scroll-shadow--hide-scrollbar`).

SizedBox(
  height: 240,
  child: RiseScrollShadow(
    hideScrollBar: true,
    child: ListView(...),
  ),
)

Custom size

`CustomSize`: 20px · 40px (default) · 80px shadow extent.

SizedBox(
  height: 200,
  child: RiseScrollShadow(
    size: 40,
    child: ListView(...),
  ),
)

Visibility state

`VisibilityChange`: vertical + horizontal `onVisibilityChange` with state panels.

RiseScrollShadow(
  onVisibilityChange: (v) => setState(() => _vertical = v),
  child: ListView(...),
)

With card

`WithCard`: terms shell, `height: 300`, `size: 80`, footer actions.

SizedBox(
  height: 300,
  child: RiseScrollShadow(
    size: 80,
    child: ListView(...),
  ),
)