Loading video...

Video Failed to Load

Go Home

Design Engineering Tip: Separate the object from its shadow. When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality. Used carefully, this can...

gabriell_lab's profile picture

Gabriel

7,673 subscribers

68,018 views • 2 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target​.style.setProperty('--x', x - bounds.left) target​.style.setProperty('--y', y - bounds​.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @​supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇
0:27

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target​.style.setProperty('--x', x - bounds.left) target​.style.setProperty('--y', y - bounds​.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @​supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

152,854 views • 2 years ago

CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @​keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @​keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @​keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇
0:20

CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @​keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @​keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @​keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

146,270 views • 2 years ago

Russian shadow fleet not just allows Russia to earn money for its war on Ukraine but is also an environmental catastrophe waiting to happen. In a September video by Yle. fi, experts explain that about 70% of the tankers used in the Russian shadow fleet are at least 15 years old. They do not go through proper servicing which increases the risk of technical issues and malfunctions. A lot of these vessels have been blacklisted in the first place because their condition is so bad (meaning they are not allowed to sail) but they still continue voyaging through the Gulf of Finland, for example. Many of them sail under the jurisdictions of different countries, which makes them harder to track. The risk of an oil spill is getting more and more likely - and the shadow vessels carry tens of thousands tons of oil. The environmental disaster that would follow would have an unprecedented scale. It will affect all forms of wildlife and sea life, destroy the business of fishermen and coastal tourism for years, if not decades. Its aftermath for the environment would be indescribable, and the costs to mitigate such a disaster will be exorbitant. Since Russian shadow fleet tankers mostly don't have proper insurance, there is very little chance that any payments will follow that will cover the costs. These expenses will have to be borne by the country/countries near which this will happen, combined with future economic losses caused by damage to the environment. Moreover, Russian shadow fleet tankers are an extra burden for the coast guards as they have to check more vessels (again, many of them are in very poor condition) and have extra training, working on scenarios of possible environmental disasters. According to experts quoted by Yle. fi, from January 2022 to August 2024, 380 million tons of Russian oil and other petroleum products went through the Gulf of Finland, earning Russia more than $220 billion for the war in Ukraine. It is obvious at this point that tackling Russian shadow fleet and cutting off or substantially decreasing Russian oil profits is a top priority towards ending the war and ensuring lasting peace. However, as with almost everything in this war, stopping Russia is also very important for the environment - globally and locally. Currently, this fleet is a ticking bomb that can explode tens of thousand of oil into water at any moment.
4:28

Russian shadow fleet not just allows Russia to earn money for its war on Ukraine but is also an environmental catastrophe waiting to happen. In a September video by Yle. fi, experts explain that about 70% of the tankers used in the Russian shadow fleet are at least 15 years old. They do not go through proper servicing which increases the risk of technical issues and malfunctions. A lot of these vessels have been blacklisted in the first place because their condition is so bad (meaning they are not allowed to sail) but they still continue voyaging through the Gulf of Finland, for example. Many of them sail under the jurisdictions of different countries, which makes them harder to track. The risk of an oil spill is getting more and more likely - and the shadow vessels carry tens of thousands tons of oil. The environmental disaster that would follow would have an unprecedented scale. It will affect all forms of wildlife and sea life, destroy the business of fishermen and coastal tourism for years, if not decades. Its aftermath for the environment would be indescribable, and the costs to mitigate such a disaster will be exorbitant. Since Russian shadow fleet tankers mostly don't have proper insurance, there is very little chance that any payments will follow that will cover the costs. These expenses will have to be borne by the country/countries near which this will happen, combined with future economic losses caused by damage to the environment. Moreover, Russian shadow fleet tankers are an extra burden for the coast guards as they have to check more vessels (again, many of them are in very poor condition) and have extra training, working on scenarios of possible environmental disasters. According to experts quoted by Yle. fi, from January 2022 to August 2024, 380 million tons of Russian oil and other petroleum products went through the Gulf of Finland, earning Russia more than $220 billion for the war in Ukraine. It is obvious at this point that tackling Russian shadow fleet and cutting off or substantially decreasing Russian oil profits is a top priority towards ending the war and ensuring lasting peace. However, as with almost everything in this war, stopping Russia is also very important for the environment - globally and locally. Currently, this fleet is a ticking bomb that can explode tens of thousand of oil into water at any moment.

Anton Gerashchenko

198,984 views • 1 year ago

The method Randall describes is elegant in its simplicity and profound in its implications. Drive a pole with a sharpened point into the ground. Draw a circle of any sacred length around it. As the sun rises in the east, a long shadow is cast to the west - and as it shortens toward noon, the moment the shadow's tip touches the circle, a stake is driven into the ground. That point is due south. As the afternoon progresses and the shadow swings back and lengthens toward the west, a second stake is driven when the tip touches the circle again. String a line between the two stakes and the result is a precise east-west line. The north-south axis follows immediately from there. With those four cardinal directions established, the entire geometric program of a sacred site can be laid out - squares, rectangles, circles, ellipses, all derived from a single pole, a drawn circle, and the movement of the sun across the sky. No instruments beyond what any culture in any era could produce. No calculations beyond what sustained observation of shadow movement provides. Randall's point is that this method was available to every ancient builder who ever oriented a monument to the cardinal directions - and the precision of the sacred sites that resulted was not the product of sophisticated technology but of a simple, reproducible technique that anyone willing to watch the sun carefully enough could master.
1:10

The method Randall describes is elegant in its simplicity and profound in its implications. Drive a pole with a sharpened point into the ground. Draw a circle of any sacred length around it. As the sun rises in the east, a long shadow is cast to the west - and as it shortens toward noon, the moment the shadow's tip touches the circle, a stake is driven into the ground. That point is due south. As the afternoon progresses and the shadow swings back and lengthens toward the west, a second stake is driven when the tip touches the circle again. String a line between the two stakes and the result is a precise east-west line. The north-south axis follows immediately from there. With those four cardinal directions established, the entire geometric program of a sacred site can be laid out - squares, rectangles, circles, ellipses, all derived from a single pole, a drawn circle, and the movement of the sun across the sky. No instruments beyond what any culture in any era could produce. No calculations beyond what sustained observation of shadow movement provides. Randall's point is that this method was available to every ancient builder who ever oriented a monument to the cardinal directions - and the precision of the sacred sites that resulted was not the product of sophisticated technology but of a simple, reproducible technique that anyone willing to watch the sun carefully enough could master.

Randall Carlson

142,043 views • 4 months ago

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @​keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @​media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @​container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇
1:04

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @​keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @​media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @​container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

542,234 views • 2 years ago

CSS Tip! 💫 You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#​fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #​fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @​keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇
0:59

CSS Tip! 💫 You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#​fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #​fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @​keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

187,474 views • 2 years ago

Founders, want better results from your website? It's worth $30,000, you can get it for free. If you want it: 1. Like this post 2. Repost 3. Follow me must 4. Comment "Sharing is Caring" or tag a friend And I’ll send it to you P.S. Repost MUST for priority access (sometimes the comments can get crazy!) A lot of founders think content and ads are the solution. But the truth is, that’s just not enough when it comes to: - Creating a strong first impression - Reducing bounce rates - Keeping users engaged What you really need before anything else is: - A better website design - Clear messaging from the start - A user experience that makes sense So, how do you make that happen? Simple: - Focus on structure - Deliver real value - Design with the user in mind Investing in good website design is one of the smartest moves you can make. It leads to: - Higher engagement - More conversions - Better results overall ------ w/ Wavespace - UI/UX Design Agency Must be following so I can DM you 💬
1:00

Founders, want better results from your website? It's worth $30,000, you can get it for free. If you want it: 1. Like this post 2. Repost 3. Follow me must 4. Comment "Sharing is Caring" or tag a friend And I’ll send it to you P.S. Repost MUST for priority access (sometimes the comments can get crazy!) A lot of founders think content and ads are the solution. But the truth is, that’s just not enough when it comes to: - Creating a strong first impression - Reducing bounce rates - Keeping users engaged What you really need before anything else is: - A better website design - Clear messaging from the start - A user experience that makes sense So, how do you make that happen? Simple: - Focus on structure - Deliver real value - Design with the user in mind Investing in good website design is one of the smartest moves you can make. It leads to: - Higher engagement - More conversions - Better results overall ------ w/ Wavespace - UI/UX Design Agency Must be following so I can DM you 💬

Shahid | Design Partner 🦄

37,332 views • 1 year ago

if you want to make short films but feel stuck when it comes to "story" - try portraying a mood/feeling. you don't always need a satisfying conclusion or a standard 3 part structure. everyone will bombard you with narrative importance, and of course it's important, but some of my favourite shorts and feature films have fairly simple loose scripts, but they convey an incredible tone and feeling. you can just create a world and bring people into it for a few minutes. focus on the feeling with good production design, acting, and sound. you're practicing so don't let writing hold you back. will some people want more? absolutely. will it make sense to everyone? doubtful. the key is it has to be interesting to YOU.. stop caring about everyone else. make something that you like because you're not unique, there will be other people on your wavelength, and if they're not so be it. doesn't matter. give it a feeling that you like and do everything you can to convey it cinematically. ultimately the only audience member that truly matters is you, so if you have a really simple idea like "why does air chilled chicken sound funny?" go execute it and see what happens.
2:27

if you want to make short films but feel stuck when it comes to "story" - try portraying a mood/feeling. you don't always need a satisfying conclusion or a standard 3 part structure. everyone will bombard you with narrative importance, and of course it's important, but some of my favourite shorts and feature films have fairly simple loose scripts, but they convey an incredible tone and feeling. you can just create a world and bring people into it for a few minutes. focus on the feeling with good production design, acting, and sound. you're practicing so don't let writing hold you back. will some people want more? absolutely. will it make sense to everyone? doubtful. the key is it has to be interesting to YOU.. stop caring about everyone else. make something that you like because you're not unique, there will be other people on your wavelength, and if they're not so be it. doesn't matter. give it a feeling that you like and do everything you can to convey it cinematically. ultimately the only audience member that truly matters is you, so if you have a really simple idea like "why does air chilled chicken sound funny?" go execute it and see what happens.

patrick.

56,056 views • 2 years ago

Most fintech founders I've talked to treat card design as an afterthought. I believe it's a mistake. The moment a new card arrives, the weight, the texture, the way it catches the light, it hits differently than any push notification ever will. Half the fintech world calls physical cards "legacy infrastructure." Apple Pay, Google Wallet, tap-to-pay NFC, RTP are taking over. I don't say this. Data does. But that argument misses the point. The card isn't the payment method. It's the brand handshake. It's the touch point a user can transform from just another one to an advocate of your app. What you're communicating when someone holds your card matters more than most founders realize: •⁠ ⁠A metal card says "you're worth it" •⁠ ⁠A generic Visa template says "we saved you money" But let's be honest here, some products don't need a card at all, and that's toitally understandable. The brands that get this right treat the card like a stand-alone product launch, not a compliance checkbox or a alternative feature. If you were to decide, what do you want your user to feel when they reach into their wallet? Because they will feel something either way.
1:05

Most fintech founders I've talked to treat card design as an afterthought. I believe it's a mistake. The moment a new card arrives, the weight, the texture, the way it catches the light, it hits differently than any push notification ever will. Half the fintech world calls physical cards "legacy infrastructure." Apple Pay, Google Wallet, tap-to-pay NFC, RTP are taking over. I don't say this. Data does. But that argument misses the point. The card isn't the payment method. It's the brand handshake. It's the touch point a user can transform from just another one to an advocate of your app. What you're communicating when someone holds your card matters more than most founders realize: •⁠ ⁠A metal card says "you're worth it" •⁠ ⁠A generic Visa template says "we saved you money" But let's be honest here, some products don't need a card at all, and that's toitally understandable. The brands that get this right treat the card like a stand-alone product launch, not a compliance checkbox or a alternative feature. If you were to decide, what do you want your user to feel when they reach into their wallet? Because they will feel something either way.

Ari Eiberman 🇦🇷 Stablecards

11,527 views • 3 months ago

consistency ≠ uniformity: for those who haven't lived through this era – we used to have beautiful, precision interfaces. now they're replaced by a design language that originated from the Apple Watch, with icons that only fit in squircles. but that's not even the point. the point is we used to design the whole stack – the technology, the concepts, the interfaces. when designers only care about superficial consistency, platforms lose their uniqueness. apple used to design systems. skeuomorphism wasn't just about leather textures – it was about teaching people new mental models. the trash can empties because you understand what a trash can does. aqua's lickable buttons and sheets had depth because the OS had layers you could understand. the old apple designed the whole stack – from metal to pixels to concepts. teams weren't just shipping features in the same box, they were building coherent platforms each with opinions about what computing should feel like for the medium. liquid glass is fine on a phone. but on macOS it's unusable – lack of precision, visual noise everywhere. this is what happens when UI language designed for fingers bleed into macOS. we went from interfaces designed for a 27" cinema display with a precise cursor to interfaces designed for a 1.5" screen you tap with one finger. the Mac is for creation and precision work. it needs information density. it needs chrome you can grab. it needs UI that gets out of your way but gives you power when you need it. instead we got padding and whitespace and translucent blurs optimized for touch targets nobody's touching. the squircle icon mandate is a symptom. when you force every icon into the same shape, you're saying "brand consistency" matters more than "each app icon needs to communicate its function instantly." we traded clarity for uniformity. we traded precise design for cross-platform sameness. consistency means your system has coherent rules within itself. uniformity means everything looks the same regardless of context. the hardware team still gets it – that macbook pro + M-series chips, chef's kiss. but software design feels like it's chasing fat fingers instead of remembering what people do on a Mac.
0:57

consistency ≠ uniformity: for those who haven't lived through this era – we used to have beautiful, precision interfaces. now they're replaced by a design language that originated from the Apple Watch, with icons that only fit in squircles. but that's not even the point. the point is we used to design the whole stack – the technology, the concepts, the interfaces. when designers only care about superficial consistency, platforms lose their uniqueness. apple used to design systems. skeuomorphism wasn't just about leather textures – it was about teaching people new mental models. the trash can empties because you understand what a trash can does. aqua's lickable buttons and sheets had depth because the OS had layers you could understand. the old apple designed the whole stack – from metal to pixels to concepts. teams weren't just shipping features in the same box, they were building coherent platforms each with opinions about what computing should feel like for the medium. liquid glass is fine on a phone. but on macOS it's unusable – lack of precision, visual noise everywhere. this is what happens when UI language designed for fingers bleed into macOS. we went from interfaces designed for a 27" cinema display with a precise cursor to interfaces designed for a 1.5" screen you tap with one finger. the Mac is for creation and precision work. it needs information density. it needs chrome you can grab. it needs UI that gets out of your way but gives you power when you need it. instead we got padding and whitespace and translucent blurs optimized for touch targets nobody's touching. the squircle icon mandate is a symptom. when you force every icon into the same shape, you're saying "brand consistency" matters more than "each app icon needs to communicate its function instantly." we traded clarity for uniformity. we traded precise design for cross-platform sameness. consistency means your system has coherent rules within itself. uniformity means everything looks the same regardless of context. the hardware team still gets it – that macbook pro + M-series chips, chef's kiss. but software design feels like it's chasing fat fingers instead of remembering what people do on a Mac.

Ryo Lu

716,979 views • 8 months ago

Jony Ive tells Patrick Collison about the first time he saw a Mac (and why it convinced him he had to meet Steve Jobs and Apple team): “I remember discovering the Mac [in the late-1980s]…what I realized was that what we make stands testament to who we are and what we make describes our values. It describes our preoccupations. This struck me so powerfully when I saw the Mac. I got a very clear sense of a group of clearly original thinkers with clear values. You know, you can look at something and it can either tell you ‘I was designed to meet a price point at a certain time, so I hit the schedule’…or you can try and design something that genuinely attempts to move the species on. […] I really do believe — and I wish that I had empirical evidence — but I do believe that we have this ability to sense care. [It's easy to sense care in a service] because you confront the person. It's vicarious when it's via an object. When it's via hardware or a piece of software, it's more complex. But I think you might understand it more if I said you can sense carelessness. You know carelessness and so I think it's reasonable to believe that you also know care and you sense care.” *** The clips is cut from two parts of this 1-hour long chat (it’s fantastic):
4:17

Jony Ive tells Patrick Collison about the first time he saw a Mac (and why it convinced him he had to meet Steve Jobs and Apple team): “I remember discovering the Mac [in the late-1980s]…what I realized was that what we make stands testament to who we are and what we make describes our values. It describes our preoccupations. This struck me so powerfully when I saw the Mac. I got a very clear sense of a group of clearly original thinkers with clear values. You know, you can look at something and it can either tell you ‘I was designed to meet a price point at a certain time, so I hit the schedule’…or you can try and design something that genuinely attempts to move the species on. […] I really do believe — and I wish that I had empirical evidence — but I do believe that we have this ability to sense care. [It's easy to sense care in a service] because you confront the person. It's vicarious when it's via an object. When it's via hardware or a piece of software, it's more complex. But I think you might understand it more if I said you can sense carelessness. You know carelessness and so I think it's reasonable to believe that you also know care and you sense care.” *** The clips is cut from two parts of this 1-hour long chat (it’s fantastic):

Trung Phan

236,960 views • 1 year ago

Message to the world from 🇺🇦: "It's been a while since we recorded something together, but we have an important message again with Myroslav for you today. As February 24th approaches we urge you to remember - and remind others, if you can - that the war is still going on in Ukraine. It is still bad. It is the hardest winter ever. People die every day and russia bombs us every day, like it is the most normal thing to do. Do not make the world think it's normal and nothing can be done about it. Do not think "Ukrainian resilience" is something that can win this war on its own. We thank for any and all support from all over the world. We also need it as long as the war lasts." Oleg Carbo. To follow Oleg: olegcarbo
0:41

Message to the world from 🇺🇦: "It's been a while since we recorded something together, but we have an important message again with Myroslav for you today. As February 24th approaches we urge you to remember - and remind others, if you can - that the war is still going on in Ukraine. It is still bad. It is the hardest winter ever. People die every day and russia bombs us every day, like it is the most normal thing to do. Do not make the world think it's normal and nothing can be done about it. Do not think "Ukrainian resilience" is something that can win this war on its own. We thank for any and all support from all over the world. We also need it as long as the war lasts." Oleg Carbo. To follow Oleg: olegcarbo

Oriannalyla 🇺🇦

12,610 views • 5 months ago

Some artists are like sunshine — just their presence alone can bring warmth to the people around them. For me, Orm feels exactly like that. She carries such a gentle and comforting energy that naturally makes people feel at ease. Sometimes, even through a screen, Orm can feel so radiant and distant — like someone you can only admire from afar. But it’s the little moments, the way she talks to fans, interacts with them sincerely, or continues using the gifts they gave her, that make the distance between an artist and fans feel a little closer. Those small actions may seem simple, but they make everything feel more genuine and personal. It stops feeling like just a relationship between a celebrity and supporters, and becomes something much warmer instead — a connection built on sincerity and mutual appreciation. And maybe that’s why so many people feel comforted while supporting Orm. She doesn’t just shine brightly; she also has this quiet way of making the people who love and support her feel seen, appreciated, and close to her too.
0:51

Some artists are like sunshine — just their presence alone can bring warmth to the people around them. For me, Orm feels exactly like that. She carries such a gentle and comforting energy that naturally makes people feel at ease. Sometimes, even through a screen, Orm can feel so radiant and distant — like someone you can only admire from afar. But it’s the little moments, the way she talks to fans, interacts with them sincerely, or continues using the gifts they gave her, that make the distance between an artist and fans feel a little closer. Those small actions may seem simple, but they make everything feel more genuine and personal. It stops feeling like just a relationship between a celebrity and supporters, and becomes something much warmer instead — a connection built on sincerity and mutual appreciation. And maybe that’s why so many people feel comforted while supporting Orm. She doesn’t just shine brightly; she also has this quiet way of making the people who love and support her feel seen, appreciated, and close to her too.

𝓚

16,220 views • 3 months ago

Did you know that in Blender you can have edge highlighting and ambient occlusion right in the regular 'Solid' shading mode? ✨ People were asking about my viewport shading settings, so here they are! 1. Press the small button on the top right of your viewport 2. Check 'Cavity', and set the type to 'Both'. World Space 'Valley' acts exactly like ambient occlusion. I like to disable the 'Ridge' here though, because inverted AO doesn't make sense to me visually 3. I also usually keep the 'Shadow' enabled for extra definition, but keep in mind that this is performance-heavy, and if you have millions of polys you may see stuttering 4. I also like to enable 'Backface Culling'. It's not uncommon to produce inverted geometry when you model. This setting allows me to see it immediately, and thanks to that, my geometry is always correct when I export it to Unity! 5. You can also select a different studio lighting preset, or go with a matcap if that's something you're into! 🚀 #b3d
0:26

Did you know that in Blender you can have edge highlighting and ambient occlusion right in the regular 'Solid' shading mode? ✨ People were asking about my viewport shading settings, so here they are! 1. Press the small button on the top right of your viewport 2. Check 'Cavity', and set the type to 'Both'. World Space 'Valley' acts exactly like ambient occlusion. I like to disable the 'Ridge' here though, because inverted AO doesn't make sense to me visually 3. I also usually keep the 'Shadow' enabled for extra definition, but keep in mind that this is performance-heavy, and if you have millions of polys you may see stuttering 4. I also like to enable 'Backface Culling'. It's not uncommon to produce inverted geometry when you model. This setting allows me to see it immediately, and thanks to that, my geometry is always correct when I export it to Unity! 5. You can also select a different studio lighting preset, or go with a matcap if that's something you're into! 🚀 #b3d

passivestar

90,638 views • 3 years ago

🎬Whimsical Reverie | Preview: White Night's Ballet >> Main Attribute: Cool 🩰Outfit Details [White Night's Ballet] can be evolved into the following outfits: [White Night's Ballet: Awakening] (Stage 1), [White Night's Ballet: Undercurrent] (Stage 2), and [White Night's Ballet: Flamewake] (Stage 3). Fully glow it up to obtain the [White Night's Ballet: First Glow] outfit. 🩰Outfit Ability [Spinning Reflections]: After using the ability, Nikki bursts through the shattered mirror and begins an elegant dance amid blooming shards of light, with her movement speed greatly increased. If approaching a wall, Nikki can slide over the wall's surface and continue moving seamlessly. Sliding continuously consumes energy. When energy is depleted, Nikki will exit the sliding state. Wall sliding consumes more energy. While sliding across a wall, Nikki can jump over obstacles. She can also enter the floating state to disengage from the wall. When using the ability during [Companion Journey], Nikki and her companion will have a special movement effect. After equipping the [Spinning Reflections] ability, Nikki can also summon the Lucent Mirror and Mirror Shadow and activate the Brightnight Mirror Realm. The Brightnight Mirror Realm can be placed on water, allowing Nikki to slide within it. Within the Brightnight Mirror Realm, select [Airy Dance] from the sidebar to switch movement posture. Approach and remain near a Mirror Shadow to light it up. Interact with the lit Mirror Shadow to change its outfit, check its styling, try on its outfit, or invite friends to try it on. Note: The ability [Spinning Reflections] cannot be used in uncleared dungeons. The Brightnight Mirror Realm cannot be placed in certain stages or in the Mira Crown Merit Arena. 🩰Resonance Rewards Based on your number of Resonance attempts in [Through Songbound Night], you can earn rewards such as [White Night's Ballet: Makeup], [Momo's Cloak: Night Dance], and [Ocean's Radiance Gift Box], which includes the item [Dance of Golden Days] and the dance move [Flourishing Steps]. The item [Dance of Golden Days] can be used to dance gracefully in the open world. The dance move [Flourishing Steps] can be used in Momo's Camera. 🩰Evolution Rewards Reaching Evolution Stage 1 unlocks the pose [Graceful Leap]. Reaching Evolution Stage 2 unlocks [Eternal Ballet] for Momo's Camera: Framed Moment, the item [Dance of Golden Days: Illusory Dance], and the dance move [Flourishing Steps: Illusory Dance]. The Illusory Dance version features new music, special effects, and spectacular moments. Reaching Evolution Stage 3 unlocks [The Final Dance: Makeup], a new idle animation, the poses [Lightfooted Dance], [Unfolding Elegance], and [Elegant Pirouette], plus enhanced special effects and alternative details for certain pieces. —— ➤ Infinity Nikki Version 2.8 Golden Dust launches globally on July 16 (UTC-7)! ➤ Download Now: ➤ Join us on Facebook Group: #InfinityNikki #GoldenDust #GoldenCity
7:10

🎬Whimsical Reverie | Preview: White Night's Ballet >> Main Attribute: Cool 🩰Outfit Details [White Night's Ballet] can be evolved into the following outfits: [White Night's Ballet: Awakening] (Stage 1), [White Night's Ballet: Undercurrent] (Stage 2), and [White Night's Ballet: Flamewake] (Stage 3). Fully glow it up to obtain the [White Night's Ballet: First Glow] outfit. 🩰Outfit Ability [Spinning Reflections]: After using the ability, Nikki bursts through the shattered mirror and begins an elegant dance amid blooming shards of light, with her movement speed greatly increased. If approaching a wall, Nikki can slide over the wall's surface and continue moving seamlessly. Sliding continuously consumes energy. When energy is depleted, Nikki will exit the sliding state. Wall sliding consumes more energy. While sliding across a wall, Nikki can jump over obstacles. She can also enter the floating state to disengage from the wall. When using the ability during [Companion Journey], Nikki and her companion will have a special movement effect. After equipping the [Spinning Reflections] ability, Nikki can also summon the Lucent Mirror and Mirror Shadow and activate the Brightnight Mirror Realm. The Brightnight Mirror Realm can be placed on water, allowing Nikki to slide within it. Within the Brightnight Mirror Realm, select [Airy Dance] from the sidebar to switch movement posture. Approach and remain near a Mirror Shadow to light it up. Interact with the lit Mirror Shadow to change its outfit, check its styling, try on its outfit, or invite friends to try it on. Note: The ability [Spinning Reflections] cannot be used in uncleared dungeons. The Brightnight Mirror Realm cannot be placed in certain stages or in the Mira Crown Merit Arena. 🩰Resonance Rewards Based on your number of Resonance attempts in [Through Songbound Night], you can earn rewards such as [White Night's Ballet: Makeup], [Momo's Cloak: Night Dance], and [Ocean's Radiance Gift Box], which includes the item [Dance of Golden Days] and the dance move [Flourishing Steps]. The item [Dance of Golden Days] can be used to dance gracefully in the open world. The dance move [Flourishing Steps] can be used in Momo's Camera. 🩰Evolution Rewards Reaching Evolution Stage 1 unlocks the pose [Graceful Leap]. Reaching Evolution Stage 2 unlocks [Eternal Ballet] for Momo's Camera: Framed Moment, the item [Dance of Golden Days: Illusory Dance], and the dance move [Flourishing Steps: Illusory Dance]. The Illusory Dance version features new music, special effects, and spectacular moments. Reaching Evolution Stage 3 unlocks [The Final Dance: Makeup], a new idle animation, the poses [Lightfooted Dance], [Unfolding Elegance], and [Elegant Pirouette], plus enhanced special effects and alternative details for certain pieces. —— ➤ Infinity Nikki Version 2.8 Golden Dust launches globally on July 16 (UTC-7)! ➤ Download Now: ➤ Join us on Facebook Group: #InfinityNikki #GoldenDust #GoldenCity

Infinity Nikki

91,324 views • 1 month ago

They scanned the Great Pyramid with the same tech used on nuclear reactors. What showed up inside doesn't make sense. Using muon tomography, the same cosmic-ray imaging technique used to scan volcanoes and nuclear reactors, researchers overlaid the internal configuration of the Great Pyramid against their tomographic results. But what you're seeing in those viral scan images isn't whats really there. It's raw data like a photo taken with a camera body and no lens. The image exists, but it's unfocused say Biondi. It takes a mathematical process (a Fourier transform) to "develop" that image into something readable. Meaning the anomalies detected inside the pyramid had to survive multiple layers of rigorous data processing before anyone even acknowledged they were real. If the Great Pyramid was just a tomb, why does it keep revealing hidden structures that Egyptology never predicted and that only cutting-edge particle physics can detect? Episode out now!
1:33

They scanned the Great Pyramid with the same tech used on nuclear reactors. What showed up inside doesn't make sense. Using muon tomography, the same cosmic-ray imaging technique used to scan volcanoes and nuclear reactors, researchers overlaid the internal configuration of the Great Pyramid against their tomographic results. But what you're seeing in those viral scan images isn't whats really there. It's raw data like a photo taken with a camera body and no lens. The image exists, but it's unfocused say Biondi. It takes a mathematical process (a Fourier transform) to "develop" that image into something readable. Meaning the anomalies detected inside the pyramid had to survive multiple layers of rigorous data processing before anyone even acknowledged they were real. If the Great Pyramid was just a tomb, why does it keep revealing hidden structures that Egyptology never predicted and that only cutting-edge particle physics can detect? Episode out now!

American Alchemy

18,271 views • 5 months ago

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇
0:37

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,847 views • 2 years ago

Gege talk about Megumi & Yuji The interaction between them & how he named Megumi Host:“Next is Megumi. He belongs to the Zenin family, one of the Three Great Clans, the Zenin bloodline , the type of character often described as a cool genius. Can you tell us about the origin of this character?” Gege:“Do you mean the origin of his name?” Host:(nods) Gege:“The origin of his name? it comes from shadow.’” Host:“it’s related to his ability?” Gege:“Yes. It was decided because he can use shadows.” Host:“He can summon shikigami from shadows, the Ten Shadows Technique. It’s a really unique shadow ability. At first, it was hard to read (hard to pronounce in Japanese ) so simply used the phonetic readings for their names” Gege: (laughs) Host:“So he’s in the role of a rival to the MC, a cold genius with black hair, a cool(distant )feeling. Jump has a lot of characters like that, like Sasuke.” Gege:“Yes, like Rukawa…” (Slam Dunk) Host:“Rukawa, Kageyama (Haikyuu), that kind.” Gege:“Yes, exactly.” Host:“But surprisingly, he doesn’t really clash with Itadori. Rather, the two are pretty relaxed around each other.” Gege:“Yes. I did think about that. Well, when it comes to the main character, I’m basically the strict type. From the beginning, I didn’t plan to write it with a gentle tone. At the juvenile detention center, the two of them did have one direct confrontation.”(fearsome womb arc) Host:“Ah, there was a big clash there.” Gege:“But in the end, both of them were still willing to entrust things to each other. So I felt there was no need to make them keep having conflicts little by little in their daily life.” Host:“So there’s no need to say things like ‘big idiot’ .” Gege:“Yes, because that’s not the type of character. Forcing them to argue would feel awkward, and artificially making them fight would feel off, so I didn’t push it.” Host:“They’re two people who can surprisingly coexist. Normally, when people have different hobbies and tastes, it can lead to arguments. But they’re able to accept each other, and that makes me feel very comfortable” Gege:“That’s great.”
2:01

Gege talk about Megumi & Yuji The interaction between them & how he named Megumi Host:“Next is Megumi. He belongs to the Zenin family, one of the Three Great Clans, the Zenin bloodline , the type of character often described as a cool genius. Can you tell us about the origin of this character?” Gege:“Do you mean the origin of his name?” Host:(nods) Gege:“The origin of his name? it comes from shadow.’” Host:“it’s related to his ability?” Gege:“Yes. It was decided because he can use shadows.” Host:“He can summon shikigami from shadows, the Ten Shadows Technique. It’s a really unique shadow ability. At first, it was hard to read (hard to pronounce in Japanese ) so simply used the phonetic readings for their names” Gege: (laughs) Host:“So he’s in the role of a rival to the MC, a cold genius with black hair, a cool(distant )feeling. Jump has a lot of characters like that, like Sasuke.” Gege:“Yes, like Rukawa…” (Slam Dunk) Host:“Rukawa, Kageyama (Haikyuu), that kind.” Gege:“Yes, exactly.” Host:“But surprisingly, he doesn’t really clash with Itadori. Rather, the two are pretty relaxed around each other.” Gege:“Yes. I did think about that. Well, when it comes to the main character, I’m basically the strict type. From the beginning, I didn’t plan to write it with a gentle tone. At the juvenile detention center, the two of them did have one direct confrontation.”(fearsome womb arc) Host:“Ah, there was a big clash there.” Gege:“But in the end, both of them were still willing to entrust things to each other. So I felt there was no need to make them keep having conflicts little by little in their daily life.” Host:“So there’s no need to say things like ‘big idiot’ .” Gege:“Yes, because that’s not the type of character. Forcing them to argue would feel awkward, and artificially making them fight would feel off, so I didn’t push it.” Host:“They’re two people who can surprisingly coexist. Normally, when people have different hobbies and tastes, it can lead to arguments. But they’re able to accept each other, and that makes me feel very comfortable” Gege:“That’s great.”

五条悟

184,714 views • 5 months ago

Elon Musk: You can't solve self-driving unless you have millions of cars on the road. “We are no longer compute-constrained for training. I checked in with the team, is there anything we could do to improve the pace of progress with respect to training and inference? And currently, that is not the limiting factor. In fact, the limiting factor right now is that the amount of miles between interventions is so long that it takes quite a while to figure out which version is better than the other version because none of them are requiring any interventions. You start getting to thousands of miles between interventions, you need 10,000 miles to get an intervention. The average person only drives about 10,000 miles in a year. If it's in an urban environment, the average speed is 20 mph. Our professional test drivers get pretty bored, frankly. They're like, okay, I drove all week and there was no intervention. The highlight of the week would be like, yes, an intervention, finally! It's getting to that point. So, this is where, actually, having a giant fleet is extremely important, because we can deploy a new FSD model and run it in shadow mode and see how well it performs, compare how the human drives the car versus the new self-driving build, and then, analyze that delta in shadow mode, like the shadow knows or doesn't know as the case may be, and then, be able to assess by getting billions of miles very quickly with the giant fleet. Basically, that data engine is incredibly helpful. Actually, it's not possible to solve the self-driving problem without having millions of vehicles on the road.” Tesla 2024 Annual Meeting
1:51

Elon Musk: You can't solve self-driving unless you have millions of cars on the road. “We are no longer compute-constrained for training. I checked in with the team, is there anything we could do to improve the pace of progress with respect to training and inference? And currently, that is not the limiting factor. In fact, the limiting factor right now is that the amount of miles between interventions is so long that it takes quite a while to figure out which version is better than the other version because none of them are requiring any interventions. You start getting to thousands of miles between interventions, you need 10,000 miles to get an intervention. The average person only drives about 10,000 miles in a year. If it's in an urban environment, the average speed is 20 mph. Our professional test drivers get pretty bored, frankly. They're like, okay, I drove all week and there was no intervention. The highlight of the week would be like, yes, an intervention, finally! It's getting to that point. So, this is where, actually, having a giant fleet is extremely important, because we can deploy a new FSD model and run it in shadow mode and see how well it performs, compare how the human drives the car versus the new self-driving build, and then, analyze that delta in shadow mode, like the shadow knows or doesn't know as the case may be, and then, be able to assess by getting billions of miles very quickly with the giant fleet. Basically, that data engine is incredibly helpful. Actually, it's not possible to solve the self-driving problem without having millions of vehicles on the road.” Tesla 2024 Annual Meeting

ELON CLIPS

2,723,510 views • 1 year ago