ProgressiveBlur

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.

Facts#

Group	Effects
Product	Crew OS
Global	window.DigitalCrew.ProgressiveBlur
Source	digitalcrew-orchestrator: components/ui/progressive-blur.tsx
Import in the app	import { ProgressiveBlur } from "@/components/ui/progressive-blur";

API#

TypeScript declarations emitted from components/ui/progressive-blur.tsx.

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#