CatOS Devlog - User Profile & Loading System

What I Built Today

Today I built the user onboarding flow for my cat-themed web operating system. When someone opens CatOS for the first time, they create a fake profile by entering their name and their cat’s name. After submitting the form, they are greeted with a custom loading screen before the desktop appears.

Screens I Made

Welcome Screen

• Full-screen dark gradient background
• Circular cat profile image with an orange glow effect
• “Welcome to CatOS” title in orange
• Two input fields:
  • Your Name
  • Cat’s Name
• Orange “Enter CatOS” button with a hover animation
• Hidden error message displayed when either input is empty
• Frosted glass card created using backdrop-filter: blur()

Loading Screen

• Smaller version of the cat profile image
• Personalized welcome message using the entered names
• Animated progress bar that fills from 0% to 100%
• Eight loading messages that change as progress increases
• Three bouncing cat paw emojis with a wave animation
• Smooth transition to the desktop after loading finishes

How It Works

1. The user enters their name and their cat’s name.
2. They click the Enter CatOS button or press Enter.
3. The names are stored in global JavaScript variables so they can be accessed throughout the operating system.
4. The welcome screen is hidden and the loading screen is displayed.
5. A timer runs every 350ms, increasing the progress bar by a random value.
6. The loading status message changes depending on the current progress percentage.
7. Once the progress reaches 100%, the loading screen disappears and the CatOS desktop is displayed.