VARIBALE
VARIBALE
VARIBALE
FONT
FONT
FONT
ANIMATOR
ANIMATOR
ANIMATOR
● OVERVIEW
● OVERVIEW
Variable fonts opened up a world of typographic possibilities – but until now, they’ve mostly been locked in static displays.
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.
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
HACKATHON
CONTRA x FRAMER
CONTRA x FRAMER
2025
2025
● CORE AXIS CONTROL
● CORE AXIS CONTROL
FOUR INTEGRATED CONTROLS
FOUR INTEGRATED CONTROLS
Weight
Weight
Width
Width
Optical Size
Optical Size
Grade
Grade
● CUSTOM AXIS CONTROL
● CUSTOM AXIS CONTROL
TWO CUSTOM CONTROLS
TWO CUSTOM CONTROLS
Slant
Slant
Volume
Volume
● ANIMATION MODES
● 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.
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
● MODE 01
BLOCK
BLOCK
Animate the entire block of text for bold, unified motion.
Animate the entire block of text for bold, unified motion.
Three Modes, Endless Motion
Three Modes, Endless Motion
● MODE 02
● MODE 02
WORD
WORD
Animate word by word to create rhythm and highlight meaning.
Animate word by word to create rhythm and highlight meaning.
Three Modes, Endless Motion
Three Modes, Endless Motion
● MODE 03
● MODE 03
CHARACTER
CHARACTER
Animate character by character for detailed, expressive effects.
Animate character by character for detailed, expressive effects.
Three Modes, Endless Motion
Three Modes, Endless Motion
● TRIGGER 01
● TRIGGER 01
VIEWPORT
VIEWPORT
See Me
See Me
● TRIGGER 02
● TRIGGER 02
HOVER
HOVER
Touch Me
Touch Me
● TRIGGER 03
● TRIGGER 03
MOUSE POSITION
MOUSE POSITION
Move Me
Move Me
WORKS ON MOBILE WITH TILT AXIS
WORKS ON MOBILE WITH TILT AXIS
WORKS ON MOBILE WITH TILT AXIS
WORKS ON MOBILE WITH TILT AXIS
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
Try out different variable axis,
Try out different variable axis,
mix animation modes, and
mix animation modes, and
push the sliders to
push the sliders to
unexpected places – discover
unexpected places – discover
new rhythms, textures, and
new rhythms, textures, and
personalities in your type.
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.
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
- CONTRA
- x
- FRAMER
- x