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.
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.
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.
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
