You can sign up to get a daily email of our articles, see the Mailing List page.
We do often include affiliate links to earn us some pennies. See more here.

Custom boot animations for the Steam Deck are pretty sweet

By - | Views: 36,026

Did you know you can change the boot animation on the Steam Deck? Well you can and the community has naturally gone and done some pretty amazing things with it.

After messing around for a little while, I've come up with a full and hopefully easy enough guide to follow both in video and text form for anyone interested in doing it themselves. This was directly inspired by a Reddit post on it where the user changed their Steam Deck bootup to a Futurama animation with the Steam Deck wording which is pretty fantastic.

YouTube Thumbnail
YouTube videos require cookies, you must accept their cookies to view. View cookie preferences.
Accept Cookies & Show   Direct Link

Text Guide:

  1. First, you need a .webm video file of an animation, whatever you want. You can easily convert videos to webm using services like CloudConvert, your favourite video editor or even ffmpeg scripts.
  2. In your Home folder in a file manager, unhide the files. CTRL+H or via the options menu in the top right.
  3. Head to .local/share/Steam/steamui/movies/ and make a backup of deck_startup.webm if you wish.
  4. Get the filesize of the deck_startup.webm by right click -> properties and make a note of the one in brackets.
  5. Replace the original deck_startup.webm with your chosen video file, using the same name.
  6. Open a terminal window inside this folder (right click -> open terminal) and run this command (with the correct filesize you noted):
    truncate -s 1840847 deck_startup.webm
  7. Go into .local/share/Steam/steamui/css/ and make a backup of library.css and again make a note of the filesize. This file tends to change filesize between Steam Deck updates.
  8. Open the library.css file, go to the line that has "video" and edit just after it to read like this:
    video{flex-grow:1;width:100%; height:100%; z-index:10}
  9. Now open a terminal inside this folder as you did before, then run this (with the correct filesize you noted):
    truncate -s 38492 library.css

Now you're done. You can reboot and watch your new boot video! Enjoy.

Article taken from GamingOnLinux.com.
19 Likes
About the author -
author picture
I am the owner of GamingOnLinux. After discovering Linux back in the days of Mandrake in 2003, I constantly came back to check on the progress of Linux until Ubuntu appeared on the scene and it helped me to really love it. You can reach me easily by emailing GamingOnLinux directly. Find me on Mastodon.
See more from me
The comments on this article are closed.
13 comments
Page: 1/2»
  Go to:

Pendragon Sep 26, 2022
very cool

edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?


Last edited by Pendragon on 26 September 2022 at 4:54 pm UTC
mr-victory Sep 26, 2022
Quoting: Pendragonvery cool

edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?
Steam notices the file is modified and redownloads it.
Liam Dawe Sep 26, 2022
Quoting: mr-victory
Quoting: Pendragonvery cool

edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?
Steam notices the file is modified and redownloads it.
Yep, this exactly. It’s there to ensure it’s right on what Steam expects.
Philadelphus Sep 26, 2022
Pretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?

Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
randyl Sep 26, 2022
Quoting: PhiladelphusPretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?

Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
I'm curious how truncating the css file doesn't cause problems as well. It's a source file with information in it. What happens to that information?

Truncating the video file makes a bit more sense, but still makes me wonder if setting the file size in an editor isn't better/safer. I'm not that familiar with the truncate command, but I guess it closes the file properly? Some files like RTF, PDF, and some image files have footer information and simply truncating bits/bytes at the end of the file can corrupt it.

Anyway, I guess it works and the video explanation by Liam is very well done so my pedantic concerns aside, well done!
Liam Dawe Sep 26, 2022
As I understand it, the main point is ensuring parity with the default files otherwise Steam will overwrite it and it won’t work. Yes it will overwrite any extras you put in it but the purpose of this guide was this alone.
TheMixxiWoo Sep 26, 2022
Used your method and turned my boot screen in to a PS2 boot, with SteamDeck instead of PlayStation2, worked like a charm, if anyone wants a vid of it, I can upload it to youtube at some point for others to use
dos Sep 26, 2022
Quoting: randyl
Quoting: PhiladelphusPretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?

Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
I'm curious how truncating the css file doesn't cause problems as well. It's a source file with information in it. What happens to that information?

The change you're supposed to apply actually makes the file a bit smaller (you edit `0` to `1` and `300px` to `100%` twice), so the point of that truncate command is to make the file larger again to match the original size.
ElectricPrism Sep 27, 2022
What KDE theme is that on dolphin? Ye olde steam theme looks pretty legit.


Last edited by ElectricPrism on 27 September 2022 at 9:48 am UTC
randyl Sep 27, 2022
Quoting: Liam DaweAs I understand it, the main point is ensuring parity with the default files otherwise Steam will overwrite it and it won’t work. Yes it will overwrite any extras you put in it but the purpose of this guide was this alone.
Yeah, I got that and it's a cool article. I hope my questions didn't come across as trying to undermine your tutorial. I was just curious about the technical details. It's a very cool hack.

Quoting: dos
Quoting: randyl
Quoting: PhiladelphusPretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?

Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
I'm curious how truncating the css file doesn't cause problems as well. It's a source file with information in it. What happens to that information?

The change you're supposed to apply actually makes the file a bit smaller (you edit `0` to `1` and `300px` to `100%` twice), so the point of that truncate command is to make the file larger again to match the original size.
Thanks for the info and explanation. I didn't realize truncate would resize and not just cut as the name implies. It isn't something I've used. This makes a lot more sense now.
While you're here, please consider supporting GamingOnLinux on:

Reward Tiers: Patreon. Plain Donations: PayPal.

This ensures all of our main content remains totally free for everyone! Patreon supporters can also remove all adverts and sponsors! Supporting us helps bring good, fresh content. Without your continued support, we simply could not continue!

You can find even more ways to support us on this dedicated page any time. If you already are, thank you!
The comments on this article are closed.