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
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 β€οΈ