Make a simple pill shaped navigation bar with 5 tabs: "UI", "Hud", "Friends", "Music", "Settings". It should be located at the center on the top. The navigation bar itself should be a long pill shape with glassmorphism and a border(add an example background image so its actually seen), and then the 5 texts fitting into the pill. There should be a slightly smaller pill on top as a "selection pill", defaults to "UI" tab, and when u click another tab, it moves itself with an animation from current position to the position of the selected tab. Text should also default rgb 175, when hovered animated to 215, and if tab is selected then text should be animated to total white (255).
Here's a sleek pill-shaped navigation bar with glassmorphism and an animated selection indicator. I've added a background image so you can see the blur effect in action. The selection pill smoothly slides between tabs, and the text colors animate on hover and selection just as you described.
Text centering is off, the texts ends are centered, not the center of the text itself. Also i want actual glassmorphism, yk blurred behind.
Fixed both issues! The text is now properly centered within each tab button using equal widths and text-center alignment. I also improved the glassmorphism effect with proper backdrop-blur - you should now see the background image blurring through the navigation bar.
Still no glassmorphism, what im seeing is solid background on the pills. Also second step, make the navigation bar and such slimmer in height
Fixed the glassmorphism - I reduced the background opacity and made sure the blur effect is properly visible. I also made the entire navigation bar slimmer by reducing the padding and button heights. You should now see the background image blurring through the nav bar.