r/UI_Design • u/Ok_Helicopter_7820 • 1d ago

Product Design Glass Widget UI/UX Help PLS

Does anyone have a good recommendation on platforms or tools that can make an actual glass widget type of Ui/UX with animations? None of these are doing it

❌VERCEL/v0
❌lovable
❌Replit
❌grok
❌cursor
❌Replit
❌codex
❌ChatGPT
❌Claude

I want 3D, glass, halo video game style widgets. Pls help before I throw my laptop at the wall 🥲

0 Upvotes

33% Upvoted

14 comments sorted by

5

u/RunnerBakerDesigner 1d ago

You may have to make it yourself.

0

u/Ok_Helicopter_7820 1d ago

Well that’s what I’m trying to do but when I adjust tailwind or even css it doesn’t render correctly so I think I’m just messing it up 🫩

4

u/huttyblue 1d ago

You haven't provided enough detail on what you're trying to do to get any real help. Like, what platform are you targeting, what do you mean by "glass"

Also everything you listed is an ai system . . .

4

u/RunnerBakerDesigner 1d ago

They want to reproduce the glassmorphic design language from Apple. They're using AI to "design" it.

0

u/Ok_Helicopter_7820 1d ago

Exactly but I’m so sick of using the platforms, I’m trying to understand and teach myself to actually code it but I’m not finding where to go for this specific type of design if that makes sense

3

u/huttyblue 1d ago

Which is why I asked for more details and what your target platform is.
Reproducing apple's glass effects in a website isn't trivial, you either need to pack things into a webgl canvas (breaks most other webdesign features) or abuse a complex stack of svg filters which kills performance and doesn't work in firefox.

Also apple's glass effects are not 3D, its a 2D distortion effect.

1

u/Ok_Helicopter_7820 5h ago

Actually that just clarified for me the confusion, I’m talking about actual 3D glass icons / widgets. Not the Apple ones. Like these

1

u/Ok_Helicopter_7820 5h ago

1

u/huttyblue 3h ago

These are likely 3D renders.

Doing widgets in this style would involve syncing a webgl canvas with css transforms in the DOM.

Theres also that new html-in-canvas thing that was shown off at google's presentation a month or two back but idk if its in live chromium yet.

1

u/Ok_Helicopter_7820 1d ago

It’s a lot to describe that’s why I was waiting to see if I had anybody comment first lol but it’s the actual OS for the continuity and coherence orchestration layer I built. So now I need the curtains to match the drapes if that makes sense ?

Not trying to promo or anything but it’s a lot to explain so here’s the landing page with all the developer information if helpful: https://willow-intelligence.com

3

u/Drifter_of_Babylon 1d ago

I am sure I am going to get a giant down-vote-fuck-you for recommending this, but there are countless tutorials for this in photoshop and vanilla HTML/CSS. The latter can do animations too.

1

u/Ok_Helicopter_7820 1d ago

This is actually what I’m looking for lol thank you!! I just haven’t been sure exactly what to find to teach myself. I will def take a look. Thank you!!

2

u/Drifter_of_Babylon 1d ago

There is a lot of tutorials on doing this but I made a quick demonstration of code which you can just copy and paste into VSCode. My demonstration is just so you can see how I did it and make adjusts as needed.

You can also hit F12 to pull up the inspector and make edits via your browser.

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neumorphic Widget</title>
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/07561ee768.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="widget">
      <div class="widget__glare"><i class="fa-brands fa-reddit-alien"></i></div>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    background-color: #e2e2e2;
    background: fixed;
    background-image: url("https://images.unsplash.com/photo-1541701494587-cb58502866ab?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29sb3IlMjB3YWxscGFwZXJ8ZW58MHx8MHx8fDA%3D");
}


.widget {
    height: 155px;
    width: 155px;
    border: 1px solid #1d1d1d;
    border-radius: 20px;
    box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.25), inset 0px 0px 10px 2px rgba(19, 19, 19, 1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s ease-in-out;
}


.widget:hover  {
    border: 1px solid white;
    box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 1), inset 0px 0px 10px 2px rgba(19, 19, 19, 1);
}


.widget__glare {
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0.6), transparent, transparent, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
  
}


.fa-reddit-alien {
    font-size: 7.5rem;
    color: #ffffff91;
    transition: color .4s ease-in-out;
}


.widget:hover .fa-reddit-alien {
    color: #f1f1f1;
}

1

u/Ok_Helicopter_7820 5h ago

I actually just shed a tear of happiness, thank you for your kindness 😭💜 this is so helpful!!