Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 12 Tagen •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

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 Aufrufe • vor 10 Tagen

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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

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 Aufrufe • vor 2 Jahren

(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 Aufrufe • vor 3 Jahren

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

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

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

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

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 3 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

661,773 Aufrufe • vor 1 Monat

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

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

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 1 Monat