# ProgressiveBlur

> A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.

## Facts

- **Product**: Crew OS
- **Family**: Effects
- **Global**: `window.DigitalCrew.ProgressiveBlur`
- **Source**: `digitalcrew-orchestrator: components/ui/progressive-blur.tsx`
- **Import in the app**: `import { ProgressiveBlur } from "@/components/ui/progressive-blur";`
- **Live preview**: /design/components/progressive-blur/preview.html
- **Page**: /design/components/progressive-blur

## Guidelines

**Use it for** softening where content is cut off: the ends of a logo strip, the bottom of a list that continues, an image caption area.

**What you provide**: `direction` (`top`, `right`, `bottom` default, `left`: the edge that is most blurred), `blurLayers` (default 8, minimum 2), `blurIntensity` (px added per layer, default 0.25), `className` to size and position it (usually `pointer-events-none absolute …`). Other Framer Motion div props are passed to every layer.

**Anatomy**: layer *i* applies `backdrop-filter: blur(i × blurIntensity px)` through a linear-gradient mask that is opaque over one segment and fades out over its neighbours (a segment is `1 / (blurLayers + 1)` of the length), so the blur ramps from 0 at the inner edge to `(blurLayers − 1) × blurIntensity` px at the outer edge (1.75px by default, 7px at intensity 1). Layers inherit the parent's radius.

**Behaviour**: static; the effect follows whatever scrolls or moves behind it. Backdrop filters cost GPU time, so keep the area small.

**Don't** cover text the user needs to read, stack several on one element, or use it as a replacement for a proper scroll affordance.

## API

```ts
export declare const GRADIENT_ANGLES: {
    top: number;
    right: number;
    bottom: number;
    left: number;
};
export type ProgressiveBlurProps = {
    direction?: keyof typeof GRADIENT_ANGLES;
    blurLayers?: number;
    className?: string;
    blurIntensity?: number;
} & HTMLMotionProps<'div'>;
export declare function ProgressiveBlur({ direction, blurLayers, className, blurIntensity, ...props }: ProgressiveBlurProps): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  var feed = [
    [I.Mail, "Claire Dubois opened “Q3 budget planning”", "2 min ago"],
    [I.Calendar, "Omar Haddad booked a demo for Tue 14:30", "18 min ago"],
    [I.MessageSquare, "Lena Fischer replied: “Send me the deck”", "1 h ago"],
    [I.Linkedin, "Marc Lefèvre accepted your invitation", "3 h ago"],
    [I.Phone, "Missed call from Brightline (+33 1 84 88 20 11)", "Yesterday"],
    [I.CheckCircle2, "Max finished enriching 128 prospects", "Yesterday"]
  ];
  function App() {
    return h("div", { className: "relative h-64 max-w-md overflow-hidden rounded-xl border bg-card" },
      h("ul", { className: "divide-y" }, feed.map(function (f) {
        return h("li", { key: f[1], className: "flex items-center gap-3 px-4 py-3 text-sm" },
          h(f[0], { className: "text-muted-foreground size-4 shrink-0" }),
          h("span", { className: "flex-1 truncate" }, f[1]),
          h("span", { className: "text-muted-foreground shrink-0 text-xs" }, f[2]));
      })),
      h(DC.ProgressiveBlur, { className: "pointer-events-none absolute inset-x-0 bottom-0 h-24", direction: "bottom", blurIntensity: 0.6 }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Effects

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.