Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

COBE v2: reliably use any DOM elements as markers & arcs. CSS transition, animation, filter, interactivity, ...all just work. High perf, zero deps, still ~5KB. Coming soon.

Shu

61,509 subscribers

225,256 Aufrufe • vor 6 Monaten •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

37 Kommentare

Profilbild von Shu

Shuvor 6 Monaten

It creatively uses CSS-native APIs, position-anchor and CSS variable. Here's how you style a label without any JS: Your marker automatically follows the anchored position on the 3D space. Use the `--cobe-visible-` prefixed variable to toggle between visible/invisible styles.

Profilbild von Shu

Shuvor 6 Monaten

2 years ago I was working on the separated marker/arc layers. But I stopped there because there’s no great APIs to anchor DOM nodes reliably and declaratively. I really don’t want JS to be involved here like exposing {x,y,z}[] and have positioning a userland thing. It’s definitely going to have perf and frame-syncing issues in different frameworks. And users need to handle all the DOM layering and position: relative/fixed things. So I waited until the declarative CSS anchor positioning API gets wider adopted. It feels great!

Profilbild von Shu

Shuvor 6 Monaten

And the conditional CSS trick. You can define the fallback value: .marker { opacity: 1; opacity: var(--cobe-visible-marker, 0); transition: opacity .3s ease; } And COBE will unset the variable when the marker is invisible (behind the globe) so final opacity fallbacks to 0. If visible, the variable is set to “invalid” and the CSS is equivalent to: .marker { opacity: 1; opacity: invalid; transition: opacity .3s ease; } So it shows as 1. Transitions all work. You can use this variable to toggle any CSS properties too including blur in the demo video.

Profilbild von Gonzalo Cordova

Gonzalo Cordovavor 6 Monaten

clean! I posted my first design yesterday and just got humbled

Profilbild von Manu Arora

Manu Aroravor 6 Monaten

youre the best

Profilbild von Kevin Okinedo

Kevin Okinedovor 6 Monaten

This is gorgeous, currently using v1 on and will be upgrading once available. Awesome work!

Profilbild von stonechat

stonechatvor 6 Monaten

is there a marker limit?

Profilbild von Igor bedesqui

Igor bedesquivor 6 Monaten

@1weiho whaaaaaat, so cool

Profilbild von Andrew Gadzik ▲

Andrew Gadzik ▲vor 6 Monaten

@samko_cx We should chat 😂

Profilbild von Rajat

Rajatvor 6 Monaten

im pretty sure AI can't recreate this kind of DX

Profilbild von Pablo Stanley

Pablo Stanleyvor 6 Monaten

DARK MAGIC

Profilbild von Asad Synt

Asad Syntvor 6 Monaten

need it

Profilbild von rege

regevor 6 Monaten

This is soooo good! 🤏😎 🤏🕶️ 😲

Profilbild von Christo Ribeiro

Christo Ribeirovor 6 Monaten

This is beautiful 🤩

Profilbild von dom

domvor 6 Monaten

I ended up using this for a side project tool - very cool stuff. Thanks for sharing!

Profilbild von Jp 🦝

Jp 🦝vor 6 Monaten

Literally started using it yesterday for a project—if you have an alpha or beta, I’m happy to give it a try 🙏

Profilbild von Evil Rabbit

Evil Rabbitvor 6 Monaten

🤍

Profilbild von Michael Houghton 🐺

Michael Houghton 🐺vor 6 Monaten

Man I need this on our maps these marker styles are dope and ffffaaast

Profilbild von Matt

Mattvor 6 Monaten

this is so f beautiful bro ❤️🥰

Profilbild von Atif Saleem

Atif Saleemvor 6 Monaten

It looks great and I got few ideas to adopt from it. I saw something similar at @Replit Agent 4 launch where @amasad prompted the agent to build.

Profilbild von Aleksej Petricig

Aleksej Petricigvor 6 Monaten

That's the coolest animation and UI that I've ever seen! 🤩 Love it!

Profilbild von klöss

klössvor 6 Monaten

ohhhh I love this

Profilbild von Dan ⚡️

Dan ⚡️vor 6 Monaten

so pretty i can't stop watching this

Profilbild von Saïd Aitmbarek

Saïd Aitmbarekvor 6 Monaten

looks insanely cool :)

Profilbild von Tino Fileccia

Tino Filecciavor 6 Monaten

What makes this better than the Three.JS CSS3DRenderer?

Profilbild von Arghya Das

Arghya Dasvor 6 Monaten

thank you, i need it

Profilbild von Fred Moon 🚀

Fred Moon 🚀vor 6 Monaten

im in the deep for exactly this. can't wait for the release!

Profilbild von Nucleus☕️

Nucleus☕️vor 6 Monaten

very niceee

Profilbild von Armin

Arminvor 6 Monaten

Sweet, I’m gonna use this. It’d be good to be able to tag lat and long as well, switch between spherical and flat views, and somehow integrate AI elements into it.

Profilbild von Wrennly

Wrennlyvor 6 Monaten

dom elements as compute targets is wild. did you find the dom update overhead dominates over the gpu work for 1m particles, or did you de...

Profilbild von DeafBuild

DeafBuildvor 6 Monaten

😍

Profilbild von Siddharth Borderwala

Siddharth Borderwalavor 6 Monaten

The demo video is so cool! You cooked with COBE 🔥

Profilbild von Harshal

Harshalvor 6 Monaten

looks awesome!

Profilbild von Tonino Catapano (tonnoz)

Tonino Catapano (tonnoz)vor 6 Monaten

great work thank you!

Profilbild von Antonio Bonet

Antonio Bonetvor 6 Monaten

Will it be possible to have this feature decoupled in case we want to use it like on 2D maps or so?

Profilbild von Doug Lance

Doug Lancevor 6 Monaten

do you need beta testers? 👀

Profilbild von seekvision

seekvisionvor 6 Monaten

nice

Ähnliche Videos

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,725 Aufrufe • vor 3 Jahren

Here's a new Unlimited showcase, I began doing a lot of extra animation polish, I'm trying to push the animations as far as I can with just code alone, that way, it works with any skin mods you might want to use. The overview video with the release date is coming soon

Here's a new Unlimited showcase, I began doing a lot of extra animation polish, I'm trying to push the animations as far as I can with just code alone, that way, it works with any skin mods you might want to use. The overview video with the release date is coming soon

Proto arts

11,532 Aufrufe • vor 1 Monat

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @property --value { syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document.documentElement.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @property --value { syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document.documentElement.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

251,867 Aufrufe • vor 2 Jahren

What is Zero Point Energy? ⚡🛸 It's all around us. It's virtually unlimited and free to use for everyone. And it's insanely powerful as well. Technology they've been suppressing from us for over a century, zero point energy is a ground-breaking energy source that could launch humanity into a whole new era. Unlimited, free energy for everyone. Levitation through space-field manipulation. Faster-than-light travel. Power beyond our imagination. UFO's appear to make use of it, and we've all seen what those are capable of. Google and PhD's will tell you it's impossible, just misinformation. Yet any inventors who work with it get silenced or disappear. Here is what they're not telling us about Zero Point Energy and exactly why they don't want us knowing.

What is Zero Point Energy? ⚡🛸 It's all around us. It's virtually unlimited and free to use for everyone. And it's insanely powerful as well. Technology they've been suppressing from us for over a century, zero point energy is a ground-breaking energy source that could launch humanity into a whole new era. Unlimited, free energy for everyone. Levitation through space-field manipulation. Faster-than-light travel. Power beyond our imagination. UFO's appear to make use of it, and we've all seen what those are capable of. Google and PhD's will tell you it's impossible, just misinformation. Yet any inventors who work with it get silenced or disappear. Here is what they're not telling us about Zero Point Energy and exactly why they don't want us knowing.

Filip Zieba

33,551 Aufrufe • vor 1 Jahr

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,800 Aufrufe • vor 2 Jahren

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,497 Aufrufe • vor 1 Jahr

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images / section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

242,205 Aufrufe • vor 2 Jahren

This argument that “we can transition but our politicians aren’t willing to” doesn’t hold water. We’ve spent trillions globally over the last decade trying to get off fossil fuels, and they’re still 80% of our energy because they’re that good! Solar and wind, EVs, batteries, all have their use cases but they’re extremely expensive and not reliable. The only real alternative for energy generation is nuclear, and that has historically been vilified by activists. So Dr. Ayana is not being honest, we’ve tried to transition and the tech just isn’t there! And no we’re not “f*cked” because none of the extreme climate models are coming true, heat is safer than cold, crop yields are at an all time high, and extreme weather is not getting worse.

This argument that “we can transition but our politicians aren’t willing to” doesn’t hold water. We’ve spent trillions globally over the last decade trying to get off fossil fuels, and they’re still 80% of our energy because they’re that good! Solar and wind, EVs, batteries, all have their use cases but they’re extremely expensive and not reliable. The only real alternative for energy generation is nuclear, and that has historically been vilified by activists. So Dr. Ayana is not being honest, we’ve tried to transition and the tech just isn’t there! And no we’re not “f*cked” because none of the extreme climate models are coming true, heat is safer than cold, crop yields are at an all time high, and extreme weather is not getting worse.

Lucy Biggers

18,010 Aufrufe • vor 3 Monaten

$CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @property --value { inherits: true; initial-value: 0; syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .control__label { counter-reset: low var(--value) high calc(100 - var(--value)); } .control__label::before { content: "COFFEE " counter(low) "%"; } .control__label::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .control__track::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @property --shift { initial-value: 0; inherits: true; syntax: ' '; } @keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇$

CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @property --value { inherits: true; initial-value: 0; syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .controllabel { counter-reset: low var(--value) high calc(100 - var(--value)); } .controllabel::before { content: "COFFEE " counter(low) "%"; } .controllabel::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .controltrack::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @property --shift { initial-value: 0; inherits: true; syntax: ' '; } @keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

377,871 Aufrufe • vor 2 Jahren

Dear Samsung, Even in One UI 9, touch registration is still completely dead for a few milliseconds after an animation changes. If the lockscreen music player closes or reopens, the screen ignores all input until the transition finishes. Stop tethering touch response to UI animation frames! We shouldn't have to wait for a widget to finish its dance just to use the screen. And this is why it feels laggier compared to everyone else as the transitions are not smooth. Also why in the world we cannot tap the music player buttons in AOD mode , why is it set to double tap ? We are not Apple. *Rants over for the day*

Dear Samsung, Even in One UI 9, touch registration is still completely dead for a few milliseconds after an animation changes. If the lockscreen music player closes or reopens, the screen ignores all input until the transition finishes. Stop tethering touch response to UI animation frames! We shouldn't have to wait for a widget to finish its dance just to use the screen. And this is why it feels laggier compared to everyone else as the transitions are not smooth. Also why in the world we cannot tap the music player buttons in AOD mode , why is it set to double tap ? We are not Apple. Rants over for the day

Fahad Ali Javed

13,837 Aufrufe • vor 3 Monaten

Morpho v2 went live today - deploying a new vault can create up to 12 contracts (instead of just the vault, as v1 did) 🤯 Here's what you NEED to know about what's new: - Users can now force withdraw out of a vault even if there is no idle liquidity, using forceDellocate. This withdraws any underlying held positions, even if the vault doesn't have any USDC to withdraw. There is a penalty fee that can be set by curators per position (currently set to 0 by everyone). - Adapters allow Vaults v2 to work with any other contract out there, and require deploying a new adapter contract for every contract. The new Steakhouse high yield instant was deployed with a single adapter around their v1 vault. This means that v2 vaults are no longer limited to just Morpho markets. - Vaults can optionally be deployed with "guardians", turning all operations into an onchain DAO. There are two DAO's created, a guardian DAO where depositers can lock their shares to vote (i.e. revoking a proposed asset cap allocation change), and a 2-2 owner dao between the vault owner and the guardian dao. This is optional but the steakhouse vaults were deployed with this live (using createV1WrapperWithAdditionalGuardian). - Timelocks are now set per function signature, so different vault functions can have different timelocks applied!! short vid of how I used Herd to sleuth all this below:

Morpho v2 went live today - deploying a new vault can create up to 12 contracts (instead of just the vault, as v1 did) 🤯 Here's what you NEED to know about what's new: - Users can now force withdraw out of a vault even if there is no idle liquidity, using forceDellocate. This withdraws any underlying held positions, even if the vault doesn't have any USDC to withdraw. There is a penalty fee that can be set by curators per position (currently set to 0 by everyone). - Adapters allow Vaults v2 to work with any other contract out there, and require deploying a new adapter contract for every contract. The new Steakhouse high yield instant was deployed with a single adapter around their v1 vault. This means that v2 vaults are no longer limited to just Morpho markets. - Vaults can optionally be deployed with "guardians", turning all operations into an onchain DAO. There are two DAO's created, a guardian DAO where depositers can lock their shares to vote (i.e. revoking a proposed asset cap allocation change), and a 2-2 owner dao between the vault owner and the guardian dao. This is optional but the steakhouse vaults were deployed with this live (using createV1WrapperWithAdditionalGuardian). - Timelocks are now set per function signature, so different vault functions can have different timelocks applied!! short vid of how I used Herd to sleuth all this below:

ilemi

37,240 Aufrufe • vor 10 Monaten

I just cracked the code on AI animation ads 🤯 every one of these cost me 12 cents and under 20 seconds to make Gemini Omni + Claude Code is f*cking wild. i built a system that turns any product into an end-to-end AI animated ad in ANY style you want.. claymation, pixar-style 3D, anime, paper cutout, lego, you name it you drop in your product photo and a one line pitch and it handles everything end to end. images, video, voiceover, music, captions, all generated with AI inside Claude.. AI animation ads are crushing on Meta right now and everyone still assumes you need an expensive editor with a 3-week turnaround time to make one. you don't. you just need the right workflow. Im making full end to end high quality AI animation ads in under 3 minutes with this system and they work just as hard organically on TikTok, reels and shorts so i packaged the whole thing up… here's what you're getting: > every prompt i used across all 8 steps > the exact tool stack + the order to run it in > style recipes for claymation, pixar, anime, wes anderson, retro cartoon + CGI > one system that works for paid Meta AND organic built across Claude Code and Gemini Omni RT + reply 'STYLES' and i'll send it over (must be following so i can dm)

I just cracked the code on AI animation ads 🤯 every one of these cost me 12 cents and under 20 seconds to make Gemini Omni + Claude Code is f*cking wild. i built a system that turns any product into an end-to-end AI animated ad in ANY style you want.. claymation, pixar-style 3D, anime, paper cutout, lego, you name it you drop in your product photo and a one line pitch and it handles everything end to end. images, video, voiceover, music, captions, all generated with AI inside Claude.. AI animation ads are crushing on Meta right now and everyone still assumes you need an expensive editor with a 3-week turnaround time to make one. you don't. you just need the right workflow. Im making full end to end high quality AI animation ads in under 3 minutes with this system and they work just as hard organically on TikTok, reels and shorts so i packaged the whole thing up… here's what you're getting: > every prompt i used across all 8 steps > the exact tool stack + the order to run it in > style recipes for claymation, pixar, anime, wes anderson, retro cartoon + CGI > one system that works for paid Meta AND organic built across Claude Code and Gemini Omni RT + reply 'STYLES' and i'll send it over (must be following so i can dm)

Miko

115,542 Aufrufe • vor 3 Monaten

Martin from ChangeNOW on why the barrier to entry into crypto is still really high "We integrated into wallets and many applications just given the swap liquidity or the liquidity cross chain." "We use banks, we do so much in our banking applications that are just natural to us. When a user comes to crypto it's so complicated. How are you storing it, do you have enough gas, what chain is it on. Someone sent me USDT the other day and it was on a completely different chain to what I was expecting. These are some of the difficult things we still experience." "ChangeNOW is integrated into a lot of wallets which has really cut down a lot of those issues, which is really great." "There's a B2B side and a B2C side. On the B2C side people in the comments say I use this all the time to do my swaps, I've got one place to do multiple things. And on the B2B side as a business you can take any of these elements and add that into your own product from payments to swaps."

Martin from ChangeNOW on why the barrier to entry into crypto is still really high "We integrated into wallets and many applications just given the swap liquidity or the liquidity cross chain." "We use banks, we do so much in our banking applications that are just natural to us. When a user comes to crypto it's so complicated. How are you storing it, do you have enough gas, what chain is it on. Someone sent me USDT the other day and it was on a completely different chain to what I was expecting. These are some of the difficult things we still experience." "ChangeNOW is integrated into a lot of wallets which has really cut down a lot of those issues, which is really great." "There's a B2B side and a B2C side. On the B2C side people in the comments say I use this all the time to do my swaps, I've got one place to do multiple things. And on the B2B side as a business you can take any of these elements and add that into your own product from payments to swaps."

The Wolf Of All Streets

29,580 Aufrufe • vor 7 Tagen

The problem: Blockchains lack privacy by default. Their transparency enhances trust, but for institutions managing proprietary strategies and sensitive client information, it’s a major barrier to large-scale adoption. The solution: The Chainlink privacy standard enables private smart contracts at scale on any blockchain. How it works: Computations run in trusted execution environments (TEEs) to achieve privacy and high performance, while decentralized oracle networks and advanced cryptographic techniques provide enhanced security. This ensures sensitive data and business logic remain fully confidential while still having verifiability that all actions were executed exactly as intended. The result: Privacy is enabled. Trust is preserved. Scale is achieved. Just use Chainlink.

The problem: Blockchains lack privacy by default. Their transparency enhances trust, but for institutions managing proprietary strategies and sensitive client information, it’s a major barrier to large-scale adoption. The solution: The Chainlink privacy standard enables private smart contracts at scale on any blockchain. How it works: Computations run in trusted execution environments (TEEs) to achieve privacy and high performance, while decentralized oracle networks and advanced cryptographic techniques provide enhanced security. This ensures sensitive data and business logic remain fully confidential while still having verifiability that all actions were executed exactly as intended. The result: Privacy is enabled. Trust is preserved. Scale is achieved. Just use Chainlink.

Chainlink

34,918 Aufrufe • vor 8 Monaten

The best way to make money with AI is not "selling AI". This makes zero sense. It's like saying "sell internet" in 1999. Here's what you do instead: Pick an offer with active front-end cold traffic demand, then USE AI to automate 90% of the fulfillment work. This is what I refer to as an AI Assisted Agency. It's still an agency. You just use AI to do 90% of the work at 80% gross profit margins. Which means that - You can handle 5x more clients by yourself, without hiring anybody - You can get results for clients without needing to spend hundreds of hours "learning a skill" - What used to take 60 hours now takes 5 hours instead Okay, but what offers? What do you actually sell? As of today, we are launching a new program called AI Assisted Agency (AIAA). We will show you: 1. What to sell 2. Who to sell it to 3. How much to charge 4. What deliverables to include in your offer 5. How to use AI to do all the deliverables of the offer We can help you get an AI Assisted Agency off the ground in the next 30 days from ZERO. - No tech expertise needed - No previous business experience needed - No sales experience needed You can start from zero. Go here to see how it works:

The best way to make money with AI is not "selling AI". This makes zero sense. It's like saying "sell internet" in 1999. Here's what you do instead: Pick an offer with active front-end cold traffic demand, then USE AI to automate 90% of the fulfillment work. This is what I refer to as an AI Assisted Agency. It's still an agency. You just use AI to do 90% of the work at 80% gross profit margins. Which means that - You can handle 5x more clients by yourself, without hiring anybody - You can get results for clients without needing to spend hundreds of hours "learning a skill" - What used to take 60 hours now takes 5 hours instead Okay, but what offers? What do you actually sell? As of today, we are launching a new program called AI Assisted Agency (AIAA). We will show you: 1. What to sell 2. Who to sell it to 3. How much to charge 4. What deliverables to include in your offer 5. How to use AI to do all the deliverables of the offer We can help you get an AI Assisted Agency off the ground in the next 30 days from ZERO. - No tech expertise needed - No previous business experience needed - No sales experience needed You can start from zero. Go here to see how it works:

Daniel Fazio

15,852 Aufrufe • vor 1 Jahr

Poses are a huge part of how you express yourself and your outfits in Royale High and very soon you’ll have even more control over yours! Introducing: Idle Poses! 🌈 With this exciting new feature, you’ll be able to choose which pose you would like to be in each time you stand still in-game! Can’t choose only one? No problem! Pick a few you love and you’ll have a random one selected out of your faves each time! You can use any animation available in the Poses menu and even better, they save to your outfits so each one can have different idle poses! ✨ Here's a little sneak peek of the feature, and one of the brand new prizes for Nature Fairy Class! This, along with new poses and more will be coming in tomorrow's update! 💖💫

Royale High ✨

323,644 Aufrufe • vor 2 Jahren

Here's a video of our Dell Technologies 7975 Precision workstation running local AI for coding agents. It features dual RTX6000 Blackwell GPU w/ 96GB each, so I'm running Qwen 3B on it. I had ChatGPT's desktop app set it all up and configure the integration into VS Code as well. I've done that by hand once before, and once was enough! Now I can query my local agent just as easily as I can with Codex or any other paid model. It's a bit slower, and I only use it to REVIEW code, not author it. Still, it's impressive that you can do this 100% locally now! I'm giving it a final pass over the Task Manager TMOG codebase on "Very High", with unlimited runtime! Only the best for :-)

Here's a video of our Dell Technologies 7975 Precision workstation running local AI for coding agents. It features dual RTX6000 Blackwell GPU w/ 96GB each, so I'm running Qwen 3B on it. I had ChatGPT's desktop app set it all up and configure the integration into VS Code as well. I've done that by hand once before, and once was enough! Now I can query my local agent just as easily as I can with Codex or any other paid model. It's a bit slower, and I only use it to REVIEW code, not author it. Still, it's impressive that you can do this 100% locally now! I'm giving it a final pass over the Task Manager TMOG codebase on "Very High", with unlimited runtime! Only the best for :-)

Dave W Plummer

25,558 Aufrufe • vor 8 Tagen

We told Wes Gray we might be in a bubble. His response about what we can do about it was blunt. "Great, that sucks. Thanks for telling me that. the question is can we can we use that information to actually make us better? And the fortunate answer, as you guys already know, is no. Because if you try to do any sort of model that tries to time based on valuation, they don't work. It's just the fact. It's empirical data. It says good luck." "It's just like being a great short seller. It's not about picking the stock that we all know is gonna go to zero, it's about doing it at the right time, and that's actually, it turns out to be insanely difficult." "Right now, 'cause obviously we have extremely high prices or low earnings yield, I would expect to earn low returns on my overall portfolio in the next 20, 30 years."

We told Wes Gray we might be in a bubble. His response about what we can do about it was blunt. "Great, that sucks. Thanks for telling me that. the question is can we can we use that information to actually make us better? And the fortunate answer, as you guys already know, is no. Because if you try to do any sort of model that tries to time based on valuation, they don't work. It's just the fact. It's empirical data. It says good luck." "It's just like being a great short seller. It's not about picking the stock that we all know is gonna go to zero, it's about doing it at the right time, and that's actually, it turns out to be insanely difficult." "Right now, 'cause obviously we have extremely high prices or low earnings yield, I would expect to earn low returns on my overall portfolio in the next 20, 30 years."

Excess Returns

34,311 Aufrufe • vor 1 Monat