Interactive 3D Tilt

Interactive 3D Tilt
Interactive 3D Tilt

About Interactive 3D Tilt

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

From the 4ps

BlurLens Pro

Related Components

SpotlightReveal
Unfocused
Scroll Blur by Aki
Logo Stage Pro