joshpuckett

@joshpuckett • 40,501 subscribers

Designing at @IterationDesign, teaching at https://t.co/Jn9brli34Y. Previously led teams at Dropbox, Wealthfront, Groupon & more.

Shorts

40k. I am grateful for each and every one of you. As a thank you, I've made 40% off for the next 40 hours. If you've heard about it or been waiting to join, now is the time!

138,408 views

are we still allowed to have fun on the internet in 2026? 🎶

382,112 views

Means & Methods is now live on A collection of practical techniques to achieve excellence in interface design, covering 100+ topics across 11 chapters, with plenty of interactive examples and code. New members welcome; enjoy!

701,083 views

When you're designing anything of even moderate interface interactivity or complexity, state machines are a great way to help you manage that. I make these all the time, and they're remarkably useful little tools.

121,681 views

As software gets easier to make, the products that stand out will be the ones crafted with uncommon care. If that's the kind of work you want to do, I'm sharing everything I know:

1,082,525 views

Here's an actual design engineering tip: Safari sucks at updating multiple WebGL video textures in the same frame, especially during interactions or animations on initial page load. To keep things buttery you'll wanna pause texture uploads during motion e.g: isMoving ? holdLastFrame() : gl.texImage2D(video)

36,171 views

Pica is a fully native app for managing your fonts on MacOS. Organize into collections, test color themes and logos, watch folders, manage what's installed, and much more. Available for free at

529,217 views

I was digging around the HyperCard 1.0.1 floppy image tonight, as one does, and found a curious private file: FONT 31756. It's a font file containing all of the glyphs for HyperCard's tool palette, likely created by Kristee Kreitman and Marge Boots (credited in the app for Graphic Art). I can't believe they were using this technique back in 1987, although it seems Bruce Tognazzini invented it with MouseText two years prior (!). I was moved, as I often am by the work of our field's forebears, so created this little tool for everyone to explore it here:

51,722 views

I think so many concepts in design need to really be felt and played with, not just shown. That's why Interface Craft is full of interactive figures that demonstrate topics. I always look forward to making them; this is one of my favorites!

138,628 views

Invoices used to be works of art. Stumbled on an old folder of references I'd collected years ago for some forgotten project. I love that it was en vogue to feature an illustration of your factory or building on them.

18,124 views

It's always a good day to iterate

19,682 views

This is Bloom, an iOS inspired pull down menu for the web. Fully configurable, interruptible, and themeable. Watch the demo and grab it below.

254,049 views

$One of my favorite details for Interface Craft is one of the least used: the invoice tool. Customers can enter the unique tax or business info they need, see what they paid in localized currency along with any discounts, and download a PDF. Thankfully Stripe makes this all fairly easy. It's something only a fraction of users see, but I think great design is sometimes about facilitating all of the edge cases to keep accounting and tax departments happy worldwide!$

One of my favorite details for Interface Craft is one of the least used: the invoice tool. Customers can enter the unique tax or business info they need, see what they paid in localized currency along with any discounts, and download a PDF. Thankfully Stripe makes this all fairly easy. It's something only a fraction of users see, but I think great design is sometimes about facilitating all of the edge cases to keep accounting and tax departments happy worldwide!

67,651 views

A few people have asked how I make these animations. The answer is it's just code and a screen recording. I’ll make little jigs like this interactive timeline to dial things in, but for me I find this is still the fastest way to create and refine exactly what I want.

53,125 views

Just added four new articles and videos to Interface Craft covering advanced animation ideas. There's also an updated DialKit skill to help you take advantage of the new Timeline feature. Available in the library now:

29,222 views

Three levels of popover interaction design:

130,597 views

Added two new Practical Demonstrations to including a deep dive on the Library Card designer and inventing a new kind of control ∞ Enjoy!

59,794 views

This is your weekly reminder: you're probably not iterating enough.

33,371 views

I wanted to give everyone a preview of what's in the Library, so I put 3 live articles on If I was smarter I'd probably have asked for your email first, but sometimes you just gotta do it for the love of the game, not growth.

42,264 views

Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. Motion makes this super easy. This helps your interfaces feel durable, snappy, and well considered.

101,682 views

Videos

LIVE

1.2k

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•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

Current Status

Live

Private Show

Join now for exclusive access

Free preview available • Premium content

Live Cam

joshpuckett

Shorts

40k. I am grateful for each and every one of you. As a thank you, I've made 40% off for the next 40 hours. If you've heard about it or been waiting to join, now is the time!

are we still allowed to have fun on the internet in 2026? 🎶

Means &amp; Methods is now live on A collection of practical techniques to achieve excellence in interface design, covering 100+ topics across 11 chapters, with plenty of interactive examples and code. New members welcome; enjoy!

When you're designing anything of even moderate interface interactivity or complexity, state machines are a great way to help you manage that. I make these all the time, and they're remarkably useful little tools.

As software gets easier to make, the products that stand out will be the ones crafted with uncommon care. If that's the kind of work you want to do, I'm sharing everything I know:

Pica is a fully native app for managing your fonts on MacOS. Organize into collections, test color themes and logos, watch folders, manage what's installed, and much more. Available for free at

I think so many concepts in design need to really be felt and played with, not just shown. That's why Interface Craft is full of interactive figures that demonstrate topics. I always look forward to making them; this is one of my favorites!

Invoices used to be works of art. Stumbled on an old folder of references I'd collected years ago for some forgotten project. I love that it was en vogue to feature an illustration of your factory or building on them.

It's always a good day to iterate

This is Bloom, an iOS inspired pull down menu for the web. Fully configurable, interruptible, and themeable. Watch the demo and grab it below.

A few people have asked how I make these animations. The answer is it's just code and a screen recording. I’ll make little jigs like this interactive timeline to dial things in, but for me I find this is still the fastest way to create and refine exactly what I want.

Just added four new articles and videos to Interface Craft covering advanced animation ideas. There's also an updated DialKit skill to help you take advantage of the new Timeline feature. Available in the library now:

Three levels of popover interaction design:

Added two new Practical Demonstrations to including a deep dive on the Library Card designer and inventing a new kind of control ∞ Enjoy!

This is your weekly reminder: you're probably not iterating enough.

I wanted to give everyone a preview of what's in the Library, so I put 3 live articles on If I was smarter I'd probably have asked for your email first, but sometimes you just gotta do it for the love of the game, not growth.

Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. Motion makes this super easy. This helps your interfaces feel durable, snappy, and well considered.

Videos

Watch Anya Live

DialKit has a new home: Give the wheel a spin to see some of the amazing and creative ways folks are using it 🎛️

Somewhere along the way, we lost the art of writing a love letter. I think we should bring it back. Letters of Love is my quick weekend project towards that end. A collection of notes across time that I hope inspires you to write to your beloved today.

I love how Jony and Flavio predicted the precise, immediate response we're seeing to the Luce. It's almost like they're good designers who know a thing or two about design! Clip from Cleo Abram's interview, a must watch.

Interface Craft is now open. It’s a growing library of resources for those who are committed to crafting experiences and interfaces with uncommon care. I hope you’ll consider joining:

DialKit now has visual timeline editing for all your fancy animations. Supports loops, groups, staggers, compound animations, and scrubbing (even with springs). I can't wait to see what ya'll create with it! npm i dialkit

To achieve excellence, you must build a culture of critique.

I truly cannot wait to share this with you all.

You need to be going rogue more as a designer.

Vibe coded this little app for my dad on the flight home yesterday. Let's him easily generate personalized stories for the kids he tutors in reading every week. Fun little ship to sneak in before the new year!

I got some questions on this, so I decided to fully embrace my content creator era with a video reaction.

Polished up Locale some more tonight: - change font size, weight, and italic - view on dark/light/image background - save fonts to a short list (per session) - inspect all styles per family - jump to alphabetical section (hit any letter key)

I can't believe over 30k of you willingly follow me on here. I am both honored and horrified. To celebrate, is 30% off for the next 30 hours. Join members from over 114 countries who are committed to growing and designing with uncommon care.

As you level up, you have to be able to navigate ambiguity. The best way to do that is to develop frameworks and conceptual models to aid you in finding clarity:

DialKit 1.3 is live! - Stable IDs for sharing DialKit state across pages - Persistent values, presets, and panel state - Programmatic getters and setters - Multiple DialKit instances now combine into one panel - Bug fixes and perf improvements › 𝚗𝚙𝚖 𝚒 𝚍𝚒𝚊𝚕𝚔𝚒𝚝

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

Tonight's refinements: - visualize custom brand colors - upload a logo to preview it next to a wordmark - focus on a single font style full screen - keyboard jumping snaps vs animated scroll Enjoy!

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

Fons is a gem, but I found it telling that not a single reply actually asked for specific feedback. Here’s what I mean:

Means & Methods is now live on A collection of practical techniques to achieve excellence in interface design, covering 100+ topics across 11 chapters, with plenty of interactive examples and code. New members welcome; enjoy!