正在加载视频...

视频加载失败

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

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 次观看 • 23 天前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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

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

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

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

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

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

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

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

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

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

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

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

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

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 次观看 • 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.

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

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

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

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

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

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