正在加载视频...

视频加载失败

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

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

2,680 subscribers

31,366 次观看 • 13 天前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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.

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

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!

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

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.

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

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

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

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

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

Guillermo Rauch

184,010 次观看 • 2 年前

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

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

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!?”

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 次观看 • 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! :)

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

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

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

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

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

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 🍯

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

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

116,873 次观看 • 2 个月前

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

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

7th year: ioana ★

29,144 次观看 • 3 个月前

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

661,773 次观看 • 1 个月前

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.

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

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

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

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.

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

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 🛒

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

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

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