Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

💡design engineering tip: if you are using toasts, don't just create new toasts and stack every toast on each other. it confuses users, and creates a lot of visual noice. 📷 instead, use a cycling animation (a single animation won't work due to the browsers nature) with a slight...

n___vc's profile picture

nick

2,750 subscribers

37,298 görüntüleme • 1 ay ö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 tip: if you are building a new dark mode, and you are using subtle shadows throughout the app, you might see, that inverting the shadow is not going to work. ➡️instead, use a 0.5px/1px inset shadow for the elements that still need some depth on the app.
0:10

💡design tip: if you are building a new dark mode, and you are using subtle shadows throughout the app, you might see, that inverting the shadow is not going to work. ➡️instead, use a 0.5px/1px inset shadow for the elements that still need some depth on the app.

nick

19,498 görüntüleme • 2 ay önce

Yo! That new animation looks promising, I really hope you will like it. I learned a lot of new animation tools for this teaser, and it was a lot of fun to make. Also tried using Koikatsu to create the hair, and I'm really happy with how it looks now.
0:13

Yo! That new animation looks promising, I really hope you will like it. I learned a lot of new animation tools for this teaser, and it was a lot of fun to make. Also tried using Koikatsu to create the hair, and I'm really happy with how it looks now.

WarlockDesu

18,897 görüntüleme • 7 ay önce

Design Engineering Tip: Most UI animations are built for a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}
0:11

Design Engineering Tip: Most UI animations are built for a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}

Gabriel

66,427 görüntüleme • 2 ay önce

I'm seeing a lot of people saying it is just a bad upscaling instead of Gen AI, but it is indeed Gen AI animation. There are things going on in it that just don't make any sense for puppet animation. Here are some parts that make it clear, I slowed down the video so it's easier to notice the chunky parts. I checked the past ADs and it's possible to notice details (from an animator's POV) that are common and make sense for human work, so it was definitely a choice to use AI on this new AD
0:16

I'm seeing a lot of people saying it is just a bad upscaling instead of Gen AI, but it is indeed Gen AI animation. There are things going on in it that just don't make any sense for puppet animation. Here are some parts that make it clear, I slowed down the video so it's easier to notice the chunky parts. I checked the past ADs and it's possible to notice details (from an animator's POV) that are common and make sense for human work, so it was definitely a choice to use AI on this new AD

mei ✨ live2d animator

1,115,104 görüntüleme • 8 ay önce

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }
0:14

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

86,969 görüntüleme • 3 ay önce

lando: one of the people that i work most closely with is oscar. you have to help each other out, support each other. you learn a lot from one another and oscar’s just been a great guy, who’s just as quick and i’ve been able to learn a lot from him and share the journey together.
0:17

lando: one of the people that i work most closely with is oscar. you have to help each other out, support each other. you learn a lot from one another and oscar’s just been a great guy, who’s just as quick and i’ve been able to learn a lot from him and share the journey together.

ray

74,030 görüntüleme • 7 ay önce

Alright, now that we know *what* an agent is, how does it actually work? When you ask for help on a task, the agent plans a series of steps and executes them directly in the application on your behalf, using the tools it has access to. Say you are booking a local service or trying to organize your inbox (which typically takes multiple steps): the AI model first plans how to achieve the task using its existing knowledge and then interacts with your inbox to execute the task. The agent will continue until it is confident the task has been successfully completed.
0:15

Alright, now that we know *what* an agent is, how does it actually work? When you ask for help on a task, the agent plans a series of steps and executes them directly in the application on your behalf, using the tools it has access to. Say you are booking a local service or trying to organize your inbox (which typically takes multiple steps): the AI model first plans how to achieve the task using its existing knowledge and then interacts with your inbox to execute the task. The agent will continue until it is confident the task has been successfully completed.

Google AI

22,487 görüntüleme • 9 ay önce

Design Engineering Tip: Add friction at the end of a scroll interaction. When users reach the edge of a scrollable area, the movement should not just stop instantly. A subtle resistance, bounce, or slowdown can make the interface feel more physical and less mechanical. It helps users understand that they reached a boundary without needing extra labels or visual indicators. Used carefully, this can make scrolling feel more natural and closer to how objects behave in the real world.
0:12

Design Engineering Tip: Add friction at the end of a scroll interaction. When users reach the edge of a scrollable area, the movement should not just stop instantly. A subtle resistance, bounce, or slowdown can make the interface feel more physical and less mechanical. It helps users understand that they reached a boundary without needing extra labels or visual indicators. Used carefully, this can make scrolling feel more natural and closer to how objects behave in the real world.

Gabriel

25,730 görüntüleme • 2 ay önce

Every soul is a unique perspective of the same eternal Consciousness. To harm another is to wound another finger of the same hand. To know yourself is to know the Whole. Suffering is a lesson that must be learned, for it is through it that we awaken and become one with the Divine. I hope the animation won't give you nightmares.
0:15

Every soul is a unique perspective of the same eternal Consciousness. To harm another is to wound another finger of the same hand. To know yourself is to know the Whole. Suffering is a lesson that must be learned, for it is through it that we awaken and become one with the Divine. I hope the animation won't give you nightmares.

Open Minded Approach

11,207 görüntüleme • 1 ay önce

Today’s TikTok tip : Setting up your phone I’ll continue from where I stoped yesterday When setting up a new phone , when you get to the screen where you are asked to enter your Apple ID Don’t ever enter an Apple ID that has been used to formerly create an account before , you are likely to get banned if you create TikTok from it Tap on create a new Apple ID , if it proceeds to the next screen , you are safe , if it does not , you will get a message that you can’t create Apple ID, this happens when you have used the phone to create too many Apple ID Just leave the phone for a month and come back to it or get a new phone For the first name and last name , i use the name of my account that I want to name Also when creating passwords , don’t use the password that consist of any of the names you added , it won’t work, I don’t know why After that enter your email address, don’t use a spam email or an email with + somerhing , Apple knows how to catch this well, you want to use a fresh email address , for this I use some of the emails I have already instead , we will use this email to verify the phone later Now to the phone number side , for numbers, purchase as from juicysms and smspva for Apple number purchase , tried some other ones before but you just need a disposable number for this to verify that Apple account that’s all. By now if you follow this guide you will be able to setup your phone I’ll continue tomorrow , I’ll talk more about candy crush game in the iPhone setup, it’s one trick I learnt 🤣🤣🤣🤣 Feel free to ask any questions
0:10

Today’s TikTok tip : Setting up your phone I’ll continue from where I stoped yesterday When setting up a new phone , when you get to the screen where you are asked to enter your Apple ID Don’t ever enter an Apple ID that has been used to formerly create an account before , you are likely to get banned if you create TikTok from it Tap on create a new Apple ID , if it proceeds to the next screen , you are safe , if it does not , you will get a message that you can’t create Apple ID, this happens when you have used the phone to create too many Apple ID Just leave the phone for a month and come back to it or get a new phone For the first name and last name , i use the name of my account that I want to name Also when creating passwords , don’t use the password that consist of any of the names you added , it won’t work, I don’t know why After that enter your email address, don’t use a spam email or an email with + somerhing , Apple knows how to catch this well, you want to use a fresh email address , for this I use some of the emails I have already instead , we will use this email to verify the phone later Now to the phone number side , for numbers, purchase as from juicysms and smspva for Apple number purchase , tried some other ones before but you just need a disposable number for this to verify that Apple account that’s all. By now if you follow this guide you will be able to setup your phone I’ll continue tomorrow , I’ll talk more about candy crush game in the iPhone setup, it’s one trick I learnt 🤣🤣🤣🤣 Feel free to ask any questions

Pixel_builder

11,338 görüntüleme • 2 ay önce

I've seen a lot of animatics lately that are super detailed, essentially viewport previews of the final shot. But an animatic at it's core doesn't need to be anything fancy. Its main purpose is to plan and test the timing, camera angles, movement, and overall composition. With animatics you have to keep in mind the following: Pre-visualization: It allows to see a basic version of the animation or scene before committing to detailed work. Timing and pacing: An animatic helps identify how long each scene or shot should last, ensuring that the timing feels right. Planning: It helps with layout, camera angles, and transitions. By visualizing the shots, the team can ensure that the framing and overall design of the scenes work well in 3D space. Efficiency: It allows the team to test and fix any potential issues early on, like awkward movements or awkward pacing, before spending time on high-quality rendering or complex animation. In short, an animatic helps in conceptualizing the final animation by giving a low-res, rough version of the scenes, which guides the entire production process in terms of visual design, timing, and storytelling.
0:12

I've seen a lot of animatics lately that are super detailed, essentially viewport previews of the final shot. But an animatic at it's core doesn't need to be anything fancy. Its main purpose is to plan and test the timing, camera angles, movement, and overall composition. With animatics you have to keep in mind the following: Pre-visualization: It allows to see a basic version of the animation or scene before committing to detailed work. Timing and pacing: An animatic helps identify how long each scene or shot should last, ensuring that the timing feels right. Planning: It helps with layout, camera angles, and transitions. By visualizing the shots, the team can ensure that the framing and overall design of the scenes work well in 3D space. Efficiency: It allows the team to test and fix any potential issues early on, like awkward movements or awkward pacing, before spending time on high-quality rendering or complex animation. In short, an animatic helps in conceptualizing the final animation by giving a low-res, rough version of the scenes, which guides the entire production process in terms of visual design, timing, and storytelling.

Voxyde

22,244 görüntüleme • 1 yıl önce

SOMEONE TURNED THEIR TEAM'S TASK TRACKER INTO A 3D ISLAND instead of a boring list of tasks, your teams work is a little island that grows as you get stuff done > you assign tasks right in slack, just type who its for, the points, and the due date > finish a task and you get to place a building on the island > get your work rejected and the building collapses into rubble > the rubble stays there forever, so everyone can see it > each new sprint starts a fresh island so over time the island fills up with buildings for all the work your team actually finished, and the rubble is a reminder of what got rejected. its open source, so any team can set it up. way more fun than staring at a to do list all day
0:13

SOMEONE TURNED THEIR TEAM'S TASK TRACKER INTO A 3D ISLAND instead of a boring list of tasks, your teams work is a little island that grows as you get stuff done > you assign tasks right in slack, just type who its for, the points, and the due date > finish a task and you get to place a building on the island > get your work rejected and the building collapses into rubble > the rubble stays there forever, so everyone can see it > each new sprint starts a fresh island so over time the island fills up with buildings for all the work your team actually finished, and the rubble is a reminder of what got rejected. its open source, so any team can set it up. way more fun than staring at a to do list all day

Om Patel

12,978 görüntüleme • 2 ay önce

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)
0:15

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,386 görüntüleme • 6 ay önce

At Uber a big problem for design teams and engineering teams was design source of truth. No one knew what the app truly looked like, so weekly a bunch of designers would get into a meeting room and check that the engineers correctly implemented the figma designs that they made Now with coding agents throughput of changes has increased an order of magnitude and it has become impossible to manually keep up. Here we used the Revyl CLI to create a flow of every state in the Uber design, by navigating our mobile use agent on an cloud iOS simulator. This is something that would have taken a team of designers tens of hours to recreate manually; All done in less than an hour asynchronously with a simple prompt. Enable your team to know what your users are actually seeing and empower coding agents to give your users a delightful experience without any blindspots Get started with our new free trial and create a map for your own app 🗺️
0:19

At Uber a big problem for design teams and engineering teams was design source of truth. No one knew what the app truly looked like, so weekly a bunch of designers would get into a meeting room and check that the engineers correctly implemented the figma designs that they made Now with coding agents throughput of changes has increased an order of magnitude and it has become impossible to manually keep up. Here we used the Revyl CLI to create a flow of every state in the Uber design, by navigating our mobile use agent on an cloud iOS simulator. This is something that would have taken a team of designers tens of hours to recreate manually; All done in less than an hour asynchronously with a simple prompt. Enable your team to know what your users are actually seeing and empower coding agents to give your users a delightful experience without any blindspots Get started with our new free trial and create a map for your own app 🗺️

Anam Hira

96,508 görüntüleme • 4 ay önce

Let's take a look at the beautiful vivo OriginOS 6 ultrasonic fingerprint animation. The feature of this advanced animation is that it can have a relationship with the background and distort the background instead of floating on the surface like Samsung.
0:12

Let's take a look at the beautiful vivo OriginOS 6 ultrasonic fingerprint animation. The feature of this advanced animation is that it can have a relationship with the background and distort the background instead of floating on the surface like Samsung.

Ice Universe

50,648 görüntüleme • 10 ay önce

HE DESCRIBED A SITE TO CLAUDE CODE AND WALKED AWAY FOR 8 MINUTES What came back looked like a studio spent weeks on it. The setup that made it work: > Two design skills installed - Claude stops using safe boring defaults. > Visual references instead of text descriptions. > One detailed prompt with the concept, Claude asks clarifying questions before building. First version already solid -> review pass, one batch of fixes, done. What used to take a designer and a developer and several weeks of handoffs now takes a single session and no coding experience. Full walkthrough in the article below ↓
0:16

HE DESCRIBED A SITE TO CLAUDE CODE AND WALKED AWAY FOR 8 MINUTES What came back looked like a studio spent weeks on it. The setup that made it work: > Two design skills installed - Claude stops using safe boring defaults. > Visual references instead of text descriptions. > One detailed prompt with the concept, Claude asks clarifying questions before building. First version already solid -> review pass, one batch of fixes, done. What used to take a designer and a developer and several weeks of handoffs now takes a single session and no coding experience. Full walkthrough in the article below ↓

slash1s

53,000 görüntüleme • 2 ay önce

The MC customization screen is being fully redone with a lot of new features. Here's the first preview of it! You'll be able to choose any color you want for each layer (even using specific hex codes), give it a name, and save it for future use.
0:17

The MC customization screen is being fully redone with a lot of new features. Here's the first preview of it! You'll be able to choose any color you want for each layer (even using specific hex codes), give it a name, and save it for future use.

GB Patch Games 🦋

37,622 görüntüleme • 2 yıl önce

BitGo CEO Mike Belshe on the Clarity Act: A lot of work to be done there will be mistakes, it won't be perfect. But if you don't have the Clarity Act or something like it, you don't even get started." Points out most other countries are already figuring this out. America needs solid legislation to stay at the forefront. 🇺🇸
0:11

BitGo CEO Mike Belshe on the Clarity Act: A lot of work to be done there will be mistakes, it won't be perfect. But if you don't have the Clarity Act or something like it, you don't even get started." Points out most other countries are already figuring this out. America needs solid legislation to stay at the forefront. 🇺🇸

𝗕𝗮𝗻𝗸XRP

29,889 görüntüleme • 22 gün önce

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

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

Gabriel

18,508 görüntüleme • 1 ay önce

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨
0:17

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jhey ʕ•ᴥ•ʔ

113,111 görüntüleme • 2 yıl önce