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.

Design Engineering Tip: Separate the object from its shadow. When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality. Used carefully, this can... make interfaces feel more tangible and less like layers floating on a screen. It's not something I'd apply everywhere, but for moments that need extra emphasis, it can be surprisingly effective. js const card = document.querySelector(".notification"); const shadow = document.querySelector(".shadow"); card.animate( [ { transform: "translateY(0)" }, { transform: "translateY(-160px)" }, ], { duration: 900, easing: "cubic-bezier(.64,0,.78,0)" } ); shadow.animate( [ { opacity: 0.5, transform: "scaleX(1)" }, { opacity: 0, transform: "scaleX(.35)" }, ], { duration: 700, easing: "ease-out" } );show more

Gabriel

6,232 subscribers

64,086 views • 8 days 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

yo! been cooking a new game ✨ it's called Shadow Trick and it's a cute platformer where you can turn into a shadow. Wishlist it on Steam 👇

yo! been cooking a new game ✨ it's called Shadow Trick and it's a cute platformer where you can turn into a shadow. Wishlist it on Steam 👇

neutronized

49,485 views • 2 years ago

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

jhey ʕ•ᴥ•ʔ

54,852 views • 10 months ago

<ShadowAlpha /> was added to drei by Faraz add it to any mesh and its shadow will now support opacity, transmission and shadowAlpha. it's using bayer dithering, but you can pair it with <SoftShadows /> to cover it up.

<ShadowAlpha /> was added to drei by Faraz add it to any mesh and its shadow will now support opacity, transmission and shadowAlpha. it's using bayer dithering, but you can pair it with <SoftShadows /> to cover it up.

☄︎

19,463 views • 2 years ago

Ever played Shadow Hearts on PlayStation 2? 👻 The story is set in 1913 and follows Yuri Hyuga, a human with the ability to capture and transform into monsters. Actions in battle rely on a timing-based system dubbed the Judgement Ring.

Ever played Shadow Hearts on PlayStation 2? 👻 The story is set in 1913 and follows Yuri Hyuga, a human with the ability to capture and transform into monsters. Actions in battle rely on a timing-based system dubbed the Judgement Ring.

FantasyAnime

52,409 views • 9 months ago

A Super update is coming to Minecraft! Gather the Chaos Emeralds, defeat Dr. Eggman, and transform into Super Sonic and Super Shadow in the newest Sonic Add-On Update TODAY!

A Super update is coming to Minecraft! Gather the Chaos Emeralds, defeat Dr. Eggman, and transform into Super Sonic and Super Shadow in the newest Sonic Add-On Update TODAY!

Sonic the Hedgehog

779,943 views • 10 months ago

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

257,886 views • 1 year ago

I’m happy Shadow can finally start a healthy grieving process now. This scene wasn’t as simple as Shadow saying goodbye. It’s Shadow being able to finally let it out. It’s Shadow being able to express his grief after a lifetime of that being an impossibility.

I’m happy Shadow can finally start a healthy grieving process now. This scene wasn’t as simple as Shadow saying goodbye. It’s Shadow being able to finally let it out. It’s Shadow being able to express his grief after a lifetime of that being an impossibility.

Caramel Smoothie

108,507 views • 1 year ago

In honor of April 1st, here is my "Sussy Shadow" Asset!😳 You can pin this shadow on your model for a funny look! Usage: No need to credit but i would appreciate it! The asset is on my VGen~ #VTuberAsset #VTuber素材

Sensitive content

In honor of April 1st, here is my "Sussy Shadow" Asset!😳 You can pin this shadow on your model for a funny look! Usage: No need to credit but i would appreciate it! The asset is on my VGen~ #VTuberAsset #VTuber素材

nei✨🪱【lucid ☁️】💘🔜OFFKAI | lobita💙🐺

132,552 views • 2 months ago

Can I get your guys' feedback on this? I'm working on creating a fake shadow effect under Lina, so look underneath her during this clip. It's made up of two parts, a circular shadow and a light, transparent and rotating ring. Just need to know if its obnoxious lol

Can I get your guys' feedback on this? I'm working on creating a fake shadow effect under Lina, so look underneath her during this clip. It's made up of two parts, a circular shadow and a light, transparent and rotating ring. Just need to know if its obnoxious lol

CornflowerBlue

28,605 views • 1 month ago

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,420 views • 2 years ago

The shadow of the story can now be told. Learn the history of the Realm of Shadow, the unseen land that will be revealed on June 21, 2024. Pre-order #ELDENRING Shadow of the Erdtree:

The shadow of the story can now be told. Learn the history of the Realm of Shadow, the unseen land that will be revealed on June 21, 2024. Pre-order #ELDENRING Shadow of the Erdtree:

ELDEN RING

9,251,802 views • 2 years ago

Great Britain was once a mighty empire, but today it’s a shadow of its former self. Can it be saved? Maybe. But for now, Australia should distance itself and focus on strengthening our alliance with President Trump and the United States. Support my work and help me bring back common sense Join The Movement -

Great Britain was once a mighty empire, but today it’s a shadow of its former self. Can it be saved? Maybe. But for now, Australia should distance itself and focus on strengthening our alliance with President Trump and the United States. Support my work and help me bring back common sense Join The Movement -

Senator Babet

60,821 views • 1 year ago

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

152,818 views • 2 years ago

“This is a shadow on the Mountain from that planes trail - I’ve never seen that before it’s insane” It keeps on happening an nobody can explain this new Phenomena

“This is a shadow on the Mountain from that planes trail - I’ve never seen that before it’s insane” It keeps on happening an nobody can explain this new Phenomena

Concerned Citizen

291,787 views • 7 months ago

'Shadow the Hedgehog: Reloaded' (Shadow Mod) by LimblessVector & dreamsyntax An improvement mod of Shadow the Hedgehog designed to make the game less tedious, increase challenge, fix bugs and oversights,

'Shadow the Hedgehog: Reloaded' (Shadow Mod) by LimblessVector & dreamsyntax An improvement mod of Shadow the Hedgehog designed to make the game less tedious, increase challenge, fix bugs and oversights,

Sonic The Hedgeblog

111,303 views • 1 year ago

Every Shadow garden member wants to go on a date with Shadow, also Alpha didnt need to do Nu like that

Every Shadow garden member wants to go on a date with Shadow, also Alpha didnt need to do Nu like that

Kaneki

105,369 views • 11 months ago

Object shadow. Design tip#453

Object shadow. Design tip#453

DAILY DESIGN POSTS©

13,831 views • 3 months ago

Thinking about what a missed opportunity it was for Shadow Generations Final Boss to not use the scrapped Final Boss Theme from Shadow 05

Thinking about what a missed opportunity it was for Shadow Generations Final Boss to not use the scrapped Final Boss Theme from Shadow 05

SplashDash

75,717 views • 1 year ago

Here the timelapse - I like practising with the square brush because it has no pressure or opacity variety, aka I'm forced to just focus on shapes/light/shadow. I also always work big - medium - small, both for efficiency and structure

Here the timelapse - I like practising with the square brush because it has no pressure or opacity variety, aka I'm forced to just focus on shapes/light/shadow. I also always work big - medium - small, both for efficiency and structure

Layer @House S4

19,384 views • 3 months ago