Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Delba

110,875 subscribers

160,300 görüntüleme • 1 yıl önce •via X (Twitter)

Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

11 Yorum

Delba profil fotoğrafı

Delba1 yıl önce

Here is a diff adding view transitions: Still figuring out best practices and how to compose everything. Tailwind adding some view transition presets will go a long way.

CodeRabbit profil fotoğrafı

CodeRabbit1 yıl önce

AI-first pull request reviewer with context-aware feedback, line-by-line code suggestions, and real-time chat.

Cory Simmons profil fotoğrafı

Cory Simmons1 yıl önce

As someone who disables motion blur in every single thing I possibly can including closing my eyes at movie theaters, I'd suggest not adding motion blur.

Delba profil fotoğrafı

Delba1 yıl önce

Animations are disabled if you set prefers reduced motion

Drayken profil fotoğrafı

Drayken1 yıl önce

firefox you fuckers get to work

Chris Nicholas profil fotoğrafı

Chris Nicholas1 yıl önce

Very nice! Looking forward to trying out these APIs.

Delba profil fotoğrafı

Delba1 yıl önce

It's pretty cool how far basic usage goes, barely touching the surface of what's possible.

Dmytro profil fotoğrafı

Dmytro1 yıl önce

Okay, I’ll need to rework my website-portfolio soon :)

kant profil fotoğrafı

kant1 yıl önce

Looks good

0xultrainstinct💢 profil fotoğrafı

0xultrainstinct💢1 yıl önce

thank you, this looks amazing!!

Neanrakyr profil fotoğrafı

Neanrakyr1 yıl önce

When will you release the NextSchool :D ! ? I love when you teach me how to be better in Next !

Benzer Videolar

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 görüntüleme • 2 yıl önce

🚀 Introducing <AnimateNumber /> A Motion+ React component for making beautiful number animations. Based on @MBarvian's NumberFlow, this version is built entirely on Motion, so existing users can use it for just +2.5kb.

🚀 Introducing <AnimateNumber /> A Motion+ React component for making beautiful number animations. Based on @MBarvian's NumberFlow, this version is built entirely on Motion, so existing users can use it for just +2.5kb.

Matt Perry

69,882 görüntüleme • 1 yıl önce

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

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

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney

Anderson Mancini

26,380 görüntüleme • 2 yıl önce

how I (trying to) make motion blur shots in TXR, for now it's the only way - you need Universal Unreal Unlocker to change game speed to 0,03 and use free camera to pan with the car

how I (trying to) make motion blur shots in TXR, for now it's the only way - you need Universal Unreal Unlocker to change game speed to 0,03 and use free camera to pan with the car

OLEGII 🦄| HOPECORE ERA | 📸 A Plague Tale series

15,776 görüntüleme • 1 yıl önce

keypad w/ CSS + <img> layers 🧑‍🍳 .key { mask: url(keycap.png); } .key:active img { translate: 0 20%; } use keycap images as a mask for the container that they translate in ✨ bonus: clip-path to clip the hit area + filter to style the keys 🤙

keypad w/ CSS + <img> layers 🧑‍🍳 .key { mask: url(keycap.png); } .key:active img { translate: 0 20%; } use keycap images as a mask for the container that they translate in ✨ bonus: clip-path to clip the hit area + filter to style the keys 🤙

jhey ʕ•ᴥ•ʔ

148,020 görüntüleme • 1 yıl önce

Implemented a very simple timeline and motion blur in my path tracer. Just animating the scene a bit and accumulating frames (works well with rotation). Even 128 camera samples seems to be enough for even fairly fast movement

Implemented a very simple timeline and motion blur in my path tracer. Just animating the scene a bit and accumulating frames (works well with rotation). Even 128 camera samples seems to be enough for even fairly fast movement

Vladimir Komarov

13,928 görüntüleme • 1 yıl önce

Location : Telangana Gap in median + a biker waiting to turn --> a dangerous combo. Bikers -- wait for a safe gap ,use U turn lane if it's available Car drivers -- spot them early and use horn to alert them and slow down as backup after checking for traffic behind

Location : Telangana Gap in median + a biker waiting to turn --> a dangerous combo. Bikers -- wait for a safe gap ,use U turn lane if it's available Car drivers -- spot them early and use horn to alert them and slow down as backup after checking for traffic behind

DriveSmart🛡️

83,743 görüntüleme • 1 yıl önce

Codex v0.93.0 introduces the ability to use ChatGPT apps directly in the terminal Enable via /experimental command To enable an app you MUST use $<app> which injects MCP tool functions for that session I like this approach, it means I could have 100 apps and dynamically use

Codex v0.93.0 introduces the ability to use ChatGPT apps directly in the terminal Enable via /experimental command To enable an app you MUST use $<app> which injects MCP tool functions for that session I like this approach, it means I could have 100 apps and dynamically use

Numman Ali

177,266 görüntüleme • 6 ay önce

Trump's 900+ page financial disclosures and his windfall earnings ... are also a campaign windfall for Democrats, if they choose to use it Spoke with MS NOW for MeidasTouch ====>

Trump's 900+ page financial disclosures and his windfall earnings ... are also a campaign windfall for Democrats, if they choose to use it Spoke with MS NOW for MeidasTouch ====>

Scott MacFarlane

22,006 görüntüleme • 1 ay önce

I was scheduled to do a talk on the best way to use Fable 5 today. Here's how that went: > I got rugpulled by the US government (0:00) > what I'm using Fable for (1:38) > looping, and why few can afford it (4:14) > my affordable looping strategy (6:30) > LLM canaries (17:29)

I was scheduled to do a talk on the best way to use Fable 5 today. Here's how that went: > I got rugpulled by the US government (0:00) > what I'm using Fable for (1:38) > looping, and why few can afford it (4:14) > my affordable looping strategy (6:30) > LLM canaries (17:29)

Rob Hallam

32,211 görüntüleme • 1 ay önce

we've shipped brand, deck, and product design for 40+ teams at a16z speedrun 005 - all in under 2 months. a blur in the best possible way. designed for 100+ early-stage startups …this year alone. founders do seem to have a type. :> see the work ↓

tonik - design for startups

275,435 görüntüleme • 8 ay önce

Ultron is getting a bad rep so far in #MarvelRivals, but I wanted to make a quick video with 10 Tips on ways I found to play him 0:00 - Introduction 0:20 - Sustain Heals 0:47 - Keep LOS 1:14 - Self Heals 1:30 - Playing w/ Flyers 2:04 - Constantly Use Shield 2:37 - Primary Damage 3:35 - Poke 3:54 - Ultimate 5:00 - Ult Movement 5:41 - Iron Man Team Up 6:12 - Using Movement

Ultron is getting a bad rep so far in #MarvelRivals, but I wanted to make a quick video with 10 Tips on ways I found to play him 0:00 - Introduction 0:20 - Sustain Heals 0:47 - Keep LOS 1:14 - Self Heals 1:30 - Playing w/ Flyers 2:04 - Constantly Use Shield 2:37 - Primary Damage 3:35 - Poke 3:54 - Ultimate 5:00 - Ult Movement 5:41 - Iron Man Team Up 6:12 - Using Movement

Marvel Rivals Intel

240,409 görüntüleme • 1 yıl önce

Mizutsune themes for me GU >>>>>>> Rise > Wilds Unfortunately the Wilds theme just doesn't have the energy that I fell in love with the GU theme and it has oddly few instruments at play. Rise theme isn't much better but the vocals push the theme to a very different direction

Mizutsune themes for me GU >>>>>>> Rise > Wilds Unfortunately the Wilds theme just doesn't have the energy that I fell in love with the GU theme and it has oddly few instruments at play. Rise theme isn't much better but the vocals push the theme to a very different direction

TweetingGaruga

66,359 görüntüleme • 1 yıl önce

🟢Substance Painter Tip: The Passthrough blend mode in combination with the Smudge tool lets you adjust generated/filter results in a non-destructive way. E.g.: The Blur filter operates in 2D space, which can cause visible seams at the UV island borders. A fix for that is to add Paint above the Blur and use the Passthrough blend mode. Passthrough allows you to smudge the output below it. Works the same for standard layers!

🟢Substance Painter Tip: The Passthrough blend mode in combination with the Smudge tool lets you adjust generated/filter results in a non-destructive way. E.g.: The Blur filter operates in 2D space, which can cause visible seams at the UV island borders. A fix for that is to add Paint above the Blur and use the Passthrough blend mode. Passthrough allows you to smudge the output below it. Works the same for standard layers!

Keeki | 3D Artist

28,403 görüntüleme • 1 ay önce

Need help getting started on Hyperliquid? Keep seeing ppl say to use but confused as to why? This one is for you. 0:27 | Core vs EVM 0:58 | Quick Start (EVM<>Core, Deposits) 2:00 | Unit Assets & Why ft WarDaddyCapital 3:34 | Spot Markets & Alpha 4:34 | More Alpha

Need help getting started on Hyperliquid? Keep seeing ppl say to use but confused as to why? This one is for you. 0:27 | Core vs EVM 0:58 | Quick Start (EVM<>Core, Deposits) 2:00 | Unit Assets & Why ft WarDaddyCapital 3:34 | Spot Markets & Alpha 4:34 | More Alpha

Jenn

52,588 görüntüleme • 1 yıl önce

I just KEEP seeing uses for Prettify<T> out in the wild. Here, you can use it to unwrap a class with lots of complex inheritance to actually see it in the tooltip.

I just KEEP seeing uses for Prettify<T> out in the wild. Here, you can use it to unwrap a class with lots of complex inheritance to actually see it in the tooltip.

Matt Pocock

152,857 görüntüleme • 3 yıl önce

Create Cool Fortnite Character Animations! Using powerful yet easy to use tools such as 'Audio-to-Animation' you can create high quality animations right within Unreal Engine 5 and UEFN. Many still aren't aware that there are over 1,200 Fortnite characters, or "skins" that are available for your use right within UEFN! Coming Soon: My crash course on how to create these cool animations in UEFN and UE5 - you won't want to miss this. In this video: Mixamo animations are used, along with a cool talking animation (body) created by the talented Matt Workman Matt Workman that's available at #UEFN #UE5 #Unrealengine #characteranimation #learnunrealengine

Create Cool Fortnite Character Animations! Using powerful yet easy to use tools such as 'Audio-to-Animation' you can create high quality animations right within Unreal Engine 5 and UEFN. Many still aren't aware that there are over 1,200 Fortnite characters, or "skins" that are available for your use right within UEFN! Coming Soon: My crash course on how to create these cool animations in UEFN and UE5 - you won't want to miss this. In this video: Mixamo animations are used, along with a cool talking animation (body) created by the talented Matt Workman Matt Workman that's available at #UEFN #UE5 #Unrealengine #characteranimation #learnunrealengine

Just a Simple Caveman

10,388 görüntüleme • 10 ay önce

A very extreme idea for a huge balloon haha I know x3 We just wanted to experiment this with the biggest balloon in existence, gosh that balloon felt really strong thanks to those strings >.< Of course I had to use Blimped Sonder (for 291 days) for the experiment by tying him to those ropes!~

A very extreme idea for a huge balloon haha I know x3 We just wanted to experiment this with the biggest balloon in existence, gosh that balloon felt really strong thanks to those strings >.< Of course I had to use Blimped Sonder (for 291 days) for the experiment by tying him to those ropes!~

Green dragon

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