3D Card

Add 3D effects to your cards

npm run add Card3D

Use the Card3D component to add depth with a 3D effect to your cards, and create more engaging user experience. They can create a modern, polished look and enhanced visual for your call to actions:

<Card3D secondary={true}>
    <p>Hover on me for 3D animation.</p>
</Card3D>

Effect Intensity

You can increase the intensity of the 3D effect using the rotateDegree prop. By default, the card is rotated by 15° on hover. Specify the rotateDegree prop to change the intensity of the effect:

<Card3D secondary={true} rotateDegree={45}>
    <p>Rotation degree set to 45°</p>
</Card3D>

Configuring Glow

When the card is hovered, a glow effect will follow the cursor. This can be turned off by setting the glow prop to false, or its size can be modified by setting the glowSize prop:

<Card3D secondary={true} glow={false}>
    <p>Glow turned off</p>
</Card3D>

<Card3D secondary={true} glowSize="75px">
    <p>Glow set to 75px</p>
</Card3D>

Glow Colors

The colors of the glow can also be configured using the startColor and stopColor props. Note that you want to set the colors to semi transparent using the alpha channel (eg using RGBA colors), otherwise the effect will mask the underlying content:

<Card3D
    secondary={true}
    startColor="var(--w-color-primary-50)"
    stopColor="var(--w-color-primary-70)"
>
    <p>Glow without semi-transparent colors</p>
</Card3D>

API

type Card3DProps = {
    rotateDegree?: number
    glow?: boolean
    glowSize?: string
    startColor?: string
    stopColor?: string
} & CardProps