Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

gabriell_lab's profile picture

Gabriel

6,945 subscribers

27,423 görüntüleme • 19 gün ö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

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/
0:11

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 görüntüleme • 11 ay önce

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.
0:10

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 görüntüleme • 6 ay önce

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!
0:17

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 görüntüleme • 3 ay önce

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!
0:18

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 görüntüleme • 3 ay önce

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.
0:12

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 görüntüleme • 5 ay önce

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.
0:16

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,586 görüntüleme • 2 yıl önce

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
0:15

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 görüntüleme • 4 ay önce

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

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

Ganesh Sonawane

959,460 görüntüleme • 1 yıl önce

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

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

Haz

228,978 görüntüleme • 5 ay önce

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 →
0:14

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 görüntüleme • 2 yıl önce

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 👇
0:14

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 görüntüleme • 1 yıl önce

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”.
0:16

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 görüntüleme • 1 yıl önce

What makes an app truly adaptive? 🤔 Adaptive apps take advantage of the full screen size - whether it's a phone, a tablet, or a foldable. At #GoogleIO we covered building adaptable apps, increasing user productivity with key inputs, and scaling games across surfaces. Get the big picture with large screens →
0:18

What makes an app truly adaptive? 🤔 Adaptive apps take advantage of the full screen size - whether it's a phone, a tablet, or a foldable. At #GoogleIO we covered building adaptable apps, increasing user productivity with key inputs, and scaling games across surfaces. Get the big picture with large screens →

Android Developers

27,676 görüntüleme • 2 yıl önce

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.
0:14

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 görüntüleme • 2 ay önce

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
0:11

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 görüntüleme • 9 ay önce

“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.
0:10

“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 görüntüleme • 7 ay önce

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
0:12

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 görüntüleme • 19 gün önce

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output
0:18

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output

CJ @ Jackie Brown

27,054 görüntüleme • 3 ay önce

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

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

Juanjo Valiño

165,046 görüntüleme • 9 ay önce

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.
0:12

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 görüntüleme • 6 ay önce