正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

jhey ʕ•ᴥ•ʔ

146,429 subscribers

782,849 次观看 • 1 年前 •via X (Twitter)

科学技术艺术

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 🤙

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 👇

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$

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)

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

Rebane

985,206 次观看 • 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.

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> 😎

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 ↓

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 次观看 • 2 个月前

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.. 😅)

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.

"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! 👇

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 年前

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.

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,709 次观看 • 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! 👇

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

"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! 🥳🚀

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,350 次观看 • 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...

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.

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!

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,605 次观看 • 4 个月前

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.

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 个月前