PerspectiveTextScroll for Framer turns standard long-form copy into a dynamic, cinematic hero element. Built with smooth 3D spatial transforms, text lifts from a tilted prospective view into full alignment as the user scrolls down the page. Designed with production performance in mind, it features passive scroll listener throttling, native Framer typography controls, and full accessibility fallbacks.
3D Perspective Tilt: Apply natural $X$-axis rotation and depth perception (perspective) to make text slide and orient smoothly as it enters the viewport.
Spring-Physics Animation: Driven by Framer Motion spring physics with customizable stiffness and damping to prevent jittery scrolling.
Seamless Track Pinning: Anchors text inside a sticky track over a customizable viewport height (trackHeight) to give users total control over animation duration.
Dynamic Gradient Fade: Includes a soft, customizable bottom overlay (gradientColor) to smoothly blend text into background sections.
Canvas & Performance Optimized: Features static canvas detection, throttling via requestAnimationFrame, and respect for OS-level reduced motion preferences.
All properties are exposed directly within the Framer property panel:
Typography & Styling: Complete control over extended Framer fonts, font size, line height, letter spacing, alignment, and text color.
3D & Motion Controls: Tweak Rotate X tilt angles, Perspective depth, initial Offset Y distance, and Track Height ($vh$).
Color Overlays: Custom background colors and gradient fade overlays to match any light or dark theme perfectly.
Container Bounds: Adjust maximum content width (maxWidth) and accessible ARIA labeling for accessibility compliance.
Have questions, need custom features, or want to share feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
PerspectiveTextScroll for Framer turns standard long-form copy into a dynamic, cinematic hero element. Built with smooth 3D spatial transforms, text lifts from a tilted prospective view into full alignment as the user scrolls down the page. Designed with production performance in mind, it features passive scroll listener throttling, native Framer typography controls, and full accessibility fallbacks.
3D Perspective Tilt: Apply natural $X$-axis rotation and depth perception (perspective) to make text slide and orient smoothly as it enters the viewport.
Spring-Physics Animation: Driven by Framer Motion spring physics with customizable stiffness and damping to prevent jittery scrolling.
Seamless Track Pinning: Anchors text inside a sticky track over a customizable viewport height (trackHeight) to give users total control over animation duration.
Dynamic Gradient Fade: Includes a soft, customizable bottom overlay (gradientColor) to smoothly blend text into background sections.
Canvas & Performance Optimized: Features static canvas detection, throttling via requestAnimationFrame, and respect for OS-level reduced motion preferences.
All properties are exposed directly within the Framer property panel:
Typography & Styling: Complete control over extended Framer fonts, font size, line height, letter spacing, alignment, and text color.
3D & Motion Controls: Tweak Rotate X tilt angles, Perspective depth, initial Offset Y distance, and Track Height ($vh$).
Color Overlays: Custom background colors and gradient fade overlays to match any light or dark theme perfectly.
Container Bounds: Adjust maximum content width (maxWidth) and accessible ARIA labeling for accessibility compliance.
Have questions, need custom features, or want to share feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
