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
Shivansh Arora
