Animated profile card glare with 3D hover effect.
Move the pointer over the card to tilt it and sweep the holographic glare. The toggles underneath switch the glow, icon pattern and user info.
| Prop | Type | Default | Description |
|---|---|---|---|
avatarUrl | string | "<Placeholder for avatar URL>" | URL for the main avatar image displayed on the card. |
iconUrl | string | "<Placeholder for icon URL>" | Optional URL for an icon pattern overlay on the card background. |
grainUrl | string | "<Placeholder for grain URL>" | Optional URL for a grain texture overlay effect. |
innerGradient | string | undefined | Custom CSS gradient string for the inner card gradient. |
behindGlowEnabled | boolean | true | Toggle the smooth radial glow that follows the cursor behind the card. |
behindGlowColor | string | "rgba(125, 190, 255, 0.67)" | CSS color for the behind-the-card glow (e.g. rgba/hsla/hex). |
behindGlowSize | string | "50%" | Size of the glow as a length/percentage stop in the radial gradient. |
enableTilt | boolean | true | Enable or disable the 3D tilt effect on mouse hover. |
enableMobileTilt | boolean | false | Enable or disable the 3D tilt effect on mobile devices. |
mobileTiltSensitivity | number | 5 | Sensitivity of the 3D tilt effect on mobile devices. |
miniAvatarUrl | string | undefined | Optional URL for a smaller avatar in the user info section. |
name | string | "Javi A. Torres" | User's display name. |
title | string | "Software Engineer" | User's job title or role. |
handle | string | "javicodes" | User's handle or username (displayed with @ prefix). |
status | string | "Online" | User's current status. |
contactText | string | "Contact" | Text displayed on the contact button. |
showUserInfo | boolean | true | Whether to display the user information section. |
| Prop | Type | Default | Description |
|---|---|---|---|
contact-click | () => void | - | Emitted when the contact button is clicked. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab + Enter | Focuses the contact button and activates it. |
