Skip to content

component

Looping Words

By Karim Saif

Details

Summary

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

Description

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

Introduction

Cycles through your words

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200123428/238/289/39/99/15
  • All · #2161