正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

106,297 subscribers

160,269 次观看 • 1 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

11 条评论

Delba 的头像

Delba1 年前

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 的头像

CodeRabbit1 年前

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

Cory Simmons 的头像

Cory Simmons1 年前

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 的头像

Delba1 年前

Animations are disabled if you set prefers reduced motion

Drayken 的头像

Drayken1 年前

firefox you fuckers get to work

Chris Nicholas 的头像

Chris Nicholas1 年前

Very nice! Looking forward to trying out these APIs.

Delba 的头像

Delba1 年前

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

Dmytro 的头像

Dmytro1 年前

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

kant 的头像

kant1 年前

Looks good

0xultrainstinct💢 的头像

0xultrainstinct💢1 年前

thank you, this looks amazing!!

Neanrakyr 的头像

Neanrakyr1 年前

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

相关视频

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 次观看 • 2 年前

🚀 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 次观看 • 1 年前

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 次观看 • 2 年前

<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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 5 个月前

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 次观看 • 23 天前

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 次观看 • 1 个月前

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 次观看 • 7 个月前

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 次观看 • 1 年前

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 次观看 • 1 年前

🟢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,367 次观看 • 22 天前

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 次观看 • 1 年前

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 次观看 • 10 个月前

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 次观看 • 3 年前

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 次观看 • 1 年前