MovingText Gradient

Moving Text Gradient is a lightweight animated text component for Framer that applies a smooth, looping gradient animation directly inside text. The gradient flows continuously across the text, creating a vibrant and modern visual effect.

The animation can start immediately or be triggered when the text enters the viewport, making it suitable for performance-friendly hero sections and scroll-based layouts.

Designed for flexibility, the component supports multiple gradient colors, adjustable angles, animation speed control, and full typography customization using Framer’s font system.

Key Features

• Animated gradient text fill

• Smooth looping background animation

• Multiple customizable gradient colors

• Adjustable gradient angle

• Animation speed control

• Optional animate-on-view trigger

• Full typography control using Framer fonts

• No external dependencies

Properties

• Text: The text content displayed with the animated gradient.

• Gradient Colors: Array of colors used to build the animated gradient.

• Angle: Controls the direction of the gradient in degrees.

• Speed: Controls how fast the gradient animation loops.

• Animate on View: Starts the animation when the text enters the viewport.

• Font: Uses Framer’s font picker with full family and weight support.

Best Practices

• Use 2–4 colors for smooth, readable gradients.

• Slower animation speeds work best for large headings.

• Enable animate-on-view for performance-sensitive pages.

• Avoid overly bright color combinations for body text.

Use Cases

• Hero headlines

• Section highlights

• Brand statements

• Marketing callouts

• Decorative UI text