7 ms·
Fluid Glass
- tt_dev 1y agoWow this is cool
- chipheat 1y agoSource code: https://github.com/chiuhans111/fluidglass https://github.com/chiuhans111/fluidglass
- oatsandsugar 1y agoApple coding interview?
- drob518 1y agoReal LOL! Exactly.
- cluckindan 1y agoBased on the patterns that appear when undisturbed, this seems to be based on a cellular automaton.
- jimmycleveland 1y agoMy guess is a reaction diffusion simulation
- fedsocpuppet 1y agoYeah the code has a (somewhat rudimentary) fluid sim that's fed into reaction-diffusion. Pretty cool, don't think I've seen that combination before
- _8rlb 1y agoI happened to have just finished writing a thesis on such a combination. The size of the little droplets is determined by the chemical wavelength of the reaction-diffusion subsystem. There’s a nice video and a pdf here: https://maximzuriel.nl/dynamics-and-pattern-formation-in-active-viscoplastic-droplets-basilisk/article.html https://maximzuriel.nl/dynamics-and-pattern-formation-in-act...
- marcodiego 1y agoIt would be cool the have it as my lock screen.
- wasting_time 1y agoWhy can't you?
- hardaker 1y agoDo note you can click and drag on it too.
- adastra22 1y agoAnnoyingly overrides swiping back to navigate on mobile.
- joeframbach 1y agoI have accidentally swipe-navigated far more times than I have ever purposefully swipe-navigated (zero times), so I am astounded to see someone who hasn't rage-disabled that misfeature upon installation of the OS.
- totallymike 1y agoI don't begrudge it being overridden here since this is a demo, but ever since, like, way early Opera era, swiping to navigate is muscle memory for me, and I prefer it both on desktop and mobile/tablet. Much simpler than reaching for the button.
- fsckboy 1y agoi was never attracted to the gattaca UX, it's a UI pre-crime. reaching is muscle memory for me. buttons i like because i know what i'm getting, and what i'm getting can be many different things as buttons allow.
- handsclean 1y agoGlad you have the ability to set your own preferences, but I’m pretty sure most people are happy with this. Do you by chance spend a lot of time reading PDFs while angry?
- kenferry 1y agoWell, that’s because you don’t use it I guess! I basically only swipe back. This aligns web pages with iOS nav stacks.
- maelito 1y agoBeautiful demo. I hope no IT company will ever think this is a good UI.
- mrandish 1y agoCame here to post exactly this. Very nice demo though...
- ChrisMarshallNY 1y agoVery much agree. I am not thrilled with the translucency of Liquid Glass (Apple systems 26).
- sipsi 1y agovery nice at 240fps. i have similar demos coming later
- drob518 1y agoLooks really cool.
- nine_k 1y agoWet is the new hot.
- skgough 1y agoit's interesting that the drops tend to collect in straight lines. I wonder what's happening in the sim code to keep them from collecting into round droplets?
- deleted 1y ago[deleted]
- Velocifyer 1y agoThis website is running at >10 FPS at 100% GPU usage
- Rohansi 1y agoOn what hardware? Runs well on my Pixel 7a. It's likely just a fancy pixel shader (or few).
- Uehreka 1y agoI really wish HN supported images so I could reply to this comment with the boy-crashes-bike-after-putting-a-stick-through-the-wheel meme it so richly deserves.
- Towaway69 1y agoHonestly, that's what makes HN so pleasant ;) Meme-free-zone - here's hoping it stays that way. Besides, describing a meme is just as good!
- jeswin 1y agoNot a very useful comment without mentioning the OS, browser, and hardware.
- 1y ago
- eggsandbeer 1y ago[flagged]
- tooblies 1y agoHard lol to this
- ayaros 1y ago"One of the design goals was when you saw it you wanted to lick it." - Steve Jobs
- muzani 1y agoIt truly is a shame that HN won't let us post gifs.
- flexagoon 1y agoI just checked your profile and I'm impressed by your commitment to log in once a month, write some out of pocket comment and then not write anything else until the next month
- eggsandbeer 1y ago[dead]
- timeon 1y agoUntil someone makes it frosted, we are safe.
- BHSPitMonkey 1y agoLooks like something you'd expect to find as a countdown timer in the run up to this year's WWDC on their homepage. Very slick.
- bitwize 1y agoUI innovation and courage!
- zdc1 1y agoWaiting for someone with trypophobia to see this
- Y_Y 1y agoNo effect. I think because it doesn't look organic, and/or the size and arrangment of holes wasn't right.
- hilti 1y agoDespite the liquid glass discussion … I am absolutely impressed how smooth this runs on a phone.
- deleted 1y ago[deleted]
- jonplackett 1y agoYeah was also expecting my phone to get very toasty but it did not. Great job!
- andai 1y agoI noticed this pattern that a page with some text and images is often too demanding for my phone: it becomes impossible to scroll the page smoothly. We simply do not have the technology yet to handle text and images in a consistent way! But anything involving 3D graphics (or 4K video) will run just fine.
- xpe 1y ago> We simply do not have the technology yet to handle text and images in a consistent way! We actually have plenty of algorithms for laying out text and images very quickly. You can see this when scrolling complex PDFs or sizable books on e.g. Apple devices. Even a complex web page can be very responsive if it makes smart use of JS and async calls, etc. Perhaps what you mean is that the complexity of current web apps running on browsers that handle arbitrary layout, computation (JS, WebAssembly), async calls (e.g. analytics), etc can be laggy on certain mobile devices? If so, yes. There are many possible culprits so to speak that lead to low frame rates. I would phrase it this way: the combination of advertising interests, compute power, and economics have led us to a place where lots of people face laggy interfaces. Overall, this isn’t a “technological” problem: think of technology as a set of constraints. People and their desires lead to various “design” decisions (some more evolved than designed). See also Wirth’s Law. I don’t think it is particularly insightful, however. These kinds of laws feel more like the ironic complaints of an ennui fueled graybeard than attempts to make proactive change. From Wikipedia: > Wirth's law is an adage on computer performance which states that software is getting slower more rapidly than hardware is becoming faster. > The adage is named after Niklaus Wirth, a computer scientist who discussed it in his 1995 article "A Plea for Lean Software". Note that some malicious and misguided right wingers are attacking and trying to subvert Wikipedia.
- westoque 1y agoRefreshing that it's built using the vue framework vs the typical react.
- treyp 1y agoThe bulk of it is WebGL. Vue is doing very little here. Since it's a single static page rendering to canvas, it really doesn't need a framework like Vue or React.
- wetpaws 1y ago[dead]
- mattlondon 1y agoWhy does it even need anything here other than vanilla JavaScript? I don't see the need for a SPA framework.
- IshKebab 1y agoWhy? React is much better than Vue in my experience. Vue 2 was so bad we ended up painfully porting an entire election app to react at a previous job.
- h4ch1 1y agosvelte's better than both : ^ ) (someone continue this with framework x) but seriously, I'm very interested to hear your gripes with Vue that were solved by react, since the latter feels much worse DX-wise than both Vue or Svelte, notwithstanding worse performance as well.
- DonHopkins 1y agoSvelte's MUCH better than both : ^ ) (You didn't say framework x had to be a different framework than Svelte! x)
- brazukadev 1y agoLit-html is better than all frameworks :)
- nirui 1y agoIt's even reactive, the clock went horizontal if you give it a wide enough viewport. Damn this is good. It's like playing with oil without having to wash your hands afterwards, and there's no mom chasing to give you a beat for the oil money you've just wasted. And on top of that, it tells you time.
- DecentShoes 1y agoIt's cool that it responds to my phone's stylus hovering above the screen, not just when it's touching. Feels like magic.
- silversmith 1y agoIsn't that magic called "mouse cursor emulation"?
- maartenscholl 1y agoThe meandering movement of the droplets around the sides remind me of the Gray-Scott reaction–diffusion system
- michelreij 1y agoVery impressive. Thanks!
- deleted 1y ago[deleted]
- aquir 1y agoImagine adding support for gyroscopes on phones and then you can make the water flow away when you rotate your device! Great work btw
- NuclearPM 1y agoFull portfolio https://chiuhans111.github.io/portfolio2020/dist/index.html https://chiuhans111.github.io/portfolio2020/dist/index.html
- BrandoElFollito 1y agoIt's really nice. Really unreadable too but I know that's not the point (AI prompt "make sure this never makes its way into phones")
- Noxus3038 1y agoDidnt expect it to be this smooth
- Rodmine 1y agoMost disgusting design trend. I hope the Vista look that has been re-popularized by Apple dies soon.
- zapzupnz 1y agoVista, or rather Aero, never looked anything like this. It's glassy and translucent but that's where the similarity ends. The way the translucency itself is used is vastly different. But also, yes, I agree. It didn't need to make a comeback. And even if it did, since iOS and macOS were already fairly translucent, it didn't need to be like this.
- qwertytyyuu 1y agoThis is mesmerising
- esskay 1y agoCool concept, just please never ever do this in anything production, it's bad enough we've now got a mainline OS with such awful legibility.
- tempodox 1y agoMaking everything illegible is necessary, so they can sell you a legible design as the next big revolution. Just not in one step. The return to legibility will be a multi part story with cliffhangers, betrayals and everything else it takes to keep you hooked and Apple in the news.
- brookst 1y agoThe world isn’t that conspiratorial. The designers on Liquid Glass are proud of it, and also disappointed that some of the design system did not make it into v1.0 code, so the reality is less legible than the designs indicated. There is no designer in the world making bad designs as part of some conspiracy to enable their employer to launch improved designs several years later. There’s no company that operates that way.
- saurik 1y agoMaybe legibility should be a ship condition on the first version of the code, not some final destination to eventually achieve. Or like, maybe they need to actually say that, when they claim this is the culmination of years of thought and effort, and that this is clearly the most amazing design ever, that they don't mean the thing they are actually pointing at.
- DaiPlusPlus 1y ago> There is no designer in the world making bad designs as part of some conspiracy to enable their employer to launch improved designs several years later. There’s no company that operates that way. New Coke / Coke Classic Windows Vista / Windows 7 Office 2007 / Office 2010
- 1y ago
- revanwjy 1y ago[dead]
- James_K 1y agoThe beading effect is very odd to me, as if surface tension is inverted.
- larodi 1y agothe demoscene is alive and well, just not where u expect it to appear .)
- migueldeicaza 1y agoBrilliant - I need this
- wvbdmp 1y agoThe abstract background is actually an analog clock. Nice touch.
- kogasa240p 1y agoDoesn't work on Librewolf
- tones411 1y agoTook me way too long to realize I could touch to interact. Very cool!
- sodality2 1y agoI love that zooming controls the resolution live, so you can speed up and slow down the animation at will. Might be unintentional but it's fun!
- dtjohnnymonkey 1y agoI would love to turn this into a screensaver of rain falling onto a window.
- s-macke 1y agoLike this one? https://www.shadertoy.com/view/ltffzl https://www.shadertoy.com/view/ltffzl
- Fabricio20 1y agoInteresting, this crashed my browser tab trying to load it! Run for all of 15s at about 1fps ;) I'm of course, not on a phone, but on my 9800X3D desktop, which promptly spiked usage to 100%! I wonder what APIs are not available on a desktop that this uses.
- ranger_danger 1y agoI kept getting "Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels", which for anyone familiar with OpenGL probably knows... usage of the glReadPixels function is typically frowned upon if at all possible, because moving framebuffer data out of the GPU and back into system memory can cause huge performance issues. I'm not sure why they need to use this function, or if it's just not optimized enough to go without it.
- burnt-resistor 1y agoHoly shit. That's indistinguishable from magic. Ran on an iPad Pro m4 so it might be cheating.
- reassess_blind 1y agoGets good performance on my iPhone 16, but terrible performance on my laptop in Brave?