Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I rebuilt my Liquid Glass + WebGL shader button with Framer Agents, same component, completely different credit cost. Here's the before and after ↓

Tran Mau Tri Tam ✪

33,418 subscribers

240,946 views • 2 months ago •via X (Twitter)

Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

$Just launched my first Framer component. Been experimenting with liquid-style WebGL interactions, cursor ripples, refraction, click waves. Link in the comments 🙂$

Just launched my first Framer component. Been experimenting with liquid-style WebGL interactions, cursor ripples, refraction, click waves. Link in the comments 🙂

Vita Spenser

19,959 views • 8 months ago

Finally cracked a proper Framer Liquid Glass component. Safari behaves. Everything bends. I can rest now.

Finally cracked a proper Framer Liquid Glass component. Safari behaves. Everything bends. I can rest now.

Lee Black

34,828 views • 6 months ago

Exploring Liquid Glass on Framer 🪻

Exploring Liquid Glass on Framer 🪻

Florian

13,101 views • 1 year ago

Ok I am satisfied, this is liquid (fluid) glass. #Interactive #WebGL #GenerativeArt

Ok I am satisfied, this is liquid (fluid) glass. #Interactive #WebGL #GenerativeArt

Hans Chiu

94,030 views • 1 year ago

Just wrapped the development on Trajectory AI's new site. Framer brought me on through their Switch program to handle the build. Custom hero with some webgl, scroll animations, a few component tricks I hadn't tried before.

Just wrapped the development on Trajectory AI's new site. Framer brought me on through their Switch program to handle the build. Custom hero with some webgl, scroll animations, a few component tricks I hadn't tried before.

Mason Price

20,688 views • 5 months ago

Here's how I used Unicorn Studio and Framer to build out an image reveal component, inspired by the new Lando Norris site created by OFF+BRAND. (amazing work). Just a different take and experimenting with the tools. Img: Midjourney

Yianni

78,450 views • 1 year ago

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

Framer University

10,458 views • 1 year ago

Viscous Liquid - Cursor FX Free Source Code & Demo: Support me by PayPal: #threejs #webgl #shader

Viscous Liquid - Cursor FX Free Source Code & Demo: Support me by PayPal: #threejs #webgl #shader

Sabo Sugi / Three.js & Shaders

23,242 views • 25 days ago

Here's a take on Liquid Glass designs with Skia

Here's a take on Liquid Glass designs with Skia

William Candillon

39,649 views • 1 year ago

Here's HW3 before and after the update to the camera feed. Same location, but of course different days so lighting will be different.

Here's HW3 before and after the update to the camera feed. Same location, but of course different days so lighting will be different.

Dirty Tesla

231,421 views • 3 years ago

shader backgrounds + liquid glass buttons are a match made in heaven

shader backgrounds + liquid glass buttons are a match made in heaven

kush

41,140 views • 10 months ago

Completely rebuilt this Lanyard component. More customization, better animations.

Completely rebuilt this Lanyard component. More customization, better animations.

David Haz

113,117 views • 27 days ago

I spent six weeks letting AI agents work for me with my own credit card. Most of these agents cost $20 a month or less. So I turned what worked into six businesses you can start this week Here's what happened 🧵

I spent six weeks letting AI agents work for me with my own credit card. Most of these agents cost $20 a month or less. So I turned what worked into six businesses you can start this week Here's what happened 🧵

Chris Koerner

30,976 views • 11 days ago

Make your website feel more dynamic in seconds. Ask the Framer Agent to add the Chromatic Aberration shader to any existing video, creating glass-like curvature and colorful dispersion that adds a new dimension to your site

Make your website feel more dynamic in seconds. Ask the Framer Agent to add the Chromatic Aberration shader to any existing video, creating glass-like curvature and colorful dispersion that adds a new dimension to your site

Framer

10,899 views • 2 months ago

your Framer portfolio site NEEDS this component... comment "FLIP" and i'll send it to you for completely free!!

your Framer portfolio site NEEDS this component... comment "FLIP" and i'll send it to you for completely free!!

Framer University

12,079 views • 1 year ago

I said I might have a problem with carousels. Well, now it's your problem too. The liquid glass carousel is open source 🎠 Shader, scroll physics, entry animation all of it. Go crazy.

I said I might have a problem with carousels. Well, now it's your problem too. The liquid glass carousel is open source 🎠 Shader, scroll physics, entry animation all of it. Go crazy.

Yousuf

41,841 views • 3 months ago

iOS 27 has reduced the Liquid Glass button blur so much that it's basically gone.

iOS 27 has reduced the Liquid Glass button blur so much that it's basically gone.

Beta Profiles

576,651 views • 4 months ago

#UnityTips: Progress Bar (Shader Graph) [v2] ✨ (+WebGL and GitHub Download 👇🧵) Here's an animated progress bar made entirely in Shader Graph. Use this for loading screens, player health, etc. Adding colours is just a matter of isolating the individual elements as masks. It's helpful to think of the final image as a collection of elements that have to be constructed using fragment shader logic/code. (aka, math with colours! 🌈🔴🟢🔵) GitHub: 🔗 WebGL: 🔗 Do whatever you want with this. (Learn and have fun? :D) #unity3d #gamedev #indiedev #gamedevelopment #shader #gameart #madewithunity #webgl

#UnityTips: Progress Bar (Shader Graph) [v2] ✨ (+WebGL and GitHub Download 👇🧵) Here's an animated progress bar made entirely in Shader Graph. Use this for loading screens, player health, etc. Adding colours is just a matter of isolating the individual elements as masks. It's helpful to think of the final image as a collection of elements that have to be constructed using fragment shader logic/code. (aka, math with colours! 🌈🔴🟢🔵) GitHub: 🔗 WebGL: 🔗 Do whatever you want with this. (Learn and have fun? :D) #unity3d #gamedev #indiedev #gamedevelopment #shader #gameart #madewithunity #webgl

Mirza Beig

61,248 views • 3 years ago

$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$

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

Tirth Parmar

65,996 views • 4 months ago