Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,437 subscribers

782,712 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieKunst
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Ren
Renvor 1 Jahr

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

Profilbild von .manishrc
.manishrcvor 1 Jahr

Now we just need a fingerprint and smudge after click.

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 1 Jahr

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

Profilbild von Erik Rasmussen 👨‍💻🇺🇸🇪🇸
Erik Rasmussen 👨‍💻🇺🇸🇪🇸vor 1 Jahr

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

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 1 Jahr

this lets me know that my plan is working 😅

Profilbild von Tykra
Tykravor 1 Jahr

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

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 1 Jahr

@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 ✨

Profilbild von Brotzky
Brotzkyvor 1 Jahr

always in awe... wow.

Profilbild von Brian Syme
Brian Symevor 1 Jahr

The T-1000 of buttons.

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 1 Jahr

what a film 😎

Ähnliche Videos

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 Aufrufe • vor 8 Monaten

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,653 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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,101 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 9 Monaten

"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,052 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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,699 Aufrufe • vor 9 Monaten

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,548 Aufrufe • vor 3 Jahren

"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 Aufrufe • vor 1 Jahr

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,304 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 7 Monaten

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,452 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 10 Monaten