Tilted Card

Interactive card with 3D tilt effect and smooth animations

Configuring your account...

Please wait while we prepare everything for you

Usage

import TiltedCard from './TiltedCard';

<TiltedCard
  imageSrc="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
  altText="Kendrick Lamar - GNX Album Cover"
  captionText="Kendrick Lamar - GNX"
  containerHeight="300px"
  containerWidth="300px"
  imageHeight="300px"
  imageWidth="300px"
  rotateAmplitude={12}
  scaleOnHover={1.2}
  showMobileWarning={false}
  showTooltip={true}
  displayOverlayContent={true}
  overlayContent={
    <p className="tilted-card-demo-text">
      Kendrick Lamar - GNX
    </p>
  }
/>

Props

PropTypeDefaultDescription
imageSrcstring-Source URL of the image
altTextstring'Tilted card image'Alt text for the image
captionTextstring''Text for the tooltip caption
containerHeightstring'300px'Height of the container
containerWidthstring'100%'Width of the container
imageHeightstring'300px'Height of the image
imageWidthstring'300px'Width of the image
scaleOnHovernumber1.1Scale factor on hover
rotateAmplitudenumber14Rotation amplitude for tilt effect
showMobileWarningbooleantrueShow mobile warning message
showTooltipbooleantrueShow tooltip on hover
overlayContentReact.ReactNodenullContent to display as overlay
displayOverlayContentbooleanfalseWhether to show overlay content