Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,793 subscribers

93,312 görüntüleme • 2 ay önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

52 Yorum

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

full cross framework support here too across react, vue, solid, and svelte. tons of bug fixes as well with this 1.4 release. full docs on github:

Jason Marder profil fotoğrafı
Jason Marder2 ay önce

@lochieaxon

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

@lochieaxon Hahaha this is amazing 🤣🤣

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie profil fotoğrafı
؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie2 ay önce

hell yeah dawg

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Wouldn’t be nearly as good without your feedback and collab! 🙇

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie profil fotoğrafı
؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie2 ay önce

🥰

jerrywang profil fotoğrafı
jerrywang2 ay önce

crazyyyy!!! i was literally working on a project and wondering "what if dialkit can fine-tune animation"

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

your wish is my command, hope you find it helpful!

Solutionb profil fotoğrafı
Solutionb2 ay önce

DialKit 🐐 Figma motion now has competition

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

i think they're additive, not competitive. different intents and purposes. will always love the @figma team 🫶

Josh Millgate profil fotoğrafı
Josh Millgate2 ay önce

Awesome work!

Hey Detya profil fotoğrafı
Hey Detya2 ay önce

oh this is exactly what i've been waiting for, the scrubbing with springs is gonna be game changing

Luca profil fotoğrafı
Luca2 ay önce

@svlleyy HUGE IF TRUE (it is in fact true)

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

@svlleyy many are saying!

matt profil fotoğrafı
matt2 ay önce

@lochieaxon holy cow dude this incredible

Manu Arora profil fotoğrafı
Manu Arora2 ay önce

HE STRIKES AGAIN!!! 💯

siddharth ✢ profil fotoğrafı
siddharth ✢2 ay önce

the gift that keeps on giving 🥹

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Gifts is one of my love languages, after all

Steve Lauda profil fotoğrafı
Steve Lauda2 ay önce

Another blessing from Josh, thank you!

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Here to serve!

Farhan profil fotoğrafı
Farhan2 ay önce

GOAT! thanks josh!

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Gochu boo 💪

Noman profil fotoğrafı
Noman2 ay önce

Incredible work!

Pritam Paul profil fotoğrafı
Pritam Paul2 ay önce

@svlleyy 🫡

Ty Drake profil fotoğrafı
Ty Drake2 ay önce

huge update! can’t wait to try

dicky profil fotoğrafı
dicky2 ay önce

now i feel like editing a video with effects but directly on the web, shhh thanks josh

Morgan profil fotoğrafı
Morgan2 ay önce

sickkkkkk

mekwek profil fotoğrafı
mekwek2 ay önce

@lochieaxon mamma mia

David McGillivray profil fotoğrafı
David McGillivray2 ay önce

incredible ✨

Daniel Destefanis profil fotoğrafı
Daniel Destefanis2 ay önce

@lochieaxon Excellent work!!

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

@lochieaxon Ty sir!

Nem Builds profil fotoğrafı
Nem Builds2 ay önce

@jamesm Love it! Testing it out tomorrow, will share my 2-cents.

Taufiq Rahman profil fotoğrafı
Taufiq Rahman2 ay önce

Looking really cool. Thanks Josh!

sanchezdesign.me profil fotoğrafı
sanchezdesign.me2 ay önce

🐐🐐🐐

Steve profil fotoğrafı
Steve2 ay önce

Figma Motion team should learn from your incredible UX work here. Keep it coming Josh!! 💛

William Hutter profil fotoğrafı
William Hutter2 ay önce

Does dialkit work with simple html and JavaScript files? Or does it only work on react apps? I build primarily Shopify themes and would love to see it at work on my section animations

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

I don’t yet have a raw version, but open a GitHub issue for it and I’ll consider!

Zantos profil fotoğrafı
Zantos2 ay önce

This is so cool. Cant wait

Ryan Furrer @ CYC profil fotoğrafı
Ryan Furrer @ CYC2 ay önce

dude doesn't miss 🐐

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Aim high, miss high!

Ryan Furrer @ CYC profil fotoğrafı
Ryan Furrer @ CYC2 ay önce

I've yet to see you miss 🎯 ty for doing what you do

Greg profil fotoğrafı
Greg2 ay önce

Brilliant! Does it also support ?

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Conceptually yes! I’ve not tried it, but DialKit handles the parameter updating, and you can put those values anywhere you want

Austin Atkinson profil fotoğrafı
Austin Atkinson2 ay önce

COOK

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

💅👨‍🍳

Micka profil fotoğrafı
Micka2 ay önce

@lochieaxon Oh boy

Nabil profil fotoğrafı
Nabil2 ay önce

man! this is gooood

Orezi Mena profil fotoğrafı
Orezi Mena2 ay önce

Too powerful

David Elgena profil fotoğrafı
David Elgena2 ay önce

Brother.., it’s beautiful 😍

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Thank you sir!

Tom Krcha profil fotoğrafı
Tom Krcha2 ay önce

Looks great!

joshpuckett profil fotoğrafı
joshpuckett2 ay önce

Cheers Tom!

Benzer Videolar

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

74,090 görüntüleme • 18 gün önce

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

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

237,395 görüntüleme • 24 gün önce

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

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

✨ 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 görüntüleme • 2 yıl önce

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

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 görüntüleme • 1 yıl önce

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

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

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

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

216,272 görüntüleme • 3 ay önce

Your coding agent can make animations like this now. I released the skill for drawing them in JavaScript, with 4 visual styles and examples to start from. This 1,5 minute film was made using it. Pick a subject and try it:
1:36

Your coding agent can make animations like this now. I released the skill for drawing them in JavaScript, with 4 visual styles and examples to start from. This 1,5 minute film was made using it. Pick a subject and try it:

Alexey Fateev

44,765 görüntüleme • 7 gün önce

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 görüntüleme • 1 yıl önce

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

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

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! 🎨

178,434 görüntüleme • 8 gün önce

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