# VS Modules / Blur

Progressive backdrop blur with no runtime dependencies beyond React. Adapt Blur.tsx to the project's existing framework; the effect is CSS, with no listeners, animation library or stylesheet. Use existing typography and layout.

Place <Blur intensity={8} direction="top" size={96} /> after content inside a positioned container. For scrolling content, keep Blur beside the scrolling element inside a stationary positioned wrapper so it stays at the viewport edge. The overlay covers its parent. For content fade, use <Blur intensity={8} fade={0.8}><YourScrollableContent /></Blur> inside that positioned container. Blur wraps its children in a stationary mask and renders its filters beside the mask; it never duplicates content. Control stacking with the host layout or className/style.

Props: intensity is the maximum layer blur radius in CSS pixels (default 8, any finite non-negative value with no upper limit; 0 disables it). The playground labels XS/SM/MD/LG/XL map to 0/4/8/12/20px; they do not restrict the numeric prop, so intensity={3.5} or intensity={80} also work. direction is the strongest edge: top (default), right, bottom, left, x (left + right), or y (top + bottom). size is the depth of each edge in pixels (default 96), capped at half the container to preserve a clear center. Zero size disables the effect. fade sets edge opacity from 0 to 1 (default 0), independently of intensity; pass children for fade to apply. intensity={0} with fade={0.8} gives fade only. The playground defaults to fade={0.2}: content is 80% opaque at the edge, reaching full opacity at size pixels. The mask reveals the actual host background, so no fade color is needed. className and style integrate with the host layout. Negative values become zero; fade is clamped to 0–1, and non-finite values use defaults.

Two broad masked backdrop-filter layers per edge blend half and full blur strength toward that edge. Each mask increases continuously toward the edge, without narrow bands or intermediate fade-outs. The filter masks control blur strength. Optional fade follows a smoothstep curve with flat endpoints and masks the children independently, revealing the host surface with no colored overlay. Standard and WebKit filter/mask properties are included. Unsupported browsers leave the content sharp. Ancestor masks, filters and opacity can limit what backdrop filters sample; keep the overlay in the same stacking context as the content and verify the host layout in supported browsers.

Decorative layers are hidden from assistive technology and never intercept pointer events. Keep source content accessible and interactive; do not clone it for the effect. Avoid placing essential controls beneath strong blur. No motion or scroll-driven JavaScript is needed. The content wrapper stays mounted when effects are disabled, preserving child state and scroll position. Fade stops are calculated only when fade is enabled with children and nonzero size. Use small edge regions and conservative intensity for rendering cost. The playground is only a demonstration; do not copy its gallery or controls into integrations.

Example: https://visual.systems/api/modules/blur/example.tsx