Emil Kowalski @emilkowalski_ Twitter profile

Pinned Tweet

Emil Kowalski

4 months

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.

107

255

3K

Last Seen Profiles

@happyfamilylabo

@twlen558

@Cocaine_papii

@gibacamera

@danieloluwale

@ryuchanbara

@OficialMrCatra

@pinheirocamila

@therealtyliyah

@OBiliew

@erinhale

@takeshi30922451

@66mn

@mericanunclesam

@LeannaOkiMusic

@DrJMCTosta

@sofiasafitrii1

@MagaGutierrezV

@AIMtoInnovate

@ViniKuro12

@schellgames

@KaretaOfficial

@adrienalmeida5

@DrNoumory

@somnamusic

@isaiahboyd4777

@MoutuonMaddahi

@Hot3221VA

@ptrbrn

@wilfriedboh

@boomstick_13

@Matrice_

@lathoumetiehugo

@mrhaoussa

@xo_nyyyy

@mtsacfootball

Emil Kowalski

@emilkowalski_

1 year

Introducing Sonner - an opinionated toast component for React.

70

155

2K

Emil Kowalski

@emilkowalski_

10 months

Introducing Vaul - an unstyled drawer component for React.

58

178

2K

Emil Kowalski

@emilkowalski_

1 year

Toggle your theme using clip-path

50

136

2K

Emil Kowalski

@emilkowalski_

2 years

Been working on a toast lately

34

60

2K

Emil Kowalski

@emilkowalski_

2 months

Today is my last day at @vercel 🖤 Joining Vercel was a dream come true for me and I'm thankful for the chance I was given 18 months ago. I grew a lot during my time here and had the privilege to work with incredibly talented people. Excited for what's next!

58

12

1K

Emil Kowalski

@emilkowalski_

2 months

Liking this background blur to highlight the toast when necessary. It uses a radial mask to create a smooth transition on each side.

21

32

1K

Emil Kowalski

@emilkowalski_

1 year

Introducing my new small side project: I decided to interview designers and engineers about their work as I am fascinated by how other people approach their craft.

ui.land

ui.land is The Digital Library for Designers and Engineers.

ui.land

35

115

1K

Emil Kowalski

@emilkowalski_

2 months

Been adding 4px of blur to animations recently and I kinda like it?

32

23

1K

Emil Kowalski

@emilkowalski_

5 months

Thanks for using my stuff in 2023! I'm working on a new open source component that will be released in early 2024

30

38

1K

Emil Kowalski

@emilkowalski_

6 months

Tried building family's tray system on the web. It's not as good as their native implementation, but the combination of Vaul and framer motion gets you pretty close

29

57

1K

Emil Kowalski

@emilkowalski_

2 months

This is my first week on the design team at @ClerkDev . Excited to build some nice things with talented people!

63

19

1K

Emil Kowalski

@emilkowalski_

1 month

Tried recreating Family's trash interaction

17

42

1K

Emil Kowalski

@emilkowalski_

2 months

We will build all for of these in Animations on the web. Registration closes in 4 days, March 15th.

32

43

1K

Emil Kowalski

@emilkowalski_

4 months

You can now use Vaul as a side or top drawer by simply adding position="left" for example. Thanks to everyone that uses Vaul and to all contributors!

33

39

1K

Emil Kowalski

@emilkowalski_

2 months

16

156

942

Emil Kowalski

@emilkowalski_

1 month

Had fun building this one over the weekend

23

30

925

Emil Kowalski

@emilkowalski_

5 months

We've updated the navbar. It's built on top of @raunofreiberg 's initial work and is using Radix.

25

28

903

Emil Kowalski

@emilkowalski_

6 months

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

34

65

885

Emil Kowalski

@emilkowalski_

16 days

The new chapter of the course has dropped and the registration is open for the next five days. We'll build all of these components and more, source code included.

22

43

846

Emil Kowalski

@emilkowalski_

3 months

Excited about this one

17

22

832

Emil Kowalski

@emilkowalski_

20 days

I don't share this one often, but is a project I made last year. It contains a bunch of interviews with designers and engineers from companies like Vercel and Linear. Thought you might find it interesting!

11

46

830

Emil Kowalski

@emilkowalski_

2 years

I had a ton of fun building the command menu @Compound and thought I'd share some technical details about it 🧵

17

45

799

Emil Kowalski

@emilkowalski_

23 days

One of the components we'll build in the chapter that is dropping next week.

21

26

776

Emil Kowalski

@emilkowalski_

6 months

I tried to build a web version of Amie's split screen over the weekend. These types of things are so easy to build with framer motion

15

22

743

Emil Kowalski

@emilkowalski_

2 months

Decided to write about how I built the platform for my course. The design process, tech stack, and more.

How I built my course platform

I've recently launched an early version of my animations course. This post is meant to give you a behind-the-scenes look at the tech stack, design process, and more.

emilkowal.ski

19

36

736

Emil Kowalski

@emilkowalski_

5 months

Theo just made a great ad for Sonner

27

21

728

Emil Kowalski

@emilkowalski_

11 months

Playing around with a dynamic island clone. It's not perfect, but I'll share some improvements over time

19

31

722

Emil Kowalski

@emilkowalski_

3 months

Added drag to dismiss here

21

712

Emil Kowalski

@emilkowalski_

7 months

Spent some time improving the dynamic island, the animations should feel a bit better now

13

33

672

Emil Kowalski

@emilkowalski_

2 months

I'm working on a page for the course that will contain some useful links related to animations. What are some great videos, people, companies or articles that you really like?

35

19

636

Emil Kowalski

@emilkowalski_

2 years

Built a new /design page inspired by @raunofreiberg quick links to preview all the sites

22

625

Emil Kowalski

@emilkowalski_

2 months

We've shipped our new Geist documentation at @vercel . It's not only a visual update, we also improved the DX and provided better instructions on how to use our colors and components.

12

37

630

Emil Kowalski

@emilkowalski_

5 months

You can now use Sonner and Vaul in shadcn/ui! Thanks to @shadcn for implementing it.

13

26

599

Emil Kowalski

@emilkowalski_

2 months

The first part of the course launches today at 3PM ET time. Excited!

38

26

596

Emil Kowalski

@emilkowalski_

3 months

Trying some stuff out and I kinda like that the button changes color depending on the state that it's in?

27

16

583

Emil Kowalski

@emilkowalski_

2 years

⌘ + k in Spotify gives you this 🤯

14

31

572

Emil Kowalski

@emilkowalski_

13 days

Decided to add a page with all components we'll build in the course. Hopefully this gives you a better overview of what's in it. Registration closes tomorrow.

25

21

570

Emil Kowalski

@emilkowalski_

6 months

Published family's tray system on my site so you can try it out

Emil Kowalski

emilkowal.ski

21

25

551

Emil Kowalski

@emilkowalski_

2 years

Very excited to say that tomorrow will be my first day @vercel . Thrilled to work with amazing people on amazing products.

38

5

539

Emil Kowalski

@emilkowalski_

3 months

Working on new Geist docs with the amazing @glennui

11

20

542

Emil Kowalski

@emilkowalski_

11 months

Published the dynamic island component on my site so you can try it out

Emil Kowalski

emilkowal.ski

17

41

504

Emil Kowalski

@emilkowalski_

8 months

Just released version 1.0 of Sonner. Added simple documentation with @shuding_ 's Nextra, improved the API + you are now able to use Toaster in server components thanks to @huozhi .

Sonner

An opinionated toast component for React.

sonner.emilkowal.ski

28

36

503

Emil Kowalski

@emilkowalski_

8 months

We are using Vaul in production at Vercel now! You can drag to dismiss, inputs in drawers should work better now as well.

11

17

494

Emil Kowalski

@emilkowalski_

2 months

First behind-the-scenes email is going out later today. Excited to talk about Framer Motion and share some actual code snippets, even though this one is pretty simple.

4

10

495

Emil Kowalski

@emilkowalski_

4 months

Played around over the weekend

20

11

477

Emil Kowalski

@emilkowalski_

3 months

I released Sonner exactly one year ago. It now has more than 300,000 weekly npm downloads, which is a crazy number to me. Thank you for using it!

23

8

458

Emil Kowalski

@emilkowalski_

3 months

Added an outline to Animations on the web. The first part of the course is launching on March 15th. March 15th is also the date that the registration will close and will stay closed until the full launch later this year.

11

15

440

Emil Kowalski

@emilkowalski_

26 days

Sharing this little button animation + a bunch of other stuff later today in the behind-the-scenes email from the course. Watch your inbox around 7pm ET

17

4

431

Emil Kowalski

@emilkowalski_

9 months

Added snap points to Vaul over the weekend

16

18

420

Emil Kowalski

@emilkowalski_

6 months

I wrote an article about how I built Vaul, a drawer component for React

Emil Kowalski

emilkowal.ski

12

30

417

Emil Kowalski

@emilkowalski_

1 month

Published the trash interaction so you can try it out

Emil Kowalski

emilkowal.ski

14

11

394

Emil Kowalski

@emilkowalski_

7 months

Added dark mode to my personal site, and changed the fonts to Geist

9

11

383

Emil Kowalski

@emilkowalski_

9 months

Making scale animations origin-aware is often overlooked, but it feels nicer. See a before/after below.

11

16

377

Emil Kowalski

@emilkowalski_

9 months

Working on animating Safari's theme-color to match the overlay for Vaul.

13

12

363

Emil Kowalski

@emilkowalski_

3 years

Recreated Vercel's Tabs component for a side project. Would you be interested in a blog post where I explain how to build it?

18

12

348

Emil Kowalski

@emilkowalski_

2 years

Brought back /tools on my personal site

12

8

346

Emil Kowalski

@emilkowalski_

8 months

Working on new design system docs for Geist with @glennui

10

7

346

Emil Kowalski

@emilkowalski_

3 months

Thanks to @benjitaylor for helping align with Family's drawer styling. We will now be able to work with similar styles and assets in the course as the ones used in @family 's iOS app.

7

6

340

Emil Kowalski

@emilkowalski_

10 months

We've recently updated our dashboard navigation at Vercel, here's a small before and after.

7

5

332

Emil Kowalski

@emilkowalski_

4 months

We are working on a personal timeline to record your life together with @mrncst . You can join the waitlist if you are interested!

18

13

327

Emil Kowalski

@emilkowalski_

9 months

Added nested drawers to Vaul! You just need to use `Drawer.NestedRoot` inside another drawer to nest it.

10

18

322

Emil Kowalski

@emilkowalski_

7 months

I really liked Apple's new MacBook Pro page and decided to recreate one component from it, was quite fun!

6

12

316

Emil Kowalski

@emilkowalski_

8 months

Wrote a post about some of the lessons I've learned and mistakes I made while building Sonner.

Emil Kowalski

emilkowal.ski

10

17

315

Emil Kowalski

@emilkowalski_

1 year

We've updated our design system documentation @vercel during the hackathon together with @raunofreiberg , @itsmegbird and @souporserious .

6

21

312

Emil Kowalski

@emilkowalski_

3 months

Working on the outline for Animations on the web.

11

7

313

Emil Kowalski

@emilkowalski_

7 months

I love getting paid to do things I'd be doing in my free time anyways

5

13

269

Emil Kowalski

@emilkowalski_

2 years

A small write-up about the toast I built a while back @Compound

4

25

270

Emil Kowalski

@emilkowalski_

2 years

- Coming soon

ui.land

ui.land is The Digital Library for Designers and Engineers.

ui.land

14

5

267

Emil Kowalski

@emilkowalski_

3 years

I made a list of my favourite tools -

8

13

240

Emil Kowalski

@emilkowalski_

2 years

I love getting paid to do things I'd be doing in my free time anyways

1

8

233

Emil Kowalski

@emilkowalski_

3 years

Blurred Glow Stack 2 same divs/images on top of each other and apply blur with some transform to one of them. filter: blur(40px); transform: scale(1.3) rotate(30deg);

8

19

205

Emil Kowalski

@emilkowalski_

11 months

Added a silent/ring mode to the dynamic island

3

5

196

Emil Kowalski

@emilkowalski_

3 years

Working on a Command Menu for a new UI post on

3

7

153

Emil Kowalski

@emilkowalski_

10 months

I've started a monthly newsletter where I will share things that I have learned and links to anything I've found interesting.

Emil Kowalski

emilkowal.ski

10

6

141

Emil Kowalski

@emilkowalski_

2 years

What are some great open source design systems?

16

9

141

Emil Kowalski

@emilkowalski_

2 years

I like when people indicate external links

4

8

139

Emil Kowalski

@emilkowalski_

7 months

We've updated our command menu in the dashboard, Vercel docs, and Next.js docs with a new component from our shared Geist package. It also turns into a drawer on mobile now, resulting in better mobile experience

3

2

132

Emil Kowalski

@emilkowalski_

2 years

Today was my last day at @Compound . I grew a lot here and met some amazing people, really grateful for this opportunity. Excited for what's next!

10

1

116

Emil Kowalski

@emilkowalski_

3 years

I've been building an interactive demo for my blog and animating flex box properties with framer motion is just amazing. @mattgperry 👏

0

5

116

Emil Kowalski

@emilkowalski_

2 years

Working on an easy to play with the code for the new posts

2

1

114

Emil Kowalski

@emilkowalski_

2 months

@shadcn I haven't seen a good alternative and actually thought about making such component. It just seems very complex, because of the amount of scenarios you'd need to cover. Another cool OSS component would be a scroller that automatically adds fade (smooth gradient) to scrollable…

6

0

112

Emil Kowalski

@emilkowalski_

3 years

I decided to challenge myself and recreate real UI elements from the web. If you have any ideas on what UI elements I can cover next, let me know!

6

9

109

Emil Kowalski

@emilkowalski_

3 years

If you nest rounded elements and apply the same radius, the corners will look a bit off. Use this formula to make them "fit" each other: innerRadius = outerRadius - padding The difference is subtle, but it gives a more polished look to your component.

4

9

107

Emil Kowalski

@emilkowalski_

2 years

I've been polishing the Command Menu over the last few days, you can check it out at . Let me know what you think about it!

9

5

101

Emil Kowalski

@emilkowalski_

2 months

Animations on the web

animations.dev

1

6

93

Emil Kowalski

@emilkowalski_

4 months

Thanks to @shadcn for the help with structuring the course, and to @mrncst for design assistance — you are the best!

0

1

90

Emil Kowalski

@emilkowalski_

3 years

Vercel's sticky navbar .navbar { position: sticky; top: 0; backdrop-filter: saturate(180%) blur(20px); }

2

5

87

Emil Kowalski

@emilkowalski_

9 months

We transition the meta tag's value by interpolating the color steps and updating the color every 10ms. Matching the exact transition of the overlay was the hard part here. I might write more about it soon. You can see the wip code here - .

2

16

88

Emil Kowalski

@emilkowalski_

2 years

Come for the features, stay for the details.

2

6

85

Emil Kowalski

@emilkowalski_

2 years

Clients expect quick and complete search results. To facilitate this, we used Fuse.js and Algolia. Fuse.js searches locally while Algolia combs through 22K+ institutions in under 10ms on the server and ranks results based on internal metrics such as usage and health rate.

1

3

83

Emil Kowalski

@emilkowalski_

3 years

UI Snippets — A collection of copyable UI Snippets. Made with #nextjs , @stitchesjs & @radix_ui , deployed on @vercel

UI Snippets

A collection of UI Snippets

ui-snippets.dev

1

14

73

Emil Kowalski

@emilkowalski_

2 years

Working on a Combobox

1

67

Emil Kowalski

@emilkowalski_

2 years

Used subtle blurred glow in the background of each logo

Emil Kowalski

@emilkowalski_

3 years

Blurred Glow Stack 2 same divs/images on top of each other and apply blur with some transform to one of them. filter: blur(40px); transform: scale(1.3) rotate(30deg);

8

19

205

0

2

66

Emil Kowalski

@emilkowalski_

3 years

Added @linear 's glow button and some more effects to

3

62

Emil Kowalski

@emilkowalski_

9 months

It's inspired by @pacocoursey tweet

Paco

@pacocoursey

2 years

Tinted Safari theme-color based on user action

22

66

1K

0

1

60

Emil Kowalski

@emilkowalski_

10 months

It works with scrollable content and inputs. You can see more examples on GitHub - . It's not perfect yet, but the plan is to iron out all the bugs in the upcoming days as more people start using it.

GitHub - emilkowalski/vaul: An unstyled drawer component for React.

An unstyled drawer component for React. Contribute to emilkowalski/vaul development by creating an account on GitHub.

github.com

4

57

Emil Kowalski

@emilkowalski_

2 years

@raunofreiberg The icons don't have a border underneath as they need less separation, because they are visually distinct. Didn't know about it before and learned it from @sjzhang_

0

3

56

Emil Kowalski

@emilkowalski_

8 months

@shuding_ @huozhi You can now also render toasts in multiple positions simultaneously.

1

4

56

Emil Kowalski

@emilkowalski_

3 years

25px blur

2

0

52