Features
Per-character hover effect with color, scale, and rotation
Rolling wave animation with adjustable speed, width, and pause
3 customizable hover colors cycling across characters
Optional font weight change on hover
Full typography control — family, size, weight, style, line height, letter spacing, alignment
Works with Google Fonts and Framer built-in fonts
Uppercase toggle and text alignment
Accessible — keyboard navigable, ARIA labels included
Property Controls
Text — content with multiline support
HTML Tag — H1 through H6, P, Span
Font — full typography panel with alignment
Uppercase — toggle text transform
Text Color — base resting color
Hover Colors — three colors that cycle across characters on hover and wave
Weight Change — toggle font weight shift on interaction
Hover Weight — target weight on hover (100–900)
Wave Animation — toggle the rolling wave on/off
Animation — speed, wave width, pause between cycles
Important Notes
Font weight change requires a font with multiple weight variants (e.g. Roboto, Albert Sans, Inter). Single-weight fonts will ignore this setting.
Variable fonts like Inter and Clash Display produce smoother weight transitions than static multi-weight fonts.
Google Fonts are loaded automatically for all weights via the Google Fonts API.
Custom uploaded fonts are not supported — Framer registers each weight as a separate family name, which breaks font weight switching.
Use Cases
Hero headlines · Landing page titles · Portfolio names · Call to action text · Section headers · Interactive typography
Irem Geldry
