Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,806 görüntüleme • 7 ay önce •via X (Twitter)

54 Yorum

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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.

Kyler Phillips profil fotoğrafı
Kyler Phillips7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

collapsible groups are already in there, bb!

Kyler Phillips profil fotoğrafı
Kyler Phillips7 ay önce

Ah amazing!

Eduardo Sonnino profil fotoğrafı
Eduardo Sonnino7 ay önce

Thats awesome @joshpuckett !

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

😅

Soren profil fotoğrafı
Soren7 ay önce

so cool! have to give this a try.

diip3sh profil fotoğrafı
diip3sh7 ay önce

Working on new component, will test with it

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

@yordaniawono was doing something similar!

Kyle profil fotoğrafı
Kyle7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

@chazza I hope you find it useful!

Sharif profil fotoğrafı
Sharif7 ay önce

I’ve been waiting for this!

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

let me know what you think!

William Bout profil fotoğrafı
William Bout7 ay önce

Nice pics 👀

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

Mike Lee profil fotoğrafı
Mike Lee7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

Jason Bradley profil fotoğrafı
Jason Bradley7 ay önce

Wanted to dm about it so this is clutch

Milind Mishra profil fotoğrafı
Milind Mishra7 ay önce

Love this, thanks for all the hardwork! 🙌🏻

YottaYocta profil fotoğrafı
YottaYocta7 ay önce

Game changer if we had this in svelte

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

submit a PR! Will look to add eventually.

Deep lakhani profil fotoğrafı
Deep lakhani7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

Deep lakhani profil fotoğrafı
Deep lakhani7 ay önce

It's great way to tweak with motion

Jason Anderson profil fotoğrafı
Jason Anderson7 ay önce

This looks really cool! And amazing docs

joshpuckett profil fotoğrafı
joshpuckett6 ay önce

🙏

cam profil fotoğrafı
cam7 ay önce

absolutely goated. stoked to use this

Corey O’Neal profil fotoğrafı
Corey O’Neal7 ay önce

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

aditya profil fotoğrafı
aditya7 ay önce

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 😅

Toolfolio profil fotoğrafı
Toolfolio6 ay önce

Pretty UI

Jon profil fotoğrafı
Jon6 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett6 ay önce

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

cristi profil fotoğrafı
cristi7 ay önce

exactly when needed awesome job sir

seán profil fotoğrafı
seán7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

seán profil fotoğrafı
seán7 ay önce

Sweet looking forward to diving in!

Kailash profil fotoğrafı
Kailash7 ay önce

Just saw this at interfacecraft. Trying it asap

Saura ☕ profil fotoğrafı
Saura ☕6 ay önce

OMG!

Corey Haines profil fotoğrafı
Corey Haines7 ay önce

@zstvns

BuildTradePlay profil fotoğrafı
BuildTradePlay7 ay önce

This looks great, will give it a go 👌

izaias profil fotoğrafı
izaias7 ay önce

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.

James Burke profil fotoğrafı
James Burke7 ay önce

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

James McDonald profil fotoğrafı
James McDonald6 ay önce

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

the ikid profil fotoğrafı
the ikid7 ay önce

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

joshpuckett profil fotoğrafı
joshpuckett6 ay önce

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

Igor Syvets profil fotoğrafı
Igor Syvets6 ay önce

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.

Marchen profil fotoğrafı
Marchen7 ay önce

curious how it integrates with existing animation libs

joshpuckett profil fotoğrafı
joshpuckett7 ay önce

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

Marchen profil fotoğrafı
Marchen7 ay önce

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

Ben Gold profil fotoğrafı
Ben Gold7 ay önce

This is so freaking cool.

Terry Carson profil fotoğrafı
Terry Carson7 ay önce

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

Greg Huntoon profil fotoğrafı
Greg Huntoon7 ay önce

@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.

Leo profil fotoğrafı
Leo7 ay önce

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!

Benzer Videolar

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 görüntüleme • 8 ay önce