Perspective Hover Card
A card that rotates in 3D space as the pointer crosses it for depth. Use it for hero items or showcases where motion makes a tile feel tactile.
A card that rotates in 3D space as the pointer crosses it for depth. Use it for hero items or showcases where motion makes a tile feel tactile.
The Components Collection unlocks the source for every Components block. All Access unlocks every Collection.
Already purchased? Log in
Perspective Hover Card is a single interactive card. A header holds a title and a short description, the body carries a paragraph of supporting text, and the footer holds two buttons side by side: a secondary outline action on the left and a primary action on the right. When the pointer enters the card the whole surface tilts forward along the X axis while an inner shadow fades in at the top edge and each layer of content lifts by a small, staggered amount, giving the impression of depth within a flat frame.
The card is a standalone unit. The title, description, body copy, and button labels are all plain text you can swap without touching the motion logic. The tilt angle and shadow intensity are controlled through inline styles, so you can tune the depth feel by adjusting those values directly.
Reach for this block when one action or offer needs to feel tangible rather than flat. It suits a fintech or banking product well: a "Create account," "Start transfer," or "Open card" call to action gains weight from the physical tilt in a way a static card cannot match. It works on a focused landing section, a modal trigger area, or a spotlight slot inside a wider grid where one item should read as primary.
The Tilt Effect Card follows the cursor in two axes; this block tilts on a single axis and resets cleanly, which reads as more purposeful and less playful.
A natural flow around it on a Components page:
Before
After
The card has three content zones and one interactive wrapper, all straightforward to adapt:
Tip: keep the card content short so the tilt feels smooth; tall cards with long copy make the perspective shift look exaggerated on larger screens.