Loading video...
Video Failed to Load
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.
225,256 views • 6 months ago •via X (Twitter)
37 Comments
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.
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!
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.
clean! I posted my first design yesterday and just got humbled
youre the best
This is gorgeous, currently using v1 on and will be upgrading once available. Awesome work!
is there a marker limit?
@1weiho whaaaaaat, so cool
@samko_cx We should chat 😂
im pretty sure AI can't recreate this kind of DX
DARK MAGIC
need it
This is soooo good! 🤏😎 🤏🕶️ 😲
This is beautiful 🤩
I ended up using this for a side project tool - very cool stuff. Thanks for sharing!
Literally started using it yesterday for a project—if you have an alpha or beta, I’m happy to give it a try 🙏
🤍
Man I need this on our maps these marker styles are dope and ffffaaast
this is so f beautiful bro ❤️🥰
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.
That's the coolest animation and UI that I've ever seen! 🤩 Love it!
ohhhh I love this
so pretty i can't stop watching this
looks insanely cool :)
What makes this better than the Three.JS CSS3DRenderer?
thank you, i need it
im in the deep for exactly this. can't wait for the release!
very niceee
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.
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...
😍
The demo video is so cool! You cooked with COBE 🔥
looks awesome!
great work thank you!
Will it be possible to have this feature decoupled in case we want to use it like on 2D maps or so?
do you need beta testers? 👀
nice
![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! 👇](https://image.24vids.com/tw-1742951071473967117/ext_tw_video_thumb/1742947397649506306/pu/img/A1Su3thQr8ZQBvdt.jpg)
![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! 👇](https://image.24vids.com/tw-1748809599598399792/ext_tw_video_thumb/1748804672406843392/pu/img/xbvSosI5c_q3Oq2B.jpg)
