Floating Card Component

Refinery

Floating Card

Card with 3D tilt, text-reveal and image focus effects on hover.

Preview

$170

Air Jordan 1 Retro High OG

$170

Air Jordan 1 Retro High OG

Priya Nair

Design Lead

Priya Nair

Design Lead

Dahlia

Striking open-centered summer flower.

Dahlia

Striking open-centered summer flower.

$170

Air Jordan 1 Retro High OG

$170

Air Jordan 1 Retro High OG

Hover over the card edges to see the 3d tilt and hover-reveal text effects in action!

Installation

1. Run the following command in your terminal:

npx shadcn@latest add https://refinery.abhii.me/r/floating-card.json

API Reference

Component props
Name	Type	Description
image	string	The image to be displayed on the card.
name	string	The name or title to be displayed on the card.
description	string	A brief description or subtitle for the card.
index	number	The index of the card, used for staggered animation effects.
className	string	Additional CSS classes to apply to the card for custom styling.

Usage Recommendations

Best for team profiles, feature cards, or product highlights.

If you do not want grayscale 0-100 transition on hover, you can remove that css filter from the image in the component file.

When installing shadcn, you can choose the 'nova' preset (lucide/geist) to match the intended typography.

Design Notes

I used motion values to map the pointer position into rotateX and rotateY, then softened that movement with springs. On hover, the card reveals the text overlay, accent lines, and vignette while the image scales slightly. The index prop drives the staggered entrance delay, so you can drop several cards into a grid and keep the motion feeling intentional.