Inertia Text

Text Inertia is an interactive typography component that gives each word a smooth, physical reaction to cursor movement.

Move your cursor across the text and watch the words stretch, shift, and rotate with an elastic motion. Adjust the strength, velocity, rotation, elasticity, typography, and alignment directly from Framer's property panel.

Built with lightweight native React animation and designed to work smoothly inside Framer without external animation dependencies.

Great For

• Interactive hero headlines

• Portfolio websites

• Creative agency websites

• Personal portfolios

• Experimental typography

• Landing pages

• Product showcases

• Interactive navigation

• Motion-focused websites

• Modern Framer designs

Preview

https://inertiatextt.framer.website/

Features

• Cursor-driven word interaction

• Independent word movement

• Elastic motion

• Dynamic rotation

• Adjustable interaction strength

• Adjustable cursor velocity response

• Custom elasticity

• Custom font controls

• Adjustable font size

• Letter spacing control

• Line height control

• Text color control

• Left, center, and right alignment

• Disable interaction when needed

• Reduced-motion support

• Framer static-renderer support

• Lightweight, dependency-free animation

• Responsive Framer layout support

Customize

Make the interaction match your design.

Typography Choose your font, size, letter spacing, line height, and color.

Interaction Control the strength, velocity, rotation, and elasticity of the animation.

Layout Choose left, center, or right alignment to fit your composition.

Behavior Disable the interaction whenever you want a static text experience while keeping the same typography and layout.

Support

Need help customizing the component or integrating it into your Framer project?

X: @Karim Saif

Email: karimsaif010@gmail.com

I’m happy to help with setup, customization, and component-related questions.