Derek Briggs
@PixelJanitor
Followers
6,300
Following
460
Media
504
Statuses
8,910
Directnerd of Design @ClerkDev . Angel Investor. Prev @trycampsite @PlanetScale .
Colorado, USA
Joined July 2010
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
#Eurovision2024
• 597603 Tweets
オーロラ
• 514573 Tweets
Joost
• 361825 Tweets
Mother's Day
• 133230 Tweets
Forest
• 127711 Tweets
الدوري الاقوي
• 92679 Tweets
Reece James
• 73931 Tweets
#AMVCA10
• 69578 Tweets
Corinthians
• 65959 Tweets
Brahim
• 51555 Tweets
Arda Güler
• 47347 Tweets
Irlanda
• 46929 Tweets
Granada
• 44098 Tweets
Rohit Sharma
• 38325 Tweets
#ESC2024
• 34520 Tweets
#الدوري_الاقوي_في_التاريخ
• 32732 Tweets
Alemania
• 28881 Tweets
#الشباب_الاهلي
• 22764 Tweets
Sterling
• 22444 Tweets
#ESCita
• 19352 Tweets
Estonia
• 19040 Tweets
Suecia
• 18968 Tweets
Caicedo
• 18946 Tweets
Paul Skenes
• 17670 Tweets
Luxembourg
• 17517 Tweets
Poch
• 15392 Tweets
Grecia
• 13634 Tweets
Olly
• 13549 Tweets
Cássio
• 13494 Tweets
Odoi
• 12832 Tweets
Paulinho
• 12280 Tweets
Cosmo
• 11626 Tweets
Mainz
• 10030 Tweets
Here’s a strategy I use for more natural looking shadows:
Adjust your shadow stack sizes to account for a negative spread that’s 1/2 the amount of the Y. To make it even easier, I use a matching Y and Blur for each shadow layer and then set every layer to the same color/opacity.
33
218
3K
A 🧵 on how to implement beautiful shadow borders:
Yesterday,
@jamesm
called out our
@trycampsite
UI bits and how we utilize box shadows as borders to get better border contrast on elements with shadows. Lets talk about how we actually implement this and work around the gotchas:
16
62
714
Here’s a simple fidelity detail you can add to your dark mode containers to make them look even better: Just a super subtle 1px inner highlight adds just enough edge contrast to visually sharpen container edges. Want a little more detail? -> 🧵
10
32
629
Here's Campsite's dark mode buttons. Light perception is key to beautiful borders and shadows. It involves many small details, but put together, can result in some really nice UI. Lastly, some real world code for ya to play with...
10
50
551
Last week,
@jamesm
and I worked on some slide deck visuals that turned out pretty darn neat 🤩 Going to keep polishing these a bit more to get to use them on the upcoming new Clerk website.
Sheesh this is fun.
23
16
474
Here’s how to CSS the shadow stack I recently shared.
I also put together a little codepen to demo both Tailwind and CSS versions to check out:
7
16
438
Here's some detail around how the new
@trycampsite
switch component was crafted and built. Will share some of the shadow/lighting detail as well as a little code used for the toggle animation:
10
21
423
Completely unsolicited design feedback but I wish the Things app icon utilized a concentric border radius for the “paper” detail.
27
1
338
Dropdown is alive ⚒️ Shipping soon to a
@trycampsite
near you.
Later this week I’ll put together another UI breakdown thread around the various design/eng details for these.
16
5
305
Currently working on being able to attach images to comments in
@trycampsite
. Prototyping it with just divs at the moment, but the interactions are feeling nice:
14
5
261
WIP of more featured git ui for
@zeddotdev
(plus some display font exploration we’re doing for outside of code buffers 😉).
Excited for the AI magic in Zed’s upcoming git features ✨
29
7
248
🧵: Designers focused on high polish and extremely detailed designs look for teams with UI engineers that are wanting difficult, high polish, extremely detailed implementations.
5
21
239
You intentionally invest in craft. You provide an environment where talented people thrive on pushing their own boundaries and then enable and encourage them to explore.
It’s not a sacrifice of velocity - it’s an investment in quality.
The attention to detail that Vercel has maintained at scale is shocking. There are thousands of ways to do ticket confirmations but this is the only one that has kept me from immediately closing it.
How does
@rauchg
and team build a culture like this? Respect.
7
22
299
3
18
216
Last week
@thorstenball
added a git blame gutter to
@zeddotdev
that's landing in Zed preview this week. Working on getting inline access to that detail as well.
5
1
188
Built this new
@trycampsite
toggle switch as a controlled or uncontrolled component you'll start seeing throughout the app soon™.
9
2
182
I'm so excited to finally get to share this progress with you.
Today, we're releasing a public beta of Clerk Elements. Unstyled React primitives built on Clerk's world-class DX foundations for you to build fully custom authentication flows in your apps.
Let's dig in. 🧵
8
12
182
The only image in this animation is the
@ClerkDev
logo. I built this little laptop in 2 divs and their :before and :afters. Was a fun constraint with a satisfying outcome. Couple extra divs for the lighting effects, sprinkle some framer-motion, and voila.
Go inspect!
15
5
174
Made some progress on this one for the new
@ClerkDev
site. I think the muted clay style transition to the animated versions will be pleasant. Animating the sonar rotations with the location pulses is going to be slick too ✨
9
4
168
Was asked to share how I use Figma shadows for the
@trycampsite
component lighting stuff so I threw together a quick community file for anyone interested. You bet I named those layers.
cc
@reyamir_
for the ask!
9
5
161
Really happy with this little bot detection feature illustration
@ceciliorz
and I are working on. Figma for now, but excited what he’ll do with it in C4D.
14
3
160
Users don’t see your figma files. Your designs are only as good as their implementations.
I think they got these pictures reversed?
@PixelJanitor
waged war against this problem at Clerk with the might of world’s best design engineers. 10/10 times our app is cooler in prod.
3
0
30
4
11
148
Last week we shipped a new grid view to the
@trycampsite
feed view.
@brian_lovin
and I teamed up on making the gallery interactions feel nice. It’s boundary aware and velocity aware. Used a filter: blur(’8px’) -> filter: blur(’0px’) when entering/exiting to add motion depth.
5
3
146
I’ve admired Emil’s contributions to interfaces for years and I’m so excited for him to join our design team. His strong motivation and highly skilled implementation capabilities will certainly take the future of Clerk to the next level.
designTeam++
This is my first week on the design team at
@ClerkDev
.
Excited to build some nice things with talented people!
63
19
1K
8
1
126
This morning I installed a patch panel in our garage and instinctively felt the need to measure the auxiliary line distance to the main line so that there was a concentric corner radius between them. Today I do UI for pipes.
I’m the most expensive electrician there never was.
9
3
116
Here's
@jamesm
example input element design from his thread involving the stuff I just talked about - built with
@tailwindcss
. Dark mode elements let us get even fancier (noticed the focus glow impacting the outer highlights when active).
5
4
107
Neat little (unused) t-shirt size picker that
@jamesm
and I worked on together for the Tailwind Connect event site 🤙
1
5
104
If you use 13px font size for your flex-centered button content spans, chrome seems to render its baseline 1px off (lower). If you use 13.01px it aligns correctly. Because browsers.
Yes 1px off matters. It always matters.
7
1
100
.
@tweetsbycolin
mentioned he had never heard the term “shadow stack” before. In Figma, and css, you’re stacking shadow values to blend them as the final shadow. To visualize it, here’s each shadow value as separate shapes stacked into the final image:
2
4
99
I have some exciting news to share - I’ve joined the design team
@ClerkDev
!
For the past couple of months I’ve been working with
@jescalan
and
@bsinthewild
on the future of Clerk’s design and DX product direction and I’m super stoked to continue seeing it through full time 🎉
20
3
95
Wake up, babe. New Clerk site dropped.
Stoked to finally share what we’ve been working on. Even more planned and in progress already.
Introducing an all new ✨
Rebuilt from the ground up for your viewing pleasure, and we couldn’t be more excited to share it with you!
23
44
277
14
4
91
Cool little video demoing some animation work I did for PlanetScale. It’s amazing what you can make with a bunch of divs and box shadows.
Huge props to for their impeccable landing page animations! Not mere videos—some have 20-25% SVGs & others, like the meter, are 100% CSS + HTML. Checked out this short video to see the magic
When a company invests this much into its product 🙌
0
2
37
2
2
89
New year, new gig: I’ve joined the team at
@trycampsite
. Very excited about what the team is building, and excited to have the opportunity to contribute the future of the platform.
6
0
87
The control you get over hand crafting illustrations is unmatched to exporting an image or trying to do something with a video file. Any illustration I’ve designed and/or built is just html, css, and javascript. At some point soon I’ll put something together on my approach here.
⚡️ I’m so excited for this project to go live! Here's a WIP sneak peek of the animation work on
@sequencehq_
crafted by the talented
@PixelJanitor
. ITS SO GOOD 😅
7
11
296
12
4
86
Working on some updated file icons for
@zeddotdev
and I think this tiny little 12x12
@bunjavascript
is looking adorable.
2
2
79
Yesterday,
@jamesm
asked how you would design this button in Figma:
The subtle details in something like this is what make it extra nice. Learn to notice these details and you'll be your designer's favorite go-to for implementation. Let's check it out:
3
6
77
Started toying with the idea of structuring figma files based on their shipped location. Working on some updates to .
Project:
Filename: pricing
This is what figma shows in the titlebar:
8
0
78
When dialing in layout for specific breakpoints with
@tailwindcss
, I’d find myself guessing which breakpoint I was currently in. I threw together this little tool that only shows in dev to fix that. Anyone interested in it as an npm package?
10
1
76
Users don't see your Figma design files, so they're only as good as their implementations. Sweat the details in the code too.
I hope this helps with polishing the contrast borders in your UI 🤙
5
9
75
I cracked div/css-only progressive blur to the nav overlay for the upcoming new
@ClerkDev
changelog:
11
1
73
Hey designers! Its finally out! The Subtle patterns photoshop plugin!!!
http://t.co/mQpXPAh8th
//
@antiheroine
2
55
68
Cecilio’s work speaks for itself:
Brand design.
Visual design.
Icon design.
Motion design.
3D design.
The list goes on…
Everyone we hire at Clerk gives the team new capabilities in some way and we compliment each other in our contributions. Cecilio is unlocking us even more 🔥
6
3
66
Proud Dad news: Beckham passed his skate class testing and is now approved to join his first hockey team. Dude definitely saw his dad cry today. I couldn't wait to remind him how proud of him I was the moment he stepped off the ice.
4
0
66
Career announcement: This is my last week at Campsite. Had a fantastic time with the team while building a bunch of amazing stuff together.
After a little personal time off, I'm interested in chatting with teams about opportunities. DM's are open if you’d like to chat.
7
1
65
Dark mode outline borders that are darker than the background create an even nicer edge contrast. Kick up the contrast and elevation a bit to add some highlight detail and falloff shadows. Using the trick of sharing the same alpha for all makes them easier to code too.
2
1
63
Starting a petition to have this pattern be a native default. Tap active tab to refresh.
Small detail in the Campsite PWA: tap a tab to scroll the view to the top, tap again to refresh.
Our views are all real-time, so this isn't strictly needed, but the UI feedback is really satisfying.
15
2
223
3
2
63
These are probably the most fun animations I’ve worked on to date. Very few svgs at all. Mostly divs and framer motion.
@bradlc
also did some incredible work on these and played an equal role in making these as good as they are. What a pleasure to team up with on this stuff.
🩵 The engineering team really had fun with these incredible animations. It's personally some of my favourite design work to date.
15
11
208
9
3
62
One of our very own,
@lucas_dehaas
, cooking with some rill nice detail this morning for an upcoming
@ClerkDev
graphic:
4
1
57
Your UI engineers should compliment your designer’s capabilities. Your designers shouldn’t fear pushing boundaries based on the anticipated fidelity of the implementation.
“Yea but good luck building that” is a null argument with the amazing technologies we have access to today.
1
1
57
Steal these for your own, ya’ll.
@jamesm
and
@hybrid_alex
made these examples for inspiration, but they’re beautiful and already built for you!
1
3
56
I think this was probably the most intense and emotional week of my career. I’m so fucking motivated right now.
Bring it, Monday.
6
1
52
We’re working on some huge advancements for
@ClerkDev
and everyday this stuff is getting more exciting. I’m looking for a few extremely talented JS focused engineers to join our team to build this next-gen tooling. If you’re interested, details here:
5
10
51
Recently discovered this VSCode setting to highlight all files with errors and not just the errors in open files. Will show error in your file tree as well as in the VSCode console. Requires restart.
1
1
50
I’m beyond thrilled to team up with Skully to support Clerk’s all-star Design and UI Engineering teams. Her amazing creative and organizational skills will not only increase our team’s capabilities, but significantly streamline our flow and elevate our efficiency.
designTeam++
2
0
50
.
@raunofreiberg
’s accessibility label detail here on reminds me, and inspires me, to be better at this.
2
0
49
Yesterday I started on
@ClerkDev
’s new animated feature icons. Last night I happened to see this tweet from Matt and I couldn’t wait to try it out this morning. I was using animate={{ rotate: 360 }} with an infinite repeat and the CPU was hovering between 10-11%. Now: 0.2!
🧠
@Framer
Motion performance tip:
If you're not animating transforms independently, move them to "transform" for battery-friendly, high performance hardware-accelerated animations.
10
18
239
3
1
46
It’s extremely painful to see a designer capable of so much more design for what can be built based on the engineering quality they have access to. A UI engineer will be disappointed implementing low quality designs while wanting to build tough, high detail layouts.
1
1
44
Thinking about posting these mini detail overviews every Friday. Hoping they are helpful - let me know if there is something in particular you’d like to learn more about 🤙
9
0
45
Just shipped some updated
@trycampsite
button variants in certain places in the app to feel them out. Primarily covering the onboarding flow at the moment. Let us know if you see any weirdness!
3
0
42
When using arbitrary values for Tailwind box shadows you don't need to declare a color for each shadow value. You can set the x/y/blur/spread (and still stack them!) without a color and just use a shadow-color utility class that they'll all share.
2
0
42
To recap - use a 1px slightly transparent box shadow as a border instead of a traditional css border on elements with shadows to get a gradient border on the element for free. The box shadow blends with the element's shadow as it gets darker towards the bottom. Why not borders?
1
1
43
Noticed that Build UI now offers lifetime memberships and apparently it’s only $150 forever? The content that
@samselikoff
and
@ryantotweets
are creating there is amazing. Tailwind, Framer motion, React, etc. So stoked about this! Instabuy.
2
1
39
I could not be more excited about James joining the Clerk design team 🎉
🥳 I have some exciting news to share – I've joined the team at
@ClerkDev
. These past few weeks have been a whirlwind, but I'm eagerly looking forward to diving into some exciting design projects with
@PixelJanitor
and the rest of the team!
Lesssssgoooooooo!
85
5
506
1
0
40
Designers:
What’s the biggest thing stopping you from learning how to build your designs?
What could get you to take the leap?
22
5
40
This is an extremely well done handwritten font:
1
1
40
Love every interaction I have with Ridd. This conversation was no exception.
Stoked for this episode to go live 🎥
I'm on a mission to understand:
1) what it takes to build a culture of craft
2) how prioritizing quality can be high ROI
Here's my key takeaway (~1 min) after talking with
@PixelJanitor
👇
7
5
82
4
2
39
So happy to have Alvish joining the design team. I’ve admired his UI skills for a while, and we’re so lucky to have him contributing to the future of Clerk.
🥳 Exciting news!
I'm joining the team at
@ClerkDev
. I am super stoked to have the opportunity to work with this exceptional team.
@PixelJanitor
and I have already kicked off some exciting projects. Looking forward to meeting and collaborating with the rest of the team. 😄
38
1
175
3
1
39
This was the last icon by
@ceciliorz
that I built and animated at PlanetScale. All
@tailwindcss
and framer-motion. Now iframed on a browser wall.
3
2
39
Designers: The new vertical trim feature for text in Figma is amazing. It’s so useful for easier alignment and less ambiguous spacing.
BUT - Engineers building your designs don’t have access to this feature on the web *yet*. Hold off on using it for now for production designs.
4
2
37
Custom easing functions ftw. The typical out of the box easings feel too robotic IMO. The cursor movement is using one I made for this project specifically:
4
0
38
As much as I love working remotely, it’s been really great to work in the same room for this final push for Tailwind Connect.
0
0
38
PS: In case you missed it, here's the the animation in action:
Built this new
@trycampsite
toggle switch as a controlled or uncontrolled component you'll start seeing throughout the app soon™.
9
2
182
1
0
38
It really does become a collaborative result. What the design was is rarely the final result. “What if” questions get asked that spark inspiration into an iterative cycle towards the final result. The implementation should always be better than the static design.
@sekeidesign
@ClerkDev
Most of the magic happens on the developers end.
@bradlc
and
@PixelJanitor
are so good at taking a couple of static frames in Figma and turning it into magic.
Here is a screenshot of some of the “states” I designed that I handed off to the dev team.
3
0
20
0
1
37
Wake up babe
@_buildui
dropped a react server components course. All the questions I see about how to properly fetch data with RSC have answers now.
BuildUI has been one of the best purchases I’ve made this year. $149 for lifetime access to all their courses is unreal. A steal.
3
3
37
My favorite question on screenshots: “Is that code or figma?”
@hybrid_alex
stacking pixels with some serious precision over here in the
@ClerkDev
dashboard 💪
1
1
36
Here’s some css that I pair with tailwind to defeat those pesky dynamic mobile browser chromes when working with full height layouts.
`dvh` units are well supported in most browsers, but for folks who only get access to `vh` units, they’re covered too.
2
1
36
I had the amazing opportunity of teaming up with the Tailwind crew to put this site together with them. Working with
@jamesm
and
@steveschoger
on design was such a pleasure. Had a blast supporting the build and animation too. This event is going to be outstanding ✨
✨ Excited to announce Tailwind Connect 2023 — the first-ever Tailwind CSS live event!
Come hang out with us for the night and see what we've been working on.
📅 June 20, 2023 @ 6PM
📍 Tapestry Hall in Cambridge, ON
🎟️ Registration opens May 17th
53
140
1K
4
0
35
There's the component gray/blue background and the background gradient on the switch thumb and then just box shadows for the rest. My personal fav trick is
#1
.
Next I'll show with and without this added detail so you can compare a more traditional switch style to these.
1
1
35
Been workin on some stuff with these amazing dudes 👀
1
0
35
Who are 3 people you’ve learned a ton from but have never gotten the opportunity to ever work with? I’ll start:
@JoshWComeau
@MaximeHeckel
@samselikoff
Legends in my book 🫡
4
0
33
1 year ago today I joined
@percy_io
with the opportunity of being their first Designer. I’ve contributed some of my career’s most rewarding work to this team, and we’re just getting started.
For fun, here’s the Percy builds page the day I started, and another pic of it today.
2
7
33
Now flip it: UI engineers capable of high polish and extremely detailed implementations look for teams with designers creating difficult, high polish, extremely detailed designs.
1
0
32
These new visuals we’re working on just keep getting better.
3
0
32
Elements with borders can utilize background-clip: padding-box to prevent the background from showing under the border. This allows the border to blend on top of the shadows as long as your shadows have a negative value of spread equal to the border width so that they overlap.
1
1
32
The past couple weeks I teamed up with the amazing
@ceciliorz
to put some new paint on our homepage. Today it’s live:
2
1
30
Made so many great memories this week while working with the Tailwind team. Met some really amazing people at the event and made some new friends.
I’m really glad to be back home with the family.
1
0
29
It’s demotivating for anything less on either side. As they challenge each other, they only get better. The output is better, the desire for what’s next gets more intense.
They compliment each other. They create pride in each other’s work. Why should they expect anything less?
1
0
28
I design for fun. I code for fun. They’re two of my favorite hobbies.
People just want to pay me to do it for them. ¯\_(ツ)_/¯
No, I'm in it for a job. I'm in it for the paycheck.
I actively avoid working with folks like this, tbh. This kind of mindset will result in that person trying to rewrite your codebase because they saw something 'innovative' on twitter
3
0
4
5
2
28