Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

How does Stripe do that really cool morphing animation with their menus? See how to easily replicate it with React, Tailwind, and AI:

Steve (Builder.io)

133,918 subscribers

147,379 views • 3 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Comments

Steve (Builder.io)3 years ago

Full tutorial with links in my latest blog post:

Ham Imports3 years ago

Can't help thinking of this:

Ward Peeters3 years ago

Nice one!

Rajat Saxena3 years ago

This is awesome. Never knew we have achieved this level of AI interactivity. The demo looks 👌.

Ogun3 years ago

Always helpful 👏👏👏

Marshall Brooke 👍3 years ago

Fantastic, tip of the hat sir.

Mohamed AbdElgwad3 years ago

I dont understand the need to store the height in a state. is it because an absolute div is inside another absolute div, we cant set the height to auto ?

lux3 years ago

Stripe design has always been 🔥🔥

Damu3 years ago

@apiKeyQqari

CODE28 • Development Community3 years ago

@Steve8708 I'm not sure I'll ever use it, but thanks anyway😉 that was interesting😎

Related Videos

How to do the morphing text animation!

How to do the morphing text animation!

xarr

46,638 views • 1 year ago

WOW! 🤯 In just 2 hours, I built an entire app from scratch that does interior design using AI. No coding, just by prompting step by step. It has: - authentication, db and storage with Supabase - payments with Stripe for credits - prompt enhancement with OpenAI - interior design with Replicate I wanted to see how far I could get by only using AI tools, and I'm honestly mind-blown! 🤯

WOW! 🤯 In just 2 hours, I built an entire app from scratch that does interior design using AI. No coding, just by prompting step by step. It has: - authentication, db and storage with Supabase - payments with Stripe for credits - prompt enhancement with OpenAI - interior design with Replicate I wanted to see how far I could get by only using AI tools, and I'm honestly mind-blown! 🤯

Florin Pop 👨🏻‍💻

98,856 views • 1 year ago

How brother's react when they see their junior sister with a man, vs how they react when they see their junior brother with a lady 😂

How brother's react when they see their junior sister with a man, vs how they react when they see their junior brother with a lady 😂

OMAR👑

380,754 views • 7 months ago

Does this woman really think she can do this with Kwadwo Sheldon? 😂 Okay, let’s see how it goes

Does this woman really think she can do this with Kwadwo Sheldon? 😂 Okay, let’s see how it goes

Beno SarkCess

248,984 views • 1 year ago

The Wolf is out. Good to have friends that know how to do this cool shit with AI

The Wolf is out. Good to have friends that know how to do this cool shit with AI

Wolf (Rob) F.

27,076 views • 8 months ago

i think what sucks the most about the usage of ai in txt content is that it kills the whole idea of them and how they built their concepts . one of the reasons txt is so loved is because of how artistic and creative their aesthetic is And you cannot replicate it with soulless ai

i think what sucks the most about the usage of ai in txt content is that it kills the whole idea of them and how they built their concepts . one of the reasons txt is so loved is because of how artistic and creative their aesthetic is And you cannot replicate it with soulless ai

marcie

27,616 views • 7 months ago

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

daniel petho

188,966 views • 1 year ago

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

text-to-svg/icon Figma plugin built with Next.js, shadcn UI, and Tailwind CSS + Replicate API! It's open source, and I hope it helps anyone looking to build their own plugin! 🤠 Github:

Lichin Lin

25,219 views • 1 year ago

Google Veo 2 is fantastic when it comes to physics. I put it to the test with a range of outputs to see how liquids and solids would react with each other. What do you think?

Google Veo 2 is fantastic when it comes to physics. I put it to the test with a range of outputs to see how liquids and solids would react with each other. What do you think?

Jerrod Lew

230,909 views • 1 year ago

This is my new course on building your dream apps with Claude AI I’m detailing all my tips and techniques that went into making my video editor and svg pattern builder. Everything from building with Cursor, ideation, generating UI, prompting to full stack web dev with React, Tailwind, Firebase, Stripe, etc. I’m recording the whole course with my video editor.

This is my new course on building your dream apps with Claude AI I’m detailing all my tips and techniques that went into making my video editor and svg pattern builder. Everything from building with Cursor, ideation, generating UI, prompting to full stack web dev with React, Tailwind, Firebase, Stripe, etc. I’m recording the whole course with my video editor.

Meng To

118,243 views • 2 years ago

"I think I'll be an old man before I really realize how special and how cool that was to do with him." Parker McCollum relives performing alongside George Strait at Kyle Field with Marty Smith and Ryan McGee ⤵️

"I think I'll be an old man before I really realize how special and how cool that was to do with him." Parker McCollum relives performing alongside George Strait at Kyle Field with Marty Smith and Ryan McGee ⤵️

SEC Network

68,034 views • 1 year ago

I'm totally rethinking how I prototype with AI after seeing how Atlassian's design system team does it their approach to "templates" and "recipes" in Figma Make is pretty genius 👇

I'm totally rethinking how I prototype with AI after seeing how Atlassian's design system team does it their approach to "templates" and "recipes" in Figma Make is pretty genius 👇

Ridd 🤿

86,137 views • 9 months ago

It’s really cool how AI can bring imagination to life 😍 Made this with Kling 2.6 Kling AI, featuring my Chimpers ✨

It’s really cool how AI can bring imagination to life 😍 Made this with Kling 2.6 Kling AI, featuring my Chimpers ✨

RafaSimon

34,253 views • 9 months ago

Stopped by @Stripe and Gus Nguyen showed me how their new plugin works with Cursor. You can integrate Stripe in one min!

Stopped by @Stripe and Gus Nguyen showed me how their new plugin works with Cursor. You can integrate Stripe in one min!

edwin

45,750 views • 8 months ago

Hannity: How does it sound: The Briefing with Karoline Leavitt. How do you like the sound of that?

Hannity: How does it sound: The Briefing with Karoline Leavitt. How do you like the sound of that?

Acyn

271,432 views • 1 month ago

How does voice AI correctly replicate laughs, signs, and whispers? Our research team developed NVAlign, a new training method that uses a second model to listen for sounds like laughter and feed that feedback into speech-generation training. Here’s how it works. 👇

How does voice AI correctly replicate laughs, signs, and whispers? Our research team developed NVAlign, a new training method that uses a second model to listen for sounds like laughter and feed that feedback into speech-generation training. Here’s how it works. 👇

Bland

394,668 views • 16 days ago

found a geometry dash bootleg that came up with a really cool idea, and then proceeded to do nothing interesting with it

found a geometry dash bootleg that came up with a really cool idea, and then proceeded to do nothing interesting with it

Colon :🦊:

42,757 views • 2 years ago