§ 01 · The Hook
The bait, then the rug-pull.
Every dev knows the cliché — don't judge a book by its cover. Ras Mic opens by killing it dead: your users will absolutely judge your app on sight, so the cover had better be beautiful. What follows is a fast, live-demo tour of four component libraries that make 'no excuse for ugly' the only reasonable position.
What the video promised.
stated at 00:10 "I'm gonna be showing you four component libraries that you can use to build sleek, beautiful applications that your users will love and will return and will want to use continuously." delivered at 08:22
Where the time goes.
00:00 – 00:33
01 · Hook — the cover lie
Inverts 'don't judge a book by its cover' to argue users always judge apps visually. Sets up the 4-library premise.
00:33 – 02:43
02 · Library 1 — Kokonut UI
Niche/distinctive component library. Demos: Liquid Glass music player, Apple Activity Card, Bento Grid, Card Flip, Stack of Cards, Currency Transfer, AI State Loading, AI Voice, text animations (typing, matrix, shimmer, swoosh, glitch).
02:43 – 03:17
03 · Library 2 — Style UI (coming soon)
Ras Mic's own blocks-and-templates library. Waitlist at styleui.dev. Self-promotional but low-pressure — just a waitlist mention.
03:17 – 05:18
04 · Library 3 — Cult UI
Inspired by the Family crypto wallet app. Demos: FamilyDrawer (smooth animated sheet drawers), FamilyButton, ExpandableScreen (fullscreen waitlist modal), BrowserWindow (Chrome/Safari mockup with controls), 3D Image Carousel, Hover Video Player, ShiftCard.
05:18 – 08:22
05 · Library 4 — Motion Primitives
Animation-first UI kit (Framer Motion + Tailwind CSS). Demos: Animated Number, Sliding Number, Toolbar Dynamic/Expandable, Dock (macOS-style magnification), Glow Effect, Image Comparison (drag/hover/spring variants), Scroll Progress bar, Magnetic Button, Morphing Dialog, Morphing Popover. Bonus: promptkit.com for AI building blocks.
08:22 – 08:55
06 · CTA + outro
Subscribe push, Style UI waitlist reminder, sign-off.
Visual structure at a glance.
Named ideas worth stealing.
00:33
list
Kokonut UI
- Liquid Glass music player
- Apple Activity Card
- Bento Grid
- Card Flip
- Stack of Cards
- Currency Transfer
- AI State Loading
- AI Voice
- Text animations (typing/matrix/shimmer/swoosh/glitch/slice/scroll)
Niche component library focusing on distinctive, hard-to-build-from-scratch components rather than generic form/layout kits.
Steal for any app that needs a wow-factor landing section or AI-specific UI state indicators
03:17
list
Cult UI
- FamilyDrawer
- FamilyButton
- ExpandableScreen
- BrowserWindow
- 3D Carousel
- Hover Video Player
- ShiftCard
Web port of UI patterns from the Family crypto wallet app — the gold standard of mobile app design aesthetics brought to web.
Steal for waitlist pages, product demos, SaaS dashboards needing premium mobile-app-grade feel
05:18
list
Motion Primitives
- Animated Number
- Sliding Number
- Toolbar Dynamic/Expandable
- Dock
- Glow Effect
- Image Comparison
- Scroll Progress
- Magnetic Button
- Morphing Dialog
- Morphing Popover
Animation-first kit built on Framer Motion + Tailwind. Every component prioritises motion quality — bouncy spring physics, morphing transitions, cursor magnetism.
Steal for any landing page that needs to feel alive — stats sections, social-proof numbers, feature comparison sliders
07:38
list
promptkit.com
- Chain of Thought
- Chat Container
- Code Block
- Loader variants
AI-specific building blocks discovered inside Motion Primitives nav. Fills the gap for AI app UI patterns that generic component kits don't address.
Steal for any AI-powered feature — loading states, chain-of-thought UX, chat interfaces
Lines you could clip.
00:08
"When it comes to web and mobile apps, we are 100% judging the book by its cover."
08:28
"You have no excuse on having ugly looking web applications. You literally have all these component libraries linked in the description down below."
01:26
"There are the general component libraries that have all the components. There are the blocks templates component libraries, and then there's the unique component libraries. And this is one of those."
How they spent the runtime.
Hook length33s
Info densityhigh
Filler5%
Things they pointed at.
03:17productFamily (crypto wallet app)
How they asked for the click.
08:28
subscribe
"Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one. Peace."
Standard YouTube outro. Also includes a soft Style UI waitlist push at t=163 mid-video and a repeat at t=520.
Word for word.
HOOK opening / re-engagementCTA the pitch analogy story
00:00HOOKI'm sure you've heard of the age old saying, do not judge a book by its cover. But unfortunately, when it comes to web and mobile apps, we are 100% judging the book by its cover. That's why in today's video, I'm gonna be showing you four component libraries that you can use to build sleek, beautiful applications that your users will love and will return and will want to use continuously.
00:24HOOKBecause remember, they're going to judge the book by the cover, so why not make the cover beautiful. Sit back, relax, let's get into it. First UI library is Coconut UI. This is a collection of stunning components and I will say this is one of those component libraries that has the unique ones. Right? They're like the general component libraries that have all the components. There are the blocks templates component libraries, and then there's the unique component component libraries. And this is one of those. For example, you have the slide text button, which I really like. Right? I slide and it says click to see more. And then you have this liquid glass
00:58music player. Right? You can drop this in using their NPX command or BunX command or you can open this in v zero or straight up just copy the code. They also have the Apple activity card. Right? The activity rings. If you're on the Apple watch or use the health app, you'll know this component. And this is a pretty hard one to build. Right? So you can build on top of this component, change it up. Again, NPX command or you can copy the code. Uh, Coconut UI also has beautiful bento grids, a nice bento grid on your homepage.
01:29It just does something, man. So you can see these nice little animations over here. I can see the code, although it'd be nice if there was, um, like highlighting, uh, syntax highlighting, which I'm sure you can add yourself using AI. And then we have card flip, animates beautifully, card looks sleek. Oh, this is a good one. Uh, the stack of cards. You click and the the card split. You click and then it goes back in the order it was. And then you have this component. Say you're building something to do with currency transfers. Right? You just saw that animation right there. Super sleek and clean. Coconut UI also has some AI specific components like an input selector,
02:06uh, search. You have here, like, let's say you have some tool calling happening. You wanna have some loading state in the chat. You can use this. Um, you can use this as well. And then they have an AI voice component. Um, eleven Labs also has something similar like this, so you can pick and choose. And you have a couple text animations here, one with scroll, typing, matrix,
02:26CTAdynamic, the glitch effect, shimmer, slice text, swoosh. And then last but not least, you have this profile drop down from all the components that I like. There's plenty more here. Check it out yourself. The link is in the description, Coconut UI. Now second up, we have style UI. It says create beautiful UI with our blocks and templates, but this one is coming soon. Someone very handsome that you may have seen before, I'll put his picture right here, is working on this with his team. Expect blocks
02:55CTAand templates. They're going to be super clean and super fresh, and I can't wait for this person again to get them into your hands. But to be on the wait list to make sure you're alerted when these drop, make sure to go to styleui.dev and enter the wait list. Make sure to follow me on x as well. That's where I'll be announcing it. I'm sure you're going to love these ones.
03:17Next up, we have Cult UI. I don't really feel comfortable with the name, but there are a couple components that I found fresh here. The first one being the family drawer. Now if you're not familiar with family, it's this crypto wallet app. But in my opinion, it's the most beautifully designed, beautifully architected app ever. The animations
03:36to the haptic feedback to how the components look, it's an absolutely dream of an app. And one of the beautiful things they designed are these drawers that just smoothly animate, and Cult UI has brought these into the web. I particularly like the open custom drawer one. That's a really good one. Again, you have the family button as well. When you click that, this nicely animates.
04:00I really like this. You can definitely use this in your web apps. Another cool one that I liked was the expandable screen. Say you have a waitlist page, you can click get early access, and it's like a model that takes over the entire page. User can fill it up, then close it, nicely animates back. Now another one I really like is the browser window. This is a customizable browser window mock up component with support for Chrome, Safari, and generic style. So you can customize how this looks. You can make this look like Safari, Chrome. You could specify the URL. You can choose to show the address bar. We can make this super small or extra large if you want. You can have the sidebar be to the left, to the right, and there are these presets as well that you can select, but a really nice and sleek component, definitely something you should add on your web apps. Obviously, if it makes sense. This three d carousel of images is pretty cool. And again, just to set this up, all you do is copy the command and if you're building on chat scene, which I'm sure you are, you can have this set up easily. And then they have a hover video player where you see the component, I can hover over this and now it becomes a video player. This is pretty sleek. I actually like this. I don't like the default video player with HTML,
05:07uh, the video tag, so this is a pretty sleek component. And then you have the shift card component where if you hover over, you see the image shift to the right, and then this pop up slide beautifully. Again, there are plenty of components in Cult UI. I'll have the link down in the description below. Check it out for yourself. And then we have motion primitives. UI kit to make beautiful animated interfaces faster. So there's an emphasis on beautiful motion and animation
05:35with motion primitives. For example, let's say the animated number. If you want to animate some GitHub stars that you wanna show off on your page or some dollar dollar bills, this is a great component for you to have. You have then the sliding number. This is just beautiful stuff. Again, all the code is right there for you. We also have the dynamic toolbar where if I click on this, you notice how it nicely shifts.
05:59Let's click on expandable. If I click on this, you see it expands from bottom to top. This, again, you can have a nice little toolbar or like even a dock using this component. What we're going to do is we're going to click on components on the top right, and then we're going to click on dock. I really like the dock component. You can style this with whatever icons you want, but that nice animation as you hover over it is beautiful. You have this glow effect right here. You can have it on buttons. But also what I like is let watch this. When I click submit, the component glows. Right? So this is something you could do with some sort of submission.
06:31And then you have this, like you can use this as, a before and after, or you can use this as a, like, a slider to show, like, if you use my tool, this is what it looks like. If you don't, this is what it looks like. Really sleek and simple. You can also have it on hover. So this is where I clicked on the, like, the line, the separator, and I'm dragging it. This one, I just hover, and then I when I go left and right, it follows. This one sorta has a spring motion where, like, notice how it's bouncy, like, it catches up. And then you can also have a custom slider with this. You can have a progress
07:03bar. Right? That's on the nav bar. That's on the top. So that'll show people how much progress they've made in reading an article or going through a page. They also have this magnetic button where, like, if I hover over it, it you notice how it sort of follows my cursor. Um, there's also where you can see the text is more so floating in the button. Like, these little things are just so immaculate and beautiful, and they just enhance the user experience of your applications.
07:30Oh, this is a morphing dialogue. So notice how, like, let's say this is like a notification that pops up. I can click on it and and that dialogue just animates beautifully. You can have that with images as well. You can have this with cards as well. And then you have a morphing pop over. Let's say you are, like, editing some settings, a profile setting, whatever it is, you can have it just pop up there, click submit, and then it closes back. Here, it's telling you you can customize the transitions however you want. You can have a text area pop up. There are just a lot of these primitives that you can find with motion primitives that I find super useful when developing web apps. And then I noticed
08:05CTAwhen I clicked on IA, promptkit.com popped up, and this is for AI applications. So if you're building an AI app, they have building blocks for you to use. Like, for example, their chain of thought component where you can show how the model is processing the information.
08:22CTAYou have a chat container here. You have code blocks. Again, I'll link all of this stuff in the description down below. All this stuff is copy paste for you to use. So please, you have no excuse on having ugly looking web applications. You literally have all these component libraries linked in the description down below. And, I want to let you know I will be dropping my very own style ui.dev
08:44CTAvery soon. Make sure to sign up for the wait list link in the descriptions down below. Thank you so much for watching this video. Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one. Peace.
— full transcript
§ 05 · For Joe
Four libraries. Zero excuses.
Swipe file for builders
The best UI trick isn't building better components — it's knowing which copy-paste library already built them for you.
- Kokonut UI for distinctive wow-factor components you'd never build from scratch (activity rings, liquid glass, currency transfer flows).
- Cult UI when you want your web app to feel like a premium mobile app — FamilyDrawer and ExpandableScreen alone are worth the install.
- Motion Primitives for landing pages that need to feel alive — image comparison sliders, magnetic buttons, morphing modals.
- promptkit.com is the hidden gem: AI-specific components (chain-of-thought, chat container, loaders) that generic kits completely ignore.
- All four are copy-paste or NPX — the barrier to polished UI is now zero. Use this as a checklist before shipping any public-facing page.
- The 'unique component library' category (Kokonut's lane) is underserved content — a video tourting only unusual/hard-to-build components would crush.
§ 05 · For You
What a polished app actually costs you.
For the non-dev viewer
Beautiful apps aren't built from scratch anymore — they're assembled from free, open-source component libraries that any developer can drop in.
- If your developer says 'that animation would take weeks' — show them this video. These components are copy-paste.
- When evaluating SaaS tools, a polished UI is no longer a signal of quality engineering — it might just mean they used Motion Primitives.
- The 'wow' components you see on trendy apps (morphing dialogs, spring-physics sliders, magnetic buttons) are publicly available for free.
- Next time you see an Apple Watch-style activity ring on a web app, now you know: that's probably Kokonut UI, not custom engineering.
