Credit Card

Interactive 3D credit card with parallax tilt and hover effects

credit-card-tw

1234567890123456

CARDHOLDERJOHN DOE

EXPIRES12/25

CVV123

Customize

Card Number

Cardholder Name

Expiration Date

CVV

Text Color

Background

Scale

1.2

Border Radius

16px

Text Shadow

Rotation Intensity

1.0

Parallax Intensity

1.0

Scale on Hover

1.05

Show ShineShow ShadowShow Action Buttons

Props

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

cardNumberstring

Card number (will be automatically formatted with spaces)

Default"1234 5678 9012 3456"

cardholderNamestring

Name of the cardholder displayed on the card

Default"JOHN DOE"

expirationDatestring

Card expiration date in MM/YY format

Default"12/25"

cvvstring

CVV code (3 digits) shown on the back when card is flipped

Default"123"

cardLogostring

URL for card company logo (Visa, Mastercard, etc.)

Defaultundefined

chipImagestring

URL for card chip image (optional)

Defaultundefined

backgroundstring

CSS gradient or color for card background

Defaultrandom gradient

textColorstring

Color for all text on the card

Default"#ffffff"

hasTextShadowboolean

Enable text shadow on card number, name, and expiration date

Defaulttrue

scalenumber

Scale factor for card size (maintains aspect ratio)

Default1.2

rotationIntensitynumber

Multiplier for the 3D rotation effect intensity (0-2)

Default1

parallaxIntensitynumber

Multiplier for the parallax layer movement intensity (0-2)

Default1

scaleOnHovernumber

Scale factor applied when hovering over the card

Default1.05

showShineboolean

Enable or disable the dynamic shine gradient effect

Defaulttrue

showShadowboolean

Enable or disable the shadow effect

Defaulttrue

borderRadiusnumber

Border radius of the card in pixels

Default16

showActionButtonsboolean

Show action buttons below card (eye to toggle visibility, copy to clipboard)

Defaultfalse

classNamestring

Additional CSS classes to apply to the wrapper

Default""

cardClassNamestring

Additional CSS classes to apply to the card element

Default""

buttonsClassNamestring

Additional CSS classes to apply to the action buttons container

Default""