Tilt Card Grid
Responsive 3-Card Grid for Framer with interactive title tilt on hover. Perfect for showcases, portfolios, and modern landing pages.
Made with Workshop
Build your own component with AI
About this Component
3-Card Tilt Grid for Framer – Responsive Layout with Interactive Title Hover Effect
The 3-Card Tilt Grid is a modern Framer component that displays content in a clean 3-card layout, enhanced with interactive hover effects. Each card includes an image, title, and description, with the title featuring a subtle tilt animation on hover, adding depth and motion to your design. Perfect for portfolios, product showcases, feature sections, and landing pages, this component combines clarity with interactivity.
Key Features
Interactive Title Tilt – Card titles tilt smoothly on hover, creating a dynamic 3D-style effect.
Responsive Grid Layout – Automatically adapts to desktop, tablet, and mobile for a consistent look.
Customizable Cards – Easily swap images, titles, and descriptions using Framer property controls.
Smooth Hover Transitions – Lightweight animations for a polished, engaging user experience.
Design Controls – Adjust typography, border radius, spacing, and shadows to match any brand style.
How It Works
The grid contains three customizable cards. On hover, the title text rotates slightly along the X and Y axes, creating a tilt effect that reacts to cursor position. The rest of the card remains stable, making the text animation the focal point of interaction. When the hover ends, the title resets smoothly to its neutral state.
