axis-tide
A slow tide,
through type.
A continuous wave — sine, sawtooth, or triangle — travels through a paragraph, modulating any variable font axis line by line. An ambient animation that gives text a breathing, living quality that print cannot have.
Live demo — watch the paragraph
Watch the paragraph breathe. A wave passes through it — slow, continuous, invisible unless you hold your eye still and wait. Each line of text sits on a different moment of the curve, its axis value rising and falling as the tide moves through. The effect is not meant to be noticed. It is meant to be felt: a text that is alive rather than set, that shifts like water rather than stone. Variable fonts make this possible. The wdth axis compresses and expands. The wght axis lightens and darkens. The opsz axis shifts optical weight. A tide running through any of them gives the paragraph a quality that print cannot have.
A sine wave, traveling top to bottom, ±8 on the wdth axis every 4s.
How it works
Per-line phase offset
The algorithm detects visual lines, then assigns each a phase position based on its index. Each frame, the wave function is evaluated at each line's phase, producing a unique axis value per line.
Continuous rAF loop
A requestAnimationFrame loop advances the wave each frame using elapsed time, so the animation speed is consistent regardless of display refresh rate. The loop is cleaned up when the component unmounts.
Usage
Drop-in component
import { AxisTideText } from '@liiift-studio/axis-tide'
<AxisTideText axis="wdth" amplitude={8} period={4} waveShape="sine">
Your paragraph text here...
</AxisTideText>Options
| Option | Default | Description |
|---|---|---|
| axis | 'wdth' | Variable font axis tag. |
| baseValue | 100 | Center value for the axis — the animation oscillates around this. |
| amplitude | 5 | Max deviation from baseValue in axis units. |
| period | 4 | Seconds per full wave cycle. |
| waveShape | 'sine' | 'sine' | 'sawtooth' | 'triangle' |
| direction | 'down' | Wave travel direction through the paragraph. |