ShimmerText — A Gradient-Animated Shimmering Text Component for Framer
Made with Workshop
Build your own component with AI
This React-based Framer component renders dynamic shimmering text using an animated gradient that smoothly sweeps across the characters. The component supports full customization through Framer Property Controls, including base color, shimmer highlight color, shimmer width, animation duration, and full typographic styling via the Font control.
A CSS keyframe animation is automatically injected into the document, allowing the gradient to move continuously across the text while using background-clip: text to create a clean, luminous shimmer effect. Designed to be lightweight, responsive, and visually striking, ShimmerText is perfect for headings, hero banners, interactive UI elements, or any design requiring an elegant animated highlight.