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.
35,122 次观看
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.
138,776 次观看
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.
57,619 次观看
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.
280,662 次观看
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.
114,487 次观看
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.
58,413 次观看
Details from the new Interfere website
25,444 次观看
`clip-path` buttons
40,745 次观看
Working on some fun animations this week
24,181 次观看
Been working on a sign in dialog for a while now
72,722 次观看
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.
