← ui

scrims

ui

viewport fogs at top and bottom, scroll-linked, never transitioned

npx shadcn add @ag/scrims
section 1

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 2

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 3

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 4

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 5

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 6

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 7

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.

section 8

The top fog appears over the first 160px of scroll; the bottom one leaves over the last 140px. Neither ever transitions: both are where the scroll is.