Variable
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 × FRAMER
2025
● ANIMATION MODES
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
● 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
?
h
&
+
@
;
!
L
Try out different fonts, mix
animation modes, and push
the sliders to unexpected
places – you’ll 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
  • ×
  • FRAMER
  • ×