Back to Motion Prompt examples
Motion graphics moves, part 2 · #12
Variable font animation
The weight of the letters changes smoothly. The same word goes smoothly from thin to very bold and back, with a slider below showing the weight.
Text & shapesvariable-fontfont-weighttypographytextweightkinetic-type
Full motion specification
How the movement works
Use it on a title, a logo or a single word to show loudness or emotion through the letters themselves.
- 01"MOTION" (112 px, system-ui, 2 px letter spacing). The weight goes back and forth twice per 4.7 s: v = 0.5 − 0.5·cos(2π × 2 × time ÷ 4.7), which eases at both ends.
- 02Weight = round(100 + 800v), from 100 to 900, set directly as the font weight.
- 03A slider below (x = 112→427, y = 180) labelled thin on the left and bold on the right. The knob (yellow, radius 14) follows v, with the current weight shown above it.
Prompt
Use a variable font animation on the title: from Thin to Black (weight 100 to 900) in 1 s.