https://framer.com/m/Fluidtext-qHZvcL.js
Io / Enhancements / FluidText
FluidText
FluidText renders a line of type into a canvas and pushes the letterforms around as the pointer travels through them, so a headline reacts to being read.
Examples
Live specimens for every control the component exposes.
Default
The text is drawn to a canvas at pixelHeight and displaced under the pointer. Nothing moves until someone moves across it.
Displacement
displacement is how far the letterforms are pushed; smoothness is how quickly they settle back.
displacement 40
displacement 120
displacement 240
Direction and type
direction sets which way the ripple runs. pixelHeight is the resolution the type is drawn at, so it doubles as a size control.
left
right
Public Sans
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for FluidText
A headline should react to the reader passing over it.
The type needs to feel liquid rather than animated on a timer.
One line has to carry a whole hero on its own.
The effect should follow the pointer, not the scroll.
Reach for something else
The text has to be selectable or read by search engines — this is a canvas.
You need a paragraph rather than a line — use TextPro.
The motion should run on scroll rather than follow the pointer.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.