Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

cursor tracking on 3D CSS surfaces 👨‍🍳 inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙 the key: measuring the 4 corners, check the reveal 👇 (ideal for 2D canvas w/ 3D transforms)

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,246 subscribers

118,080 görüntüleme • 8 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 1 yıl önce

Semantically annotating 3D gaussian splats on the fly using gemini 3.1 + sparkjs 1. Load any 3D scene and hit scan 2. Get 2D detections from VLM 3. Cluster outputs & project into 3D world space 4. Save as a persistent 3D semantic layer Inspired by Alexander Chen's experiments with gemini visual intelligence. Just had to try to lift it from 2D to 3D!
0:21

Semantically annotating 3D gaussian splats on the fly using gemini 3.1 + sparkjs 1. Load any 3D scene and hit scan 2. Get 2D detections from VLM 3. Cluster outputs & project into 3D world space 4. Save as a persistent 3D semantic layer Inspired by Alexander Chen's experiments with gemini visual intelligence. Just had to try to lift it from 2D to 3D!

Bilawal Sidhu

56,537 görüntüleme • 1 ay önce

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 görüntüleme • 7 ay önce

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 ʕ•ᴥ•ʔ

839,560 görüntüleme • 7 ay önce

3D for Hana is here. The first canvas that combines 3D and 2D in real-time. Convert any shape to a 3D model in a non-destructive process. All systems (vectors, booleans, layouts, events, etc.) work together.
1:08

3D for Hana is here. The first canvas that combines 3D and 2D in real-time. Convert any shape to a 3D model in a non-destructive process. All systems (vectors, booleans, layouts, events, etc.) work together.

Spline

114,420 görüntüleme • 6 ay önce

Combining 2D and 3D in After Effects. In Foldspace, not every surface needs to be bent. Keep one flat for 2D artwork, and let the others exist in 3D space. This allows you to combine 2D and 3D objects in a single animation with no masks or tricks needed.
0:34

Combining 2D and 3D in After Effects. In Foldspace, not every surface needs to be bent. Keep one flat for 2D artwork, and let the others exist in 3D space. This allows you to combine 2D and 3D objects in a single animation with no masks or tricks needed.

Motion Princess

21,588 görüntüleme • 3 ay önce

LLaVA-3D A Simple yet Effective Pathway to Empowering LMMs with 3D-awareness Recent advancements in Large Multimodal Models (LMMs) have greatly enhanced their proficiency in 2D visual understanding tasks, enabling them to effectively process and understand images and videos. However, the development of LMMs with 3D-awareness for 3D scene understanding has been hindered by the lack of large-scale 3D vision-language datasets and powerful 3D encoders. In this paper, we introduce a simple yet effective framework called LLaVA-3D. Leveraging the strong 2D understanding priors from LLaVA, our LLaVA-3D efficiently adapts LLaVA for 3D scene understanding without compromising 2D understanding capabilities. To achieve this, we employ a simple yet effective representation, 3D Patch, which connects 2D CLIP patch features with their corresponding positions in 3D space. By integrating the 3D Patches into 2D LMMs and employing joint 2D and 3D vision-language instruction tuning, we establish a unified architecture for both 2D image understanding and 3D scene understanding. Experimental results show that LLaVA-3D converges 3.5x faster than existing 3D LMMs when trained on 3D vision-language datasets. Moreover, LLaVA-3D not only achieves state-of-the-art performance across various 3D tasks but also maintains comparable 2D image understanding and vision-language conversation capabilities with LLaVA.
0:31

LLaVA-3D A Simple yet Effective Pathway to Empowering LMMs with 3D-awareness Recent advancements in Large Multimodal Models (LMMs) have greatly enhanced their proficiency in 2D visual understanding tasks, enabling them to effectively process and understand images and videos. However, the development of LMMs with 3D-awareness for 3D scene understanding has been hindered by the lack of large-scale 3D vision-language datasets and powerful 3D encoders. In this paper, we introduce a simple yet effective framework called LLaVA-3D. Leveraging the strong 2D understanding priors from LLaVA, our LLaVA-3D efficiently adapts LLaVA for 3D scene understanding without compromising 2D understanding capabilities. To achieve this, we employ a simple yet effective representation, 3D Patch, which connects 2D CLIP patch features with their corresponding positions in 3D space. By integrating the 3D Patches into 2D LMMs and employing joint 2D and 3D vision-language instruction tuning, we establish a unified architecture for both 2D image understanding and 3D scene understanding. Experimental results show that LLaVA-3D converges 3.5x faster than existing 3D LMMs when trained on 3D vision-language datasets. Moreover, LLaVA-3D not only achieves state-of-the-art performance across various 3D tasks but also maintains comparable 2D image understanding and vision-language conversation capabilities with LLaVA.

AK

41,713 görüntüleme • 1 yıl önce

Thank you Figma for building the best 3D software ever! Jokes aside, this is probably the first and only 3D engine built in Figma. It uses mathematical transformations to project 3D coordinates on a 2D plane (your screen) Check it here:
0:26

Thank you Figma for building the best 3D software ever! Jokes aside, this is probably the first and only 3D engine built in Figma. It uses mathematical transformations to project 3D coordinates on a 2D plane (your screen) Check it here:

DoubleGlitch 🇺🇦

106,157 görüntüleme • 3 yıl önce

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 ʕ•ᴥ•ʔ

109,997 görüntüleme • 8 ay önce

SRB2 without the thok really is peak 3D Sonic. Boost mode is perhaps the best additive mechanic to Sonic we've ever seen and the drop dash aids in turning corners whilst maintaining it and the insta shield acts as an aid to landing on enemies in 3D. This is the ideal moveset 👌
2:01

SRB2 without the thok really is peak 3D Sonic. Boost mode is perhaps the best additive mechanic to Sonic we've ever seen and the drop dash aids in turning corners whilst maintaining it and the insta shield acts as an aid to landing on enemies in 3D. This is the ideal moveset 👌

Caramel Smoothie

14,738 görüntüleme • 1 yıl önce

Logitech MX Master 4 Loved working on this for Skale.solutions alongside very talented 3d artists I did all the vfx, 2d effects and post production after the 3d renders
0:25

Logitech MX Master 4 Loved working on this for Skale.solutions alongside very talented 3d artists I did all the vfx, 2d effects and post production after the 3d renders

GNN.®

29,646 görüntüleme • 3 ay önce

I dramatically shifted my stream's perspective from 2D to 3D. Chat thought we were starting the stream in our standard 2D overlay, until I zoomed out to reveal my new 3D vtuber model.
1:16

I dramatically shifted my stream's perspective from 2D to 3D. Chat thought we were starting the stream in our standard 2D overlay, until I zoomed out to reveal my new 3D vtuber model.

shindigs

88,867 görüntüleme • 1 yıl önce

Atum Works is building 3D ASML. They're 3D printing the 3D devices of the future at 1/10th the cost of today’s 2D lithography.
0:36

Atum Works is building 3D ASML. They're 3D printing the 3D devices of the future at 1/10th the cost of today’s 2D lithography.

Y Combinator

319,294 görüntüleme • 1 yıl önce

👇Draw a sketch. Get a 3D model. Use it anywhere. Today, we're launching the Cursor + Midjourney for 3D modeling. This is Vibe Draw, the future of 3D creation:
1:37

👇Draw a sketch. Get a 3D model. Use it anywhere. Today, we're launching the Cursor + Midjourney for 3D modeling. This is Vibe Draw, the future of 3D creation:

martin

184,857 görüntüleme • 1 yıl önce

Applications to Map The World in 3D and earn $OVR are now OPEN! Apply to Map The World in 3D here ⬇️
1:13

Applications to Map The World in 3D and earn $OVR are now OPEN! Apply to Map The World in 3D here ⬇️

Over the Reality 🌐

35,188 görüntüleme • 2 yıl önce

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,511 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

Check this out!🔥 Modified version of TripoSR (open source 2D to 3D tool). This version outputs USDZ directly for Apple Vision Pro.🥽 You can easily create 3D objects in AVP with one click & view them in your space! Modified repo in the thread 🧵👇
0:30

Check this out!🔥 Modified version of TripoSR (open source 2D to 3D tool). This version outputs USDZ directly for Apple Vision Pro.🥽 You can easily create 3D objects in AVP with one click & view them in your space! Modified repo in the thread 🧵👇

Blaine Brown

48,111 görüntüleme • 2 yıl önce

Day 33 of vibe coding a game+engine using Cursor So I approached character animation from a different perspective this time. Instead of 3D -> 2D I went for native 2D via image to video method. This gives us much richer animations that the limited ones we get with 3D! Eliza is really cute with these! The downside is the time it takes to get them all done, even with Cursor skills/automation. Which ones did you like more? Check the previous posts for the 3D ones!
1:55

Day 33 of vibe coding a game+engine using Cursor So I approached character animation from a different perspective this time. Instead of 3D -> 2D I went for native 2D via image to video method. This gives us much richer animations that the limited ones we get with 3D! Eliza is really cute with these! The downside is the time it takes to get them all done, even with Cursor skills/automation. Which ones did you like more? Check the previous posts for the 3D ones!

Startracker 🔺

33,327 görüntüleme • 4 ay önce