Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,398 subscribers

110,070 Aufrufe • vor 10 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

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

jhey ʕ•ᴥ•ʔ

95,939 Aufrufe • vor 10 Monaten

CSS only balance sliders 🤙 @​keyframes sync { to { --value: 1; }} .slider { animation: sync; animation-timeline: --thumb; } .track { scale: var(--value) 1; } ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll-animated input [type=range] in disguise 🥸
0:28

CSS only balance sliders 🤙 @​keyframes sync { to { --value: 1; }} .slider { animation: sync; animation-timeline: --thumb; } .track { scale: var(--value) 1; } ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll-animated input [type=range] in disguise 🥸

jhey ʕ•ᴥ•ʔ

276,038 Aufrufe • vor 2 Jahren

Input a video to generate 3D dance animations in real time and connect to UE5 for anime-style animation output. The free version 1.6.2 is now available!
0:34

Input a video to generate 3D dance animations in real time and connect to UE5 for anime-style animation output. The free version 1.6.2 is now available!

CYANPUPPETS

12,254 Aufrufe • vor 1 Jahr

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @​keyframes x { to { translate: var(--x) 0 } @​keyframes y { to { translate: 0 var(--y) }
0:28

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @​keyframes x { to { translate: var(--x) 0 } @​keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

58,449 Aufrufe • vor 9 Monaten

#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eager: used to immediately update the number input value to match the snapped item set to ship in Chrome 129 snap events available to try today in Canary behind the web experiments flag try it blog post in the works that'll give all the details and tons more demo's 🤘🏻
0:25

#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eager: used to immediately update the number input value to match the snapped item set to ship in Chrome 129 snap events available to try today in Canary behind the web experiments flag try it blog post in the works that'll give all the details and tons more demo's 🤘🏻

Adam Argyle

62,075 Aufrufe • vor 2 Jahren

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)
0:29

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)

jhey ʕ•ᴥ•ʔ

123,076 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Jahren

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.
1:20

Watch out! Chrome has a huge bug with <input type="number"> which causes values to change unexpectedly. It's fixed in Chrome 150, but that won't land until the end of June.

Jake Archibald

302,533 Aufrufe • vor 3 Monaten

✨ Okay finally finished it, took a bit [ 🎨 Paint wall ] on Interior AI lets you paint any wall in your interior designs to see how it'd look It's an <input type="color"> and a <canvas> where you paint a mask and then it paints it into a photorealistic render!
0:36

✨ Okay finally finished it, took a bit [ 🎨 Paint wall ] on Interior AI lets you paint any wall in your interior designs to see how it'd look It's an <input type="color"> and a <canvas> where you paint a mask and then it paints it into a photorealistic render!

@levelsio

192,264 Aufrufe • vor 10 Monaten

Introducing Cube 2.0, a significant step towards controllable 3D game-world and video generation from any input. Powered by: 🌟 Image-to-3D in seconds w/ a new foundation model 🐎 Text-to-animation 🌎 AI rendering to create beautiful worlds (mesh+splats) Web app → Discord → Blog →
1:11

Introducing Cube 2.0, a significant step towards controllable 3D game-world and video generation from any input. Powered by: 🌟 Image-to-3D in seconds w/ a new foundation model 🐎 Text-to-animation 🌎 AI rendering to create beautiful worlds (mesh+splats) Web app → Discord → Blog →

Common Sense Machines

411,413 Aufrufe • vor 2 Jahren

Introducing MirageLSD: The First Live-Stream Diffusion (LSD) AI Model Input any video stream, from a camera or video chat to a computer screen or game, and transform it into any world you desire, in real-time (<40ms latency). Here’s how it works (w/ demo you can use!):
0:31

Introducing MirageLSD: The First Live-Stream Diffusion (LSD) AI Model Input any video stream, from a camera or video chat to a computer screen or game, and transform it into any world you desire, in real-time (<40ms latency). Here’s how it works (w/ demo you can use!):

Decart

1,012,813 Aufrufe • vor 1 Jahr

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @​keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @​keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @​keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇
0:56

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @​keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @​keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @​keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

426,530 Aufrufe • vor 2 Jahren

Open-weight MiniMax M3 filled out a US customs form from a driver's license photo For this test we deployed MiniMax M3 Q4 using MLX-VLM on a Mac Studio M3 Ultra 512GB RAM. The model was tasked with reading a scanned document and an ID card photo, then completing a declaration form Output: 736 tokens · Input: 1,847 tokens · Time: ~31s The model analyzed both inputs, streamed its reasoning, and then called three tools: write_field for text fields, mark for Yes/No checkboxes, and sign for the signature and date. It extracted the required information, mapped it to the correct fields and completed the form without any manual input
0:20

Open-weight MiniMax M3 filled out a US customs form from a driver's license photo For this test we deployed MiniMax M3 Q4 using MLX-VLM on a Mac Studio M3 Ultra 512GB RAM. The model was tasked with reading a scanned document and an ID card photo, then completing a declaration form Output: 736 tokens · Input: 1,847 tokens · Time: ~31s The model analyzed both inputs, streamed its reasoning, and then called three tools: write_field for text fields, mark for Yes/No checkboxes, and sign for the signature and date. It extracted the required information, mapped it to the correct fields and completed the form without any manual input

atomic.chat

109,369 Aufrufe • vor 2 Monaten

I've been talking about these real-time AI render layers for a few years now as an obvious next step for 3d, but seeing it unfolding (albeit still in the early stages), is pretty amazing. This is Krea's new model that transforms your input in near-realtime (I adjusted the slight offset a bit to make it more obvious here). I'll post an un-edited video in the replies.
0:28

I've been talking about these real-time AI render layers for a few years now as an obvious next step for 3d, but seeing it unfolding (albeit still in the early stages), is pretty amazing. This is Krea's new model that transforms your input in near-realtime (I adjusted the slight offset a bit to make it more obvious here). I'll post an un-edited video in the replies.

Martin Nebelong

66,625 Aufrufe • vor 11 Monaten

🔥Excited to introduce Tencent Hunyuan3D-Omni, the industry's first 3D asset creation system with multi-condition control. Built on the open-source Hunyuan3D 2.1 as the "ControlNet of 3D," it addresses single-view occlusions, and poor geometry by integrating up to four control conditions. Two core innovations power the system: a Lightweight Unified Control Encoder for efficient multimodal fusion, and a Progressive Difficulty-Aware Training Strategy that boosts robustness. ✅Under single-image conditions, skeletal input provides precise pose control for animation and avatars. ✅Point cloud input—full or depth-projected—removes visual ambiguity and yields accurate photorealistic geometry. ✅Bounding box control adjusts L/W/H ratios to match design scale. ✅Voxel control sculpts topology for engineering and creative workflows. We are open-sourcing inference code and weights to accelerate controllable 3D research and industry deployment. Code: Weights: Tech Report: #3DGenAI #TencentHunyuan #OpenSourceAI
0:37

🔥Excited to introduce Tencent Hunyuan3D-Omni, the industry's first 3D asset creation system with multi-condition control. Built on the open-source Hunyuan3D 2.1 as the "ControlNet of 3D," it addresses single-view occlusions, and poor geometry by integrating up to four control conditions. Two core innovations power the system: a Lightweight Unified Control Encoder for efficient multimodal fusion, and a Progressive Difficulty-Aware Training Strategy that boosts robustness. ✅Under single-image conditions, skeletal input provides precise pose control for animation and avatars. ✅Point cloud input—full or depth-projected—removes visual ambiguity and yields accurate photorealistic geometry. ✅Bounding box control adjusts L/W/H ratios to match design scale. ✅Voxel control sculpts topology for engineering and creative workflows. We are open-sourcing inference code and weights to accelerate controllable 3D research and industry deployment. Code: Weights: Tech Report: #3DGenAI #TencentHunyuan #OpenSourceAI

Tencent Hy

34,898 Aufrufe • vor 11 Monaten

Here's a look behind the scenes of how I used a 3d model, generated from an image, as a "driver" for ai animation. In the near future we'll see more 3d tools that support these types of workflows, with much more emphasis on enhancing user input instead of just letting the ai do everything. I used the 3d model to generate keyframes that I then animated in Luma Dream. By using a 3d model with a diffusion "layer" done with Krea, I got quite high quality frames with a relatively high consistency as well since the AI didn't have to "hallucinate" that much. I upscaled and detailed the frames using Magnific. Using semi-detailed 3d models as drivers for gen ai is very powerful, and it allows us to use models that are sculpted in a more free-flowing type of workflow that doesn't rely so much on high surface detailing or very time-consuming finish, but instead relies more on gestural 3d sculpting. #art #ai
0:24

Here's a look behind the scenes of how I used a 3d model, generated from an image, as a "driver" for ai animation. In the near future we'll see more 3d tools that support these types of workflows, with much more emphasis on enhancing user input instead of just letting the ai do everything. I used the 3d model to generate keyframes that I then animated in Luma Dream. By using a 3d model with a diffusion "layer" done with Krea, I got quite high quality frames with a relatively high consistency as well since the AI didn't have to "hallucinate" that much. I upscaled and detailed the frames using Magnific. Using semi-detailed 3d models as drivers for gen ai is very powerful, and it allows us to use models that are sculpted in a more free-flowing type of workflow that doesn't rely so much on high surface detailing or very time-consuming finish, but instead relies more on gestural 3d sculpting. #art #ai

Martin Nebelong

48,259 Aufrufe • vor 2 Jahren

Meet MapAnything – a transformer that directly regresses factored metric 3D scene geometry (from images, calibration, poses, or depth) in an end-to-end way. No pipelines, no extra stages. Just 3D geometry & cameras, straight from any type of input, delivering new state-of-the-art results 🚀 One universal model enables SoTA for: 🔥 Mono Depth Estimation 🔥 Multi-View SfM 🔥 Multi-View Stereo 🔥 Depth Completion 🔥 Registration … and many more possibilities! – plus everything is metric 🎯 We release code for data processing, training, benchmarking & ablations – everything Apache 2.0! Details & Links 👇
1:30

Meet MapAnything – a transformer that directly regresses factored metric 3D scene geometry (from images, calibration, poses, or depth) in an end-to-end way. No pipelines, no extra stages. Just 3D geometry & cameras, straight from any type of input, delivering new state-of-the-art results 🚀 One universal model enables SoTA for: 🔥 Mono Depth Estimation 🔥 Multi-View SfM 🔥 Multi-View Stereo 🔥 Depth Completion 🔥 Registration … and many more possibilities! – plus everything is metric 🎯 We release code for data processing, training, benchmarking & ablations – everything Apache 2.0! Details & Links 👇

Nikhil Keetha

123,125 Aufrufe • vor 11 Monaten