Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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.

98,842 Aufrufe • vor 7 Monaten •via X (Twitter)

54 Kommentare

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

npm install dialkit motion or visit to see more on how you can use it. Feedback and PRs welcome!

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

Live tuning is one of those ways of working that once you learn it, you don't go back. Use it to dial in animations, layouts, effects, or anything you think of.

Profilbild von Kyler Phillips
Kyler Phillipsvor 7 Monaten

Love this, some notion of pages, accordions for subset/grouping would be killer. Thanks for working on it.

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

collapsible groups are already in there, bb!

Profilbild von Kyler Phillips
Kyler Phillipsvor 7 Monaten

Ah amazing!

Profilbild von Eduardo Sonnino
Eduardo Sonninovor 7 Monaten

Thats awesome @joshpuckett !

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

😅

Profilbild von Soren
Sorenvor 7 Monaten

so cool! have to give this a try.

Profilbild von diip3sh
diip3shvor 7 Monaten

Working on new component, will test with it

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

@yordaniawono was doing something similar!

Profilbild von Kyle
Kylevor 7 Monaten

looks lovely, thanks @chazza for telling me about this.

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

@chazza I hope you find it useful!

Profilbild von Sharif
Sharifvor 7 Monaten

I’ve been waiting for this!

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

let me know what you think!

Profilbild von William Bout
William Boutvor 7 Monaten

Nice pics 👀

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

Must have been taken by a very talented (and handsome) photographer! 😘

Profilbild von Mike Lee
Mike Leevor 7 Monaten

Very impressive work Josh! At the moment I use Leva for this use case but I will definitely try this too, my only feedback so far from the demo is that it would be awesome if we were able to drag the panel around, since I typically move this component around in my presentations while I walk through various details

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

You can specify anchor position currently, but will looking into drag anywhere positioning

Profilbild von Jason Bradley
Jason Bradleyvor 7 Monaten

Wanted to dm about it so this is clutch

Profilbild von Milind Mishra
Milind Mishravor 7 Monaten

Love this, thanks for all the hardwork! 🙌🏻

Profilbild von YottaYocta
YottaYoctavor 7 Monaten

Game changer if we had this in svelte

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

submit a PR! Will look to add eventually.

Profilbild von Deep lakhani
Deep lakhanivor 7 Monaten

It's more like tweakpane but much better thanks @joshpuckett

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

exactly. I wanted to call it "Tweak", resurrecting this project from 12 years ago, but that'd be too confusing

Profilbild von Deep lakhani
Deep lakhanivor 7 Monaten

It's great way to tweak with motion

Profilbild von Jason Anderson
Jason Andersonvor 7 Monaten

This looks really cool! And amazing docs

Profilbild von joshpuckett
joshpuckettvor 6 Monaten

🙏

Profilbild von cam
camvor 7 Monaten

absolutely goated. stoked to use this

Profilbild von Corey O’Neal
Corey O’Nealvor 7 Monaten

between this and — it's making me want to switch away from svelte

Profilbild von aditya
adityavor 7 Monaten

as an interface craft user, been using this for everything in my workflow and it's just game changer! btw raised a pr for a papercut 😅

Profilbild von Toolfolio
Toolfoliovor 6 Monaten

Pretty UI

Profilbild von Jon
Jonvor 6 Monaten

I recognize that slider from mile now 😎 That part of the course was mind-blowing to me

Profilbild von joshpuckett
joshpuckettvor 6 Monaten

Always go the extra mile 🙏 Unless you’re running a race, then you probably don’t need to.

Profilbild von cristi
cristivor 7 Monaten

exactly when needed awesome job sir

Profilbild von seán
seánvor 7 Monaten

Bought the course just last night so I could get access to this damn 😅 but i'm sure I'll still learn loads!

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

I go a lot deeper on it in Interface Craft. There are also other skills (and coming tools) that are exclusive to members.

Profilbild von seán
seánvor 7 Monaten

Sweet looking forward to diving in!

Profilbild von Kailash
Kailashvor 7 Monaten

Just saw this at interfacecraft. Trying it asap

Profilbild von Saura ☕
Saura ☕vor 7 Monaten

OMG!

Profilbild von Corey Haines
Corey Hainesvor 7 Monaten

@zstvns

Profilbild von BuildTradePlay
BuildTradePlayvor 7 Monaten

This looks great, will give it a go 👌

Profilbild von izaias
izaiasvor 7 Monaten

This feels bigger than tuning. If those parameters connect to canonical components, you are not just tweaking visuals, you are evolving the system. Code defines the primitive. Canvas shapes it in context. Prompt reasons over it. One object, multiple ways to interact.

Profilbild von James Burke
James Burkevor 7 Monaten

Nice one @joshpuckett. I will give it a whirl. Did you also see Tweakpane? Pretty cool project that is similar to yours.

Profilbild von James McDonald
James McDonaldvor 6 Monaten

You're on fire right now mate. Played around with this earlier... so good!

Profilbild von the ikid
the ikidvor 7 Monaten

Would this give context of dom to the agent ? Been using agentation for a few weeks which I like a lot but this is going much further

Profilbild von joshpuckett
joshpuckettvor 6 Monaten

Different; you design params in your code and then yes, prompt has specific context to update them. Agentation is complementary too; I use both daily

Profilbild von Igor Syvets
Igor Syvetsvor 6 Monaten

Love this. Just a couple days ago was building such panel for myself and was glad to discover a much polished version in Interface Craft! Except in mine I copy config json and not prompt.

Profilbild von Marchen
Marchenvor 7 Monaten

curious how it integrates with existing animation libs

Profilbild von joshpuckett
joshpuckettvor 7 Monaten

it makes working with @motiondotdev a dream; but works with anything.

Profilbild von Marchen
Marchenvor 7 Monaten

@motiondotdev motion compatibility is huge. makes sense it works anywhere

Profilbild von Ben Gold
Ben Goldvor 7 Monaten

This is so freaking cool.

Profilbild von Terry Carson
Terry Carsonvor 7 Monaten

Congrats on the launch! Live tuning parameters sounds like a game changer. Excited to try it out and see how it improves app workflows.

Profilbild von Greg Huntoon
Greg Huntoonvor 7 Monaten

@brettmcm This is a layer of abstraction above what we’ve been working on. Stellar concept. Love it. So well done, @joshpuckett. Gonna have to give the tool a spin.

Profilbild von Leo
Leovor 7 Monaten

already have dialkit in one of my projects. the speed of dialing in the right values without guessing is genuinely great. nice work @joshpuckett thank you!

Ähnliche Videos

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 Aufrufe • vor 8 Monaten