Loading video...

Video Failed to Load

Go Home

I built a tiny icon-morphing component with AlpineJS + Blade! You literally just pass in two SVGs and it handles the morphing for you. Could be on hover or whatever other trigger/event is needed Super simple to use, but it makes interactions feel so much more polished.

LiamHammett's profile picture

Liam Hammett

3,351 subscribers

13,718 views • 5 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

introducing: gooey effect component for Framer use this component to add morphing animations that blend and flow across your site for a fun, smooth effect. comment "GOOEY" and i’ll send you the component :)
0:11

introducing: gooey effect component for Framer use this component to add morphing animations that blend and flow across your site for a fun, smooth effect. comment "GOOEY" and i’ll send you the component :)

Framer University

25,532 views • 1 year ago

A new combobox component is coming to Dub.co soon: ◆ Keyboard-friendly ◆ Blazing fast ◆ Smooth height-aware morphing ◆ Multi/single-select support Built with CMDK + Radix by WorkOS Popover by the 🐐 Tim Wilson and it will be fully open-source 🤩
0:12

A new combobox component is coming to Dub.co soon: ◆ Keyboard-friendly ◆ Blazing fast ◆ Smooth height-aware morphing ◆ Multi/single-select support Built with CMDK + Radix by WorkOS Popover by the 🐐 Tim Wilson and it will be fully open-source 🤩

Steven Tey

35,271 views • 1 year ago

Adjust your drawings as much as you want with the Transform tool! Whether you want to fix a sketch or a finished illustration, use the Transform tool without needing to redraw. You can use it in both Studio and Simple Mode, so be sure to give it a try. Learn more here ↓ #clipstudio
0:12

Adjust your drawings as much as you want with the Transform tool! Whether you want to fix a sketch or a finished illustration, use the Transform tool without needing to redraw. You can use it in both Studio and Simple Mode, so be sure to give it a try. Learn more here ↓ #clipstudio

CLIP STUDIO PAINT

28,137 views • 6 months ago

this is how it looks in blender so you can see the actual twist bones working! i know some just use 1 twist bone for this but i found it much more natural to use 2 with different influence 🙂‍↕️
0:16

this is how it looks in blender so you can see the actual twist bones working! i know some just use 1 twist bone for this but i found it much more natural to use 2 with different influence 🙂‍↕️

𝗞𝗔𝗥𝗜𝗛𝗔 🌘🍀 3D VRoid Artist ☻

42,159 views • 8 months ago

A portable drill is a much more diverse tool than you think. Apart from drilling holes, you could use it as a screwdriver, hammer or whatever this is…
0:14

A portable drill is a much more diverse tool than you think. Apart from drilling holes, you could use it as a screwdriver, hammer or whatever this is…

Theogcfu

36,923 views • 3 months ago

I don’t have to tell you what is going to happen with this horse and these bull cows…👺You probably feel more sorry for the horse than for the cows. It makes you a #speciesist You fail to put yourself in their place. For a cow it is just as awful to be slaughtered as it is for a horse. #StopYourKillings #LiveVegan try to be decent ✌️
0:14

I don’t have to tell you what is going to happen with this horse and these bull cows…👺You probably feel more sorry for the horse than for the cows. It makes you a #speciesist You fail to put yourself in their place. For a cow it is just as awful to be slaughtered as it is for a horse. #StopYourKillings #LiveVegan try to be decent ✌️

Marc Pieterse (⧖) @marcpieterse.bsky.social

43,644 views • 4 months ago

EmoteLab launched today! Thanks so much to 0x4682B4💾 for this incredible software 💕 But more than just emotes, did you know you can also use it to make a simple, customizable GIFTuber? All you have to do is pick two similar poses (in my case, I chose Drink for 'mouth closed' and Thumbs Up for 'mouth open'), export them as 500 x 500px GIFs and then import them into Veadotube! Super simple way to have a cute GIFTuber for collabs or when your PC starts complaining heheh. Have fun! #EmoteLab
0:10

EmoteLab launched today! Thanks so much to 0x4682B4💾 for this incredible software 💕 But more than just emotes, did you know you can also use it to make a simple, customizable GIFTuber? All you have to do is pick two similar poses (in my case, I chose Drink for 'mouth closed' and Thumbs Up for 'mouth open'), export them as 500 x 500px GIFs and then import them into Veadotube! Super simple way to have a cute GIFTuber for collabs or when your PC starts complaining heheh. Have fun! #EmoteLab

Nyxiabel 🎀 Designer

32,693 views • 4 months ago

I just built a Mac app I use literally every day It’s a shelf that stores anything you copy on your Mac or iPhone And, it lives in your Mac’s notch :)
0:10

I just built a Mac app I use literally every day It’s a shelf that stores anything you copy on your Mac or iPhone And, it lives in your Mac’s notch :)

alec

15,579 views • 1 month ago

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️
0:19

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️

Una 🇺🇦

38,653 views • 6 months ago

I saw an exploit where you could see players through smoke with NVIDIA Game Filters. I played with the filter settings and found a much better setting. Not sharing it here for obvious reasons however this is just ridiculous. CS2 You need to use -allow_third_party_software to use it. A temporary fix could be to disable MM queue for users with this launch option.
0:18

I saw an exploit where you could see players through smoke with NVIDIA Game Filters. I played with the filter settings and found a much better setting. Not sharing it here for obvious reasons however this is just ridiculous. CS2 You need to use -allow_third_party_software to use it. A temporary fix could be to disable MM queue for users with this launch option.

Thour

473,682 views • 2 years ago

I don't think there's a single terminal ux that handles agent swarms well With slate, you can literally use Opus 4.6 and GPT 5.4 at the exact same time But making it intuitive took a ton of work So heres a thread on how it works and how to actually use it 🧵
0:11

I don't think there's a single terminal ux that handles agent swarms well With slate, you can literally use Opus 4.6 and GPT 5.4 at the exact same time But making it intuitive took a ton of work So heres a thread on how it works and how to actually use it 🧵

akira

139,114 views • 3 months ago

Sometimes love is not quiet or polished. Sometimes it is loud, confused, and heavy on the chest. Sometimes I get upset, sometimes my words trip over my feelings, but none of that touches the truth I carry. I love you. Not the easy version. Not only the smiles and soft moments. I love you in the mess, in the misunderstandings, when emotions collide and nothing feels simple. Getting mad is not wanting to leave. It is proof that I care enough to feel. It means you matter more than my pride, more than silence, more than walking away. I do not want to lose you. I want to grow with you. To learn each other gently, forgive quicker, and hold tighter when things get rough. Love is not about never fighting. It is about choosing each other after. And I choose you. Again, and again, and always.
0:15

Sometimes love is not quiet or polished. Sometimes it is loud, confused, and heavy on the chest. Sometimes I get upset, sometimes my words trip over my feelings, but none of that touches the truth I carry. I love you. Not the easy version. Not only the smiles and soft moments. I love you in the mess, in the misunderstandings, when emotions collide and nothing feels simple. Getting mad is not wanting to leave. It is proof that I care enough to feel. It means you matter more than my pride, more than silence, more than walking away. I do not want to lose you. I want to grow with you. To learn each other gently, forgive quicker, and hold tighter when things get rough. Love is not about never fighting. It is about choosing each other after. And I choose you. Again, and again, and always.

Poetry.

89,409 views • 5 months ago

My goal is simple: build the best knife I can, using the highest-grade materials and the cleanest fit and finish I can achieve. They’re built to be used, but just nice enough to make you feel a little guilty doing it. 🤙🏻 🇺🇸
0:13

My goal is simple: build the best knife I can, using the highest-grade materials and the cleanest fit and finish I can achieve. They’re built to be used, but just nice enough to make you feel a little guilty doing it. 🤙🏻 🇺🇸

Compliance Edge Knives

27,009 views • 4 months ago

‼️As a non-pilot, I’m having a hard time understanding why it needed to be so close to the other pilot. Is this just a dumb move, or was there some other factor at play that makes sense to you guys?
0:19

‼️As a non-pilot, I’m having a hard time understanding why it needed to be so close to the other pilot. Is this just a dumb move, or was there some other factor at play that makes sense to you guys?

Defense Intelligence

12,106 views • 11 months ago

YOU can't destroy something that was never yours to begin with. Englot didn't happen because of an organization, a plan, or a marketing move. It happened because two people genuinely liked each other. Because two women actually fell for each other... in real time, in real life. We watched it unfold. A straight girl, in front of the entire world, slowly realizing she had fallen for a woman. For Engfa. We saw it. They lived it. And once something that real exists, you can't undo it. You can't rewrite it. And you definitely can't take credit for it. That's why Englot can't be ruined. Because it was never built on control, contracts, or strategy. It was built on honesty, on feelings they didn't even know how to hide. From two women who weren't afraid to feel... And that's why, no matter what, Englot will always be Englot. Englot will never die. Just like their feelings for each other never died...
0:14

YOU can't destroy something that was never yours to begin with. Englot didn't happen because of an organization, a plan, or a marketing move. It happened because two people genuinely liked each other. Because two women actually fell for each other... in real time, in real life. We watched it unfold. A straight girl, in front of the entire world, slowly realizing she had fallen for a woman. For Engfa. We saw it. They lived it. And once something that real exists, you can't undo it. You can't rewrite it. And you definitely can't take credit for it. That's why Englot can't be ruined. Because it was never built on control, contracts, or strategy. It was built on honesty, on feelings they didn't even know how to hide. From two women who weren't afraid to feel... And that's why, no matter what, Englot will always be Englot. Englot will never die. Just like their feelings for each other never died...

Shlohmo

31,828 views • 5 months ago

"Can I pass a zod schema from a server to a client component as a prop?" Nope, zod schema is not serializable. But you can re-import it in the client component.
0:19

"Can I pass a zod schema from a server to a client component as a prop?" Nope, zod schema is not serializable. But you can re-import it in the client component.

Alex Sidorenko

35,064 views • 1 year ago

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 views • 1 month ago

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒
0:16

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒

FHILY👑

77,374 views • 1 month ago

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒
0:14

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒

FHILY👑

75,645 views • 1 month ago