Duc Bang

So many things to show… Here’s one more experiment from our upcoming project. #gsap #webgl #threejs #shader #3dwebsite

"Interactive Table with Image Hover & Idle Animation" by Filip Zrnzevic codepen.io/filipz/pen/EaV…

Today @Shopify is open sourcing the tool we use for optimizing glTF 3D models. 🔧 Tweak compression settings per texture ⚡ See changes immediately 🧰 Mesh compression options 🌐 Hosted online & free 👇 Check the thread for details

the codepen is live for the sticker effect ✨ check the post below for the link 👇 i’d advise using it with an image that already has an outline, as applying it with svg filters really challenges Safari regarding performance should i post a detailed breakdown?

number range slider using 3D CSS transforms sometimes a shift in perspective unlocks a new solution check the reveal👇

@nhtoby311 appreciate ur work ! pls teach me how to make this cursor effect 😄

Here’s my take on Apple’s “liquid glass” trend. Mine is more "liquidy" with a fluid mouse effect. Probably optimize it later as fluid sims and refraction aren’t cheap to render. Scene inspired by #r3f examples. 🌊 Try it out: liquid-glass-nine.vercel.app #threejsJourney #threejs

The 3D Future Home finally works perfectly on mobile — no compromise in experience. I'm honestly impressed! #homeassistant #threejs #webgl #smarthome #UIUX #uiuxdesign

@threejs I’ve added a settings panel so you can explore and have a bit of fun with it supah.it/global-displac…

🚀 We are releasing all the explorations from Vercel Ship 25, open source. Working with @vercel is always a good opportunity to experiment with cool tech; This year, we pushed the limit again. Made with @threejs & OGL Link, source, and articles below @basementstudio

Integrated unified spray, foam, and bubbles into my fluid simulation. Runs in real-time with WebGPU, Three.js, and over 1 million particles!

Another amazing short stream on youtube from @akella : Curved #threejs slider in 1 minute Tutorial:youtube.com/watch?v=Ty7j_v… Live:curved-threejs-slider.netlify.app Code:github.com/yvesvinckier/c… #threejs #frontend #animation #javascript #threejsjourney #webgl #glsl #creativecoding Image source 👉 #Unsplash

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know @CodePen link below! 👇 (There's even a @tailwindcss play for this one too 👀)

Added another three new buttons to my tiny library among 34 other unique buttons. Made in @webflow with custom CSS. It's a free cloneable. Check it out live! Link is in the comments.

volumetric lighting x lens flare effect (in orbit) r3f.maximeheckel.com/solar

Let's interact with the light waves! Here, I created a real-time simulation that can run in your browser: chiuhans111.github.io/interactwave/ You can change the beam width and the focusing power of the input light rays. Please give it a try and let me know your thoughts! #Optics #WebGL

We're kicking off the week with a tutorial on creating a dissolve effect in Three.js 👾 @0xJatinChopra breaks down the technique step by step, showing how to use shaders, particles, and bloom to achieve a dynamic effect often used in games for fading and transitions 👇

The Bsmnt Lab just got a new player. @bewaretherat joins the crew, in our first-ever internship program. Dive into instancing with threejs. Demo: lab.basement.studio/experiments/77… Source: github.com/basementstudio…

WebGPU exploration webgpu.activetheory.dev

Exciting news! The new Hatom website has been awarded 'Site of the Day' by @fwa 🌟 Big congrats to the team! hatom.com

I've just voted for Serious Business for Site of the Month to win a year in the @Awwwards Directory awwwards.com/sites/serious-… #AwwwardsSOTM