Skip to content

component

Interactive 3D Tilt

By the 4ps

Details

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

Introduction

Smooth mouse-tracking 3D text effect.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750186728/148/228/309/79/15
  • All · #3680