Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Design Engineering 101: Make drag interactions feel more intuitive and alive. Add a handle indicator, and animate scale, rotation, and shadow during the transition. Show where the item will land with an empty-space cutout.

alyx_so's profile picture

alyx

2,680 subscribers

31,366 görüntüleme • 12 gün önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Design Engineering 101: Make your number steppers feel awesome. A number stepper that only bumps once per click makes you click twenty times. Reward the hold. Animate it nicely with rolling digits, blur on transitions and gradient masks to avoid abrupt cuts.
0:13

Design Engineering 101: Make your number steppers feel awesome. A number stepper that only bumps once per click makes you click twenty times. Reward the hold. Animate it nicely with rolling digits, blur on transitions and gradient masks to avoid abrupt cuts.

alyx

72,394 görüntüleme • 10 gün önce

We've been investing in animations and micro-interactions at Mobbin to enhance the user experience with delightful touches. Love how they make our site feel more alive ✨ Stay tuned for more!
0:13

We've been investing in animations and micro-interactions at Mobbin to enhance the user experience with delightful touches. Love how they make our site feel more alive ✨ Stay tuned for more!

Jiho Lim

31,191 görüntüleme • 1 yıl önce

The all-new #HondaPrologue SUV has class-leading passenger space, intuitive tech, and an elevated design. It’s everything you’d expect from a Honda, now electric. On sale now.
0:15

The all-new #HondaPrologue SUV has class-leading passenger space, intuitive tech, and an elevated design. It’s everything you’d expect from a Honda, now electric. On sale now.

Honda

82,701 görüntüleme • 2 yıl önce

Tried Walgtech 👨🏻‍💻's idea to make a video of the interior transitions Starting with construction base to the Interior AI design to it adding people And Suno 4.5+ to add that cliche interior transition music
0:10

Tried Walgtech 👨🏻‍💻's idea to make a video of the interior transitions Starting with construction base to the Interior AI design to it adding people And Suno 4.5+ to add that cliche interior transition music

@levelsio

241,092 görüntüleme • 9 ay önce

A rite of passage in design engineering: implement the safety triangle for hover interactions
0:10

A rite of passage in design engineering: implement the safety triangle for hover interactions

Guillermo Rauch

184,010 görüntüleme • 2 yıl önce

(1/2) Introducing the dynamic and sporty Tata CURVV; With an elegant design combining toughness and durability of an SUV with the sleek design of a coupe. Visit to know more.
0:17

(1/2) Introducing the dynamic and sporty Tata CURVV; With an elegant design combining toughness and durability of an SUV with the sleek design of a coupe. Visit to know more.

Tata Motors Cars

62,292 görüntüleme • 3 yıl önce

Been thinking about that family talk between sage and shadow in the crossworlds rival dialogue I understand what gruncle shadow is saying but its kinda funny him saying it to a 6 year old and the contrast between their second rival dialogue where sage absolutely grills him and the item dialogue Shadow: “The doctor's daughter? Hmph. Perhaps if he put more care into your construction, you'd provide more of a challenge.” Sage: “I am the culmination of Dr. Eggman's genius. You are a relic of fifty years ago.” Sage (Item Hit): “Ultimately failed, Shadow.” Shadow (Hit by Item): “Do you know who I am, Sage!?”
0:19

Been thinking about that family talk between sage and shadow in the crossworlds rival dialogue I understand what gruncle shadow is saying but its kinda funny him saying it to a 6 year old and the contrast between their second rival dialogue where sage absolutely grills him and the item dialogue Shadow: “The doctor's daughter? Hmph. Perhaps if he put more care into your construction, you'd provide more of a challenge.” Sage: “I am the culmination of Dr. Eggman's genius. You are a relic of fifty years ago.” Sage (Item Hit): “Ultimately failed, Shadow.” Shadow (Hit by Item): “Do you know who I am, Sage!?”

Sage VALE

26,537 görüntüleme • 10 ay önce

introducing: burn transition for Framer scroll or animate through a torn, glowing edge that feels alive right on your canvas. tweak the burn, noise, edge, and glow to shape the transition you want. comment "BURN" and i'll send it to you for free! :)
0:10

introducing: burn transition for Framer scroll or animate through a torn, glowing edge that feels alive right on your canvas. tweak the burn, noise, edge, and glow to shape the transition you want. comment "BURN" and i'll send it to you for free! :)

Framer University

14,729 görüntüleme • 5 ay önce

Can’t stop making these micro interactions and animations on the websites Took me about an hour to design and develop.
0:16

Can’t stop making these micro interactions and animations on the websites Took me about an hour to design and develop.

James Laurent

21,917 görüntüleme • 7 ay önce

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

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

116,873 görüntüleme • 2 ay önce

Nothing has landed on the moon. And nothing ever will land on the moon! Space is fake and g a y!
0:19

Nothing has landed on the moon. And nothing ever will land on the moon! Space is fake and g a y!

ConspiracyDad - EGI Hunter - Flat Earther

18,788 görüntüleme • 1 yıl önce

Mind Map Improvements 🙌🏻 Drag & Drop — We’ve rebuilt interactions to make node placement more predictable and intuitive, helping you organize your thoughts more effectively. Collapsible Nodes — You can now expand and collapse child nodes, making it easier to focus and manage complex mind map structures. Work smarter, not harder — powered by Wax AI 🍯
0:14

Mind Map Improvements 🙌🏻 Drag & Drop — We’ve rebuilt interactions to make node placement more predictable and intuitive, helping you organize your thoughts more effectively. Collapsible Nodes — You can now expand and collapse child nodes, making it easier to focus and manage complex mind map structures. Work smarter, not harder — powered by Wax AI 🍯

Wax AI

63,081 görüntüleme • 4 ay önce

how the transition between 21st century romance and so what will feel
0:11

how the transition between 21st century romance and so what will feel

7th year: ioana ★

29,144 görüntüleme • 3 ay önce

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

661,773 görüntüleme • 1 ay önce

An engineering marvel rising from the dust - this colossal steel framework stretches across the sky with perfect geometric precision. Thousands of beams forming graceful arches that will soon shelter an enormous space. The sheer scale is breathtaking.
0:14

An engineering marvel rising from the dust - this colossal steel framework stretches across the sky with perfect geometric precision. Thousands of beams forming graceful arches that will soon shelter an enormous space. The sheer scale is breathtaking.

Johnny

26,087 görüntüleme • 2 ay önce

Here's the catch: The Loop is second only to Midtown Manhattan. It's home to business giants like United Airlines, CME Group, and JPMorgan Chase. Its 1.5 square miles serve as the economic engine of Chicago but it needs our help. Office vacancy in the Loop has reached record highs at a concerning rate. More than 25% of downtown office space now sits empty and idle. This represents more than simply a loss for the real estate industry. It's an indicator that Chicago's business climate needs serious attention. We've spoken with the owners of many businesses, large and small, and many say the same thing. These businesses employ Chicagoans, pay taxes, and keep neighborhoods alive - but feel that Chicago doesn't appreciate them. We should. #chicago
0:19

Here's the catch: The Loop is second only to Midtown Manhattan. It's home to business giants like United Airlines, CME Group, and JPMorgan Chase. Its 1.5 square miles serve as the economic engine of Chicago but it needs our help. Office vacancy in the Loop has reached record highs at a concerning rate. More than 25% of downtown office space now sits empty and idle. This represents more than simply a loss for the real estate industry. It's an indicator that Chicago's business climate needs serious attention. We've spoken with the owners of many businesses, large and small, and many say the same thing. These businesses employ Chicagoans, pay taxes, and keep neighborhoods alive - but feel that Chicago doesn't appreciate them. We should. #chicago

Susana A. Mendoza ☮️

84,685 görüntüleme • 3 ay önce

Always look for places where to add soul, empty state screens are often a good candidate. Breakdown of drop shadow, inner shadow and blur effects for a user... bit of magic if they ever run into it.
0:13

Always look for places where to add soul, empty state screens are often a good candidate. Breakdown of drop shadow, inner shadow and blur effects for a user... bit of magic if they ever run into it.

Natko Hasic

77,920 görüntüleme • 1 yıl önce

As life expands, so does what you value. Inside the all-new electric #GLB, innovation and comfort create a space that moves with you. From the refined materials to the intelligent MBUX interface, every detail is designed to make driving feel effortless and arriving feel exceptional. Discover an interior that welcomes you with light, space, and intuition. Because true progress begins on the inside. #MercedesBenz
0:16

As life expands, so does what you value. Inside the all-new electric #GLB, innovation and comfort create a space that moves with you. From the refined materials to the intelligent MBUX interface, every detail is designed to make driving feel effortless and arriving feel exceptional. Discover an interior that welcomes you with light, space, and intuition. Because true progress begins on the inside. #MercedesBenz

Mercedes-Benz

130,397 görüntüleme • 8 ay önce

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒
0:14

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒

FHILY👑

75,645 görüntüleme • 1 ay önce