Spotlight Card
Spotlight Card
Hover over this card to see the spotlight effect follow your cursor
Feature
Interactive
Effect
Spotlight
Style
Modern
Customize Spotlight Card
Red0
Green229
Blue255
Alpha (Opacity)0.2
Preview Colorrgba(0, 229, 255, 0.2)
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Spotlight Card | The main title displayed on the card |
| description | string | An interactive spotlight effect card with smooth animations | Description text shown below the title |
| spotlightColor | string | #60496e | Color of the spotlight effect |
| spotlightSize | string | 300px | Size of the spotlight effect |
| spotlightIntensity | number | 0.8 | Intensity of the spotlight effect (0-1) |
| backgroundColor | string | #0a0f1e | Background color of the card |
| borderColor | string | #60496e | Border color of the card |
| enableGlow | boolean | | Enable or disable the glow effect |
| glowColor | string | rgba(96, 73, 110, 0.5) | Color of the glow effect |
| enableAnimation | boolean | | Enable or disable spotlight animation |
| animationSpeed | number | 2 | Speed of the spotlight animation in seconds |
| className | string | custom-spotlight-card | Additional CSS class names for styling |
| onSpotlightMove | function | () => {} | Callback function when spotlight moves |
Dependencies
ogl
Created with ❤️ by Cybershoora