Text Scroll 3D Anima

Kinetic scroll animations 3D

TextScrollAnimation for Framer turns standard headlines into kinetic 3D experiences. As the user scrolls, individual characters assemble into place—scattering horizontally, tilting along the $X$-axis, scaling, and unblurring into alignment. Built with internationalization in mind, it utilizes native Intl.Segmenter grapheme splitting to support right-to-left languages, Arabic typography, complex Unicode, and emojis seamlessly.

What it does

• 3D Character Dispersion: Letters start scattered across 3D space based on their distance from the word center, offering independent horizontal spread, depth offset ($Z$-axis), and $X$-axis rotation.

• Grapheme & Unicode Aware: Splits text using native grapheme cluster segmentation, preserving Arabic letter forms, RTL reading directions, dynamic glyphs, and emojis without broken characters.

• Spring-Physics Smoothness: Powered by Framer Motion spring physics with customizable stiffness, damping, and mass controls for fluid scroll progress.

• Dynamic Focal Effects: Animates scale, opacity, and real-time Gaussian blur (filter) as characters converge into view.

• Accessibility & Canvas Optimized: Automatically falls back to clean, static rendering inside the Framer canvas or when user devices request reduced motion preferences (prefers-reduced-motion).

Great for

• Hero Section Headlines: Grab immediate attention as users begin scrolling down your landing page.

• Interactive Portfolios: Display dynamic client titles, agency manifestos, or high-impact project headings.

• Product Teasers & Launches: Reveal key feature names or tagline messaging with engaging 3D spatial motion.

• Section Dividers: Add dynamic typography breaks between major content blocks.

Need help?

Have questions, need custom features, or want to share feedback? Reach out anytime at [email protected] or on X @karimsaif0.