TiltedCard
tilted-cardTilts an image card toward the pointer with optional caption and scale.
Usage
Basic usage
The pointer moves on the card surface to tilt 3D, and captionText renders a floating prompt bubble following the pointer.
Hulian component library
Moving mouse experience 3D Tilt
<TiltedCard
cardWidth="240px"
cardHeight="240px"
containerWidth="240px"
containerHeight="240px"
captionText="Hover me"
>
<div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center">
<p className="text-lg font-semibold text-foreground">Hulian Component Library</p>
<p className="text-xs text-muted">Move the mouse to feel 3D tilt</p>
</div>
</TiltedCard>Overlay content
displayOverlayContent + overlayContent Raise the subtitle/title along with the tilt 3D.
<TiltedCard
cardWidth="240px"
cardHeight="240px"
containerWidth="240px"
containerHeight="240px"
showTooltip={false}
displayOverlayContent
overlayContent={
<span className="absolute left-3 top-3 rounded-full bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground">
NEW
</span>
}
>
<div
className="h-full w-full rounded-2xl"
style={{ background: "linear-gradient(135deg, var(--color-chart-1), var(--color-chart-3))" }}
/>
</TiltedCard>Adjust the tilt amplitude
rotateAmplitude controls the maximum tilt angle, scaleOnHover controls hovering and zooming in, the larger it is, the more three-dimensional it is.
<TiltedCard
cardWidth="240px"
cardHeight="240px"
containerWidth="240px"
containerHeight="240px"
rotateAmplitude={22}
scaleOnHover={1.15}
captionText="More three-dimensional"
>
<div className="flex h-full items-center justify-center text-sm text-foreground">
rotateAmplitude = 22
</div>
</TiltedCard>When to use
Use TiltedCard as a lightweight primitive for adding pointer-driven 3D tilt, scaling, and a floating caption to an image or content card. Use ProfileCard for a structured profile, PixelCard for pixel waves, or MagicBento for a spotlight grid.
Import
import { TiltedCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| imageSrc | string | — | Image URL filling the card; it can be combined with or replaced by children. |
| altText | string | "Tilted card" | Accessible image alternative; replace the generic default with content-specific text. |
| containerHeight | CSSProperties["height"] | "300px" | Perspective container height. |
| containerWidth | CSSProperties["width"] | "100%" | Perspective container width. |
| cardHeight | CSSProperties["height"] | "300px" | Tilting card height. |
| cardWidth | CSSProperties["width"] | "300px" | Tilting card width. |
| scaleOnHover | number | 1.1 | Hover scale. |
| rotateAmplitude | number | 14 | Maximum tilt in degrees. |
| showTooltip | boolean | true | Shows the pointer-following caption when content exists. |
| displayOverlayContent | boolean | false | Shows overlayContent. |
| className | string | — | Class name merged into the outer <figure>. |
| style | CSSProperties | — | Inline styles merged into the perspective container. |
Slots
| Slot | Type | Description |
|---|---|---|
| captionText | ReactNode | Pointer-following caption; empty content renders no caption. |
| overlayContent | ReactNode | Badge or title raised above the card and moving with its tilt. |
| children | ReactNode | Card content above the image and below the overlay. |
Usage notes
- Tilt requires a pointing device. Keep essential information available on touch and keyboard-only devices.
- Container and card dimensions are separate; normally set matching pairs to avoid unexpected offsets.
- Reduced motion disables tilt. [[motion-v12-interrupted-animation-promise-never-settles]]: when composing additional Motion sequences, an interrupted animation promise may never settle.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<TiltedCard
cardWidth="240px"
cardHeight="240px"
rotateAmplitude={14}
scaleOnHover={1.1}
showTooltip={true}
captionText="Hover me"
>
<div className="flex h-full items-center justify-center">TiltedCard</div>
</TiltedCard>