Effect 14 - Context-Aware Hover Cards Blur
Free
A context-aware hover card grid with centered logos and a cursor-reactive blur spotlight layer for a sleek premium feel.
Original concept by @jh3yy
Finder
Photos
Spotify
Signal
Loading code...
Starwind Dependencies
Sign in to view code and copy install commands.
Sign inThis component requires Starwind Pro.
Get lifetime access to all premium components, updates, and priority support.
Upgrade to ProFailed to load code. Please try again.
Code
Usage
<Effect14
icon-blur={28}
icon-saturate={5}
icon-brightness={1.3}
icon-contrast={1.4}
icon-scale={3.4}
icon-opacity={0.25}
border-width={3}
border-blur={0}
border-saturate={1}
border-brightness={2.5}
border-contrast={2.5}
exclude={false}
use-css-blur={true}
/>Props
| prop | type | default | description |
|---|---|---|---|
cards | HoverBlurCardItem[] | defaultCards | Cards rendered in the hover blur grid. |
iconBlur | number | 28 | Blur intensity for the spotlight icon layer. |
iconSaturate | number | 5 | Saturation multiplier for the blurred icon layer. |
iconBrightness | number | 1.3 | Brightness multiplier for the blurred icon layer. |
iconContrast | number | 1.4 | Contrast multiplier for the blurred icon layer. |
iconScale | number | 3.4 | Scale applied to the blurred icon layer. |
iconOpacity | number | 0.25 | Opacity applied to the blurred icon layer. |
borderWidth | number | 3 | Card border width in pixels. |
borderBlur | number | 0 | Backdrop blur applied to the card border. |
borderSaturate | number | 1 | Saturation multiplier applied to the card border backdrop. |
borderBrightness | number | 2.5 | Brightness multiplier applied to the card border backdrop. |
borderContrast | number | 2.5 | Contrast multiplier applied to the card border backdrop. |
exclude | boolean | false | Dims non-hovered card blur layers when enabled. |
useCssBlur | boolean | true | Uses CSS blur when true and the SVG filter when false. |
instanceId | string | number | "0" | Unique suffix for the SVG filter id when rendering multiple instances. |