Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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,...

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,410 subscribers

54,267 Aufrufe • vor 3 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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.
0:16

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

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)`), }} />
0:14

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)`), }} />

Gabriel

89,615 Aufrufe • vor 4 Monaten

In mathematics, a rose curve (also called a rhodonea curve) is a pattern made by using sine or cosine waves and plotting them in polar coordinates, which means using angles and distances from a centre point
0:13

In mathematics, a rose curve (also called a rhodonea curve) is a pattern made by using sine or cosine waves and plotting them in polar coordinates, which means using angles and distances from a centre point

Science girl

85,237 Aufrufe • vor 1 Jahr

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,904 Aufrufe • vor 1 Jahr

This scene using Data Mapping to turn a free flowing fluid into a highly viscus liquid and then back to free flowing again with a simple curve spline. INSYDIUM #fluids #FUSED
0:16

This scene using Data Mapping to turn a free flowing fluid into a highly viscus liquid and then back to free flowing again with a simple curve spline. INSYDIUM #fluids #FUSED

Mike Batchelor

22,630 Aufrufe • vor 1 Jahr

This play had a 0% catch probability and a 0% catch actuality (but only just barely)! Pete Crow-Armstrong is going to spoil the curve for lesser outfielders!
0:16

This play had a 0% catch probability and a 0% catch actuality (but only just barely)! Pete Crow-Armstrong is going to spoil the curve for lesser outfielders!

The WARmonger

1,107,641 Aufrufe • vor 1 Jahr

Massive performance improvement. This is a bit more of technical post, but man do I love this stuff! Units navigate the map using a 'Navigation Mesh'. Before, I was using one giant nav mesh that spanned the entire map. The more objects that were placed (especially on a large map such as this 'RadarAttack' map designed by Syphotic | Steel Command), the larger the 'lag' would be after placement. You can see here that there is a massive frame drop and the navmesh doesnt update for almost 5 seconds. Now, there are a ton of tiny navmeshes that connect to one another, and together they cover the whole map. Now, when an object is placed, the navmesh will update instantly, because it no longer needs to parse through every object on the map (potentially thousands!!!). It only needs to parse through the objects that exist in the mini navmesh that the object was placed in (probably only 1-5 objects now!). Performance XP Boost +100! Charles Horwood You might appreciate this one :) #Rts #RTSGame #IndieGame
0:13

Massive performance improvement. This is a bit more of technical post, but man do I love this stuff! Units navigate the map using a 'Navigation Mesh'. Before, I was using one giant nav mesh that spanned the entire map. The more objects that were placed (especially on a large map such as this 'RadarAttack' map designed by Syphotic | Steel Command), the larger the 'lag' would be after placement. You can see here that there is a massive frame drop and the navmesh doesnt update for almost 5 seconds. Now, there are a ton of tiny navmeshes that connect to one another, and together they cover the whole map. Now, when an object is placed, the navmesh will update instantly, because it no longer needs to parse through every object on the map (potentially thousands!!!). It only needs to parse through the objects that exist in the mini navmesh that the object was placed in (probably only 1-5 objects now!). Performance XP Boost +100! Charles Horwood You might appreciate this one :) #Rts #RTSGame #IndieGame

Smitty | Steel Command

60,072 Aufrufe • vor 9 Monaten

When you've been debugging for 6 hours and finally realized you wrote conts instead of const😅🤣
0:11

When you've been debugging for 6 hours and finally realized you wrote conts instead of const😅🤣

F.O.L.A

89,953 Aufrufe • vor 8 Monaten

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; });
0:18

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

This silver Mustang was ripping around that tight curve under the overpass when... You see it flying into the frame, hugging the white line on the exit ramp, then smoothly powering through the whole bend while the camera pans to keep up as it disappears down the highway. What a clean run, would you pull over and stop everything just to watch this Mustang drift that curve or keep it moving?
0:14

This silver Mustang was ripping around that tight curve under the overpass when... You see it flying into the frame, hugging the white line on the exit ramp, then smoothly powering through the whole bend while the camera pans to keep up as it disappears down the highway. What a clean run, would you pull over and stop everything just to watch this Mustang drift that curve or keep it moving?

R͓̽Y͓̽a͓̽n͓̽C͓̽e͓̽y͓̽

341,228 Aufrufe • vor 6 Monaten

The prompt response by #RPF Head Const. P.K. Mondal & Const. Ankhi Sakar saved a passengers' life when she faced a mishap while boarding a moving train at Durgapur stn. Relying solely on others for safety isn't enough, #BeResponsible and never board a moving train. #BeSafe
0:10

The prompt response by #RPF Head Const. P.K. Mondal & Const. Ankhi Sakar saved a passengers' life when she faced a mishap while boarding a moving train at Durgapur stn. Relying solely on others for safety isn't enough, #BeResponsible and never board a moving train. #BeSafe

RPF INDIA

12,690 Aufrufe • vor 3 Jahren

🙌New XP glitch 😈 Map Code: 6541-7678-3440 Build and and break it 🚨This map actually gives XP, unlike the others that are currently being patched due to crashes. ⚠️
0:18

🙌New XP glitch 😈 Map Code: 6541-7678-3440 Build and and break it 🚨This map actually gives XP, unlike the others that are currently being patched due to crashes. ⚠️

LeaksFNxp

276,481 Aufrufe • vor 10 Monaten

Here’s a revised Depth Map Storyboard workflow. This workflow gives you much more control over the storyboard and produces more consistent results. Workflow below 🧵
0:14

Here’s a revised Depth Map Storyboard workflow. This workflow gives you much more control over the storyboard and produces more consistent results. Workflow below 🧵

OAK

44,836 Aufrufe • vor 3 Monaten

Such a horrible experience playing against people from South America Look at a map and you will see some people who are trying to play this event in Ontario, Canada and are playing people from Santiago, Chile it’s ridiculous 🤦‍♂️🤦‍♂️🤦‍♂️ Imagine being from Iceland and you have to play someone from South Africa. A DISTANCE OF OVER 10,000 KM 🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️ I really do hate complaining but damn it’s seriously frustrating You can split Asia into 2 but you don’t want to do the same with the Americas or even Europe and Africa? Cmon man eFootball
0:17

Such a horrible experience playing against people from South America Look at a map and you will see some people who are trying to play this event in Ontario, Canada and are playing people from Santiago, Chile it’s ridiculous 🤦‍♂️🤦‍♂️🤦‍♂️ Imagine being from Iceland and you have to play someone from South Africa. A DISTANCE OF OVER 10,000 KM 🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️ I really do hate complaining but damn it’s seriously frustrating You can split Asia into 2 but you don’t want to do the same with the Americas or even Europe and Africa? Cmon man eFootball

Jacques

10,634 Aufrufe • vor 8 Monaten

Saree folds and that curve absolute fire 🥵✨🔥....!!
0:16

Sensitive content

Saree folds and that curve absolute fire 🥵✨🔥....!!

Sᴀᴛʜ༏sʜ ⚠️

79,197 Aufrufe • vor 6 Monaten

At any point on a curve, there's one circle that fits the curve better than any other. It touches the curve at that point, leans in the same direction, and bends by the same amount. It tells you how sharply the curve is bending at that exact spot, and which way it's leaning. If the curve is bending sharply, the circle is small. If the curve is nearly straight, the circle is huge. The osculating circle of the curve.
0:17

At any point on a curve, there's one circle that fits the curve better than any other. It touches the curve at that point, leans in the same direction, and bends by the same amount. It tells you how sharply the curve is bending at that exact spot, and which way it's leaning. If the curve is bending sharply, the circle is small. If the curve is nearly straight, the circle is huge. The osculating circle of the curve.

The Math Flow

51,317 Aufrufe • vor 2 Monaten