Variable
Variable
Variable
Font
Font
Font
Animator
Animator
Animator
● 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.
● CORE AXIS CONTROL
FOUR INTEGRATED CONTROLS
Weight
Weight
Width
Width
Optical Size
Optical Size
Grade
Grade
● CUSTOM AXIS CONTROL
TWO CUSTOM CONTROLS
Expo
Expo
HACKATHON
CONTRA × FRAMER
2025
● ANIMATION MODES
Full creative control over how your text comes to life.
Full creative control over how your text comes to life.
● MODE 01
BLOCK
Animate the entire block of text for bold, unified motion.
Three Modes, Endless Motion
Three Modes, Endless Motion
● MODE 02
WORD
Animate word by word to create rhythm and highlight meaning.
Three Modes, Endless Motion
Three Modes, Endless Motion
● MODE 03
CHARACTER
Animate character by character for detailed, expressive effects.
Three Modes, Endless Motion
Three Modes, Endless Motion
● TRIGGER 01
VIEWPORT
See Me
See Me
● TRIGGER 02
HOVER
Touch Me
Touch Me
● TRIGGER 03
MOUSE POSITION
Move Me
Move Me
WORKS ON MOBILE WITH TILT AXIS
WORKS ON MOBILE WITH TILT AXIS
?
?
h
h
&
&
+
+
@
@
;
;
!
!
L
L
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
- ×
- FRAMER
- ×
- CONTRA
- ×
- FRAMER
- ×