正在加载视频...

视频加载失败

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

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 次观看 • 4 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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

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

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

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

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

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

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

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

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

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

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

Brazil v Morocco and they showed 0 baddies in the stands

Brazil v Morocco and they showed 0 baddies in the stands

⛩️

178,012 次观看 • 4 个月前

Here's a version with PS2 style motion blur

Here's a version with PS2 style motion blur

Rem // Kowloon's Curse

90,946 次观看 • 2 年前

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

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

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

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