https://framer.com/m/GrandientText-vq5z8t.js
Io / Enhancements / LiquidWaveText
LiquidWaveText
LiquidWaveText washes three colours through a word on a slow loop, so a single label carries movement without any layout changing around it.
Examples
Live specimens for every control the component exposes.
Default
The word sits in baseColor and the three wave colours travel through it. Nothing else on the line moves.
Wave
waveSpeed is how fast the colours travel; waveIntensity is how far they spread through the word. isLooping stops the wave on its resting frame.
speed 1
speed 4
intensity 100
Colour
baseColor is the resting colour of the type; the three wave colours pass over it in order.
default trio
one hue
loop off
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for LiquidWaveText
One word or label should carry motion without disturbing the layout.
A brand gradient needs to move rather than sit flat.
The effect must be text, not an image.
The label should stay live text rather than becoming an exported image.
Reach for something else
A whole paragraph needs treating — this is built for one line.
The motion should answer the pointer — use FluidText.
The colour has to come from theme tokens; these are literal colours.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.