LottieFiles
0:000:00

Free Hover Bot Animation

24.4 KB

Week 2 of my State Machine Self-Challenge is here. I built a hover robot that reacts as you type your name πŸ€–πŸ’¬ The idea was to use it on a sign-up page so as you type, the robot responds to what you’re doing in real time. Its eyes follow your pointer like it’s curious who you are, and it switches between typing, error, or success states depending on your input. Our team is working on proper pointer controls soon πŸ‘€ but for now, this is a fun little hack for tracking to make animations feel alive. If you stop typing for too long, an idle timer kicks in. Think of it like a tiny traffic light πŸŸ’πŸŸ‘πŸ”΄ that changes colors and shows random messages the longer you stay idle. Source code with the animation in action https://codepen.io/Yaamin-Mohamed/pen/QwypqNR

Week 2 of my State Machine Self-Challenge is here. I built a hover robot that reacts as you type your name πŸ€–πŸ’¬ The idea was to use it on a sign-up page so as you type, the robot responds to what you’re doing in real time. Its eyes follow your pointer like it’s curious who you are, and it switches between typing, error, or success states depending on your input. Our team is working on proper pointer controls soon πŸ‘€ but for now, this is a fun little hack for tracking to make animations feel alive. If you stop typing for too long, an idle timer kicks in. Think of it like a tiny traffic light πŸŸ’πŸŸ‘πŸ”΄ that changes colors and shows random messages the longer you stay idle. Source code with the animation in action https://codepen.io/Yaamin-Mohamed/pen/QwypqNR

State Machines

Interactions & plugins

View all
figma
after-effects
framer
canva
webflow
wix

Free to use under the Lottie Simple License

Related animations

cookie

We use cookies for essential website functions and to better understand how you use our site, so we can create the best possible experience for you ❀️