Ribbon Text
Animated headline that flows along a chosen angle with a subtle ribbon-like wave.
Make it with Workshop
Build your own component with AI
What it’s for
Eye-catching hero titles and taglines
Section dividers and directional cues
Ambient motion on landing pages without cursor tracking
Logo wordmarks with gentle motion
How it works
Direction set by Angle° (0 = right). Component enforces readable direction (right/down).
Wave runs from the first letter to the last, along the normal to the angle.
True letter spacing: per-glyph measurement + your Letter-Spacing tracking.
Auto centers using live size via ResizeObserver.
Uses Framer’s Font picker; weight/style come from the selected font.
Key props
Angle°: 0–360. Motion direction.
Normal Offset: shift the whole ribbon perpendicular to the angle.
Letter-Spacing (Tracking): extra pixels between letter centers.
Wave Amp: wave height.
Wave Len: wavelength in letters.
Wave Speed: cycles per second.
Wave Decay: exponential falloff from first to last letter.
