§ 01 · The Hook
The bait, then the rug-pull.
Ras Mic opens by demolishing the proverb — yes, people *do* judge an app by its cover — then promises nine free component libraries he’s sourced for you. The whole video is the listicle, but the real payload is the last 90 seconds: a tiny method for letting AI extract a full design system from any one component you like.
What the video promised.
stated at 00:10“I'm gonna be sharing with you some fire component and template libraries that I've sourced completely for free for you... All of these are free. All of these are fire, and all of these are easy to use in your site. Thanks to AI.”delivered at 10:42
Where the time goes.
00:00 – 00:47
01 · Cold open + promise
Reverses the 'don't judge a book by its cover' saying, name-drops his prior banger UI videos, promises nine free, AI-installable libraries.
00:47 – 01:32
02 · 1. Liquid Metal
Animated liquid-metal border component. 'Feels so premium I expect $500/mo, anything less is a scam.' Use with caution and wisdom.
01:32 – 02:31
03 · 2. Style UI — Axis + Notia (his team's free templates)
Two free templates from his own team's library. Axis = B2B SaaS template (logos, pricing, cards). Notia = consumer-app template, originally purple, now also forest green / sunny orange because 'purple got ruined by AI.'
02:31 – 02:36
04 · 3. Skiper UI — intro
Pivots to Skiper UI before cutting into the CodeRabbit sponsor.
02:36 – 04:07
05 · Sponsor: CodeRabbit CLI
Jensen Huang / NVIDIA name-drop, then demo of running `coderabbit` in a feature branch to get an AI review BEFORE opening the PR. Copy the suggested-fix prompt into Claude Code.
04:07 – 05:36
06 · 3. Skiper UI — components
Image hover/glide cards (horizontal + vertical), scroll-like-Star-Wars-credits animations, stacking cards, card-swipe carousel, and the killer: an inline video player that expands on click.
05:36 – 06:56
07 · 4. Ali Mam library
Free shader hero backgrounds, bento grids, iPhone/iPad device frames, page patterns, logo reels, typewriter effect, and an Apple-Intelligence-style glow component.
06:56 – 07:26
08 · 5. Watermelon UI
Gauge component + Apple-style onboarding springy click + card swiper. 'Feels like you're using an iPhone.'
07:26 – 08:44
09 · 6. Cult UI
Colorful hero sections, the standout 'family button' that nicely animates, and a creative light-board component. Pro tier exists; free pieces still strong.
08:44 – 09:22
10 · 7. Dot-matrix loaders
Animated loader pack — 'make loading great again' — drop-in code per loader, AI agent installs it.
09:22 – 10:42
11 · 8. Componentry.fun — keyboard, flight tracker, GitHub heatmap + Balloons.js detour
Tactile Mac keyboard component with downloadable keypress audio (he wired it into his own Convex 'Ship' feature-voting app), flight-status tracker, GitHub-style activity tracker. Side detour: he demos balloons + 'Here Comes the Money' on the Ship spin-the-wheel, credits Balloons.js for the floating-balloon effect.
10:42 – 11:03
12 · 9. Recap + transition to the method
Recap: nine libraries, all free. Pivots to the real payoff — how to USE these without your site looking like a mismatched Frankenstein.
11:03 – 12:29
13 · Method: extract a design system from one component
Pulls up Excalidraw mid-video. The trick: download your favorite component, then prompt the AI agent: 'Extract the design system from this component and make the rest of my app match.' AI becomes the consistency engine; you only have to pick the seed.
Visual structure at a glance.
Named ideas worth stealing.
11:03concept
Design-System-From-One-Component method
Pick the single component whose vibe you love most (liquid metal, glassy, whatever). Download it into your codebase. Then tell the AI agent: 'Extract the design system from this component and make the rest of my app site look the exact same.' Use the component as the seed; AI propagates the visual language.
Steal forAny indie-dev sales page or app shell where you want a cohesive look without hiring a designer.
00:47list
The 9-library swipe (free UI source-of-truth)
- Liquid Metal (liquid-metal border)
- Style UI — Axis (B2B template) + Notia (consumer template)
- Skiper UI (hover/glide cards, stacking cards, expanding video player)
- Ali Mam library (shaders, bento, device frames, Apple-Intelligence glow)
- Watermelon UI (gauge + Apple-style onboarding)
- Cult UI (colorful heroes + family button + light-board)
- Dot-matrix loaders (loader pack)
- Componentry.fun (Mac keyboard w/ sound, flight tracker, GitHub heatmap)
- Balloons.js (one-line celebration balloons)
Nine free sources to swipe modern, app-feel components from — all installable by handing the CLI install URL to an AI agent.
Steal forBuilding any landing page, app shell, or sales page without paying a designer or buying a template.
Lines you could clip.
01:00
“I click this and I expect the pro plan to be $500 a month. In fact, if it's anything lower than $500 a month, I actually think it's a scam.”
02:08
“Notia originally was actually purple before purple got ruined by AI.”
07:56
“Let's not all generate the same slop. Let's add some sauce, some feng shui to our apps.”
08:04
“Everyone can ship nowadays, but I am telling you, it is so easy to stand out. Just a little bit of quality, just a little bit of time investment, and your app'll stand out like no other.”
12:03
“If AI is your foundation, it becomes a problem. But if you use AI to build on that foundation, I think it works out great.”
12:20
“There's no excuse to not have a beautiful site.”
How they spent the runtime.
Hook length47s
Info densityhigh
Filler8%
Sponsors
- 02:36–04:07 · CodeRabbit
Things they pointed at.
00:47toolLiquid Metal (animated metal border component)
02:36toolCodeRabbit (AI code-review CLI, sponsor)
04:07toolSkiper UI
05:36toolAli Mam component library
06:56toolWatermelon UI
07:26toolCult UI
08:44toolDot-matrix loaders
09:22toolComponentry.fun (Mac keyboard, flight tracker, GitHub heatmap)
09:51toolConvex — used in his 'Ship' feature-voting app demo
09:51productShip (his Convex feature-voting demo app)
09:55toolBalloons.js (one-line balloon celebration effect)
11:03toolExcalidraw (used mid-video to whiteboard the method)
How they asked for the click.
12:20subscribe
“Make sure to like, comment, subscribe. Hit the notification bell. Hope to see you in the next one.”
Soft, standard YouTube outro — the real CTA is implicit: 'all links in the description.' Description-link CTA is repeated 6+ times throughout the video, which is the smart move for a listicle where the conversion is a click out, not a purchase.
Word for word.
HOOKopening / re-engagementCTAthe pitchmetaphor
00:00HOOKYou know the saying ? A very beautiful saying, but that does not apply to both web and mobile apps. People definitely judge a book by its cover. I will definitely judge a site by its cover, and that's why in today's video, I'm gonna be sharing with you some fire component and template libraries that I've sourced completely for free for you. Now some of you might be new to the channel and you're not familiar. I have shared a lot of banger UI components with my audience. I'm talking about this video, this video, and this video. And today, ladies and gents, I've done it again. All of these are free. All of these are fire, and all of these are easy to use in your site. Thanks to AI. Sit back, relax. Let's get into it. First things first, we have liquid metal. Now this is just one simple thing.
00:47It's this beautiful border floating metal. Like, it just feels so premium. It feels so rich. Like, I click this and . In fact, if it's anything lower than $500 a month, I actually think it's a scam. Use this with caution and wisdom.
01:08This looks fire. By the way, all the links are in the description down below. Liquid metal justice. Again, I don't even know how to describe it. Oh, it says here it's an animated liquid metal border component. Liquid metal border component. Ladies and gents, there you have it. Completely for free for you to use. Number two, this one is actually a gift from my team to you, a gift from me to you, and these are two free templates.
01:32We have both Notia and Axis. Let's start with Axis first. Axis is your b to b SaaS for businesses. If I refresh, you're gonna see the animation nicely hover in. You're going to see the cards. You're gonna see the logos, the numbers, the people talking about you, the beautiful pricing card. This is for your b to b SaaS dreams completely for free. Light mode included as well. All you have to do is just copy this installation link, give it to your AI agent, and it's gonna take care of it for you. The second one is Notia. Now Notia
02:03originally was actually purple before . I like the dark mode better if I'm gonna be honest. But purple, everybody thinks of purple as AI now, so we added different colors. We have forest green and sunny orange. And, again, this is for your consumer app dreams. You see things animating nicely, the numbers coming in nicely. These are two beautiful templates completely for free, a gift from me to you. Again, the link is in the description style ui.dev.
02:31CTANow the third component library I wanna share with you is Skipper UI, and Skipper UI is really amazing. You know what else is amazing? The sponsor of today's video. Do you know what an NVIDIA engineer and me have in common? No. I don't make $500,000, and no. They're not handsome. But what we have in common is that every NVIDIA engineer uses CodeRabbit,
02:49CTAwhich is the sponsor of today's video. Jensen Huang himself said, we are using CodeRabbit all over Nvidia. And there's a reason for that because CodeRabbit is one of the best AI code review agents to exist. Now most of you are already familiar with the review it gives you every time you create a PR when you have CodeRabbit set up. Today, what I wanna share with you is a new workflow that I've been using, and it's their actual CLI. So I have a feature I've been working on on a super secret project, and all I'm gonna do in the feature branch is type Codebabbit.
03:18CTAAnd then what I'm going to do is I'm going to hit return. And what's going to happen is before I even make the PR, the Codebabbit review agent is going to review my code. Before you were used to getting your code reviewed at PR level, now we're even doing it at the CLI. We're not even getting to GitHub and we're going to get a review. Okay. We see that the review was complete, and there are three potential issues. Now I can click the drop down here, and let's look at this particular problem. So I get a breakdown of the review. Now there's two things I can do. I'm going to click on see, and essentially what I've done is I've copied the prompt that I can pass to my agent to fix this issue. So let's say I'm using Cloud Code. I can click paste. And if I hit enter just for you to see, this is a prompt to help me fix the issue. So instead of getting to GitHub to get code review, I can get code review here on the CLI, and that's all thanks to Codebabbit. So make sure to click the link in the description down below and check it out and make sure to use their CLI. It's awesome. Now let's get back to the video. Now Skipper UI has both free and paid components. I'm gonna show you the free components, but if you got some money on, definitely invest in the paid components. They're pretty fire. Now I'm gonna share with you some of my favorite. The first one is this image
04:28hover card pushing gliding thing. I really like it. They have a horizontal and a vertical one. I low key kinda like the vertical one, especially if you're doing something artsy fartsy. Definitely take a look at this component. Another one is the different skull animations. This is like the ain't this like the Starbucks? No. Not Starbucks. Sorry. Star Wars end credits animation, so you can use that component as well. You also have, like, cards stacking. Again, this just chef's kiss, and all of the code is here for you. Again, you just copy. You give it to your AI agent. It takes care of it for you. Know, back then, we used to write the code. Now we just tell the AI agent to just install. Right? So it's pretty simple stuff. Again, you have these nice card swipes. I really like how
05:14Skipper handles all the cards. Really nicely animated. My favorite one though, and this is one I'm definitely gonna be using, is the video player. So the video itself is playing in this little square thing. I hover over and then you see the play button, and then when I click it expands. Hopefully, that's not copyrighted music, but very clean,
05:34very beautiful. We love Skipper UI. Link is in the description. And then we have I believe this is by someone named Ali mom. Again, I apologize if I butcher your name, but couple of banger components here. First and foremost, let's talk about the shaders. You know, shaders are cool nowadays. You add a little shader in your hero section. All of these are free for you to use. You just click on code. Again, copy paste. Give it to your agent. Your agent will take care of it. Help you set up some bento grids. That's available for you as well. I did not look at device. This
06:06is fire. This is fire. So if you wanted to have an iPhone or an iPad or whatever on your page, you can easily do that. You want some patterns on your page, you can easily do that. These are basically, you know, your logo reels, like, you know, you can have your logo nicely animate. Make sure these are companies actually using your product. You got a nice typewriter effect. Right? Like, you can add this in your marketing pages. Looks pretty cool. And if you have some AI stuff on your app and you wanna add, like, glow, you know how, like, Apple intelligence, like, when you click on the thing and the Apple intelligence things pops up and it's glowing, that's basically the same thing here. But, anyway, that is Alimam. Again, the links in our description. There are more components here. Again, you have this gauge component feels very iPhone like, very clean, very nicely animated. So all that stuff, again, the links are in the description. And then you have watermelon UI. I don't know. Calling you watermelon felt wrong for a second. But my favorite one out of all the components they have, again, I wanna, for the sake of time, share with you my favorite one, Is this, like this basically feels like an Apple component. You can probably use this in some sort of onboarding flow. It's very nicely animated. Like, the click is very springy.
07:12And, again, all the code is here for your AI agent to ingest and use. There's also this, like, card swiper, so, like, you could, like, just nicely animates, very nice spring animation. Almost feels like you're using an iPhone. So highly recommend you check out watermelon UI. And then we have cult UI. Again, questionable name, but fire components. You got a couple of these colorful
07:36hero sections. One of the ones that I was actually pretty rocking with oh, it's this one right here, the family button. Like, you can see I click that nicely animates. Like, again, this might not be for every use case, but definitely you could be creative with your apps. You know, let's not build the same thing. Let's not all generate the same slop. . Yes. Everyone can ship nowadays, but ladies and gents, I am telling you, it is so easy to stand out. Just a little bit of quality, just a little bit of time investment,
08:04and your Apple stand out like no other. And finally, something for you to check out very different is this light board. Again, I wouldn't know where I would use it, but it's pretty different and creative. So make sure again to check out CultUI. They have pro components. If you got a little bit of money on, check it out. Worth the investment, but all the free stuff will be linked down below. And then you have these dot matrix loader. So this is basically if you got a site that has a lot of data that needs to be loaded in, let's make the loading fun. Let's let's make loading creative. . And you can use these different loading animations. All you have to do is click them and all the code is there. You can use the CLI. Again, give it to your AI agent. We don't write code anymore. Times have changed. Link in the description for those. And then you have
08:47componentry.fun. These are some pretty unique ones. Like, for example, this keyboard is fire. Right? You could see it's very tactile, and you can also download key press sound. So, like, every time you click, you can hear the sound. I actually did this for, um, one of my work projects ship, which is, like, our basically a place for Convex customers or people who just like Convex, use Convex to vote on the different things that they want shipped. Right? And, like, if I log in, I'll show you just quickly. You're gonna hear the click sound. Okay? I'm gonna increase the volume.
09:21It just feels nice. You know what I'm saying? Oh, another cool feature I added. And, this is about being creative. We have a spin the wheel where you get convex coins credits where you can basically vote on features. You need to place these coins to boost to basically support a feature. I know I'm not explaining it properly, but just looking to spin the wheel.
09:40Here's how I'm bet. And when I win Here comes the money. Here we go. Money talks. Here comes the money. By the way, I didn't include it originally, but the way I got the balloons to pop up is Balloon JS. Just search it on Google. It's literally just installing that, and you get to have these cool balloon animations,
09:59or you can get to have these text, which is pretty awesome. I'll make sure this is linked in the description down below. But going back to our component library, you have the keyboard, you have this flight status tracker. Again, very clean, very Apple like, very free, which is awesome. You have the GitHub, uh, tracker. Again, you can use this for a multitude of reasons, not just GitHub, a great way to actually keep your users engaged. And there's a plethora of other fire things. If you wanna be all matrix y and cool, this is available for you as well. But ladies and gents, that is pretty much it. I shared with you not one, not two, not four, not five, but nine different component libraries and templates,
10:38HOOKall free for you to make your applications fire. Now how do you go about using these? Let me actually share with you the method. Before, you would use one of these components, and you would sort of have to handwrite the code for the other components to match this. But what you can do now and, actually, maybe we're just gonna you know what? We're gonna pop up Excalidra. I was actually gonna close out for the video, but I just wanna explain to you the method. What you're going to do is you're going to download,
11:04HOOKuh, let's say this is a component. Right? You're gonna download this into your code base, and then what you're going to do is you're going to tell the AI agent, hey. Listen. Create a design system design system based on this component. Right? So what you're going to do is and this is what makes AI cool now when it comes to design is before when we downloaded a component, you would have to make sure that the rest of your site matches that component by hand. Now you could tell the AI, extract the design system from this component and make the rest of my app site look the exact same. So now you have it's much easier to design
11:43HOOKCTAreally good looking apps if you have a good source of truth, meaning if you have a good foundation. If , it becomes a problem. But if you use AI to build on that foundation, again, I'm talking about design, I think it works out great. And I've done this a couple of times where I've given it some inspo, a particular component, and it builds, uh, a design system using that component, and it's pretty good at sticking to it. Right? So let's say you wanted the glassy feel, the liquid metal feel. You download this component, and then you tell it, alright. For everything else, I want this around. Now don't make everything, you know, have the liquid metal thing. It should be unique and maybe your call to action buttons. But what I'm saying is there's no excuse to not have a beautiful sight. I hope you enjoyed this video. Make sure to like, comment, subscribe. Hit the notification bell. Hope to see you in the next one. Peace.
§ · For Joe
Steal the format.
Listicle + closing meta-method
A nine-item listicle is a great delivery vehicle, but the unlock is the 90-second meta-method at the end that turns the whole video into a tool, not just a list.
- Open with a reversed proverb. 'Don't judge a book by its cover' — then immediately violate it. Cheap, memorable, sets the stakes in 8 seconds.
- List nine items, but front-load your own product. Style UI Axis/Notia is item #2 disguised as a gift — he gets the credit-for-sharing posture *and* a top-3 promo slot.
- Bury the real payload at the end. The design-system extraction prompt is more useful than any single library — but putting it at 11:00 keeps retention all the way through.
- Pull up Excalidraw mid-video as a pattern interrupt. After 10 minutes of screen-share, switching to a whiteboard signals 'this is the important part.'
- Repeat the action verb. 'Copy. Give it to your AI agent. AI takes care of it.' Said maybe 8 times — reinforces that the install path is one-shot, no thinking required.
- Sponsor at minute 2:30, not minute 8. Audience hasn't dropped off yet, and the CodeRabbit CLI demo riffs on the same 'let AI do it' theme, so the read doesn't feel like a tonal break.
- End with 'no excuse.' Closing line is a moral instruction, not a CTA — 'there's no excuse to not have a beautiful site.' Lands harder than 'check the links below.'
§ · For You
What this could mean for you.
If you're shipping any kind of web app
Pick one free component from these nine libraries, install it via your AI agent, and let it set the entire design system for the rest of your app — you do not have to handcraft consistency anymore.
- Don't sample components from all nine libraries on the same page — you'll get visual chaos. Pick ONE library whose vibe you love and let it anchor.
- When you find your seed component, copy the CLI install URL and hand it to Claude Code or Cursor: 'install this, then extract the design system from it and apply that style to the rest of my app.'
- B2B sales page → try Style UI Axis. Consumer app shell → Style UI Notia. Hero with vibes → Liquid Metal or Ali Mam shaders. Loaders that don't feel cheap → dot-matrix loaders. Tactile micro-interaction → Watermelon UI gauge or Componentry.fun keyboard.
- Add Balloons.js anywhere a user wins something — it's a literal one-line install for instant 'celebration' moments (he uses it on a spin-the-wheel reward).
- Treat AI as a propagator of taste you provide, not a generator of taste itself. The component you pick IS your taste call — the AI just stretches it across the rest of the app.
