Jakub Krehel's banner

Jakub Krehel

@jakubkrehel • 23,545 subscribers

@interfere_, magazine → https://t.co/ByWs6AAhyK, https://t.co/6ZINTqjGbi

Shorts

Added a couple of examples of /better-interface, /interface-review, /explain-interface, /break and /variant to the skills page. /break is probably my favorite skill to use right now, it makes working on complex components so much easier.

Added a couple of examples of /better-interface, /interface-review, /explain-interface, /break and /variant to the skills page. /break is probably my favorite skill to use right now, it makes working on complex components so much easier.

39,054 次观看

Introducing Loading A lightweight library full of beautiful loading indicators for React that we built with Paul Faivret.

Introducing Loading A lightweight library full of beautiful loading indicators for React that we built with Paul Faivret.

51,049 次观看

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.

283,661 次观看

About Interfere

About Interfere

23,218 次观看

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.

141,273 次观看

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.

115,454 次观看

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.

74,194 次观看

One of my favorite features I've added to Interfaces recently is the ⌘K menu. You can search for anything in any issue from anywhere. Built with cmdk, Fuse.js and Base UI.

One of my favorite features I've added to Interfaces recently is the ⌘K menu. You can search for anything in any issue from anywhere. Built with cmdk, Fuse.js and Base UI.

36,957 次观看

I've struggled to find a logo I liked for quite some time. Over the years, I tried a lot of different alternatives but none of them really stuck. I randomly drew a scribble in Figma the other day and used AI to turn it into an algorithm. The results were great.

20,925 次观看

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

Working on some fun components for the inbox view

Working on some fun components for the inbox view

76,679 次观看

An agent status component I built for Interfere’s timeline view.

An agent status component I built for Interfere’s timeline view.

19,144 次观看

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.

37,748 次观看

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

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.

23,849 次观看

A couple of small details from the Interfere dashboard

A couple of small details from the Interfere dashboard

15,294 次观看

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!

25,902 次观看

The timeline animation from Interfere’s homepage is a simple staggered animation. Each timeline item animates opacity, blur and translateY and the lines animate scaleY. The trickiest part was getting the timing right so the flow between the items feels natural.

The timeline animation from Interfere’s homepage is a simple staggered animation. Each timeline item animates opacity, blur and translateY and the lines animate scaleY. The trickiest part was getting the timing right so the flow between the items feels natural.

14,197 次观看

`clip-path` buttons

`clip-path` buttons

41,097 次观看

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 before / after examples of the skills I've added last week.

A couple of before / after examples of the skills I've added last week.

585,664 次观看 • 2 个月前

It’s incredible that my skills have been installed more than 160,000 times. I originally built them for myself. I had a pretty good idea of how I wanted to do certain things, but whenever I hopped between projects, I had to explain them over and over again. Skills often get a bad rap, and it’s understandable because there are a lot that are complete slop. But there are also some that are genuinely useful, help you do things better and let you learn from them. That’s the kind I try to build.

It’s incredible that my skills have been installed more than 160,000 times. I originally built them for myself. I had a pretty good idea of how I wanted to do certain things, but whenever I hopped between projects, I had to explain them over and over again. Skills often get a bad rap, and it’s understandable because there are a lot that are complete slop. But there are also some that are genuinely useful, help you do things better and let you learn from them. That’s the kind I try to build.

221,268 次观看 • 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

626,915 次观看 • 6 个月前

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

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

290,883 次观看 • 5 个月前

Introducing Loading A lightweight library full of beautiful loading indicators for React that we built with Paul Faivret.

Introducing Loading A lightweight library full of beautiful loading indicators for React that we built with Paul Faivret.

51,049 次观看 • 26 天前

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.

129,274 次观看 • 3 个月前

Interfaces now has more than 1,200 subscribers and it's read by people at some of the biggest and best companies in the world, which is absolutely crazy to me. When I started the magazine a couple of months ago, I wanted to build a place for all things design engineering where I could write about and share everything I know and continue to learn. My goal was to reach at least 500 subscribers. The impact Interfaces has had is beyond anything I expected. I’ve received messages from subscribers who got their first design engineering roles, in part thanks to Interfaces. To celebrate this milestone, you can use the code INTERFACES50 to get 50% off your subscription for the next 3 months. It’s available to the first 100 people who use it. There’s some very exciting stuff coming soon to Interfaces that I can’t wait to share.

Interfaces now has more than 1,200 subscribers and it's read by people at some of the biggest and best companies in the world, which is absolutely crazy to me. When I started the magazine a couple of months ago, I wanted to build a place for all things design engineering where I could write about and share everything I know and continue to learn. My goal was to reach at least 500 subscribers. The impact Interfaces has had is beyond anything I expected. I’ve received messages from subscribers who got their first design engineering roles, in part thanks to Interfaces. To celebrate this milestone, you can use the code INTERFACES50 to get 50% off your subscription for the next 3 months. It’s available to the first 100 people who use it. There’s some very exciting stuff coming soon to Interfaces that I can’t wait to share.

15,639 次观看 • 12 天前

Some stuff I built at Interfere in the past 8 months

Some stuff I built at Interfere in the past 8 months

40,135 次观看 • 2 个月前

Introducing a new Interfaces issue: Accessibility as Craft Accessibility is often overlooked, but it deserves the same care as every other part of an interface. This issue goes in depth on how accessibility works on the web and covers best practices and useful tips.

Introducing a new Interfaces issue: Accessibility as Craft Accessibility is often overlooked, but it deserves the same care as every other part of an interface. This issue goes in depth on how accessibility works on the web and covers best practices and useful tips.

30,866 次观看 • 2 个月前

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

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.

37,858 次观看 • 3 个月前

Introducing the first Interfaces guest issue: 4 Principles of Transition by Jakub Antalik Every now and then, I’ll invite people whose work I enjoy to write about a topic they care about. This month, Jakub goes in-depth on transitions. Now live on

Introducing the first Interfaces guest issue: 4 Principles of Transition by Jakub Antalik Every now and then, I’ll invite people whose work I enjoy to write about a topic they care about. This month, Jakub goes in-depth on transitions. Now live on

19,300 次观看 • 1 个月前

The Interfaces platform itself is an example of what you can learn in the magazine. I spend about as much time working on it as I do on the content. A few updates from the past couple of weeks include: → updated landing page → ⌘K menu + search across all issues → design refresh across the board → lifetime plan plus a bunch of smaller improvements.

The Interfaces platform itself is an example of what you can learn in the magazine. I spend about as much time working on it as I do on the content. A few updates from the past couple of weeks include: → updated landing page → ⌘K menu + search across all issues → design refresh across the board → lifetime plan plus a bunch of smaller improvements.

29,242 次观看 • 3 个月前

/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

47,012 次观看 • 5 个月前

Interfaces stamp and a magazine cover.

Interfaces stamp and a magazine cover.

13,853 次观看 • 4 个月前

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 年前

没有更多内容可加载