GradualBlur

Keep the parent position: relative and overflow: hidden for card-local fades; use target="page" only for fixed viewport chrome.
Increase divCount for smoother fades, then tune strength; very high layer counts multiply backdrop-filter work.
Prefer presets for common headers/footers and override one or two props instead of repeating the whole parameter matrix.
Do not put interactive controls under the overlay unless hoverIntensity is required; by default the overlay is pointer-transparent.
Check contrast in both themes because backdrop-filter output depends on the content behind the overlay.

API Reference

Props

Prop	Type	Default	Description
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Edge where the blur overlay is anchored and the mask gradient direction is derived.
`strength`	`number`	`2`	Multiplier used to calculate each layer's blur radius.
`height`	`string`	`'6rem'`	Overlay thickness for top/bottom positions; also used as fallback width for left/right positions.
`width`	`string`	-	Overlay width. Top/bottom default to `100%`; left/right fall back to `height` when omitted.
`divCount`	`number`	`5`	Number of masked blur layers; values below `1` are clamped to one layer.
`exponential`	`boolean`	`false`	Uses exponential blur scaling instead of linear per-layer blur scaling.
`curve`	`'linear' \| 'bezier' \| 'ease-in' \| 'ease-out' \| 'ease-in-out'`	`'linear'`	Curve used to distribute blur progression across layers.
`opacity`	`number`	`1`	Opacity applied to every blur layer.
`animated`	`boolean \| 'scroll'`	`false`	Enables opacity/filter transitions; `'scroll'` waits for intersection visibility before fading in.
`duration`	`string`	`'0.3s'`	CSS duration used by opacity and blur transitions.
`easing`	`string`	`'ease-out'`	CSS easing used by opacity and blur transitions.
`zIndex`	`number`	`1000`	Base z-index. Page-target overlays add `100` to this value.
`target`	`'parent' \| 'page'`	`'parent'`	`parent` renders absolute positioning; `page` renders fixed positioning.
`hoverIntensity`	`number`	-	Multiplies blur strength while hovered and enables pointer events on the overlay.
`responsive`	`boolean`	`false`	Enables viewport-width based height/width overrides and installs a debounced resize listener.
`mobileHeight`	`string`	-	Height used at viewport widths `<= 480px` when `responsive` is enabled.
`tabletHeight`	`string`	-	Height used at viewport widths `<= 768px` when `responsive` is enabled.
`desktopHeight`	`string`	-	Height used at viewport widths `<= 1024px` when `responsive` is enabled.
`mobileWidth`	`string`	-	Width used at viewport widths `<= 480px` when `responsive` is enabled.
`tabletWidth`	`string`	-	Width used at viewport widths `<= 768px` when `responsive` is enabled.
`desktopWidth`	`string`	-	Width used at viewport widths `<= 1024px` when `responsive` is enabled.
`preset`	`'top' \| 'bottom' \| 'left' \| 'right' \| 'subtle' \| 'intense' \| 'smooth' \| 'sharp' \| 'header' \| 'footer' \| 'sidebar' \| 'page-header' \| 'page-footer'`	-	Applies a preset config first; explicitly provided props still override preset values.
`gpuOptimized`	`boolean`	`false`	Adds `will-change: backdrop-filter, opacity` and `translateZ(0)` to the overlay.
`onAnimationComplete`	`() => void`	-	Called after a scroll-triggered overlay becomes visible and the configured duration elapses.
`className`	`string`	`''`	Extra class appended to the root element.
`style`	`CSSProperties`	`{}`	Extra inline style merged into the root style after generated positioning styles.

Slots

Slot	Description
`default`	Optional content rendered above the blur layers inside the overlay root.

Events

No Vue events are emitted. Use onAnimationComplete when animated="scroll" needs a completion hook.

Overview

Presets are merged first; props explicitly present on the component override preset values.
position controls both edge anchoring and mask-gradient direction. Vertical edges use height; horizontal edges use width or fall back to height.
target="parent" renders position: absolute; target="page" renders position: fixed, uses full viewport width for vertical edges, and adds 100 to zIndex.
divCount is floored and clamped to at least one layer. Each layer receives its own mask band and backdrop-filter blur value.
hoverIntensity enables pointer events and multiplies strength only while the overlay is hovered.
animated="scroll" starts hidden, observes the root with IntersectionObserver, and calls onAnimationComplete after the configured duration once visible.
responsive installs a debounced resize listener and applies mobile/tablet/desktop dimensions by viewport width (<=480, <=768, <=1024).
style is merged after generated positioning styles, so parent pages can deliberately override coordinates.

Technologies

Accessibility note: The blur root is decorative and pointer-transparent by default. Enabling hoverIntensity turns on pointer events, so keep it away from focusable controls unless the hover boost is essential.
Verified coverage: gradual-blur.test.ts verifies configured layer rendering, slot content, page-target positioning and z-index offset, GPU styles, preset merging with divCount clamping, hover-strength changes, and responsive dimensions.
Component source: packages/tuffex/packages/components/src/gradual-blur/src/TxGradualBlur.vue.
Types: packages/tuffex/packages/components/src/gradual-blur/src/types.ts exports GradualBlurProps and the position, curve, animated, and target unions.
Export alias: packages/tuffex/packages/components/src/gradual-blur/index.ts exports GradualBlur, TxGradualBlur, GradualBlurProps, and TxGradualBlurInstance.
Coverage: packages/tuffex/packages/components/src/gradual-blur/__tests__/gradual-blur.test.ts covers layer generation, presets, page targeting, GPU optimization, hover intensity, and responsive sizing.

查看源码

packages/tuffex/packages/components/src/gradual-blur/index.ts