I Rebuilt This Viral Video With AI

this week went quite viral with almost like 30 million views. It's about words per minute. How many words per minute can you read? And this is, you know, obviously a video. And I I saw this and I was like, hm, what if I make this to be um like an app and this is what I have. So, uh, if I reload, you see here we have a text box, word per minute, whatever, the anchor letter, and I can just start and then I have a 1 second pause at the end of each sentence. I think it turned out pretty cool. Yeah. So, what you can set the words per minute and just build it up, build it up on how fast you can read. So yeah, I don't have I guess that is something to add like stages but right now it is um just like a slider so I can start and let's see if it actually real time adapts. Yes, it does. I just added a prompt saying can you make this uh update the animation engine real time and what's the uh what's the importance of the red letter? It was the honestly it was in the design and I just took it but I believe it is important to have the words in a specific anchor point and here I see that for some it is the third for some it is the second I'm not sure what what is like the formula is it like it looks like it's the first 40% of the letter maybe because because we I I know that that we don't read the letter the the entire words. We just see it kind of like as a shape. Maybe that's the start and the end of it. Notice so you actually read the word or something like that. No, no, we never do. We never read the word. That's why uh it's also really difficult to notice um mistakes in a word. Or maybe sometimes you do, but you can still read it because we don't read the letter by the letters one by one. we see the start and the end of each word and that's how we read it and that's why we can't do crazy my um I I suck at this like my I think it's maybe a dyslexia thing but my brain trips over itself so maybe actually know my brain reads it but my I can't say it or something like that I really struggle with like fast speaking or Okay interesting so with this I could turn it into an app to train. I could add stages, you know, like Okay, start. I mean, it'll take you two seconds. What was your What was your initial prompt? Uh, my initial prompt. Let's reveal all. Okay. Create a GAP project. It is literally a simple input field that takes a long text and then uh the GSAP part is where we separate the the words and then we display them all. They display them all. Okay, that that is embarrassing. uh one after another. This is for this is for and okay because I was talking like you know while doing something else anyway and then we can um do this read per minute kind of okay project um so I'm I'm I'm I don't know I'm saying some nonsense here. So, word per minute, uh, a control and scrub timeline. I'm basically saying that we need those. Uh, so we can move forward and backward. Well, it didn't do that at all. Um, and then it actually has the in the in the chat, by the way. All of these controls I'm What voice thing did you use to record this? Just Just the one from cursor. I was actually Oh, cursor. Yeah. How how's cursor got anything to do with this? Just the mic. The voice input. What do you say the coding application? This is cursor, is it? Oh, I thought this is web flow. No, no, no, no. This is not Webflow, but we'll get to that. Anyway, yeah, the prompt is really bad as you see. Cuz I was going to say you you should uh not that you this could have been a quick thing, but like running your prompt into an AI to help refine the prompt. I I do this uh we maybe I can quickly talk about this and yeah we'll do that. So anyway so we had the prompt and I was quite frustrated because typically when I do something like this uh I build the HTML CSS in web flow that way I have like more control and I know what I'm doing. Yeah. Uh here I didn't do it. I just want to quickly see if it's possible and then I got really frustrated because I wanted to change some structure in the HTML and CSS and I wasn't comfortable. I'm not comfortable doing it like literally in the code and I was then prompting CSS HTML changes which I don't like because I feel like I'm faster if I I I know what to do, you know, if I do it myself. Anyway, so that worked pretty well, I would say, after let's say it it's like 40 minutes of work put into it. Yeah, looks good. And what I do, I se I make typically separate chats. Here I I didn't need it, but like typically I make separate chats for if if I do concurrent stuff, but here I don't have a crazy I have a JavaScript, CSS, and HTML file. Very simp simple and vanilla. I don't know if I even if I needed GSA for this, but it was kind of in my mind. It's just CSS hiding, showing a probably Yeah, and a loop. Yeah, exactly. So, and the thing is this one is actually like completely vioded because I have not checked the code at all. So, we have like three lines of code. Well, we'll get into that, I think, but I think we're beyond the point of um checking every line of code. I think vibe coding is now it's kind of how we're all coding. We'll get into it. Exactly. This is very interesting because when I was doing that I obviously I'm not like where I would um judge this JavaScript and say if this is good or bad but I I could see like when the CSS at the beginning it was not what I wanted. I was really frustrated and I was like thinking okay how can I tell this AI how can I describe it or should I just get my hand in it and do it myself? But I guess uh this is the way we write uh we create software nowadays. This is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.