Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Design Engineering Tip: If you’re using the same corner radius across your entire UI, try scaling it with the component size: 12px → XS (buttons, tags) 16px → S (cards, inputs) 24px → M (modals, panels) As components get larger, increasing the radius can help preserve the same visual... show more

Gabriel

6,945 subscribers

27,423 views • 21 days ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Added "corner radius" / rounding, which is easy to apply to any SDF shape that has an exact (outer) distance function - just subtract the radius from the scale and then offset the computed distance by the same radius. So you get rounded shapes "for free" with 1 subtraction. 1/

Added "corner radius" / rounding, which is easy to apply to any SDF shape that has an exact (outer) distance function - just subtract the radius from the scale and then offset the computed distance by the same radius. So you get rounded shapes "for free" with 1 subtraction. 1/

Mike Turitzin

11,456 views • 11 months ago

Different radii can cover the same distance because distance depends on the path traveled, not just the radius itself. When objects move along curves or arcs with different radii, a smaller radius can be compensated by a larger angle, while a larger radius can use a smaller angle. In both cases, the arc length can end up equal-even though the curves look very different.

Different radii can cover the same distance because distance depends on the path traveled, not just the radius itself. When objects move along curves or arcs with different radii, a smaller radius can be compensated by a larger angle, while a larger radius can use a smaller angle. In both cases, the arc length can end up equal-even though the curves look very different.

Mechanical Knowledge

1,504,144 views • 6 months ago

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

daniel petho

150,029 views • 3 months ago

A donut (torus) has the exact same volume and surface area as a cylinder with radius r and height 2πR! Watch every swivel preserve both perfectly... Geometry just got delicious!

A donut (torus) has the exact same volume and surface area as a cylinder with radius r and height 2πR! Watch every swivel preserve both perfectly... Geometry just got delicious!

Mathematica

205,147 views • 3 months ago

If you haven’t tried Cybertruck’s steer-by-wire and 4-wheel steering system, you must. It has the same turning radius as a Sedan.

If you haven’t tried Cybertruck’s steer-by-wire and 4-wheel steering system, you must. It has the same turning radius as a Sedan.

Nic Cruz Patane

1,719,715 views • 5 months ago

Mobile design UI components Line design system is an excellent collection of UI components for mobile apps—from action buttons to pulldown menus. Every component features anatomy, states & behavior, and design dos and donts.

Mobile design UI components Line design system is an excellent collection of UI components for mobile apps—from action buttons to pulldown menus. Every component features anatomy, states & behavior, and design dos and donts.

Nick Babich

266,704 views • 2 years ago

Pro tip for Vibe Coding: just knowing the "terms" behind UI components can 100x your frontend results This website shows you ALL the typical UI components found on websites with examples and inspiration Learn it, screenshot it, and vibe code

Pro tip for Vibe Coding: just knowing the "terms" behind UI components can 100x your frontend results This website shows you ALL the typical UI components found on websites with examples and inspiration Learn it, screenshot it, and vibe code

Melvyn • Builder

160,071 views • 4 months ago

not only apple uses same radius across products but i hear that they have patented it as well

not only apple uses same radius across products but i hear that they have patented it as well

Ganesh Sonawane

959,460 views • 1 year ago

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

The new corner-shape CSS property unlocks exciting new UI patterns. corner-shape: bevel round; border-radius: 1em 0 / 3em 0;

Haz

228,978 views • 5 months ago

UI/UX Designers, check this design systems database A massive collection of the best-in-class design systems with visual styles, components and references from leading UI teams. Website →

UI/UX Designers, check this design systems database A massive collection of the best-in-class design systems with visual styles, components and references from leading UI teams. Website →

Abraham John 🦄🦓

36,275 views • 2 years ago

I've started using Base UI for Hypermode's new UI components and I'm absolutely loving it. The component API's are excellent, and the DX in pairing it up with Motion has been seamless. WIP of a new Hypermode dialog with form elements built on BaseUI 👇

I've started using Base UI for Hypermode's new UI components and I'm absolutely loving it. The component API's are excellent, and the DX in pairing it up with Motion has been seamless. WIP of a new Hypermode dialog with form elements built on BaseUI 👇

Derek Briggs

14,903 views • 1 year ago

Apple’s now decades old over commitment to the Radius Corner has dated their products. There is need to have the design language “grow up”.

Apple’s now decades old over commitment to the Radius Corner has dated their products. There is need to have the design language “grow up”.

Brian Roemmele

5,819,152 views • 1 year ago

react-native-enriched 🤝 <EnrichedText> We just dropped a dedicated text component, making it a complete rich-text solution. Now it only takes a few lines of code to get your inputs and display text working seamlessly together using the exact same format.

react-native-enriched 🤝 <EnrichedText> We just dropped a dedicated text component, making it a complete rich-text solution. Now it only takes a few lines of code to get your inputs and display text working seamlessly together using the exact same format.

Software Mansion

19,379 views • 2 months ago

So it works now! If you have Bakery, can you try getting the latest github patch and using it? Add "Bakery Light Filter" component to an object to make it act like stained glass 😋 (video from RTPreview for fanciness, but it looks the same when baked) #gamedev

So it works now! If you have Bakery, can you try getting the latest github patch and using it? Add "Bakery Light Filter" component to an object to make it act like stained glass 😋 (video from RTPreview for fanciness, but it looks the same when baked) #gamedev

Mr F

236,389 views • 9 months ago

“Don’t walk in and do the same thing every day. If you do the same thing every day, you get the same results guaranteed. If you’re happy with the results, you’ve arrived. If you’ve arrived, you might as well leave,” Kirby Smart Winning is not a permanent destination.

“Don’t walk in and do the same thing every day. If you do the same thing every day, you get the same results guaranteed. If you’re happy with the results, you’ve arrived. If you’ve arrived, you might as well leave,” Kirby Smart Winning is not a permanent destination.

The Winning Difference

24,644 views • 7 months ago

Impeccable 3.7 brings linting to design. Until now it was a skill you asked for help. Now it's a design-system-aware feedback loop that runs while your agent builds, catching slop and design drift before they land. 🪝 Design hooks for Claude, Codex, and Cursor They run after every UI edit and quietly nudge your agent to fix slop and drift. The output isn't another wall of lint: it separates new findings from already-seen ones, flags clean scans, and asks the agent to use judgment. Fix real issues, leave intentional demos alone, save exceptions to config instead of littering your source. 🎨 Slop detection is now project-aware Reads your actual design system from DESIGN.md, your typography, palette, radius scale, and tokens, and flags drift from your system, not just generic AI slop: • this font isn't in your design system • this color is outside your documented palette • this radius doesn't match your rounded scale The same engine powers both the hooks and the CLI, and it's where we're investing next. 🖥️ Live Mode, ready for real projects Svelte/SvelteKit now preview variants as temporary framework components with live params, then accept cleanly back into your source component. Manual text edits got evidence / apply / discard routes, insertions preserve their anchors, and mapped lists and JSX slots clean up far more reliably. ⚡ Leaner core, sharper detector Rule-level evals across 3 providers and 4 niches cut guidance with no measurable lift and dropped examples that taught models bad patterns. The detector now skips hidden and screen-reader-only elements, understands OKLCH alpha and Sass-like inputs, and tightened checks for repeated kickers, oversized H1s, clipped overflow, and cramped padding. 🛠️ CLI caught up impeccable detect loads DESIGN.md by default, motion findings name the exact token or cubic-bezier instead of just "bounce," and impeccable ignores gives real CRUD for exceptions. Hooks and CLI share the same ignores. No split-brain config. Plus a much-improved interactive installer with hooks setup built in. Upgrade: npx impeccable install npm i -g impeccable

Impeccable 3.7 brings linting to design. Until now it was a skill you asked for help. Now it's a design-system-aware feedback loop that runs while your agent builds, catching slop and design drift before they land. 🪝 Design hooks for Claude, Codex, and Cursor They run after every UI edit and quietly nudge your agent to fix slop and drift. The output isn't another wall of lint: it separates new findings from already-seen ones, flags clean scans, and asks the agent to use judgment. Fix real issues, leave intentional demos alone, save exceptions to config instead of littering your source. 🎨 Slop detection is now project-aware Reads your actual design system from DESIGN.md, your typography, palette, radius scale, and tokens, and flags drift from your system, not just generic AI slop: • this font isn't in your design system • this color is outside your documented palette • this radius doesn't match your rounded scale The same engine powers both the hooks and the CLI, and it's where we're investing next. 🖥️ Live Mode, ready for real projects Svelte/SvelteKit now preview variants as temporary framework components with live params, then accept cleanly back into your source component. Manual text edits got evidence / apply / discard routes, insertions preserve their anchors, and mapped lists and JSX slots clean up far more reliably. ⚡ Leaner core, sharper detector Rule-level evals across 3 providers and 4 niches cut guidance with no measurable lift and dropped examples that taught models bad patterns. The detector now skips hidden and screen-reader-only elements, understands OKLCH alpha and Sass-like inputs, and tightened checks for repeated kickers, oversized H1s, clipped overflow, and cramped padding. 🛠️ CLI caught up impeccable detect loads DESIGN.md by default, motion findings name the exact token or cubic-bezier instead of just "bounce," and impeccable ignores gives real CRUD for exceptions. Hooks and CLI share the same ignores. No split-brain config. Plus a much-improved interactive installer with hooks setup built in. Upgrade: npx impeccable install npm i -g impeccable

Impeccable

229,165 views • 21 days ago

𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗟𝗼𝘃𝗮𝗯𝗹𝗲: 𝗧𝗵𝗲 𝗨𝗹𝘁𝗶𝗺𝗮𝘁𝗲 𝗣𝗹𝗮𝘆𝗯𝗼𝗼𝗸 🔥 I spent the weekend collecting all my prompt hacks, workflows, and best practices I use to build products with Lovable and turned it into one simple, actionable playbook. You’ll learn how to: • Plan before you prompt • Design by component, not page • Use atomic prompts (buttons, cards, modals) • Add visuals via URL • Build with Supabase in mind …and more. Want access? Check out my new Design + AI blog (link in bio + comments). If you subscribe you'll get it straight to your inbox

𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗟𝗼𝘃𝗮𝗯𝗹𝗲: 𝗧𝗵𝗲 𝗨𝗹𝘁𝗶𝗺𝗮𝘁𝗲 𝗣𝗹𝗮𝘆𝗯𝗼𝗼𝗸 🔥 I spent the weekend collecting all my prompt hacks, workflows, and best practices I use to build products with Lovable and turned it into one simple, actionable playbook. You’ll learn how to: • Plan before you prompt • Design by component, not page • Use atomic prompts (buttons, cards, modals) • Add visuals via URL • Build with Supabase in mind …and more. Want access? Check out my new Design + AI blog (link in bio + comments). If you subscribe you'll get it straight to your inbox

felix

40,072 views • 1 year ago

Apple just ended the corner radius formula debate forever with just one single modifier on iOS 26

Apple just ended the corner radius formula debate forever with just one single modifier on iOS 26

Juanjo Valiño

165,046 views • 9 months ago

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.

Squircles, now in Framer. Design layouts and components with smooth corners, with complete support for animations. Using the modern corner-shape style, with our own unique fallback matching the optical rounding, so your designs never break.

benjamin

38,669 views • 6 months ago