Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

132,744 subscribers

160,430 Aufrufe • vor 1 Jahr •via X (Twitter)

Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Delba

Delbavor 1 Jahr

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.

Profilbild von CodeRabbit

CodeRabbitvor 1 Jahr

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

Profilbild von Cory Simmons

Cory Simmonsvor 1 Jahr

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.

Profilbild von Delba

Delbavor 1 Jahr

Animations are disabled if you set prefers reduced motion

Profilbild von Drayken

Draykenvor 1 Jahr

firefox you fuckers get to work

Profilbild von Chris Nicholas

Chris Nicholasvor 1 Jahr

Very nice! Looking forward to trying out these APIs.

Profilbild von Delba

Delbavor 1 Jahr

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

Profilbild von Dmytro

Dmytrovor 1 Jahr

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

Profilbild von kant

kantvor 1 Jahr

Looks good

Profilbild von 0xultrainstinct💢

0xultrainstinct💢vor 1 Jahr

thank you, this looks amazing!!

Profilbild von Neanrakyr

Neanrakyrvor 1 Jahr

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

Ähnliche 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 Aufrufe • vor 2 Jahren

🚀 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 Aufrufe • vor 1 Jahr

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,627 Aufrufe • vor 2 Jahren

<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,433 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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,270 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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,888 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 3 Monaten

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,464 Aufrufe • vor 9 Monaten

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,701 Aufrufe • vor 1 Jahr

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,383 Aufrufe • vor 1 Jahr

me seeing a another Claude bot that made $50 → $625,000 in a month and someone dropped a full guide I just said <Claude make me rich and use Polymarket for it> I am calculating my profit: $0→ $200 per day Claude Code Broke Polymarket Weather Trading

me seeing a another Claude bot that made $50 → $625,000 in a month and someone dropped a full guide I just said <Claude make me rich and use Polymarket for it> I am calculating my profit: $0→ $200 per day Claude Code Broke Polymarket Weather Trading

Aleiah

80,484 Aufrufe • vor 5 Monaten

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,687 Aufrufe • vor 1 Jahr

🟢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

29,425 Aufrufe • vor 2 Monaten

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,874 Aufrufe • vor 3 Jahren