Loading video...

Video Failed to Load

Go Home

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

uuuuuulala's profile picture

Ksenia Kondrashova

8,765 subscribers

43,711 views • 1 year ago •via X (Twitter)

Science & TechnologyArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Another minimal JS animation here! Interactive (and damn satisfying) cursor animation made with only 3kb of pure JS. Not sure how to use it yet – maybe as a base for some shader?.. Anyway, it's fun already :) Live demo & source code: Hosted on CodePen.IO
0:15

Another minimal JS animation here! Interactive (and damn satisfying) cursor animation made with only 3kb of pure JS. Not sure how to use it yet – maybe as a base for some shader?.. Anyway, it's fun already :) Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

52,889 views • 3 years ago

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool
0:13

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Ksenia Kondrashova

28,620 views • 3 years ago

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders
0:15

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders

Ksenia Kondrashova

51,837 views • 3 years ago

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:14

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

16,008 views • 3 years ago

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP
0:19

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP

Ksenia Kondrashova

65,318 views • 2 years ago

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:16

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

59,771 views • 3 years ago

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?
0:14

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?

Camden @ Designownow

15,547 views • 9 months ago

Skywork Matrix-Game 3.0 is here! FULLY OPEN SOURCE! Real-Time and Streaming Interactive World Model with Long-Horizon Memory - Fully open source: code, model, and technical report - 720p @ 40FPS with a 5B model - Minute-long memory consistency - Trained on Unreal Engine + AAA games + real-world data - Scales up to 28B MoE for quality, dynamics, and generalization Homepage 👉 Code 👉 Model 👉 Tech report 👉 Create. Explore. Play. With Matrix-Game 3.0
0:15

Skywork Matrix-Game 3.0 is here! FULLY OPEN SOURCE! Real-Time and Streaming Interactive World Model with Long-Horizon Memory - Fully open source: code, model, and technical report - 720p @ 40FPS with a 5B model - Minute-long memory consistency - Trained on Unreal Engine + AAA games + real-world data - Scales up to 28B MoE for quality, dynamics, and generalization Homepage 👉 Code 👉 Model 👉 Tech report 👉 Create. Explore. Play. With Matrix-Game 3.0

Skywork

54,804 views • 4 months ago

For a recent (unreleased) project I got to play around with SDF shapes to create lens blur effects on interaction — #shaders #webgl #threejs
0:17

For a recent (unreleased) project I got to play around with SDF shapes to create lens blur effects on interaction — #shaders #webgl #threejs

Giom

132,656 views • 2 years ago

Update on my lightweight intercom alternative that runs on a $5 a month server. The widget is almost ready. It took more work than I expected. I spent a lot of time making it light on websites and thinking through interactions and UI. Built with Go and Vue, and I’ll open source it soon.
0:14

Update on my lightweight intercom alternative that runs on a $5 a month server. The widget is almost ready. It took more work than I expected. I spent a lot of time making it light on websites and thinking through interactions and UI. Built with Go and Vue, and I’ll open source it soon.

Fayaz Ahmed

60,335 views • 10 months ago

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊
0:11

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

Renaud

34,066 views • 3 years ago

Here is an effect I’ve been trying to achieve for a long time without success, regardless of the software I used. This is the first time I’ve managed to pull it off. Grok imagine
0:15

Here is an effect I’ve been trying to achieve for a long time without success, regardless of the software I used. This is the first time I’ve managed to pull it off. Grok imagine

Déborah

16,257 views • 12 days ago

Saw a dot grid effect from Antonin Brener.work on Insta and wanted to create something similar for typing in an input. The input border effect is using border-beam by Jakub Antalik Try here:
0:10

Saw a dot grid effect from Antonin Brener.work on Insta and wanted to create something similar for typing in an input. The input border effect is using border-beam by Jakub Antalik Try here:

Zsolt Kacso

21,307 views • 3 months ago

Auntie: “Since it was a team you stayed with for a long time, it must not have been easy to transfer.” Gumayusi: “I had a lot of thoughts and emotions (at the time). Now... I feel like I made the right decision coming here.”
0:10

Auntie: “Since it was a team you stayed with for a long time, it must not have been easy to transfer.” Gumayusi: “I had a lot of thoughts and emotions (at the time). Now... I feel like I made the right decision coming here.”

ye?

44,834 views • 3 months ago

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:
0:13

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:

Ksenia Kondrashova

20,374 views • 2 years ago

Making a camera for everyone directly impacts the position of its controls. With MBL, we leave that choice to the user. The UI is fully reorderable, and you can customise the physical button too. Where do you place your most-used controls on a camera?
0:14

Making a camera for everyone directly impacts the position of its controls. With MBL, we leave that choice to the user. The UI is fully reorderable, and you can customise the physical button too. Where do you place your most-used controls on a camera?

Nuevo.Tokyo™

37,264 views • 3 months ago

Nowadays it seems way too easy for someone to alter a video subs and for everyone to just believe it, with NO ONE bothering to check the original source. So here is the real subs: Weverse live, July 23, 2025.
0:17

Nowadays it seems way too easy for someone to alter a video subs and for everyone to just believe it, with NO ONE bothering to check the original source. So here is the real subs: Weverse live, July 23, 2025.

REPORT FOR SEOKJIN

11,298 views • 7 months ago

Experimenting with the pretext library... saw a brick breaker demo and had to try making it in PixiJS. Wanted to see what happens when you add WebGL/WebGPU shaders to the mix. Using bloom, glow, rgb split filters from pixi-filters. plus gsaps physics plugin for the text effect.
0:13

Experimenting with the pretext library... saw a brick breaker demo and had to try making it in PixiJS. Wanted to see what happens when you add WebGL/WebGPU shaders to the mix. Using bloom, glow, rgb split filters from pixi-filters. plus gsaps physics plugin for the text effect.

PixiJS

18,554 views • 4 months ago

iu: do you have any schedule on april 10, sunbaenim? are you able to watch it real time? js: i should. it’s wooseok &amp; iu who’s doing it ws: is it okay (for us) to do a video call? to make sure you’re watching it or not. 😆😆 js: i will take a video and send it via message instead
0:17

iu: do you have any schedule on april 10, sunbaenim? are you able to watch it real time? js: i should. it’s wooseok &amp; iu who’s doing it ws: is it okay (for us) to do a video call? to make sure you’re watching it or not. 😆😆 js: i will take a video and send it via message instead

왔즈롱

39,781 views • 4 months ago