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 = useVelocity(x) const scaleX = useTransform(v, [-1200, 0, 1200], [1.8, 1, 1.8]) const blur = useTransform(v, [-1200, 0, 1200], [3, 0, 3]) `blur(${b}px)`), }} />show more

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 }, };show more

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); });show more

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.show more

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; });show more

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 videoshow more

Mexico in the group stage: Mexico 2 x 0... South Africa Mexico 1 x 0 South Korea Mexico 3 x 0 Czech Republicshow more

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 }show more

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:ashow more

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! 🥳show more

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 Sshow more

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:show more

Brazil v Morocco and they showed 0 baddies in... the standsshow more

Here's a version with PS2 style motion blur

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; }show more

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.show more

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 🫧 🐙🐙🐙 🐠🐠🐠show more

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" }) } )show more