Text Scroll 3D Anima

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 karimsaif010@gmail.com or on X @karimsaif0.