Loading video...

Video Failed to Load

Go Home

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

joshpuckett's profile picture

joshpuckett

41,201 subscribers

93,016 views • 1 month ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

I'm excited to share DialKit 2.0 with you. This release brings several new control types, support for vanilla JS/HTML with no dependencies, and many bug fixes and performance improvements. `npm i dialkit` or learn more at
0:24

I'm excited to share DialKit 2.0 with you. This release brings several new control types, support for vanilla JS/HTML with no dependencies, and many bug fixes and performance improvements. `npm i dialkit` or learn more at

joshpuckett

72,802 views • 11 days ago

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 › 𝚗𝚙𝚖 𝚒 𝚍𝚒𝚊𝚕𝚔𝚒𝚝
0:21

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 › 𝚗𝚙𝚖 𝚒 𝚍𝚒𝚊𝚕𝚔𝚒𝚝

joshpuckett

43,002 views • 2 months ago

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

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

joshpuckett

234,983 views • 17 days ago

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.
0:23

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.

joshpuckett

98,806 views • 7 months ago

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!
0:30

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!

joshpuckett

82,659 views • 8 months ago

✨ Prism is now available for everyone! It's been incredible to uncover the possibilities with you all, and we can't wait to see what you create next:
0:40

✨ Prism is now available for everyone! It's been incredible to uncover the possibilities with you all, and we can't wait to see what you create next:

Fable

21,035 views • 2 years ago

We all want that fancy portfolio, animations, typography, GSAP effects. I had that fancy portfolio, animations, typography, GSAP effects. I even got an Honorable Mention award. But now, I need something different. Something simpler. Easier to update and built to convert better. So I redesigned my portfolio. A much cleaner, more focused version to showcase my work.👇
1:29

We all want that fancy portfolio, animations, typography, GSAP effects. I had that fancy portfolio, animations, typography, GSAP effects. I even got an Honorable Mention award. But now, I need something different. Something simpler. Easier to update and built to convert better. So I redesigned my portfolio. A much cleaner, more focused version to showcase my work.👇

Stephen

21,750 views • 5 months ago

The quote "The truth is what you see with your eyes, not what you hear" has stuck with me for SO LONG, I can't wait to see what the meaning of it is, or if we've been deceived this entire time
0:25

The quote "The truth is what you see with your eyes, not what you hear" has stuck with me for SO LONG, I can't wait to see what the meaning of it is, or if we've been deceived this entire time

Chain 🗝️🌈

25,831 views • 1 year ago

OMG I finally did it!! 😃 I always wanted to create these fancy WebGL animations for fullPage.js, and today they are finally here!! 60+ advanced animations available! (If you know any other cool ones, let me know and I'll try to add them too)
0:50

OMG I finally did it!! 😃 I always wanted to create these fancy WebGL animations for fullPage.js, and today they are finally here!! 60+ advanced animations available! (If you know any other cool ones, let me know and I'll try to add them too)

Álvaro Trigo 🐦🔥

26,731 views • 6 months ago

I truly cannot wait to share this with you all.
0:20

I truly cannot wait to share this with you all.

joshpuckett

200,636 views • 7 months ago

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.
0:28

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.

joshpuckett

105,097 views • 7 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

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

215,489 views • 3 months ago

Quick 2024 recap. This year has been amazing. I'm super grateful for all the support and I can't wait to see what 2025 has to offer.
0:44

Quick 2024 recap. This year has been amazing. I'm super grateful for all the support and I can't wait to see what 2025 has to offer.

Jakub Krehel

43,686 views • 1 year ago

"I can't wait for June 15... I can't wait to see it, but I'm just gonna be happy when this is all over and done with." Ariel Helwani explains some of the #UFCWhiteHouse fatigue he's having.
2:14

"I can't wait for June 15... I can't wait to see it, but I'm just gonna be happy when this is all over and done with." Ariel Helwani explains some of the #UFCWhiteHouse fatigue he's having.

Uncrowned

35,688 views • 3 months ago

NPM superpowers unlocked 🔓 Base44 now supports NPM- GSAP, Chart.js, Radix UI, Day.js, FilePond, React Player, use-gesture and many more! You get advanced 3D, motion, smarter UX, richer dashboards, file uploads, image editing, video players, all from a prompt. Show us what you build with your new NPM superpowers 🪄 We're dropping examples in the comments:
0:29

NPM superpowers unlocked 🔓 Base44 now supports NPM- GSAP, Chart.js, Radix UI, Day.js, FilePond, React Player, use-gesture and many more! You get advanced 3D, motion, smarter UX, richer dashboards, file uploads, image editing, video players, all from a prompt. Show us what you build with your new NPM superpowers 🪄 We're dropping examples in the comments:

Base44

11,729 views • 9 months ago

N64 and PSX artists rejoice - my vertex/normal painter tool POLYPAINT is now (finally) live on the Unity Asset Store!! 🎊 Grab it 30% off for the launch week - I can't wait to see what you all do with it!
1:08

N64 and PSX artists rejoice - my vertex/normal painter tool POLYPAINT is now (finally) live on the Unity Asset Store!! 🎊 Grab it 30% off for the launch week - I can't wait to see what you all do with it!

SULLY - POLYPAINT out now! 🎨

161,094 views • 1 day ago

Just wanted to share a couple color combos. I can't wait to see what you all come up with! #warframe
0:21

Just wanted to share a couple color combos. I can't wait to see what you all come up with! #warframe

Mike Skyers

34,552 views • 6 months ago

Astra is a monster at 3D, it one shotted this model of Chelsea FC's stadium, Stamford Bridge. I can't wait to see the games and models you all create with this model.
0:47

Astra is a monster at 3D, it one shotted this model of Chelsea FC's stadium, Stamford Bridge. I can't wait to see the games and models you all create with this model.

Ty

190,141 views • 13 days ago