This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy the component from the site and paste it into Framer
Type your text, set your rest color (what the text looks like between waves), and add your wave colors in order.
Set your animation type to Timed or Hover, then dial in direction, duration, blur, and pause to taste.
The component works by sliding a gradient band across your text using CSS animation
Text - The string you want to display. Supports line breaks.
Wave Colors - An array of colors the gradient cycles through during the sweep. Add or remove swatches to your liking.
Rest Color - The color the text sits at when the wave is not passing through. Defaults to black.
Font - Full font controls including family, size, weight, line height, and alignment.
Animation > Type - Switch between "Timed" (auto-plays on loop) and "Hover" (wave sweeps in on hover, reverses on mouse leave).
Animation > Direction - Controls which direction the wave travels across the text.
Animation > Transition - Sets the duration and easing of the wave sweep.
Animation > Blur - Softens the edges of the wave band for a smoother bleed into the rest color. 0 is sharp, 16 is very soft.
Animation > Pause (s) - Only visible in Timed mode. How long the text holds at the rest color between each wave pass. Set to 0 for a continuous loop.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
