Jakub Krehel's banner

Jakub Krehel

@jakubkrehel • 19,452 subscribers

@interfere_ / magazine → https://t.co/ByWs6AAhyK / https://t.co/vqR585kdg0

Shorts

If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.

If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.

139,937 次观看

If you ever feel like the gradients you're using are dull or muddy, try using OKLCH colors instead. In OKLCH, hue is angular, which means that the colors the gradient passes through are different compared to sRGB.

If you ever feel like the gradients you're using are dull or muddy, try using OKLCH colors instead. In OKLCH, hue is angular, which means that the colors the gradient passes through are different compared to sRGB.

282,081 次观看

Some of my favorite parts of the new Interfere product pages. Every asset is fully built in code. The animations are built with Motion, except for the dot matrix, which is uses a canvas. Had a ton of fun working on these with Paul Faivret.

Some of my favorite parts of the new Interfere product pages. Every asset is fully built in code. The animations are built with Motion, except for the dot matrix, which is uses a canvas. Had a ton of fun working on these with Paul Faivret.

21,010 次观看

One of the first three issues that Interfaces launched with is about reviewing and watching back animations. I find it super helpful when an animation feels off and I can’t tell why or when I’m trying to understand what actually happens in an animation.

One of the first three issues that Interfaces launched with is about reviewing and watching back animations. I find it super helpful when an animation feels off and I can’t tell why or when I’m trying to understand what actually happens in an animation.

58,582 次观看

We’ve been spending way too much time on this sidebar with Paul Faivret . We re-structured the Interfere navigation, so we added this subtle animation to transition between the two layers.

We’ve been spending way too much time on this sidebar with Paul Faivret . We re-structured the Interfere navigation, so we added this subtle animation to transition between the two layers.

71,169 次观看

I’ve migrated all my projects to `oklch()`. Since it's perceptually uniform, equal value changes look visually consistent, unlike other color models. You don’t need to manually handpick colors to match. You can just change the values and the model keeps them uniform.

I’ve migrated all my projects to `oklch()`. Since it's perceptually uniform, equal value changes look visually consistent, unlike other color models. You don’t need to manually handpick colors to match. You can just change the values and the model keeps them uniform.

114,974 次观看

Issue 4 of Interfaces just released! This issue is about building an animated sign-in dialog. It covers everything that goes into building it, from the animations to the small but important details. It's one of the most in-depth issues yet, full of code snippets and demos.

Issue 4 of Interfaces just released! This issue is about building an animated sign-in dialog. It covers everything that goes into building it, from the animations to the small but important details. It's one of the most in-depth issues yet, full of code snippets and demos.

36,615 次观看

We've worked on a set of new product pages at Interfere. Had a lot of fun working on these!

We've worked on a set of new product pages at Interfere. Had a lot of fun working on these!

24,950 次观看

Working on some fun components for the inbox view

Working on some fun components for the inbox view

76,679 次观看

A quick way to improve how text behaves in your app is to use `text-wrap: balance`. It distributes text evenly across each line, avoiding orphaned words. It is only supported for a limited number lines (<6-10 depending on the browser), which means it's best used for headings or short paragraphs.

A quick way to improve how text behaves in your app is to use `text-wrap: balance`. It distributes text evenly across each line, avoiding orphaned words. It is only supported for a limited number lines (<6-10 depending on the browser), which means it's best used for headings or short paragraphs.

58,413 次观看

Working on some fun animations for our new set of marketing pages. It's amazing how many different effects you can achieve by only animating opacity, blur, and scale.

Working on some fun animations for our new set of marketing pages. It's amazing how many different effects you can achieve by only animating opacity, blur, and scale.

18,019 次观看

Details from the new Interfere website

Details from the new Interfere website

25,767 次观看

`clip-path` buttons

`clip-path` buttons

40,745 次观看

Been working on a sign in dialog for a while now

Been working on a sign in dialog for a while now

72,722 次观看

Working on some fun animations this week

Working on some fun animations this week

24,181 次观看

Animated stroke-dasharray

Animated stroke-dasharray

24,298 次观看

I've recently been experimenting with oklch and I made this little tool that helps generate, explore and preview colors.

I've recently been experimenting with oklch and I made this little tool that helps generate, explore and preview colors.

33,563 次观看

When nesting elements the outer border radius should always equal the inner border radius + padding.

When nesting elements the outer border radius should always equal the inner border radius + padding.

17,686 次观看

Experimenting with dropdowns

Experimenting with dropdowns

25,430 次观看

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

A couple of examples before and after using /better-typography and /better-ui.

A couple of examples before and after using /better-typography and /better-ui.

121,742 次观看 • 7 天前

It’s incredible that /make-interfaces-feel-better has already been installed more than 30,000 times. It contains a lot of tips that make interfaces feel better, across UI, animations, performance and more. npx skills add jakubkrehel/make-interfaces-feel-better

It’s incredible that /make-interfaces-feel-better has already been installed more than 30,000 times. It contains a lot of tips that make interfaces feel better, across UI, animations, performance and more. npx skills add jakubkrehel/make-interfaces-feel-better

380,017 次观看 • 1 个月前

/make-interfaces-feel-better npx skills add jakubkrehel/make-interfaces-feel-better

/make-interfaces-feel-better npx skills add jakubkrehel/make-interfaces-feel-better

617,195 次观看 • 3 个月前

Introducing Interfaces A design engineering magazine about building great interfaces. A new issue is released every month covering topics across animation, typography, layout, color and everything else that makes an interface feel great.

Introducing Interfaces A design engineering magazine about building great interfaces. A new issue is released every month covering topics across animation, typography, layout, color and everything else that makes an interface feel great.

247,036 次观看 • 2 个月前

Introducing a new Interfaces issue, Typography Manual for the Web. Typography on the web is hard. There's a lot to know and a lot to keep in mind, from choosing the right typeface and loading fonts to making sure type is legible and fits the interface.

Introducing a new Interfaces issue, Typography Manual for the Web. Typography on the web is hard. There's a lot to know and a lot to keep in mind, from choosing the right typeface and loading fonts to making sure type is legible and fits the interface.

35,897 次观看 • 16 天前

Have you ever wondered what OKLCH colors are, how they work or just wanted to use them in your project? You can use /oklch-skill to convert colors, generate palettes, check contrast, migrate colors and more. npx skills add jakubkrehel/oklch-skill

Have you ever wondered what OKLCH colors are, how they work or just wanted to use them in your project? You can use /oklch-skill to convert colors, generate palettes, check contrast, migrate colors and more. npx skills add jakubkrehel/oklch-skill

40,558 次观看 • 24 天前

/oklch-skill Work with colors as we see them. Convert, migrate, generate palettes, check contrast and more. npx skills add jakubkrehel/oklch-skill

/oklch-skill Work with colors as we see them. Convert, migrate, generate palettes, check contrast and more. npx skills add jakubkrehel/oklch-skill

46,409 次观看 • 2 个月前

Interfaces stamp and a magazine cover.

Interfaces stamp and a magazine cover.

13,853 次观看 • 1 个月前

Quick 2024 recap. This year has been amazing. I'm super grateful for all the support and I can't wait to see what 2025 has to offer.

Quick 2024 recap. This year has been amazing. I'm super grateful for all the support and I can't wait to see what 2025 has to offer.

43,686 次观看 • 1 年前

Motion Gestures

Motion Gestures

22,478 次观看 • 9 个月前

没有更多内容可加载