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.

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

94,715 subscribers

160,204 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

Delba1 year ago

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.

CodeRabbit1 year ago

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

Cory Simmons1 year ago

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.

Delba1 year ago

Animations are disabled if you set prefers reduced motion

Drayken1 year ago

firefox you fuckers get to work

Chris Nicholas1 year ago

Very nice! Looking forward to trying out these APIs.

Delba1 year ago

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

Dmytro1 year ago

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

kant1 year ago

Looks good

0xultrainstinct💢1 year ago

thank you, this looks amazing!!

Neanrakyr1 year ago

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

Related Videos

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 views • 2 years ago

🚀 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 views • 1 year ago

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 views • 2 years ago

<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 views • 2 years ago

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 views • 1 year ago

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 views • 1 year ago

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 views • 1 year ago

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 views • 1 year ago

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

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 views • 16 days ago

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 views • 1 month ago

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

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 views • 1 year ago

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 views • 1 year ago

🟢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,009 views • 16 days ago

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 views • 1 year ago

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

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,851 views • 3 years ago

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 365 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 365 days) for the experiment by tying him to those ropes!~

Green dragon

14,021 views • 1 year ago