ProgressiveBlur

Overlay stacked backdrop-filter layers that increase blur towards one edge of a container.

ProgressiveBlur is a client component that renders its children followed by a series of masked backdrop-filter layers, producing a blur that grows towards the chosen edge. Use it to fade out the edge of scrolling lists or media. It depends on motion/react.

Morning standup

Design review

Release planning

Lunch break

Customer call

Code review

Retrospective

Wrap up

Import#

typescript

import { ProgressiveBlur } from "@reactberry/system/blocks";

Usage#

typescript

import { ProgressiveBlur } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function Feed() {
  return (
    <Box position="relative" height="400px" overflow="hidden" shape="rounded">
      <Box height="100%" overflow="auto" p="m">
        <Text as="p">Long scrolling content…</Text>
      </Box>
      <ProgressiveBlur
        position="absolute"
        left="0"
        right="0"
        bottom="0"
        height="120px"
        direction="bottom"
      />
    </Box>
  );
}

Examples#

Top edge#

Set direction="top" for lists that grow upwards, such as activity logs. More blurLayers and a higher blurIntensity give a stronger blur.

Build #482 passed

Deployed to staging

Review requested

Build #483 passed

Deployed to production

Wrapping content and fading in#

Pass content as children to blur over it directly. motionProps is spread onto every layer, here to fade the blur in on mount.

6 recent uploads

API#

ProgressiveBlur#

Prop	Type	Default	Description
`direction`	`"bottom""top""left""right"`	`"bottom"`	Edge with the strongest blur.
`blurLayers`	`number`	`8`	Number of blur layers. At least 2 layers are always rendered.
`blurIntensity`	`number`	`0.25`	Blur step in pixels; layer `i` uses `blur(i * blurIntensity px)`.
`children`	`ReactNode`	—	Rendered before the blur layers.
`motionProps`	`Omit<HTMLMotionProps<"div">, "style">`	—	Spread onto every blur layer, for example to animate opacity.

All remaining BoxProps are spread onto the wrapper Box, which defaults to position="relative". The ProgressiveBlurProps type is exported from @reactberry/system/blocks.

Notes#

Each layer is absolutely positioned over the wrapper with pointer-events: none and borderRadius="inherit", and masked with a linear gradient at 0, 90, 180 or 270 degrees.
The first layer has 0px blur.
Segment size is computed from blurLayers, not the clamped layer count, so values below 2 produce uneven masks.
backdrop-filter blurs what is behind the layers, including children. Many layers or high intensity can be expensive to render.
There is no reduced-motion handling; the effect is static unless motionProps adds animation.
GRADIENT_ANGLES is exported from the component module but not from @reactberry/system/blocks.