3D Tilt Card for Framer – Interactive Hover Animation with Image and Glow Effects
The 3D Tilt Card is a sleek, interactive Framer component that brings your designs to life with dynamic tilt effects and motion-driven lighting. On hover, the card smoothly rotates based on cursor position, creating a realistic 3D parallax effect, while a soft animated glow and reflection overlay enhances depth and visual appeal. Perfect for portfolios, product showcases, landing pages, and interactive UI elements, this component delivers a high-end, engaging experience with minimal setup.
Interactive Hover Effects
3D tilt movement that responds to cursor position for a fluid, realistic effect.
Dynamic glow and light reflections that adjust intensity and angle based on hover position.
Smooth transitions with physics-based easing for a natural motion feel.
Responsive, GPU-accelerated animations for seamless performance.
Customizable Design Controls
The Tilt Card includes full Framer property controls, so you can tailor it to match any style or brand. Customize:
Image – Upload any image or asset for the card background.
Background color – Set a base color behind the image.
Border radius – Adjust corner rounding for sharp or soft edges (0–48px).
Shadow toggle – Enable or disable a drop shadow for added depth.
Tilt intensity – Control how dramatically the card tilts (2–40 degrees).
Glow toggle & intensity – Add an interactive reflective glow, with adjustable brightness.
How It Works
The 3D Tilt Card uses cursor tracking to calculate the viewer’s position relative to the card, dynamically rotating along the X and Y axes using a perspective transform. When hovered, the glow effect overlays linear and radial gradients to simulate reflective lighting, while transitions keep the motion smooth. When the cursor leaves, the card resets gracefully to a neutral state.
