MovingText Gradient

Animated flowing gradient text

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

Animated flowing gradient text