---
title: "Interactive 3D Tilt  — Framer component · Best of Framer"
description: "$8.00 · Framer component · by the 4ps · Effects. Smooth mouse-tracking 3D text effect."
canonical: "https://framer.elliotli.dev/component/interactive-3d-tilt"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Interactive 3D Tilt

# Interactive 3D Tilt

Smooth mouse-tracking 3D text effect.

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

![Interactive 3D Tilt  preview image 1](https://framer.elliotli.dev/og/component/interactive-3d-tilt/7cada79312b343bd/1600x1200.jpg)

## Summary

Smooth mouse-tracking 3D text effect.

## Description

## 🤔 Where You Can Use

-   Hero Sections: Create a high-end first impression with immersive spatial typography.
    
-   SaaS Landing Pages: Match the cutting-edge feel of AI and tech-focused services.
    
-   Portfolio Headlines: Make your personal brand stand out with interactive depth.
    
-   Marketing Mini-sites: Capture user attention with subtle, physics-based motion.
    
-   Digital Displays: Perfect for "Always-on" browser displays that react to movement.
    

## 🔥 Key Features

-   Dynamic 3D Tracking: Real-time pointer/touch tracking with smooth perspective shifts.
    
-   Enhanced Parallax Depth: A dedicated shadow layer mimics realistic height and floating effects.
    
-   60FPS Optimization: Built with high-performance Framer Motion Values to prevent layout thrashing.
    
-   Multi-line Rich Text: Full support for line breaks and custom alignment within the property panel.
    
-   Spatial Lighting System: Built-in radial gradient backgrounds that create a "Spotlight" atmosphere.
    
-   Physics-based Motion: Spring-physics damping ensures every movement feels organic and weighted.
    

## ⚙️ Settings

-   Title & Subtitle: Multi-line text inputs with independent font controls (Family, Size, Weight, Color).
    
-   Text Gap & Padding: Precise control over the relationship between text elements and container edges.
    
-   Center Light & Spread: Adjust the intensity and radius of the background aura.
    
-   Tilt Intensity: Fine-tune how aggressively the text reacts to mouse movements.
    
-   Perspective: Control the "Z-depth" and focal length of the 3D space.
    
-   Alignment: Full horizontal (Left/Center/Right) and vertical (Top/Center/Bottom) positioning.
    

![MouseTiltText Setting](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-29zipmzq-JCUWYdGRkE1cllMbatF195sBY7LuLd)MouseTiltText Setting

## 🚦 Updates

**15.04.2026 — v1.0.1 Patch**

-   **Performance Optimization:** Integrated useIsStaticRenderer for a smoother Framer Canvas experience.
    
-   **Enhanced Stability:** Disabled real-time transforms in static mode to prevent layout artifacts during export.
    
-   **Improved Editor UX:** Optimized mouse-tracking logic for better responsiveness in the design view.
    

**13.04.2026 — v1.0.0 Release**

### After your purchase, you will receive a link to the Component URL.

Need copy URL and paste to Framer Project, in Section.

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

-   All · #9402

## Details

- **Author**: the 4ps
- **Price**: $8.00
- **Published**: 2026-06-18
- **Updated**: 2026-04-16
- **Added**: 2026-04-13
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo