making ascii cline follow your mouse was a lot of fun but turned out to be way more complicated than I thought since 1) models are notoriously bad at ascii art, and 2) terminals were built for text and don't have native mouse support.
here's how i did it! 🧵
1) I turned the cline logo into a video using Google Flow and their Veo 3.1 model.
I prompted it to make the logo look 3D and move its head from left to right. (lol at the random robot sounds it added)
2) then I used by @CameronFoxly to convert the video into 192 frames of ascii. Each frame is cline looking at a different position on screen, so mouse at left edge = frame 0 (eyes looking left), and at right edge = frame 191 (eyes looking right).ascii-motion.app
3) the terminal lets CLIs capture either ALL mouse events or none, so this meant to track movement we also had to handle scrolling/clicking/etc too.
when you move your mouse, the terminal sends escape sequences to stdin like \x1b[<35;46;17M where we parse x=46 and y=17.
try it out for yourself in our new cli update!
npm i -g cline
cline is an open source coding agent used by over 5m developers, now just as fun and powerful in the terminal as its been in the ide. github.com/cline/cline
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.