Cybertron-OS

So basically someone told me to upgrade my cybertron -os in a more cyber and futuristic vibe so that it matches the style, so i made it a little transformer and cyber ahh feeling webos. I redesigned all the app icons which took a lot of my time a cause i didn’t knew what and how should i re-design them, so i thought for too long and came up with these icons. These icons look way more futuristic and holographic than before and i guess much better too. Also i changed the cyber-cat into a robot so that the vibes would match the cyber effect and not like the previous one 🥀🥀. That 0.06 lag factor means the robot only moves 6% of the remaining distance toward your cursor each frame. So it never quite catches up — it smoothly glides and drifts. When you stop moving, it slowly settles into place near your cursor. When you move fast, it trails behind like it’s trying to keep up.
Added a SVG analog clock with smooth second hand using requestAnimationFrame for millisecond precision, digital display, timezone info, plus tabs for a stopwatch and countdown timer. This clock and the calender has made the UI a lot better than before.Also made a search bar, this one sits right at the top of the desktop. It’s a slim, always-visible search field with a magnifying glass icon. You just click on it and start typing to filter your apps. It’s the quick, “I know what I want” kind of search. No shortcuts needed — just eyes on it and type.

So when you set a static image as the wallpaper, Cybertron OS doesn’t just slap it on the background — it gives it a subtle parallax effect that makes it feel alive. The wallpaper image is loaded into a #desktop-bg div and scaled up to 1.1x (110% size), so it’s slightly bigger than the screen. That extra 10% is the buffer that allows it to move without showing edges. Then, every time you move your mouse, the wallpaper shifts in the opposite direction of your cursor by up to 20 pixels on each axis. So if you move your mouse right, the wallpaper slides left — like you’re looking through a window and the background is further away. This creates a layered depth effect: the orbs feel closer to you, the wallpaper feels farther away, and your cursor is in the middle. The whole thing has a transition: transform 0.3s ease-out so it doesn’t feel jerky — it smoothly glides to its new position.
When you switch to a video wallpaper, the parallax turns off because a video is already moving on its own. It’s a small touch, but it makes the desktop feel way more premium than a static background image ever would.
So about the taskbar in Cybertron OS is inspired by Windows but with its own flavor. It sits at the bottom of the screen and it is fixed there, 48 pixels tall, with a heavy blur behind it (backdrop-filter: blur(50px)) so it looks like frosted glass over whatever’s behind it. There’s a subtle white gradient line along the top edge and a faint amber glow along the bottom — it gives it that premium “this bar is floating” feel.

After making all these changes the cybertron-os has became a different OS, i hope yall like this!!!!

Bruhhh finally i can say that i have completed my cybertron-os. I think i have done most of the think i can come up with and have added all the necessary things that are found in a webos.

The pixel cat that follows your cursor around the screen i have added some features in it too and now its a whole interactive pet:

• Single click → pin/unpin the cat in place
• Double-click → pet the cat (triggers meow + purr + floating hearts animation)
• The cat flips direction based on mouse movement
• It has a smooth follow-with-lag animation

So here’s the thing. Previously I didn’t had a single audio file. No .mp3s. No .wavs. Nothing. So there were no sound feature in the webos which made it kinda plain so i thought i should add some’. There’s this thing called the Web Audio API built into every browser. It lets you create sounds using something called oscillators — basically digital instruments that generate tones. You tell it a pitch, a wave shape, and how long to play, and it just… makes the sound.The reason the sounds don’t just sound like boring beeps is because of something called exponentialRampToValueAtTime. Yeah I know, sounds like a villain’s weapon. But what it does is slide the pitch from one frequency to another over time. So instead of just “BEEP” you get “bewwwoop” — the sound goes UP or DOWN smoothly. That’s what gives it that swooshy, futuristic feel.
I looked at all the color comnbinations with the wallpaper and i saw that the miku wallpaper looks very futuristic and classical just as i want with purple colour. So i set them as the default and if you want you can change the wallpaper and the theme colour as your preferences.
The holo archieve which is the gallery of my cybertron-os was legit empty. I thought and thought and then i added some pictures of transformers movies and our fav bumble bee..
In the cybertron store we were not able to download any apps and it was just and empty ahh store, so yeahh i added some apps that can actually be installed and used in the webos and then i added some good looking app icons for them too cause i didn’t wanted them to look too plain.

Finalyyy i added the optimus prime wallpaper in the Cybertron os which now makes it look like a real tranaformer fan made webos. I really want that this cybertron os look as much as futuristic as well as classical as it can. i made many changes then before and also i redesigned the app icons for the cybertron os so that they look classic and technical not just plain app icon.
There were few things which were needed to be fixed like there was no option to stop a short video in the shorts section and also no option for mute and unmute like it got so annoying when i wanted to stop the video or mute when i was testing the webos. So I Added those features and now the short section runs smooth videos like i expect it to. Even the theme changing option was broken like clicking on “Autobot” (red theme) did nothing, it was suppost to make everything go like legit RED but lmao no. The accent color stayed purple and i Spentway too long on this than i should have originally.

The old wallpaper app was just a header + a 2-column grid of cards and looked like a prototype. No visual hierarchy, no preview of the current wallpaper, no hover feedback.
To fix this i rebuilt renderWallpaperApp() and the entire .wp-app CSS section:
added a hero section at the top (180px) that shows either the current video wallpaper playing on loop, or a gradient placeholder for the default. this gives instant visual feedback on what’s active.
added an overlay on the hero with the current wallpaper name and “Wallpaper Studio” title and made the transition smoother.

Also in the settings, it had 4 nav items: Faction Theme, Display, Wallpapers, About. The Display section had brightness slider, font size, and a widget toggle. the brightness and font controls didn’t actually do anything (they set inline styles that got overwritten on re-render). dead features. So i removed the display option which didn’t changed anything and merged the working features in the faction.
I also redeigned the energon radio which is the songs section in the cybertron os in that the big album cover art (240px tall) that takes up the top portion. There’s a gradient fade at the bottom so it blends into the dark background. The cover image is blurred behind the main art, giving it a premium vibe. Controls — three buttons in a row: previous, play/pause (big white circle), next. Buttons scale up slightly on hover.

Few more changes and we are good to go.

So i have made the cybertron os and i just took a look at the desktop screen, and honestly, the vibe is unmatched. the whole interface looks sick—that deep, dark metallic aesthetic with the striking purple accents looks exactly like a high-tech console you’d find inside the nemesis or deep within a decepticon base. It’s finally starting to feel like a fully functioning battlestation instead of just a static page. i’ve spent way too many unholy hours getting this dark, metallic decepticon-purple aesthetic right, and honestly, i’m so proud of how far it’s come.

here is the breakdown of what is running on the mainframe right now:

- the 3d video wallpapers are a whole cheat code. they are fully changeable with this slick floating control panel. you can legit change your wallpaper animations to go from miku just going through your screen to a mythical ahh dragon. 

- draggability actually works!! you can grab any of the app windows—like the gorgeous translucent glass panel calculator—and drag them all over the desktop without the window manager having a mental breakdown. the snapping is incredibly satisfying, and the z-indexing behaves itself when stacking windows.

- I added an active search bar on the desktop that will take you to google or any youtube video because sometimes you need to query the actual internet. You can type right into the google search input, hit enter and it does exactly what you expect. Useful for when you're trying to figure out how to do your math equations at 3 AM.

- let's talk about the pixel cat. i like cats so now there is a literal cyber-cat sitting on the desktop that trails your cursor. it has a slight elastic delay so it smoothly glides behind the mouse like a tiny holographic familiar following you through the mainframe. and yes, you can actually click to pet it and it fires off a literal heart-burst animation! ❤️🐾

- the music player actually has some of the finest work of music by the japanes pop, it has got the best japanese songs you will ever need to hear. HTML5 audio handles the entire play/pause/progress tracking natively under the hood.

- a simulated files app that lets you navigate through directory nodes directly on the desktop to organize your decepticon battle plans and yeah this still needs an upgrade i guess.

-Of course how can i forget the doomscrolling shorts app. yes, i actually did it. i built a dedicated video player with a scrollable feed of vertical reels. It starts with the audio ON, supports real-time pausing when you unfocus the window (so it doesn't keep playing in the background like an annoying browser tab), and lets you cycle through random clips of transformers edits and other random aesthetic shorts whenever your brain needs a cheap dopamine hit.

-The whole look is incredibly polished. we've got custom SVG icons sitting inside the dock instead of cheap-looking emojis, a glassmorphic top-bar system showing the time and battery life, and desaturated purple accents that hold the entire sci-fi interface together.