You are browsing as a guest. Sign up (or log in) to start making projects!

4h 37m 21s logged

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!!!!

0
19

Comments 0

No comments yet. Be the first!