Loading video...

Video Failed to Load

Go Home

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,468 subscribers

95,939 views • 9 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙
0:39

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

jhey ʕ•ᴥ•ʔ

222,102 views • 1 year ago

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇
0:39

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,682 views • 1 year ago

Drawing with <input type="range"> 🖌️
0:21

Drawing with <input type="range"> 🖌️

Hakim El Hattab

279,068 views • 2 years ago

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

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

jhey ʕ•ᴥ•ʔ

782,805 views • 1 year ago

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 views • 2 years ago

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)
0:33

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

jhey ʕ•ᴥ•ʔ

205,973 views • 9 months ago

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇
0:33

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

840,683 views • 8 months ago

A CSS scroll version of the gooey island 🤙 .island { filter: url(#​svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @​keyframes hide { to { translate: -50% -80px; scale: 0.3; } }
0:24

A CSS scroll version of the gooey island 🤙 .island { filter: url(#​svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @​keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,818 views • 2 years ago

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳
0:27

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

110,070 views • 9 months ago

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅
0:46

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,135 views • 1 year ago

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 views • 2 years ago

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 views • 1 year ago

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙
0:27

DOM magnifier with CSS && SVG 🔍 .magnifier { position: fixed; left: 0; top: 0; translate: var(--x) var(--y); backdrop-filter: url(#​magnifier); } Could use it in a [popover] 🤙

jhey ʕ•ᴥ•ʔ

104,078 views • 2 years ago

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇
0:25

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

306,369 views • 8 months ago

it's incredible what you can do with html/css inside of a <foreignobject> inside of a <svg> inside of a <picture> inside of a <img> inside of a markdown file inside of your gitHub readme
0:25

it's incredible what you can do with html/css inside of a <foreignobject> inside of a <svg> inside of a <picture> inside of a <img> inside of a markdown file inside of your gitHub readme

scalar

62,718 views • 1 year ago

play 🤝 pause you don't always need to morph the svg jus' a little scale + translate on the paths w/ css 👇
0:49

play 🤝 pause you don't always need to morph the svg jus' a little scale + translate on the paths w/ css 👇

jhey ʕ•ᴥ•ʔ

16,239 views • 29 days ago

This CSS trick is fascinating ⭐️ By setting: [type=range] { overflow: hidden; } You can create a view timeline on the handle: ::-webkit-slider-thumb { view-timeline: --thumb inline; } And then you can use that to build all sorts of custom range sliders 🚀
0:25

This CSS trick is fascinating ⭐️ By setting: [type=range] { overflow: hidden; } You can create a view timeline on the handle: ::-webkit-slider-thumb { view-timeline: --thumb inline; } And then you can use that to build all sorts of custom range sliders 🚀

jhey ʕ•ᴥ•ʔ

94,024 views • 2 years ago

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @​keyframes scale { 0% { scale: 0; } }
0:43

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @​keyframes scale { 0% { scale: 0; } }

jhey ʕ•ᴥ•ʔ

246,038 views • 2 years ago