GradualBlur
gradual-blurBuilds a layered directional blur that increases gradually across content.
Usage
Basic usage
Put it into the container of relative + overflow-hidden, and apply a layer of progressive softening from clear to blur along the edge specified by position.
Hulian component library
Enterprise level · High quality · Progressive blur welt
<div className="relative h-64 overflow-hidden rounded-xl">
{/* ...lower content... */}
<GradualBlur position="bottom" height="7rem" />
</div>Strong blur · Exponentially increasing
strength improves the overall viscosity, divCount adds more layers to make the transition more delicate, and exponential makes the near edges sharply opaque.
Hulian component library
Enterprise level · High quality · Progressive blur welt
<GradualBlur
position="top"
height="8rem"
strength={4}
divCount={8}
exponential
/>Vertical welt · Curve
position Set left/right to run the vertical bar, width to control the thickness, and curve to switch the climbing curve.
Hulian component library
Enterprise level · High quality · Progressive blur welt
<GradualBlur
position="right"
width="9rem"
strength={2.5}
divCount={6}
curve="bezier"
/>Hover enhancement
After hoverIntensity is passed, the container takes over the pointer event, and the blur amount is enlarged by multiples when the mouse is moved up.
Hulian component library
Enterprise level · High quality · Progressive blur welt
<GradualBlur
position="bottom"
height="7rem"
strength={1.5}
hoverIntensity={2}
/>When to Use
Attach it to an edge of a scroller or image wall to soften content as it approaches the boundary, often at the top or bottom of a long list. It uses backdrop-filter to blur underlying content instead of drawing an opaque mask. Use BorderBeam for a decorative border highlight. The parent must be positioned with relative.
Import
import { GradualBlur } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| position | "top"|"bottom"|"left"|"right" | "bottom" | The side where the fuzzy bar abuts; top/bottom are horizontal bars, left/right are vertical bars |
| strength | number | 2 | Blur strength base, each layer increases according to the curve, recommended 1–6 |
| height | string | "6rem" | Horizontal bar thickness; if width is not passed in vertical bar mode, this value will be reused as vertical bar width |
| width | string | — | Vertical bar (left/right) width, the default falls back to height |
| divCount | number | 5 | The more blur layers you add, the more delicate the transition will be and the more performance you will need. It is recommended 3–10 |
| exponential | boolean | false | Exponentially increasing blur amount (near edges become blurry sharply), false=linear |
| curve | "linear"|"bezier"|"ease-in"|"ease-out"|"ease-in-out" | "linear" | The climbing curve of the blur amount of each layer along the progress |
| opacity | number | 1 | Overall opacity |
| hoverIntensity | number | — | Blur multiplier on hover. Providing it enables pointer events; when omitted, the overlay does not block interaction |
| revealOnScroll | boolean | false | Fade in when entering the viewport (IntersectionObserver driver), invisible by default when turned on |
| duration | string | "0.3s" | Fade-in transition duration, only valid for revealOnScroll |
| zIndex | number | 10 | Overlaid z-index |
| className | string | — | Root container additional className |
| style | CSSProperties | — | Forward the root container inline style (merged with the internal calculation style, the same name shall prevail) |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content covered on the blur layer (such as edge title/operation bar) |
Usage Guidelines
- Working with
backdrop-filter: If the ancestor element itself carriesfilter/backdrop-filter/transform, a new containing block will be created, and the fixed/absolute positioning of the blur layer may be misaligned and invalid, see [[backdrop-filter-ancestor-breaks-fixed-overlay-centering]]. - When
hoverIntensityis omitted, the container usespointer-events: none, allowing interaction with content underneath. Providing it enables pointer handling, so avoid covering clickable content. - When
widthis not passed, the vertical bar width reuses theheightvalue. This is an intentional design. Do not mistake it for a bug.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
Hulian component library
Enterprise level · High quality · Progressive blur welt
<div className="relative h-64 overflow-hidden rounded-xl bg-surface">
{/* ...lower content... */}
<GradualBlur
position="bottom"
strength={2}
divCount={5}
exponential={false}
/>
</div>