Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,429 subscribers

782,849 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiSanat
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Ren profil fotoğrafı
Ren1 yıl önce

the web wizard strikes again incredible stuff imagine a landing page asking for camera permission just to make the cta button extra shiny haha

.manishrc profil fotoğrafı
.manishrc1 yıl önce

Now we just need a fingerprint and smudge after click.

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ1 yıl önce

ha - it's funny you mention this 😅 took this feature out jus before posting (no joke) can put it back in if you want to see it - had wet wipes so you could clean it off

Erik Rasmussen 👨‍💻🇺🇸🇪🇸 profil fotoğrafı
Erik Rasmussen 👨‍💻🇺🇸🇪🇸1 yıl önce

The fact that I recognize you [by your hat] in the reflection of a button is kinda wild.

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ1 yıl önce

this lets me know that my plan is working 😅

Tykra profil fotoğrafı
Tykra1 yıl önce

This remembers me a lot about @alexwidua project I’ve recreated in html

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ1 yıl önce

@alexwidua yeah - the webcam button is a classic 💯 can't remember where I first saw it being done thought it would be cool to apply the distortion in this case ✨

Brotzky profil fotoğrafı
Brotzky1 yıl önce

always in awe... wow.

Brian Syme profil fotoğrafı
Brian Syme1 yıl önce

The T-1000 of buttons.

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ1 yıl önce

what a film 😎

Benzer Videolar

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙
0:20

liquid slider 🧪 <input type=range> + CSS + SVG filter + delta scale on pointermove 🤙

jhey ʕ•ᴥ•ʔ

95,939 görüntüleme • 9 ay önce

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇
0:31

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#​goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,799 görüntüleme • 2 yıl önce

experimenting with a displacement filter to create a fractal glass effect on images
0:49

experimenting with a displacement filter to create a fractal glass effect on images

Pablo Stanley

58,550 görüntüleme • 2 yıl önce

tried to recreate the effect in just css/svg (far from perfect but pretty nice for a first try i think)
0:27

tried to recreate the effect in just css/svg (far from perfect but pretty nice for a first try i think)

Rebane

985,157 görüntüleme • 1 yıl önce

Discovering that Steve Ruiz's tldraw uses a mix of CSS and SVG made me want to try building a CSS renderer for Heerich.js! Well, its going well!! And its super fast.
0:30

Discovering that Steve Ruiz's tldraw uses a mix of CSS and SVG made me want to try building a CSS renderer for Heerich.js! Well, its going well!! And its super fast.

David Aerne

17,623 görüntüleme • 4 ay önce

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎
1:12

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

jhey ʕ•ᴥ•ʔ

93,589 görüntüleme • 2 yıl önce

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel tinker with it here ↓
0:24

tried recreating the dropdown from Aave 's liquid glass component page i was not able to nail the exact 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑 animation but implemented a few interesting details - svg filter for gooey dropdown transition (gaussian blue + color-matrix) - CSS clip-path 𝚜𝚑𝚊𝚙𝚎() morphing a rounded rect into the panel tinker with it here ↓

Manu Arora

15,160 görüntüleme • 1 ay önce

Watching movie trailers on IMDb with Ladybird 🐞🎞️ (Had to fix some SVG and CSS bugs for this to look as nice as it does. Have to fix a lot more things for performance to be good enough.. 😅)
0:33

Watching movie trailers on IMDb with Ladybird 🐞🎞️ (Had to fix some SVG and CSS bugs for this to look as nice as it does. Have to fix a lot more things for performance to be good enough.. 😅)

Andreas Kling

37,325 görüntüleme • 10 ay önce

"One step & my skin looks PORELESS. Insane how easy No Filter Primer is to use -- it's like a natural filter for your skin!" - Annie. ✨ Try No Filter at home for 14 days, with Try Before You Buy.
0:45

"One step & my skin looks PORELESS. Insane how easy No Filter Primer is to use -- it's like a natural filter for your skin!" - Annie. ✨ Try No Filter at home for 14 days, with Try Before You Buy.

IL MAKIAGE

808,054 görüntüleme • 1 yıl önce

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇
1:23

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 görüntüleme • 2 yıl önce

David had to be silenced for being a bad boy on webcam 👹
0:29

Sensitive content

David had to be silenced for being a bad boy on webcam 👹

rebeccalovexxx

77,871 görüntüleme • 1 yıl önce

Follow Cheap Ass Gamer & Repost for a Chance to Win 1 of 3 Codes for Gold Gold Adventure Gold (Steam) Provided by Gold Gold Adventure Gold | OUT NOW on Steam. Ends Monday at 9PM ET. Currently 22% Off Right Now.
1:00

Follow Cheap Ass Gamer & Repost for a Chance to Win 1 of 3 Codes for Gold Gold Adventure Gold (Steam) Provided by Gold Gold Adventure Gold | OUT NOW on Steam. Ends Monday at 9PM ET. Currently 22% Off Right Now.

Cheap Ass Gamer

264,708 görüntüleme • 10 ay önce

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇
0:42

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

55,565 görüntüleme • 3 yıl önce

"I try to look at the glass as half full" -- Jared Polis on his support for RFK Jr
0:59

"I try to look at the glass as half full" -- Jared Polis on his support for RFK Jr

Aaron Rupar

68,450 görüntüleme • 1 yıl önce

I’m excited to announce that 💫StarVector has been accepted at CVPR 2025! Over a year in the making, StarVector opens a new paradigm for Scalable Vector Graphics (SVG) generation by harnessing multimodal LLMs to generate SVG code that aesthetically mirrors input images and text. With this milestone, we’re also releasing StarVector on Hugging Face! 🥳🚀
0:55

I’m excited to announce that 💫StarVector has been accepted at CVPR 2025! Over a year in the making, StarVector opens a new paradigm for Scalable Vector Graphics (SVG) generation by harnessing multimodal LLMs to generate SVG code that aesthetically mirrors input images and text. With this milestone, we’re also releasing StarVector on Hugging Face! 🥳🚀

Joan Rodriguez

16,336 görüntüleme • 1 yıl önce

Had to pick up a special jersey for my first time on the glass #WinItForWhitt
1:29

Had to pick up a special jersey for my first time on the glass #WinItForWhitt

Smoke

2,925,930 görüntüleme • 1 yıl önce

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...
0:48

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Palash Bansal

14,436 görüntüleme • 7 ay önce

Vibe coded yet another idea I’ve had for a while: A Chrome extension that emulates the WebXR API + Hand Input Module using just a webcam and mediapipe. Makes it much easier to test WebXR apps without a headset.
0:26

Vibe coded yet another idea I’ve had for a while: A Chrome extension that emulates the WebXR API + Hand Input Module using just a webcam and mediapipe. Makes it much easier to test WebXR apps without a headset.

mrdoob

26,066 görüntüleme • 7 ay önce

Quick side quest! I noticed a lot of the Furality Ultra theming uses half-tones. So making a little Painter Filter to do that for you based on gradient input!
1:27

Quick side quest! I noticed a lot of the Furality Ultra theming uses half-tones. So making a little Painter Filter to do that for you based on gradient input!

Fara \\ FWA

12,476 görüntüleme • 3 ay önce

Wealthy Willis responds to question on communities having input on location/placement of the 1000s of new supermarkets that are going to magically appear on the scene to make food cheap for us bottom feeders. 🤣 warning includes reference to toads and frogs.
1:25

Wealthy Willis responds to question on communities having input on location/placement of the 1000s of new supermarkets that are going to magically appear on the scene to make food cheap for us bottom feeders. 🤣 warning includes reference to toads and frogs.

AotearoaNZDeb

15,053 görüntüleme • 11 ay önce