3D Tilt Hover — Add Depth to your cards with 3D Tilt

Make your cards feel alive

You've probably seen those cards that subtly move as you hover - not just scaling, but actually reacting to your cursor with depth and motion.

That's the difference between a flat UI and an interactive 3D card.

3D Tilt Hover brings that experience into Framer with a smooth, responsive 3D tilt effect that follows (or repels) the cursor. It adds real depth, motion, and personality to your UI - turning any simple card into a floating card with a premium feel.

Whether you're building a parallax card, a product showcase, or a portfolio, this component gives you a clean, natural tilt on hover interaction without any code.

What makes this different from other tilt effects

Most tilt effects are limited to a single flat layer - you get a basic hover animation, but everything moves as one piece.

This component goes beyond that.

You build your card directly on the Framer canvas with real layers, real content, and full control then the tilt effect applies on top of it.

That means:

• You can add buttons, links, badges, or any layout

• You can layer elements using depth for a true 3D card effect

• You can create rich parallax card interactions, not just flat tilt

There are:

• No pre-built card templates

• No locked structures

• No limitations on what your card can contain

Instructions

Setting up the 3D Tilt Hover component takes less than two minutes:

• Create a Stack (e.g. Tilt Card) to act as the outer container

• Drop the 3D Tilt Helper component inside the stack and set its position to Absolute - it becomes invisible and takes no layout space

• Place your Card (or any element you want to tilt) directly after the helper in the layer order

• Select the Tilt Card stack and set Overflow → Visible

• Match the Perspective value on the Card wrapper with the value in the component, then enable Preserve 3D → Yes

• Select the 3D Tilt Hover layer and adjust behavior from the right panel

To create layered depth:

• Select inner elements (image, text, logo)

• Go to Transforms → + → Depth

• Increase value to push elements forward

• If depth isn’t visible, enable Preserve 3D → Yes on the parent

How It Works

The component includes 9 property controls in Framer’s right panel:

Properties Control

• Tilt Mode: Switch between Follow (card tilts toward cursor) and Repel (card pushes away). Repel creates a magnetic floating effect.

• Tilt Intensity: Controls maximum rotation. Higher values create a stronger tilt effect.

• Tilt Axis: Choose Free (X + Y), X-only, or Y-only movement.

• Origin X / Origin Y: Defines the pivot point of the tilt (center by default). Adjust for asymmetric tilt behavior.

• Hover Scale: Scales the card on hover. Set to 1 to disable scaling.

• Perspective: Controls depth. Lower = dramatic 3D, higher = subtle realism.

• Hover Transition: Controls entry animation (speed + easing).

• Return Transition: Controls how the card settles back after hover.

• Respect Motion: Disables animation for users with reduced motion preferences.

Features

• Plug and Play: Drop in and configure - no code needed.

• True 3D Tilt Interaction: Smooth hover tilt based on cursor position.

• Dual Modes: Follow cursor or repel for different interaction styles.

• Touch Support: Works on mobile and tablet with native gestures.

• Axis Locking: Restrict tilt direction for controlled effects.

• Custom Pivot Control: Set tilt origin for unique motion behavior.

• Depth Layering: Combine with Framer Depth to create real 3D card stacking.

• Motion Accessibility: Respects reduced motion settings.

• Performance Optimized: Uses requestAnimationFrame and GPU transforms for smooth rendering.

Use Cases

• Product Cards: Add a premium card tilt interaction to highlight products.

• Portfolio Projects: Make thumbnails feel tactile and interactive.

• Pricing Cards: Use Repel mode to create a standout featured plan.

• Team Cards: Layer avatar, name, and role with depth for a richer UI.

• Hero Sections: Apply to CTA cards for a strong first impression.

• NFT / Collectibles: Create immersive 3D tilt effects with layered depth.

• Gaming & Interactive UI: Use higher intensity for bold, dynamic interfaces.

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com