Looping Words

Looping Words is a sleek, animated Framer component for creating dynamic headlines with continuously rotating words.

Built with React + GSAP, it smoothly cycles through your words using a polished elastic motion, subtle edge fading, and a responsive corner-frame selector that automatically adapts to the active word.

Instead of using a simple text swap, Looping Words creates a more expressive editorial interaction that works beautifully for modern landing pages, portfolios, SaaS websites, creative studios, agencies, and personal brands.

Great For

Looping Words is perfect for:

• Hero headlines

• Personal portfolios

• Creative agency websites

• Designer and developer portfolios

• SaaS landing pages

• Product marketing pages

• AI websites

• Studio websites

• Creative technology websites

• Animated typography sections

• Feature introductions

• Interactive landing-page headers

Use it whenever you want your headline to communicate multiple ideas without taking up additional space.

Customize

Start by adding your own words to the Words property.

For example:

Design → Build → Launch → Create

Then customize the typography to match your brand.

Use Text Color, Font Size, Font Weight, and Font Family to establish your visual style.

Adjust Padding X and Padding Y to control the spacing around the active word.

Customize the selector using:

• Edge Color

• Edge Size

• Edge Width

• Corner Radius

Finally, tune the motion with Scroll Speed, Pause Time, and Fade Range until the animation feels right for your page.

Support

Need help, found a bug, or have an idea for an improvement?

I'd love to hear from you.

Email: karimsaif010@gmail.com

X: @karimsaif0

If you build something with Looping Words, I'd also love to see it. Tag me on X and share your work.

Made with 💛 by @karimsaif