motionlang · motion lab

github.com in motion

Every easing curve, duration and keyframe animation designlang read off the live github.com page — drawn, timed and replayed. Generated 2026-06-12.

Easing curves

linear 12×
linear
ease-out 28×
cubic-bezier(0.16, 1, 0.3, 1)
easing-3
cubic-bezier(0.65, 0, 0.35, 1)
ease-in-out 36×
ease
ease-out 14×
cubic-bezier(0.33, 1, 0.68, 1)
easing-6
cubic-bezier(0.3, 0, 0.5, 1)
easing-7 26×
cubic-bezier(0.5, 0.16, 0.1, 1)
ease-out 19×
cubic-bezier(0.165, 0.84, 0.44, 1)
ease-out 10×
cubic-bezier(0.2, 0.4, 0.2, 1)
easing-10
cubic-bezier(0.38, 0.06, 0.11, 1)
ease-out
cubic-bezier(0.12, 0.62, 0.12, 0.95)

Durations

instant 75ms
xs 100ms
sm 200ms
md 300ms
lg 480ms
xl 800ms
xxl 33333000ms

Keyframe animations

@keyframes AppFrame-a11yLink-focus

    
@keyframes tooltip-appear

    
@keyframes fade-in

    
@keyframes fade-out

    
@keyframes fade-up

    
@keyframes fade-down

    
@keyframes grow-x

    
@keyframes shrink-x

    
@keyframes scale-in

    
@keyframes pulse

    
@keyframes pulse-in

    
@keyframes rotate-keyframes