Tilt Effect Card
A card that tilts under the cursor to follow its position closely. Use it for interactive feature tiles or showcases where slight motion adds polish.
A card that tilts under the cursor to follow its position closely. Use it for interactive feature tiles or showcases where slight motion adds polish.
Search blocks by description or jump to a page.
Tilt Effect Card is a single interactive card that responds to pointer position in real time. As the cursor moves across its surface, the card rotates on both axes to follow it, scales up slightly, and a soft radial glare tracks the pointer position. When the cursor leaves, the card smoothly returns to its resting state. Inside the card sits a header with a title and description, a short body paragraph, and a footer row holding a cancel button and a primary action button.
The card content, the header copy, and the footer buttons are all independent. You can swap in any title, body text, or calls to action without affecting the tilt or glare behavior. The block is intentionally a single card rather than a grid, so you can drop it into any layout that needs one tactile, attention-holding element.
Reach for this block when you need one card to stand out on an otherwise flat page. It suits a logistics or delivery platform landing page where you want a key action such as booking a shipment or starting a trial to feel responsive and polished. It works better than a plain hover-lift card when the goal is to reward attention with depth rather than a simple shadow shift, and better than a full perspective-hover grid when only one item needs that treatment.
A natural flow around it on a Components page:
Before
After
The card frame works for any single focused action or summary. A few directions to consider:
Tip: keep the card body to two or three short lines so the tilt motion stays visible and the card does not grow tall enough to distort the perspective effect.