ShapeBlur
shape-blurMoves a softly blurred geometric highlight with damped pointer interaction.
Usage
Basic usage
Default is rounded rectangle stroke. When the mouse is close, the soft light circle will polish the edge of the shape; color foreground token.
Move the mouse to reveal the shape
<div className="relative h-64 overflow-hidden rounded-xl">
<ShapeBlur variation="round-rect" />
</div>Solid Circle
variation="circle-fill", circleSize Enlarge the polished area.
Mouse polish the filled circle
<ShapeBlur variation="circle-fill" circleSize={0.4} />Circle stroke + custom color
variation="circle-stroke", color passes any CSS color to override the default foreground color.
Mouse polishing ring
<ShapeBlur
variation="circle-stroke"
color="oklch(0.82 0.16 75)"
circleSize={0.35}
/>Triangle
variation="triangle", blue-purple filling.
Mouse polish triangle
<ShapeBlur
variation="triangle"
color="oklch(0.7 0.22 280)"
circleSize={0.32}
/>When to Use
Use it for restrained geometric decoration that appears under a soft pointer-following light, such as empty space in a hero or the base of a card. For merging fluid blobs, use MetaBalls; for image magnification, use Lens.
Import
import { ShapeBlur } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variation | "round-rect"|"circle-fill"|"circle-stroke"|"triangle" | "round-rect" | Shape presets (rounded rectangle stroke/solid circle/ring stroke/triangle fill) |
| shapeSize | number | 1.2 | Overall shape scale mapped to the GLSL u_shapeSize uniform |
| roundness | number | 0.4 | Rounding degree, only round-rect takes effect, 0=right angle |
| borderSize | number | 0.05 | Stroke width, only stroke type (round-rect/circle-stroke) takes effect |
| circleSize | number | 0.3 | Soft circle radius that follows the mouse (buff area size) |
| circleEdge | number | 0.5 | Soft light round edge feathering, the bigger the softer it is |
| color | string | var(--color-foreground) | Shape main color, CSS color or token prefixed with --color- |
| damping | number | 8 | Mouse following damping, the larger it is, the faster it follows, and the smaller it is, the lazier it is |
| className | string | — | Additional class name for the root container div |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative without WebGL (default foreground radial glow div) |
Usage Guidelines
- The
colortoken must be prefixed with--color-, and the barevar(--primary)shader will not parse it; leavecolorblank in the showcase to use the default foreground. See [[hulian-token-color-var-needs-color-prefix]]. - WebGL/ogl component, client-side rendering only; StrictMode double-mounted canvas context reuse risk, see [[webgl-canvas-loseContext-poisons-strictmode-remount]].
- The component comes with
absolute inset-0 z-0, and the parent container needsrelative+overflow-hidden;roundness/borderSizeonly takes effect under the corresponding variation. Don’t forget to compare when changing the shape.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
Move the mouse to reveal the shape
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 270)" }}>
<ShapeBlur
variation="round-rect"
shapeSize={1.2}
roundness={0.4}
borderSize={0.05}
circleSize={0.3}
circleEdge={0.5}
damping={8}
/>
</div>