Backgrounds & Visuals
Ghostly Focus
Interactive mouse-following blur effect with spotlight reveal.
blurghostfocusinteractivemouse
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #171717 | Background color |
baseBlobColor | string | #262626 | Base blob color |
baseBlobSize | string | 16rem | Base blob size |
baseBlobBlur | string | 80px | Base blob blur |
baseBlob1Position | string | top-10 left-10 | First base blob position |
baseBlob2Position | string | bottom-10 right-10 | Second base blob position |
focusBlobColor | string | rgba(255, 255, 255, 0.05) | Focus blob color |
focusBlobSize | string | 500px | Focus blob size |
focusBlobBlur | string | 60px | Focus blob blur |
springStiffness | number | 50 | Spring physics stiffness |
springDamping | number | 20 | Spring physics damping |
noiseOpacity | number | 0.2 | Noise overlay opacity |
noiseBaseFrequency | string | 1.5 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Focus | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |