 Hi, today I'd like to talk to you about what I'm doing for the 5.25 announcement. Now, obviously, I am part of the promo group, but I am not the promo group. So I mean, there are so many other people working, not just on the announcement in general, but they're also working on the same things I'm working. So it's not like I'm working on this by myself at all. And I'm actually going to talk about who helped me because I received a lot of help in this case. So what I'm working on currently is animations, hopefully to make a video out of them. And in general, I'd like to do what I'd like to do is prepare a package, which is like a promotional package to actually send it to YouTubers and people who talk about Linux in their news websites to say, Hey, we've got a new version of Plasma 5.25. Here's what's new. Here's pictures, animations and ISO file, everything so you can actually get started reviewing or using this thing. So now I'm doing animations. So how did I decide to do animations? You might see, actually, let me pop up a generic Dolphin animation. So usually, normal people either screencast their screen to see the animations that they want to show, or they use some softwares like the adopt ones to actually make the animations recreate them and then drink water with them. People who make concepts of OS doing this approach. There are big issues with bot approaches, in my opinion. The issue with the approach of actually recording your screen is that it won't look very good and you don't have much to work with. So the animation that you get is the animation that you build. And as much as that animation will represent the final product, if you see advertisement of products and we at promo do advertisement of Plasma, usually it's not like only the exact same thing that you'll get on your computer, but it's something that makes you want that product. And that also has like doing 3D animations of the UI coming together. That looks pretty cool. If you see some old Apple or even like Windows advertisement videos, they have all of the UI 3D coming together, it feels cool. You know that's not how it's going to look like because you know your screen doesn't become 3D, but it looks cool. And if you just record your screen, you're not going to be able to do that. So the second approach here is actually nicer because it actually allows you to do all kinds of animations. But the problem is that currently, in my opinion, the best platforms to do this kind of things are proprietary. And that means that we can't use, we don't use proprietary software to advertise open source one, obviously. So we need something else. Everybody has their own opinion on how to do this. Perfectly fine. I have mine. And my personal opinion is that CSS3 animations actually give you a lot of power. I know there's Blender, which is a cool project and we are going to use Blender, but at the same time, recreating an entire UI in Blender is tougher compared to HTML and CSS. So what we're experimenting with is doing both. You render a CSS3 animation and then you embed it into a Blender scene, but let's get into it. And this approach seemed to have so many issues. This is an example HTML file, which I did not write. This is not mine. People had helped me. So this approach seemed to have issues. First of all, yet sure, you can do a webpage and you can do animations in that webpage, but how are we going to record it? Because sure, you can record your screen while the animation is playing, but that's only going to be as big as your monitor resolution is. And that's not going to be 60 FPS. It's going to be 30 if you're lucky, 10 if you have an older computer, which I add before doing this. And this was a very big issue. Before, at the very beginning, I actually sent HTMLs to people who had 4K superfast computers to actually render the thing. You could do that. It's a bad approach in my opinion, and I don't like it. So what I did is something completely new that I'm actually kind of proud of, which is a Python script that takes a webpage with a pure CSS3 animation. It has to be only CSS3 animations. And it actually renders the whole animation at any resolution, any frame rate. You want 300 frames per second, you can do that. How do I do that? Okay, so let's take an example. This, I did write this. The animation is written by me in this file. Okay, this is an animation in CSS. So we've got this slide in, which goes from this element being translated, rotated, translated again, to being just normal. And this animation is used for this element. This animation lasts 1.6 seconds, starts after zero seconds, since the page is loaded. And these properties are kept before and after the animation. This is it. Okay, so what do I do? First of all, my script adds a new property to all elements, which is, okay, I forgot the exact name, but it's something like animation playing false, something like this, you can Google that, which actually stops all the animations, which seems weird. But okay, it will stop the animation. So when you load the page with this property, you're just going to get the static webpage without the animation actually playing. And I take a screenshot of that. So I have my first frame with the first frame of the animation. And I can, the page can even take five hours to load. We don't care. We just wait until it's loaded. We take a screenshot. And the animation is not going to start playing anyway. So yeah. Okay, now we need the second frame. That's slightly tougher. But there is a way to do that. To get the second frame, say we're doing 10 frames per second as an example. So we need the frame that's at 0.1 seconds after the beginning. So let's say that this is the only animation we have in the entire file. What we do is, okay, this animation normally starts 0 seconds after the beginning, after the page is loaded. What if we give it a negative number? Now, this animation is going to start playing 0.1 seconds before the page is loaded. And what this actually means is that this animation will be loaded after it will be shown as if it was already playing for 0.1 seconds. We also do it for this one and for this one. Same thing. All animations get moved back from 0.1 seconds. And then we load the page again. And what happens is that animation is still not playing, obviously, because we've stopped it. But since we actually changed the delay of the animation to be negative, we do get our frame. And then we take a screenshot and we have the second frame. And then we do it again. 0.2, 1.8, 0.8. We take a screenshot and so on. By doing this, of course, you can have your webpage as big as you want. You're not recording the screen. You're just taking a screenshot. And the screenshot can be done even if the Chrome headless Chrome is bigger than your monitor resolution. It doesn't care about that. And you can choose any kind of step value, even this, and you're going to get the animation at that precise second interpolated. So that's how it works. We've got animations and we can very simply actually render them any resolution, any FPS. It's very slow to actually render them like this. I don't actually reload the page. I just change the CSS, but it's slow nonetheless. You have to take screenshots after screenshots. But even if it takes an hour, it's going to be perfect. The recording is going to be perfect. And you can actually just animate parts of it. If you accidentally mess up the second part of the video, you don't have to render everything again. You can just go from 1.5 minus 1.5 and on. So you've got a lot of freedom. Okay, so this seems weird, but I do want to make HTML and CSS three animations. One quick question would be, what can you actually do in CSS? CSS is not to be able to make animations like in Thiebler. Sure, you can do animations, but that came later. It's not meant as a way to make animations, but it actually has a lot of features. And it has 3D, like CSS has the ability to go 3D. And okay, not super complex 3D, but somewhat complex. And I've done this in the past. If you follow my channel, let me actually show you an example of the overview through Chrome, because I have to do all of this in Chrome. And I mean, look at this. This is 3D. This is not, but this is 3D. And to make you another example, let's take the global theme. After this one, I'm not going to show you anything because it's spoilers. You'll have to watch the final video. And look at here. Now I'm zooming in and I give all of the elements a translation in the X-axis and it's 3D, like really. And this actually allows you to do pretty complex animations. And in my opinion, they look good. I think that even if this animation, like the zooming in 3D is not part of KD Plasma as a product, people are going to know that. That's my opinion. People are going to realize that you can't just look at the dialogue from below. And it looks good in my opinion. So I'm doing this. And the issue is that, of course, you need to take a UI of KD Plasma and do it exactly the same in HTML and CSS, like exactly the same. You cannot notice that it's actually different. So there is a little trick, which I do use for the overview. I don't know if you noticed. There are some windows in the overview. I'm not actually doing the whole window by scratch. I can just take a screenshot of the window because that part is not actually being animated at all. It's just a static image. So I take a screenshot of the window and then I embed the window in the overview, which is the HTML and CSS. So I actually animate that one. That saves sometimes. However, still not enough. So when I sit down, I thought, okay, I want to do these things and more. I realized that I was looking at 20, 30 hours of work. That is slightly too much. And plus then the animation part of it. So I don't know, 50 hours in total, something like that. I don't have that much time, to be honest. I'd like to, but I don't. So what I did was tweet and create a post on my YouTube studio saying, hey, everyone, can somebody help me with HTML and CSS? And another big benefit, in my opinion, of doing these animations in HTML and CSS is that a lot of people know HTML and CSS. And so if I went there and asked for help in Blender, as an example, nobody would have replied. And I know, because I did that, nobody replied. So, but when I did HTML and CSS one, I received around 25 messages of 25 different people to help me. So what I did, I said, okay, we're going to take various scenes. I split them in 25 parts. And I gave all of the parts to people. And then all the people actually sent back their HTML and CSS. And now I'm working on taking that and animating it. Now, I will not go through all the names of all the people that contributed, not because I don't want to credit them at all, but currently the list I have contains like their emails and Twitter and Twitter or Telegram handles. And I don't think it's a good idea to show that. However, what I'm doing is actually fetching all of the names to be shown on the credits of the video, which means that when the video will be ready, you will have all of the names of the people that contributed to it in the description. In theory, everything goes well. In theory, everything goes well. And the video is ready in time. And it is beautiful. It is published on the KDE official account. Worst case scenario, everything goes bad. The animations are not ready in time or people are in KDE. Other promotion people are not satisfied with what I did. The video does not get published. That is the worst case scenario. If it doesn't get published, I'll still ask to at least make it accessible so people can see what we try to do all together at this point. But hopefully it will be published. Another thing we're testing is, okay, take this webpage as an example. I closed it. Sorry. Take the dialogue page with the blue background. You remember it. Go back in the video. And what we can do is actually take the blue part off and take a transparent screenshot that should be feasible. Or I don't know, green and then we green screen it out as an example. I don't think we need to do that. But if we do have a transparent screenshot, then of course we can do a transparent video. And if we do have a transparent video, we can embed that into a blender video. That's the idea. That's the idea. How it will, it will work out. I don't yet know. This is just my plan. This is what I'm working on. It's not a secret. I've talked about this on the KDE platforms as well. But stay tuned because hopefully, hopefully it's going to be cool. Worst case scenario, at least I tried.