---
title: "Tilt Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Jurre · Effects. Tilt Card is a sleek, interactive Framer component that brings your designs to life with dynamic tilt effects and motion-driven lighting."
canonical: "https://framer.elliotli.dev/component/tiltcard"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Tilt Card

# Tilt Card

[View on Framer](https://framer.com/marketplace/components/tiltcard/?via=elliot-li)

![Tilt Card preview image 1](https://framer.elliotli.dev/og/component/tiltcard/f521df47781bb783/1600x1200.jpg)

## Summary

Tilt Card is a sleek, interactive Framer component that brings your designs to life with dynamic tilt effects and motion-driven lighting.

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #871

## Details

- **Author**: Jurre
- **Published**: 2025-07-25
- **Updated**: 2025-07-30
- **Added**: 2025-07-25
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows