Emil Kowalski's banner
Emil Kowalski's profile picture

Emil Kowalski

@emilkowalski • 108,889 subscribers

Working at @Linear, teaching at https://t.co/J4qhNgnHnS

Shorts

Don’t forget to stagger your animations if you animate a lot of elements. Here’s the difference it makes:

Don’t forget to stagger your animations if you animate a lot of elements. Here’s the difference it makes:

125,138 views

One of my favorite details of Sonner: The toast can be swiped down to dismiss. Instead of prreventing the toast to be dragged upwards, you experience friction. You can still drag it, but it will slow down and eventually stop. It’s nicer than just stopping the toast immediately.

One of my favorite details of Sonner: The toast can be swiped down to dismiss. Instead of prreventing the toast to be dragged upwards, you experience friction. You can still drag it, but it will slow down and eventually stop. It’s nicer than just stopping the toast immediately.

26,453 views

You might’ve seen this bug before where the hover state keeps flickering. The fix is to separate the trigger from the effect. Listen for hovers on the parent, but animate a child element instead. This ensures that the hover area stays consistent.

You might’ve seen this bug before where the hover state keeps flickering. The fix is to separate the trigger from the effect. Listen for hovers on the parent, but animate a child element instead. This ensures that the hover area stays consistent.

668,273 views

Made this interaction of Linear’s dithered logo for our latest release. It’s using canvas with a lot of tiny dots. There’s an invisible circle around the cursor. Any dot inside it gets pushed outward with a cubic falloff so it’s gentle on the edges, and strong at the center.

Made this interaction of Linear’s dithered logo for our latest release. It’s using canvas with a lot of tiny dots. There’s an invisible circle around the cursor. Any dot inside it gets pushed outward with a cubic falloff so it’s gentle on the edges, and strong at the center.

472,019 views

Don’t animate keyboard-initiated actions. As an example, I use Raycast hundreds of times a day. If it animated every time I opened it, it would make it feel slow, delayed, and disconnected from my actions. But there’s no animation at all. That’s the optimal experience.

Don’t animate keyboard-initiated actions. As an example, I use Raycast hundreds of times a day. If it animated every time I opened it, it would make it feel slow, delayed, and disconnected from my actions. But there’s no animation at all. That’s the optimal experience.

322,255 views

One nice subtle benefit of using Base UI over Radix is that the animations are interruptible since Base uses CSS transitions instead of keyframes. This is me spamming on both dropdowns, notice the glitchiness in the one on the left.

One nice subtle benefit of using Base UI over Radix is that the animations are interruptible since Base uses CSS transitions instead of keyframes. This is me spamming on both dropdowns, notice the glitchiness in the one on the left.

68,801 views

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

122,455 views

Made a small dialog animation improvement at Linear: Matched the previously mismatched animation duration of overlay and the dialog + swapped spring animaton for an ease-out one so it feels less abrupt. Toast at the bottom right shows whether it’s before or after.

Made a small dialog animation improvement at Linear: Matched the previously mismatched animation duration of overlay and the dialog + swapped spring animaton for an ease-out one so it feels less abrupt. Toast at the bottom right shows whether it’s before or after.

37,539 views

One of my favorite details of Sonner: By default the toast disappears after 4 seconds unless you hover over it. But what if a toast is triggered and the user switches to a different tab? 4 seconds would pass and the toast would never be seen. That’s why there’s a `useIsDocumentHidden` hook that checks if the document (tab) is hidden, and if so, it will pause the timer. This can be done with the "visibilitychange" event listener on the document. A small detail that improves the experience.

One of my favorite details of Sonner: By default the toast disappears after 4 seconds unless you hover over it. But what if a toast is triggered and the user switches to a different tab? 4 seconds would pass and the toast would never be seen. That’s why there’s a `useIsDocumentHidden` hook that checks if the document (tab) is hidden, and if so, it will pause the timer. This can be done with the "visibilitychange" event listener on the document. A small detail that improves the experience.

59,091 views

A small quality of life update: When you were using the Linear Agent and a toast was render, it covered the chat. Now the toast renders next to it and changes position when the chat is open/closed.

A small quality of life update: When you were using the Linear Agent and a toast was render, it covered the chat. Now the toast renders next to it and changes position when the chat is open/closed.

46,328 views

After more than 4 months, is opening in exactly 7 days. Some cool new things will be waiting :)

After more than 4 months, is opening in exactly 7 days. Some cool new things will be waiting :)

66,877 views

Introducing Animations on the web A course about how to craft animations that make people feel something. It contains everything I know about motion on the web.

Introducing Animations on the web A course about how to craft animations that make people feel something. It contains everything I know about motion on the web.

742,510 views

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

89,488 views

Something that AI unlocks is being able to try a few different variations of a feature quickly. I often ask my coding agent to come up with a few different variants and add a switcher so I can easily swap between them. It also saves your selection as a query param so I can show a specific variation to a colleague. This + a library like Leva for controls that directly influence an interaction makes prototyping and coming up with different ideas extremely easy.

Something that AI unlocks is being able to try a few different variations of a feature quickly. I often ask my coding agent to come up with a few different variants and add a switcher so I can easily swap between them. It also saves your selection as a query param so I can show a specific variation to a colleague. This + a library like Leva for controls that directly influence an interaction makes prototyping and coming up with different ideas extremely easy.

72,223 views

There’s a fun little easter egg in my animation course: As enrollment gets closer to closing, the butter cube melts more with each hour by animating the svg paths.

There’s a fun little easter egg in my animation course: As enrollment gets closer to closing, the butter cube melts more with each hour by animating the svg paths.

141,992 views

A recent addition to our /now page at Linear: Hovering over a video card will play the video starting from the frame visible on the thumbnail so it matches nicely. The Coinbase one is especially satisfying (a very nice video too!).

A recent addition to our /now page at Linear: Hovering over a video card will play the video starting from the frame visible on the thumbnail so it matches nicely. The Coinbase one is especially satisfying (a very nice video too!).

39,550 views

One of my favorite things from the new Linear homepage are these side drawers which you can open to get some info about a specific feature. Made with Base UI’s dialog component and some ease-out.

One of my favorite things from the new Linear homepage are these side drawers which you can open to get some info about a specific feature. Made with Base UI’s dialog component and some ease-out.

52,268 views

Hover transitions seen tens, maybe even hundreds of times a day can make your interface feel slower. Make them snappy by removing the transition altogether.

Hover transitions seen tens, maybe even hundreds of times a day can make your interface feel slower. Make them snappy by removing the transition altogether.

115,589 views

Keep your animations fast. A faster-spinning spinner makes you think the app loads faster. It improves perceived performance. The same applies to user-initiated actions. Use `ease-out` to make them feel snappy and responsive.

Keep your animations fast. A faster-spinning spinner makes you think the app loads faster. It improves perceived performance. The same applies to user-initiated actions. Use `ease-out` to make them feel snappy and responsive.

102,387 views

A high-ROI tip from is to record your animations and play them frame by frame to spot imperfections you wouldn’t otherwise notice. These hidden imperfections are what makes an animation feel off, even though it looks alright at first glance.

A high-ROI tip from is to record your animations and play them frame by frame to spot imperfections you wouldn’t otherwise notice. These hidden imperfections are what makes an animation feel off, even though it looks alright at first glance.

32,403 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

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

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

New skill: /improve-animations Inspired by shadcn’s improve skill I made one specifically for animations. Use your most capable model to audit animations in your project and hand the execution to cheaper models. Fable is available through July 12, so make good use out of it!
0:35
emilkowalski's profile picture

New skill: /improve-animations Inspired by shadcn’s improve skill I made one specifically for animations. Use your most capable model to audit animations in your project and hand the execution to cheaper models. Fable is available through July 12, so make good use out of it!

Emil Kowalski

506,446 views • 3 months ago

You can enroll in my animation course for the next 10 days! It's the perfect way to learn the theory behind great animations, but also how to build them in code. Now with a skill file for agents. We'll cover all of these components and more, source code included.
1:05
emilkowalski's profile picture

You can enroll in my animation course for the next 10 days! It's the perfect way to learn the theory behind great animations, but also how to build them in code. Now with a skill file for agents. We'll cover all of these components and more, source code included.

Emil Kowalski

560,982 views • 9 months ago

Given how impressed I was with Cursor’s Thermo-Nuclear Code Quality Review skill, I decided to create a similar one, but specifically for animations. /review-animations to review, and /emil-design-eng to build animations. They complement each other well
0:31
emilkowalski's profile picture

Given how impressed I was with Cursor’s Thermo-Nuclear Code Quality Review skill, I decided to create a similar one, but specifically for animations. /review-animations to review, and /emil-design-eng to build animations. They complement each other well

Emil Kowalski

218,337 views • 4 months ago

Thanks to AI we can now move way faster to actually trying things in code, and it’s great. Exploration in design tools is obviously needed too, but by being able to touch the UI you can experience it instead of just imagining how it would actually feel.
0:27
emilkowalski's profile picture

Thanks to AI we can now move way faster to actually trying things in code, and it’s great. Exploration in design tools is obviously needed too, but by being able to touch the UI you can experience it instead of just imagining how it would actually feel.

Emil Kowalski

97,623 views • 2 months ago

A year at Linear
0:49
emilkowalski's profile picture

A year at Linear

Emil Kowalski

402,736 views • 1 year ago

You can enroll in my animation course for the next 10 days! It's the perfect way to learn the theory behind great animations, but also how to build them in code. We'll cover all of these components and more, source code included.
0:37
emilkowalski's profile picture

You can enroll in my animation course for the next 10 days! It's the perfect way to learn the theory behind great animations, but also how to build them in code. We'll cover all of these components and more, source code included.

Emil Kowalski

336,090 views • 1 year ago

Lately, before going to sleep, I’ve been tasking Fable with creating interactive visuals. Clicking on the image generates a new variation. Definitely not a masterpiece, but it’s interesting to see what it comes up with. And who knows maybe I’ll use some of them as inspo one day.
0:28
emilkowalski's profile picture

Lately, before going to sleep, I’ve been tasking Fable with creating interactive visuals. Clicking on the image generates a new variation. Definitely not a masterpiece, but it’s interesting to see what it comes up with. And who knows maybe I’ll use some of them as inspo one day.

Emil Kowalski

42,824 views • 2 months ago

A demo of the animations[.]dev skill file using Claude Code. It can review your animations, suggest improvements, and basically answer all your motion-related questions based on my experience gathered over the years.
0:36
emilkowalski's profile picture

A demo of the animations[.]dev skill file using Claude Code. It can review your animations, suggest improvements, and basically answer all your motion-related questions based on my experience gathered over the years.

Emil Kowalski

124,903 views • 9 months ago

Each enrollment of comes with free updates for existing students. This time it’s a new lesson on training your judgement with more than 20 exercises, and a guest lesson by joshpuckett called “Animations as Proof of Care”. You still have 2 days to join!
0:44
emilkowalski's profile picture

Each enrollment of comes with free updates for existing students. This time it’s a new lesson on training your judgement with more than 20 exercises, and a guest lesson by joshpuckett called “Animations as Proof of Care”. You still have 2 days to join!

Emil Kowalski

82,739 views • 5 months ago

My animation course is live! It contains everything I know about animations on the web. We'll build all of these and more.
0:20
emilkowalski's profile picture

My animation course is live! It contains everything I know about animations on the web. We'll build all of these and more.

Emil Kowalski

250,128 views • 2 years ago

Built some graphs and punched cards for a recent Linear Data Report.
0:24
emilkowalski's profile picture

Built some graphs and punched cards for a recent Linear Data Report.

Emil Kowalski

28,064 views • 1 month ago

Quick demo of the skill file. Improve any animation based on my knowledge and experience gathered over the years:
0:31
emilkowalski's profile picture

Quick demo of the skill file. Improve any animation based on my knowledge and experience gathered over the years:

Emil Kowalski

67,109 views • 6 months ago

New lesson for upcoming enrollment. It’s about training your judgement. You’ll see two versions of the same animation, your job is to choose one and explain why it’s better. A great skill to have when working with coding agents like Claude Code and Codex
0:34
emilkowalski's profile picture

New lesson for upcoming enrollment. It’s about training your judgement. You’ll see two versions of the same animation, your job is to choose one and explain why it’s better. A great skill to have when working with coding agents like Claude Code and Codex

Emil Kowalski

55,258 views • 6 months ago

Introducing Vaul 1.0. A drawer component for React. Rewritten, improved, with new docs.
0:20
emilkowalski's profile picture

Introducing Vaul 1.0. A drawer component for React. Rewritten, improved, with new docs.

Emil Kowalski

119,551 views • 2 years ago

Few interactions and animations from the new Linear homepage
0:26
emilkowalski's profile picture

Few interactions and animations from the new Linear homepage

Emil Kowalski

45,526 views • 8 months ago

During Vercel's hackathon last week, kevvy and I built a time machine for preview deployments. Pressing the 'i' key activates a slider that allows you to compare the differences.
0:21
emilkowalski's profile picture

During Vercel's hackathon last week, kevvy and I built a time machine for preview deployments. Pressing the 'i' key activates a slider that allows you to compare the differences.

Emil Kowalski

131,385 views • 2 years ago

More than 900 designers and engineers have joined my animations course in the last 10 days. That's more than 6,600 students in total since January 2024. Extremely grateful. You still have ~2 hours to join!
0:27
emilkowalski's profile picture

More than 900 designers and engineers have joined my animations course in the last 10 days. That's more than 6,600 students in total since January 2024. Extremely grateful. You still have ~2 hours to join!

Emil Kowalski

67,229 views • 1 year ago

A few interactive demos from a recent addition to my animation course: A six-part module on SVG animations where you’ll learn about the coordinate system, path syntax, stroke properties, and more. We’ll end up building some of the illustrations from the course’s homepage.
0:56
emilkowalski's profile picture

A few interactive demos from a recent addition to my animation course: A six-part module on SVG animations where you’ll learn about the coordinate system, path syntax, stroke properties, and more. We’ll end up building some of the illustrations from the course’s homepage.

Emil Kowalski

39,687 views • 7 months ago

Some Linear Method interactions
0:38
emilkowalski's profile picture

Some Linear Method interactions

Emil Kowalski

38,651 views • 9 months ago

No more content to load