Loading video...

Video Failed to Load

Go Home

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,970 subscribers

113,025 views • 2 years 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

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 views • 1 year ago

Let’s design a custom scroll indicator using the newly released scroll APIs in iOS 18!
0:16

Let’s design a custom scroll indicator using the newly released scroll APIs in iOS 18!

Kavsoft

12,058 views • 1 year ago

I've started using Base UI for Hypermode's new UI components and I'm absolutely loving it. The component API's are excellent, and the DX in pairing it up with Motion has been seamless. WIP of a new Hypermode dialog with form elements built on BaseUI 👇
0:14

I've started using Base UI for Hypermode's new UI components and I'm absolutely loving it. The component API's are excellent, and the DX in pairing it up with Motion has been seamless. WIP of a new Hypermode dialog with form elements built on BaseUI 👇

Derek Briggs

14,903 views • 1 year ago

Tip: *only* using CSS you can apply styles to a number input conditionally depending on whether its value is within our out of range 🤯
0:12

Tip: *only* using CSS you can apply styles to a number input conditionally depending on whether its value is within our out of range 🤯

Minko Gechev

108,676 views • 3 years ago

the fact that Caleb is the type of person to scroll his phone using both his index finger and his thumb is somehow incredibly fitting
0:10

the fact that Caleb is the type of person to scroll his phone using both his index finger and his thumb is somehow incredibly fitting

Sparrow 🍎 HAPPY 兄VERSARY🐆

62,743 views • 6 months ago

In #Kotlin 1.9, instead of using the "until" infix function to create a range that's exclusive on its upper bound, you can use the new open-ended range operator... or as I like to call it, the alligator operator.
0:15

In #Kotlin 1.9, instead of using the "until" infix function to create a range that's exclusive on its upper bound, you can use the new open-ended range operator... or as I like to call it, the alligator operator.

Dave Leeds

34,165 views • 3 years ago

BREAKING: You can now edit Grok Imagine creations on the web using a prompt. Type the edit you want and get two new versions in seconds. Try it now!
0:18

BREAKING: You can now edit Grok Imagine creations on the web using a prompt. Type the edit you want and get two new versions in seconds. Try it now!

DogeDesigner

44,352 views • 6 months ago

🚨🇷🇺🇺🇦 BREAKING - The Russians are consistently “panicking”. According to the occupiers’ military Telegram channels, Ukraine is now intensively — almost nightly — using domestically produced Neptune-type cruise missiles together with long-range kamikaze drones to strike targets in Crimea, primarily air-defense systems, their radars, and military facilities. Those reports say the northwestern part of the peninsula remains under heavy and continuous pressure from Ukrainian long-range FPV and Lancet-like loitering munitions (a Ukrainian analogue referred to as a BULAVA-type drone). 🔵 The information also claims that Ukraine’s Main Intelligence Directorate (HUR) may be preparing limited landing/raid operations to hit Russian logistics lines and disrupt Russian reserves in various directions. According to some sources, Ukrainian diversionary networks inside Crimea are becoming more active, and there are even claims that Ukraine plans to begin using long-range underwater (submersible) drones. See the latest updates with us: Visioner
0:17

🚨🇷🇺🇺🇦 BREAKING - The Russians are consistently “panicking”. According to the occupiers’ military Telegram channels, Ukraine is now intensively — almost nightly — using domestically produced Neptune-type cruise missiles together with long-range kamikaze drones to strike targets in Crimea, primarily air-defense systems, their radars, and military facilities. Those reports say the northwestern part of the peninsula remains under heavy and continuous pressure from Ukrainian long-range FPV and Lancet-like loitering munitions (a Ukrainian analogue referred to as a BULAVA-type drone). 🔵 The information also claims that Ukraine’s Main Intelligence Directorate (HUR) may be preparing limited landing/raid operations to hit Russian logistics lines and disrupt Russian reserves in various directions. According to some sources, Ukrainian diversionary networks inside Crimea are becoming more active, and there are even claims that Ukraine plans to begin using long-range underwater (submersible) drones. See the latest updates with us: Visioner

Visioner

551,944 views • 9 months ago

How do you turn a type specimen into an experience? For Exat, Studio Size pushed the typography showcase beyond the static page, using scroll, motion, and interaction to reveal the logic, range, and character of Hot Type's most ambitious typeface yet:
0:15

How do you turn a type specimen into an experience? For Exat, Studio Size pushed the typography showcase beyond the static page, using scroll, motion, and interaction to reveal the logic, range, and character of Hot Type's most ambitious typeface yet:

Codrops

22,058 views • 2 months ago

A Bangladeshi man is urinating into the seawater from one ship. At the same time, on another ship, some Bangladeshis are taking that same water in buckets, washing utensils with it, and even using it to cook food.
0:15

A Bangladeshi man is urinating into the seawater from one ship. At the same time, on another ship, some Bangladeshis are taking that same water in buckets, washing utensils with it, and even using it to cook food.

Saffron Chargers

16,380 views • 2 months ago

Based on the WWDC 2026 leaks, I tried to recreate the iOS 27 revamped Siri interaction inside the Dynamic Island in swift ui with lots of different settings and some custom shaders. And yeah, if it’s like that, it will be kinda boring going from a rainbow like ui to a monochrome one.
0:14

Based on the WWDC 2026 leaks, I tried to recreate the iOS 27 revamped Siri interaction inside the Dynamic Island in swift ui with lots of different settings and some custom shaders. And yeah, if it’s like that, it will be kinda boring going from a rainbow like ui to a monochrome one.

Tykra

37,825 views • 1 month ago

In the Residencial del Lago area, SEDENA forces opened fire on a CDS/CH armored vehicle using long-range weapons and a Browning machine gun mounted on a DN-XI.
0:20

In the Residencial del Lago area, SEDENA forces opened fire on a CDS/CH armored vehicle using long-range weapons and a Browning machine gun mounted on a DN-XI.

Cartel Watch

27,889 views • 2 months ago

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.
0:10

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.

Tushar

12,555 views • 2 years ago

Animate MetaHumans in real time using performances performances captured from most webcams and a wide range of smartphones. Or make some noise and generate real-time animation solely from an audio source, MetaHuman Animator now captures the emotion of a speaker, combining this with the plausible head movement feature for more lifelike results:
0:17

Animate MetaHumans in real time using performances performances captured from most webcams and a wide range of smartphones. Or make some noise and generate real-time animation solely from an audio source, MetaHuman Animator now captures the emotion of a speaker, combining this with the plausible head movement feature for more lifelike results:

Unreal Engine

22,417 views • 1 year ago

What are you doing on this #SelfCareSaturday? Me and the BFF Chef are in the kitchen using some of my gifted ingredients #AsEverOfficial from the Duchess to make fresh lemon 🍋 custard as seen on #FindingItaly and using the edible flowers from #WithLoveMeghan
0:40

What are you doing on this #SelfCareSaturday? Me and the BFF Chef are in the kitchen using some of my gifted ingredients #AsEverOfficial from the Duchess to make fresh lemon 🍋 custard as seen on #FindingItaly and using the edible flowers from #WithLoveMeghan

Sophia A. Nelson

21,528 views • 1 year ago

Viktor Hovland was spotted using pool floaties as a training aid on the WMPO range 💀
0:19

Viktor Hovland was spotted using pool floaties as a training aid on the WMPO range 💀

Fore Play

29,941 views • 4 months ago

If you are using my UI or are using Cooldown Manager Centered, a new experimental feature just dropped allowing you to see your keypress overlay on the Cooldown Manager! My Free Midnight UI available:
0:10

If you are using my UI or are using Cooldown Manager Centered, a new experimental feature just dropped allowing you to see your keypress overlay on the Cooldown Manager! My Free Midnight UI available:

Luxthos

65,579 views • 5 months ago

Custom styles for Infographics are rolling out TODAY! With 10 (!) preset options and the ability to create your own, choose from editorial, clay, brick, fan favorite kawaii 😻, and more! Turn your complex source material into beautiful, easy-to-read visuals with a single click.
0:19

Custom styles for Infographics are rolling out TODAY! With 10 (!) preset options and the ability to create your own, choose from editorial, clay, brick, fan favorite kawaii 😻, and more! Turn your complex source material into beautiful, easy-to-read visuals with a single click.

NotebookLM

259,983 views • 4 months ago