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: Don’t move objects at a constant shape. As speed increases, stretch them in the direction of travel. The faster they move, the more they deform. Combined with easing and subtle motion blur, even simple animations can feel significantly more dynamic. const x = useMotionValue(0) const v... show more

Gabriel

7,916 subscribers

89,615 views • 4 months 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

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };

Gabriel

19,660 views • 2 months ago

Design Engineering Tip: Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance. let t; const nav = document.querySelector(".navbar"); window.addEventListener("scroll", () => { nav. style.backdropFilter = "blur(8px)"; clearTimeout(t); t = setTimeout(() => { nav. style.backdropFilter = "blur(24px)"; }, 120); });

Design Engineering Tip: Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance. let t; const nav = document.querySelector(".navbar"); window.addEventListener("scroll", () => { nav. style.backdropFilter = "blur(8px)"; clearTimeout(t); t = setTimeout(() => { nav. style.backdropFilter = "blur(24px)"; }, 120); });

Gabriel

89,114 views • 5 months ago

With Claude Fable 5 making software creation more accessible, interaction design is becoming an even bigger differentiator. So here is a Design Engineering Tip: Most interfaces wait for users to act. Better interfaces prepare for what users are about to do. This pattern is called Input Anticipation. By reacting to intent before an interaction happens, products feel faster, smarter, and easier to use. JS const box = document.querySelector(".input") const ring = document.querySelector(".focus-ring") addEventListener("pointermove", (e) => { const r = box.getBoundingClientRect() const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right) const dy = Math.max(r. top - e.clientY, 0, e.clientY - r.bottom) const distance = Math.hypot(dx, dy) const intent = Math.max(0, 1 - distance / 180) ** 2 ring. style.opacity = intent }) Save this for later.

With Claude Fable 5 making software creation more accessible, interaction design is becoming an even bigger differentiator. So here is a Design Engineering Tip: Most interfaces wait for users to act. Better interfaces prepare for what users are about to do. This pattern is called Input Anticipation. By reacting to intent before an interaction happens, products feel faster, smarter, and easier to use. JS const box = document.querySelector(".input") const ring = document.querySelector(".focus-ring") addEventListener("pointermove", (e) => { const r = box.getBoundingClientRect() const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right) const dy = Math.max(r. top - e.clientY, 0, e.clientY - r.bottom) const distance = Math.hypot(dx, dy) const intent = Math.max(0, 1 - distance / 180) ** 2 ring. style.opacity = intent }) Save this for later.

Gabriel

41,136 views • 4 months ago

Since Opus 4.8 is out and more and more designers are getting into Design Engineering, I thought I’d share some of the interaction patterns I use most often: Use proximity, not just hover. When the cursor gets close, nearby elements can subtly scale and darken based on distance. It makes interfaces feel more responsive, less binary, and way more alive onpointermove = e => document.querySelectorAll(".dock>*").forEach(el => { const r = el.getBoundingClientRect(); const t = Math.max(0, 1 - Math.abs(e.clientX - r.x - r.width/2) / 120); el. style.scale = 1 + t * .5; });

Since Opus 4.8 is out and more and more designers are getting into Design Engineering, I thought I’d share some of the interaction patterns I use most often: Use proximity, not just hover. When the cursor gets close, nearby elements can subtly scale and darken based on distance. It makes interfaces feel more responsive, less binary, and way more alive onpointermove = e => document.querySelectorAll(".dock>").forEach(el => { const r = el.getBoundingClientRect(); const t = Math.max(0, 1 - Math.abs(e.clientX - r.x - r.width/2) / 120); el. style.scale = 1 + t .5; });

Gabriel

670,820 views • 4 months ago

Still excited about these 3Blue1Brown-style videos generated by AI. Here’s a beautiful illustration of a classic analysis problem: Let f be convex, nonnegative on [0,∞), with f(0)>0 and f(x)→0 as x→∞. Place a light source at (0,b) with 0<b<f(0). Rays reflect off the graph of f and the x-axis following the usual laws of optics. Question: can any ray escape to +∞, or do all trajectories eventually come back? Prompt to video

Still excited about these 3Blue1Brown-style videos generated by AI. Here’s a beautiful illustration of a classic analysis problem: Let f be convex, nonnegative on [0,∞), with f(0)>0 and f(x)→0 as x→∞. Place a light source at (0,b) with 0<b<f(0). Rays reflect off the graph of f and the x-axis following the usual laws of optics. Question: can any ray escape to +∞, or do all trajectories eventually come back? Prompt to video

Paata Ivanisvili

2,272,356 views • 6 months ago

Mexico in the group stage: Mexico 2 x 0 South Africa Mexico 1 x 0 South Korea Mexico 3 x 0 Czech Republic

Mexico in the group stage: Mexico 2 x 0 South Africa Mexico 1 x 0 South Korea Mexico 3 x 0 Czech Republic

vids that go hard

214,622 views • 4 months ago

$y = { 2.6(1 - 2⌊2(9x mod 1)⌋) if ⌊x⌋ mod 16 = 0 1.7 · 2(4x - ⌊4x + 1/2⌋) if ⌊x⌋ mod 4 = 0 0.9 - 1.8 frac(x) otherwise }$

y = { 2.6(1 - 2⌊2(9x mod 1)⌋) if ⌊x⌋ mod 16 = 0 1.7 · 2(4x - ⌊4x + 1/2⌋) if ⌊x⌋ mod 4 = 0 0.9 - 1.8 frac(x) otherwise }

𝑷𝑶𝑫𝑨

11,393 views • 25 days ago

$ffmpeg -i "/dev/video" -filter_complex \ "[0:v]split=2[orig][copy]; \ [copy]setpts=PTS+0.5/TB[delayed]; \ [orig][delayed]blend=all_expr='if(gt(mod(sin((X*X - Y*Y)/3000 + T*2)*cos((X+Y)/2000)\,1)\,0.5)\,A\,B)', \ hue=h='360*t/10':s=2,format=yuv420p[v]" \ -map "[v]" -map 0:a -c:v libx264 -crf 18 -preset fast -c:a$

ffmpeg -i "/dev/video" -filter_complex \ "[0:v]split=2[orig][copy]; \ [copy]setpts=PTS+0.5/TB[delayed]; \ [orig][delayed]blend=all_expr='if(gt(mod(sin((XX - YY)/3000 + T2)cos((X+Y)/2000)\,1)\,0.5)\,A\,B)', \ hue=h='360*t/10':s=2,format=yuv420p[v]" \ -map "[v]" -map 0:a -c:v libx264 -crf 18 -preset fast -c:a

𝐬𝐨𝐯

34,664 views • 1 year ago

Realized mapping on this isn't using a sine curve 🤦‍♂️ JavaScript map could be more like this ✨ // Map distance against 0deg-90deg const mapper = gsap.utils.mapRange(250, 50, 0, 90) // Clamp that value and convert to radians and run through Math.sin 🤙 const active = Math.sin( gsap.utils.clamp( 0, 90, mapper(cursorDistance) ) * (Math.PI / 180) ) And that gives you a nicer curve 😎 (IMO) Happy Friyay! 🥳

Realized mapping on this isn't using a sine curve 🤦‍♂️ JavaScript map could be more like this ✨ // Map distance against 0deg-90deg const mapper = gsap.utils.mapRange(250, 50, 0, 90) // Clamp that value and convert to radians and run through Math.sin 🤙 const active = Math.sin( gsap.utils.clamp( 0, 90, mapper(cursorDistance) ) * (Math.PI / 180) ) And that gives you a nicer curve 😎 (IMO) Happy Friyay! 🥳

jhey ʕ•ᴥ•ʔ

54,267 views • 3 years ago

6MANS GAUNTLET COMPLETE 🏆 3-1 Rank H 🏆 3-0 Rank E 🏆 3-0 Rank D 🏆 3-1 Rank C 🏆 3-1 Rank B 🏆 3-1 Rank B+ ☠️ 0-3 Rank A 🏆 3-1 Rank X 🏆 3-2 Rank S

6MANS GAUNTLET COMPLETE 🏆 3-1 Rank H 🏆 3-0 Rank E 🏆 3-0 Rank D 🏆 3-1 Rank C 🏆 3-1 Rank B 🏆 3-1 Rank B+ ☠️ 0-3 Rank A 🏆 3-1 Rank X 🏆 3-2 Rank S

GGM1 Coconut

85,633 views • 7 months ago

Motion blur can obscure important details of an animal's behavior. Now, researchers can video tiny insects in flight blur-free. That and more of the best in Science Magazine and science in this edition of #ScienceAdviser:

Motion blur can obscure important details of an animal's behavior. Now, researchers can video tiny insects in flight blur-free. That and more of the best in Science Magazine and science in this edition of #ScienceAdviser:

Christie Wilcox

30,936 views • 2 years ago

Brazil v Morocco and they showed 0 baddies in the stands

Brazil v Morocco and they showed 0 baddies in the stands

⛩️

178,012 views • 4 months ago

Here's a version with PS2 style motion blur

Here's a version with PS2 style motion blur

Rem // Kowloon's Curse

90,946 views • 2 years ago

Add a little joy to your UI when removing an item. .removing-item .container { filter: blur(8px); opacity: 0; transform: scale(0.92); transition: filter 280ms ease-in, opacity 200ms ease-in, transform 280ms ease-in; } .removing-item { width: 0; transition: width 320ms cubic-bezier(0.2, 0, 0, 1) 60ms; }

Add a little joy to your UI when removing an item. .removing-item .container { filter: blur(8px); opacity: 0; transform: scale(0.92); transition: filter 280ms ease-in, opacity 200ms ease-in, transform 280ms ease-in; } .removing-item { width: 0; transition: width 320ms cubic-bezier(0.2, 0, 0, 1) 60ms; }

Kevin

120,061 views • 5 months ago

Who said travel outfits can't steal the spotlight? ✈️🔥 Created with GPT image 2 and Seedance 2.0 on @thankyouai_hq PROMPT: Style: Fast-paced, cinematic, luxury fashion, IMAX-quality visuals, dramatic lighting, premium color grading, energetic editing, no dialogue, powerful electronic trailer music with cinematic impacts. 0:00–0:02 Ultra-wide shot of automatic airport doors sliding open. The model steps in wearing sunglasses and headphones. Quick bass hit. 0:02–0:04 Fast tracking shot from the side as she confidently walks through the terminal, pulling a sleek carry-on. Motion blur and speed ramps. 0:04–0:06 Rapid montage: . Coffee picked up from a café . Boarding pass flips into her hand . Close-up of a luxury watch . Sneakers hitting the polished floor (0.5-second cuts) 0:06–0:09 Low-angle hero shot. She walks through the terminal as sunlight streams through massive windows. People blur past while she stays perfectly in focus. 0:09–0:11 Fast sequence: . Escalator ride . Airport departure board . Hair flip . Adjusts sunglasses . Camera orbit transition 0:11–0:13 Slow motion for a split second as she walks toward the boarding gate. Cinematic lens flares, dramatic trailer boom. 0:13–0:15 Final hero shot from behind as she walks through the jet bridge. She glances back over her shoulder for one frame before the screen cuts to black with a powerful cinematic impact sound. Editing Style . 0.3–1 second shots . Speed ramps . Whip pans . Match cuts . Flash-frame transitions . Bass drops synchronized with cuts . Cinematic trailer pacing . Confident runway-style walk throughout . No dialogue, only high-energy trailer music and cinematic sound design This will feel more like a Netflix action trailer meets a luxury fashion campaign rather than a typical airport vlog.

Who said travel outfits can't steal the spotlight? ✈️🔥 Created with GPT image 2 and Seedance 2.0 on @thankyouai_hq PROMPT: Style: Fast-paced, cinematic, luxury fashion, IMAX-quality visuals, dramatic lighting, premium color grading, energetic editing, no dialogue, powerful electronic trailer music with cinematic impacts. 0:00–0:02 Ultra-wide shot of automatic airport doors sliding open. The model steps in wearing sunglasses and headphones. Quick bass hit. 0:02–0:04 Fast tracking shot from the side as she confidently walks through the terminal, pulling a sleek carry-on. Motion blur and speed ramps. 0:04–0:06 Rapid montage: . Coffee picked up from a café . Boarding pass flips into her hand . Close-up of a luxury watch . Sneakers hitting the polished floor (0.5-second cuts) 0:06–0:09 Low-angle hero shot. She walks through the terminal as sunlight streams through massive windows. People blur past while she stays perfectly in focus. 0:09–0:11 Fast sequence: . Escalator ride . Airport departure board . Hair flip . Adjusts sunglasses . Camera orbit transition 0:11–0:13 Slow motion for a split second as she walks toward the boarding gate. Cinematic lens flares, dramatic trailer boom. 0:13–0:15 Final hero shot from behind as she walks through the jet bridge. She glances back over her shoulder for one frame before the screen cuts to black with a powerful cinematic impact sound. Editing Style . 0.3–1 second shots . Speed ramps . Whip pans . Match cuts . Flash-frame transitions . Bass drops synchronized with cuts . Cinematic trailer pacing . Confident runway-style walk throughout . No dialogue, only high-energy trailer music and cinematic sound design This will feel more like a Netflix action trailer meets a luxury fashion campaign rather than a typical airport vlog.

Sophia

40,470 views • 2 months ago

Just a fish… doing cardio… questioning life… 🫧🫧 Move move fish before the overthinking hits 😭🐟 📣 Our $1200 USDT giveaway event starts on 5/26 0:00 UTC!! Don’t just swim in circles, swim for the win 🫧 🐙🐙🐙 🐠🐠🐠

Just a fish… doing cardio… questioning life… 🫧🫧 Move move fish before the overthinking hits 😭🐟 📣 Our $1200 USDT giveaway event starts on 5/26 0:00 UTC!! Don’t just swim in circles, swim for the win 🫧 🐙🐙🐙 🐠🐠🐠

MoveMoveFish

11,843 views • 1 year ago

Design Engineering Tip: Don’t reveal a grid all at once. Use stagger() to give every item a tiny delay. You can add an extra motion detail to give the reveal more character, like this tiny swing. import { stagger } from "motion" animateView(update) .add(".item") .enter( { opacity: [0, 1], y: [12, 0], rotate: [-2, 0] }, { delay: stagger(0.05, { from: "center" }) } )

Design Engineering Tip: Don’t reveal a grid all at once. Use stagger() to give every item a tiny delay. You can add an extra motion detail to give the reveal more character, like this tiny swing. import { stagger } from "motion" animateView(update) .add(".item") .enter( { opacity: [0, 1], y: [12, 0], rotate: [-2, 0] }, { delay: stagger(0.05, { from: "center" }) } )

Gabriel

62,427 views • 3 months ago