Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

hook this 3D CSS card up to device rotation? sure! 👨‍🍳 tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇

jhey ʕ•ᴥ•ʔ

145,811 subscribers

81,748 views • 8 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

jhey ʕ•ᴥ•ʔ

272,683 views • 2 years ago

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,829 views • 3 years ago

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,294 views • 9 months ago

💡React tip: Use a custom hook to handle array states in your components

💡React tip: Use a custom hook to handle array states in your components

George Moller

119,703 views • 2 years ago

Playing GTA V on Nothing Phone (3) 🔥 Running locally on the device with a PC emulator app. Full video + how to:

Playing GTA V on Nothing Phone (3) 🔥 Running locally on the device with a PC emulator app. Full video + how to:

Ben Geskin

32,231 views • 10 months ago

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

147,001 views • 3 years ago

Scump reacts to device carriers in overload being forced to use a pistol in new update: “That’s a very big change.. the pistol is good this year but now you’re basically 3v4 with the device.. give Dashy the rock.” 🗣️

Scump reacts to device carriers in overload being forced to use a pistol in new update: “That’s a very big change.. the pistol is good this year but now you’re basically 3v4 with the device.. give Dashy the rock.” 🗣️

CoD Clipped

144,681 views • 7 months ago

In 1944 Edwin Land had a vision of “a pocket device you use like a telephone to record images for you to remember that would be with you always”. It would be an electronic device—with no film.

In 1944 Edwin Land had a vision of “a pocket device you use like a telephone to record images for you to remember that would be with you always”. It would be an electronic device—with no film.

Brian Roemmele

24,292 views • 1 year ago

This Little Device Generates All The Frequencies In The World. ⚡🎶 Simple To Use. Powerful To Experience. It’s Changing The Way People Listen To Healing Frequencies. 🧠✨ Explore It 👇

This Little Device Generates All The Frequencies In The World. ⚡🎶 Simple To Use. Powerful To Experience. It’s Changing The Way People Listen To Healing Frequencies. 🧠✨ Explore It 👇

vegastar

17,518 views • 4 months ago

Apparently a Tesla Coil power source inducted field, made equivalent to the Earth’s gravity using Ion proulsion with a rotation flying wheel to gyroscopically keep it stable. This is the famed Graviflyer anti-gravity device by inventor Alexey Chekurkov. YouTube:

Apparently a Tesla Coil power source inducted field, made equivalent to the Earth’s gravity using Ion proulsion with a rotation flying wheel to gyroscopically keep it stable. This is the famed Graviflyer anti-gravity device by inventor Alexey Chekurkov. YouTube:

Brian Roemmele

659,822 views • 1 year ago

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

490,227 views • 3 years ago

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳

jhey ʕ•ᴥ•ʔ

62,676 views • 1 year ago

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

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

jhey ʕ•ᴥ•ʔ

59,139 views • 7 months ago

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 👇

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 views • 8 months ago

The TANSTACK form devtools are here!!! 🔥🎊 New addition to the TanStack devtools family is finally out! 🚀 Debug your forms like never before! 🤖 Check out the docs how to add them to your project here:

The TANSTACK form devtools are here!!! 🔥🎊 New addition to the TanStack devtools family is finally out! 🚀 Debug your forms like never before! 🤖 Check out the docs how to add them to your project here:

Alem Tuzlak 🇧🇦

44,878 views • 9 months ago

The suit that gives workers superpowers The Biolift exoskeleton, a device designed to reduce back strain during heavy lifting, featuring adjustable straps and motion capture sensors for real-time support,

The suit that gives workers superpowers The Biolift exoskeleton, a device designed to reduce back strain during heavy lifting, featuring adjustable straps and motion capture sensors for real-time support,

Science girl

175,449 views • 10 months ago

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

jhey ʕ•ᴥ•ʔ

75,407 views • 1 year ago

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.

Chrome for Developers

19,286 views • 9 months ago

Have you ever tried use this device on gril to get escape...

Have you ever tried use this device on gril to get escape...

Bronze Age Pervert

63,426 views • 3 years ago

⚡️ Custom Made Device Copper Coil 💥 💎 A lot of power being produced by this device...

⚡️ Custom Made Device Copper Coil 💥 💎 A lot of power being produced by this device...

𝐏𝐇𝐎𝐄𝐍𝐈𝐗🐦‍🔥𝐃𝐑𝐀𝐆𝐎𝐍

12,207 views • 21 days ago