Animations & Motion
Holographic Tilt Card
Interactive 3D card with holographic tilt effect and depth layers.
3dtransformtiltholographiccard
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
imageUrl | string | https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop | Image URL for the card |
title | string | NEBULA X | Title text displayed on the card |
description | string | Interactive holographic projection interface with localized depth mapping. | Description text displayed on the card |
backgroundColor | string | bg-zinc-950 | Background color of the component |
cardWidth | string | w-80 | Width of the card |
cardHeight | string | h-[450px] | Height of the card |
perspective | string | perspective-[1000px] | CSS perspective value for 3D effect |
rotateXRange | [number, number] | [15, -15] | Range of X-axis rotation in degrees |
rotateYRange | [number, number] | [-15, 15] | Range of Y-axis rotation in degrees |
translateZImage | number | 50 | Z-axis translation for the image layer |
translateZText | number | 80 | Z-axis translation for the text layer |
translateZIcon | number | 20 | Z-axis translation for the icon layer |
iconSize | number | 24 | Size of the icon |
className | string | Additional CSS classes |