VARIBALE
FONT
ANIMATOR
● OVERVIEW
Variable fonts opened up a world of typographic possibilities but until now, they’ve mostly been locked in static displays.
Introducing the Variable Font Animator, making it easy to animate and experiment with every axis of a variable font. From subtle shifts in weight to bold, expressive transformations, this tool turns text into motion bringing type to life in ways that were never possible before.
HACKATHON
CONTRA x FRAMER
2025
● CORE AXIS CONTROL
FOUR INTEGRATED CONTROLS
Weight
Width
Optical Size
Grade
● CUSTOM AXIS CONTROL
TWO CUSTOM CONTROLS
Slant
Volume
● ANIMATION MODES
Full creative control over how your text comes to life. From big gestures to subtle nuances, you decide exactly how your typography moves and feels.
● MODE 01
BLOCK
Animate the entire block of text for bold, unified motion.
Three Modes, Endless Motion
● MODE 02
WORD
Animate word by word to create rhythm and highlight meaning.
Three Modes, Endless Motion
● MODE 03
CHARACTER
Animate character by character for detailed, expressive effects.
Three Modes, Endless Motion
● TRIGGER 01
VIEWPORT
See Me
● TRIGGER 02
HOVER
Touch Me
● TRIGGER 03
MOUSE POSITION
Move Me
WORKS ON MOBILE WITH TILT AXIS
WORKS ON MOBILE WITH TILT AXIS
1
2
3
4
5
6
7
8
Try out different variable axis,
mix animation modes, and
push the sliders to
unexpected places – discover
new rhythms, textures, and
personalities in your type.
Typography isn’t just about letters on a page—it’s about voice, emotion, and narrative. Animated type can move in ways that mirror the stories being told: a headline can swell with confidence, a phrase can pulse with energy, or a single word can shift to reveal hidden meaning. When text becomes dynamic, it transforms from static copy into a living part of the design, creating experiences that feel more alive, more memorable, and more human.
Typography isn’t just about letters on a page—it’s about voice, emotion, and narrative. Animated type can move in ways that mirror the stories being told: a headline can swell with confidence, a phrase can pulse with energy, or a single word can shift to reveal hidden meaning. When text becomes dynamic, it transforms from static copy into a living part of the design, creating experiences that feel more alive, more memorable, and more human.
  • CONTRA
  • x
  • FRAMER
  • x