A credit card that tilts in 3D on hover
| Name | Type | Default | Description |
|---|---|---|---|
cardNumber | string | "1234 5678 9012 3456" | Card number (will be automatically formatted with spaces) |
cardholderName | string | "JOHN DOE" | Name of the cardholder displayed on the card |
expirationDate | string | "12/25" | Card expiration date in MM/YY format |
cvv | string | "123" | CVV code (3 digits) shown on the back when card is flipped |
cardLogo | string | undefined | URL for card company logo (Visa, Mastercard, etc.) |
chipImage | string | undefined | URL for card chip image (optional) |
background | string | random gradient | CSS gradient or color for card background |
textColor | string | "#ffffff" | Color for all text on the card |
hasTextShadow | boolean | true | Enable text shadow on card number, name, and expiration date |
scale | number | 1.2 | Scale factor for card size (maintains aspect ratio) |
rotationIntensity | number | 1 | Multiplier for the 3D rotation effect intensity (0-2) |
parallaxIntensity | number | 1 | Multiplier for the parallax layer movement intensity (0-2) |
scaleOnHover | number | 1.05 | Scale factor applied when hovering over the card |
showShine | boolean | true | Enable or disable the dynamic shine gradient effect |
showShadow | boolean | true | Enable or disable the shadow effect |
borderRadius | number | 16 | Border radius of the card in pixels |
showActionButtons | boolean | false | Show action buttons below card (eye to toggle visibility, copy to clipboard) |
className | string | "" | Additional CSS classes to apply to the wrapper |
cardClassName | string | "" | Additional CSS classes to apply to the card element |
buttonsClassName | string | "" | Additional CSS classes to apply to the action buttons container |
cardNumberstringCard number (will be automatically formatted with spaces)
"1234 5678 9012 3456"cardholderNamestringName of the cardholder displayed on the card
"JOHN DOE"expirationDatestringCard expiration date in MM/YY format
"12/25"cvvstringCVV code (3 digits) shown on the back when card is flipped
"123"cardLogostringURL for card company logo (Visa, Mastercard, etc.)
undefinedchipImagestringURL for card chip image (optional)
undefinedbackgroundstringCSS gradient or color for card background
random gradienttextColorstringColor for all text on the card
"#ffffff"hasTextShadowbooleanEnable text shadow on card number, name, and expiration date
truescalenumberScale factor for card size (maintains aspect ratio)
1.2rotationIntensitynumberMultiplier for the 3D rotation effect intensity (0-2)
1parallaxIntensitynumberMultiplier for the parallax layer movement intensity (0-2)
1scaleOnHovernumberScale factor applied when hovering over the card
1.05showShinebooleanEnable or disable the dynamic shine gradient effect
trueshowShadowbooleanEnable or disable the shadow effect
trueborderRadiusnumberBorder radius of the card in pixels
16showActionButtonsbooleanShow action buttons below card (eye to toggle visibility, copy to clipboard)
falseclassNamestringAdditional CSS classes to apply to the wrapper
""cardClassNamestringAdditional CSS classes to apply to the card element
""buttonsClassNamestringAdditional CSS classes to apply to the action buttons container
""