motionlang · motion lab

retool.com in motion

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

Easing curves 4

easing-1 142×
cubic-bezier(0.72, 0, 0.12, 1)
easing-2 6×
cubic-bezier(0.72, 0, 0.36, 1)
easing-3 5×
cubic-bezier(0.24, 0.01, 0.36, 1)
ease-out 3×
cubic-bezier(0.12, 1, 0.72, 1)

Durations 4

xs 100ms
sm 200ms
md 300ms
lg 500ms

Keyframe animations 31

@keyframes HeroMadLibText-module__6slh_G__swipe-background-position

    

    

      
@keyframes ShineBorder-module__-3f1va__shine-pulse

      

    

    

      
@keyframes ActionLink-module__4rWgOW__slide-out-in

      

    

    

      
@keyframes ActionArrowLink-module__YdMS6a__slide-out-in

      

    

    

      
@keyframes Badge-module__6_JPlG__gradient-shift

      

    

    

      
@keyframes Badge-module__6_JPlG__chrome-gradient-shift

      

    

    

      
@keyframes Badge-module__6_JPlG__red-light-pulse

      

    

    

      
@keyframes GradientBorder-module__R7J64a__gradient-border-pulse

      

    

    

      
@keyframes PromptAction-module__BVA7-q__shimmer-text

      

    

    

      
@keyframes PromptBox-module__bBHQva__shimmer-text

      

    

    

      
@keyframes LogosMarquee-module__CfCiJq__marquee-forwards

      

    

    

      
@keyframes LogosMarquee-module__14b_GW__marquee-forwards