Shape Blur
Interactive shape blur effects with Three.js shaders and mouse tracking
Usage
import ShapeBlur from './ShapeBlur';
<div style={{position: 'relative', height: '500px', overflow: 'hidden'}}>
<ShapeBlur
variation={0}
pixelRatioProp={window.devicePixelRatio || 1}
shapeSize={0.5}
roundness={0.5}
borderSize={0.05}
circleSize={0.5}
circleEdge={1}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variation | number | 0 | Shape variation (0-3) |
pixelRatioProp | number | 2 | Pixel ratio for rendering |
shapeSize | number | 1.2 | Size of the main shape |
roundness | number | 0.4 | Roundness of corners |
borderSize | number | 0.05 | Size of the border |
circleSize | number | 0.3 | Size of the cursor circle |
circleEdge | number | 0.5 | Edge softness of cursor |