Floating Card
Different variant of card components for various use cases like feature highlights, team members, blog posts etc.
Installation
1. Run the following command in your terminal:
npx shadcn@latest add @refinery/tilt-reveal-cardAPI Reference
| 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
For the best experience, use the 'Geist' theme...
Always ensure the component is properly styled and accessible.
Design Notes
The main idea was to create a card that has an image background and reveals additional text information when hovered. The card is structured with a header section for the title and description, and the body contains the image. The sliding text effect is achieved by animating the position and opacity of the text elements on hover. The image also has a subtle zoom effect to add some interactivity. The component is designed to be responsive and visually appealing, making it suitable for showcasing team members, products, or any content that benefits from a visual reveal on interaction.