Loading video...
Video Failed to Load
finally liquid glass web is here and it's open source. real WebGL refraction, chromatic aberration, liquid motion not usual backdrop-filter css hack. playground at code at MIT so do whatever you want with it #LiquidGlass #OpenSource #ReactJS #WebGL #UIComponents #FrontendDevelopment #CSS #JavaScript #WebDev #UI #UX #React #ComponentLibrary #OpenSourceSoftware #Frontend
65,100 views • 3 months ago •via X (Twitter)
35 Comments
Works on any browser :)
Github repo alternative cuz of shadow ban :(
Guys my GitHub account got shadow banned, 404 :(
It’s using webgl, so I assume background image. Not refracting the DOM. This didn’t work for me because I had to rasterise everything first
exactly, it takes a background Image prop and it samples that for refraction, so it’s a WebGL shader on a flat texture, not the live DOM. That’s why you had to rasterize first, no way around it with this approach. I also tried the SVG filter route but that had a bunch of performance issues too, especially with multiple elements or on scroll.
Yeah for my use case, needed to refract the live dom as rasterisation was never 1:1
This looks sick!
the backdrop filter blur everyone ships is fake glass it just blurs whats behind it real glass bends light through a normal map which is exactly why you need webgl to get the apple look only catch is text legibility on top tanks fast unless you tune the refraction carefully
finally someone did real refraction instead of faking it with a blur. instant bookmark
bro, I couldn't open your GitHub page, so I cloned it to GitHub for you. but rest assured, I clearly stated that you are the original author.🤓Here is the link:
Heat 🔥
loved some components man! hope u make more
Almost real 🤯🫡
Amazing! Thank you, Tirth 🙏🏻
👍🏻
Excellent 👌
im stealing this immediately for my next landing page 🧪
git repo down.. ; (
Maybe it’s a glitch, the link from my tweet is showing 404 on my phone but it works on PC. Idk how, but here it is:
@frowsac Seems your account does not exist...
@frowsac It got shadow banned 😢
@agilek @frowsac wait is there any alternative ? like for your repo ?
@abedinminhaz70 @agilek @frowsac
I had a go at my own version:
2007 called…
good
Github page is not found ?
Shadow banned 😓
nice. pure WebGL over backdrop-filter is the only way this doesn't kill scroll jank on mid-tier devices. your chromatic ab config looks dialed. what's the perf hit at 60fps on a standard mobile gpu?
Why is it 404?
Maybe it’s a glitch, the link from my tweet is showing 404 on my phone but it works on PC. Idk how, but here it is:
This is gorgeous! But what happened to GitHub? Is this malware? 😁
@nrgpu69121561 Its not malware, GitHub shadow banned my acc, try gitlab
Need to add Switch
You stole this
![Baseten Head of AI Model Training Charlie O'Neill says the future is many specialized LLMs dedicated to specific tasks, with bigger labs deployed on the frontiers of areas like science and math: "People are thinking about intelligence capabilities in the wrong way. People are thinking about intelligence relativistically. They say, 'OK, the open-source gap is like 6 months behind closed-source, and GLM 5.3 is as good as Opus 4.8,' or whatever." "The best way to think about what models can do for you, and for the world, is in an absolute sense." "So for any given task that you want to do with an LLM, there's some intelligence threshold where below that you can't do the task, and above that you have very diminishing returns to more intelligence on the task." "So when you think about it that way, the game of LLMs over the last 5 years has been, 'OK, we have these things we want to do with them. Closed source hits it first... but open-source can eventually do that task. And then for many reasons, once you have the base level of intelligence required to do it, you probably do want to swap to open-source." "It's not really about the [frontier lab] God model being better. Like, if I'm filing a tax return, there is a limit to how much intelligence I need to do that particular thing." "So I think the world is going to look like — frontier closed-source labs are going to continue to push the frontier. You do want to use the most intelligent model. You have very inelastic demand for intelligence when you're doing frontier science or frontier math." "But for a lot of the economically valuable things, it looks a lot like, 'I'm a Cursor, or I'm one of these big companies who are realizing I can't just be a wrapper anymore. I've been through the life cycle of building a product that people love. And I should be using that information to make my model better at the things that I care about, and not at anything else.'"](https://image.24vids.com/tw-2095651279792185623/amplify_video_thumb/2095651051982692352/img/qg4kzLYWNIKvqhP0.jpg)
![A Robinhood Chain receipt machine that remembers what the changelog forgets. It's called RUMZO. Most tools show you a builder token's chart. RUMZO shows you its commits and its contract at the same moment, then saves the proof so the story can't be rewritten later. [give it a token address and a public GitHub repo] → Pulls source, tests, docs and manifests at one pinned commit. → Reads launch stage, fees, buyback and locker flags at one pinned block. → Saves both sides as a receipt with commit, block number and observation time. → Run it again later and it diffs the two receipts. If a dev says the tests are done, the fees changed or the locker is on, RUMZO does not read the announcement and guess. It already has the receipt from last time. Which source files changed, whether tests and docs moved with them, which contract settings flipped in between - all of it side by side. Missing data stays marked unknown, nothing gets filled in. Local web UI, a CLI, JSON and Markdown exports. And the whole thing is intentionally READ ONLY. No wallet. No signer. No repo code executed. No buy button. Small raccoon. Lots of receipts. Open source, repo in the first reply ↓](https://image.24vids.com/tw-2096902374891602414/amplify_video_thumb/2096902325579194369/img/refD0YGp7swraDNt.jpg)
![CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document.documentElement.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇](https://image.24vids.com/tw-1745716136824672271/ext_tw_video_thumb/1745612660081881088/pu/img/SsGz-uqmfdr1KZ7H.jpg)
