3D Hover Card Tilt

TiltCard is a fully customizable 3D interactive card component designed to bring depth and motion to your Framer projects. As users hover over the card, it tilts dynamically in response to cursor movement, creating a smooth parallax effect. This interaction is enhanced by adaptive shadows and a subtle glow that follows the cursor, adding a sense of realism and polish. The component also intelligently extracts dominant colours from the uploaded image to create natural glow highlights, giving each card a personalised and immersive feel.

Features:

With its rich customisation options, TiltCard allows you to:

• Upload any image (with full responsive support).

• Customise shadows — colour, blur, and spread, synced with tilt.

• Control edge blur for soft masking or sharp edges.

• Adjust tilt intensity (from subtle to dramatic).

• Set border radius, style, width, and colour to match your layout.

• Enable glow effects that respond to both tilt and cursor position.

• Optimised performance with smooth transitions and GPU-friendly transforms.

Where can you use it?

This makes TiltCard perfect for:

• Portfolio image highlights

• Product cards in e-commerce sites

• Team member or testimonial cards

• Interactive hero sections

• Showcase elements with depth and motion