正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

146,984 subscribers

213,841 次观看 • 10 个月前 •via X (Twitter)

艺术科学技术

Anya Rossi• Live Now

Private livecam show

23 条评论

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie 的头像

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie10 个月前

the web needs more arcs

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ10 个月前

fr 💯

matt 的头像

matt10 个月前

you post, i bookmark. its a simple life 👨‍🌾

Danny Clayden Chambers 的头像

Danny Clayden Chambers10 个月前

Design System Inspector, Copy Designer.. and more in the way

A. 的头像

A.10 个月前

Wow 🔥

Kri3kD3v 的头像

Kri3kD3v10 个月前

So neat 🔥

Kumar Shivam 的头像

Kumar Shivam10 个月前

that's so awesome!!!

Rajesh 的头像

Rajesh10 个月前

This guy keeps cooking BANGERS! 🫡

mohamed-elhaissan 的头像

mohamed-elhaissan10 个月前

yoooooooooooooooow how can i made like this animation ? is there is any spificique library or something ?

Ali 的头像

Ali9 个月前

Do you offer a complete set of tutorials or a YouTube playlist for your animation process?

Zino 的头像

Zino10 个月前

This is honestly so cool

dev1abhi 的头像

dev1abhi10 个月前

Cool stuff

Prathmesh 的头像

Prathmesh3 个月前

This is soo cool

Michael Long 的头像

Michael Long10 个月前

bro 💀 this is nuts do you guys actually use these animations in prod?

edgard 的头像

edgard10 个月前

🤯

Sam 的头像

Sam10 个月前

Damn what. This is nuts

Bruce Dean Robinson 的头像

Bruce Dean Robinson10 个月前

sick

phobon 的头像

phobon10 个月前

I'm really into custom tools for this stuff. Seems like such fertile ground to do really amazing things 🤔

Parssa Kyanzadeh 的头像

Parssa Kyanzadeh10 个月前

very sebastian lague vibes, super sick

Ganesh Dole 的头像

Ganesh Dole10 个月前

Wow!! you have a youtube channel?

Pochi 的头像

Pochi10 个月前

This is fantastic! Turning complex, invisible logic into something you can interact with is the core of great developer tooling. It's the same philosophy we're building into Pochi: giving you an agent that can explain your entire codebase, making the whole system feel more visible and tangible.

Radhey Mugdal 的头像

Radhey Mugdal9 个月前

What tool is this ? can anyone tell me that editor like thing in right side, what's that?

Jakove_HR 的头像

Jakove_HR10 个月前

This is so sick

相关视频

SVG path animation is child’s play when you’re using a no-code tool 🎈 See for yourself 👇

SVG path animation is child’s play when you’re using a no-code tool 🎈 See for yourself 👇

SVGator

204,760 次观看 • 3 年前

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

jhey ʕ•ᴥ•ʔ

54,922 次观看 • 1 年前

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

58,449 次观看 • 10 个月前

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,045 次观看 • 9 个月前

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

171,109 次观看 • 4 个月前

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

119,817 次观看 • 10 个月前

New tools I keep coming back to. Save this 👇 - - AI prompts for animated websites - - free animated component library - - pure CSS text animations - - spring physics UI motion - - build terminal UIs with TypeScript - - name any UI element instantly - - logo, color & gradient tools - - 3D product visualizer in browser - - Claude skills for web design What am I missing?

Tran Mau Tri Tam ✪

167,346 次观看 • 2 个月前

i built the animation tool i’ve needed for years. framezero v1 is live. i call it "the whiteboard video editor" - sketch visually - add motion + animations instantly - show code w/ syntax highlighting - quick use icons + GIFS to your video - export 4k — all in your browser

i built the animation tool i’ve needed for years. framezero v1 is live. i call it "the whiteboard video editor" - sketch visually - add motion + animations instantly - show code w/ syntax highlighting - quick use icons + GIFS to your video - export 4k — all in your browser

Matt Maribojoc

70,171 次观看 • 6 个月前

And HERE IT IS GEMINI 3!!! Prompt: Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense Check it out

And HERE IT IS GEMINI 3!!! Prompt: Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense Check it out

Dorksense

1,211,040 次观看 • 10 个月前

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,623 次观看 • 4 个月前

🖌️ Quick Tip: Wispy Textures with Path Blur Learn how to breathe life into your Photoshop textures using the Path Blur tool. It’s perfect for smoky, wispy, and motion-filled effects, and is often overlooked! #PhotoshopTips #PathBlur #DigitalArt #VFX

🖌️ Quick Tip: Wispy Textures with Path Blur Learn how to breathe life into your Photoshop textures using the Path Blur tool. It’s perfect for smoky, wispy, and motion-filled effects, and is often overlooked! #PhotoshopTips #PathBlur #DigitalArt #VFX

Beyond-FX

11,046 次观看 • 1 年前

Codex can now make launch videos. Introducing the Motion MCP for Codex Connect it to motion through the MCP, give it your assets and describe what you want. Codex builds the scenes, animations and transitions directly inside motion. This video was created using the MCP 👇

Codex can now make launch videos. Introducing the Motion MCP for Codex Connect it to motion through the MCP, give it your assets and describe what you want. Codex builds the scenes, animations and transitions directly inside motion. This video was created using the MCP 👇

Motion

89,518 次观看 • 5 天前

🚨 INSANE FRONT END by Opus 4.5 Exactly the same prompt : Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense.

🚨 INSANE FRONT END by Opus 4.5 Exactly the same prompt : Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense.

Rayane

93,337 次观看 • 9 个月前

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.

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 次观看 • 7 个月前

i used AI to make an ad for an AI tool one product image. one prompt. it generated a cinematic cookie breaking apart in slow motion. no studio. no photographer. no edit. The tool is called eComrads it’s not even launched yet and it just marketed itself?

i used AI to make an ad for an AI tool one product image. one prompt. it generated a cinematic cookie breaking apart in slow motion. no studio. no photographer. no edit. The tool is called eComrads it’s not even launched yet and it just marketed itself?

K

17,387 次观看 • 6 个月前

Since I made this, I have used it for all the icons I need in Blazor. It is so nice to be able to quickly create an icon and then paste it into my solution. #dotnet #blazor #svg Tool: Project:

Since I made this, I have used it for all the icons I need in Blazor. It is so nice to be able to quickly create an icon and then paste it into my solution. #dotnet #blazor #svg Tool: Project:

Kristoffer Strube

12,800 次观看 • 2 年前

inspired by QZW Labs' raised-PCB method. the tool takes your SVG and generates the companion mold with clearance, ridges, alignment spikes — the whole thing. free on itch. This is what happens when creative people can't find work. Don't encourage it :P

inspired by QZW Labs' raised-PCB method. the tool takes your SVG and generates the companion mold with clearance, ridges, alignment spikes — the whole thing. free on itch. This is what happens when creative people can't find work. Don't encourage it :P

CASTPIXEL🏳️‍⚧️ 🇵🇸🍉

23,183 次观看 • 7 个月前

Thoughts on transferable skills. I was surprised reading the comments to Riley’s question about best UI animation tool for web. To anyone interested in diving into motion design I would strongly recommend - aim to become a motion expert, not Jitter/Rive/Lottie specialist. If you start from the foundations, jumping into any animation tool will feel like a walk in the park. Keyframes, easing functions, transformations - same concepts are shared between all of them. Getting to know the foundations on the web means starting with CSS, Tailwind or React Motion. I’m often creating small motion concepts in Figma (see video) and then recreating them manually in code. Any language, it doesn’t matter because principles are the same. I recently made the switch to Swift and built a small animation tool for myself (see video) that I’ll discard after I’m done with the motion. This level of comfortableness with motion gives you unmatched flexibility. From that point, tools are just interfaces for expressing something you already deeply understand. This is not about performance or technical optimizations (Lottie files can outperform CSS equivalents), tools mentioned above really are great - it’s about developing transferable creative skill that lets you think across any medium, platform or tool.

Thoughts on transferable skills. I was surprised reading the comments to Riley’s question about best UI animation tool for web. To anyone interested in diving into motion design I would strongly recommend - aim to become a motion expert, not Jitter/Rive/Lottie specialist. If you start from the foundations, jumping into any animation tool will feel like a walk in the park. Keyframes, easing functions, transformations - same concepts are shared between all of them. Getting to know the foundations on the web means starting with CSS, Tailwind or React Motion. I’m often creating small motion concepts in Figma (see video) and then recreating them manually in code. Any language, it doesn’t matter because principles are the same. I recently made the switch to Swift and built a small animation tool for myself (see video) that I’ll discard after I’m done with the motion. This level of comfortableness with motion gives you unmatched flexibility. From that point, tools are just interfaces for expressing something you already deeply understand. This is not about performance or technical optimizations (Lottie files can outperform CSS equivalents), tools mentioned above really are great - it’s about developing transferable creative skill that lets you think across any medium, platform or tool.

Natko Hasic

64,045 次观看 • 1 年前