Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

Наука и технологииИскусство
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Ren
Ren1 год назад

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
.manishrc1 год назад

Now we just need a fingerprint and smudge after click.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 год назад

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 👨‍💻🇺🇸🇪🇸
Erik Rasmussen 👨‍💻🇺🇸🇪🇸1 год назад

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

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 год назад

this lets me know that my plan is working 😅

Фото профиля Tykra
Tykra1 год назад

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

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 год назад

@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
Brotzky1 год назад

always in awe... wow.

Фото профиля Brian Syme
Brian Syme1 год назад

The T-1000 of buttons.

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 год назад

what a film 😎

Похожие видео

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 просмотров • 9 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 4 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 1 месяц назад

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 просмотров • 10 месяцев назад

"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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 10 месяцев назад

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 просмотров • 3 лет назад

"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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 7 месяцев назад

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 просмотров • 8 месяцев назад

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 просмотров • 3 месяцев назад

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 просмотров • 11 месяцев назад